added video (vimeo & youtube) display
This commit is contained in:
parent
3a9f162bb0
commit
b6c38341b4
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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": {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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'
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
Loading…
Reference in New Issue