From dee28f378a815e6518a010a293733b26ae7bed9c Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 4 Sep 2024 08:06:45 -0700
Subject: [Video] Only allow one `VideoView` to be active at a time, regardless
 of source (#5131)

---
 src/view/com/util/post-embeds/VideoEmbed.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

(limited to 'src/view/com/util/post-embeds/VideoEmbed.tsx')

diff --git a/src/view/com/util/post-embeds/VideoEmbed.tsx b/src/view/com/util/post-embeds/VideoEmbed.tsx
index 03838b662..988ba5739 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import React, {useCallback, useId, useState} from 'react'
 import {View} from 'react-native'
 import {Image} from 'expo-image'
 import {AppBskyEmbedVideo} from '@atproto/api'
@@ -17,11 +17,14 @@ import {useActiveVideoNative} from './ActiveVideoNativeContext'
 import * as VideoFallback from './VideoEmbedInner/VideoFallback'
 
 export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
+  const {_} = useLingui()
   const t = useTheme()
-  const {activeSource, setActiveSource, player} = useActiveVideoNative()
+  const {activeSource, activeViewId, setActiveSource, player} =
+    useActiveVideoNative()
+  const viewId = useId()
+
   const [isFullscreen, setIsFullscreen] = React.useState(false)
-  const isActive = embed.playlist === activeSource
-  const {_} = useLingui()
+  const isActive = embed.playlist === activeSource && activeViewId === viewId
 
   const [key, setKey] = useState(0)
   const renderError = useCallback(
@@ -34,7 +37,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
 
   const onChangeStatus = (isVisible: boolean) => {
     if (isVisible) {
-      setActiveSource(embed.playlist)
+      setActiveSource(embed.playlist, viewId)
       if (!player.playing) {
         player.play()
       }
@@ -88,7 +91,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
               <Button
                 style={[a.absolute, a.inset_0]}
                 onPress={() => {
-                  setActiveSource(embed.playlist)
+                  setActiveSource(embed.playlist, viewId)
                 }}
                 label={_(msg`Play video`)}
                 color="secondary">
-- 
cgit 1.4.1