From 348105fe5aacf46bdac6b3d654be57e11b3244c8 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 25 Aug 2023 19:45:02 +0900 Subject: [PATCH] style: update global audio player style --- .../Header/Episode.SimplecastPlayer.tsx | 6 +- .../GlobalAudioPlayer/GlobalAudioPlayer.tsx | 51 +++++++++++++-- .../LpePlayer/Controls/Controls.tsx | 64 ++++++++++++++++--- 3 files changed, 108 insertions(+), 13 deletions(-) diff --git a/src/components/Episode/Header/Episode.SimplecastPlayer.tsx b/src/components/Episode/Header/Episode.SimplecastPlayer.tsx index fd90e24..07eb6b1 100644 --- a/src/components/Episode/Header/Episode.SimplecastPlayer.tsx +++ b/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} /> diff --git a/src/components/GlobalAudioPlayer/GlobalAudioPlayer.tsx b/src/components/GlobalAudioPlayer/GlobalAudioPlayer.tsx index 87af732..15b5398 100644 --- a/src/components/GlobalAudioPlayer/GlobalAudioPlayer.tsx +++ b/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(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, + }, }} /> console.log('onBuffer')} // onSeek={(e) => console.log('onSeek', e)} // onError={(e) => console.log('onError', e)} + playerType={PlayerType.GLOBAL} /> {!!epState.value.coverImage && ( - {epState.value.coverImage.alt}{epState.value.title} {epState.value.podcast} + + state.set((prev) => ({ ...prev, isEnabled: false }))} + /> + ) @@ -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; + } ` diff --git a/src/components/LpePlayer/Controls/Controls.tsx b/src/components/LpePlayer/Controls/Controls.tsx index 079a923..3f0157f 100644 --- a/src/components/LpePlayer/Controls/Controls.tsx +++ b/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 ( {playing ? ( - + ) : ( - + )} - + + {props.metadata?.title} + {props.metadata?.podcast} + + / - + {muted ? ( - + ) : ( - + )} - + ` +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')}; + } +`