vue3-ytframe/dist/ytframe.umd.js

A Vue3 YouTube Iframe API Wrapper Component

(function(r,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(r=typeof globalThis<"u"?globalThis:r||self,r.VueYtframe=l(r.Vue))})(this,function(r){"use strict";const l=["id"],C={__name:"VueYtframe",props:{videoId:{type:String,required:!1,default:null},videoUrl:{type:String,required:!1,default:null},width:{type:[Number,String],required:!1,default:"100%"},height:{type:[Number,String],required:!1,default:"100%"},playerVars:{type:Object,required:!1,default:()=>({})}},emits:["ready","playing","paused","ended","stateChange","playbackQualityChange","playbackRateChange","error","apiChange"],setup(s,{expose:g,emit:k}){const t=r.ref(null),u=r.ref(!1),n=s;r.watch([()=>n.width,()=>n.height],([e,a])=>{t.value&&h(e,a)}),r.watch(()=>n.videoId,e=>{w(()=>{U(e)},300)()});function U(e){var a;c(),u.value&&(t.value?((a=n.playerVars)==null?void 0:a.autoplay)===1?m({videoId:e,startSeconds:n.playerVars.start||0,endSeconds:n.playerVars.end||0}):V({videoId:e,startSeconds:n.playerVars.start||0,endSeconds:n.playerVars.end||0}):p())}r.watch(()=>n.videoUrl,e=>{w(()=>{T(e)},500)()});function T(e){var a;c(),u.value&&(t.value?(a=n.playerVars)!=null&&a.autoplay?b({mediaContentUrl:e,startSeconds:n.playerVars.start||0,endSeconds:n.playerVars.end||0}):P({mediaContentUrl:e,startSeconds:n.playerVars.start||0,endSeconds:n.playerVars.end||0}):p())}function c(){const e=n.videoId,a=n.videoUrl;if(!e&&!a){u.value=!1,console.error("At least one of the props 'videoId' or 'videoUrl' must be provided.");return}if(!e&&a&&!y(a)){console.error(`The provided video URL (${a}) is not a valid Youtube URL.`,"If you are sure it is a valid YouTube URL and you are still getting this error,","please open an issue on GitHub at https://github.com/kiranparajuli589/vue3-ytframe/issues/new"),u.value=!1;return}u.value=!0}const f=r.ref(null);r.onMounted(async()=>{f.value=Math.random().toString(36).substring(2,12),c(n.videoId,n.videoUrl),R().then(()=>{v().then(()=>{u.value&&p()})})});function R(){if(document.querySelector("script[src='https://www.youtube.com/iframe_api']"))return Promise.resolve();const e=document.createElement("script");return e.src="https://www.youtube.com/iframe_api",document.head.appendChild(e),console.info("Youtube API script added to the HTML document."),Promise.resolve()}function v(){return window.YT&&window.YT.Player?Promise.resolve():new Promise(e=>{setTimeout(()=>{v().then(()=>{e()})},100)})}const i=k;function p(){const e=document.getElementById(f.value),a=n.videoId||y(n.videoUrl);t.value=new YT.Player(e,{height:n.height,width:n.width,videoId:a,playerVars:n.playerVars,events:{onReady:Y,onStateChange:x,onPlaybackQualityChange:A,onPlaybackRateChange:_,onError:B,onApiChange:E}})}function Y(e){i("ready",e.target)}function x(e){switch(e.data){case window.YT.PlayerState.PLAYING:i("playing",e.target);break;case window.YT.PlayerState.PAUSED:i("paused",e.target);break;case window.YT.PlayerState.ENDED:i("ended",e.target);break}i("stateChange",e.target)}function A(e){i("playbackQualityChange",e.target)}function _(e){i("playbackRateChange",e.target)}function B(e){i("error",e.target)}function E(e){i("apiChange",e.target)}function L(){t.value.playVideo()}function q(){t.value.pauseVideo()}function M(){t.value.stopVideo()}function O(e,a){t.value.seekTo(e,a)}function D(){t.value.nextVideo()}function N(){t.value.previousVideo()}function Q(e){t.value.playVideoAt(e)}function j(){t.value.mute()}function z(){t.value.unMute()}function F(){return t.value.isMuted()}function G(e){t.value.setVolume(e)}function H(){return t.value.getVolume()}function h(e,a){t.value.setSize(e,a)}function $(e){t.value.setLoop(e)}function Z(e){t.value.setShuffle(e)}function J(){return t.value.getDuration()}function K(){return t.value.getCurrentTime()}function W(){return t.value.getVideoEmbedCode()}function X(){return t.value.getVideoUrl()}function ee(){return t.value.getVideoLoadedFraction()}function te(){return t.value.getPlayerState()}function ae(){return t.value.getPlaybackRate()}function ne(e){t.value.setPlaybackRate(e)}function oe(){return t.value.getAvailablePlaybackRates()}function re(){return t.value.getOptions()}function ie(e,a){return t.value.getOption(e,a)}function ue(e,a,o){t.value.setOption(e,a,o)}function le(){return t.value.getSphericalProperties()}function de(e){t.value.setSphericalProperties(e)}function se(){return t.value.getPlaylist()}function ce(){return t.value.getPlaylistIndex()}function fe(){return t.value.getIframe()}function pe(){t.value.destroy(),t.value=null}function m({videoId:e,startSeconds:a,endSeconds:o}={}){t.value.loadVideoById({videoId:e,startSeconds:a,endSeconds:o})}function V({videoId:e,startSeconds:a,endSeconds:o}={}){t.value.cueVideoById({videoId:e,startSeconds:a,endSeconds:o})}function b({mediaContentUrl:e,startSeconds:a,endSeconds:o}={}){t.value.loadVideoByUrl({mediaContentUrl:e,startSeconds:a,endSeconds:o})}function P({mediaContentUrl:e,startSeconds:a,endSeconds:o}={}){t.value.cueVideoByUrl({mediaContentUrl:e,startSeconds:a,endSeconds:o})}function ye(e,a,o){t.value.cuePlaylist(e,a,o)}function ge(e,a,o){t.value.loadPlaylist(e,a,o)}function y(e){const a=/^https:\/\/(?:(?:www|m)\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)(?<id>[a-zA-Z0-9_-]{11})(?:[&?].*)?$/gm;a.lastIndex=0;const o=a.exec(e);return o?o.groups.id:null}function w(e,a,o){var d;return function(){var S=this,I=arguments,ve=function(){d=null,o||e.apply(S,I)},he=o&&!d;clearTimeout(d),d=setTimeout(ve,a),he&&e.apply(S,I)}}return g({player:t,playVideo:L,pauseVideo:q,stopVideo:M,seekTo:O,nextVideo:D,previousVideo:N,playVideoAt:Q,mute:j,unMute:z,isMuted:F,setVolume:G,getVolume:H,setSize:h,setShuffle:Z,setLoop:$,getDuration:J,getCurrentTime:K,getVideoEmbedCode:W,getVideoUrl:X,getVideoLoadedFraction:ee,getPlayerState:te,getPlaybackRate:ae,setPlaybackRate:ne,getAvailablePlaybackRates:oe,getOptions:re,getAnOption:ie,setAnOption:ue,getSphericalProperties:le,setSphericalProperties:de,getPlaylist:se,getPlaylistIndex:ce,getIframe:fe,destroy:pe,loadVideoById:m,cueVideoById:V,loadVideoByUrl:b,cueVideoByUrl:P,cuePlaylist:ye,loadPlaylist:ge,getVideoIdFromYoutubeURL:y}),(e,a)=>(r.openBlock(),r.createElementBlock("div",{ref:"youtube",id:f.value},null,8,l))}};return{install:(s,g)=>{s.component("VueYtframe",C)}}});