vue3-ytframe
Version:
A Vue3 YouTube Iframe API Wrapper Component
1 lines • 6.32 kB
JavaScript
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VueYtframe={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=/^[a-zA-Z0-9_-]{11}$/,r=/^(www\.|m\.)/,i=/^\/(?:embed|shorts|live|v)\/([a-zA-Z0-9_-]{11})/,a=`https://www.youtube.com/iframe_api`;function o(e,t){let n,r=(...r)=>{n&&clearTimeout(n),n=setTimeout(()=>{n=void 0,e(...r)},t)};return r.cancel=()=>{n&&clearTimeout(n),n=void 0},r}function s(e){if(!e||typeof e!=`string`)return null;let t;try{t=new URL(e.trim())}catch{return null}if(t.protocol!==`http:`&&t.protocol!==`https:`)return null;let a=t.hostname.replace(r,``),o=t.pathname;if(a===`youtu.be`){let e=o.slice(1).split(`/`)[0];return n.test(e)?e:null}if(a===`youtube.com`||a===`youtube-nocookie.com`){if(o===`/watch`){let e=t.searchParams.get(`v`);return e&&n.test(e)?e:null}let e=i.exec(o);if(e)return e[1]}return null}var c=[`id`],l=(0,t.defineComponent)({__name:`VueYtframe`,props:{videoId:{default:null},videoUrl:{default:null},width:{default:`100%`},height:{default:`100%`},playerVars:{default:()=>({})}},emits:[`ready`,`playing`,`paused`,`ended`,`stateChange`,`playbackQualityChange`,`playbackRateChange`,`error`,`apiChange`],setup(e,{expose:n,emit:r}){let i=e,l=r,u=(0,t.ref)(null),d=(0,t.ref)(``),f=(0,t.ref)(!1),p,m=o(ee,300),h=o(g,500);(0,t.watch)([()=>i.width,()=>i.height],([e,t])=>{u.value&&u.value.setSize(Number(e),Number(t))}),(0,t.watch)(()=>i.videoId,e=>m(e)),(0,t.watch)(()=>i.videoUrl,e=>h(e));function ee(e){v(),!(!f.value||!e)&&_(e)}function g(e){if(v(),!f.value||!e)return;let t=s(e);t&&_(t)}function _(e){if(!u.value){C();return}let t={videoId:e,startSeconds:i.playerVars?.start||0,endSeconds:i.playerVars?.end||void 0};i.playerVars?.autoplay===1?u.value.loadVideoById(t):u.value.cueVideoById(t)}function v(){let{videoId:e,videoUrl:t}=i;if(!e&&!t){f.value=!1;return}if(!e&&t&&!s(t)){f.value=!1,`${t}`;return}f.value=!0}let y=0;function b(){return typeof crypto<`u`&&typeof crypto.randomUUID==`function`?`ytframe-${crypto.randomUUID()}`:`ytframe-${(++y).toString(36)}`}(0,t.onMounted)(()=>{d.value=b(),v(),x(),S().then(()=>{f.value&&C()}).catch(e=>(e.message,void 0))}),(0,t.onBeforeUnmount)(()=>{m.cancel(),h.cancel(),p&&clearTimeout(p),u.value&&=(u.value.destroy(),null)});function x(){if(window.YT&&window.YT.Player||document.querySelector(`script[src="https://www.youtube.com/iframe_api"]`))return;let e=document.createElement(`script`);e.src=a,document.head.appendChild(e)}function S(){return new Promise((e,t)=>{let n=Date.now(),r=()=>{if(window.YT&&window.YT.Player){e();return}if(Date.now()-n>1e4){t(Error(`YouTube Iframe API failed to load within timeout.`));return}p=setTimeout(r,100)};r()})}function C(){let e=document.getElementById(d.value);if(!e)return;let t=i.videoId||s(i.videoUrl)||void 0;u.value=new window.YT.Player(e,{height:i.height,width:i.width,videoId:t,playerVars:i.playerVars,events:{onReady:e=>l(`ready`,e.target),onStateChange:w,onPlaybackQualityChange:e=>l(`playbackQualityChange`,e.target),onPlaybackRateChange:e=>l(`playbackRateChange`,e.target),onError:e=>l(`error`,e.target),onApiChange:e=>l(`apiChange`,e.target)}})}function w(e){switch(e.data){case window.YT.PlayerState.PLAYING:l(`playing`,e.target);break;case window.YT.PlayerState.PAUSED:l(`paused`,e.target);break;case window.YT.PlayerState.ENDED:l(`ended`,e.target);break}l(`stateChange`,e.target)}function T(){if(!u.value)throw Error(`[vue3-ytframe] Player is not ready. Wait for the 'ready' event before calling player methods.`);return u.value}function E(){T().playVideo()}function D(){T().pauseVideo()}function O(){T().stopVideo()}function k(e,t){T().seekTo(e,t)}function A(){T().nextVideo()}function j(){T().previousVideo()}function M(e){T().playVideoAt(e)}function N(){T().mute()}function P(){T().unMute()}function F(){return T().isMuted()}function I(e){T().setVolume(e)}function L(){return T().getVolume()}function R(e,t){T().setSize(e,t)}function te(e){T().setLoop(e)}function z(e){T().setShuffle(e)}function B(){return T().getDuration()}function V(){return T().getCurrentTime()}function H(){return T().getVideoEmbedCode()}function U(){return T().getVideoUrl()}function W(){return T().getVideoLoadedFraction()}function G(){return T().getPlayerState()}function K(){return T().getPlaybackRate()}function q(e){T().setPlaybackRate(e)}function J(){return T().getAvailablePlaybackRates()}function Y(){return T().getOptions()}function X(e,t){return T().getOption(e,t)}function Z(e,t,n){T().setOption(e,t,n)}function Q(){return T().getSphericalProperties()}function ne(e){T().setSphericalProperties(e)}function re(){return T().getPlaylist()}function ie(){return T().getPlaylistIndex()}function ae(){return T().getIframe()}function oe(){u.value&&=(u.value.destroy(),null)}function $({videoId:e,startSeconds:t,endSeconds:n}){T().loadVideoById({videoId:e,startSeconds:t,endSeconds:n})}function se({videoId:e,startSeconds:t,endSeconds:n}){T().cueVideoById({videoId:e,startSeconds:t,endSeconds:n})}function ce({mediaContentUrl:e,startSeconds:t,endSeconds:n}){T().loadVideoByUrl({mediaContentUrl:e,startSeconds:t,endSeconds:n})}function le({mediaContentUrl:e,startSeconds:t,endSeconds:n}){T().cueVideoByUrl({mediaContentUrl:e,startSeconds:t,endSeconds:n})}function ue(e,t,n){T().cuePlaylist(e,t,n)}function de(e,t,n){T().loadPlaylist(e,t,n)}return n({player:u,playVideo:E,pauseVideo:D,stopVideo:O,seekTo:k,nextVideo:A,previousVideo:j,playVideoAt:M,mute:N,unMute:P,isMuted:F,setVolume:I,getVolume:L,setSize:R,setShuffle:z,setLoop:te,getDuration:B,getCurrentTime:V,getVideoEmbedCode:H,getVideoUrl:U,getVideoLoadedFraction:W,getPlayerState:G,getPlaybackRate:K,setPlaybackRate:q,getAvailablePlaybackRates:J,getOptions:Y,getAnOption:X,setAnOption:Z,getSphericalProperties:Q,setSphericalProperties:ne,getPlaylist:re,getPlaylistIndex:ie,getIframe:ae,destroy:oe,loadVideoById:$,cueVideoById:se,loadVideoByUrl:ce,cueVideoByUrl:le,cuePlaylist:ue,loadPlaylist:de,getVideoIdFromYoutubeURL:s}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{id:d.value,ref:`youtube`},null,8,c))}});e.VueYtframe=l,e.default={install(e){e.component(`VueYtframe`,l)}},e.getVideoIdFromYoutubeURL=s});