feat: Enhance session item UI

app/components/public/session-item.hbs

@@ -5,6 +5,12 @@
       <h3 class="ui header" id="session-id-{{@session.id}}" style={{css color=(text-color @session.track.color)}}>
         {{@session.title}}
         <span style={{css float='right'}}>
+          {{#if @session.slidesUrl}}
+            <button class="ui basic {{text-color @session.track.color 'basic' 'inverted'}} button" style={{css color=(text-color @session.track.color 'grey' 'lightgrey')}} {{action this.goToSlides}}>
+              <i class="icon {{if this.slidesUploaded 'download' 'linkify'}}"></i>
+              {{if this.slidesUploaded (t 'Download Slides') (t 'Link to Slides')}}
+            </button>
+          {{/if}}
           {{#if @session.microlocation.hasVideoStream}}
             <button class="ui basic {{text-color @session.track.color 'basic' 'inverted'}} button" style={{css color=(text-color @session.track.color 'grey' 'lightgrey')}} {{action this.goToStream}}>
               <i class="icon video"></i>
@@ -27,7 +33,7 @@
         <div class="left floated twelve wide column">
           {{#if @session.startsAt}}
             <div class=""><i class="icon map marker alternate"></i>{{@session.microlocation.name}}</div>
-            <div class="small text"><i class="wait icon"></i>{{general-date @session.startsAt tz=@timezone}} - {{general-date @session.endsAt tz=@timezone}}</div>
+            <div class="small text"><i class="wait icon"></i>{{general-date @session.startsAt 'D MMM, YYYY h:mm A (z)' tz=@timezone}}</div>
           {{/if}}
         </div>
       {{else}}
@@ -40,7 +46,7 @@
            </div>
            <div class="left floated nine wide column">
              {{#each @session.speakers as |speaker|}}
-                {{speaker.name}} ({{speaker.position}}, {{speaker.organisation}})
+                {{speaker.name}} {{#if speaker.positionOrganisation}}({{speaker.positionOrganisation}}){{/if}}
                 <br>
               {{/each}}
             </div>
@@ -66,13 +72,6 @@
         <div class="column" style={{css display='flex' align-items='center' flex-direction='column'}}>
           {{#if (or this.pdfLink this.pptLink)}}
             <iframe title="session-slides" class="slide-iframe mb-2" width="100%" frameborder="0" src="https://docs.google.com/gview?url={{ @session.slidesUrl }}&embedded=true"></iframe>
-          {{else if @session.slidesUrl}}
-            <a class="mb-2" href={{ @session.slidesUrl }} target="_blank" rel="noopener noreferrer">
-              <button class="ui labeled icon button">
-                <i class="file powerpoint icon"></i>
-                {{t 'Slides'}}
-              </button>
-            </a>
           {{/if}}
 
           {{#if this.youtubeLink}}
@@ -119,6 +118,8 @@
         <br>
         {{speaker.name}}
         <br>
+        {{speaker.positionOrganisation}}
+        <br>
         {{#if speaker.shortBiography}}
           {{sanitize speaker.shortBiography}}
         {{else if speaker.longBiography}}

app/components/public/session-item.js

@@ -1,12 +1,14 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 import { extractYoutubeUrl } from 'open-event-frontend/utils/url';
 
 export default class SessionItem extends Component {
   @service router;
 
-  hideImage = false;
+  @tracked
+  hideImage = this.args.expanded;
 
   get youtubeLink() {
     return extractYoutubeUrl(this.args.session.videoUrl);
@@ -21,6 +23,11 @@ export default class SessionItem extends Component {
     return slidesUrl?.indexOf('.pptx') > -1 || slidesUrl?.indexOf('.ppt') > -1;
   }
 
+  get slidesUploaded() {
+    const url = this.args.session.slidesUrl;
+    return url.startsWith('https://open-event-api-dev.herokuapp.com') || url.startsWith('https://api.eventyay.com');
+  }
+
   @action
   hideSpeakerImage() {
     this.hideImage = !this.hideImage;
@@ -29,6 +36,11 @@ export default class SessionItem extends Component {
     }
   }
 
+  @action
+  goToSlides() {
+    window.open(this.args.session.slidesUrl, '_blank');
+  }
+
   @action
   goToStream() {
     const url = this.router.urlFor('public.stream.view', this.args.event?.identifier ?? this.args.session.get('event.identifier'), this.args.session.get('microlocation.videoStream.slugName'), this.args.session.get('microlocation.videoStream.id'));

app/models/speaker.js

@@ -1,6 +1,7 @@
 import attr from 'ember-data/attr';
 import ModelBase from 'open-event-frontend/models/base';
 import { belongsTo, hasMany } from 'ember-data/relationships';
+import { computed } from '@ember/object';
 
 export default class Speaker extends ModelBase.extend({
 
@@ -43,6 +44,10 @@ export default class Speaker extends ModelBase.extend({
   event    : belongsTo('event'),
   sessions : hasMany('session'),
 
+  positionOrganisation: computed('position', 'organization', function() {
+    return [this.position, this.organisation].filter(Boolean).join(', ');
+  }),
+
   ready() {
     if (!this.complexFieldValues) {
       this.complexFieldValues = {};