bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added video (vimeo & youtube) display

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-02-19 17:59:26 +01:00
parent 3a9f162bb0
commit b6c38341b4
6 changed files with 128 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
config/sync/core.entity_form_display.node.article.default.yml
View File

@@ -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

33
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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": {

33
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

5
web/themes/custom/materiotheme/assets/scripts/main.js
View File

@@ -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'

43
web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue
View File

@@ -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)