[Video] Only allow one VideoView to be active at a time, regardless of source (#5131)

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 t = useTheme()
-  const {activeSource, setActiveSource, player} = useActiveVideoNative()
-  const [isFullscreen, setIsFullscreen] = React.useState(false)
-  const isActive = embed.playlist === activeSource
   const {_} = useLingui()
+  const t = useTheme()
+  const {activeSource, activeViewId, setActiveSource, player} =
+    useActiveVideoNative()
+  const viewId = useId()
+
+  const [isFullscreen, setIsFullscreen] = React.useState(false)
+  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">