style: update simplecast player design
This commit is contained in:
jinhojang6
parent
eb5a40ba67
commit
78d4292368
|
|
@ -80,6 +80,7 @@ const SimplecastPlayer = ({
|
|||
onMouseUp: handleSeekMouseUp,
|
||||
onMouseDown: handleSeekMouseDown,
|
||||
}}
|
||||
allowFullScreen={true}
|
||||
color={'white'}
|
||||
/>
|
||||
</Controls>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import { LsdIcon } from '@acid-info/lsd-react'
|
||||
|
||||
export const FullscreenIcon = LsdIcon(
|
||||
(props) => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<g clip-path="url(#clip0_2418_8608)">
|
||||
<path
|
||||
d="M4 18C4 19.1 4.9 20 6 20H10V18H6V14H4V18ZM20 6C20 4.9 19.1 4 18 4H14V6H18V10H20V6ZM6 6H10V4H6C4.9 4 4 4.9 4 6V10H6V6ZM20 18V14H18V18H14V20H18C19.1 20 20 19.1 20 18Z"
|
||||
fill={props.fill || 'white'}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2418_8608">
|
||||
<rect width="24" height="24" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
),
|
||||
{ filled: true },
|
||||
)
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './FullscreenIcon'
|
||||
|
|
@ -3,17 +3,20 @@ import { LsdIcon } from '@acid-info/lsd-react'
|
|||
export const MuteIcon = LsdIcon(
|
||||
(props) => (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M9 6C8.99986 5.44142 8.84377 4.89396 8.54931 4.41929C8.25485 3.94462 7.83372 3.56159 7.33333 3.31333V4.78667L8.96667 6.42C8.98667 6.28667 9 6.14667 9 6ZM10.6667 6C10.6667 6.62667 10.5333 7.21333 10.3067 7.76L11.3133 8.76667C11.7663 7.91496 12.0022 6.96466 12 6C12 3.14667 10.0067 0.76 7.33333 0.153333V1.52667C9.26 2.1 10.6667 3.88667 10.6667 6ZM0.846667 0L0 0.846667L3.15333 4H0V8H2.66667L6 11.3333V6.84667L8.83333 9.68C8.38667 10.0267 7.88667 10.3 7.33333 10.4667V11.84C8.23551 11.6331 9.07751 11.2201 9.79333 10.6333L11.1533 12L12 11.1533L6 5.15333L0.846667 0ZM6 0.666667L4.60667 2.06L6 3.45333V0.666667Z"
|
||||
fill={props.fill}
|
||||
/>
|
||||
<g id="volume_off-16px">
|
||||
<path
|
||||
id="Vector"
|
||||
d="M11 8C10.9999 7.44142 10.8438 6.89396 10.5493 6.41929C10.2549 5.94462 9.83372 5.56159 9.33333 5.31333V6.78667L10.9667 8.42C10.9867 8.28667 11 8.14667 11 8ZM12.6667 8C12.6667 8.62667 12.5333 9.21333 12.3067 9.76L13.3133 10.7667C13.7663 9.91496 14.0022 8.96466 14 8C14 5.14667 12.0067 2.76 9.33333 2.15333V3.52667C11.26 4.1 12.6667 5.88667 12.6667 8ZM2.84667 2L2 2.84667L5.15333 6H2V10H4.66667L8 13.3333V8.84667L10.8333 11.68C10.3867 12.0267 9.88667 12.3 9.33333 12.4667V13.84C10.2355 13.6331 11.0775 13.2201 11.7933 12.6333L13.1533 14L14 13.1533L8 7.15333L2.84667 2ZM8 2.66667L6.60667 4.06L8 5.45333V2.66667Z"
|
||||
fill={props.fill || 'white'}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
),
|
||||
{ filled: true },
|
||||
|
|
|
|||
|
|
@ -3,16 +3,24 @@ import { LsdIcon } from '@acid-info/lsd-react'
|
|||
export const VolumeIcon = LsdIcon(
|
||||
(props) => (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M0 3.84667V7.84667H2.66667L6 11.18V0.513333L2.66667 3.84667H0ZM9 5.84667C9 4.66667 8.32 3.65333 7.33333 3.16V8.52667C8.32 8.04 9 7.02667 9 5.84667ZM7.33333 0V1.37333C9.26 1.94667 10.6667 3.73333 10.6667 5.84667C10.6667 7.96 9.26 9.74667 7.33333 10.32V11.6933C10.0067 11.0867 12 8.7 12 5.84667C12 2.99333 10.0067 0.606667 7.33333 0V0Z"
|
||||
fill={props.fill}
|
||||
/>
|
||||
<g clip-path="url(#clip0_2418_8612)">
|
||||
<path
|
||||
d="M3 9.00001V15H7L12 20V4.00001L7 9.00001H3ZM16.5 12C16.5 10.23 15.48 8.71001 14 7.97001V16.02C15.48 15.29 16.5 13.77 16.5 12ZM14 3.23001V5.29001C16.89 6.15001 19 8.83001 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.86 21 16.28 21 12C21 7.72001 18.01 4.14001 14 3.23001Z"
|
||||
fill={props.fill || 'white'}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2418_8612">
|
||||
<rect width="24" height="24" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
),
|
||||
{ filled: true },
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
ControlsTimeTrackProps,
|
||||
TimeTrack,
|
||||
} from '@/components/LpePlayer/Controls/Controls.TimeTrack'
|
||||
import { FullscreenIcon } from '@/components/Icons/FullscreenIcon'
|
||||
|
||||
export interface LpeAudioPlayerControlsProps {
|
||||
duration: number
|
||||
|
|
@ -21,7 +22,7 @@ export interface LpeAudioPlayerControlsProps {
|
|||
onPause: () => void
|
||||
onPlay: () => void
|
||||
onVolumeToggle: () => void
|
||||
|
||||
allowFullScreen?: boolean
|
||||
color?: string
|
||||
|
||||
timeTrackProps: ControlsTimeTrackProps
|
||||
|
|
@ -38,6 +39,7 @@ export const LpeAudioPlayerControls = (props: LpeAudioPlayerControlsProps) => {
|
|||
onPlay,
|
||||
color = 'rgba(var(--lsd-surface-secondary), 1)',
|
||||
onVolumeToggle,
|
||||
allowFullScreen = false,
|
||||
timeTrackProps: { onValueChange, onMouseDown, onMouseUp },
|
||||
} = props
|
||||
|
||||
|
|
@ -46,7 +48,11 @@ export const LpeAudioPlayerControls = (props: LpeAudioPlayerControlsProps) => {
|
|||
<Buttons>
|
||||
<Row>
|
||||
<PlayPause onClick={playing ? onPause : onPlay}>
|
||||
{playing ? <PauseIcon fill={color} /> : <PlayIcon fill={color} />}
|
||||
{playing ? (
|
||||
<PauseIcon width={24} height={24} fill={color} />
|
||||
) : (
|
||||
<PlayIcon width={24} height={24} fill={color} />
|
||||
)}
|
||||
</PlayPause>
|
||||
<TimeContainer color={color}>
|
||||
<Time variant="body3">{convertSecToMinAndSec(playedSeconds)}</Time>
|
||||
|
|
@ -54,9 +60,16 @@ export const LpeAudioPlayerControls = (props: LpeAudioPlayerControlsProps) => {
|
|||
<Time variant="body3">{convertSecToMinAndSec(duration)}</Time>
|
||||
</TimeContainer>
|
||||
</Row>
|
||||
<VolumeContainer onClick={onVolumeToggle}>
|
||||
{muted ? <MuteIcon fill={color} /> : <VolumeIcon fill={color} />}
|
||||
</VolumeContainer>
|
||||
<Row>
|
||||
<VolumeContainer onClick={onVolumeToggle}>
|
||||
{muted ? (
|
||||
<MuteIcon width={24} height={24} fill={color} />
|
||||
) : (
|
||||
<VolumeIcon width={24} height={24} fill={color} />
|
||||
)}
|
||||
</VolumeContainer>
|
||||
<FullscreenIcon width={24} height={24} fill={color} />
|
||||
</Row>
|
||||
</Buttons>
|
||||
<Seek className={styles.audioPlayer}>
|
||||
<TimeTrack
|
||||
|
|
@ -103,7 +116,6 @@ const PlayPause = styled.button`
|
|||
justify-content: center;
|
||||
border: none;
|
||||
background: none;
|
||||
margin-right: 8px;
|
||||
padding: 0;
|
||||
`
|
||||
|
||||
|
|
@ -111,6 +123,7 @@ const Row = styled.div`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
white-space: pre-wrap;
|
||||
gap: 8px;
|
||||
`
|
||||
|
||||
const TimeContainer = styled(Row)<{ color: string }>`
|
||||
|
|
|
|||
Loading…
Reference in New Issue