vue3-ytframe - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

dist/ytframe.es.js

@@ -1,3 +0,3 @@
-import { ref as g, watch as j, onMounted as z, openBlock as B, createElementBlock as F } from "vue";
-const O = ["id"], G = {
+import { ref as V, watch as u, onMounted as le, openBlock as ie, createElementBlock as se } from "vue";
+const de = ["id"], ce = {
   __name: "VueYtframe",
@@ -42,12 +42,39 @@ props: {
   ],
-  setup(r, { expose: l, emit: n }) {
-    const o = r, t = g(null);
-    j(
-      [() => o.videoId, () => o.videoUrl],
+  setup(l, { expose: d, emit: r }) {
+    const n = l, t = V(null);
+    u(
+      [() => n.videoId, () => n.videoUrl],
       ([e, a]) => {
-        d(e, a);
+        c(e, a);
       }
-    );
-    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(
+    ), u(
+      [() => n.width, () => n.height],
+      ([e, a]) => {
+        t.value && y(e, a);
+      }
+    ), u(() => n.videoId, (e) => {
+      var a;
+      t.value && e && (console.log("watch", e), ((a = n.playerVars) == null ? void 0 : a.autoplay) === 1 ? p({
+        videoId: e,
+        startSeconds: n.playerVars.start || 0,
+        endSeconds: n.playerVars.end || 0
+      }) : g({
+        videoId: e,
+        startSeconds: n.playerVars.start || 0,
+        endSeconds: n.playerVars.end || 0
+      }));
+    }), u(() => n.videoUrl, (e) => {
+      var a;
+      t.value && e && (console.log("watch", e), (a = n.playerVars) != null && a.autoplay ? v({
+        videoUrl: e,
+        startSeconds: n.playerVars.start || 0,
+        endSeconds: n.playerVars.end || 0
+      }) : h({
+        videoUrl: e,
+        startSeconds: n.playerVars.start || 0,
+        endSeconds: n.playerVars.end || 0
+      }));
+    });
+    function c(e, a) {
+      !e && !a && console.error('At least one of the props "videoId" or "videoUrl" must be provided.'), !e && a && (s(a) || console.error(
         `The provided video URL (${a}) is not a valid Youtube URL.`,
@@ -58,11 +85,11 @@ "If you are sure it is a valid YouTube URL and you are still getting this error,",
     }
-    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();
+    const i = V(null);
+    le(async () => {
+      i.value = Math.random().toString(36).substring(2, 12), console.log("mounted", n.videoUrl, n.videoId), c(n.videoId, n.videoUrl), m().then(() => {
+        f().then(() => {
+          P();
         });
       });
     });
-    function f() {
+    function m() {
       if (document.querySelector("script[src='https://www.youtube.com/iframe_api']"))
@@ -73,6 +100,6 @@ return console.info("Youtube API script already added"), Promise.resolve();
     }
-    function c() {
-      return window.YT && window.YT.Player ? (console.info("Youtube API loaded", window.YT), Promise.resolve()) : new Promise((e, a) => {
+    function f() {
+      return window.YT && window.YT.Player ? (console.info("Youtube API loaded", window.YT), Promise.resolve()) : new Promise((e) => {
         setTimeout(() => {
-          c().then(() => {
+          f().then(() => {
             e();
@@ -83,149 +110,226 @@ });
     }
-    function p() {
-      const e = document.getElementById(u.value), a = o.videoId || i(o.videoUrl);
-      t.value = new YT.Player(e, {
-        height: o.height,
-        width: o.width,
+    function P() {
+      const e = document.getElementById(i.value), a = n.videoId || s(n.videoUrl);
+      console.log("createPlayer", a), t.value = new YT.Player(e, {
+        height: n.height,
+        width: n.width,
         videoId: a,
-        playerVars: o.playerVars,
+        playerVars: n.playerVars,
         events: {
-          onReady: y,
-          onStateChange: h,
-          onPlaybackQualityChange: m,
-          onPlaybackRateChange: v,
-          onError: b,
-          onApiChange: P
+          onReady: b,
+          onStateChange: w,
+          onPlaybackQualityChange: S,
+          onPlaybackRateChange: I,
+          onError: k,
+          onApiChange: C
         }
       });
     }
-    function y(e) {
-      n("ready", e.target);
+    function b(e) {
+      r("ready", e.target);
     }
-    function h(e) {
+    function w(e) {
       switch (e.data) {
-        case YT.PlayerState.PLAYING:
-          n("playing", e.target);
+        case window.YT.PlayerState.PLAYING:
+          r("playing", e.target);
           break;
-        case YT.PlayerState.PAUSED:
-          n("paused", e.target);
+        case window.YT.PlayerState.PAUSED:
+          r("paused", e.target);
           break;
-        case YT.PlayerState.ENDED:
-          n("ended", e.target);
+        case window.YT.PlayerState.ENDED:
+          r("ended", e.target);
           break;
       }
-      n("stateChange", e.target);
+      r("stateChange", e.target);
     }
-    function m(e) {
-      n("playbackQualityChange", e.target);
+    function S(e) {
+      r("playbackQualityChange", e.target);
     }
-    function v(e) {
-      n("playbackRateChange", e.target);
+    function I(e) {
+      r("playbackRateChange", e.target);
     }
-    function b(e) {
-      n("error", e.target);
+    function k(e) {
+      r("error", e.target);
     }
-    function P(e) {
-      n("apiChange", e.target);
+    function C(e) {
+      r("apiChange", e.target);
     }
-    function w() {
+    function Y() {
       t.value.playVideo();
     }
-    function V() {
+    function A() {
       t.value.pauseVideo();
     }
-    function k() {
+    function R() {
       t.value.stopVideo();
     }
-    function C(e, a) {
+    function T(e, a) {
       t.value.seekTo(e, a);
     }
-    function S() {
+    function U() {
+      t.value.nextVideo();
+    }
+    function B() {
+      t.value.previousVideo();
+    }
+    function E(e) {
+      t.value.playVideoAt(e);
+    }
+    function _() {
       t.value.mute();
     }
-    function Y() {
+    function x() {
       t.value.unMute();
     }
-    function I() {
+    function L() {
       return t.value.isMuted();
     }
-    function T(e) {
+    function O(e) {
       t.value.setVolume(e);
     }
-    function R() {
+    function q() {
       return t.value.getVolume();
     }
-    function E(e, a) {
+    function y(e, a) {
       t.value.setSize(e, a);
     }
-    function _() {
+    function D(e) {
+      t.value.setLoop(e);
+    }
+    function M(e) {
+      t.value.setShuffle(e);
+    }
+    function N() {
       return t.value.getDuration();
     }
-    function A() {
+    function Q() {
       return t.value.getCurrentTime();
     }
-    function U() {
+    function z() {
       return t.value.getVideoEmbedCode();
     }
-    function x() {
+    function F() {
       return t.value.getVideoUrl();
     }
-    function L() {
+    function j() {
       return t.value.getVideoLoadedFraction();
     }
-    function D() {
+    function G() {
       return t.value.getPlayerState();
     }
-    function q() {
-      return t.value.getPlayerStateText();
-    }
-    function M() {
+    function $() {
       return t.value.getPlaybackRate();
     }
-    function N(e) {
+    function H(e) {
       t.value.setPlaybackRate(e);
     }
-    function Q(e) {
-      return t.value.getOptions(e);
+    function Z() {
+      return t.value.getAvailablePlaybackRates();
     }
-    function i(e) {
+    function J() {
+      return t.value.getOptions();
+    }
+    function K(e, a) {
+      return t.value.getOption(e, a);
+    }
+    function W(e, a, o) {
+      t.value.setOption(e, a, o);
+    }
+    function X() {
+      return t.value.getSphericalProperties();
+    }
+    function ee(e) {
+      t.value.setSphericalProperties(e);
+    }
+    function te() {
+      return t.value.getPlaylist();
+    }
+    function ae() {
+      return t.value.getPlaylistIndex();
+    }
+    function ne() {
+      return t.value.getIframe();
+    }
+    function oe() {
+      t.value.destroy();
+    }
+    function p({ videoId: e, startSeconds: a, endSeconds: o } = {}) {
+      t.value.loadVideoById({ videoId: e, startSeconds: a, endSeconds: o });
+    }
+    function g({ videoId: e, startSeconds: a, endSeconds: o } = {}) {
+      t.value.cueVideoById({ videoId: e, startSeconds: a, endSeconds: o });
+    }
+    function v({ mediaContentUrl: e, startSeconds: a, endSeconds: o } = {}) {
+      t.value.loadVideoByUrl({ mediaContentUrl: e, startSeconds: a, endSeconds: o });
+    }
+    function h({ mediaContentUrl: e, startSeconds: a, endSeconds: o } = {}) {
+      t.value.cueVideoByUrl({ mediaContentUrl: e, startSeconds: a, endSeconds: o });
+    }
+    function re(e, a, o) {
+      t.value.cuePlaylist(e, a, o);
+    }
+    function ue(e, a, o) {
+      t.value.loadPlaylist(e, a, o);
+    }
+    function s(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 s = a.exec(e);
-      return s ? s.groups.id : null;
+      const o = a.exec(e);
+      return o ? o.groups.id : null;
     }
-    return l({
+    return d({
       player: t,
-      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: q,
-      getPlaybackRate: M,
-      setPlaybackRate: N,
-      getOptions: Q,
-      getVideoIdFromYoutubeURL: i
-    }), (e, a) => (B(), F("div", {
+      playVideo: Y,
+      pauseVideo: A,
+      stopVideo: R,
+      seekTo: T,
+      nextVideo: U,
+      previousVideo: B,
+      playVideoAt: E,
+      mute: _,
+      unMute: x,
+      isMuted: L,
+      setVolume: O,
+      getVolume: q,
+      setSize: y,
+      setShuffle: M,
+      setLoop: D,
+      getDuration: N,
+      getCurrentTime: Q,
+      getVideoEmbedCode: z,
+      getVideoUrl: F,
+      getVideoLoadedFraction: j,
+      getPlayerState: G,
+      getPlaybackRate: $,
+      setPlaybackRate: H,
+      getAvailablePlaybackRates: Z,
+      getOptions: J,
+      getAnOption: K,
+      setAnOption: W,
+      getSphericalProperties: X,
+      setSphericalProperties: ee,
+      getPlaylist: te,
+      getPlaylistIndex: ae,
+      getIframe: ne,
+      destroy: oe,
+      loadVideoById: p,
+      cueVideoById: g,
+      loadVideoByUrl: v,
+      cueVideoByUrl: h,
+      cuePlaylist: re,
+      loadPlaylist: ue,
+      getVideoIdFromYoutubeURL: s
+    }), (e, a) => (ie(), se("div", {
       ref: "youtube",
-      id: u.value
-    }, null, 8, O));
+      id: i.value
+    }, null, 8, de));
   }
-}, $ = G, Z = {
-  install: (r, l) => {
-    r.component("VueYtframe", $);
+}, fe = ce, pe = {
+  // eslint-disable-next-line no-unused-vars
+  install: (l, d) => {
+    l.component("VueYtframe", fe);
   }
 };
 export {
-  Z as default
+  pe as default
 };

dist/ytframe.umd.js

@@ -1,1 +0,1 @@
-(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)}}});
+(function(r,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(r=typeof globalThis<"u"?globalThis:r||self,r.VueYtframe=i(r.Vue))})(this,function(r){"use strict";const i=["id"],m={__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(l,{expose:c,emit:u}){const n=l,t=r.ref(null);r.watch([()=>n.videoId,()=>n.videoUrl],([e,a])=>{f(e,a)}),r.watch([()=>n.width,()=>n.height],([e,a])=>{t.value&&y(e,a)}),r.watch(()=>n.videoId,e=>{var a;t.value&&e&&(console.log("watch",e),((a=n.playerVars)==null?void 0:a.autoplay)===1?g({videoId:e,startSeconds:n.playerVars.start||0,endSeconds:n.playerVars.end||0}):h({videoId:e,startSeconds:n.playerVars.start||0,endSeconds:n.playerVars.end||0}))}),r.watch(()=>n.videoUrl,e=>{var a;t.value&&e&&(console.log("watch",e),(a=n.playerVars)!=null&&a.autoplay?v({videoUrl:e,startSeconds:n.playerVars.start||0,endSeconds:n.playerVars.end||0}):V({videoUrl:e,startSeconds:n.playerVars.start||0,endSeconds:n.playerVars.end||0}))});function f(e,a){!e&&!a&&console.error('At least one of the props "videoId" or "videoUrl" must be provided.'),!e&&a&&(d(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 s=r.ref(null);r.onMounted(async()=>{s.value=Math.random().toString(36).substring(2,12),console.log("mounted",n.videoUrl,n.videoId),f(n.videoId,n.videoUrl),P().then(()=>{p().then(()=>{b()})})});function P(){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 p(){return window.YT&&window.YT.Player?(console.info("Youtube API loaded",window.YT),Promise.resolve()):new Promise(e=>{setTimeout(()=>{p().then(()=>{e()})},100)})}function b(){const e=document.getElementById(s.value),a=n.videoId||d(n.videoUrl);console.log("createPlayer",a),t.value=new YT.Player(e,{height:n.height,width:n.width,videoId:a,playerVars:n.playerVars,events:{onReady:w,onStateChange:S,onPlaybackQualityChange:I,onPlaybackRateChange:k,onError:C,onApiChange:Y}})}function w(e){u("ready",e.target)}function S(e){switch(e.data){case window.YT.PlayerState.PLAYING:u("playing",e.target);break;case window.YT.PlayerState.PAUSED:u("paused",e.target);break;case window.YT.PlayerState.ENDED:u("ended",e.target);break}u("stateChange",e.target)}function I(e){u("playbackQualityChange",e.target)}function k(e){u("playbackRateChange",e.target)}function C(e){u("error",e.target)}function Y(e){u("apiChange",e.target)}function T(){t.value.playVideo()}function A(){t.value.pauseVideo()}function R(){t.value.stopVideo()}function _(e,a){t.value.seekTo(e,a)}function x(){t.value.nextVideo()}function U(){t.value.previousVideo()}function B(e){t.value.playVideoAt(e)}function E(){t.value.mute()}function L(){t.value.unMute()}function q(){return t.value.isMuted()}function O(e){t.value.setVolume(e)}function D(){return t.value.getVolume()}function y(e,a){t.value.setSize(e,a)}function M(e){t.value.setLoop(e)}function N(e){t.value.setShuffle(e)}function Q(){return t.value.getDuration()}function j(){return t.value.getCurrentTime()}function z(){return t.value.getVideoEmbedCode()}function F(){return t.value.getVideoUrl()}function G(){return t.value.getVideoLoadedFraction()}function $(){return t.value.getPlayerState()}function H(){return t.value.getPlaybackRate()}function Z(e){t.value.setPlaybackRate(e)}function J(){return t.value.getAvailablePlaybackRates()}function K(){return t.value.getOptions()}function W(e,a){return t.value.getOption(e,a)}function X(e,a,o){t.value.setOption(e,a,o)}function ee(){return t.value.getSphericalProperties()}function te(e){t.value.setSphericalProperties(e)}function ae(){return t.value.getPlaylist()}function ne(){return t.value.getPlaylistIndex()}function oe(){return t.value.getIframe()}function re(){t.value.destroy()}function g({videoId:e,startSeconds:a,endSeconds:o}={}){t.value.loadVideoById({videoId:e,startSeconds:a,endSeconds:o})}function h({videoId:e,startSeconds:a,endSeconds:o}={}){t.value.cueVideoById({videoId:e,startSeconds:a,endSeconds:o})}function v({mediaContentUrl:e,startSeconds:a,endSeconds:o}={}){t.value.loadVideoByUrl({mediaContentUrl:e,startSeconds:a,endSeconds:o})}function V({mediaContentUrl:e,startSeconds:a,endSeconds:o}={}){t.value.cueVideoByUrl({mediaContentUrl:e,startSeconds:a,endSeconds:o})}function ue(e,a,o){t.value.cuePlaylist(e,a,o)}function ie(e,a,o){t.value.loadPlaylist(e,a,o)}function d(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 o=a.exec(e);return o?o.groups.id:null}return c({player:t,playVideo:T,pauseVideo:A,stopVideo:R,seekTo:_,nextVideo:x,previousVideo:U,playVideoAt:B,mute:E,unMute:L,isMuted:q,setVolume:O,getVolume:D,setSize:y,setShuffle:N,setLoop:M,getDuration:Q,getCurrentTime:j,getVideoEmbedCode:z,getVideoUrl:F,getVideoLoadedFraction:G,getPlayerState:$,getPlaybackRate:H,setPlaybackRate:Z,getAvailablePlaybackRates:J,getOptions:K,getAnOption:W,setAnOption:X,getSphericalProperties:ee,setSphericalProperties:te,getPlaylist:ae,getPlaylistIndex:ne,getIframe:oe,destroy:re,loadVideoById:g,cueVideoById:h,loadVideoByUrl:v,cueVideoByUrl:V,cuePlaylist:ue,loadPlaylist:ie,getVideoIdFromYoutubeURL:d}),(e,a)=>(r.openBlock(),r.createElementBlock("div",{ref:"youtube",id:s.value},null,8,i))}};return{install:(l,c)=>{l.component("VueYtframe",m)}}});

package.json

 {
-  "name": "vue3-ytframe",
-  "version": "0.2.2",
-  "author": "Kiran Parajuli <[e-mail]>",
-  "description": "A Vue3 YouTube Iframe API Wrapper Component",
-  "type": "module",
-  "keywords": [
-    "vue",
-    "vue3",
-    "youtube",
-    "iframe",
-    "embed",
-    "youtube-iframe-api"
-  ],
-  "files": [
-    "dist"
-  ],
-  "main": "dist/ytframe.umd.js",
-  "browser": "dist/ytframe.umd.js",
-  "unpkg": "dist/ytframe.umd.js",
-  "jsdelivr": "dist/ytframe.umd.js",
-  "module": "dist/ytframe.es.js",
-  "exports": {
-    ".": {
-      "import": "./dist/ytframe.es.js",
-      "require": "./dist/ytframe.umd.js"
-    }
-  },
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/kiranparajuli589/vue3-ytframe"
-  },
-  "bugs": {
-    "url": "https://github.com/kiranparajuli589/vue3-ytframe/issues"
-  },
-  "homepage": "https://github.com/kiranparajuli589/vue3-ytframe#readme",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "vue": "^3.2.45"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
-    "vite": "^4.1.0"
-  },
-  "license": "GPL-3.0"
+	"name": "vue3-ytframe",
+	"version": "0.3.0",
+	"author": "Kiran Parajuli <[e-mail]>",
+	"description": "A Vue3 YouTube Iframe API Wrapper Component",
+	"type": "module",
+	"keywords": [
+		"vue",
+		"vue3",
+		"youtube",
+		"iframe",
+		"embed",
+		"youtube-iframe-api"
+	],
+	"files": [
+		"dist"
+	],
+	"main": "dist/ytframe.umd.js",
+	"browser": "dist/ytframe.umd.js",
+	"unpkg": "dist/ytframe.umd.js",
+	"jsdelivr": "dist/ytframe.umd.js",
+	"module": "dist/ytframe.es.js",
+	"exports": {
+		".": {
+			"import": "./dist/ytframe.es.js",
+			"require": "./dist/ytframe.umd.js"
+		}
+	},
+	"sideEffects": false,
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/kiranparajuli589/vue3-ytframe"
+	},
+	"bugs": {
+		"url": "https://github.com/kiranparajuli589/vue3-ytframe/issues"
+	},
+	"homepage": "https://kiranparajuli589.github.io/vue3-ytframe/#/",
+	"scripts": {
+		"dev": "vite",
+		"build-lib": "vite build --mode lib",
+		"build-docs": "vite build --mode docs",
+		"preview": "vite preview",
+		"lint": "eslint src lib --ext .js,.vue",
+		"lint:fix": "eslint src lib --fix --ext .js,.vue",
+		"stylelint": "stylelint src lib --config stylelint.conf.cjs",
+		"stylelint:fix": "stylelint src lib --config stylelint.conf.cjs --fix"
+	},
+	"dependencies": {
+		"highlight.js": "^11.7.0",
+		"vue": "^3.2.45"
+	},
+	"devDependencies": {
+		"@mdi/font": "^7.2.96",
+		"@vitejs/plugin-vue": "^4.0.0",
+		"eslint": "^8.36.0",
+		"eslint-plugin-vue": "^9.9.0",
+		"pinia": "^2.0.33",
+		"postcss": ">=8.4.19 <9.0.0",
+		"postcss-html": ">=1.0.0 <2.0.0",
+		"sass": "^1.59.3",
+		"stylelint": "^15.3.0",
+		"stylelint-config-recommended-scss": "^9.0.1",
+		"stylelint-config-recommended-vue": "^1.4.0",
+		"stylelint-config-standard": "^31.0.0",
+		"vite": "^4.1.0",
+		"vue-router": "4"
+	},
+	"license": "GPL-3.0"
 }

README.md

@@ -1,135 +0,17 @@
-# Vue3 Ytframe
-The component uses the composition API to create a reactive player instance and define various methods to control the player's behavior.
+<p align="center">
+	<img src="./src/assets/youtube.svg" width="80">
+</p>
+<h1 align=center>Vue3 Ytframe</h1>
+<p align=center>A YouTube Iframe API Wrapper</p>
+<p align="center">
+<a href="https://www.npmjs.com/package/vue3-ytframe"><img src="https://img.shields.io/npm/v/vue3-ytframe.svg"/> <img src="https://img.shields.io/npm/dm/vue3-ytframe.svg"/></a> <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-3-brightgreen.svg"/></a>
+</p>
 
-## Why?
-- Supports Vue 3
-- Uses the composition API
-- No dependencies other than Vue 3
-- Supports all the methods and events provided by the YouTube iFrame API
+## Documentation
+https://kiranparajuli589.github.io/vue3-ytframe/#/docs/ref=
 
-## Installation
-1. Package Installation
+## Playground
+https://kiranparajuli589.github.io/vue3-ytframe/#/playground
 
-    ```bash
-    npm i vue3-ytframe # using npm
-    pnpm i vue3-ytframe # using pnpm
-    yarn add vue3-ytframe # using yarn
-    ```
-
-2. Component registration
-
-    ```js
-    // src/main.js
-    
-    import VueYtframe from "vue3-ytframe"
-    
-    createApp(App)
-      .use(VueYtframe)
-      .mount('#app')
-    ```
-
-## Props
-- `videoId` (optional) - The ID of the YouTube video to embed.
-- `videoUrl` (optional) - The URL of the YouTube video to embed.
-    > **Note:** Either `videoId` or `videoUrl` is required. If both are provided, `videoId` will be used.
-- `width` (optional) - The width of the player. Default is "100%".
-- `height` (optional) - The height of the player. Default is "100%".
-- `playerVars` (optional) - An object containing additional options to pass to the YouTube iFrame player. Default is an empty object. Refer to the https://developers.google.com/youtube/player_parameters for a list of available options.
-
-## Methods
-The following methods are available to control the behavior of the YouTube player:
-
-- `playVideo()` - Plays the currently loaded video.
-- `pauseVideo()` - Pauses the currently loaded video.
-- `stopVideo()` - Stops the currently loaded video.
-- `seekTo(seconds: number, allowSeekAhead: boolean)` - Seeks to a specified time in the video. The `seconds` parameter is the time in seconds to seek to, and `allowSeekAhead` is a boolean indicating whether to allow the player to make a new request for unbuffered data if the time is outside the currently buffered video data.
-- `mute()` - Mutes the player.
-- `unMute()` - Unmutes the player.
-- `isMuted()` - Returns a boolean indicating whether the player is muted.
-- `setVolume(volume: number)` - Sets the player's volume. The volume parameter should be a number between 0 and 100.
-- `getVolume()` - Returns the player's current volume level as a number between 0 and 100.
-- `setSize(width: number, height: number)` - Sets the player's width and height.
-- `getDuration()` - Returns the duration of the currently playing video in seconds.
-- `getCurrentTime()` - Returns the current playback time in seconds.
-- `getVideoEmbedCode()` - Returns the embed code for the currently playing video.
-- `getVideoUrl()` - Returns the YouTube.com URL for the currently playing video.
-- `getVideoLoadedFraction()` - Returns a number between 0 and 1 indicating the percentage of the video that has been loaded.
-- `getPlayerState()` - Returns the current state of the player.
-- `getPlayerStateText()` - Returns a string describing the current state of the player.
-- `getPlaybackRate()` - Returns the current playback rate of the player.
-- `setPlaybackRate(suggestedRate: number)` - Sets the suggested playback rate for the player. The `suggestedRate` parameter should be a number representing the suggested playback rate.
-- `getOptions(opt: string)` - Returns the player options for a specified key.
-
-## Events
-The following events are available to listen to:
-
-- `ready` - Emitted when the player is ready to play.
-- `stateChange` - Emitted when the player's state changes.
-- `playing` - Emitted when the player starts playing.
-- `paused` - Emitted when the player is paused.
-- `ended` - Emitted when the player has finished playing.
-- `error` - Emitted when an error occurs.
-- `apiChange` - Emitted when the player's API changes.
-- `playbackQualityChange` - Emitted when the player's playback quality changes.
-- `playbackRateChange` - Emitted when the player's playback rate changes.
-
-## Usage
-Here is simple example usage of the component:
-
-```vue
-<template>
-  <div class="player-page">
-    <VueYtframe
-        v-for="video in videosSet1"
-        :key="video"
-        ref="yt"
-        :video-id="video"
-        height="300"
-        width="100%"
-        :player-vars="{ autoplay: 0, listType: 'user_uploads' }"
-        @state-change="onStateChange"
-    />
-    <br>
-    <VueYtframe
-        v-for="video in videosSet2"
-        :key="video"
-        ref="yt"
-        :video-id="video"
-        height="300"
-        width="100%"
-        :player-vars="{ autoplay: 0, listType: 'user_uploads' }"
-        @state-change="onStateChange"
-    />
-  </div>
-</template>
-<script setup>
-import {ref} from "vue";
-
-// declare a template reference
-const yt = ref(null)
-
-const videosSet1 = [
-  "kGb9ftWR3l8",
-  "U_0iZpQPPoA",
-]
-
-const videosSet2 = [
-  "Ve_PI0i43QI",
-  "km3ZBzuFntw"
-]
-
-// a handler where no two or more frames are allowed to play simultaneously
-const onStateChange = (event) => {
-  if (event.getPlayerState() === 1) {
-    // control the frames using the template reference
-    yt.value.forEach((video) => {
-      if (video.getVideoUrl() !== event.getVideoUrl()) {
-        video.pauseVideo()
-      }
-    })
-  }
-}
-</script>
-```
-
-> **Note:** With the `app.use(VueYtframe)` command in the `main.js` file _(which is a must)_, the component will be available globally inside the project. There is no need to import the component in every component.
+## Usage Examples
+https://kiranparajuli589.github.io/vue3-ytframe/#/docs/ref=examples

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52394

2.52%

Lines of code

355

46.09%

Worsened metrics

Dependency count

2

100%

Dev dependency count

14

600%

Number of lines in readme file

18

-86.76%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  highlight.js@^11.7.0

• + Added

  highlight.js@11.11.1
  (transitive)