@kvass/widgets 1.1.4 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/vimeo.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as p,o,c as r,z as l,A as m,k as v,w as g,a as d,y as c,B as y,C as k,t as u,d as w,q as b}from"./_plugin-vue_export-helper.js";import{E as h,L as _,W as S}from"./index.js";const x=`.widget-kvass-media-render-vimeo{height:100%;width:100%;position:relative}.widget-kvass-media-render-vimeo iframe{height:100%;width:100%}.widget-kvass-media-render-vimeo>*{position:absolute;top:0;left:0;width:100%;height:100%}.widget-kvass-media-render-vimeo__thumbnail{background-size:cover;background-repeat:no-repeat;background-position:center;filter:blur(10px);opacity:.7}.widget-kvass-media-render-vimeo__blocked{display:flex;justify-content:center;align-items:center;left:50%;top:50%;transform:translate(-50%,-50%)}.widget-kvass-media-render-vimeo__blocked svg{opacity:.3}@media (max-width: 992px){.widget-kvass-media-render-vimeo__blocked svg{font-size:2.5em}}.widget-kvass-media-render-vimeo__blocked-warning{pointer-events:initial;position:absolute;bottom:0;text-align:center;background-color:#f2f2f2;font-size:.6em;bottom:3rem;left:3rem;max-width:400px;font-size:.8em;padding:1.5em 2em}.widget-kvass-media-render-vimeo__blocked-warning-button{padding:.5rem;border:1px solid #818181;backdrop-filter:none;background-color:transparent}@media (max-width: 992px){.widget-kvass-media-render-vimeo__blocked-warning{left:.5rem;bottom:.5rem;font-size:.6em;max-width:200px}}.widget-kvass-media-render-vimeo .fade-enter-active,.widget-kvass-media-render-vimeo .fade-leave-active{transition:opacity .5s}.widget-kvass-media-render-vimeo .fade-enter,.widget-kvass-media-render-vimeo .fade-leave-to{opacity:0}
2
- `,B={props:{url:{type:String,default:""},loop:{type:[String,Boolean],default:!0},autoplay:{type:[String,Boolean],default:!1},controls:{type:[String,Boolean],default:!0},mute:{type:[String,Boolean],default:!1},displayThumbnail:{type:[String,Boolean],default:!0},ignoreConsent:{type:[String,Boolean],default:!1},hideConsent:{type:[String,Boolean],default:!1},thumbnailSource:{type:String,default:""},consentBlockMessage:{type:String,default:"The video is blocked due to lack of consent to cookies"},consentButtonLabel:{type:String,default:"Edit consents"},aspectRatio:{type:String,default:"16/9"}},data(){return{ready:!1,player:null,thumbnail:null,consents:[]}},computed:{kvassDefined(){return typeof Kvass<"u"},showConsent(){return this.hideConsent||!this.kvassDefined?!1:!this.ignoreConsent&&!this.consents.includes("statistics")},videoId(){if(this.url)return[h(this.url,/https\:\/\/(w{3}\.)?vimeo\.com\/(.+)\/?/,{group:2}),h(this.url,/https\:\/\/(w{3}\.)?player\.vimeo\.com\/(video\/)?(.+)\/?/,{group:3})].find(e=>!!e).split("&")[0]}},methods:{openConsent(){this.kvassDefined&&Kvass.emit("consent:show")},play(){!this.player||!this.ready||this.player.play()},async init(){const e={id:this.videoId,loop:this.loop,autoplay:this.autoplay,controls:this.controls,muted:this.mute||this.autoplay,playsinline:1,dnt:1};function t(i){return i==="false"?!1:i==="true"?!0:i}Object.entries(e).map(([i,s])=>e[i]=t(s)),_("https://player.vimeo.com/api/player.js");const n=await S(()=>window.Vimeo,{limit:100});this.player=new n.Player(this.$refs.vimeoPlayer,{...e}),await this.player.ready().then(()=>{this.ready=!0}).catch(i=>{this.ready=!0})}},async mounted(){if(this.displayThumbnail&&(this.thumbnail=!this.thumbnailSource&&this.kvassDefined?`/api/media/thumbnail?url=${this.url}`:this.thumbnailSource),this.ignoreConsent||!this.kvassDefined)return this.init();let e=t=>{if(this.consents=t||[],!(!this.consents||!this.consents.length))return this.consents.includes("statistics")?this.init():this.$nextTick(()=>this.$emit("ended"))};this.kvassDefined&&(Kvass.emit("consent:get",t=>e(t)),Kvass.on("consent:change",e))}},C={key:0,class:"widget-kvass-media-render-vimeo__blocked"},z={class:"widget-kvass-media-render-vimeo__blocked-warning"};function D(e,t,n,i,s,a){return o(),r("div",{class:"widget-kvass-media-render-vimeo",style:c(`aspect-ratio: ${n.aspectRatio};`)},[l((o(),r("div",{key:a.videoId,ref:"vimeoPlayer",class:"widget-kvass-media-render-vimeo__embed",frameborder:"0",allow:"autoplay; fullscreen;",webkitallowfullscreen:"",mozallowfullscreen:""})),[[m,s.ready]]),v(y,{name:"fade",mode:"in-out"},{default:g(()=>[l(d("div",{class:"widget-kvass-media-render-vimeo__thumbnail",style:c({backgroundImage:`url(${s.thumbnail})`})},null,4),[[m,!s.ready&&s.thumbnail]])]),_:1}),a.showConsent?(o(),r("div",C,[d("div",z,[k(u(n.consentBlockMessage)+" ",1),d("button",{class:"widget-kvass-media-render-vimeo__blocked-warning-button",onClick:t[0]||(t[0]=(...f)=>a.openConsent&&a.openConsent(...f))},u(n.consentButtonLabel),1)])])):w("",!0)],4)}const T=p(B,[["render",D],["styles",[x]]]);customElements.define("kvass-vimeo",b(T));
1
+ import{_ as f,o,c as r,z as l,A as m,k as v,w as g,a as d,y as c,B as y,C as k,t as u,d as w,q as b}from"./_plugin-vue_export-helper.js";import{E as p,L as _,W as S}from"./index.js";const x=`.widget-kvass-media-render-vimeo{height:100%;width:100%;position:relative}.widget-kvass-media-render-vimeo iframe{height:100%;width:100%}.widget-kvass-media-render-vimeo>*{position:absolute;top:0;left:0;width:100%;height:100%}.widget-kvass-media-render-vimeo__thumbnail{background-size:cover;background-repeat:no-repeat;background-position:center;filter:blur(10px);opacity:.7}.widget-kvass-media-render-vimeo__blocked{display:flex;justify-content:center;align-items:center;left:50%;top:50%;transform:translate(-50%,-50%)}.widget-kvass-media-render-vimeo__blocked svg{opacity:.3}@media (max-width: 992px){.widget-kvass-media-render-vimeo__blocked svg{font-size:2.5em}}.widget-kvass-media-render-vimeo__blocked-warning{pointer-events:initial;position:absolute;bottom:0;text-align:center;background-color:#f2f2f2;font-size:.6em;bottom:3rem;left:3rem;max-width:400px;font-size:.8em;padding:1.5em 2em}.widget-kvass-media-render-vimeo__blocked-warning-button{padding:.5rem;border:1px solid #818181;backdrop-filter:none;background-color:transparent}@media (max-width: 992px){.widget-kvass-media-render-vimeo__blocked-warning{left:.5rem;bottom:.5rem;font-size:.6em;max-width:200px}}.widget-kvass-media-render-vimeo .fade-enter-active,.widget-kvass-media-render-vimeo .fade-leave-active{transition:opacity .5s}.widget-kvass-media-render-vimeo .fade-enter,.widget-kvass-media-render-vimeo .fade-leave-to{opacity:0}
2
+ `,B={props:{url:{type:String,default:""},videoState:{type:String,default:"ready",enums:["ready ","play","pause"]},loop:{type:[String,Boolean],default:!0},autoplay:{type:[String,Boolean],default:!1},controls:{type:[String,Boolean],default:!0},mute:{type:[String,Boolean],default:!1},displayThumbnail:{type:[String,Boolean],default:!0},ignoreConsent:{type:[String,Boolean],default:!1},hideConsent:{type:[String,Boolean],default:!1},thumbnailSource:{type:String,default:""},consentBlockMessage:{type:String,default:"The video is blocked due to lack of consent to cookies"},consentButtonLabel:{type:String,default:"Edit consents"},aspectRatio:{type:String,default:"16/9"}},watch:{videoState:{handler(e,t){if(e!==t)switch(e){case"play":return this.play();case"pause":return this.pause();default:return}}}},data(){return{ready:!1,thumbnail:null,consents:[]}},computed:{kvassDefined(){return typeof Kvass<"u"},showConsent(){return this.hideConsent||!this.kvassDefined?!1:!this.ignoreConsent&&!this.consents.includes("statistics")},videoId(){if(!this.url)return;let e=[p(this.url,/https\:\/\/(w{3}\.)?vimeo\.com\/(.+)\/?/,{group:2}),p(this.url,/https\:\/\/(w{3}\.)?player\.vimeo\.com\/(video\/)?(.+)\/?/,{group:3})].find(t=>!!t);if(e)return e.split("&")[0]}},methods:{openConsent(){this.kvassDefined&&Kvass.emit("consent:show")},async play(){try{this.player.setVolume(0),await this.player.play()}catch(e){console.log(e)}},pause(){this.player.pause()},async init(){const e={url:`https://vimeo.com/${this.videoId}`,loop:this.loop,autoplay:this.autoplay,controls:this.controls,muted:this.mute||this.autoplay,playsinline:1,dnt:1};function t(i){return i==="false"?!1:i==="true"?!0:i}Object.entries(e).map(([i,s])=>e[i]=t(s)),_("https://player.vimeo.com/api/player.js");const a=await S(()=>window.Vimeo,{limit:100});this.player=new a.Player(this.$refs.vimeoPlayer,e),await this.player.ready().then(()=>{this.ready=!0}).catch(i=>{console.log(i)})}},async mounted(){if(this.displayThumbnail&&(this.thumbnail=`/api/media/thumbnail?url=${this.url}`),this.ignoreConsent||!this.kvassDefined)return this.init();let e=t=>{if(this.consents=t||[],!(!this.consents||!this.consents.length)&&this.consents.includes("statistics"))return this.init()};this.kvassDefined&&(Kvass.emit("consent:get",t=>e(t)),Kvass.on("consent:change",e))}},C={key:0,class:"widget-kvass-media-render-vimeo__blocked"},z={class:"widget-kvass-media-render-vimeo__blocked-warning"};function D(e,t,a,i,s,n){return o(),r("div",{class:"widget-kvass-media-render-vimeo",style:c(`aspect-ratio: ${a.aspectRatio};`)},[l((o(),r("div",{key:n.videoId,ref:"vimeoPlayer",class:"widget-kvass-media-render-vimeo__embed",frameborder:"0",allow:"autoplay; fullscreen;",webkitallowfullscreen:"",mozallowfullscreen:""})),[[m,s.ready]]),v(y,{name:"fade",mode:"in-out"},{default:g(()=>[l(d("div",{class:"widget-kvass-media-render-vimeo__thumbnail",style:c({backgroundImage:`url(${s.thumbnail})`})},null,4),[[m,!s.ready&&s.thumbnail]])]),_:1}),n.showConsent?(o(),r("div",C,[d("div",z,[k(u(a.consentBlockMessage)+" ",1),d("button",{class:"widget-kvass-media-render-vimeo__blocked-warning-button",onClick:t[0]||(t[0]=(...h)=>n.openConsent&&n.openConsent(...h))},u(a.consentButtonLabel),1)])])):w("",!0)],4)}const V=f(B,[["render",D],["styles",[x]]]);customElements.define("kvass-vimeo",b(V));
package/dist/youtube.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as h,o as d,c as u,a as i,k as y,w as f,z as p,A as b,y as l,B as g,C as w,t as c,d as k,q as v}from"./_plugin-vue_export-helper.js";import{E as n,L as _,W as S}from"./index.js";const B=`.widget-kvass-media-render-youtube{height:100%;width:100%;position:relative}.widget-kvass-media-render-youtube iframe{height:100%;width:100%}.widget-kvass-media-render-youtube>*{position:absolute;top:0;left:0;width:100%;height:100%}.widget-kvass-media-render-youtube__thumbnail{background-size:cover;background-repeat:no-repeat;background-position:center;filter:blur(10px);opacity:.7}.widget-kvass-media-render-youtube__blocked{display:flex;justify-content:center;align-items:center;left:50%;top:50%;transform:translate(-50%,-50%)}.widget-kvass-media-render-youtube__blocked svg{opacity:.3}@media (max-width: 992px){.widget-kvass-media-render-youtube__blocked svg{font-size:2.5em}}.widget-kvass-media-render-youtube__blocked-warning{pointer-events:initial;position:absolute;bottom:0;text-align:center;background-color:#f2f2f2;font-size:.6em;bottom:3rem;left:3rem;max-width:400px;font-size:.8em;padding:1.5em 2em}.widget-kvass-media-render-youtube__blocked-warning-button{padding:.5rem;border:1px solid #818181;backdrop-filter:none;background-color:transparent}@media (max-width: 992px){.widget-kvass-media-render-youtube__blocked-warning{left:.5rem;bottom:.5rem;font-size:.6em;max-width:200px}}.widget-kvass-media-render-youtube .fade-enter-active,.widget-kvass-media-render-youtube .fade-leave-active{transition:opacity .5s}.widget-kvass-media-render-youtube .fade-enter,.widget-kvass-media-render-youtube .fade-leave-to{opacity:0}
2
- `,x={props:{url:{type:String,default:""},loop:{type:[String,Boolean],default:!0},autoplay:{type:[String,Boolean],default:!1},controls:{type:[String,Boolean],default:!0},mute:{type:[String,Boolean],default:!1},displayThumbnail:{type:[String,Boolean],default:!0},ignoreConsent:{type:[String,Boolean],default:!1},hideConsent:{type:[String,Boolean],default:!1},thumbnailSource:{type:String,default:""},consentBlockMessage:{type:String,default:"The video is blocked due to lack of consent to cookies"},consentButtonLabel:{type:String,default:"Edit consents"},aspectRatio:{type:String,default:"16/9"}},data(){return{ready:!1,player:null,thumbnail:null,consents:[]}},computed:{kvassDefined(){return typeof Kvass<"u"},showConsent(){return this.hideConsent||!this.kvassDefined?!1:!this.ignoreConsent&&!this.consents.includes("statistics")},videoId(){if(!this.url)return;let e=this.url;return[n(e,/https\:\/\/(w{3}\.)?youtube\.com\/watch\?v=(.+)\/?/,{group:2}),n(e,/https\:\/\/(w{3}\.)?youtube\.com\/embed\/(.+)\/?/,{group:2}),n(e,/https\:\/\/(w{3}\.)?youtube\.com\/watch\/(.+)\/?/,{group:2}),n(e,/https\:\/\/(w{3}\.)?youtu\.be\/(.+)\/?/,{group:2})].find(s=>!!s).split("&")[0]}},methods:{openConsent(){this.kvassDefined&&Kvass.emit("consent:show")},play(){!this.player||!this.ready||this.player.playVideo()},async init(){const e={loop:this.loop,autoplay:this.autoplay,controls:this.controls,muted:this.mute||this.autoplay,enablejsapi:1,playsinline:1};function s(t){return t==="false"?!1:t==="true"?!0:t}Object.entries(e).map(([t,r])=>e[t]=Number(s(r))),_("https://www.youtube.com/iframe_api"),await S(()=>window.YT&&window.YT.Player,{limit:100}),this.player=new YT.Player(this.$refs.youtubePlayer,{videoId:this.videoId,playerVars:{...e,videoId:this.videoId,origin:window.location.host},events:{onReady:t=>{this.ready=!0,e.mute&&t.target.mute(),e.autoplay&&t.target.playVideo()}}})}},async mounted(){if(this.displayThumbnail&&(this.thumbnail=!this.thumbnailSource&&this.kvassDefined?`/api/media/thumbnail?url=${this.url}`:this.thumbnailSource),this.ignoreConsent||!this.kvassDefined)return this.init();let e=s=>{if(this.consents=s||[],!(!this.consents||!this.consents.length)&&this.consents.includes("statistics"))return this.init()};this.kvassDefined&&(Kvass.emit("consent:get",s=>e(s)),Kvass.on("consent:change",e))}},C={ref:"youtubePlayer",class:"kvass-media-render-youtube__embed",frameborder:"0",allow:"autoplay; fullscreen;",webkitallowfullscreen:"",mozallowfullscreen:""},T={key:0,class:"widget-kvass-media-render-youtube__blocked"},z={class:"widget-kvass-media-render-youtube__blocked-warning"};function D(e,s,t,r,a,o){return d(),u("div",{class:"widget-kvass-media-render-youtube",style:l(`aspect-ratio: ${t.aspectRatio};`)},[i("div",C,null,512),y(g,{name:"fade",mode:"in-out"},{default:f(()=>[p(i("div",{class:"widget-kvass-media-render-youtube__thumbnail",style:l({backgroundImage:`url(${a.thumbnail})`})},null,4),[[b,!a.ready&&a.thumbnail]])]),_:1}),o.showConsent?(d(),u("div",T,[i("div",z,[w(c(t.consentBlockMessage)+" ",1),i("button",{class:"widget-kvass-media-render-youtube__blocked-warning-button",onClick:s[0]||(s[0]=(...m)=>o.openConsent&&o.openConsent(...m))},c(t.consentButtonLabel),1)])])):k("",!0)],4)}const V=h(x,[["render",D],["styles",[B]]]);customElements.define("kvass-youtube",v(V));
1
+ import{_ as p,o as d,c as u,a as i,k as h,w as y,z as f,A as b,y as l,B as g,C as w,t as c,d as v,q as k}from"./_plugin-vue_export-helper.js";import{E as a,L as _,W as S}from"./index.js";const B=`.widget-kvass-media-render-youtube{height:100%;width:100%;position:relative}.widget-kvass-media-render-youtube iframe{height:100%;width:100%}.widget-kvass-media-render-youtube>*{position:absolute;top:0;left:0;width:100%;height:100%}.widget-kvass-media-render-youtube__thumbnail{background-size:cover;background-repeat:no-repeat;background-position:center;filter:blur(10px);opacity:.7}.widget-kvass-media-render-youtube__blocked{display:flex;justify-content:center;align-items:center;left:50%;top:50%;transform:translate(-50%,-50%)}.widget-kvass-media-render-youtube__blocked svg{opacity:.3}@media (max-width: 992px){.widget-kvass-media-render-youtube__blocked svg{font-size:2.5em}}.widget-kvass-media-render-youtube__blocked-warning{pointer-events:initial;position:absolute;bottom:0;text-align:center;background-color:#f2f2f2;font-size:.6em;bottom:3rem;left:3rem;max-width:400px;font-size:.8em;padding:1.5em 2em}.widget-kvass-media-render-youtube__blocked-warning-button{padding:.5rem;border:1px solid #818181;backdrop-filter:none;background-color:transparent}@media (max-width: 992px){.widget-kvass-media-render-youtube__blocked-warning{left:.5rem;bottom:.5rem;font-size:.6em;max-width:200px}}.widget-kvass-media-render-youtube .fade-enter-active,.widget-kvass-media-render-youtube .fade-leave-active{transition:opacity .5s}.widget-kvass-media-render-youtube .fade-enter,.widget-kvass-media-render-youtube .fade-leave-to{opacity:0}
2
+ `,x={props:{url:{type:String,default:""},videoState:{type:String,default:"ready",enums:["ready ","play","pause"]},loop:{type:[String,Boolean],default:!0},autoplay:{type:[String,Boolean],default:!1},controls:{type:[String,Boolean],default:!0},mute:{type:[String,Boolean],default:!1},displayThumbnail:{type:[String,Boolean],default:!0},ignoreConsent:{type:[String,Boolean],default:!1},hideConsent:{type:[String,Boolean],default:!1},thumbnailSource:{type:String,default:""},consentBlockMessage:{type:String,default:"The video is blocked due to lack of consent to cookies"},consentButtonLabel:{type:String,default:"Edit consents"},aspectRatio:{type:String,default:"16/9"}},watch:{videoState:{handler(e,t){if(e!==t)switch(e){case"play":return this.play();case"pause":return this.pause();default:return}}}},data(){return{ready:!1,thumbnail:null,consents:[]}},computed:{kvassDefined(){return typeof Kvass<"u"},showConsent(){return this.hideConsent||!this.kvassDefined?!1:!this.ignoreConsent&&!this.consents.includes("statistics")},videoId(){if(!this.url)return;let e=this.url,t=[a(e,/https\:\/\/(w{3}\.)?youtube\.com\/watch\?v=(.+)\/?/,{group:2}),a(e,/https\:\/\/(w{3}\.)?youtube\.com\/embed\/(.+)\/?/,{group:2}),a(e,/https\:\/\/(w{3}\.)?youtube\.com\/watch\/(.+)\/?/,{group:2}),a(e,/https\:\/\/(w{3}\.)?youtu\.be\/(.+)\/?/,{group:2})].find(s=>!!s);if(t)return t.split("&")[0]}},methods:{openConsent(){this.kvassDefined&&Kvass.emit("consent:show")},play(){this.player.mute(),this.player.playVideo()},pause(){this.player.pauseVideo()},async init(){const e={loop:this.loop,autoplay:this.autoplay,controls:this.controls,muted:this.mute||this.autoplay,enablejsapi:1,playsinline:1};function t(s){return s==="false"?!1:s==="true"?!0:s}Object.entries(e).map(([s,r])=>e[s]=Number(t(r))),_("https://www.youtube.com/iframe_api"),await S(()=>window.YT&&window.YT.Player,{limit:200}),this.player=new YT.Player(this.$refs.youtubePlayer,{videoId:this.videoId,playerVars:{...e,videoId:this.videoId,origin:window.location.host},events:{onReady:s=>{this.ready=!0,e.mute&&this.player.mute(),e.autoplay&&this.play()}}})}},async mounted(){if(this.displayThumbnail&&(this.thumbnail=!this.thumbnailSource&&this.kvassDefined?`/api/media/thumbnail?url=${this.url}`:this.thumbnailSource),this.ignoreConsent||!this.kvassDefined)return this.init();let e=t=>{if(this.consents=t||[],!(!this.consents||!this.consents.length)&&this.consents.includes("statistics"))return this.init()};this.kvassDefined&&(Kvass.emit("consent:get",t=>e(t)),Kvass.on("consent:change",e))}},C={ref:"youtubePlayer",class:"kvass-media-render-youtube__embed",frameborder:"0",allow:"autoplay; fullscreen;",webkitallowfullscreen:"",mozallowfullscreen:""},T={key:0,class:"widget-kvass-media-render-youtube__blocked"},z={class:"widget-kvass-media-render-youtube__blocked-warning"};function D(e,t,s,r,n,o){return d(),u("div",{class:"widget-kvass-media-render-youtube",style:l(`aspect-ratio: ${s.aspectRatio};`)},[i("div",C,null,512),h(g,{name:"fade",mode:"in-out"},{default:y(()=>[f(i("div",{class:"widget-kvass-media-render-youtube__thumbnail",style:l({backgroundImage:`url(${n.thumbnail})`})},null,4),[[b,!n.ready&&n.thumbnail]])]),_:1}),o.showConsent?(d(),u("div",T,[i("div",z,[w(c(s.consentBlockMessage)+" ",1),i("button",{class:"widget-kvass-media-render-youtube__blocked-warning-button",onClick:t[0]||(t[0]=(...m)=>o.openConsent&&o.openConsent(...m))},c(s.consentButtonLabel),1)])])):v("",!0)],4)}const E=p(x,[["render",D],["styles",[B]]]);customElements.define("kvass-youtube",k(E));
package/index.html CHANGED
@@ -8,6 +8,13 @@
8
8
  </head>
