feat: Add Jitsi Integration

app/components/public/session-item.hbs

@@ -1,12 +1,20 @@
+{{!-- 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.microlocation.videoStream}}
+            <a role="button" href="{{href-to 'public.stream.view' (or @event.identifier @session.event.identifier) @session.microlocation.videoStream}}" target="_blank"
+              style={{css color=(text-color @session.track.color 'grey' 'lightgrey')}} rel="noopener" {{action this.goToStream}}>
+              <i class="video icon"></i>
+            </a>
+          {{/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>
@@ -81,6 +89,12 @@
         </div>
       </div>
     {{/if}}
+
+    {{#if @session.microlocation.videoStream.additionalInformation}}
+      <p style="white-space: pre-line;">
+        {{@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')}}">

app/components/public/session-item.js

@@ -25,4 +25,9 @@ export default class SessionItem extends Component {
       this.hideImage = false;
     }
   }
+
+  @action
+  goToStream() {
+    window.open(`/e/${this.args.event?.identifier ?? this.args.session.get('event.identifier')}/stream/${this.args.session.get('microlocation.videoStream.id')}`, '_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,84 @@
+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
+      },
+      interfaceConfigOverwrite: {
+        HIDE_INVITE_MORE_HEADER: true
+      }
+    };
+    (this.app as HTMLElement).innerHTML = '';
+    const api = new window.JitsiMeetExternalAPI(domain, options);
+
+    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/controllers/events/list.js

@@ -6,7 +6,7 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
   sort_by = 'starts-at';
 
   sort_dir = 'DSC';
-  
+
   get columns() {
     return [
       {

app/router.js

@@ -45,6 +45,9 @@ Router.map(function() {
     this.route('session', function() {
       this.route('view', { path: '/:session_id' });
     });
+    this.route('stream', function() {
+      this.route('view', { path: '/:stream_id' });
+    });
     this.route('speaker', function() {
       this.route('view', { path: '/:speaker_id' });
     });

app/routes/public/sessions.js

@@ -28,15 +28,6 @@ export default class SessionsRoute extends Route {
     const filterOptions = [
       {
         and: [
-          {
-            name : 'event',
-            op   : 'has',
-            val  : {
-              name : 'identifier',
-              op   : 'eq',
-              val  : eventDetails.id
-            }
-          },
           {
             or: [
               {
@@ -98,14 +89,15 @@ export default class SessionsRoute extends Route {
 
     return {
       event   : eventDetails,
-      session : await this.infinity.model('session', {
-        include      : 'track,speakers,session-type,microlocation',
+      session : await this.infinity.model('sessions', {
+        include      : 'track,speakers,session-type,microlocation.video-stream',
         filter       : filterOptions,
         sort         : params.sort || 'starts-at',
         perPage      : 6,
         startingPage : 1,
         perPageParam : 'page[size]',
-        pageParam    : 'page[number]'
+        pageParam    : 'page[number]',
+        store        : eventDetails
       })
     };
   }

app/routes/public/stream/view.ts

@@ -0,0 +1,12 @@
+import Route from '@ember/routing/route';
+import VideoStream from 'open-event-frontend/models/video-stream';
+
+export default class PublicStreamView extends Route {
+  titleToken(model: VideoStream): string {
+    return model.name;
+  }
+
+  model(params: { stream_id: number }): VideoStream {
+    return this.store.findRecord('video-stream', params.stream_id);
+  }
+}

app/templates/public/stream/view.hbs

@@ -0,0 +1 @@
+<Public::Stream::VideoStream @videoStream={{this.model}} />

tests/unit/routes/public/stream/view-test.ts

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | public/stream/view', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    const route = this.owner.lookup('route:public/stream/view');
+    assert.ok(route);
+  });
+});