@techassi/vue-youtube-iframe - npm Package Compare versions

Comparing version 1.0.3 to 1.0.5

lib/vue-youtube-iframe.esm.js

@@ -1,32 +0,33 @@
-// Copyright © 2020-present Techassi
+// Copyright (c) 2020-present Techassi
 // Use of this source code is governed by a MIT-style
 // license that can be found in the LICENSE file.
-// vue-youtube-iframe 1.0.2
-import { h, nextTick } from 'vue';
+// vue-youtube-iframe 1.0.5 build 26/1/2021
+import { defineComponent, h, nextTick } from 'vue';
 
-const manager = {
-    factory: null,
-    players: [],
-    events: {},
-    uid: 0,
+const HOST_COOKIE = 'https://www.youtube.com';
+const HOST_NO_COOKIE = 'https://www.youtube-nocookie.com';
 
-    // registerFactory registers the YT Factory (e.g. create a new Player)
-    registerFactory(YT) {
-        this.factory = YT;
-    },
+function seekIfAutoplay(player, playerVars) {
+    if (playerVars.autoplay != undefined && playerVars.autoplay == 1) {
+        player.mute();
+        if (playerVars.start != undefined && playerVars.start != 0) {
+            player.seekTo(playerVars.start, true);
+        }
+        else {
+            player.playVideo();
+        }
+    }
+}
 
-    // registerEvents registers the YT Player events to be emitted by the component
-    registerEvents() {
-        const { PlayerState } = this.factory;
-        this.events[PlayerState.ENDED] = 'ended';
-        this.events[PlayerState.PLAYING] = 'playing';
-        this.events[PlayerState.PAUSED] = 'paused';
-        this.events[PlayerState.BUFFERING] = 'buffering';
-        this.events[PlayerState.CUED] = 'cued';
-    },
-
-    // register registers a new player to be initalizied and runs callback
+class Manager {
+    constructor() {
+        this.players = new Array();
+        this.uid = 0;
+    }
+    registerFactory(factory) {
+        this.factory = factory;
+    }
     register(callback) {
-        this.uid += 1;
-        if (this.factory) {
+        this.uid++;
+        if (this.factory != undefined) {
             callback(this.factory, `vue-youtube-iframe-${this.uid}`);
@@ -36,14 +37,19 @@ return;
         this.players.push(callback);
-    },
-
-    // runBacklog runs backlogged initializations (when the YT factory wasn't set yet)
-    runBacklog() {
+    }
+    runQueue() {
         this.players.forEach((callback) => {
-            callback(this.factory, `vue-youtube-iframe-${this.uid}`);
+            if (this.factory != undefined) {
+                this.uid++;
+                callback(this.factory, `vue-youtube-iframe-${this.uid}`);
+            }
+            this.players = [];
         });
-        this.players = [];
-    },
-};
+    }
+}
+function createManager() {
+    return new Manager();
+}
+const manager = createManager();
 
-const player = {
+const player = defineComponent({
     name: 'YoutubeIframe',
@@ -53,7 +59,7 @@ props: {
             type: [String, Number],
-            default: '1280',
+            default: 1280,
         },
         playerHeight: {
             type: [String, Number],
-            default: '720',
+            default: 720,
         },
@@ -63,3 +69,3 @@ playerParameters: {
             default: () => ({
-                autpplay: 0,
+                autoplay: 0,
                 time: 0,
@@ -78,23 +84,19 @@ mute: 0,
     },
+    emits: ['ready', 'error', 'state-change'],
     data() {
         return {
             elementId: '',
-            player: {},
+            playerInstance: {},
         };
     },
     render() {
-        return h('div', [h('div', { id: this.elementId })]);
+        return h('div', { class: ['vue-youtube-iframe'] }, [h('div', { id: this.elementId })]);
     },
-    template: '<div><div :id="elementId"></div></div>',
     mounted() {
         const { playerHeight, playerWidth, playerParameters, videoId } = this;
-
         manager.register((factory, uid) => {
-            const host = this.noCookie
-                ? 'https://www.youtube-nocookie.com'
-                : 'https://www.youtube.com';
+            const host = this.noCookie ? HOST_NO_COOKIE : HOST_COOKIE;
             this.elementId = uid;
-
             nextTick().then(() => {
-                this.player = new factory.Player(this.elementId, {
+                this.playerInstance = createPlayer(factory, this.elementId, {
                     width: playerWidth,
@@ -107,17 +109,3 @@ height: playerHeight,
                         onReady: (event) => {
-                            const p = event.target;
-                            if (
-                                playerParameters.autoplay !== 'undefined' &&
-                                playerParameters.autoplay === 1
-                            ) {
-                                p.mute();
-                                if (
-                                    playerParameters.start !== 'undefined' &&
-                                    playerParameters.start !== 0
-                                ) {
-                                    p.seekTo(playerParameters.start);
-                                } else {
-                                    p.playVideo();
-                                }
-                            }
+                            seekIfAutoplay(event.target, playerParameters);
                             this.$emit('ready', event);
@@ -127,3 +115,3 @@ },
                             if (event.data !== -1) {
-                                this.$emit(manager.events[event.data], event);
+                                this.$emit('state-change', event);
                             }
@@ -139,19 +127,131 @@ },
     },
-};
+    unmounted() {
+        this.playerInstance.destroy();
+    },
+    methods: {
+        cueVideoById(videoId, startSeconds, suggestedQuality) {
+            this.playerInstance.cueVideoById(videoId, startSeconds, suggestedQuality);
+        },
+        loadVideoById(videoId, startSeconds, suggestedQuality) {
+            this.playerInstance.loadVideoById(videoId, startSeconds, suggestedQuality);
+        },
+        cueVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality) {
+            this.playerInstance.cueVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality);
+        },
+        loadVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality) {
+            this.playerInstance.loadVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality);
+        },
+        cuePlaylist(playlist, index, startSeconds, suggestedQuality) {
+            this.playerInstance.cuePlaylist(playlist, index, startSeconds, suggestedQuality);
+        },
+        loadPlaylist(playlist, index, startSeconds, suggestedQuality) {
+            this.playerInstance.loadPlaylist(playlist, index, startSeconds, suggestedQuality);
+        },
+        playVideo() {
+            this.playerInstance.playVideo();
+        },
+        pauseVideo() {
+            this.playerInstance.pauseVideo();
+        },
+        stopVideo() {
+            this.playerInstance.stopVideo();
+        },
+        seekTo(seconds, allowSeekAhead) {
+            this.playerInstance.seekTo(seconds, allowSeekAhead);
+        },
+        nextVideo() {
+            this.playerInstance.nextVideo();
+        },
+        previousVideo() {
+            this.playerInstance.previousVideo();
+        },
+        playVideoAt(index) {
+            this.playerInstance.playVideoAt(index);
+        },
+        mute() {
+            this.playerInstance.mute();
+        },
+        unMute() {
+            this.playerInstance.unMute();
+        },
+        isMuted() {
+            return this.playerInstance.isMuted();
+        },
+        setVolume(volume) {
+            this.playerInstance.setVolume(volume);
+        },
+        getVolume() {
+            return this.playerInstance.getVolume();
+        },
+        setSize(width, height) {
+            this.playerInstance.setSize(width, height);
+        },
+        getPlaybackRate() {
+            return this.playerInstance.getPlaybackRate();
+        },
+        setPlaybackRate(suggestedRate) {
+            this.playerInstance.setPlaybackRate(suggestedRate);
+        },
+        getAvailablePlaybackRates() {
+            return this.playerInstance.getAvailablePlaybackRates();
+        },
+        setLoop(loopPlaylists) {
+            this.playerInstance.setLoop(loopPlaylists);
+        },
+        setShuffle(shufflePlaylist) {
+            this.playerInstance.setShuffle(shufflePlaylist);
+        },
+        getVideoLoadedFraction() {
+            return this.playerInstance.getVideoLoadedFraction();
+        },
+        getPlayerState() {
+            return this.playerInstance.getPlayerState();
+        },
+        getCurrentTime() {
+            return this.playerInstance.getCurrentTime();
+        },
+        getPlaybackQuality() {
+            return this.playerInstance.getPlaybackQuality();
+        },
+        setPlaybackQuality(suggestedQuality) {
+            this.playerInstance.setPlaybackQuality(suggestedQuality);
+        },
+        getAvailableQualityLevels() {
+            return this.playerInstance.getAvailableQualityLevels();
+        },
+        getDuration() {
+            return this.playerInstance.getDuration();
+        },
+        getVideoUrl() {
+            return this.playerInstance.getVideoUrl();
+        },
+        getVideoEmbedCode() {
+            return this.playerInstance.getVideoEmbedCode();
+        },
+        getPlaylist() {
+            return this.playerInstance.getPlaylist();
+        },
+        getPlaylistIndex() {
+            return this.playerInstance.getPlaylistIndex();
+        },
+        getIframe() {
+            return this.playerInstance.getIframe();
+        },
+    },
+});
+function createPlayer(factory, id, options) {
+    return new factory.Player(id, options);
+}
 
 const plugin = {
-    install: (app) => {
-        if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-            const tag = document.createElement('script');
-            tag.src = 'https://www.youtube.com/player_api';
-
-            const firstScriptTag = document.getElementsByTagName('script')[0];
+    install(app) {
+        const tag = document.createElement('script');
+        tag.src = 'https://www.youtube.com/player_api';
+        const firstScriptTag = document.getElementsByTagName('script')[0];
+        if (firstScriptTag.parentNode != null) {
             firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
             app.component('youtube-iframe', player);
-
             window.onYouTubeIframeAPIReady = () => {
                 manager.registerFactory(window.YT);
-                manager.registerEvents();
-                manager.runBacklog();
+                manager.runQueue();
             };
@@ -163,2 +263,2 @@ }
 export default plugin;
-export { player as YouTubePlayer };
+export { player as Player };

lib/vue-youtube-iframe.umd.js

@@ -1,36 +0,37 @@
-// Copyright © 2020-present Techassi
+// Copyright (c) 2020-present Techassi
 // Use of this source code is governed by a MIT-style
 // license that can be found in the LICENSE file.
-// vue-youtube-iframe 1.0.2
+// vue-youtube-iframe 1.0.5 build 26/1/2021
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
     typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueYouTubeEmbed = {}, global.Vue));
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueYoutubeIframe = {}, global.vue));
 }(this, (function (exports, vue) { 'use strict';
 
-    const manager = {
-        factory: null,
-        players: [],
-        events: {},
-        uid: 0,
+    const HOST_COOKIE = 'https://www.youtube.com';
+    const HOST_NO_COOKIE = 'https://www.youtube-nocookie.com';
 
-        // registerFactory registers the YT Factory (e.g. create a new Player)
-        registerFactory(YT) {
-            this.factory = YT;
-        },
+    function seekIfAutoplay(player, playerVars) {
+        if (playerVars.autoplay != undefined && playerVars.autoplay == 1) {
+            player.mute();
+            if (playerVars.start != undefined && playerVars.start != 0) {
+                player.seekTo(playerVars.start, true);
+            }
+            else {
+                player.playVideo();
+            }
+        }
+    }
 
-        // registerEvents registers the YT Player events to be emitted by the component
-        registerEvents() {
-            const { PlayerState } = this.factory;
-            this.events[PlayerState.ENDED] = 'ended';
-            this.events[PlayerState.PLAYING] = 'playing';
-            this.events[PlayerState.PAUSED] = 'paused';
-            this.events[PlayerState.BUFFERING] = 'buffering';
-            this.events[PlayerState.CUED] = 'cued';
-        },
-
-        // register registers a new player to be initalizied and runs callback
+    class Manager {
+        constructor() {
+            this.players = new Array();
+            this.uid = 0;
+        }
+        registerFactory(factory) {
+            this.factory = factory;
+        }
         register(callback) {
-            this.uid += 1;
-            if (this.factory) {
+            this.uid++;
+            if (this.factory != undefined) {
                 callback(this.factory, `vue-youtube-iframe-${this.uid}`);
@@ -40,14 +41,19 @@ return;
             this.players.push(callback);
-        },
-
-        // runBacklog runs backlogged initializations (when the YT factory wasn't set yet)
-        runBacklog() {
+        }
+        runQueue() {
             this.players.forEach((callback) => {
-                callback(this.factory, `vue-youtube-iframe-${this.uid}`);
+                if (this.factory != undefined) {
+                    this.uid++;
+                    callback(this.factory, `vue-youtube-iframe-${this.uid}`);
+                }
+                this.players = [];
             });
-            this.players = [];
-        },
-    };
+        }
+    }
+    function createManager() {
+        return new Manager();
+    }
+    const manager = createManager();
 
-    const player = {
+    const player = vue.defineComponent({
         name: 'YoutubeIframe',
@@ -57,7 +63,7 @@ props: {
                 type: [String, Number],
-                default: '1280',
+                default: 1280,
             },
             playerHeight: {
                 type: [String, Number],
-                default: '720',
+                default: 720,
             },
@@ -67,3 +73,3 @@ playerParameters: {
                 default: () => ({
-                    autpplay: 0,
+                    autoplay: 0,
                     time: 0,
@@ -82,23 +88,19 @@ mute: 0,
         },
+        emits: ['ready', 'error', 'state-change'],
         data() {
             return {
                 elementId: '',
-                player: {},
+                playerInstance: {},
             };
         },
         render() {
-            return vue.h('div', [vue.h('div', { id: this.elementId })]);
+            return vue.h('div', { class: ['vue-youtube-iframe'] }, [vue.h('div', { id: this.elementId })]);
         },
-        template: '<div><div :id="elementId"></div></div>',
         mounted() {
             const { playerHeight, playerWidth, playerParameters, videoId } = this;
-
             manager.register((factory, uid) => {
-                const host = this.noCookie
-                    ? 'https://www.youtube-nocookie.com'
-                    : 'https://www.youtube.com';
+                const host = this.noCookie ? HOST_NO_COOKIE : HOST_COOKIE;
                 this.elementId = uid;
-
                 vue.nextTick().then(() => {
-                    this.player = new factory.Player(this.elementId, {
+                    this.playerInstance = createPlayer(factory, this.elementId, {
                         width: playerWidth,
@@ -111,17 +113,3 @@ height: playerHeight,
                             onReady: (event) => {
-                                const p = event.target;
-                                if (
-                                    playerParameters.autoplay !== 'undefined' &&
-                                    playerParameters.autoplay === 1
-                                ) {
-                                    p.mute();
-                                    if (
-                                        playerParameters.start !== 'undefined' &&
-                                        playerParameters.start !== 0
-                                    ) {
-                                        p.seekTo(playerParameters.start);
-                                    } else {
-                                        p.playVideo();
-                                    }
-                                }
+                                seekIfAutoplay(event.target, playerParameters);
                                 this.$emit('ready', event);
@@ -131,3 +119,3 @@ },
                                 if (event.data !== -1) {
-                                    this.$emit(manager.events[event.data], event);
+                                    this.$emit('state-change', event);
                                 }
@@ -143,19 +131,131 @@ },
         },
-    };
+        unmounted() {
+            this.playerInstance.destroy();
+        },
+        methods: {
+            cueVideoById(videoId, startSeconds, suggestedQuality) {
+                this.playerInstance.cueVideoById(videoId, startSeconds, suggestedQuality);
+            },
+            loadVideoById(videoId, startSeconds, suggestedQuality) {
+                this.playerInstance.loadVideoById(videoId, startSeconds, suggestedQuality);
+            },
+            cueVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality) {
+                this.playerInstance.cueVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality);
+            },
+            loadVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality) {
+                this.playerInstance.loadVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality);
+            },
+            cuePlaylist(playlist, index, startSeconds, suggestedQuality) {
+                this.playerInstance.cuePlaylist(playlist, index, startSeconds, suggestedQuality);
+            },
+            loadPlaylist(playlist, index, startSeconds, suggestedQuality) {
+                this.playerInstance.loadPlaylist(playlist, index, startSeconds, suggestedQuality);
+            },
+            playVideo() {
+                this.playerInstance.playVideo();
+            },
+            pauseVideo() {
+                this.playerInstance.pauseVideo();
+            },
+            stopVideo() {
+                this.playerInstance.stopVideo();
+            },
+            seekTo(seconds, allowSeekAhead) {
+                this.playerInstance.seekTo(seconds, allowSeekAhead);
+            },
+            nextVideo() {
+                this.playerInstance.nextVideo();
+            },
+            previousVideo() {
+                this.playerInstance.previousVideo();
+            },
+            playVideoAt(index) {
+                this.playerInstance.playVideoAt(index);
+            },
+            mute() {
+                this.playerInstance.mute();
+            },
+            unMute() {
+                this.playerInstance.unMute();
+            },
+            isMuted() {
+                return this.playerInstance.isMuted();
+            },
+            setVolume(volume) {
+                this.playerInstance.setVolume(volume);
+            },
+            getVolume() {
+                return this.playerInstance.getVolume();
+            },
+            setSize(width, height) {
+                this.playerInstance.setSize(width, height);
+            },
+            getPlaybackRate() {
+                return this.playerInstance.getPlaybackRate();
+            },
+            setPlaybackRate(suggestedRate) {
+                this.playerInstance.setPlaybackRate(suggestedRate);
+            },
+            getAvailablePlaybackRates() {
+                return this.playerInstance.getAvailablePlaybackRates();
+            },
+            setLoop(loopPlaylists) {
+                this.playerInstance.setLoop(loopPlaylists);
+            },
+            setShuffle(shufflePlaylist) {
+                this.playerInstance.setShuffle(shufflePlaylist);
+            },
+            getVideoLoadedFraction() {
+                return this.playerInstance.getVideoLoadedFraction();
+            },
+            getPlayerState() {
+                return this.playerInstance.getPlayerState();
+            },
+            getCurrentTime() {
+                return this.playerInstance.getCurrentTime();
+            },
+            getPlaybackQuality() {
+                return this.playerInstance.getPlaybackQuality();
+            },
+            setPlaybackQuality(suggestedQuality) {
+                this.playerInstance.setPlaybackQuality(suggestedQuality);
+            },
+            getAvailableQualityLevels() {
+                return this.playerInstance.getAvailableQualityLevels();
+            },
+            getDuration() {
+                return this.playerInstance.getDuration();
+            },
+            getVideoUrl() {
+                return this.playerInstance.getVideoUrl();
+            },
+            getVideoEmbedCode() {
+                return this.playerInstance.getVideoEmbedCode();
+            },
+            getPlaylist() {
+                return this.playerInstance.getPlaylist();
+            },
+            getPlaylistIndex() {
+                return this.playerInstance.getPlaylistIndex();
+            },
+            getIframe() {
+                return this.playerInstance.getIframe();
+            },
+        },
+    });
+    function createPlayer(factory, id, options) {
+        return new factory.Player(id, options);
+    }
 
     const plugin = {
-        install: (app) => {
-            if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-                const tag = document.createElement('script');
-                tag.src = 'https://www.youtube.com/player_api';
-
-                const firstScriptTag = document.getElementsByTagName('script')[0];
+        install(app) {
+            const tag = document.createElement('script');
+            tag.src = 'https://www.youtube.com/player_api';
+            const firstScriptTag = document.getElementsByTagName('script')[0];
+            if (firstScriptTag.parentNode != null) {
                 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
                 app.component('youtube-iframe', player);
-
                 window.onYouTubeIframeAPIReady = () => {
                     manager.registerFactory(window.YT);
-                    manager.registerEvents();
-                    manager.runBacklog();
+                    manager.runQueue();
                 };
@@ -166,3 +266,3 @@ }
 
-    exports.YouTubePlayer = player;
+    exports.Player = player;
     exports.default = plugin;
@@ -169,0 +269,0 @@

package.json

 {
     "name": "@techassi/vue-youtube-iframe",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "description": "This plugin makes it easy to integrate the YouTube Iframe API into your Vue app. This plugin is Vue V3 compatible.",
@@ -8,4 +8,11 @@ "main": "lib/vue-youtube-iframe.umd.js",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "rollup -c rollup.config.js"
+        "test": "echo \"Error: no test specified\" && exit 0",
+        "build": "rollup -c rollup.config.js",
+        "format": "prettier --write \"src/**/*.ts\"",
+        "lint": "eslint -c .eslintrc.js src/**",
+        "vp": "npm version prerelease",
+        "vpp": "npm version prerelease && npm publish --tag beta",
+        "preversion": "npm run test && npm run lint && npm run format",
+        "version": "npm run build && git add .",
+        "postversion": "git push && git push --tags"
     },
@@ -17,4 +24,8 @@ "repository": {
     "files": [
-        "/lib"
+        "lib/**/*"
     ],
+    "types": "lib/types/index.d.ts",
+    "typescript": {
+        "definition": "lib/types/index.d.ts"
+    },
     "keywords": [
@@ -24,3 +35,6 @@ "vue",
         "iframe",
-        "embed"
+        "embed",
+        "api",
+        "youtube iframe api",
+        "vue-youtube-iframe"
     ],
@@ -34,14 +48,19 @@ "author": "Techassi",
     "dependencies": {
-        "vue": "^3.0.0"
+        "@types/youtube": "^0.0.41",
+        "vue": "^3.0.5"
     },
     "devDependencies": {
+        "@typescript-eslint/eslint-plugin": "^4.14.2",
+        "@typescript-eslint/parser": "^4.14.2",
+        "@vue/eslint-config-prettier": "^6.0.0",
+        "@vue/eslint-config-typescript": "^7.0.0",
         "eslint": "^7.10.0",
-        "eslint-config-airbnb-base": "^14.2.0",
         "eslint-config-prettier": "^6.12.0",
-        "eslint-plugin-import": "^2.22.1",
-        "eslint-plugin-prettier": "^3.1.4",
         "eslint-plugin-vue": "^7.0.1",
         "prettier": "^2.1.2",
-        "rollup": "^2.28.2"
+        "rollup": "^2.28.2",
+        "rollup-plugin-typescript2": "^0.29.0",
+        "tslib": "^2.1.0",
+        "typescript": "^4.1.3"
     }
 }

README.md

@@ -5,2 +5,17 @@ # vue-youtube-iframe
 
+## Notice
+
+⚠️ The new version `1.0.5` (rewritten in Typescript) introduces the following breaking change:
+
+The events `@ended`, `@playing`, `@paused`, `@buffering` and `@cued` will no longer be emitted. Instead you should now
+use `@state-change` to catch the events when the player state changes. This better represents the behaviour of the
+YouTube Iframe API described [here](https://developers.google.com/youtube/iframe_api_reference#Events).
+
+### New features
+
+-   Support for typings across the board. In detail these are type declarations for the plugin itself as well as YouTube
+    Iframe specific typings under the namespace `YT`.
+-   API complete methods for pausing, stoping and queueing videos (See
+    [here](https://developers.google.com/youtube/iframe_api_reference#Functions))
+
 ## Usage
@@ -22,3 +37,3 @@
 
-`main.js`
+`main.js` / `main.ts`
 
@@ -29,5 +44,5 @@ ```js
 
-import VueYouTubeIframe from 'vue-youtube-iframe';
+import YoutubeIframe from '@techassi/vue-youtube-iframe';
 
-createApp(App).use(VueYouTubeIframe).mount('#app');
+createApp(App).use(YoutubeIframe).mount('#app');
 ```
@@ -60,4 +75,28 @@
 
-#### Available props
+### Typings
 
+Vue currently doesn't support typings when using a component in a SFC and accessing it via `ref` / `this.$refs`. There
+is a way to bring in typings when using `ref`. Please note: This isn't the most elegant solution.
+
+```vue
+<template>
+    <youtube-iframe :video-id="YT_VIDEO_ID" ref="yt"></youtube-iframe>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Player } from '@techassi/vue-youtube-iframe';
+
+export default defineComponent({
+    name: 'App',
+    mounted() {
+        const player = this.$refs.yt as typeof Player;
+        // Variable player now has typings
+    },
+});
+</script>
+```
+
+### Available props
+
 -   `:videoId / :video-id`: Specify the YT video id (e.g. `dQw4w9WgXcQ`)
@@ -69,10 +108,10 @@ -   `:playerWidth / :player-width`: Specify the player's width in pixels
 
-#### Available player parameters
+### Available player parameters
 
 For the available player parameters see [here](https://developers.google.com/youtube/player_parameters#Parameters)
 
-#### Available Events
+### Available Events
 
 ```
-@ready, @error, @ended, @playing, @paused, @buffering and @cued
+@ready, @error, @stateChange
 ```
@@ -79,0 +118,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45447

increased by222.46%

Number of package files

11

increased by175%

Lines of code

1115

increased by281.85%

Number of lines in readme file

125

increased by45.35%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

12

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@types/youtube@^0.0.41

• + Added@types/youtube@0.0.41(transitive)

• Updatedvue@^3.0.5