9
9
 
10
10
  <body>
11
+ <kvass-vimeo
12
+ url="https://vimeo.com/833277445"
13
+ autoplay="true"
14
+ loop="true"
15
+ ></kvass-vimeo>
16
+
17
+ <script type="module" src="/src/vimeo/main.js"></script>
11
18
  <!-- <kvass-contact
12
19
  account-url="https://local.kvass.test"
13
20
  label-subtitle="Ønsker du å motta vårt nyhetsbrev?"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvass/widgets",
3
- "version": "1.1.4",
3
+ "version": "1.1.6",
4
4
  "scripts": {
5
5
  "dev": "vite",
6
6
  "build": "vite build",
@@ -7,7 +7,11 @@ export default {
7
7
  type: String,
8
8
  default: '',
9
9
  },
10
-
10
+ videoState: {
11
+ type: String,
12
+ default: 'ready',
13
+ enums: ['ready ', 'play', 'pause'],
14
+ },
11
15
  loop: {
12
16
  type: [String, Boolean],
13
17
  default: true,
@@ -58,14 +62,30 @@ export default {
58
62
  default: '16/9',
59
63
  },
60
64
  },
65
+ watch: {
66
+ videoState: {
67
+ handler(newValue, oldValue) {
68
+ if (newValue === oldValue) return
69
+ switch (newValue) {
70
+ case 'play':
71
+ return this.play()
72
+ case 'pause':
73
+ return this.pause()
74
+ default:
75
+ return
76
+ }
77
+ },
78
+ },
79
+ },
61
80
  data() {
62
81
  return {
63
82
  ready: false,
64
- player: null,
83
+
65
84
  thumbnail: null,
66
85
  consents: [],
67
86
  }
68
87
  },
88
+
69
89
  computed: {
70
90
  kvassDefined() {
71
91
  return typeof Kvass !== 'undefined'
@@ -78,7 +98,7 @@ export default {
78
98
  videoId() {
79
99
  if (!this.url) return
80
100
 
81
- return [
101
+ let id = [
82
102
  ExtractString(this.url, /https\:\/\/(w{3}\.)?vimeo\.com\/(.+)\/?/, {
83
103
  group: 2,
84
104
  }),
@@ -89,9 +109,9 @@ export default {
89
109
  group: 3,
90
110
  },
91
111
  ),
92
- ]
93
- .find((e) => Boolean(e))
94
- .split('&')[0]
112
+ ].find((e) => Boolean(e))
113
+
114
+ if (id) return id.split('&')[0]
95
115
  },
96
116
  },
97
117
 
@@ -100,14 +120,22 @@ export default {
100
120
  if (!this.kvassDefined) return
101
121
  Kvass.emit('consent:show')
102
122
  },
103
- play() {
104
- if (!this.player || !this.ready) return
105
- this.player.play()
123
+
124
+ async play() {
125
+ try {
126
+ this.player.setVolume(0)
127
+ await this.player.play()
128
+ } catch (e) {
129
+ console.log(e)
130
+ }
131
+ },
132
+ pause() {
133
+ this.player.pause()
106
134
  },
107
135
 
108
136
  async init() {
109
137
  const mergeOptions = {
110
- id: this.videoId,
138
+ url: `https://vimeo.com/${this.videoId}`,
111
139
  loop: this.loop,
112
140
  autoplay: this.autoplay,
113
141
  controls: this.controls,
@@ -129,9 +157,7 @@ export default {
129
157
  LoadScript('https://player.vimeo.com/api/player.js')
130
158
  const Vimeo = await WaitUntil(() => window.Vimeo, { limit: 100 })
131
159
 
132
- this.player = new Vimeo.Player(this.$refs.vimeoPlayer, {
133
- ...mergeOptions,
134
- })
160
+ this.player = new Vimeo.Player(this.$refs.vimeoPlayer, mergeOptions)
135
161
 
136
162
  await this.player
137
163
  .ready()
@@ -139,17 +165,14 @@ export default {
139
165
  this.ready = true
140
166
  })
141
167
  .catch((error) => {
142
- this.ready = true
168
+ console.log(error)
143
169
  })
144
170
  },
145
171
  },
146
172
 
147
173
  async mounted() {
148
174
  if (this.displayThumbnail)
149
- this.thumbnail =
150
- !this.thumbnailSource && this.kvassDefined
151
- ? `/api/media/thumbnail?url=${this.url}`
152
- : this.thumbnailSource
175
+ this.thumbnail = `/api/media/thumbnail?url=${this.url}`
153
176
 
154
177
  if (this.ignoreConsent || !this.kvassDefined) return this.init()
155
178
 
@@ -158,7 +181,6 @@ export default {
158
181
  if (!this.consents || !this.consents.length) return
159
182
 
160
183
  if (this.consents.includes('statistics')) return this.init()
161
- return this.$nextTick(() => this.$emit('ended'))
162
184
  }
163
185
 
164
186
  if (this.kvassDefined) {
@@ -7,6 +7,11 @@ export default {
7
7
  type: String,
8
8
  default: '',
9
9
  },
10
+ videoState: {
11
+ type: String,
12
+ default: 'ready',
13
+ enums: ['ready ', 'play', 'pause'],
14
+ },
10
15
 
11
16
  loop: {
12
17
  type: [String, Boolean],
@@ -58,10 +63,25 @@ export default {
58
63
  default: '16/9',
59
64
  },
60
65
  },
66
+
67
+ watch: {
68
+ videoState: {
69
+ handler(newValue, oldValue) {
70
+ if (newValue === oldValue) return
71
+ switch (newValue) {
72
+ case 'play':
73
+ return this.play()
74
+ case 'pause':
75
+ return this.pause()
76
+ default:
77
+ return
78
+ }
79
+ },
80
+ },
81
+ },
61
82
  data() {
62
83
  return {
63
84
  ready: false,
64
- player: null,
65
85
  thumbnail: null,
66
86
  consents: [],
67
87
  }
@@ -78,7 +98,7 @@ export default {
78
98
  videoId() {
79
99
  if (!this.url) return
80
100
  let value = this.url
81
- return [
101
+ let id = [
82
102
  ExtractString(
83
103
  value,
84
104
  /https\:\/\/(w{3}\.)?youtube\.com\/watch\?v=(.+)\/?/,
@@ -97,11 +117,11 @@ export default {
97
117
  ExtractString(value, /https\:\/\/(w{3}\.)?youtu\.be\/(.+)\/?/, {
98
118
  group: 2,
99
119
  }),
100
- ]
101
- .find((e) => {
102
- return Boolean(e)
103
- })
104
- .split('&')[0]
120
+ ].find((e) => {
121
+ return Boolean(e)
122
+ })
123
+
124
+ if (id) return id.split('&')[0]
105
125
  },
106
126
  },
107
127
 
@@ -111,9 +131,12 @@ export default {
111
131
  Kvass.emit('consent:show')
112
132
  },
113
133
  play() {
114
- if (!this.player || !this.ready) return
134
+ this.player.mute()
115
135
  this.player.playVideo()
116
136
  },
137
+ pause() {
138
+ this.player.pauseVideo()
139
+ },
117
140
 
118
141
  async init() {
119
142
  const mergeOptions = {
@@ -137,7 +160,7 @@ export default {
137
160
 
138
161
  LoadScript('https://www.youtube.com/iframe_api')
139
162
 
140
- await WaitUntil(() => window.YT && window.YT.Player, { limit: 100 })
163
+ await WaitUntil(() => window.YT && window.YT.Player, { limit: 200 })
141
164
  this.player = new YT.Player(this.$refs.youtubePlayer, {
142
165
  videoId: this.videoId,
143
166
  playerVars: {
@@ -148,8 +171,9 @@ export default {
148
171
  events: {
149
172
  onReady: (event) => {
150
173
  this.ready = true
151
- if (Boolean(mergeOptions.mute)) event.target.mute()
152
- if (Boolean(mergeOptions.autoplay)) event.target.playVideo()
174
+
175
+ if (Boolean(mergeOptions.mute)) this.player.mute()
176
+ if (Boolean(mergeOptions.autoplay)) this.play()
153
177
  },
154
178
  },
155
179
  })