Dynamically display embedded videos

client/src/components/NewContentBlockWizard.vue

@@ -9,7 +9,7 @@
         class="new-content-block-wizard__element-component"
         :is="type(element)"
         :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
-        :element="element" :index="index"
+        :element="element" v-bind="element" :index="index"
         v-on:change-type="changeType"
         v-on:link-change-url="changeLinkUrl"
         v-on:link-change-text="changeLinkText"
@@ -79,20 +79,21 @@
         }
         return 'content-block-chooser-widget'
       },
-      updateProperty(value, index, key) {
+      _updateProperty(value, index, key) {
         this.elements.splice(index, 1, {
           ...this.elements[index],
           [key]: value
         });
       },
       changeLinkUrl(value, index) {
-        this.updateProperty(value, index, 'url')
+        this._updateProperty(value, index, 'url')
       },
       changeLinkText(value, index) {
-        this.updateProperty(value, index, 'text')
+        this._updateProperty(value, index, 'text')
       },
       changeVideoUrl(value, index) {
-        this.updateProperty(value, index, 'url')
+        console.log('changing url');
+        this._updateProperty(value, index, 'url')
       },
       removeElement(index) {
         this.elements.splice(index, 1);
@@ -129,6 +130,14 @@
     data() {
       return {
         elements: [
+          {
+            type: 'video',
+            url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
+          },
+          {
+            type: 'video',
+            url: 'https://vimeo.com/267384185'
+          },
           {
             type: 'link'
           },

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

@@ -1,14 +1,29 @@
 <template>
-  <div class="video-form">
+  <div>
+    <div v-if="!isVimeo && !isYoutube" 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/"
+                                 target="_blank">Youtube</a>
+        oder <a class="video-form__platform-link help-text__link" href="https://vimeo.com/" target="_blank">Vimeo</a>
+        hochladen und anschliessen einen Link hier einfügen. {{url}} {{isYoutube}} {{isVimeo}}
+      </p>
 
-    <info-icon class="video-form__help-icon help-text__icon"></info-icon>
+      <input class="video-form__video-link skillbox-input"
-    <p class="video-form__help-description help-text__description">
+             placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-      Sie können Videos auf <a class="video-form__platform-link help-text__link" href="https://youtube.com/" target="_blank">Youtube</a>
+             :value="url" v-on:input="$emit('video-change-url', $event.target.value, index)">
-      oder <a class="video-form__platform-link help-text__link" href="https://vimeo.com/" target="_blank">Vimeo</a>
+    </div>
-      hochladen und anschliessen einen Link hier einfügen.
-    </p>
 
-    <input class="video-form__video-link skillbox-input" placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ">
+    <div v-if="isYoutube">
+      <iframe id="ytplayer" type="text/html"
+              rel="0"
+              :src="`https://www.youtube.com/embed/${videoId}`"
+              frameborder="0"></iframe>
+    </div>
+    <div v-if="isVimeo">
+      <iframe :src="`https://player.vimeo.com/video/${videoId}`" frameborder="0"
+              webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+    </div>
 
   </div>
 </template>
@@ -16,9 +31,32 @@
 <script>
   import InfoIcon from '@/components/icons/InfoIcon';
 
+  const YOUTUBE = /^(?:https:\/\/)?(?:www.)?youtube.com\/watch\?v=([a-zA-Z0-9]*)$/;
+  const VIMEO = /^(?:https:\/\/)?(?:www.)?vimeo.com\/([a-zA-Z0-9]*)$/;
+
   export default {
+    props: ['url', 'index'],
+
     components: {
       InfoIcon
+    },
+
+    computed: {
+      isYoutube() {
+        return YOUTUBE.test(this.url);
+      },
+      isVimeo() {
+        return VIMEO.test(this.url);
+      },
+      videoId() {
+        if (this.isYoutube) {
+          return YOUTUBE.exec(this.url)[1];
+        } else if (this.isVimeo) {
+          return VIMEO.exec(this.url)[1];
+        } else {
+          return '';
+        }
+      }
     }
   }
 </script>
@@ -56,4 +94,10 @@
     }
 
   }
+
+  iframe {
+    width: 100%;
+    height: 350px;
+  }
+
 </style>

client/src/store/index.js

@@ -27,15 +27,14 @@ export default new Vuex.Store({
       commit('setSpecialContainerClass', payload);
     },
     hideModal({commit, state}) {
-      document.body.classList.remove('no-scroll');
+      document.body.classList.remove('no-scroll'); // won't get at the body any other way
       commit('setModal', false);
     },
     showModal({commit}) {
-      document.body.classList.add('no-scroll');
+      document.body.classList.add('no-scroll'); // won't get at the body any other way
       commit('setModal', true);
     },
-    saveContentBlock({commit}, payload){
+    saveContentBlock({commit}, payload) {
-      console.log(payload);
       commit('setNewContentBlock', payload);
       commit('setModal', false);
     }