import React , { useState } from 'react' ; import { v4 as uuidv4 } from 'uuid' ; import HoverVideoPlayer from 'react-hover-video-player' ; import { HoverVideoPlayerProps } from '../../src/HoverVideoPlayer.types' ; interface MockVideoSrcOptions { defaultValue throttleKbps ? : number ; } param { MockVideoSrcOptions } options returns { string } export const makeMockVideoSrc = ( { throttleKbps , } = { } ) : string => { const mockVideoAssetPath = `/BigBuckBunny-${ uuidv4 ( ) }.mp4` ; cy . fixture ( 'BigBuckBunny.mp4' , 'base64' ) . then ( ( videoAsset ) => { const videoAssetByteSize = Math . floor ( videoAsset . length * 0.75 ) ; return cy . intercept ( 'GET' , mockVideoAssetPath , { fixture : 'BigBuckBunny.mp4' , throttleKbps , statusCode : 206 , headers : { 'accept-ranges' : 'bytes' , 'Content-Length' : `${ videoAssetByteSize }` , 'Content-Range' : `bytes 0-${ videoAssetByteSize - 1 }/${ videoAssetByteSize }` , 'content-type' : 'video/mp4' , } , } ) ; } ) ; return mockVideoAssetPath ; } ; export function PausedOverlay ( ) { return ( < div style = { { display : 'block' , width : '100%' , height : '100%' , backgroundColor : 'red' , } } > PAUSED < /div>); } export function LoadingOverlay ( ) { return ( < div style = { { width : '100%' , height : '100%' , backgroundColor : 'yellow' , } } > LOADING < /div>); } export function HoverOverlay ( ) { return ( < div style = { { width : '100%' , height : '100%' , backgroundColor : 'rgba(0, 180, 180, 0.7)' , color : 'white' , } } > HOVERING < /div>); } export function HoverVideoPlayerWrappedWithFocusToggleButton ( { focused , ... props } ) { const [ isFocused , setIsFocused ] = useState ( focused ) ; return ( < > < button onClick = { ( ) => setIsFocused ( ! isFocused ) } data - testid = "toggle-focus-button" > Toggle focus < /button> < HoverVideoPlayer focused = { isFocused } { ... props } /> < />); }