vue3-ytframe - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

dist/ytframe.es.js

@@ -1,3 +0,3 @@
-import { ref as d, watch as Q, onMounted as j, openBlock as z, createElementBlock as B } from "vue";
-const F = ["id"], O = {
+import { ref as g, watch as j, onMounted as z, openBlock as B, createElementBlock as F } from "vue";
+const O = ["id"], G = {
   __name: "VueYtframe",
@@ -42,23 +42,26 @@ props: {
   ],
-  setup(c, { expose: s, emit: n }) {
-    const o = c, t = d(null);
-    Q(
+  setup(r, { expose: l, emit: n }) {
+    const o = r, t = g(null);
+    j(
       [() => o.videoId, () => o.videoUrl],
       ([e, a]) => {
-        !e && !a && console.error('At least one of the props "videoId" or "videoUrl" must be provided.'), !e && a && (u(a) || console.error(
-          'The provided "videoUrl" 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"
-        ));
+        d(e, a);
       }
     );
-    const r = d(null);
-    j(async () => {
-      r.value = Math.random().toString(36).substring(2, 12), g().then(() => {
-        i().then(() => {
-          f();
+    function d(e, a) {
+      !e && !a && console.error('At least one of the props "videoId" or "videoUrl" must be provided.'), !e && a && (i(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"
+      ));
+    }
+    const u = g(null);
+    z(async () => {
+      u.value = Math.random().toString(36).substring(2, 12), d(o.videoId, o.videoUrl), f().then(() => {
+        c().then(() => {
+          p();
         });
       });
     });
-    function g() {
+    function f() {
       if (document.querySelector("script[src='https://www.youtube.com/iframe_api']"))
@@ -69,6 +72,6 @@ return console.info("Youtube API script already added"), Promise.resolve();
     }
-    function i() {
+    function c() {
       return window.YT && window.YT.Player ? (console.info("Youtube API loaded", window.YT), Promise.resolve()) : new Promise((e, a) => {
         setTimeout(() => {
-          i().then(() => {
+          c().then(() => {
             e();
@@ -79,4 +82,4 @@ });
     }
-    function f() {
-      const e = document.getElementById(r.value), a = o.videoId || u(o.videoUrl);
+    function p() {
+      const e = document.getElementById(u.value), a = o.videoId || i(o.videoUrl);
       t.value = new YT.Player(e, {
@@ -89,7 +92,7 @@ height: o.height,
           onReady: y,
-          onStateChange: p,
-          onPlaybackQualityChange: h,
-          onPlaybackRateChange: m,
-          onError: v,
-          onApiChange: b
+          onStateChange: h,
+          onPlaybackQualityChange: m,
+          onPlaybackRateChange: v,
+          onError: b,
+          onApiChange: P
         }
@@ -101,3 +104,3 @@ });
     }
-    function p(e) {
+    function h(e) {
       switch (e.data) {
@@ -116,57 +119,57 @@ case YT.PlayerState.PLAYING:
     }
-    function h(e) {
+    function m(e) {
       n("playbackQualityChange", e.target);
     }
-    function m(e) {
+    function v(e) {
       n("playbackRateChange", e.target);
     }
-    function v(e) {
+    function b(e) {
       n("error", e.target);
     }
-    function b(e) {
+    function P(e) {
       n("apiChange", e.target);
     }
-    function P() {
+    function w() {
       t.value.playVideo();
     }
-    function w() {
+    function V() {
       t.value.pauseVideo();
     }
-    function V() {
+    function k() {
       t.value.stopVideo();
     }
-    function k(e, a) {
+    function C(e, a) {
       t.value.seekTo(e, a);
     }
-    function C() {
+    function S() {
       t.value.mute();
     }
-    function S() {
+    function Y() {
       t.value.unMute();
     }
-    function T() {
+    function I() {
       return t.value.isMuted();
     }
-    function Y(e) {
+    function T(e) {
       t.value.setVolume(e);
     }
-    function I() {
+    function R() {
       return t.value.getVolume();
     }
-    function R(e, a) {
+    function E(e, a) {
       t.value.setSize(e, a);
     }
-    function E() {
+    function _() {
       return t.value.getDuration();
     }
-    function _() {
+    function A() {
       return t.value.getCurrentTime();
     }
-    function A() {
+    function U() {
       return t.value.getVideoEmbedCode();
     }
-    function U() {
+    function x() {
       return t.value.getVideoUrl();
     }
-    function x() {
+    function L() {
       return t.value.getVideoLoadedFraction();
@@ -177,51 +180,55 @@ }
     }
-    function L() {
+    function q() {
       return t.value.getPlayerStateText();
     }
-    function q() {
+    function M() {
       return t.value.getPlaybackRate();
     }
-    function M(e) {
+    function N(e) {
       t.value.setPlaybackRate(e);
     }
-    function N(e) {
+    function Q(e) {
       return t.value.getOptions(e);
     }
-    function u(e) {
+    function i(e) {
       const a = /^https:\/\/(?:(?:www|m)\.)?(?:youtube\.com\/watch\?v=|youtu.be\/|youtube\.com\/embed\/)(?<id>[a-zA-Z0-9_-]+)$/gm;
       a.lastIndex = 0;
-      const l = a.exec(e);
-      return l ? l.groups.id : null;
+      const s = a.exec(e);
+      return s ? s.groups.id : null;
     }
-    return s({
+    return l({
       player: t,
-      playVideo: P,
-      pauseVideo: w,
-      stopVideo: V,
-      seekTo: k,
-      mute: C,
-      unMute: S,
-      isMuted: T,
-      setVolume: Y,
-      getVolume: I,
-      setSize: R,
-      getDuration: E,
-      getCurrentTime: _,
-      getVideoEmbedCode: A,
-      getVideoUrl: U,
-      getVideoLoadedFraction: x,
+      playVideo: w,
+      pauseVideo: V,
+      stopVideo: k,
+      seekTo: C,
+      mute: S,
+      unMute: Y,
+      isMuted: I,
+      setVolume: T,
+      getVolume: R,
+      setSize: E,
+      getDuration: _,
+      getCurrentTime: A,
+      getVideoEmbedCode: U,
+      getVideoUrl: x,
+      getVideoLoadedFraction: L,
       getPlayerState: D,
-      getPlayerStateText: L,
-      getPlaybackRate: q,
-      setPlaybackRate: M,
-      getOptions: N,
-      getVideoIdFromYoutubeURL: u
-    }), (e, a) => (z(), B("div", {
+      getPlayerStateText: q,
+      getPlaybackRate: M,
+      setPlaybackRate: N,
+      getOptions: Q,
+      getVideoIdFromYoutubeURL: i
+    }), (e, a) => (B(), F("div", {
       ref: "youtube",
-      id: r.value
-    }, null, 8, F));
+      id: u.value
+    }, null, 8, O));
   }
-}, H = O;
+}, $ = G, Z = {
+  install: (r, l) => {
+    r.component("VueYtframe", $);
+  }
+};
 export {
-  H as default
+  Z as default
 };

dist/ytframe.umd.js

@@ -1,1 +0,1 @@
-(function(n,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("vue")):typeof define=="function"&&define.amd?define(["vue"],u):(n=typeof globalThis<"u"?globalThis:n||self,n.VueYtframe=u(n.Vue))})(this,function(n){"use strict";const u=["id"];return{__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:f,emit:o}){const r=s,t=n.ref(null);n.watch([()=>r.videoId,()=>r.videoUrl],([e,a])=>{!e&&!a&&console.error('At least one of the props "videoId" or "videoUrl" must be provided.'),!e&&a&&(l(a)||console.error('The provided "videoUrl" 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"))});const i=n.ref(null);n.onMounted(async()=>{i.value=Math.random().toString(36).substring(2,12),g().then(()=>{d().then(()=>{p()})})});function g(){if(document.querySelector("script[src='https://www.youtube.com/iframe_api']"))return console.info("Youtube API script already added"),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"),Promise.resolve()}function d(){return window.YT&&window.YT.Player?(console.info("Youtube API loaded",window.YT),Promise.resolve()):new Promise((e,a)=>{setTimeout(()=>{d().then(()=>{e()})},100)})}function p(){const e=document.getElementById(i.value),a=r.videoId||l(r.videoUrl);t.value=new YT.Player(e,{height:r.height,width:r.width,videoId:a,playerVars:r.playerVars,events:{onReady:y,onStateChange:h,onPlaybackQualityChange:m,onPlaybackRateChange:b,onError:v,onApiChange:P}})}function y(e){o("ready",e.target)}function h(e){switch(e.data){case YT.PlayerState.PLAYING:o("playing",e.target);break;case YT.PlayerState.PAUSED:o("paused",e.target);break;case YT.PlayerState.ENDED:o("ended",e.target);break}o("stateChange",e.target)}function m(e){o("playbackQualityChange",e.target)}function b(e){o("playbackRateChange",e.target)}function v(e){o("error",e.target)}function P(e){o("apiChange",e.target)}function V(){t.value.playVideo()}function w(){t.value.pauseVideo()}function k(){t.value.stopVideo()}function C(e,a){t.value.seekTo(e,a)}function T(){t.value.mute()}function Y(){t.value.unMute()}function S(){return t.value.isMuted()}function I(e){t.value.setVolume(e)}function R(){return t.value.getVolume()}function _(e,a){t.value.setSize(e,a)}function E(){return t.value.getDuration()}function A(){return t.value.getCurrentTime()}function U(){return t.value.getVideoEmbedCode()}function x(){return t.value.getVideoUrl()}function q(){return t.value.getVideoLoadedFraction()}function D(){return t.value.getPlayerState()}function L(){return t.value.getPlayerStateText()}function M(){return t.value.getPlaybackRate()}function j(e){t.value.setPlaybackRate(e)}function N(e){return t.value.getOptions(e)}function l(e){const a=/^https:\/\/(?:(?:www|m)\.)?(?:youtube\.com\/watch\?v=|youtu.be\/|youtube\.com\/embed\/)(?<id>[a-zA-Z0-9_-]+)$/gm;a.lastIndex=0;const c=a.exec(e);return c?c.groups.id:null}return f({player:t,playVideo:V,pauseVideo:w,stopVideo:k,seekTo:C,mute:T,unMute:Y,isMuted:S,setVolume:I,getVolume:R,setSize:_,getDuration:E,getCurrentTime:A,getVideoEmbedCode:U,getVideoUrl:x,getVideoLoadedFraction:q,getPlayerState:D,getPlayerStateText:L,getPlaybackRate:M,setPlaybackRate:j,getOptions:N,getVideoIdFromYoutubeURL:l}),(e,a)=>(n.openBlock(),n.createElementBlock("div",{ref:"youtube",id:i.value},null,8,u))}}});
+(function(a,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("vue")):typeof define=="function"&&define.amd?define(["vue"],u):(a=typeof globalThis<"u"?globalThis:a||self,a.VueYtframe=u(a.Vue))})(this,function(a){"use strict";const u=["id"],g={__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(i,{expose:c,emit:o}){const r=i,t=a.ref(null);a.watch([()=>r.videoId,()=>r.videoUrl],([e,n])=>{s(e,n)});function s(e,n){!e&&!n&&console.error('At least one of the props "videoId" or "videoUrl" must be provided.'),!e&&n&&(d(n)||console.error(`The provided video URL (${n}) 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"))}const l=a.ref(null);a.onMounted(async()=>{l.value=Math.random().toString(36).substring(2,12),s(r.videoId,r.videoUrl),y().then(()=>{f().then(()=>{h()})})});function y(){if(document.querySelector("script[src='https://www.youtube.com/iframe_api']"))return console.info("Youtube API script already added"),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"),Promise.resolve()}function f(){return window.YT&&window.YT.Player?(console.info("Youtube API loaded",window.YT),Promise.resolve()):new Promise((e,n)=>{setTimeout(()=>{f().then(()=>{e()})},100)})}function h(){const e=document.getElementById(l.value),n=r.videoId||d(r.videoUrl);t.value=new YT.Player(e,{height:r.height,width:r.width,videoId:n,playerVars:r.playerVars,events:{onReady:m,onStateChange:v,onPlaybackQualityChange:b,onPlaybackRateChange:P,onError:V,onApiChange:w}})}function m(e){o("ready",e.target)}function v(e){switch(e.data){case YT.PlayerState.PLAYING:o("playing",e.target);break;case YT.PlayerState.PAUSED:o("paused",e.target);break;case YT.PlayerState.ENDED:o("ended",e.target);break}o("stateChange",e.target)}function b(e){o("playbackQualityChange",e.target)}function P(e){o("playbackRateChange",e.target)}function V(e){o("error",e.target)}function w(e){o("apiChange",e.target)}function k(){t.value.playVideo()}function C(){t.value.pauseVideo()}function T(){t.value.stopVideo()}function Y(e,n){t.value.seekTo(e,n)}function S(){t.value.mute()}function I(){t.value.unMute()}function R(){return t.value.isMuted()}function _(e){t.value.setVolume(e)}function E(){return t.value.getVolume()}function x(e,n){t.value.setSize(e,n)}function A(){return t.value.getDuration()}function U(){return t.value.getCurrentTime()}function L(){return t.value.getVideoEmbedCode()}function q(){return t.value.getVideoUrl()}function D(){return t.value.getVideoLoadedFraction()}function M(){return t.value.getPlayerState()}function j(){return t.value.getPlayerStateText()}function N(){return t.value.getPlaybackRate()}function Q(e){t.value.setPlaybackRate(e)}function z(e){return t.value.getOptions(e)}function d(e){const n=/^https:\/\/(?:(?:www|m)\.)?(?:youtube\.com\/watch\?v=|youtu.be\/|youtube\.com\/embed\/)(?<id>[a-zA-Z0-9_-]+)$/gm;n.lastIndex=0;const p=n.exec(e);return p?p.groups.id:null}return c({player:t,playVideo:k,pauseVideo:C,stopVideo:T,seekTo:Y,mute:S,unMute:I,isMuted:R,setVolume:_,getVolume:E,setSize:x,getDuration:A,getCurrentTime:U,getVideoEmbedCode:L,getVideoUrl:q,getVideoLoadedFraction:D,getPlayerState:M,getPlayerStateText:j,getPlaybackRate:N,setPlaybackRate:Q,getOptions:z,getVideoIdFromYoutubeURL:d}),(e,n)=>(a.openBlock(),a.createElementBlock("div",{ref:"youtube",id:l.value},null,8,u))}};return{install:(i,c)=>{i.component("VueYtframe",g)}}});

package.json

 {
   "name": "vue3-ytframe",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": "Kiran Parajuli <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "A Vue3 YouTube Iframe API Wrapper Component",

No alert changes

Improved metrics

Total package byte prevSize

51106

0.47%

Lines of code

243

3.4%

No dependency changes