[Videos] Video player - PR #1 - basic player (#4731)

* add ffmpeg-kit-react-native

* get select video button + compression working

* up res to 1080p

* add progress component

* move logic out of compressVideo

* (WIP) add lonestar compression

* rework web compression a bit

* mess around with adding a thumbnail

* 3mbps

* replace

* use 3mbps

* add expo-video

* remove unnecessary try/catch

* rm ToastAndroid

* fix web

* wrap lazy component in suspense

* gate video select button

* rm web compression

* flip sign

* remove expo-video from web

* review nits

* add video picker permissions + rm temp buttons

* add ffmpeg-kit-react-native

* replace

* hls-capable player

* start trying to hoist up video player instance

* hoist video player and move things around

* always show native controls

* fix controls on expo video android

* gate temp video player in feed

* rm IS_DEV, doesn't do what I thought it did

* use __DEV__ instead

---------

Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
Co-authored-by: Hailey <me@haileyok.com>
This commit is contained in:
Samuel Newman 2024-07-25 20:41:50 +01:00 committed by GitHub
parent 4ec999cab7
commit 00240b95b9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 489 additions and 105 deletions

View file

@ -0,0 +1,41 @@
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(() => {
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
}