added video (vimeo & youtube) display

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -49,6 +49,21 @@
       </div>
     </section>
     <section class="body" v-html="content.body"></section>
+    <section class="video">
+      <ul>
+        <li v-for="video in content.videos" v-bind:key="video.id">
+          <vimeo-player
+            v-if="video.provider == 'vimeo'"
+            ref="player"
+            :video-id="video.id"
+            />
+          <youtube
+            v-if="video.provider == 'youtube'"
+            :video-id="video.id"
+            />
+        </li>
+      </ul>
+    </section>
     <section class="visuels">
       <figure
         v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
@@ -261,6 +276,34 @@ export default {
       // extract first visuel as accroche
       this.content.image_accroche = this.content.field_visuel.shift()
 
+      // parse embeded videos
+      this.content.videos = [];
+      for(let key in attrs.field_video){
+        let videolink = attrs.field_video[key]
+        console.log('videolink', videolink);
+        let provider_regex = /https:\/\/(www\.)?(?<provider>youtube|vimeo)\.com\/.+/;
+        let match = provider_regex.exec(videolink)
+        console.log('provider', match.groups.provider);
+        let video_id = null;
+        switch (match.groups.provider) {
+          case 'vimeo':
+            let vimeo_regex = /https:\/\/vimeo\.com\/(?<id>\d+)/;
+            video_id = vimeo_regex.exec(videolink).groups.id || null;
+            break;
+          case 'youtube':
+            let youtube_regex = /https:\/\/(www\.)?youtube\.com\/watch\?v=(?<id>.+)/;
+            video_id = youtube_regex.exec(videolink).groups.id || null;
+            break;
+        }
+        console.log('video_id', video_id);
+
+        this.content.videos.push({
+          provider:match.groups.provider,
+          id:video_id
+        });
+      }
+      console.log(this.content.videos);
+
       // update main page title
       this.$store.commit('Common/setPagetitle', this.content.title)