fix: hydration mismatch errors

src/components/Episode/Header/Episode.Player.tsx

@@ -7,6 +7,7 @@ import { useHookstate } from '@hookstate/core'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
 import ReactPlayer from 'react-player'
+import { useHydrated } from '../../../utils/useHydrated.util'
 import SimplecastPlayer from './Episode.SimplecastPlayer'
 
 export type EpisodePlayerProps = {
@@ -23,6 +24,7 @@ const EpisodePlayer = ({
   showTitle,
 }: EpisodePlayerProps) => {
   const router = useRouter()
+  const hydrated = useHydrated()
 
   const state = useHookstate(playerState)
   const epState = useHookstate(episodeState)
@@ -215,27 +217,29 @@ const EpisodePlayer = ({
         />
       ) : null}
       <PlayerContainer ref={playerContainerRef} isAudio={isSimplecast}>
-        <ReactPlayer
-          forceAudio={isSimplecast ? true : false}
-          ref={playerRef}
-          url={url as string}
-          playing={keepGlobalPlay ? false : state.value.playing}
-          controls={isSimplecast ? false : true}
-          volume={state.value.volume}
-          muted={
-            state.value.isEnabled ? true : state.value.muted ? true : false
-          }
-          onProgress={handleProgress}
-          onPlay={handlePlay}
-          onPause={handlePause}
-          onDuration={handleDuration}
-          onReady={() => setLoading(false)}
-          config={{
-            youtube: {
-              playerVars: { enablejsapi: 1 },
-            },
-          }}
-        />
+        {hydrated && (
+          <ReactPlayer
+            forceAudio={isSimplecast ? true : false}
+            ref={playerRef}
+            url={url as string}
+            playing={keepGlobalPlay ? false : state.value.playing}
+            controls={isSimplecast ? false : true}
+            volume={state.value.volume}
+            muted={
+              state.value.isEnabled ? true : state.value.muted ? true : false
+            }
+            onProgress={handleProgress}
+            onPlay={handlePlay}
+            onPause={handlePause}
+            onDuration={handleDuration}
+            onReady={() => setLoading(false)}
+            config={{
+              youtube: {
+                playerVars: { enablejsapi: 1 },
+              },
+            }}
+          />
+        )}
       </PlayerContainer>
     </>
   )

src/components/Podcasts/Podcasts.Lists.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled'
 import Image from 'next/image'
 import Link from 'next/link'
 import { LPE } from '../../types/lpe.types'
-import { getPostLink } from '../../utils/route.utils'
 import { Grid, GridItem } from '../Grid/Grid'
 import PodcastHost from './Podcast.Host'
 
@@ -46,16 +45,12 @@ export default function PodcastsLists({ shows }: Props) {
                     <PodcastHost show={show} />
                   </ShowData>
                 </div>
-                <ShowButtonLink
-                  href={getPostLink('podcast', { showSlug: show.slug })}
-                >
-                  <ShowButton isEven={isEven}>
-                    <ColoredText isEven={isEven} variant="body3">
-                      Podcast page
-                    </ColoredText>
-                    <ArrowDownIcon color={isEven ? 'secondary' : 'primary'} />
-                  </ShowButton>
-                </ShowButtonLink>
+                <ShowButton isEven={isEven}>
+                  <ColoredText isEven={isEven} variant="body3">
+                    Podcast page
+                  </ColoredText>
+                  <ArrowDownIcon color={isEven ? 'secondary' : 'primary'} />
+                </ShowButton>
               </ShowCard>
             </ShowCardContainer>
           )
@@ -94,8 +89,6 @@ const ShowCard = styled(Link)<{ isEven: boolean }>`
   }
 `
 
-const ShowCardLinkContainer = styled(Link)``
-
 const ShowInfoContainer = styled.div`
   display: flex;
   gap: 16px;
@@ -156,11 +149,6 @@ const Description = styled(Typography)`
   }
 `
 
-const ShowButtonLink = styled(Link)`
-  text-decoration: none;
-  width: fit-content;
-`
-
 const ShowButton = styled(Button)<{ isEven: boolean }>`
   display: flex;
   align-items: center;