Add SRF video embedding

client/src/components/content-blocks/VideoBlock.vue

@@ -2,20 +2,24 @@
   <div class="video-block">
     <youtube-embed v-if="isYoutube" :url="value.url"></youtube-embed>
     <vimeo-embed v-if="isVimeo" :url="value.url"></vimeo-embed>
+    <srf-embed v-if="isSrf" :url="value.url"></srf-embed>
+
   </div>
 </template>
 
 <script>
   import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
   import VimeoEmbed from '@/components/videos/VimeoEmbed';
-  import {isVimeoUrl, isYoutubeUrl} from '@/helpers/video';
+  import SrfEmbed from '@/components/videos/SrfEmbed';
+  import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';
 
   export default {
     props: ['value'],
 
     components: {
       YoutubeEmbed,
-      VimeoEmbed
+      VimeoEmbed,
+      SrfEmbed
     },
 
     computed: {
@@ -24,6 +28,9 @@
       },
       isVimeo() {
         return isVimeoUrl(this.value.url);
+      },
+      isSrf() {
+        return isSrfUrl(this.value.url);
       }
     }
   }

client/src/components/content-forms/VideoForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="!isVimeo && !isYoutube" class="video-form">
+    <div v-if="!isVimeo && !isYoutube && !isSrf" class="video-form">
       <info-icon class="video-form__help-icon help-text__icon"></info-icon>
       <p class="video-form__help-description help-text__description">
         Sie können Videos auf <a class="video-form__platform-link help-text__link" href="https://youtube.com/"
@@ -20,6 +20,9 @@
     <div v-if="isVimeo">
       <vimeo-embed :url="value.url"></vimeo-embed>
     </div>
+    <div v-if="isSrf">
+      <srf-embed :url="value.url"></srf-embed>
+    </div>
 
   </div>
 </template>
@@ -28,7 +31,8 @@
   import InfoIcon from '@/components/icons/InfoIcon';
   import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
   import VimeoEmbed from '@/components/videos/VimeoEmbed';
-  import {isVimeoUrl, isYoutubeUrl} from '@/helpers/video';
+  import SrfEmbed from '@/components/videos/SrfEmbed';
+  import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';
 
   export default {
     props: ['value', 'index'],
@@ -36,7 +40,8 @@
     components: {
       InfoIcon,
       YoutubeEmbed,
-      VimeoEmbed
+      VimeoEmbed,
+      SrfEmbed
     },
 
     computed: {
@@ -45,6 +50,9 @@
       },
       isVimeo() {
         return isVimeoUrl(this.value.url);
+      },
+      isSrf() {
+        return isSrfUrl(this.value.url);
       }
     }
   }

client/src/components/videos/SrfEmbed.vue

@@ -0,0 +1,26 @@
+<template>
+  <iframe class="srf-embed"
+          :src='`https://tp.srgssr.ch/p/srf/embed?urn=urn:srf:video:${videoId}`'
+          allowfullscreen frameborder='0'></iframe>
+</template>
+
+<script>
+  import {getVideoId} from '@/helpers/video';
+
+  export default {
+    props: ['url'],
+
+    computed: {
+      videoId() {
+        return getVideoId(this.url);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .srf-embed {
+    width: 100%;
+    height: 350px;
+  }
+</style>

client/src/helpers/video.js

@@ -1,5 +1,6 @@
 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=-]*)$/;
 
 export function isYoutubeUrl(url) {
   return YOUTUBE.test(url);
@@ -9,11 +10,17 @@ export function isVimeoUrl(url) {
   return VIMEO.test(url);
 }
 
+export function isSrfUrl(url) {
+  return SRF.test(url);
+}
+
 export function getVideoId(url) {
   if (isYoutubeUrl(url)) {
     return YOUTUBE.exec(url)[1];
   } else if (isVimeoUrl(url)) {
     return VIMEO.exec(url)[1];
+  } else if (isSrfUrl(url)) {
+    return SRF.exec(url)[1];
   } else {
     return '';
   }