style: update global audio player style

This commit is contained in:
jinhojang6 2023-08-25 19:45:02 +09:00
parent 9e3fdd5174
commit 348105fe5a
3 changed files with 108 additions and 13 deletions

View File

@ -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>

View File

@ -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;
}
`

View File

@ -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')};
}
`