UNPKG

@aigamo/nostalgic-diva

Version:

React function components for imperatively controlling embedded players (audio, Niconico, SoundCloud and YouTube) using refs.

1 lines 2.81 kB
{"version":3,"file":"YouTubePlayer-DXoiTECJ.cjs","sources":["../src/components/YouTubePlayer.tsx"],"sourcesContent":["import React, { ReactElement, memo, useCallback } from 'react';\n\nimport { LogLevel } from '../controllers/Logger';\nimport { YouTubePlayerController } from '../controllers/YouTubePlayerController';\nimport { ensureScriptLoaded } from '../controllers/ensureScriptLoaded';\nimport { PlayerContainer, PlayerProps } from './PlayerContainer';\n\nconst origin = 'https://www.youtube-nocookie.com';\n\nconst YouTubePlayer = memo(({ ...props }: PlayerProps): ReactElement => {\n\tconst { logger } = props;\n\n\tlogger.log(LogLevel.Debug, 'YouTubePlayer');\n\n\tconst loadScript = useCallback((): Promise<void> => {\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tconst first = await ensureScriptLoaded(\n\t\t\t\t'https://www.youtube.com/iframe_api',\n\t\t\t\tlogger,\n\t\t\t);\n\n\t\t\tif (first) {\n\t\t\t\t// https://stackoverflow.com/a/18154942.\n\t\t\t\twindow.onYouTubeIframeAPIReady = (): void => {\n\t\t\t\t\tlogger.log(LogLevel.Debug, 'YouTube iframe API ready');\n\t\t\t\t\tresolve();\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tresolve();\n\t\t\t}\n\t\t});\n\t}, [logger]);\n\n\tconst playerFactory = useCallback(\n\t\t(element: HTMLDivElement): Promise<YT.Player> => {\n\t\t\treturn Promise.resolve(\n\t\t\t\tnew YT.Player(element, {\n\t\t\t\t\thost: origin,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t}),\n\t\t\t);\n\t\t},\n\t\t[],\n\t);\n\n\treturn (\n\t\t<PlayerContainer\n\t\t\t{...props}\n\t\t\tloadScript={loadScript}\n\t\t\tplayerFactory={playerFactory}\n\t\t\tcontrollerFactory={YouTubePlayerController}\n\t\t>\n\t\t\t{(elementRef): ReactElement => (\n\t\t\t\t<div style={{ width: '100%', height: '100%' }}>\n\t\t\t\t\t<div ref={elementRef} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</PlayerContainer>\n\t);\n});\n\nexport default YouTubePlayer;\n"],"names":["origin","YouTubePlayer","memo","props","logger","LogLevel","loadScript","useCallback","resolve","reject","ensureScriptLoaded","playerFactory","element","React","PlayerContainer","YouTubePlayerController","elementRef"],"mappings":"sOAOMA,EAAS,mCAETC,EAAgBC,EAAAA,KAAK,CAAC,CAAE,GAAGC,KAAuC,CACvE,KAAM,CAAE,OAAAC,GAAWD,EAEnBC,EAAO,IAAIC,WAAS,MAAO,eAAe,EAE1C,MAAMC,EAAaC,EAAAA,YAAY,IACvB,IAAI,QAAQ,MAAOC,EAASC,IAAW,CAC/B,MAAMC,EAAAA,mBACnB,qCACAN,CAAA,EAKA,OAAO,wBAA0B,IAAY,CAC5CA,EAAO,IAAIC,WAAS,MAAO,0BAA0B,EACrDG,EAAA,CACD,EAEAA,EAAA,CAEF,CAAC,EACC,CAACJ,CAAM,CAAC,EAELO,EAAgBJ,EAAAA,YACpBK,GACO,QAAQ,QACd,IAAI,GAAG,OAAOA,EAAS,CACtB,KAAMZ,EACN,MAAO,OACP,OAAQ,MAAA,CACR,CAAA,EAGH,CAAA,CAAC,EAGF,OACCa,EAAA,cAACC,EAAAA,gBAAA,CACC,GAAGX,EACJ,WAAAG,EACA,cAAAK,EACA,kBAAmBI,EAAAA,uBAAA,EAEjBC,GACDH,EAAA,cAAC,MAAA,CAAI,MAAO,CAAE,MAAO,OAAQ,OAAQ,OAAO,EAC3CA,EAAA,cAAC,MAAA,CAAI,IAAKG,EAAY,CACvB,CAAA,CAIJ,CAAC"}