fix: language switcher crash on minority languages in

apps/resources/src/components/NewVideoContentPage/VideoCarousel/VideoCard/VideoCard.tsx

@@ -56,8 +56,8 @@ export function VideoCard({
             <div className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden rounded-lg">
               <Image
                 fill
-                src={video.images[0].mobileCinematicHigh ?? ''}
-                alt={video.imageAlt[0].value}
+                src={video.images[0]?.mobileCinematicHigh ?? ''}
+                alt={video.imageAlt[0]?.value ?? ''}
                 style={{
                   width: '100%',
                   objectFit: 'cover',

apps/resources/src/components/VideoContentPage/VideoHero/VideoPlayer/VideoControls/VideoControls.spec.tsx

@@ -315,6 +315,30 @@ describe('VideoControls', () => {
     })
   })
 
+  it('does not read volume from a disposed player', async () => {
+    player.dispose()
+
+    expect(() =>
+      render(
+        <MockedProvider>
+          <WatchProvider
+            initialState={{
+              audioLanguageId: '529',
+              subtitleLanguageId: '529',
+              subtitleOn: false
+            }}
+          >
+            <PlayerProvider>
+              <VideoProvider value={{ content: videos[0] }}>
+                <VideoControls player={player} />
+              </VideoProvider>
+            </PlayerProvider>
+          </WatchProvider>
+        </MockedProvider>
+      )
+    ).not.toThrow()
+  })
+
   it('updates volume on volumechange', async () => {
     vi.spyOn(player, 'volume').mockReturnValue(0)
 

apps/resources/src/components/VideoContentPage/VideoHero/VideoPlayer/VideoControls/VideoControls.tsx

@@ -57,6 +57,14 @@ interface VideoControlProps {
   onVisibleChanged?: (active: boolean) => void
 }
 
+function isPlayerReady(player?: Player): player is Player {
+  return player != null && !player.isDisposed()
+}
+
+function getPlayerVolume(player?: Player): number {
+  return isPlayerReady(player) ? (player.volume() ?? 1) * 100 : 100
+}
+
 function evtToDataLayer(
   eventType,
   mcId,
@@ -220,7 +228,7 @@ export function VideoControls({
   useEffect(() => {
     dispatchPlayer({
       type: 'SetVolume',
-      volume: (player?.volume() ?? 1) * 100
+      volume: getPlayerVolume(player)
     })
     player?.on('play', () => {
       if ((player?.currentTime() ?? 0) < 0.02) {
@@ -290,17 +298,19 @@ export function VideoControls({
     player?.on('volumechange', () => {
       dispatchPlayer({
         type: 'SetMute',
-        mute: player?.muted() ?? false
+        mute: isPlayerReady(player) ? (player.muted() ?? false) : false
       })
       dispatchPlayer({
         type: 'SetVolume',
-        volume: (player?.volume() ?? 1) * 100
+        volume: getPlayerVolume(player)
       })
     })
     player?.on('fullscreenchange', () => {
       dispatchPlayer({
         type: 'SetFullscreen',
-        fullscreen: player?.isFullscreen() ?? false
+        fullscreen: isPlayerReady(player)
+          ? (player.isFullscreen() ?? false)
+          : false
       })
     })
     player?.on('useractive', () =>
@@ -391,9 +401,9 @@ export function VideoControls({
 
   function handlePlay(): void {
     if (!play) {
-      void player?.play()
+      if (isPlayerReady(player)) void player.play()
     } else {
-      void player?.pause()
+      if (isPlayerReady(player)) void player.pause()
     }
   }
 
@@ -406,7 +416,7 @@ export function VideoControls({
       })
     } else {
       if (isMobile()) {
-        void player?.requestFullscreen()
+        if (isPlayerReady(player)) void player.requestFullscreen()
         dispatchPlayer({
           type: 'SetFullscreen',
           fullscreen: true
@@ -427,12 +437,12 @@ export function VideoControls({
         type: 'SetProgress',
         progress: value
       })
-      player?.currentTime(value)
+      if (isPlayerReady(player)) player.currentTime(value)
     }
   }
 
   function handleMute(): void {
-    player?.muted(!mute)
+    if (isPlayerReady(player)) player.muted(!mute)
     dispatchPlayer({
       type: 'SetMute',
       mute: !mute
@@ -446,7 +456,7 @@ export function VideoControls({
         type: 'SetVolume',
         volume: value
       })
-      player?.volume(value / 100)
+      if (isPlayerReady(player)) player.volume(value / 100)
     }
   }
 
@@ -494,7 +504,7 @@ export function VideoControls({
       onClick={getClickHandler(handlePlay, () => {
         void handleFullscreen()
       })}
-      onMouseMove={() => player?.userActive(true)}
+      onMouseMove={() => isPlayerReady(player) && player.userActive(true)}
       data-testid="VideoControls"
     >
       {!loading ? (
@@ -532,7 +542,7 @@ export function VideoControls({
           {images[0]?.mobileCinematicHigh != null && (
             <Image
               src={images[0].mobileCinematicHigh}
-              alt={imageAlt[0].value}
+              alt={imageAlt[0]?.value ?? ''}
               fill
               sizes="100vw"
               style={{

apps/watch/src/components/VideoBlock/VideoBlockPlayer/VideoControls/VideoControls.spec.tsx

@@ -32,7 +32,8 @@ const mockPlayer = {
   on: jest.fn(),
   off: jest.fn(),
   play: jest.fn(),
-  pause: jest.fn()
+  pause: jest.fn(),
+  isDisposed: jest.fn().mockReturnValue(false)
 } as unknown as Player
 
 describe('VideoControls', () => {
@@ -46,6 +47,26 @@ describe('VideoControls', () => {
     wasUnmuted: true
   }
 
+  it('does not read volume from a disposed player', () => {
+    const disposedPlayer = {
+      ...mockPlayer,
+      isDisposed: jest.fn().mockReturnValue(true),
+      volume: jest.fn(() => {
+        throw new Error('disposed')
+      })
+    } as unknown as Player
+
+    expect(() =>
+      render(
+        <VideoProvider value={{ content: videos[0] }}>
+          <PlayerProvider>
+            <VideoControls {...defaultProps} player={disposedPlayer} />
+          </PlayerProvider>
+        </VideoProvider>
+      )
+    ).not.toThrow()
+  })
+
   it('should render video controls', () => {
     render(
       <VideoProvider value={{ content: videos[0] }}>