Merge branch 'development' into patch-6

Author: Raunaksingh100

app/adapters/application.js

@@ -57,6 +57,21 @@ export default JSONAPIAdapter.extend(HasManyQueryAdapterMixin, FastbootAdapter,
     return this._super(store, type, query);
   },
 
+  ajaxOptions(url, type) {
+    const request = this._super(...arguments);
+
+    // The requests with public=true will not be authorized
+    if (type === 'GET') {
+      if (request.data.public) {delete request.headers[ENV['ember-simple-auth-token'].authorizationHeaderName]}
+
+      if (ENV.noCache === 'true') {
+        request.data.nocache = true;
+      }
+    }
+
+    return request;
+  },
+
   /**
    This method is called for every response that the adapter receives from the
    API. If the response has a 401 status code it invalidates the session (see

app/components/footer-main.js

@@ -27,6 +27,6 @@ export default class FooterMain extends Component {
   }
 
   async didInsertElement() {
-    this.set('pages', sortBy(await this.cache.findAll('page'), 'index'));
+    this.set('pages', sortBy((await this.cache.query('pages', 'page', { public: true })).toArray(), 'index'));
   }
 }

app/components/forms/wizard/sessions-speakers-step.js

@@ -139,8 +139,13 @@ export default Component.extend(EventWizardMixin, FormMixin, {
     return grouped;
   }),
 
-  microlocations: computed('data.microlocations.@each.isDeleted', function() {
-    return this.data.event.microlocations.filterBy('isDeleted', false);
+  microlocations: computed('data.microlocations.@each.isDeleted', 'data.microlocations.@each.position', function() {
+    const sortedRooms = this.data.event.microlocations.sortBy('position').filterBy('isDeleted', false);
+    sortedRooms.forEach((room, idx) => {
+      room.set('position', idx);
+    });
+
+    return sortedRooms;
   }),
 
   complexCustomForms: computed('data.customForms.@each.isComplex', function() {
@@ -183,9 +188,6 @@ export default Component.extend(EventWizardMixin, FormMixin, {
         case 'track':
           this.data.tracks.addObject(this.store.createRecord('track'));
           break;
-        case 'microlocation':
-          this.data.microlocations.addObject(this.store.createRecord('microlocation'));
-          break;
       }
     },
     addCustomField() {
@@ -197,6 +199,27 @@ export default Component.extend(EventWizardMixin, FormMixin, {
     removeField(field) {
       this.data.customForms.removeObject(field);
     },
+    addRoom(index) {
+      this.microlocations.forEach(room => {
+        const pos = room.get('position');
+        pos > index && room.set('position', pos + 1);
+      });
+      this.data.event.microlocations.addObject(this.store.createRecord('microlocation', { position: index + 1 }));
+    },
+    removeRoom(room, index) {
+      room.deleteRecord();
+      this.microlocations.forEach(item => {
+        const pos = item.get('position');
+        pos > index && item.set('position', pos - 1);
+      });
+    },
+    moveRoom(item, direction) {
+      const idx = item.get('position');
+      const otherIdx = direction === 'up' ? (idx - 1) : (idx + 1);
+      const other = this.microlocations.find(item => item.get('position') === otherIdx);
+      other.set('position', idx);
+      item.set('position', otherIdx);
+    },
     resetCFS() {
       this.set('data.speakersCall.announcement', null);
     },

app/components/public/add-to-calender.hbs

@@ -3,9 +3,9 @@
     <i class="clock alternate outline icon pt-1"></i>
     <div class="content">
       {{#if this.isSingleDay}}
-        {{general-date @event.startsAt @event.timezone "dddd, MMMM DD, YYYY"}}<br>{{general-date @event.startsAt @event.timezone "h:mm A"}} {{t 'to'}} {{general-date @event.endsAt @event.timezone "h:mm A"}} 
+        {{general-date @event.startsAt "dddd, D MMMM, YYYY" tz=@event.timezone}}<br>{{general-date @event.startsAt "h:mm A" tz=@event.timezone}} {{t 'to'}} {{general-date @event.endsAt "h:mm A" tz=@event.timezone}} 
       {{else}}
-        {{general-date @event.startsAt @event.timezone "dddd, MMMM DD, YYYY h:mm A"}} {{t 'to'}} {{general-date @event.endsAt @event.timezone "dddd, MMMM DD, YYYY h:mm A"}} 
+        {{general-date @event.startsAt "dddd, D MMMM, YYYY h:mm A" tz=@event.timezone}} {{t 'to'}} {{general-date @event.endsAt "dddd, D MMMM, YYYY h:mm A" tz=@event.timezone}} 
       {{/if}}
       ({{this.timezone}})
       <br>

app/components/public/call-for-speakers.js

@@ -13,6 +13,11 @@ export default class CallForSpeakers extends Component {
     if (this.session.isAuthenticated) {
       this.router.transitionTo('public.cfs.new-speaker');
     } else {
+      this.flashMessages.add({
+        message           : 'In order to add Speaker details you need to login',
+        type              : 'info',
+        preventDuplicates : true
+      });
       this.set('isLoginModalOpen', true);
     }
   }

app/components/public/session-item.hbs

@@ -1,12 +1,26 @@
+{{!-- template-lint-disable no-nested-interactive  --}}
 <UiAccordion class="segment p-0" style={{css background-color=@session.track.color border-color='lightgray'}}>
   <div class="title p-4" {{action 'hideSpeakerImage'}} role="button" style={{css color=(text-color @session.track.color)}}>
     <div class="ui">
       <h3 class="ui header" id="session-id-{{@session.id}}" style={{css color=(text-color @session.track.color)}}>
         {{@session.title}}
-        {{#unless @hideSessionLink}}
-          {{!-- template-lint-disable no-nested-interactive  --}}
-          <a href="{{href-to 'public.session.view' (or @event.identifier @session.event.identifier) @session.id}}" style={{css float='right' color=(text-color @session.track.color 'grey' 'lightgrey')}}><i class="share icon"></i></a>
-        {{/unless}}
+        <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>
+              {{t 'Join Video'}}
+            </button>
+          {{/if}}
+          {{#unless @hideSessionLink}}
+            <a role="button" href="{{href-to 'public.session.view' (or @event.identifier @session.event.identifier) @session.id}}" style={{css color=(text-color @session.track.color 'grey' 'lightgrey')}}><i class="share icon"></i></a>
+          {{/unless}}
+        </span>
         <div class="sub header" style={{css color=(text-color @session.track.color) opacity=0.6}}>
           {{@session.sessionType.name}}
         </div>
@@ -19,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 @timezone}} - {{general-date @session.endsAt @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}}
@@ -32,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>
@@ -41,19 +55,18 @@
         <div class="right floated four 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 @timezone 'hh:mm a / DD-MM-YYYY (z)'}}</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>
       {{/if}}
-
-      <div class="row">
-        <div class="column session-description">
-          {{sanitize @session.shortAbstract}}
-        </div>
-      </div>
     </div>
   </div>
   <div class="content pt-0 p-4 rounded-t-none {{if @expanded 'active'}}" style={{css background-color='white' border-radius='0.2rem'}}>
+    <div class="ui pt-4 row">
+      <div class="column session-description">
+        {{sanitize @session.shortAbstract}}
+      </div>
+    </div>
     {{#if (and @expanded (or @session.slidesUrl @session.videoUrl))}}
       <div class="row p-4">
         <div class="column" style={{css display='flex' align-items='center' flex-direction='column'}}>
@@ -81,13 +94,39 @@
         </div>
       </div>
     {{/if}}
+
+    {{#if @session.microlocation.hasVideoStream}}
+      <p style="white-space: pre-line;">
+        <a class="mt-2" href="{{href-to 'public.stream.view' (or @event.identifier @session.event.identifier) @session.microlocation.videoStream.slugName @session.microlocation.videoStream}}" target="_blank" rel="noopener">{{t 'Join Video Channel'}}</a>
+        {{#if @session.microlocation.videoStream.password}}
+          <div class="d-flex items-center">
+            <span>{{t 'Password'}}: </span>
+            <UiPopup @on="click" @content={{t "Copied to clipboard"}} @position="bottom right" style="white-space: normal;">
+              <CopyButton @clipboardText={{@session.microlocation.videoStream.password}} class="ui basic segments">
+                <div class="ui left labeled button">
+                  <div class="ui basic label">
+                    {{@session.microlocation.videoStream.password}}
+                  </div>
+                  <div class="ui icon button">
+                    <i class="copy icon"></i>
+                  </div>
+                </div>
+              </CopyButton>
+            </UiPopup>
+          </div>
+        {{/if}}
+        {{@session.microlocation.videoStream.additionalInformation}}
+      </p>
+    {{/if}}
 
     {{#each @session.speakers as |speaker|}}
       <img alt="speaker" class="ui tiny avatar image mt-8" src="{{if speaker.thumbnailImageUrl speaker.thumbnailImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">
       <p>
         <br>
         {{speaker.name}}
         <br>
+        {{speaker.positionOrganisation}}
+        <br>
         {{#if speaker.shortBiography}}
           {{sanitize speaker.shortBiography}}
         {{else if speaker.longBiography}}

app/components/public/session-item.js

@@ -1,9 +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 {
-  hideImage = false;
+  @service router;
+
+  @tracked
+  hideImage = this.args.expanded;
 
   get youtubeLink() {
     return extractYoutubeUrl(this.args.session.videoUrl);
@@ -18,11 +23,27 @@ 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;
     if (!this.args.session.speakers.length) {
       this.hideImage = false;
     }
   }
+
+  @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'));
+    window.open(url, '_blank');
+  }
 }

app/components/public/stream/video-stream.hbs

@@ -0,0 +1,3 @@
+<div {{did-insert this.setup}}>
+  {{@videoStream.name}}
+</div>

app/components/public/stream/video-stream.ts

@@ -0,0 +1,88 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import VideoStream from 'open-event-frontend/models/video-stream';
+import { getScript } from 'open-event-frontend/utils/loader';
+import AuthManagerService from 'open-event-frontend/services/auth-manager';
+import UrlParser from 'url-parse';
+
+declare global {
+  interface Window {
+    JitsiMeetExternalAPI: any;
+  }
+}
+
+interface Args {
+  videoStream: VideoStream
+}
+
+export default class PublicStreamVideoStream extends Component<Args> {
+
+  @service
+  authManager!: AuthManagerService
+
+  app: HTMLElement | null = null
+
+  getRoomName(parsedUrl: UrlParser): string {
+    return parsedUrl.pathname.slice(1); // drop leading slash
+  }
+
+  isJitsi(parsedUrl: UrlParser): boolean {
+    return parsedUrl.host.endsWith('jit.si');
+  }
+
+  @action
+  async setup(): Promise<void> {
+    const stream = this.args.videoStream;
+
+    const parsedUrl = new UrlParser(stream.url, true);
+
+    this.app = (document.querySelector('.ember-application') as HTMLElement);
+    this.app.innerHTML = '<div class="ui active centered inline loader"></div>';
+
+    if (this.isJitsi(parsedUrl)) {
+      await this.setupJitsi(stream, parsedUrl);
+    } else {
+      location.href = stream.url;
+    }
+  }
+
+  async setupJitsi(stream: VideoStream, parsedUrl: UrlParser): Promise<void> {
+    const app = (document.querySelector('.ember-application') as HTMLElement);
+    app.innerHTML = '<div class="ui active centered inline loader"></div>';
+    await getScript(parsedUrl.origin + '/external_api.js');
+    const domain = parsedUrl.host;
+    const options = {
+      roomName   : this.getRoomName(parsedUrl),
+      parentNode : document.querySelector('.ember-application'),
+      userInfo   : {
+        email       : this.authManager.currentUser.email,
+        displayName : this.authManager.currentUser.fullName
+      },
+      configOverwrite: {
+        prejoinPageEnabled  : false,
+        startWithAudioMuted : true,
+        startWithVideoMuted : true
+      },
+      interfaceConfigOverwrite: {
+        HIDE_INVITE_MORE_HEADER: true
+      }
+    };
+    (this.app as HTMLElement).innerHTML = '';
+    const api = new window.JitsiMeetExternalAPI(domain, options);
+
+    api.executeCommand('subject', stream.name);
+
+    if (stream.password) {
+      api.addEventListener('participantRoleChanged', (event: any) => {
+        if (event.role === 'moderator') {
+          api.executeCommand('password', stream.password);
+        }
+      });
+      // join a protected channel
+      api.on('passwordRequired', () => {
+        api.executeCommand('password', stream.password);
+      });
+    }
+  }
+}

app/components/ui-table/cell/cell-date.hbs

@@ -1 +1 @@
-{{general-date @record @props.options.timezone @props.options.dateFormat}}
+{{general-date @record @props.options.dateFormat tz=@props.options.timezone}}