Function VideoPlayer

components/VideoPlayer.tsx:45–1595

()

let skipLoad = false

const VideoPlayer: React.FunctionComponent = () => {
    const {originalSrc, forwardSrc, reverseSrc, subtitleSrc, reverse, speed, preservesPitch,
        duration, prevVolume, volume, paused, subtitles, loop, abloop, loopStart,
        loopEnd, savedLoop, progress, secondsProgress, seekTo, abDragging, originalStyle,
        dragging, dragProgress, stepFlag, subtitleColor, outlineThickness, outlineColor,
        subtitleSize, animation
    } = usePlaybackSelector()
    const {setOriginalSrc, setForwardSrc, setReverseSrc, setSubtitleSrc, setReverse, setSpeed, setPreservesPitch,
        setDuration, setPrevVolume, setVolume, setPaused, setSubtitles, setLoop, setABLoop, setLoopStart,
        setLoopEnd, setSavedLoop, setProgress, setSecondsProgress, setSeekTo, setDragging, setDragProgress,
        setABDragging, setStepFlag, setSubtitleColor, setOutlineThickness, setOutlineColor, setSubtitleSize,
        setAnimation, setOriginalStyle
    } = usePlaybackActions()
    const {brightness, contrast, hue, saturation, lightness, blur, sharpen, pixelate} = useFilterSelector()
    const {videoDrag} = useActiveSelector()
    const [showSpeedPopup, setShowSpeedPopup] = useState(false)
    const [showSubtitlePopup, setShowSubtitlePopup] = useState(false)
    const [showAudioPopup, setShowAudioPopup] = useState(false)
    const [showChapterPopup, setShowChapterPopup] = useState(false)
    const [hover, setHover] = useState(false)
    const [hoverBar, setHoverBar] = useState(false)
    const [backFrame, setBackFrame] = useState("")
    const [videoLoaded, setVideoLoaded] = useState(false)
    const [animationLoaded, setAnimationLoaded] = useState(false)
    const [videoData, setVideoData] = useState(null as BitmapFrame[] | null)
    const [animationData, setAnimationData] = useState(null as AnimationFrame[] | null)
    const [subtitlesLoaded, setSubtitlesLoaded] = useState(false)
    const [subtitleText, setSubtitleText] = useState("")
    const [processing, setProcessing] = useState(false)
    const [videoTracks, setVideoTracks] = useState([] as VideoTrack[])
    const [audioTracks, setAudioTracks] = useState([] as VideoTrack[])
    const [subtitleTracks, setSubtitleTracks] = useState([] as VideoTrack[])
    const [chapters, setChapters] = useState([] as VideoChapter[])
    const [currentVideoTrack, setCurrentVideoTrack] = useState(null as VideoTrack | null)
    const [currentAudioTrack, setCurrentAudioTrack] = useState(null as VideoTrack | null)
    const [currentSubtitleTrack, setCurrentSubtitleTrack] = useState(null as VideoTrack | null)
    const [currentChapter, setCurrentChapter] = useState(null as VideoChapter | null)
    const [zoomScale, setZoomScale] = useState(1)
    const [draggingVideo, setDraggingVideo] = useState(false)

    const playerRef = useRef<HTMLDivElement>(null)
    const videoRef = useRef<HTMLVideoElement>(null)
    const animationRef = useRef<HTMLImageElement>(null)
    const trackRef = useRef<HTMLTrackElement>(null)
    const speedPopup = useRef<HTMLDivElement>(null)
    const speedIcon = useRef<HTMLDivElement>(null)
    const subtitlePopup = useRef<HTMLDivElement>(null)
    const subtitleIcon = useRef<HTMLDivElement>(null)
    const audioPopup = useRef<HTMLDivElement>(null)
    const audioIcon = useRef<HTMLDivElement>(null)
    const chapterPopup = useRef<HTMLDivElement>(null)
    const chapterIcon = useRef<HTMLDivElement>(null)
    const filterRef = useRef<HTMLDivElement>(null)
    const lightnessRef = useRef<HTMLImageElement>(null)
    const sharpnessRef = useRef<HTMLCanvasElement>(null)
    const pixelateRef = useRef<HTMLCanvasElement>(null)
    const assRef = useRef<any>(null)
    const assContainerRef = useRef<HTMLDivElement>(null)