feat: Add video and slides to session

app/components/public/session-item.hbs

@@ -5,7 +5,7 @@
         {{@session.title}}
         {{#unless @hideSessionLink}}
           {{!-- template-lint-disable no-nested-interactive  --}}
-          <a href="{{href-to 'public.session.view' (or @session.event.identifier @event.identifier) @session.id}}" style={{css float='right' color=(text-color @session.track.color 'grey' 'lightgrey')}}><i class="share icon"></i></a>
+          <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}}
         <div class="sub header" style={{css color=(text-color @session.track.color) opacity=0.6}}>
           {{@session.sessionType.name}}
@@ -46,6 +46,34 @@
     </div>
   </div>
   <div class="content pt-0 p-4 rounded-t-none {{if @expanded 'active'}}" style={{css background-color='white' border-radius='0.2rem'}}>
+    {{#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'}}>
+          {{#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}}
+            <iframe title="youtube-session-video" class="video-iframe" width="100%" src="https://www.youtube.com/embed/{{ this.youtubeLink }}" frameborder="0" allowfullscreen></iframe>
+          {{else if @session.videoUrl}}
+            <a class="mb-2" href={{ @session.videoUrl }} target="_blank" rel="noopener noreferrer">
+              <button class="ui labeled icon button">
+                <i class="video icon"></i>
+                {{t 'Video'}}
+              </button>
+            </a>
+          {{/if}}
+        </div>
+      </div>
+    {{/if}}
+
     {{#each @session.speakers as |speaker|}}
       <div class="ui divider"></div>
       <img alt="speaker" class="ui tiny avatar image" src="{{if speaker.thumbnailImageUrl speaker.thumbnailImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">

app/components/public/session-item.js

@@ -1,9 +1,23 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
+import { extractYoutubeUrl } from 'open-event-frontend/utils/url';
 
 export default class SessionItem extends Component {
   hideImage = false;
 
+  get youtubeLink() {
+    return extractYoutubeUrl(this.args.session.videoUrl);
+  }
+
+  get pdfLink() {
+    return this.args.session.slidesUrl?.indexOf('.pdf') > -1;
+  }
+
+  get pptLink() {
+    const { slidesUrl } = this.args.session;
+    return slidesUrl?.indexOf('.pptx') > -1 || slidesUrl?.indexOf('.ppt') > -1;
+  }
+
   @action
   hideSpeakerImage() {
     this.hideImage = !this.hideImage;

app/models/setting.js

@@ -102,16 +102,16 @@ export default ModelBase.extend({
    * Computed properties
    */
 
-  segmentedSupportUrl       : computedSegmentedLink.bind(this)('supportUrl'),
-  segmentedFacebookUrl      : computedSegmentedLink.bind(this)('facebookUrl'),
-  segmentedInstagramUrl     : computedSegmentedLink.bind(this)('instagramUrl'),
-  segmentedPatreonUrl       : computedSegmentedLink.bind(this)('patreonUrl'),
-  segmentedTwitterUrl       : computedSegmentedLink.bind(this)('twitterUrl'),
-  segmentedGoogleUrl        : computedSegmentedLink.bind(this)('googleUrl'),
-  segmentedYoutubeUrl       : computedSegmentedLink.bind(this)('youtubeUrl'),
-  segmentedGithubUrl        : computedSegmentedLink.bind(this)('githubUrl'),
-  segmentedAndroidAppUrl    : computedSegmentedLink.bind(this)('androidAppUrl'),
-  segmentedWebAppUrl        : computedSegmentedLink.bind(this)('webAppUrl'),
-  segmentedFrontendUrl      : computedSegmentedLink.bind(this)('frontendUrl'),
-  segmentedStaticDomain     : computedSegmentedLink.bind(this)('staticDomain')
+  segmentedSupportUrl    : computedSegmentedLink.bind(this)('supportUrl'),
+  segmentedFacebookUrl   : computedSegmentedLink.bind(this)('facebookUrl'),
+  segmentedInstagramUrl  : computedSegmentedLink.bind(this)('instagramUrl'),
+  segmentedPatreonUrl    : computedSegmentedLink.bind(this)('patreonUrl'),
+  segmentedTwitterUrl    : computedSegmentedLink.bind(this)('twitterUrl'),
+  segmentedGoogleUrl     : computedSegmentedLink.bind(this)('googleUrl'),
+  segmentedYoutubeUrl    : computedSegmentedLink.bind(this)('youtubeUrl'),
+  segmentedGithubUrl     : computedSegmentedLink.bind(this)('githubUrl'),
+  segmentedAndroidAppUrl : computedSegmentedLink.bind(this)('androidAppUrl'),
+  segmentedWebAppUrl     : computedSegmentedLink.bind(this)('webAppUrl'),
+  segmentedFrontendUrl   : computedSegmentedLink.bind(this)('frontendUrl'),
+  segmentedStaticDomain  : computedSegmentedLink.bind(this)('staticDomain')
 });

app/routes/public/session/view.js

@@ -3,8 +3,8 @@ import Route from '@ember/routing/route';
 
 @classic
 export default class ViewRoute extends Route {
-  titleToken() {
-    return this.l10n.t('Sessions');
+  titleToken(model) {
+    return model.title;
   }
 
   model(params) {

app/styles/components/track-item.scss

@@ -10,3 +10,22 @@
   position: absolute;
   top: 0;
 }
+
+@media (min-width: 600px) {
+  .slide-iframe,
+  .video-iframe {
+    height: 370px;
+  }
+}
+
+@media (max-width: 600px) {
+  .slide-iframe,
+  .video-iframe {
+    height: 250px;
+  }
+}
+
+.slide-iframe,
+.video-iframe {
+  max-width: 670px;
+}

app/utils/url.js → app/utils/url.ts

@@ -10,7 +10,7 @@ import { merge, mapValues, isArray } from 'lodash-es';
  * @param stringifyArray - Should an array be converted to csv
  * @return {string}
  */
-export const buildUrlViaUrlParse = (baseUrl, queryParams, stringifyArray = false) => {
+export const buildUrlViaUrlParse = (baseUrl: string, queryParams: { [key: string]: string }, stringifyArray = false): string => {
   const parsedUrl = new UrlParser(baseUrl, true);
   if (stringifyArray) {
     queryParams = mapValues(queryParams, value => {
@@ -32,7 +32,7 @@ export const buildUrlViaUrlParse = (baseUrl, queryParams, stringifyArray = false
  * @param stringifyArray - Should an array be converted to csv
  * @return {string}
  */
-export const buildUrlViaQueryString = (baseUrl, queryParams, stringifyArray = false) => {
+export const buildUrlViaQueryString = (baseUrl: string, queryParams: { [key: string]: string }, stringifyArray = false): string => {
   const parsedUrl = queryString.parseUrl(baseUrl, { arrayFormat: 'bracket' });
   if (stringifyArray) {
     queryParams = mapValues(queryParams, value => {
@@ -47,3 +47,14 @@ export const buildUrlViaQueryString = (baseUrl, queryParams, stringifyArray = fa
 };
 
 export const buildUrl = buildUrlViaQueryString;
+
+export function extractYoutubeUrl(url: string | null): string | null | undefined {
+  if (!url) {return null}
+  const parsedUrl = new UrlParser(url, true);
+  if (['youtube.com', 'www.youtube.com'].includes(parsedUrl.hostname)) {
+    return parsedUrl.query?.v;
+  } else if (['youtu.be', 'www.youtu.be'].includes(parsedUrl.hostname)) {
+    return parsedUrl.pathname.split('/')[1];
+  }
+  return null;
+}

package.json

@@ -46,6 +46,7 @@
     "@types/moment": "^2.13.0",
     "@types/qunit": "^2.9.1",
     "@types/rsvp": "^4.0.3",
+    "@types/url-parse": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^3.10.1",
     "async": "^3.2.0",

tests/unit/utils/url-test.ts

@@ -0,0 +1,17 @@
+
+import { module, test } from 'qunit';
+import { extractYoutubeUrl } from 'open-event-frontend/utils/url';
+
+module('Unit | URL | URL Utils Test', function() {
+  test('test youtube URL extractor', function(assert) {
+    assert.equal(extractYoutubeUrl(null), null);
+    assert.equal(extractYoutubeUrl('https://hello.mate'), null);
+    assert.equal(extractYoutubeUrl('not even a url'), null);
+    assert.equal(extractYoutubeUrl(''), null);
+    assert.equal(extractYoutubeUrl('https://www.not-youtube.com/watch?v=dUxVR8oSzLU'), null);
+    assert.equal(extractYoutubeUrl('http://youtube.com/watch?v=dUxVR8oSzLU'), 'dUxVR8oSzLU');
+    assert.equal(extractYoutubeUrl('https://youtube.com/watch?v=dUxVR8oSzLU'), 'dUxVR8oSzLU');
+    assert.equal(extractYoutubeUrl('https://www.youtube.com/watch?v=dUxVR8oSzLU'), 'dUxVR8oSzLU');
+    assert.equal(extractYoutubeUrl('https://youtu.be/dUxVR8oSzLU'), 'dUxVR8oSzLU');
+  });
+});

yarn.lock

@@ -2002,6 +2002,11 @@
   resolved "https://registry.yarnpkg.com/@types/symlink-or-copy/-/symlink-or-copy-1.2.0.tgz#4151a81b4052c80bc2becbae09f3a9ec010a9c7a"
   integrity sha512-Lja2xYuuf2B3knEsga8ShbOdsfNOtzT73GyJmZyY7eGl2+ajOqrs8yM5ze0fsSoYwvA6bw7/Qr7OZ7PEEmYwWg==
 
+"@types/url-parse@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.3.tgz#fba49d90f834951cb000a674efee3d6f20968329"
+  integrity sha512-4kHAkbV/OfW2kb5BLVUuUMoumB3CP8rHqlw48aHvFy5tf9ER0AfOonBlX29l/DD68G70DmyhRlSYfQPSYpC5Vw==
+
 "@typescript-eslint/eslint-plugin@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.0.0.tgz#99349a501447fed91de18346705c0c65cf603bee"