From dd8024e54fc07c0f625c58a1f188318ab1f36c18 Mon Sep 17 00:00:00 2001
From: Bamdad Sabbagh <hi@bamdad.fr>
Date: Wed, 9 Oct 2024 15:48:14 +0200
Subject: [PATCH] fix: use dynamic title at player level

---
 src/components/audio/audio.component.tsx | 20 +++++++++-----------
 src/layouts/player/player.layout.tsx     |  4 ----
 src/modules/player/player.module.tsx     |  5 +++++
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/audio/audio.component.tsx b/src/components/audio/audio.component.tsx
index 07f3c3b4..73a6418b 100644
--- 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
index 815e2862..c4d2afbf 100644
--- 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
index 2e9c11a0..df0cf735 100644
--- 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>