From e397582cacc29ebcc90bbb1f766a6fb778ac2b0c Mon Sep 17 00:00:00 2001 From: rinart73 Date: Sat, 20 May 2023 02:52:49 +0200 Subject: [PATCH] Fix picture duplication - Fix #3 - when element is moved it is processed again which results in duplicating children - Fix existing `.lyt-poster-container` not being respected --- dist/lite-yt-embed.d.ts | 1 + dist/lite-yt-embed.js | 21 ++++++++++------ dist/lite-yt-embed.min.js | 2 +- dist/lite-yt-embed.min.js.map | 2 +- scripts/process-js.mjs | 1 + src/lite-yt-embed.ts | 19 ++++++++++---- tests/no-children-duplication.html | 40 ++++++++++++++++++++++++++++++ 7 files changed, 72 insertions(+), 14 deletions(-) create mode 100644 tests/no-children-duplication.html diff --git a/dist/lite-yt-embed.d.ts b/dist/lite-yt-embed.d.ts index 67d7202..fdaa57d 100644 --- a/dist/lite-yt-embed.d.ts +++ b/dist/lite-yt-embed.d.ts @@ -39,6 +39,7 @@ declare class LiteYTEmbed extends HTMLElement { jpg: string; webp: string; api?: YT.Player; + private isInitialized?; private playLabelText; private posterEl?; private static checkWebpSupport; diff --git a/dist/lite-yt-embed.js b/dist/lite-yt-embed.js index 0815db0..4a00461 100644 --- a/dist/lite-yt-embed.js +++ b/dist/lite-yt-embed.js @@ -66,6 +66,12 @@ class LiteYTEmbed extends HTMLElement { * See: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements */ connectedCallback() { + // connectedCallback may be called once the element is no longer connected, use Node.isConnected to make sure + if (!this.isConnected) + return; + // make sure that the element is not being processed more than once + if (this.isInitialized === true) + return; // init global config object if it doesn't exist window.LiteYTEmbedConfig = window.LiteYTEmbedConfig ?? {}; this.videoId = this.getAttribute('videoid') ?? ''; @@ -83,7 +89,7 @@ class LiteYTEmbed extends HTMLElement { titleEl.className = 'lyt-title'; this.append(titleEl); } - if ((titleEl.textContent ?? '') !== '') { + if ((titleEl.textContent ?? '') === '') { const titleTextEl = document.createElement('span'); titleTextEl.textContent = this.playLabelText; titleEl.append(titleTextEl); @@ -97,7 +103,7 @@ class LiteYTEmbed extends HTMLElement { playBtnEl.className = 'lyt-playbtn'; this.append(playBtnEl); } - if ((playBtnEl.textContent ?? '') !== '') { + if ((playBtnEl.textContent ?? '') === '') { const playBtnLabelEl = document.createElement('span'); playBtnLabelEl.className = 'lyt-visually-hidden'; playBtnLabelEl.textContent = this.playLabelText; @@ -122,6 +128,7 @@ class LiteYTEmbed extends HTMLElement { window.LiteYTEmbedConfig.forceApi ?? (navigator.vendor.includes('Apple') || navigator.userAgent.includes('Mobi')); } + this.isInitialized = true; } /** * Tries to add iframe via DOM manipulations or YouTube API @@ -164,19 +171,19 @@ class LiteYTEmbed extends HTMLElement { // Adds JPG (+ WebP) poster image addPoster() { // TODO: Add fallback for progressively enhanced videos as well - if (this.querySelector('.lyt-preview-container') != null) { - // Preview was added manually, don't override + if (this.querySelector('.lyt-poster-container') != null) { + // Poster was added manually, don't override return; } this.size = this.getAttribute('size') ?? window.LiteYTEmbedConfig?.size ?? 'hq'; - // validate preview size + // validate poster size if (!['mq', 'hq', 'sd', 'maxres'].includes(this.size)) return; - // Custom jpg preview + // Custom jpg poster this.jpg = this.getAttribute('jpg') ?? ''; /** * 'yes' - default YouTube image - * 'no' - typically used if YouTube has no preview for this video + * 'no' - typically used if YouTube has no poster for this video * Anything else is treated like a custom image */ this.webp = this.getAttribute('webp') ?? window.LiteYTEmbedConfig?.webp ?? 'yes'; diff --git a/dist/lite-yt-embed.min.js b/dist/lite-yt-embed.min.js index c62c57e..ae287c7 100644 --- a/dist/lite-yt-embed.min.js +++ b/dist/lite-yt-embed.min.js @@ -1,2 +1,2 @@ -"use strict";class LiteYTEmbed extends HTMLElement{constructor(){super(...arguments),this.videoId="",this.playlistId="",this.size="",this.jpg="",this.webp="",this.t=""}static i(){var t=document.createElement("canvas");return null!=t.getContext?.("2d")&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}static h(){LiteYTEmbed.o||(LiteYTEmbed.l("preconnect","https://www.youtube-nocookie.com"),LiteYTEmbed.l("preconnect","https://www.google.com"),LiteYTEmbed.l("preconnect","https://googleads.g.doubleclick.net"),LiteYTEmbed.l("preconnect","https://static.doubleclick.net"),LiteYTEmbed.o=!0)}static l(t,i){var e=document.createElement("link");e.rel=t,e.href=i,document.head.append(e)}connectedCallback(){window.LiteYTEmbedConfig=window.LiteYTEmbedConfig??{},this.videoId=this.getAttribute("videoid")??"",this.playlistId=this.getAttribute("playlistid")??"";let t=this.querySelector(".lyt-playbtn");var i;if(this.t=t?.textContent?.trim()??this.getAttribute("playlabel")??window.LiteYTEmbedConfig.playLabel??"Play","yes"===(this.getAttribute("showtitle")??window.LiteYTEmbedConfig.showTitle??"no")){let t=this.querySelector(".lyt-title");null==t&&((t=document.createElement("div")).className="lyt-title",this.append(t)),""!==(t.textContent??"")&&((i=document.createElement("span")).textContent=this.t,t.append(i))}this.m(),null==t&&((t=document.createElement("button")).type="button",t.className="lyt-playbtn",this.append(t)),""!==(t.textContent??"")&&((i=document.createElement("span")).className="lyt-visually-hidden",i.textContent=this.t,t.append(i)),t.removeAttribute("href"),t.removeAttribute("target"),this.addEventListener("pointerover",LiteYTEmbed.h,{once:!0}),this.addEventListener("click",this.addIframe),void 0===LiteYTEmbed.p&&(LiteYTEmbed.p=window.LiteYTEmbedConfig.forceApi??(navigator.vendor.includes("Apple")||navigator.userAgent.includes("Mobi")))}addIframe(){var t,i;this.classList.contains("lyt-activated")||(this.classList.add("lyt-activated"),(t=new URLSearchParams(this.getAttribute("params")??window.LiteYTEmbedConfig?.params??"")).append("autoplay","1"),t.append("playsinline","1"),""!==window.location.host&&t.append("origin",window.location.origin),!0===LiteYTEmbed.p?this.u(t):((i=document.createElement("iframe")).width="560",i.height="315",i.title=this.t,i.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",i.allowFullscreen=!0,i.fetchPriority="high",""!==this.playlistId?i.src=`https://www.youtube-nocookie.com/embed/videoseries?list=${this.playlistId}&`+t.toString():i.src=`https://www.youtube-nocookie.com/embed/${this.videoId}?`+t.toString(),this.append(i),i.focus(),this.dispatchEvent(new CustomEvent("ready"))))}m(){var t,i;null==this.querySelector(".lyt-preview-container")&&(this.size=this.getAttribute("size")??window.LiteYTEmbedConfig?.size??"hq",["mq","hq","sd","maxres"].includes(this.size))&&(this.jpg=this.getAttribute("jpg")??"",this.webp=this.getAttribute("webp")??window.LiteYTEmbedConfig?.webp??"yes",void 0===LiteYTEmbed.v&&(LiteYTEmbed.v=LiteYTEmbed.i()),LiteYTEmbed.v||(this.webp="no"),(t=document.createElement("picture")).className="lyt-poster-container","no"!==this.webp&&((i=document.createElement("source")).setAttribute("type","image/webp"),i.setAttribute("srcset","yes"===this.webp?`https://i.ytimg.com/vi_webp/${this.videoId}/${this.size}default.webp`:this.webp),t.appendChild(i)),this.g=document.createElement("img"),this.g.setAttribute("decoding","async"),this.g.setAttribute("loading","lazy"),this.T(),this.g.setAttribute("src",""!==this.jpg?this.jpg:`https://i.ytimg.com/vi/${this.videoId}/${this.size}default.jpg`),this.g.setAttribute("alt",this.t),this.g.setAttribute("title",this.t),this.g.className="lyt-poster",!0===window.LiteYTEmbedConfig?.useFallback&&(this.classList.add("lyt-poster-hidden"),this.L=this.L.bind(this),this.Y=this.Y.bind(this),this.g.complete&&this.L(),this.g.addEventListener("load",this.L),this.g.addEventListener("error",this.Y)),t.appendChild(this.g),this.insertBefore(t,this.firstChild))}T(){let t,i;switch(this.size){case"mq":t=320,i=180;break;case"hq":t=480,i=360;break;case"sd":t=640,i=480;break;default:t=1280,i=720}this.g?.setAttribute("width",t.toString()),this.g?.setAttribute("height",i.toString())}$(){switch(this.size){case"maxres":return this.size="sd",!0;case"sd":return this.size="hq",!0}return!1}L(){(this.g?.naturalWidth??0)<=120?this.Y():this.classList.remove("lyt-poster-hidden")}Y(){var t=this.querySelector("source");if(null!=t)return"yes"!==this.webp?(this.webp="yes",void t.setAttribute("srcset",`https://i.ytimg.com/vi_webp/${this.videoId}/${this.size}default.webp`)):this.$()?(this.T(),void t.setAttribute("srcset",`https://i.ytimg.com/vi_webp/${this.videoId}/${this.size}default.webp`)):(t.remove(),this.webp="no",void this.g?.setAttribute("src",`https://i.ytimg.com/vi/${this.videoId}/${this.size}default.jpg`));""!==this.jpg?(this.jpg="",this.g?.setAttribute("src",`https://i.ytimg.com/vi/${this.videoId}/${this.size}default.jpg`)):this.$()&&(this.T(),this.g?.setAttribute("src",`https://i.ytimg.com/vi/${this.videoId}/${this.size}default.jpg`))}async u(t){await this.k();var i=document.createElement("div"),e=(this.append(i),{width:"100%",host:"https://www.youtube-nocookie.com",events:{onReady:t=>{this.api=t.target,this.api.playVideo(),this.dispatchEvent(new CustomEvent("ready"))}}});""!==this.playlistId?(t.append("listType","playlist"),t.append("list",this.playlistId)):e.videoId=this.videoId,e.playerVars=Object.fromEntries(t.entries()),new YT.Player(i,e)}k(){if(void 0===window.YT)return new Promise((t,i)=>{var e=document.createElement("script");e.src="https://www.youtube.com/iframe_api",e.async=!0,e.onload=()=>{window.YT?.ready(t)},e.onerror=i,this.append(e)})}}LiteYTEmbed.o=!1,customElements.define("lite-youtube",LiteYTEmbed); +"use strict";class LiteYTEmbed extends HTMLElement{constructor(){super(...arguments),this.videoId="",this.playlistId="",this.size="",this.jpg="",this.webp="",this.t=""}static i(){var t=document.createElement("canvas");return null!=t.getContext?.("2d")&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}static h(){LiteYTEmbed.o||(LiteYTEmbed.l("preconnect","https://www.youtube-nocookie.com"),LiteYTEmbed.l("preconnect","https://www.google.com"),LiteYTEmbed.l("preconnect","https://googleads.g.doubleclick.net"),LiteYTEmbed.l("preconnect","https://static.doubleclick.net"),LiteYTEmbed.o=!0)}static l(t,i){var s=document.createElement("link");s.rel=t,s.href=i,document.head.append(s)}connectedCallback(){if(this.isConnected&&!0!==this.m){window.LiteYTEmbedConfig=window.LiteYTEmbedConfig??{},this.videoId=this.getAttribute("videoid")??"",this.playlistId=this.getAttribute("playlistid")??"";let t=this.querySelector(".lyt-playbtn");var i;if(this.t=t?.textContent?.trim()??this.getAttribute("playlabel")??window.LiteYTEmbedConfig.playLabel??"Play","yes"===(this.getAttribute("showtitle")??window.LiteYTEmbedConfig.showTitle??"no")){let t=this.querySelector(".lyt-title");null==t&&((t=document.createElement("div")).className="lyt-title",this.append(t)),""===(t.textContent??"")&&((i=document.createElement("span")).textContent=this.t,t.append(i))}this.p(),null==t&&((t=document.createElement("button")).type="button",t.className="lyt-playbtn",this.append(t)),""===(t.textContent??"")&&((i=document.createElement("span")).className="lyt-visually-hidden",i.textContent=this.t,t.append(i)),t.removeAttribute("href"),t.removeAttribute("target"),this.addEventListener("pointerover",LiteYTEmbed.h,{once:!0}),this.addEventListener("click",this.addIframe),void 0===LiteYTEmbed.u&&(LiteYTEmbed.u=window.LiteYTEmbedConfig.forceApi??(navigator.vendor.includes("Apple")||navigator.userAgent.includes("Mobi"))),this.m=!0}}addIframe(){var t,i;this.classList.contains("lyt-activated")||(this.classList.add("lyt-activated"),(t=new URLSearchParams(this.getAttribute("params")??window.LiteYTEmbedConfig?.params??"")).append("autoplay","1"),t.append("playsinline","1"),""!==window.location.host&&t.append("origin",window.location.origin),!0===LiteYTEmbed.u?this.v(t):((i=document.createElement("iframe")).width="560",i.height="315",i.title=this.t,i.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",i.allowFullscreen=!0,i.fetchPriority="high",""!==this.playlistId?i.src=`https://www.youtube-nocookie.com/embed/videoseries?list=${this.playlistId}&`+t.toString():i.src=`https://www.youtube-nocookie.com/embed/${this.videoId}?`+t.toString(),this.append(i),i.focus(),this.dispatchEvent(new CustomEvent("ready"))))}p(){var t,i;null==this.querySelector(".lyt-poster-container")&&(this.size=this.getAttribute("size")??window.LiteYTEmbedConfig?.size??"hq",["mq","hq","sd","maxres"].includes(this.size))&&(this.jpg=this.getAttribute("jpg")??"",this.webp=this.getAttribute("webp")??window.LiteYTEmbedConfig?.webp??"yes",void 0===LiteYTEmbed.g&&(LiteYTEmbed.g=LiteYTEmbed.i()),LiteYTEmbed.g||(this.webp="no"),(t=document.createElement("picture")).className="lyt-poster-container","no"!==this.webp&&((i=document.createElement("source")).setAttribute("type","image/webp"),i.setAttribute("srcset","yes"===this.webp?`https://i.ytimg.com/vi_webp/${this.videoId}/${this.size}default.webp`:this.webp),t.appendChild(i)),this.T=document.createElement("img"),this.T.setAttribute("decoding","async"),this.T.setAttribute("loading","lazy"),this.L(),this.T.setAttribute("src",""!==this.jpg?this.jpg:`https://i.ytimg.com/vi/${this.videoId}/${this.size}default.jpg`),this.T.setAttribute("alt",this.t),this.T.setAttribute("title",this.t),this.T.className="lyt-poster",!0===window.LiteYTEmbedConfig?.useFallback&&(this.classList.add("lyt-poster-hidden"),this.Y=this.Y.bind(this),this.$=this.$.bind(this),this.T.complete&&this.Y(),this.T.addEventListener("load",this.Y),this.T.addEventListener("error",this.$)),t.appendChild(this.T),this.insertBefore(t,this.firstChild))}L(){let t,i;switch(this.size){case"mq":t=320,i=180;break;case"hq":t=480,i=360;break;case"sd":t=640,i=480;break;default:t=1280,i=720}this.T?.setAttribute("width",t.toString()),this.T?.setAttribute("height",i.toString())}k(){switch(this.size){case"maxres":return this.size="sd",!0;case"sd":return this.size="hq",!0}return!1}Y(){(this.T?.naturalWidth??0)<=120?this.$():this.classList.remove("lyt-poster-hidden")}$(){var t=this.querySelector("source");if(null!=t)return"yes"!==this.webp?(this.webp="yes",void t.setAttribute("srcset",`https://i.ytimg.com/vi_webp/${this.videoId}/${this.size}default.webp`)):this.k()?(this.L(),void t.setAttribute("srcset",`https://i.ytimg.com/vi_webp/${this.videoId}/${this.size}default.webp`)):(t.remove(),this.webp="no",void this.T?.setAttribute("src",`https://i.ytimg.com/vi/${this.videoId}/${this.size}default.jpg`));""!==this.jpg?(this.jpg="",this.T?.setAttribute("src",`https://i.ytimg.com/vi/${this.videoId}/${this.size}default.jpg`)):this.k()&&(this.L(),this.T?.setAttribute("src",`https://i.ytimg.com/vi/${this.videoId}/${this.size}default.jpg`))}async v(t){await this.P();var i=document.createElement("div"),s=(this.append(i),{width:"100%",host:"https://www.youtube-nocookie.com",events:{onReady:t=>{this.api=t.target,this.api.playVideo(),this.dispatchEvent(new CustomEvent("ready"))}}});""!==this.playlistId?(t.append("listType","playlist"),t.append("list",this.playlistId)):s.videoId=this.videoId,s.playerVars=Object.fromEntries(t.entries()),new YT.Player(i,s)}P(){if(void 0===window.YT)return new Promise((t,i)=>{var s=document.createElement("script");s.src="https://www.youtube.com/iframe_api",s.async=!0,s.onload=()=>{window.YT?.ready(t)},s.onerror=i,this.append(s)})}}LiteYTEmbed.o=!1,customElements.define("lite-youtube",LiteYTEmbed); //# sourceMappingURL=lite-yt-embed.min.js.map \ No newline at end of file diff --git a/dist/lite-yt-embed.min.js.map b/dist/lite-yt-embed.min.js.map index 0f731e7..5281ba5 100644 --- a/dist/lite-yt-embed.min.js.map +++ b/dist/lite-yt-embed.min.js.map @@ -1 +1 @@ -{"version":3,"file":"lite-yt-embed.js","sources":["0"],"names":["LiteYTEmbed","HTMLElement","constructor","super","arguments","this","videoId","playlistId","size","jpg","webp","playLabelText","i","elem","document","createElement","getContext","toDataURL","indexOf","h","preconnected","addPrefetch","l","kind","url","linkEl","rel","href","head","append","connectedCallback","window","LiteYTEmbedConfig","getAttribute","let","playBtnEl","querySelector","playBtnLabelEl","textContent","trim","playLabel","showTitle","titleEl","className","titleTextEl","addPoster","type","removeAttribute","addEventListener","warmConnections","once","addIframe","undefined","usesApi","forceApi","navigator","vendor","includes","userAgent","params","iframeEl","classList","contains","add","URLSearchParams","location","host","origin","addYTPlayerIframe","width","height","title","allow","allowFullscreen","fetchPriority","src","toString","focus","dispatchEvent","CustomEvent","m","posterContainer","source","supportsWebp","checkWebpSupport","setAttribute","appendChild","posterEl","setPosterDimensions","useFallback","onPosterLoad","bind","onPosterError","complete","insertBefore","firstChild","T","$","L","naturalWidth","remove","Y","tryDownscalingSize","u","await","fetchYTPlayerApi","videoPlaceholderEl","options","events","onReady","api","event","target","playVideo","playerVars","Object","fromEntries","entries","YT","Player","k","Promise","resolve","reject","el","async","onload","ready","onerror","customElements","define"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"lite-yt-embed.js","sources":["0"],"names":["LiteYTEmbed","HTMLElement","constructor","super","arguments","this","videoId","playlistId","size","jpg","webp","playLabelText","i","elem","document","createElement","getContext","toDataURL","indexOf","h","preconnected","addPrefetch","l","kind","url","linkEl","rel","href","head","append","connectedCallback","isConnected","isInitialized","window","LiteYTEmbedConfig","getAttribute","let","playBtnEl","querySelector","playBtnLabelEl","textContent","trim","playLabel","showTitle","titleEl","className","titleTextEl","addPoster","type","removeAttribute","addEventListener","warmConnections","once","addIframe","undefined","usesApi","forceApi","navigator","vendor","includes","userAgent","params","iframeEl","classList","contains","add","URLSearchParams","location","host","origin","addYTPlayerIframe","width","height","title","allow","allowFullscreen","fetchPriority","src","toString","focus","dispatchEvent","CustomEvent","p","posterContainer","source","supportsWebp","checkWebpSupport","setAttribute","appendChild","posterEl","setPosterDimensions","useFallback","onPosterLoad","bind","onPosterError","complete","insertBefore","firstChild","L","k","Y","naturalWidth","remove","$","tryDownscalingSize","v","await","fetchYTPlayerApi","videoPlaceholderEl","options","events","onReady","api","event","target","playVideo","playerVars","Object","fromEntries","entries","YT","Player","P","Promise","resolve","reject","el","async","onload","ready","onerror","customElements","define"],"mappings":"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"} \ No newline at end of file diff --git a/scripts/process-js.mjs b/scripts/process-js.mjs index b063732..c37653d 100644 --- a/scripts/process-js.mjs +++ b/scripts/process-js.mjs @@ -32,6 +32,7 @@ for (const path of files) { // private properties 'playLabelText', 'posterEl', + 'isInitialized', ]; const manglePropsRegExp = new RegExp(`^(${mangleProps.join('|')})$`); diff --git a/src/lite-yt-embed.ts b/src/lite-yt-embed.ts index fb321d2..b385558 100644 --- a/src/lite-yt-embed.ts +++ b/src/lite-yt-embed.ts @@ -48,6 +48,7 @@ class LiteYTEmbed extends HTMLElement { public webp: string = ''; // API Player for this video public api?: YT.Player; + private isInitialized?: boolean; private playLabelText: string = ''; // Poster img element private posterEl?: HTMLImageElement; @@ -101,6 +102,12 @@ class LiteYTEmbed extends HTMLElement { * See: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements */ connectedCallback(): void { + // connectedCallback may be called once the element is no longer connected, use Node.isConnected to make sure + if (!this.isConnected) return; + + // make sure that the element is not being processed more than once + if(this.isInitialized === true) return; + // init global config object if it doesn't exist window.LiteYTEmbedConfig = window.LiteYTEmbedConfig ?? {}; @@ -165,6 +172,8 @@ class LiteYTEmbed extends HTMLElement { window.LiteYTEmbedConfig.forceApi ?? (navigator.vendor.includes('Apple') || navigator.userAgent.includes('Mobi')); } + + this.isInitialized = true; } /** @@ -214,21 +223,21 @@ class LiteYTEmbed extends HTMLElement { private addPoster(): void { // TODO: Add fallback for progressively enhanced videos as well - if (this.querySelector('.lyt-preview-container') != null) { - // Preview was added manually, don't override + if (this.querySelector('.lyt-poster-container') != null) { + // Poster was added manually, don't override return; } this.size = this.getAttribute('size') ?? window.LiteYTEmbedConfig?.size ?? 'hq'; - // validate preview size + // validate poster size if (!['mq', 'hq', 'sd', 'maxres'].includes(this.size)) return; - // Custom jpg preview + // Custom jpg poster this.jpg = this.getAttribute('jpg') ?? ''; /** * 'yes' - default YouTube image - * 'no' - typically used if YouTube has no preview for this video + * 'no' - typically used if YouTube has no poster for this video * Anything else is treated like a custom image */ this.webp = this.getAttribute('webp') ?? window.LiteYTEmbedConfig?.webp ?? 'yes'; diff --git a/tests/no-children-duplication.html b/tests/no-children-duplication.html new file mode 100644 index 0000000..6b14e32 --- /dev/null +++ b/tests/no-children-duplication.html @@ -0,0 +1,40 @@ + + + + lite-youtube-embed - No children duplication when moving element + + + + + +

No children duplication when moving element

+ +

+ +

+ +

+ Child node count: +

+ +

+ +

+ + + + + +