quinto dia - final

src/components/Header/index.tsx

@@ -1,20 +1,23 @@
-import format from 'date-fns/format';
-import ptBR from 'date-fns/locale/pt-BR';
+import format from "date-fns/format";
+import ptBR from "date-fns/locale/pt-BR";
+import Link from "next/link";
 
-import styles from './styles.module.scss'
+import styles from "./styles.module.scss";
 
 export function Header() {
-   const currentDate = format(new Date(), 'EEEEEE, d MMMM', {
-      locale: ptBR,
-   });
+  const currentDate = format(new Date(), "EEEEEE, d MMMM", {
+    locale: ptBR,
+  });
 
-   return (
-      <header className={styles.headerContainer}>
-         <img src="/logo.svg" alt="Podcastr" />
+  return (
+    <header className={styles.headerContainer}>
+      <Link href="/">
+        <img src="/logo.svg" alt="Podcastr" />
+      </Link>
 
-         <p>O melhor para você ouvir, sempre</p>
+      <p>O melhor para você ouvir, sempre</p>
 
-         <span>{currentDate}</span>
-      </header>
-   );
-}
+      <span>{currentDate}</span>
+    </header>
+  );
+}

src/components/Header/styles.module.scss

@@ -1,22 +1,26 @@
 .headerContainer {
-   background: var(--white);
-   height: 6.5rem;
+  background: var(--white);
+  height: 6.5rem;
 
-   display: flex;
-   align-items: center;
+  display: flex;
+  align-items: center;
 
-   padding: 2rem 4rem;
+  padding: 2rem 4rem;
 
-   border-bottom: 1px solid var(--gray-100);
+  border-bottom: 1px solid var(--gray-100);
 
-   p {
-      margin-left: 2rem;
-      padding: 0.25rem 0 0.25rem 2rem;
-      border-left: 1px solid var(--gray-100);
-   }
+  p {
+    margin-left: 2rem;
+    padding: 0.25rem 0 0.25rem 2rem;
+    border-left: 1px solid var(--gray-100);
+  }
 
-   span {
-      margin-left: auto;
-      text-transform: capitalize;
-   }
-}
+  span {
+    margin-left: auto;
+    text-transform: capitalize;
+  }
+
+  img:hover {
+    cursor: pointer;
+  }
+}

src/components/Player/index.tsx

@@ -17,14 +17,15 @@ export function Player() {
     isPlaying,
     isLooping,
     isShuffling,
+    hasPrevious,
+    hasNext,
     togglePlay,
     toggleLoop,
     toggleShuffle,
     setPlayingState,
     playNext,
     playPrevious,
-    hasPrevious,
-    hasNext,
+    clearPlayerState,
   } = usePlayer();
 
   // Anotação 02
@@ -48,6 +49,19 @@ export function Player() {
     });
   }
 
+  function handleSeek(amount: number) {
+    audioRef.current.currentTime = amount;
+    setProgress(amount);
+  }
+
+  function handleEpisodeEnded() {
+    if (hasNext) {
+      playNext();
+    } else {
+      clearPlayerState();
+    }
+  }
+
   const episode = episodeList[currentEpisodeIndex];
 
   return (
@@ -82,6 +96,7 @@ export function Player() {
               <Slider
                 max={episode.duration}
                 value={progress}
+                onChange={handleSeek}
                 trackStyle={{ backgroundColor: "#04d361" }}
                 railStyle={{ backgroundColor: "#9f75ff" }}
                 handleStyle={{ borderColor: "#04d361", borderWidth: 4 }}
@@ -102,6 +117,7 @@ export function Player() {
             autoPlay
             loop={isLooping}
             onLoadedMetadata={setupProgressListener}
+            onEnded={handleEpisodeEnded}
             // Anotação 05
             onPlay={() => setPlayingState(true)}
             onPause={() => setPlayingState(false)}

src/contexts/PlayerContext.tsx

@@ -14,6 +14,8 @@ type PlayerContextData = {
   isPlaying: boolean;
   isLooping: boolean;
   isShuffling: boolean;
+  hasPrevious: boolean;
+  hasNext: boolean;
   play: (episode: Episode) => void;
   playList: (list: Episode[], index: number) => void;
   togglePlay: () => void;
@@ -22,8 +24,7 @@ type PlayerContextData = {
   setPlayingState: (state: boolean) => void;
   playNext: () => void;
   playPrevious: () => void;
-  hasPrevious: boolean;
-  hasNext: boolean;
+  clearPlayerState: () => void;
 };
 
 type PlayerContextProviderProps = {
@@ -71,8 +72,13 @@ export function PlayerContextProvider({
     setIsPlaying(state);
   }
 
+  function clearPlayerState() {
+    setEpisodeList([]);
+    setCurrentEpisodeIndex(0);
+  }
+
   const hasPrevious = currentEpisodeIndex > 0;
-  const hasNext = currentEpisodeIndex + 1 < episodeList.length;
+  const hasNext = isShuffling || currentEpisodeIndex + 1 < episodeList.length;
 
   function playNext() {
     if (isShuffling) {
@@ -109,6 +115,7 @@ export function PlayerContextProvider({
         playPrevious,
         hasPrevious,
         hasNext,
+        clearPlayerState,
       }}
     >
       {children}

src/pages/_document.tsx

@@ -6,21 +6,25 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
 
 export default class MyDocument extends Document {
-   render() {
-      return (
-         <Html>
-            <Head>
-               <link rel="preconnect" href="https://fonts.gstatic.com" />
-               <link
-                  href="https://fonts.googleapis.com/css2?family=Inter&family=Lexend:wght@500;600&display=swap"
-                  rel="stylesheet"
-               />
-            </Head>
-            <body>
-               <Main />
-               <NextScript />
-            </body>
-         </Html>
-      );
-   }
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          <link
+            href={
+              "https://fonts.googleapis.com/" +
+              "css2?family=Inter&family=Lexend:wght@500;600&display=swap"
+            }
+            rel="stylesheet"
+          />
+          <link rel="shortcut icon" href="/favicon.png" type="image/png" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
 }

src/pages/episodes/[slug].tsx

@@ -5,6 +5,7 @@ import { usePlayer } from "../../contexts/PlayerContext";
 import { convertDurationToTimeString } from "../../utils/convertDurationToTimeString";
 import Link from "next/link";
 import Image from "next/image";
+import Head from "next/head";
 import ptBR from "date-fns/locale/pt-BR";
 import styles from "./episode.module.scss";
 
@@ -25,10 +26,14 @@ type EpisodeProps = {
 };
 
 export default function Episode({ episode }: EpisodeProps) {
-const { play } = usePlayer();
+  const { play } = usePlayer();
 
   return (
     <div className={styles.episodeContainer}>
+      <Head>
+        <title>{episode.title} | Podcastr</title>
+      </Head>
+
       <div className={styles.episode}>
         <div className={styles.thumbnailContainer}>
           <Link href="/">