diff --git a/frontend/src/features/youtube/remotes/loadIframeApi.ts b/frontend/src/features/youtube/remotes/loadIframeApi.ts index 20030288e..c8526d41e 100644 --- a/frontend/src/features/youtube/remotes/loadIframeApi.ts +++ b/frontend/src/features/youtube/remotes/loadIframeApi.ts @@ -1,3 +1,5 @@ +import { loadScript } from '@/shared/utils/loadScript'; + // TODO: index.d.ts declare global { interface Window { @@ -5,25 +7,6 @@ declare global { } } -function load(cb: (err: Error) => void) { - const firstScript = document.getElementsByTagName('script')[0]; - const script = document.createElement('script'); - - script.src = 'https://www.youtube.com/iframe_api'; - script.async = true; - script.onerror = function () { - this.onload = null; - this.onerror = null; - cb(new Error(`Failed to load ${this.src}`)); - }; - - if (firstScript) { - firstScript.parentNode?.insertBefore(script, firstScript); - } else { - document.head.appendChild(script); - } -} - function loadIFrameApi(): Promise { return new Promise((resolve, reject) => { if (typeof window.YT === 'object') { @@ -31,9 +14,11 @@ function loadIFrameApi(): Promise { return; } - load((error) => { - if (error) reject(error); - }); + try { + loadScript('https://www.youtube.com/iframe_api'); + } catch (error) { + reject(error); + } window.onYouTubeIframeAPIReady = () => { resolve(window.YT); diff --git a/frontend/src/shared/utils/loadScript.ts b/frontend/src/shared/utils/loadScript.ts new file mode 100644 index 000000000..075b59f65 --- /dev/null +++ b/frontend/src/shared/utils/loadScript.ts @@ -0,0 +1,18 @@ +export const loadScript = (source: string): Promise => { + const element = document.querySelector(`script[src="${source}"]`); + + if (element) { + return Promise.resolve(); + } + + return new Promise((resolve) => { + const script = document.createElement('script'); + + script.async = true; + script.defer = true; + script.src = source; + script.onload = () => resolve(); + + document.body.appendChild(script); + }); +};