fix: use dynamic title at player level

bamdadfr · Oct 9, 2024 · dd8024e · dd8024e
1 parent 026a2d9
commit dd8024e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/src/components/audio/audio.component.tsx b/src/components/audio/audio.component.tsx
@@ -11,16 +11,14 @@ export function AudioComponent({url}: Props): ReactElement {
   const {ref} = useAudioModule(url);
 
   return (
-    <>
-      <Invisible>
-        <audio
-          ref={ref}
-          aria-label="player"
-          // controls
-        >
-          <track kind="captions" />
-        </audio>
-      </Invisible>
-    </>
+    <Invisible>
+      <audio
+        ref={ref}
+        aria-label="player"
+        // controls
+      >
+        <track kind="captions" />
+      </audio>
+    </Invisible>
   );
 }
diff --git a/src/layouts/player/player.layout.tsx b/src/layouts/player/player.layout.tsx
@@ -2,7 +2,6 @@ import {NextSeo} from 'next-seo';
 import React, {type ReactElement} from 'react';
 import {AudioComponent} from 'src/components/audio/audio.component';
 import {LoadingComponent} from 'src/components/loading/loading.component';
-import {useDynamicTitle} from 'src/hooks/use-dynamic-title';
 import {DefaultLayout} from 'src/layouts/default/default.layout';
 import {PlayerModule} from 'src/modules/player/player.module';
 
@@ -27,12 +26,9 @@ export function PlayerLayout({
     image,
   });
 
-  const {dynamicTitle} = useDynamicTitle();
-
   return (
     <>
       <NextSeo
-        title={dynamicTitle}
         openGraph={{images: [{url: image}]}}
         canonical={metaUrl}
       />

diff --git a/src/modules/player/player.module.tsx b/src/modules/player/player.module.tsx
@@ -1,8 +1,10 @@
 import {ResizeObserver} from '@juggle/resize-observer';
+import {NextSeo} from 'next-seo';
 import React, {ReactElement, useMemo} from 'react';
 import useMeasure from 'react-use-measure';
 import {p} from 'src/app/shared.styles';
 import {IndicatorsComponent} from 'src/components/indicators/indicators.component';
+import {useDynamicTitle} from 'src/hooks/use-dynamic-title';
 import {WebGlComponent} from 'src/modules/player/components/artwork/web-gl.component';
 
 import {PlayPauseButtonComponent} from './components/play-pause-button/play-pause-button.component';
@@ -30,9 +32,12 @@ export function PlayerModule(): ReactElement {
   const [ref, {width}] = useMeasure({polyfill: ResizeObserver});
   const imageWidth = useMemo(() => width - p * 4, [width]);
   const playerWidth = useMemo(() => width - p * 6, [width]);
+  const {dynamicTitle} = useDynamicTitle();
 
   return (
     <>
+      <NextSeo title={dynamicTitle} />
+
       <ImageContainer ref={ref}>
         <WebGlComponent width={imageWidth} />
       </ImageContainer>