added video (vimeo & youtube) display

config/sync/core.entity_form_display.node.article.default.yml

@@ -31,6 +31,7 @@ third_party_settings:
       children:
         - group_contents
         - group_media
+        - group_videos
         - group_taxonomy
       parent_name: ''
       weight: 0
@@ -44,7 +45,6 @@ third_party_settings:
     group_contents:
       children:
         - title
-        - field_title_image
         - field_source
         - body
         - field_linked_materials
@@ -62,7 +62,6 @@ third_party_settings:
     group_media:
       children:
         - field_visuel
-        - field_video
       parent_name: group_htabs
       weight: 11
       format_type: tab
@@ -72,7 +71,7 @@ third_party_settings:
         required_fields: true
         id: ''
         classes: ''
-      label: media
+      label: images
       region: content
     group_taxonomy:
       children:
@@ -80,7 +79,7 @@ third_party_settings:
         - field_tags
         - field_showroom
       parent_name: group_htabs
-      weight: 12
+      weight: 13
       format_type: tab
       format_settings:
         description: ''
@@ -108,6 +107,20 @@ third_party_settings:
         required_fields: true
       label: Internal
       region: content
+    group_videos:
+      children:
+        - field_video
+      parent_name: group_htabs
+      weight: 12
+      format_type: tab
+      region: content
+      format_settings:
+        id: ''
+        classes: ''
+        description: ''
+        formatter: closed
+        required_fields: true
+      label: Videos
 id: node.article.default
 targetEntityType: node
 bundle: article

package-lock.json

@@ -1108,6 +1108,15 @@
       "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==",
       "dev": true
     },
+    "@vimeo/player": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@vimeo/player/-/player-2.10.0.tgz",
+      "integrity": "sha512-tG2M+9D92P4uJAmIwJmYHxZXtUKofT12Zu1iG7m03Q/GFt41kwJRMkfO2ZDU8BLrsG3AIt2hKkw776tDIR1Iuw==",
+      "requires": {
+        "native-promise-only": "0.8.1",
+        "weakmap-polyfill": "2.0.0"
+      }
+    },
     "@vue/component-compiler-utils": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.0.1.tgz",
@@ -6559,6 +6568,11 @@
         "to-regex": "^3.0.1"
       }
     },
+    "native-promise-only": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz",
+      "integrity": "sha1-IKMYwwy0X3H+et+/eyHJnBRy7xE="
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -9370,6 +9384,20 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-vimeo-player": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vue-vimeo-player/-/vue-vimeo-player-0.1.0.tgz",
+      "integrity": "sha512-kozPRMBBJpIZ9SVXWwB9k6HomUmDl39+mmnjbfRLfZgI5q+Q2yCI3lzk3wJemvAbyXo44Xp75SIaNH0eWzGLSg==",
+      "requires": {
+        "@vimeo/player": "^2.10.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "vue-youtube-embed": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/vue-youtube-embed/-/vue-youtube-embed-2.2.2.tgz",
+      "integrity": "sha512-l/EJuFMRK43AN73N+qxJnN0LB3uPl2xAghmr3dCvODWGCRWGjmGfrHaOtD93fu9J4co+CZLv1KP3akAsldC1aw=="
+    },
     "vuex": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
@@ -9395,6 +9423,11 @@
         "neo-async": "^2.5.0"
       }
     },
+    "weakmap-polyfill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/weakmap-polyfill/-/weakmap-polyfill-2.0.0.tgz",
+      "integrity": "sha1-jyj5NeOFOJatQHR+UljbV42dyN4="
+    },
     "webpack": {
       "version": "4.41.2",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.41.2.tgz",

package.json

@@ -24,6 +24,8 @@
     "vue-infinite-loading": "^2.4.4",
     "vue-meta": "^1.6.0",
     "vue-router": "^3.1.3",
+    "vue-vimeo-player": "^0.1.0",
+    "vue-youtube-embed": "^2.2.2",
     "vuex": "^3.1.1"
   },
   "devDependencies": {

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -12,6 +12,11 @@ Vue.use(InfiniteLoading, {
   // }
 });
 
+import vueVimeoPlayer from 'vue-vimeo-player'
+Vue.use(vueVimeoPlayer)
+import VueYouTubeEmbed from 'vue-youtube-embed'
+Vue.use(VueYouTubeEmbed)
+
 import store from 'vuejs/store'
 import router from 'vuejs/route'
 

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)