vuetube
Version:
A fast, lightweight, lazyload vue component acting as a thin layer over the YouTube IFrame Player API which renders fast
1 lines • 6.02 kB
JavaScript
var VueTube=function(t,e){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a="https://www.youtube.com",i="https://www.youtube-nocookie.com",o="https://fonts.gstatic.com",r="https://i.ytimg.com",s="https://www.youtube.com/iframe_api";function c(t){var e=Object.keys(t).filter((function(e){return void 0!==t[e]})).map((function(e){return"".concat(e,"=").concat(t[e])}));return e.length>0?"?".concat(e.join("&")):""}function l(t){return"function"===function(t){return typeof t}(t)}function u(t,e,n,a){var i=a[t]||n[t];return l(i)?i(e):i}var d=n(e).default.extend({name:"VueTube",props:{videoId:{type:String,required:!0},isPlaylist:{type:Boolean,default:!1},aspectRatio:{type:Number,default:16/9},enableCookies:{type:Boolean,default:!1},playerVars:{type:Object,default:function(){return{}}},disableWarming:{type:Boolean,default:!1},disableWebp:{type:Boolean,default:!1},imageAlt:{type:String,default:""},imageLoading:{type:String,default:"lazy",validator:function(t){return-1!==["lazy","eager","auto"].indexOf(t)}},resolution:{type:String,default:"sddefault",validator:function(t){return-1!==["maxresdefault","sddefault","hqdefault","mqdefault","default"].indexOf(t)}},buttonLabel:{type:String,default:"Play video"},iframeTitle:{type:String,default:void 0},iframeAllow:{type:String,default:"accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture"}},data:function(){return{isConnectionWarmed:!1,isPlayed:!1,isLoaded:!1,player:null}},beforeDestroy:function(){var t=this.player;null!==t&&"function"==typeof t.destroy&&(t.destroy(),this.player=null)},computed:{host:function(){return this.enableCookies?a:i},iframeUrl:function(){var t=this.playerVars,e=this.host,n=this.videoId,a=this.isPlaylist,i=Object.assign({},{autoplay:1},t);if(a){var o=c(Object.assign({},i,{list:n}));return"".concat(e,"/embed/videoseries").concat(o)}var r=c(i);return"".concat(e,"/embed/").concat(n).concat(r)},calculatedAspectRatioPadding:function(){var t=this.aspectRatio;return"".concat(100/t,"%")},boxComponent:function(){var t=this.$createElement,e=this.calculatedAspectRatioPadding,n=this.isPlayed,a=this.iframeComponent,i=this.thumbnailComponent,o=this.playBtnComponent;return t("div",{on:{"~pointerover":this.warmConnections,"~click":this.playVideo},class:["vuetube",{"vuetube--played":n}]},[t("div",{class:"vuetube__box",style:{"padding-bottom":e}},[n?a:i,o])])},thumbnailComponent:function(){var t=this.$slots,e=this.$scopedSlots,n=this.$createElement,a=this.resolution,i=this.videoId,o=this.disableWebp,s=this.imageAlt,c=this.imageLoading,l="".concat(r,"/vi_webp/").concat(i,"/").concat(a,".webp"),d="".concat(r,"/vi/").concat(i,"/").concat(a,".jpg"),p=n("picture",{class:["vuetube__thumbnail"]},[!o&&n("source",{attrs:{srcset:l,type:"image/webp"}}),n("source",{attrs:{srcset:d,type:"image/jpeg"}}),n("img",{class:["vuetube__image"],attrs:{src:d,alt:s,loading:c}})]);return u("thumbnail",{},t,e)||p},playBtnComponent:function(){return(0,this.$createElement)("button",{class:["vuetube__button"],attrs:{type:"button","aria-label":this.buttonLabel},on:{"~click":this.playVideo}},[this.playBtnIconComponent])},playBtnIconComponent:function(){var t=this.$createElement,e=this.$slots,n=this.$scopedSlots,a=t("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 48",class:"vuetube__icon","aria-hidden":!0,focusable:"false"}},[t("path",{attrs:{class:"vuetube__icon-bg",d:"M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z"}}),t("path",{attrs:{class:"vuetube__icon-triangle",d:"M45 24L27 14v20"}})]);return u("icon",{},e,n)||a},iframeComponent:function(){var t=this.$createElement,e=this.iframeTitle,n=this.onIframeLoad,a=this.iframeAllow;return t("iframe",{ref:"iframe",class:["vuetube__iframe"],attrs:{src:this.iframeUrl,allow:a,title:e,allowfullscreen:!0},on:{load:n}})}},methods:{warmConnections:function(){var t=this.disableWarming,e=this.enableCookies,n=this.isConnectionWarmed;if(!t&&!n){var s=[a,"https://googleads.g.doubleclick.net"],c=[i],l=[o,r,"https://google.com","https://yt3.ggpht.com","https://www.gstatic.com"],u=Array.from(document.querySelectorAll("link[rel=preconnect]")).map((function(t){return t.href}));(e?s.concat(l):c.concat(l)).filter((function(t){return-1===u.indexOf("".concat(t,"/"))})).forEach((function(t){var e,n,a;e=t,n=t===o,(a=document.createElement("link")).rel="preconnect",a.href=e,n&&(a.crossOrigin=""),document.head.appendChild(a)})),this.isConnectionWarmed=!0}},playVideo:function(){this.isPlayed=!0,this.$emit("player:play")},onIframeLoad:function(){var t=this.$refs,e=this.playerVars,n=this.initAPI;this.isLoaded=!0,t.iframe.focus(),1===e.enablejsapi&&n(),this.$emit("player:load")},initAPI:function(){var t,e=this;if(window.YT&&l(window.YT.Player))this.initAPIPlayer();else{var n=window.onYouTubeIframeAPIReady;window.onYouTubeIframeAPIReady=function(){l(n)&&n(),e.initAPIPlayer()},Array.from(document.getElementsByTagName("script")).some((function(t){return t.src===s}))||((t=document.createElement("script")).src=s,document.head.appendChild(t))}},initAPIPlayer:function(){var t=this,e=this.$refs,n=this.videoId,a=this.playerVars,i=e.iframe,o=new window.YT.Player(i,{videoId:n,playerVars:a,events:{onReady:function(e){return t.$emit("player:ready",e)},onStateChange:function(e){return t.$emit("player:statechange",e)},onPlaybackQualityChange:function(e){return t.$emit("player:playbackqualitychange",e)},onPlaybackRateChange:function(e){return t.$emit("player:playbackratechange",e)},onError:function(e){return t.$emit("player:error",e)},onApiChange:function(e){return t.$emit("player:apichange",e)}}});this.player=o}},render:function(){return this.boxComponent}});return t.VueTube=d,t.default=function(t){t.component(d.name,d)},Object.defineProperty(t,"__esModule",{value:!0}),t}({},Vue);