[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>

1 files changed, 41 insertions, 0 deletions

diff --git a/src/view/com/util/post-embeds/VideoPlayerContext.tsx b/src/view/com/util/post-embeds/VideoPlayerContext.tsx
new file mode 100644
index 000000000..bc5d9d370
--- /dev/null
+++ b/src/view/com/util/post-embeds/VideoPlayerContext.tsx
@@ -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
+}