From fe30391cf75fca1b9559c4d559644bd4848be98b Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 5 Aug 2021 17:19:46 -0700
Subject: [PATCH] move helmet to main app

---
 src/App.tsx                      | 20 +++++++++++++----
 src/components/player/Player.tsx | 38 +++++++++++---------------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d8aa8c5..c9311f2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Helmet } from 'react-helmet-async';
-
+import { useAppSelector } from './redux/hooks';
 import './styles/App.global.css';
 import Layout from './components/layout/Layout';
 import PlaylistList from './components/playlist/PlaylistList';
@@ -16,15 +16,27 @@ import StarredView from './components/starred/StarredView';
 const queryClient = new QueryClient();
 
 const App = () => {
+  const playQueue = useAppSelector((state: any) => state.playQueue);
   if (!localStorage.getItem('server')) {
     return <Login />;
   }
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Helmet>
-        <title>sonicd</title>
-      </Helmet>
+      {playQueue.entry.length <= 1 && (
+        <Helmet>
+          <title>sonicd</title>
+        </Helmet>
+      )}
+
+      {playQueue.entry[playQueue.currentIndex] && (
+        <Helmet>
+          <title>
+            {playQueue.entry[playQueue.currentIndex].title} {' by '}
+            {playQueue.entry[playQueue.currentIndex].artist} — sonicd
+          </title>
+        </Helmet>
+      )}
       <Router>
         <Layout>
           <Switch>
diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx
index b4e153e..2139794 100644
--- a/src/components/player/Player.tsx
+++ b/src/components/player/Player.tsx
@@ -1,5 +1,4 @@
 import React, { createRef } from 'react';
-import { Helmet } from 'react-helmet-async';
 import AudioPlayer from 'react-h5-audio-player';
 import 'react-h5-audio-player/lib/styles.css';
 import { useAppSelector, useAppDispatch } from '../../redux/hooks';
@@ -36,30 +35,19 @@ const Player = () => {
   };
 
   return (
-    <>
-      {playQueue.entry[playQueue.currentIndex] && (
-        <Helmet>
-          <title>
-            {playQueue.entry[playQueue.currentIndex].title} {' by '}
-            {playQueue.entry[playQueue.currentIndex].artist} — sonicd
-          </title>
-        </Helmet>
-      )}
-
-      <AudioPlayer
-        ref={playerRef}
-        src={playQueue.entry[playQueue.currentIndex]?.streamUrl}
-        autoPlay
-        showSkipControls
-        showFilledVolume
-        showJumpControls={false}
-        onClickNext={handleOnClickNext}
-        onClickPrevious={handleOnClickPrevious}
-        onEnded={handleOnEnded}
-        onLoadStart={handleOnLoadStart}
-        onLoadedData={handleOnLoadedData}
-      />
-    </>
+    <AudioPlayer
+      ref={playerRef}
+      src={playQueue.entry[playQueue.currentIndex]?.streamUrl}
+      autoPlay
+      showSkipControls
+      showFilledVolume
+      showJumpControls={false}
+      onClickNext={handleOnClickNext}
+      onClickPrevious={handleOnClickPrevious}
+      onEnded={handleOnEnded}
+      onLoadStart={handleOnLoadStart}
+      onLoadedData={handleOnLoadedData}
+    />
   );
 };