From 9c525f304022ee86de824112bddc651ab97d753d Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 8 Feb 2024 17:37:04 +0100
Subject: [PATCH] Replace SRF embed URL

Also add some tests to test correctness of the URL generation and also
the iframe src
---
 .../cypress/e2e/frontend/modules/videos.cy.ts | 83 +++++++++++++++++++
 client/src/components/videos/SrfEmbed.vue     |  4 +-
 client/src/helpers/{video.js => video.ts}     | 11 +--
 client/tests/unit/srf.spec.ts                 | 23 +++++
 4 files changed, 115 insertions(+), 6 deletions(-)
 create mode 100644 client/cypress/e2e/frontend/modules/videos.cy.ts
 rename client/src/helpers/{video.js => video.ts} (63%)
 create mode 100644 client/tests/unit/srf.spec.ts

diff --git a/client/cypress/e2e/frontend/modules/videos.cy.ts b/client/cypress/e2e/frontend/modules/videos.cy.ts
new file mode 100644
index 00000000..76dd6a2a
--- /dev/null
+++ b/client/cypress/e2e/frontend/modules/videos.cy.ts
@@ -0,0 +1,83 @@
+const oldVideoBlock = {
+  id: 'b6080c67-e21e-41f6-b9b0-8416837c8f1d',
+  type: 'video_block',
+  value: {
+    url: 'https://www.srf.ch/play/tv/popupvideoplayer?id=6db02b8b-975c-4e3e-8260-f1e6eca1d8ed',
+  },
+};
+const newVideoBlock = {
+  id: '04f80357-d201-4a4a-bdbc-03c6f15497fa',
+  type: 'video_block',
+  value: {
+    url: 'https://www.srf.ch/play/tv/popupvideoplayer?id=e553b617-0831-4683-84d2-783d971f3c72&startTime=420.20',
+  },
+};
+const videoModule = {
+  id: 'TW9kdWxlTm9kZTo3NzU=',
+  title: 'Modul Test',
+  metaTitle: 'Testing',
+  teaser: 'Modul fürs Testing',
+  intro: '<p data-block-key="v1cpe">Dieses Modul wird verwendet, um Funktionen zu testen.</p>',
+  slug: 'video-module',
+  heroImage:
+    'https://skillbox-my-detailhandel-dhf-prod.s3-eu-central-1.amazonaws.com/original_images/A_LJ1_LF1_M3_Titelbild.jpg',
+  heroSource: '',
+  solutionsEnabled: false,
+  language: 'de',
+  level: null,
+  category: null,
+  topic: {
+    slug: 'test',
+    title: 'Test',
+    __typename: 'TopicNode',
+  },
+  bookmark: null,
+  __typename: 'ModuleNode',
+  objectiveGroups: [],
+  chapters: [
+    {
+      id: 'Q2hhcHRlck5vZGU6Nzc2',
+      title: 'Kapitel 1',
+      description: 'Einleitungstext für Kapitel',
+      bookmark: null,
+      titleHiddenFor: [],
+      descriptionHiddenFor: [],
+      __typename: 'ChapterNode',
+      contentBlocks: [
+        {
+          id: 'Q29udGVudEJsb2NrTm9kZToxMTY0',
+          slug: 'auftrag-2',
+          userCreated: false,
+          mine: false,
+          instrumentCategory: null,
+          bookmarks: [],
+          hiddenFor: [],
+          visibleFor: [],
+          __typename: 'ContentBlockNode',
+          title: 'Auftrag 2',
+          type: 'task',
+          contents: [oldVideoBlock, newVideoBlock],
+        },
+      ],
+    },
+  ],
+};
+describe('Video Block', () => {
+  beforeEach(() => {
+    cy.setup();
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery: {},
+        ModuleDetailsQuery: {
+          module: videoModule,
+        },
+        ModuleEditModeQuery: {},
+        UpdateLastModule: {},
+      },
+    });
+  });
+  it('displays SRF Videos with old and with new pattern', () => {
+    cy.visit('/module/video-module');
+    cy.getByDataCy('srf-embed').should('have.length', 2);
+  });
+});
diff --git a/client/src/components/videos/SrfEmbed.vue b/client/src/components/videos/SrfEmbed.vue
index b8456618..882590e1 100644
--- a/client/src/components/videos/SrfEmbed.vue
+++ b/client/src/components/videos/SrfEmbed.vue
@@ -1,8 +1,10 @@
 <template>
   <iframe
