youtube-video-element - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/youtube-video-element.js

@@ -1,1 +0,1 @@
-const e=document.createElement("template");function t(e){const t=e.match(/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/);return t&&t[1]?t[1]:e}e.innerHTML='\n\n<style>\n:host {\n  display: inline-block;\n  box-sizing: border-box;\n  position: relative;\n  width: 640px;\n  height: 360px;\n  background-color: #000;\n}\n\niframe,\niframeContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  border: none;\n  overflow: hidden;\n}\n</style>\n\n<div id="iframeContainer"></div>\n';let n=!1,i=[];function o(){n=!0,i.forEach(e=>{e()}),i=[]}class a extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(e.content.cloneNode(!0)),this.getAttribute("src")&&this.load()}load(){this.ytPlayer=null,this.shadowRoot.querySelector("#iframeContainer").innerHTML="",this.readyState=0,this.dispatchEvent(new Event("loadstart"));const e=this.getAttribute("src");if(!e)return void console.error("YoutubeVideoElement: No src was set when load() was called.");const o=function(e){const{id:t}=e,n=e.controls?1:0,i=document.createElement("template"),o=e.initialTime?Math.floor(e.initialTime):0;return i.innerHTML=`\n    <iframe\n      id="player"\n      type="text/html"\n      src="https://www.youtube.com/embed/${t}?t=${o}&enablejsapi=1&modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&controls=${n}&disablekb=${!n}"\n      frameborder="0"\n      allowfullscreen\n      allow="accelerometer; autoplay; encrypted-media; fullscreen; gyroscope; picture-in-picture; xr-spatial-tracking"\n    ></iframe>\n  `,i}({id:t(e),controls:!!this.hasAttribute("controls"),initialTime:this.getAttribute("initialtime")});this.shadowRoot.querySelector("#iframeContainer").appendChild(o.content.cloneNode(!0));const a=this.shadowRoot.querySelector("iframe");var r;r=()=>{this.ytPlayer=new YT.Player(a,{events:{onReady:e=>{this.readyState=1,this.dispatchEvent(new Event("loadedmetadata")),this.dispatchEvent(new Event("volumechange")),this.timeupdateInterval=setInterval(()=>{this.dispatchEvent(new Event("timeupdate"))},25)},onStateChange:e=>{const t=e.data;1==t?this.dispatchEvent(new Event("play")):2==t&&this.dispatchEvent(new Event("pause"))},onError:e=>{console.log("onPlayerError",e.data,e)}}}),this.ytPlayer.addEventListener("onPlaybackRateChange",e=>{this.dispatchEvent(new Event("ratechange"))})},n?r():i.push(r)}connectedCallback(){}get paused(){return!!([-1,0,2,5].indexOf(this.ytPlayer.getPlayerState())>-1)}play(){this.ytPlayer.playVideo()}pause(){this.ytPlayer.pauseVideo()}get currentTime(){return this.ytPlayer.getCurrentTime()}set currentTime(e){this.ytPlayer.seekTo(e,!0),this.dispatchEvent(new Event("timeupdate"))}get muted(){return!!this.ytPlayer&&this.ytPlayer.isMuted()}set muted(e){e?this.ytPlayer.mute():this.ytPlayer.unMute(),setTimeout(()=>{this.dispatchEvent(new Event("volumechange"))},100)}get volume(){return this.ytPlayer?this.ytPlayer.getVolume()/100:1}set volume(e){this.ytPlayer.setVolume(100*e),setTimeout(()=>{this.dispatchEvent(new Event("volumechange"))},100)}get duration(){return this.ytPlayer.getDuration()}get poster(){const e=t(this.src);return e?`https://i.ytimg.com/vi/${e}/maxresdefault.jpg`:null}get playbackRate(){return this.ytPlayer.getPlaybackRate()}set playbackRate(e){this.ytPlayer.setPlaybackRate(e)}}window.customElements.get("youtube-video")||window.YoutubeVideoElement?console.debug("YoutubeVideoElement: <youtube-video> defined more than once."):(window.YoutubeVideoElement=a,window.customElements.define("youtube-video",a),function(){window.onYouTubeIframeAPIReady&&console.warn("YoutubeVideoElement: onYouTubeIframeAPIReady already defined. Overwriting.");const e=document.createElement("script");e.src="https://www.youtube.com/iframe_api";const t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t),window.onYouTubeIframeAPIReady=o}());export default a;
+const e=document.createElement("template");function t(e){const t=e.match(/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/);return t&&t[1]?t[1]:e}e.innerHTML='\n\n<style>\n:host {\n  display: inline-block;\n  box-sizing: border-box;\n  position: relative;\n  width: 640px;\n  height: 360px;\n  background-color: #000;\n}\n\niframe,\niframeContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  border: none;\n  overflow: hidden;\n}\n</style>\n\n<div id="iframeContainer"></div>\n';let n=!1,i=[];function o(){n=!0,i.forEach(e=>{e()}),i=[]}class a extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(e.content.cloneNode(!0)),this.getAttribute("src")&&this.load()}load(){this.ytPlayer=null,this.shadowRoot.querySelector("#iframeContainer").innerHTML="",this.readyState=0,this.dispatchEvent(new Event("loadstart"));const e=this.getAttribute("src");if(!e)return void console.error("YoutubeVideoElement: No src was set when load() was called.");const o=function(e){const{id:t}=e,n=e.controls?1:0,i=document.createElement("template"),o=e.initialTime?Math.floor(e.initialTime):0;return i.innerHTML=`\n    <iframe\n      id="player"\n      type="text/html"\n      src="https://www.youtube.com/embed/${t}?start=${o}&enablejsapi=1&modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&controls=${n}&disablekb=${!n}"\n      frameborder="0"\n      allowfullscreen\n      allow="accelerometer; autoplay; encrypted-media; fullscreen; gyroscope; picture-in-picture; xr-spatial-tracking"\n    ></iframe>\n  `,i}({id:t(e),controls:!!this.hasAttribute("controls"),initialTime:this.getAttribute("initialtime")});this.shadowRoot.querySelector("#iframeContainer").appendChild(o.content.cloneNode(!0));const a=this.shadowRoot.querySelector("iframe");var r;r=()=>{this.ytPlayer=new YT.Player(a,{events:{onReady:e=>{this.readyState=1,this.dispatchEvent(new Event("loadedmetadata")),this.dispatchEvent(new Event("volumechange")),this.timeupdateInterval=setInterval(()=>{this.dispatchEvent(new Event("timeupdate"))},25)},onStateChange:e=>{const t=e.data;1==t?this.dispatchEvent(new Event("play")):2==t&&this.dispatchEvent(new Event("pause"))},onError:e=>{console.log("onPlayerError",e.data,e)}}}),this.ytPlayer.addEventListener("onPlaybackRateChange",e=>{this.dispatchEvent(new Event("ratechange"))})},n?r():i.push(r)}connectedCallback(){}get paused(){return!!([-1,0,2,5].indexOf(this.ytPlayer.getPlayerState())>-1)}play(){this.ytPlayer.playVideo()}pause(){this.ytPlayer.pauseVideo()}get currentTime(){return this.ytPlayer.getCurrentTime()}set currentTime(e){this.ytPlayer.seekTo(e,!0),this.dispatchEvent(new Event("timeupdate"))}get muted(){return!!this.ytPlayer&&this.ytPlayer.isMuted()}set muted(e){e?this.ytPlayer.mute():this.ytPlayer.unMute(),setTimeout(()=>{this.dispatchEvent(new Event("volumechange"))},100)}get volume(){return this.ytPlayer?this.ytPlayer.getVolume()/100:1}set volume(e){this.ytPlayer.setVolume(100*e),setTimeout(()=>{this.dispatchEvent(new Event("volumechange"))},100)}get duration(){return this.ytPlayer.getDuration()}get poster(){const e=t(this.src);return e?`https://i.ytimg.com/vi/${e}/maxresdefault.jpg`:null}get playbackRate(){return this.ytPlayer.getPlaybackRate()}set playbackRate(e){this.ytPlayer.setPlaybackRate(e)}}window.customElements.get("youtube-video")||window.YoutubeVideoElement?console.debug("YoutubeVideoElement: <youtube-video> defined more than once."):(window.YoutubeVideoElement=a,window.customElements.define("youtube-video",a),function(){window.onYouTubeIframeAPIReady&&console.warn("YoutubeVideoElement: onYouTubeIframeAPIReady already defined. Overwriting.");const e=document.createElement("script");e.src="https://www.youtube.com/iframe_api";const t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t),window.onYouTubeIframeAPIReady=o}());export default a;

package.json

 {
   "name": "youtube-video-element",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Custom element (web component) for the YouTube player.",
@@ -5,0 +5,0 @@ "type": "module",

No alert changes

Improved metrics

Total package byte prevSize

7336

increased by0.05%

No dependency changes