UNPKG

@aigamo/nostalgic-diva

Version:

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

1 lines 2.68 kB
{"version":3,"file":"NiconicoPlayer-BfR4Wo2A.cjs","sources":["../src/components/NiconicoPlayer.tsx"],"sourcesContent":["import React, { ReactElement, memo, useCallback } from 'react';\n\nimport { LogLevel } from '../controllers/Logger';\nimport { NiconicoPlayerController } from '../controllers/NiconicoPlayerController';\nimport { PlayerContainer, PlayerProps } from './PlayerContainer';\n\nconst NiconicoPlayer = memo(({ ...props }: PlayerProps): ReactElement => {\n\tconst { logger } = props;\n\n\tlogger.log(LogLevel.Debug, 'NiconicoPlayer');\n\n\tconst playerFactory = useCallback(\n\t\t(element: HTMLIFrameElement): Promise<HTMLIFrameElement> => {\n\t\t\treturn Promise.resolve(element);\n\t\t},\n\t\t[],\n\t);\n\n\treturn (\n\t\t<PlayerContainer\n\t\t\t{...props}\n\t\t\tloadScript={undefined}\n\t\t\tplayerFactory={playerFactory}\n\t\t\tcontrollerFactory={NiconicoPlayerController}\n\t\t>\n\t\t\t{(elementRef, videoId): ReactElement => (\n\t\t\t\t<div style={{ width: '100%', height: '100%' }}>\n\t\t\t\t\t{/* eslint-disable-next-line jsx-a11y/iframe-has-title */}\n\t\t\t\t\t<iframe\n\t\t\t\t\t\tref={elementRef}\n\t\t\t\t\t\tsrc={`https://embed.nicovideo.jp/watch/${videoId}?jsapi=1&playerId=1`}\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\tallowFullScreen\n\t\t\t\t\t\tstyle={{ border: 'none' }}\n\t\t\t\t\t\t// The player has to have the allow=\"autoplay\" attribute.\n\t\t\t\t\t\t// Otherwise it throws a NotAllowedError: \"play() failed because the user didn't interact with the document first\".\n\t\t\t\t\t\t// See also: https://github.com/vimeo/player.js/issues/389.\n\t\t\t\t\t\t// NOTE: An iframe element created by `PVPlayerNiconico.playerFactory.create` doesn't have the allow=\"autoplay\" attribute,\n\t\t\t\t\t\t// which causes the above issue when trying to autoplay a video.\n\t\t\t\t\t\tallow=\"autoplay; fullscreen\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</PlayerContainer>\n\t);\n});\n\nexport default NiconicoPlayer;\n"],"names":["NiconicoPlayer","memo","props","logger","LogLevel","playerFactory","useCallback","element","React","PlayerContainer","NiconicoPlayerController","elementRef","videoId"],"mappings":"uLAMMA,EAAiBC,EAAAA,KAAK,CAAC,CAAE,GAAGC,KAAuC,CACxE,KAAM,CAAE,OAAAC,GAAWD,EAEnBC,EAAO,IAAIC,WAAS,MAAO,gBAAgB,EAE3C,MAAMC,EAAgBC,EAAAA,YACpBC,GACO,QAAQ,QAAQA,CAAO,EAE/B,CAAA,CAAC,EAGF,OACCC,EAAA,cAACC,EAAAA,gBAAA,CACC,GAAGP,EACJ,WAAY,OACZ,cAAAG,EACA,kBAAmBK,EAAAA,wBAAA,EAElB,CAACC,EAAYC,IACbJ,EAAA,cAAC,MAAA,CAAI,MAAO,CAAE,MAAO,OAAQ,OAAQ,MAAA,CAAO,EAE3CA,EAAA,cAAC,SAAA,CACA,IAAKG,EACL,IAAK,oCAAoCC,CAAO,sBAChD,MAAM,OACN,OAAO,OACP,gBAAe,GACf,MAAO,CAAE,OAAQ,MAAA,EAMjB,MAAM,sBAAA,CAAA,CAER,CAAA,CAIJ,CAAC"}