From 78d42923683f50429bae6f376336f37ba7237ebb Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 24 Aug 2023 03:40:20 +0900
Subject: [PATCH] style: update simplecast player design

---
 .../Header/Episode.SimplecastPlayer.tsx       |  1 +
 .../Icons/FullscreenIcon/FullscreenIcon.tsx   | 27 +++++++++++++++++++
 src/components/Icons/FullscreenIcon/index.ts  |  1 +
 src/components/Icons/MuteIcon/MuteIcon.tsx    | 17 +++++++-----
 .../Icons/VolumeIcon/VolumeIcon.tsx           | 22 ++++++++++-----
 .../LpePlayer/Controls/Controls.tsx           | 25 ++++++++++++-----
 6 files changed, 73 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Icons/FullscreenIcon/FullscreenIcon.tsx
 create mode 100644 src/components/Icons/FullscreenIcon/index.ts

diff --git a/src/components/Episode/Header/Episode.SimplecastPlayer.tsx b/src/components/Episode/Header/Episode.SimplecastPlayer.tsx
index ee986a7..fd90e24 100644
--- a/src/components/Episode/Header/Episode.SimplecastPlayer.tsx
+++ b/src/components/Episode/Header/Episode.SimplecastPlayer.tsx
@@ -80,6 +80,7 @@ const SimplecastPlayer = ({
               onMouseUp: handleSeekMouseUp,
               onMouseDown: handleSeekMouseDown,
             }}
+            allowFullScreen={true}
             color={'white'}
           />
         </Controls>
diff --git a/src/components/Icons/FullscreenIcon/FullscreenIcon.tsx b/src/components/Icons/FullscreenIcon/FullscreenIcon.tsx
new file mode 100644
index 0000000..ac62645
--- /dev/null
+++ b/src/components/Icons/FullscreenIcon/FullscreenIcon.tsx
@@ -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 },
+)
diff --git a/src/components/Icons/FullscreenIcon/index.ts b/src/components/Icons/FullscreenIcon/index.ts
new file mode 100644
index 0000000..ed19f1b
--- /dev/null
+++ b/src/components/Icons/FullscreenIcon/index.ts
@@ -0,0 +1 @@
+export * from './FullscreenIcon'
diff --git a/src/components/Icons/MuteIcon/MuteIcon.tsx b/src/components/Icons/MuteIcon/MuteIcon.tsx
index 6f08732..c0e3c55 100644
--- a/src/components/Icons/MuteIcon/MuteIcon.tsx
+++ b/src/components/Icons/MuteIcon/MuteIcon.tsx
@@ -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 },
diff --git a/src/components/Icons/VolumeIcon/VolumeIcon.tsx b/src/components/Icons/VolumeIcon/VolumeIcon.tsx
index 4916435..f514c6f 100644
--- a/src/components/Icons/VolumeIcon/VolumeIcon.tsx
+++ b/src/components/Icons/VolumeIcon/VolumeIcon.tsx
@@ -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 },
diff --git a/src/components/LpePlayer/Controls/Controls.tsx b/src/components/LpePlayer/Controls/Controls.tsx
index e009e3b..23645c0 100644
--- a/src/components/LpePlayer/Controls/Controls.tsx
+++ b/src/components/LpePlayer/Controls/Controls.tsx
@@ -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 }>`