Samuel Newman
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React, {useContext, useEffect} from 'react'
|
|
import type {VideoPlayer} from 'expo-video'
|
|
import {useVideoPlayer as useExpoVideoPlayer} from 'expo-video'
|
|
|
|
const VideoPlayerContext = React.createContext<VideoPlayer | null>(null)
|
|
|
|
export function VideoPlayerProvider({
|
|
viewId,
|
|
source,
|
|
children,
|
|
}: {
|
|
viewId: string | null
|
|
source: string
|
|
children: React.ReactNode
|
|
}) {
|
|
// eslint-disable-next-line @typescript-eslint/no-shadow
|
|
const player = useExpoVideoPlayer(source, player => {
|
|
player.loop = true
|
|
player.play()
|
|
})
|
|
|
|
// make sure we're playing every time the viewId changes
|
|
// this means the video is different
|
|
useEffect(() => {
|
|
if (viewId === null) {
|
|
player.pause()
|
|
} else {
|
|
player.play()
|
|
}
|
|
}, [viewId, player])
|
|
|
|
return (
|
|
<VideoPlayerContext.Provider value={player}>
|
|
{children}
|
|
</VideoPlayerContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useVideoPlayer() {
|
|
const context = useContext(VideoPlayerContext)
|
|
if (!context) {
|
|
throw new Error('useVideoPlayer must be used within a VideoPlayerProvider')
|
|
}
|
|
return context
|
|
}
|