-    :src="`https://tp.srgssr.ch/p/srf/embed?urn=urn:srf:video:${videoId}`"
+    data-cy="srf-embed"
+    :src="`https://www.srf.ch/play/embed?urn=urn:srf:video:${videoId}&subdivisions=false`"
     class="srf-embed"
     allowfullscreen
+    allow="geolocation *; autoplay; encrypted-media"
     frameborder="0"
   />
 </template>
diff --git a/client/src/helpers/video.js b/client/src/helpers/video.ts
similarity index 63%
rename from client/src/helpers/video.js
rename to client/src/helpers/video.ts
index b758efed..3e2a9599 100644
--- a/client/src/helpers/video.js
+++ b/client/src/helpers/video.ts
@@ -1,20 +1,21 @@
 const YOUTUBE = /^(?:https:\/\/)?(?:www.)?(?:youtube.com\/watch\?v=|youtu.be\/)([a-zA-Z0-9_-]{11})(?:.+)?$/;
 const VIMEO = /^(?:https:\/\/)?(?:www.)?vimeo.com\/([a-zA-Z0-9]*)$/;
-const SRF = /^(?:https:\/\/)?(?:www.)?srf.ch\/(?:[\w/-]*)[?&]id=([\w-]+)(?:[&\w=-]*)$/;
+// const SRF = /^(?:https:\/\/)?(?:www.)?srf.ch\/(?:[\w/-]*)[?&]id=([\w-]+)(?:[&\w=-]*)$/;
+const SRF = /^(?:https:\/\/)?(?:www.)?srf.ch\/(?:[\w/-]*)[?&]id=([\w-]+)(?:[&\w=-]*)(?:&?startTime=([\d.]+))?/;
 
-export function isYoutubeUrl(url) {
+export function isYoutubeUrl(url: string) {
   return YOUTUBE.test(url);
 }
 
-export function isVimeoUrl(url) {
+export function isVimeoUrl(url: string) {
   return VIMEO.test(url);
 }
 
-export function isSrfUrl(url) {
+export function isSrfUrl(url: string) {
   return SRF.test(url);
 }
 
-export function getVideoId(url) {
+export function getVideoId(url: string) {
   if (isYoutubeUrl(url)) {
     return YOUTUBE.exec(url)[1];
   } else if (isVimeoUrl(url)) {
diff --git a/client/tests/unit/srf.spec.ts b/client/tests/unit/srf.spec.ts
new file mode 100644
index 00000000..e5eb0305
--- /dev/null
+++ b/client/tests/unit/srf.spec.ts
@@ -0,0 +1,23 @@
+import { getVideoId } from '../../src/helpers/video';
+import { mount } from '@vue/test-utils';
+import SrfEmbed from '@/components/videos/SrfEmbed.vue';
+
+const url = 'https://www.srf.ch/play/tv/popupvideoplayer?id=6db02b8b-975c-4e3e-8260-f1e6eca1d8ed';
+describe('SRF Video Embed', () => {
+  it('should return the correct embed url', () => {
+    const videoId = getVideoId(url);
+    // 'https://www.srf.ch/play/embed?urn=urn:srf:video:6db02b8b-975c-4e3e-8260-f1e6eca1d8ed&subdivisions=false';
+    const embedId = '6db02b8b-975c-4e3e-8260-f1e6eca1d8ed';
+    expect(videoId).toBe(embedId);
+  });
+  it('should construct the correct iframe', () => {
+    const props = {
+      url,
+    };
+    const wrapper = mount(SrfEmbed, {
+      props,
+    });
+    expect(wrapper.attributes('src')).toBe(embedUrl);
+  });
+});
+// <iframe width="560" height="315" src="https://www.srf.ch/play/embed?urn=urn:srf:video:6db02b8b-975c-4e3e-8260-f1e6eca1d8ed&subdivisions=false" allowfullscreen allow="geolocation *; autoplay; encrypted-media"></iframe>