diff --git a/app/components/public/session-item.hbs b/app/components/public/session-item.hbs index 40469ea2b6b..c7f013d09ba 100644 --- a/app/components/public/session-item.hbs +++ b/app/components/public/session-item.hbs @@ -5,7 +5,7 @@ {{@session.title}} {{#unless @hideSessionLink}} {{!-- template-lint-disable no-nested-interactive --}} - + {{/unless}}
{{@session.sessionType.name}} @@ -46,6 +46,34 @@
+ {{#if (and @expanded (or @session.slidesUrl @session.videoUrl))}} +
+
+ {{#if (or this.pdfLink this.pptLink)}} + + {{else if @session.slidesUrl}} + + + + {{/if}} + + {{#if this.youtubeLink}} + + {{else if @session.videoUrl}} + + + + {{/if}} +
+
+ {{/if}} + {{#each @session.speakers as |speaker|}}
speaker diff --git a/app/components/public/session-item.js b/app/components/public/session-item.js index 18d6fa624d7..9e0928e102e 100644 --- a/app/components/public/session-item.js +++ b/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; diff --git a/app/models/setting.js b/app/models/setting.js index 8b8742d5e85..bb2256fd8f9 100644 --- a/app/models/setting.js +++ b/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') }); diff --git a/app/routes/public/session/view.js b/app/routes/public/session/view.js index 0181b8f3c11..829288725e8 100644 --- a/app/routes/public/session/view.js +++ b/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) { diff --git a/app/styles/components/track-item.scss b/app/styles/components/track-item.scss index 3507ed903f2..f98211ca6f1 100644 --- a/app/styles/components/track-item.scss +++ b/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; +} diff --git a/app/utils/url.js b/app/utils/url.ts similarity index 66% rename from app/utils/url.js rename to app/utils/url.ts index 1ac27e2b322..067ffa0f7de 100644 --- a/app/utils/url.js +++ b/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; +} diff --git a/package.json b/package.json index 2faef85cbf9..ae4484b215e 100644 --- a/package.json +++ b/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", diff --git a/tests/unit/utils/url-test.ts b/tests/unit/utils/url-test.ts new file mode 100644 index 00000000000..f1c89c59bbd --- /dev/null +++ b/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'); + }); +}); diff --git a/yarn.lock b/yarn.lock index 12324501dcc..7730972d843 100644 --- a/yarn.lock +++ b/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"