fix(#219): fixed play button style

src/features/StreamPlayer/index.tsx

@@ -143,6 +143,7 @@ export const StreamPlayer = (props: Props) => {
             : <Backward size='lg' onClick={rewindBackward}>{REWIND_SECONDS}</Backward>}
           <PlayStop
             size='lg'
+            fullWidth
             marginRight={0}
             playing={playing}
             onClickCapture={() => {

src/features/StreamPlayer/styled.tsx

@@ -149,6 +149,7 @@ const sizes = {
 }
 
 type PlayStopProps = {
+  fullWidth?: boolean,
   marginRight?: number,
   playing: boolean,
   size?: keyof typeof sizes,
@@ -163,10 +164,18 @@ export const PlayStop = styled(ButtonBase)<PlayStopProps>`
   )};
   ${({ size = 'sm' }) => (
     css`
-        width: 100%;
+        width: ${sizes[size]}px;
         height: ${sizes[size]}px;
       `
   )};
+
+  ${({ fullWidth }) => (
+    fullWidth
+      ? css`
+        width: 100%;
+      `
+      : '')};
+
   ${isMobileDevice
     ? css`
       width: ${sizes.sm}px;
@@ -257,10 +266,13 @@ type PlaybackTimeProps = {
 }
 
 export const PlaybackTime = styled.span<PlaybackTimeProps>`
-  width: ${({ width = 130 }) => `${width}px`};
+  width: ${({ width = 150 }) => `${width}px`};
   font-weight: 600;
   font-size: 16px;
   color: #fff;
+  white-space: nowrap;
+  margin-right: 10px;
+
   ${isMobileDevice
     ? css`
         margin-left: 5px;
@@ -325,6 +337,8 @@ export const ChaptersText = styled.span`
   font-size: 16px;
   color: #fff;
   text-align: center;
+  white-space: nowrap;
+
   ${isMobileDevice
     ? css`
       margin: 0 5px;