style: update global audio player style

src/components/Episode/Header/Episode.SimplecastPlayer.tsx

@@ -3,7 +3,10 @@ import { LPE } from '@/types/lpe.types'
 import styled from '@emotion/styled'
 import { useHookstate } from '@hookstate/core'
 import { useState } from 'react'
-import { LpeAudioPlayerControls } from '@/components/LpePlayer/Controls/Controls'
+import {
+  LpeAudioPlayerControls,
+  PlayerType,
+} from '@/components/LpePlayer/Controls/Controls'
 import { ResponsiveImage } from '@/components/ResponsiveImage/ResponsiveImage'
 
 export type SimplecastPlayerProps = {
@@ -82,6 +85,7 @@ const SimplecastPlayer = ({
             }}
             allowFullScreen={true}
             color={'white'}
+            playerType={PlayerType.SIMPLECAST}
           />
         </Controls>
       </ControlsWrapper>

src/components/GlobalAudioPlayer/GlobalAudioPlayer.tsx

@@ -1,12 +1,13 @@
 import ReactPlayer from 'react-player'
 import styled from '@emotion/styled'
 import React, { useEffect, useRef, useState } from 'react'
-import { Typography } from '@acid-info/lsd-react'
+import { CloseIcon, Typography } from '@acid-info/lsd-react'
 import Image from 'next/image'
 import { playerState } from './globalAudioPlayer.state'
 import { useHookstate } from '@hookstate/core'
 import { episodeState } from './episode.state'
 import { LpeAudioPlayer } from '@/components/LpePlayer/LpeAudioPlayer'
+import { PlayerType } from '../LpePlayer/Controls/Controls'
 
 export default function GlobalAudioPlayer() {
   const state = useHookstate(playerState)
@@ -14,7 +15,7 @@ export default function GlobalAudioPlayer() {
 
   const globalPlayerRef = useRef<ReactPlayer>(null)
 
-  const [showVolume, setShowVolume] = useState(false)
+  // const [showVolume, setShowVolume] = useState(false)
 
   // const handleLoad = (url: string) => {
   //   setState((prev) => ({ ...prev, url, played: 0, loaded: 0, pip: false }))
@@ -120,6 +121,10 @@ export default function GlobalAudioPlayer() {
             alignTop: true,
             showThumb: false,
           },
+          metadata: {
+            title: epState.value.title,
+            podcast: epState.value.podcast,
+          },
         }}
       />
       <ReactPlayer
@@ -147,10 +152,11 @@ export default function GlobalAudioPlayer() {
         // onBuffer={() => console.log('onBuffer')}
         // onSeek={(e) => console.log('onSeek', e)}
         // onError={(e) => console.log('onError', e)}
+        playerType={PlayerType.GLOBAL}
       />
       <RightMenu>
         {!!epState.value.coverImage && (
-          <Image
+          <Thumbnail
             src={epState.value.coverImage.url}
             alt={epState.value.coverImage.alt}
             width={48}
@@ -161,6 +167,13 @@ export default function GlobalAudioPlayer() {
           <Typography variant="body2">{epState.value.title}</Typography>
           <Typography variant="body3">{epState.value.podcast}</Typography>
         </EpisodeData>
+        <CloseIconContainer>
+          <CloseIcon
+            width={16}
+            height={16}
+            onClick={() => state.set((prev) => ({ ...prev, isEnabled: false }))}
+          />
+        </CloseIconContainer>
       </RightMenu>
     </Container>
   )
@@ -184,6 +197,12 @@ const Container = styled.div<{ visible: boolean }>`
   > :first-child {
     width: 60%;
   }
+
+  @media (max-width: 768px) {
+    > :first-child {
+      width: 100%;
+    }
+  }
 `
 
 const RightMenu = styled.div`
@@ -192,11 +211,35 @@ const RightMenu = styled.div`
   align-items: center;
   justify-content: flex-end;
   margin-left: 32px;
-  gap: 16px;
+
+  @media (max-width: 768px) {
+    width: fit-content;
+    margin-left: auto;
+  }
 `
 
 const EpisodeData = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
+
+  @media (max-width: 768px) {
+    display: none !important;
+  }
+`
+
+const Thumbnail = styled(Image)`
+  margin-right: 16px;
+
+  @media (max-width: 768px) {
+    display: none !important;
+  }
+`
+
+const CloseIconContainer = styled.div`
+  margin-left: 43px;
+
+  @media (max-width: 768px) {
+    margin-left: 16px;
+  }
 `

src/components/LpePlayer/Controls/Controls.tsx

@@ -12,6 +12,11 @@ import {
   TimeTrack,
 } from '@/components/LpePlayer/Controls/Controls.TimeTrack'
 
+export enum PlayerType {
+  GLOBAL = 'global',
+  SIMPLECAST = 'simplecast',
+}
+
 export interface LpeAudioPlayerControlsProps {
   duration: number
   playedSeconds: number
@@ -25,6 +30,8 @@ export interface LpeAudioPlayerControlsProps {
   color?: string
 
   timeTrackProps: ControlsTimeTrackProps
+  playerType?: PlayerType
+  metadata?: { title: string; podcast: string }
 }
 
 export const LpeAudioPlayerControls = (props: LpeAudioPlayerControlsProps) => {
@@ -40,34 +47,44 @@ export const LpeAudioPlayerControls = (props: LpeAudioPlayerControlsProps) => {
     onVolumeToggle,
     allowFullScreen = false,
     timeTrackProps: { onValueChange, onMouseDown, onMouseUp },
+    playerType = PlayerType.GLOBAL,
+    metadata,
   } = props
 
+  const iconSize = playerType === PlayerType.GLOBAL ? 16 : 24
+  const isLightMode =
+    playerType === PlayerType.GLOBAL && !!metadata?.title.length
+
   return (
     <Container>
       <Buttons>
         <Row>
           <PlayPause onClick={playing ? onPause : onPlay}>
             {playing ? (
-              <PauseIcon width={24} height={24} fill={color} />
+              <PauseIcon width={iconSize} height={iconSize} fill={color} />
             ) : (
-              <PlayIcon width={24} height={24} fill={color} />
+              <PlayIcon width={iconSize} height={iconSize} fill={color} />
             )}
           </PlayPause>
-          <TimeContainer color={color}>
+          <Metadata>
+            <Title variant="body3">{props.metadata?.title}</Title>
+            <Podcast variant="body3">{props.metadata?.podcast}</Podcast>
+          </Metadata>
+          <TimeContainer isHidden={isLightMode} color={color}>
             <Time variant="body3">{convertSecToMinAndSec(playedSeconds)}</Time>
             <Typography variant="body3">/</Typography>
             <Time variant="body3">{convertSecToMinAndSec(duration)}</Time>
           </TimeContainer>
         </Row>
-        <Row>
+        <Volume isHidden={isLightMode}>
           <VolumeContainer onClick={onVolumeToggle}>
             {muted ? (
-              <MuteIcon width={24} height={24} fill={color} />
+              <MuteIcon width={iconSize} height={iconSize} fill={color} />
             ) : (
-              <VolumeIcon width={24} height={24} fill={color} />
+              <VolumeIcon width={iconSize} height={iconSize} fill={color} />
             )}
           </VolumeContainer>
-        </Row>
+        </Volume>
       </Buttons>
       <Seek className={styles.audioPlayer}>
         <TimeTrack
@@ -124,14 +141,45 @@ const Row = styled.div`
   gap: 8px;
 `
 
-const TimeContainer = styled(Row)<{ color: string }>`
+const TimeContainer = styled(Row)<{ color: string; isHidden: boolean }>`
   gap: 8px;
 
   span {
     color: ${({ color }) => color || 'black'};
   }
+
+  @media (max-width: 768px) {
+    display: ${({ isHidden }) => (isHidden ? 'none' : 'flex')};
+  }
 `
 
 const Time = styled(Typography)`
   width: 32px;
 `
+
+const Metadata = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 8px;
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+`
+
+const Title = styled(Typography)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+`
+
+const Podcast = styled(Typography)`
+  font-size: 10px;
+`
+
+const Volume = styled(Row)<{ isHidden: boolean }>`
+  @media (max-width: 768px) {
+    display: ${({ isHidden }) => (isHidden ? 'none' : 'flex')};
+  }
+`