/* eslint-disable no-param-reassign, no-console */ import { useEffect, useRef } from "react"; import { StashService } from "../core/StashService"; export interface IVideoHoverHookData { videoEl: React.RefObject; isPlaying: React.MutableRefObject; isHovering: React.MutableRefObject; options: IVideoHoverHookOptions; } export interface IVideoHoverHookOptions { resetOnMouseLeave: boolean; } export class VideoHoverHook { public static useVideoHover( options: IVideoHoverHookOptions ): IVideoHoverHookData { const videoEl = useRef(null); const isPlaying = useRef(false); const isHovering = useRef(false); const config = StashService.useConfiguration(); const soundEnabled = !!config.data && !!config.data.configuration ? config.data.configuration.interface.soundOnPreview : true; useEffect(() => { const videoTag = videoEl.current; if (!videoTag) { return; } videoTag.onplaying = () => { if (isHovering.current === true) { isPlaying.current = true; } else { videoTag.pause(); } }; videoTag.onpause = () => { isPlaying.current = false; }; }, [videoEl]); useEffect(() => { const videoTag = videoEl.current; if (!videoTag) { return; } videoTag.volume = soundEnabled ? 0.05 : 0; }, [soundEnabled]); return { videoEl, isPlaying, isHovering, options }; } public static onMouseEnter(data: IVideoHoverHookData) { data.isHovering.current = true; const videoTag = data.videoEl.current; if (!videoTag) { return; } if (videoTag.paused && !data.isPlaying.current) { videoTag.play().catch(error => { console.log(error.message); }); } } public static onMouseLeave(data: IVideoHoverHookData) { data.isHovering.current = false; const videoTag = data.videoEl.current; if (!videoTag) { return; } if (!videoTag.paused && data.isPlaying) { videoTag.pause(); if (data.options.resetOnMouseLeave) { videoTag.removeAttribute("src"); videoTag.load(); data.isPlaying.current = false; } } } }