{"version":3,"file":"ducanh2912-react-tuby.cjs","sources":["../src/components/ClientRender.tsx","../src/components/ErrorBoundary.tsx","../src/shared/utils.ts","../src/components/Icons/CircularProgress.tsx","../src/components/ClickAwayListener.tsx","../src/components/Icons/Cog.tsx","../src/components/Icons/ExitFullScreen.tsx","../src/components/Icons/FullScreen.tsx","../src/components/Icons/Pause.tsx","../src/components/Effect/PauseEffect.tsx","../src/components/Icons/PictureInPicture.tsx","../src/components/Icons/Play.tsx","../src/components/Effect/PlayEffect.tsx","../src/components/Icons/Check.tsx","../src/components/Icons/ChevronLeft.tsx","../src/components/Icons/ChevronRight.tsx","../src/components/Icons/Quality.tsx","../src/components/Icons/SelectSubtitle.tsx","../src/components/Icons/Speed.tsx","../src/components/SettingsDialog.tsx","../src/components/SettingsModal.tsx","../src/components/Icons/Subtitle.tsx","../src/components/Icons/VolumeFull.tsx","../src/components/Icons/VolumeHalf.tsx","../src/components/Icons/VolumeMuted.tsx","../src/hooks/useEffectUpdate.ts","../src/components/Main.tsx","../src/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { FC, ReactElement } from \"react\";\n\nconst ClientRender: FC<{ children: ReactElement }> = ({ children }) => {\n const [rendered, setRendered] = useState(false);\n useEffect(() => {\n setRendered(true);\n }, []);\n return rendered ? children : <>;\n};\n\nexport default ClientRender;\n","import React, { Component, createRef } from \"react\";\nimport type { ReactNode, RefObject, HTMLProps } from \"react\";\nimport type { SrcType, SubtitleType, RendererType } from \"../shared/types\";\n\ninterface Props {\n renderer?: RendererType;\n children?: ReactNode;\n src: SrcType;\n subtitles?: SubtitleType[];\n}\n\nclass ErrorBoundary extends Component {\n playerRef: RefObject;\n videoProps: HTMLProps & { src: string };\n constructor(props: Props) {\n super(props);\n this.state = { hasError: false };\n this.playerRef = createRef();\n this.videoProps = {\n crossOrigin: \"anonymous\",\n playsInline: true,\n controls: true,\n src:\n typeof this.props.src === \"string\"\n ? this.props.src\n : this.props.src[0].url,\n children: (\n <>\n {this.props.subtitles &&\n this.props.subtitles.length > 0 &&\n this.props.subtitles.map((subtitle, index) => (\n \n ))}\n \n ),\n };\n }\n static getDerivedStateFromError() {\n return { hasError: true };\n }\n render() {\n if (this.state.hasError) {\n return (\n
\n {this.props.renderer ? (\n this.props.renderer(this.playerRef, this.videoProps)\n ) : (\n // eslint-disable-next-line jsx-a11y/media-has-caption\n
\n );\n }\n return <>{this.props.children};\n }\n}\n\nexport default ErrorBoundary;\n","export const formatVideoTime = (time: number) => {\n try {\n const date = new Date(0);\n date.setSeconds(time);\n const timeString = date.toISOString().slice(11, 19);\n const result = timeString.startsWith(\"00:0\")\n ? timeString.slice(4)\n : timeString.startsWith(\"00\")\n ? timeString.slice(3)\n : timeString;\n return result;\n } catch (error) {\n return \"0:00\";\n }\n};\n\nexport const isMobile = () =>\n /iPhone|iPad|iPod|Android/i.test(window?.navigator?.userAgent);\n","import React from \"react\";\n\nconst CircularProgress = () => {\n return (\n \n \n \n );\n};\n\nexport default CircularProgress;\n","import React, { useEffect, useRef } from \"react\";\nimport type { FC, RefObject, ReactElement } from \"react\";\n\ninterface ClickAwayListenerProps {\n onClickAway: () => void;\n children: (ref: RefObject) => ReactElement;\n}\n\nconst ClickAwayListener: FC = ({\n children,\n onClickAway,\n}) => {\n const childrenRef = useRef(null);\n\n useEffect(() => {\n const handler = (e: MouseEvent) => {\n if (\n childrenRef.current &&\n !childrenRef.current.contains(\n // @ts-expect-error\n e.target\n )\n ) {\n onClickAway();\n }\n };\n\n window.addEventListener(\"click\", handler);\n\n return () => window.removeEventListener(\"click\", handler);\n }, [onClickAway]);\n\n return <>{children(childrenRef)};\n};\n\nexport default ClickAwayListener;\n","import React from \"react\";\n\nconst Cog = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default Cog;\n","import React from \"react\";\n\nconst ExitFullScreen = ({ ...others }) => {\n return (\n \n \n \n \n \n \n );\n};\n\nexport default ExitFullScreen;\n","import React from \"react\";\n\nconst FullScreen = ({ ...others }) => {\n return (\n \n \n \n \n \n \n );\n};\n\nexport default FullScreen;\n","import React from \"react\";\n\nconst Pause = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default Pause;\n","import React, { type FC } from \"react\";\n\nimport PauseIcon from \"../Icons/Pause\";\n\nconst PauseEffect: FC = () => {\n return (\n
\n \n
\n );\n};\n\nexport default PauseEffect;\n","import React from \"react\";\n\nconst PictureInPicture = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default PictureInPicture;\n","import React from \"react\";\n\nconst Play = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default Play;\n","import React, { type FC } from \"react\";\n\nimport PlayIcon from \"../Icons/Play\";\n\nconst PlayEffect: FC = () => {\n return (\n
\n \n
\n );\n};\n\nexport default PlayEffect;\n","import React from \"react\";\n\nconst Check = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default Check;\n","import React from \"react\";\n\nconst ChevronLeft = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default ChevronLeft;\n","import React from \"react\";\n\nconst ChevronRight = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default ChevronRight;\n","import React from \"react\";\n\nconst Speed = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default Speed;\n","import React from \"react\";\n\nconst SelectSubtitle = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default SelectSubtitle;\n","import React from \"react\";\n\nconst Speed = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default Speed;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport type { FC, RefObject } from \"react\";\nimport Check from \"./Icons/Check\";\nimport ChevronLeft from \"./Icons/ChevronLeft\";\nimport ChevronRight from \"./Icons/ChevronRight\";\nimport Quality from \"./Icons/Quality\";\nimport SelectSubtitle from \"./Icons/SelectSubtitle\";\nimport type { SettingsProps } from \"../shared/types\";\nimport Speed from \"./Icons/Speed\";\n\nconst SettingsDialog: FC = ({\n settingsActive,\n src,\n subtitles,\n playbackSpeed,\n setPlaybackSpeed,\n subtitleIndex,\n setSubtitleIndex,\n quality,\n setQuality,\n internationalization,\n}) => {\n const [height, setHeight] = useState(0);\n\n const [activeSection, setActiveSection] = useState(\"main\");\n\n const mainSectionRef = useRef(null);\n const speedSectionRef = useRef(null);\n const subtitlesSectionRef = useRef(null);\n const qualitySectionRef = useRef(null);\n\n const sections: { [key: string]: RefObject } = {\n main: mainSectionRef,\n speed: speedSectionRef,\n subtitles: subtitlesSectionRef,\n quality: qualitySectionRef,\n };\n\n useEffect(() => {\n if (sections[activeSection].current) {\n const elementHeight = sections[activeSection].current?.offsetHeight;\n setHeight(elementHeight && elementHeight > 250 ? 250 : elementHeight!);\n sections[activeSection].current?.scrollTo &&\n sections[activeSection].current?.scrollTo(0, 0);\n }\n // eslint-disable-next-line\n }, [activeSection]);\n\n return (\n \n
\n \n setActiveSection(\"speed\")}\n className=\"tuby-settings-item\"\n >\n
\n \n

\n {internationalization?.settingsPlaybackSpeed ||\n \"Playback Speed\"}\n

\n
\n \n \n {subtitles && (\n setActiveSection(\"subtitles\")}\n className=\"tuby-settings-item\"\n >\n
\n \n

{internationalization?.settingsSubtitles || \"Subtitles\"}

\n
\n \n \n )}\n {typeof src !== \"string\" && (\n setActiveSection(\"quality\")}\n className=\"tuby-settings-item\"\n >\n
\n \n

{internationalization?.settingsQuality || \"Quality\"}

\n
\n \n \n )}\n
\n\n \n setActiveSection(\"main\")}\n className=\"tuby-settings-section-header\"\n >\n \n \n {internationalization?.settingsPlaybackSpeed || \"Playback speed\"}\n \n \n
\n {new Array(8)\n .fill(\"\")\n .map((_, index) =>\n index === 3\n ? internationalization?.settingsPlaybackSpeedNormal ||\n \"Normal\"\n : (index + 1) / 4\n )\n .map((item, index) => (\n {\n setPlaybackSpeed((index + 1) / 4);\n setActiveSection(\"main\");\n }}\n className=\"tuby-settings-item-2\"\n >\n {playbackSpeed === (index + 1) / 4 ? (\n \n ) : (\n
\n )}\n {item}\n \n ))}\n
\n \n\n {subtitles && (\n \n setActiveSection(\"main\")}\n className=\"tuby-settings-section-header\"\n >\n \n \n {internationalization?.settingsSubtitles || \"Subtitles\"}\n \n \n
\n {\n setSubtitleIndex(-1);\n setActiveSection(\"main\");\n }}\n className=\"tuby-settings-item-2\"\n >\n {subtitleIndex === -1 ? (\n \n ) : (\n
\n )}\n \n {internationalization?.settingsSubtitlesOff || \"Off\"}\n \n \n {subtitles.map((subtitle, index) => (\n {\n setSubtitleIndex(index);\n setActiveSection(\"main\");\n }}\n className=\"tuby-settings-item-2\"\n >\n {subtitleIndex === index ? (\n \n ) : (\n
\n )}\n {subtitle.language}\n \n ))}\n
\n \n )}\n\n {typeof src !== \"string\" && (\n \n setActiveSection(\"main\")}\n className=\"tuby-settings-section-header\"\n >\n \n {internationalization?.settingsQuality || \"Quality\"}\n \n
\n {src.map((source, index) => (\n {\n setQuality(index);\n setActiveSection(\"main\");\n }}\n className=\"tuby-settings-item-2\"\n >\n {quality === index ? (\n \n ) : (\n
\n )}\n \n {typeof source.quality === \"number\"\n ? `${source.quality}p`\n : source.quality}\n \n \n ))}\n
\n \n )}\n \n \n );\n};\nexport default SettingsDialog;\n","import React, { type FC } from \"react\";\nimport type { SettingsProps } from \"../shared/types\";\n\nconst SettingsModal: FC = ({\n settingsActive,\n setSettingsActive,\n src,\n subtitles,\n playbackSpeed,\n setPlaybackSpeed,\n subtitleIndex,\n setSubtitleIndex,\n quality,\n setQuality,\n internationalization,\n}) => {\n return (\n setSettingsActive(false)}\n onKeyDown={() => setSettingsActive(false)}\n role=\"button\"\n tabIndex={0}\n className={`tuby-backdrop ${settingsActive ? \"tuby-show\" : \"\"}`}\n >\n e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n role=\"button\"\n tabIndex={0}\n className=\"tuby-modal\"\n >\n

{internationalization?.tooltipsSettings || \"Settings\"}

\n\n
\n

{internationalization?.settingsPlaybackSpeed || \"Speed\"}

\n setPlaybackSpeed((+e.target.value + 1) / 4)}\n >\n {new Array(8)\n .fill(\"\")\n .map((_, index) =>\n index === 3\n ? internationalization?.settingsPlaybackSpeedNormal ||\n \"Normal\"\n : (index + 1) / 4\n )\n .map((item, index) => (\n \n ))}\n \n
\n\n {subtitles && (\n
\n

{internationalization?.settingsSubtitles || \"Subtitles\"}

\n setSubtitleIndex(+e.target.value)}\n >\n \n\n {subtitles.map((subtitle, index) => (\n {\n setSubtitleIndex(index);\n }}\n value={index}\n >\n {subtitle.language}\n \n ))}\n \n
\n )}\n\n {typeof src === \"object\" && (\n
\n

{internationalization?.settingsQuality || \"Quality\"}

\n setQuality(+e.target.value)}\n >\n {src.map((source, index) => (\n {\n setQuality(index);\n }}\n value={index}\n >\n {typeof source.quality === \"number\"\n ? `${source.quality}p`\n : source.quality}\n \n ))}\n \n
\n )}\n
\n setSettingsActive(false)}\n >\n {internationalization?.settingsModalOff || \"OK\"}\n \n
\n \n \n );\n};\n\nexport default SettingsModal;\n","import React from \"react\";\n\nconst Subtitle = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default Subtitle;\n","import React from \"react\";\n\nconst VolumeFull = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default VolumeFull;\n","import React from \"react\";\n\nconst VolumeHalf = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default VolumeHalf;\n","import React from \"react\";\n\nconst VolumeMuted = ({ ...others }) => {\n return (\n \n \n \n );\n};\n\nexport default VolumeMuted;\n","import { useEffect, useRef, type DependencyList } from \"react\";\n\nexport const useEffectUpdate = (cb: Function, dependencies: DependencyList) => {\n const updated = useRef(false);\n useEffect(() => {\n if (!updated.current) {\n updated.current = true;\n return;\n }\n cb();\n //eslint-disable-next-line\n }, dependencies);\n};\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\nimport type { FC, HTMLProps } from \"react\";\nimport { formatVideoTime, isMobile } from \"../shared/utils\";\nimport CircularProgress from \"./Icons/CircularProgress\";\nimport ClickAwayListener from \"./ClickAwayListener\";\nimport Cog from \"./Icons/Cog\";\nimport ExitFullScreen from \"./Icons/ExitFullScreen\";\nimport FullScreen from \"./Icons/FullScreen\";\nimport Pause from \"./Icons/Pause\";\nimport PauseEffect from \"./Effect/PauseEffect\";\nimport PictureInPicture from \"./Icons/PictureInPicture\";\nimport Play from \"./Icons/Play\";\nimport PlayEffect from \"./Effect/PlayEffect\";\nimport type { PlayerProps } from \"../shared/types\";\nimport SettingsDialog from \"./SettingsDialog\";\nimport SettingsModal from \"./SettingsModal\";\nimport Subtitle from \"./Icons/Subtitle\";\nimport VolumeFull from \"./Icons/VolumeFull\";\nimport VolumeHalf from \"./Icons/VolumeHalf\";\nimport VolumeMuted from \"./Icons/VolumeMuted\";\nimport { useEffectUpdate } from \"../hooks/useEffectUpdate\";\n\nconst Player: FC = ({\n playerKey,\n src,\n subtitles,\n children,\n poster,\n seekDuration = 10,\n internationalization,\n playerRef: passedDownRef,\n pictureInPicture = false,\n keyboardShortcut = true,\n preserve = {\n watchTime: true,\n playbackSpeed: true,\n volume: true,\n },\n}) => {\n const [quality, setQuality] = useState(0);\n const [playbackSpeed, setPlaybackSpeed] = useState(\n preserve.playbackSpeed ? Number(localStorage.getItem(\"tuby-speed\")) || 1 : 1\n );\n const [paused, setPaused] = useState(true);\n const [onFullScreen, setOnFullScreen] = useState(false);\n const [loading, setLoading] = useState(false);\n const [settingsActive, setSettingsActive] = useState(false);\n const [subtitleIndex, setSubtitleIndex] = useState(0);\n\n const [currentTime, setCurrentTime] = useState(0);\n const [duration, setDuration] = useState(0);\n\n const [seekPreview, setSeekPreview] = useState(null);\n\n const [loadedData, setLoadedData] = useState(false);\n\n const [volume, setVolume] = useState(\n !preserve.volume &&\n isNaN(parseInt(localStorage.getItem(\"tuby-volume\") as string))\n ? 100\n : Number(localStorage.getItem(\"tuby-volume\"))\n );\n const [isMuted, setIsMuted] = useState(\n preserve.volume\n ? Boolean(Number(localStorage.getItem(\"tuby-muted\")))\n : false\n );\n\n const [hoverEnabled, setHoverEnabled] = useState(true);\n\n const [pauseDidUpdate, setPauseDidUpdate] = useState(false);\n\n const myRef = useRef(null);\n const playerRef = passedDownRef || myRef;\n const containerRef = useRef(null);\n const seekRef = useRef(null);\n const mouseDownRef = useRef(false);\n const timeoutRef = useRef | number | null>(\n null\n );\n const fullscreenToggleButton = useRef(null);\n const pauseButton = useRef(null);\n const volumeButtonRef = useRef(null);\n const subtitleButtonRef = useRef(null);\n\n const updateHoverState = () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n setHoverEnabled(true);\n timeoutRef.current = setTimeout(() => {\n setHoverEnabled(false);\n }, 2000);\n };\n\n const toggleSound = () => {\n setIsMuted(!isMuted);\n setVolume(volume === 0 ? 100 : volume);\n };\n\n const handleSeeking = (offsetX: number) => {\n if (!playerRef.current || !seekRef.current) return;\n\n const offset =\n (offsetX - seekRef.current.getBoundingClientRect().left) /\n seekRef.current.offsetWidth;\n\n const newTime =\n (Math.abs(offset) === Infinity || isNaN(offset) ? 0 : offset) *\n playerRef.current.duration;\n\n playerRef.current.currentTime = newTime;\n\n setCurrentTime(newTime);\n };\n\n const handleSeekPreview = (offsetX: number) => {\n if (!playerRef.current || !seekRef.current) return;\n\n const left = seekRef.current.getBoundingClientRect().left;\n\n let offsetInPercentage = (offsetX - left) / seekRef.current.offsetWidth;\n\n offsetInPercentage =\n Math.abs(offsetInPercentage) === Infinity || isNaN(offsetInPercentage)\n ? 0\n : offsetInPercentage;\n\n const offsetInPixel = offsetInPercentage * seekRef.current.offsetWidth;\n\n let newTime = offsetInPercentage * playerRef.current.duration;\n\n if (isNaN(newTime)) setSeekPreview(null);\n\n if (newTime < 0) newTime = 0;\n\n setSeekPreview({\n time: Math.round(newTime),\n offset: offsetInPixel,\n });\n };\n\n const listenMouseMoveSeeking = () => {\n const moveHandler = (e: MouseEvent) => {\n handleSeekPreview(e.clientX);\n if (mouseDownRef.current) {\n handleSeeking(e.clientX);\n }\n };\n window.addEventListener(\"mousemove\", moveHandler);\n\n const touchMoveHandler = (e: TouchEvent) => {\n handleSeekPreview(e.touches?.[0]?.pageX);\n if (mouseDownRef.current) {\n handleSeeking(e.touches?.[0]?.pageX);\n }\n };\n window.addEventListener(\"touchmove\", touchMoveHandler);\n\n window.addEventListener(\"mouseup\", () => {\n window.removeEventListener(\"mousemove\", moveHandler);\n mouseDownRef.current = false;\n setSeekPreview(null);\n });\n\n window.addEventListener(\"touchend\", () => {\n window.removeEventListener(\"touchmove\", touchMoveHandler);\n mouseDownRef.current = false;\n setSeekPreview(null);\n });\n };\n\n const handleScreenClicked = (\n e: React.MouseEvent | React.MouseEvent\n ) => {\n if (settingsActive) {\n setSettingsActive(false);\n } else {\n setPaused((prev) => !prev);\n }\n\n if (e.detail === 2 && !isMobile()) {\n setOnFullScreen((prev) => !prev);\n }\n };\n\n useEffectUpdate(() => {\n updateHoverState();\n setPauseDidUpdate(true);\n if (paused) {\n playerRef.current?.pause();\n } else {\n playerRef.current?.play();\n }\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement.blur();\n }\n }, [paused]);\n\n useEffect(() => {\n if (playerRef.current) {\n playerRef.current.muted = isMuted;\n playerRef.current.volume = isMuted ? 0 : volume / 100;\n }\n\n if (preserve.volume) {\n localStorage.setItem(\"tuby-volume\", String(volume));\n localStorage.setItem(\"tuby-muted\", String(+isMuted));\n }\n }, [volume, isMuted, playerRef, preserve.volume]);\n\n useEffect(() => {\n const changeHandler = () => {\n const doc = document as any;\n const fullscreenElement =\n doc.fullscreenElement ||\n doc.webkitFullscreenElement ||\n doc.webkitCurrentFullScreenElement ||\n doc.mozFullScreenElement ||\n doc.msFullscreenElement;\n\n if (fullscreenElement) {\n setOnFullScreen(true);\n } else {\n setOnFullScreen(false);\n }\n };\n\n document.addEventListener(\"fullscreenchange\", changeHandler);\n document.addEventListener(\"webkitfullscreenchange\", changeHandler);\n document.addEventListener(\"mozfullscreenchange\", changeHandler);\n document.addEventListener(\"MSFullscreenChange\", changeHandler);\n\n const endFullScreenHandler = () => {\n changeHandler();\n setPaused(true);\n };\n\n const player = playerRef.current;\n\n player?.addEventListener(\"webkitendfullscreen\", endFullScreenHandler);\n\n return () => {\n document.removeEventListener(\"fullscreenchange\", changeHandler);\n document.removeEventListener(\"webkitfullscreenchange\", changeHandler);\n document.removeEventListener(\"mozfullscreenchange\", changeHandler);\n document.removeEventListener(\"MSFullscreenChange\", changeHandler);\n\n player?.removeEventListener(\"webkitendfullscreen\", endFullScreenHandler);\n };\n }, [playerRef]);\n\n useEffectUpdate(() => {\n try {\n if (onFullScreen) {\n if (isMobile()) {\n const elem = playerRef.current as any;\n if (elem) {\n const requestFullScreen =\n elem.requestFullscreen ||\n elem.webkitRequestFullscreen ||\n elem.webkitRequestFullScreen ||\n elem.webkitEnterFullscreen ||\n elem.mozRequestFullScreen ||\n elem.msRequestFullscreen;\n requestFullScreen\n ?.call(elem)\n .catch((err: unknown) => console.error(err));\n }\n } else {\n const elem = containerRef.current as any;\n if (elem) {\n const requestFullScreen =\n elem.requestFullscreen ||\n elem.webkitRequestFullscreen ||\n elem.webkitRequestFullScreen ||\n elem.webkitEnterFullscreen ||\n elem.mozRequestFullScreen ||\n elem.msRequestFullscreen;\n requestFullScreen\n ?.call(elem)\n .catch((err: unknown) => console.error(err));\n }\n }\n } else {\n if (document.fullscreenElement) {\n const doc = document as any;\n const exitFullScreen =\n doc.exitFullscreen ||\n doc.webkitExitFullscreen ||\n doc.webkitCancelFullScreen ||\n doc.mozCancelFullScreen ||\n doc.msExitFullscreen;\n exitFullScreen\n ?.call(document)\n .catch((err: unknown) => console.error(err));\n }\n }\n } catch (error) {\n /* Empty */\n }\n updateHoverState();\n }, [onFullScreen]);\n\n useEffectUpdate(() => {\n if (!playerRef.current) return;\n\n playerRef.current.addEventListener(\n \"loadeddata\",\n () => {\n if (playerRef.current) {\n if (currentTime) {\n playerRef.current.currentTime = currentTime;\n playerRef.current.play();\n }\n }\n },\n { once: true }\n );\n\n playerRef.current.addEventListener(\"error\", () => {\n playerRef.current?.pause();\n });\n }, [quality]);\n\n useEffect(() => {\n if (!playerRef.current) return;\n\n if (preserve.playbackSpeed) {\n localStorage.setItem(\"tuby-speed\", String(playbackSpeed));\n }\n\n playerRef.current.playbackRate = playbackSpeed;\n }, [playbackSpeed, playerRef, preserve.playbackSpeed]);\n\n useEffect(() => {\n const keyHandler = (e: KeyboardEvent) => {\n if (!keyboardShortcut) return;\n const seekTime = (amount: number) => {\n playerRef.current && (playerRef.current.currentTime += amount);\n };\n if (containerRef.current?.contains(document.activeElement)) {\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement.blur();\n }\n }\n // Pause\n if (\n (keyboardShortcut === true || keyboardShortcut.pause) &&\n (e.key === \" \" || e.key === \"k\")\n )\n pauseButton.current?.click();\n // Rewind\n if (\n (keyboardShortcut === true || keyboardShortcut.rewind) &&\n e.key === \"ArrowLeft\"\n )\n seekTime(-seekDuration);\n // Forward\n if (\n (keyboardShortcut === true || keyboardShortcut.forward) &&\n e.key === \"ArrowRight\"\n )\n seekTime(seekDuration);\n // Full screen\n if (\n (keyboardShortcut === true || keyboardShortcut.fullScreen) &&\n e.key === \"f\"\n )\n fullscreenToggleButton.current?.click();\n // Mute\n if ((keyboardShortcut === true || keyboardShortcut.mute) && e.key === \"m\")\n volumeButtonRef.current?.click();\n // Subtitle\n if (\n (keyboardShortcut === true || keyboardShortcut.subtitle) &&\n e.key === \"c\"\n )\n subtitleButtonRef.current?.click();\n };\n\n const spacePressHandler = (e: KeyboardEvent) => {\n if (keyboardShortcut && e.key === \" \") e.preventDefault();\n };\n\n window.addEventListener(\"keyup\", keyHandler);\n\n window.addEventListener(\"keydown\", spacePressHandler);\n\n return () => {\n window.removeEventListener(\"keyup\", keyHandler);\n window.removeEventListener(\"keydown\", spacePressHandler);\n };\n }, [seekDuration, playerRef, keyboardShortcut]);\n\n useEffect(() => {\n const video = playerRef.current;\n if (!video) return;\n for (let i = 0; i < video.textTracks.length; i++) {\n video.textTracks[i].mode = \"hidden\";\n }\n if (\n subtitleIndex < video.textTracks.length &&\n video.textTracks &&\n video.textTracks[subtitleIndex]\n ) {\n video.textTracks[subtitleIndex].mode = \"showing\";\n }\n }, [playerRef, subtitleIndex]);\n\n const videoProps: HTMLProps & { src: string } = {\n crossOrigin: \"anonymous\",\n playsInline: true,\n onClickCapture: handleScreenClicked,\n controls: false,\n src: typeof src === \"string\" ? src : src[quality].url,\n onWaiting: () => setLoading(true),\n onPlaying: () => {\n setLoading(false);\n setPaused(false);\n },\n onLoadedData: () => {\n setLoadedData(true);\n setDuration(playerRef.current?.duration || 0);\n let newCurrentTime;\n if (playerKey && preserve.watchTime) {\n newCurrentTime = Number(\n localStorage.getItem(`${playerKey}-time`) as string\n );\n } else newCurrentTime = 0;\n setCurrentTime(newCurrentTime);\n playerRef.current && (playerRef.current.currentTime = newCurrentTime);\n },\n onTimeUpdate: () => {\n if (playerKey && loadedData && preserve.watchTime) {\n localStorage.setItem(\n `${playerKey}-time`,\n String(playerRef.current?.currentTime || 0)\n );\n }\n setCurrentTime(playerRef.current?.currentTime || 0);\n setDuration(playerRef.current?.duration || 0);\n },\n onEnded: () => {\n setPaused(true);\n },\n onMouseMove: () => updateHoverState(),\n\n children: (\n <>\n {subtitles &&\n subtitles.length > 0 &&\n subtitleIndex >= 0 &&\n loadedData &&\n subtitles.map((sub, index) => (\n \n ))}\n \n ),\n };\n\n return (\n <>\n {poster && !pauseDidUpdate && (\n \"Tuby\n )}\n \n {children ? (\n children(playerRef, videoProps)\n ) : (\n // eslint-disable-next-line jsx-a11y/media-has-caption\n