add error boundary

src/view/com/util/post-embeds/VideoEmbed.web.tsx

@@ -1,9 +1,15 @@
-import React, {useEffect, useRef, useState} from 'react'
+import React, {useCallback, useEffect, useRef, useState} from 'react'
 import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import {Text} from '#/components/Typography'
+import {ErrorBoundary} from '../ErrorBoundary'
 import {useActiveVideoView} from './ActiveVideoContext'
 import {VideoEmbedInner} from './VideoEmbedInner'
+import {HLSUnsupportedError} from './VideoEmbedInner.web'
 
 export function VideoEmbed({source}: {source: string}) {
   const t = useTheme()
@@ -31,6 +37,16 @@ export function VideoEmbed({source}: {source: string}) {
     return () => observer.disconnect()
   }, [sendPosition])
 
+  const [key, setKey] = useState(0)
+  const renderError = useCallback(
+    (error: unknown) => (
+      <VideoError error={error} retry={() => setKey(key + 1)} />
+    ),
+    [key],
+  )
+
+  console.log(key)
+
   return (
     <View
       style={[
@@ -42,17 +58,73 @@ export function VideoEmbed({source}: {source: string}) {
       ]}>
       <div
         ref={ref}
-        style={{display: 'flex', flex: 1}}
+        style={{display: 'flex', flex: 1, cursor: 'default'}}
         onClick={evt => evt.stopPropagation()}>
-        <VideoEmbedInner
-          source={source}
-          active={active}
-          setActive={setActive}
-          sendPosition={sendPosition}
-          onScreen={onScreen}
-          isAnyViewActive={currentActiveView !== null}
-        />
+        <ErrorBoundary renderError={renderError} key={key}>
+          <VideoEmbedInner
+            source={source}
+            active={active}
+            setActive={setActive}
+            sendPosition={sendPosition}
+            onScreen={onScreen}
+            isAnyViewActive={currentActiveView !== null}
+          />
+        </ErrorBoundary>
       </div>
     </View>
   )
 }
+
+function VideoError({error, retry}: {error: unknown; retry: () => void}) {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  const isHLS = error instanceof HLSUnsupportedError
+
+  return (
+    <View
+      style={[
+        a.flex_1,
+        t.atoms.bg_contrast_25,
+        a.justify_center,
+        a.align_center,
+        a.px_lg,
+        a.border,
+        t.atoms.border_contrast_low,
+        a.rounded_sm,
+        a.gap_lg,
+      ]}>
+      <Text
+        style={[
+          a.text_center,
+          t.atoms.text_contrast_high,
+          a.text_md,
+          a.leading_snug,
+          {maxWidth: 300},
+        ]}>
+        {isHLS ? (
+          <Trans>
+            Your browser does not support the video format. Please try a
+            different browser.
+          </Trans>
+        ) : (
+          <Trans>
+            An error occurred while loading the video. Please try again later.
+          </Trans>
+        )}
+      </Text>
+      {!isHLS && (
+        <Button
+          onPress={retry}
+          size="small"
+          color="secondary_inverted"
+          variant="solid"
+          label={_(msg`Retry`)}>
+          <ButtonText>
+            <Trans>Retry</Trans>
+          </ButtonText>
+        </Button>
+      )}
+    </View>
+  )
+}

src/view/com/util/post-embeds/VideoEmbedInner.web.tsx

@@ -87,7 +87,7 @@ export function VideoPlayer({
 
   useEffect(() => {
     if (!ref.current) return
-    if (!Hls.isSupported()) throw new UnsupportedError()
+    if (!Hls.isSupported()) throw new HLSUnsupportedError()
 
     const hls = new Hls({capLevelToPlayerSize: true})
     hlsRef.current = hls
@@ -154,7 +154,7 @@ export function VideoPlayer({
   )
 }
 
-export class UnsupportedError extends Error {
+export class HLSUnsupportedError extends Error {
   constructor() {
     super('HLS is not supported')
   }