Browse Source

move helmet to main app

master
jeffvli 3 years ago
parent
commit
fe30391cf7
  1. 20
      src/App.tsx
  2. 38
      src/components/player/Player.tsx

20
src/App.tsx

@ -2,7 +2,7 @@ import React from 'react';
import { HashRouter as Router, Switch, Route } from 'react-router-dom'; import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from 'react-query'; import { QueryClient, QueryClientProvider } from 'react-query';
import { Helmet } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';
import { useAppSelector } from './redux/hooks';
import './styles/App.global.css'; import './styles/App.global.css';
import Layout from './components/layout/Layout'; import Layout from './components/layout/Layout';
import PlaylistList from './components/playlist/PlaylistList'; import PlaylistList from './components/playlist/PlaylistList';
@ -16,15 +16,27 @@ import StarredView from './components/starred/StarredView';
const queryClient = new QueryClient(); const queryClient = new QueryClient();
const App = () => { const App = () => {
const playQueue = useAppSelector((state: any) => state.playQueue);
if (!localStorage.getItem('server')) { if (!localStorage.getItem('server')) {
return <Login />; return <Login />;
} }
return ( return (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<Helmet> {playQueue.entry.length <= 1 && (
<title>sonicd</title> <Helmet>
</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> <Router>
<Layout> <Layout>
<Switch> <Switch>

38
src/components/player/Player.tsx

@ -1,5 +1,4 @@
import React, { createRef } from 'react'; import React, { createRef } from 'react';
import { Helmet } from 'react-helmet-async';
import AudioPlayer from 'react-h5-audio-player'; import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css'; import 'react-h5-audio-player/lib/styles.css';
import { useAppSelector, useAppDispatch } from '../../redux/hooks'; import { useAppSelector, useAppDispatch } from '../../redux/hooks';
@ -36,30 +35,19 @@ const Player = () => {
}; };
return ( return (
<> <AudioPlayer
{playQueue.entry[playQueue.currentIndex] && ( ref={playerRef}
<Helmet> src={playQueue.entry[playQueue.currentIndex]?.streamUrl}
<title> autoPlay
{playQueue.entry[playQueue.currentIndex].title} {' by '} showSkipControls
{playQueue.entry[playQueue.currentIndex].artist} sonicd showFilledVolume
</title> showJumpControls={false}
</Helmet> onClickNext={handleOnClickNext}
)} onClickPrevious={handleOnClickPrevious}
onEnded={handleOnEnded}
<AudioPlayer onLoadStart={handleOnLoadStart}
ref={playerRef} onLoadedData={handleOnLoadedData}
src={playQueue.entry[playQueue.currentIndex]?.streamUrl} />
autoPlay
showSkipControls
showFilledVolume
showJumpControls={false}
onClickNext={handleOnClickNext}
onClickPrevious={handleOnClickPrevious}
onEnded={handleOnEnded}
onLoadStart={handleOnLoadStart}
onLoadedData={handleOnLoadedData}
/>
</>
); );
}; };

Loading…
Cancel
Save