feat(906): live match side playlist (#337)

src/features/MatchPage/components/LiveMatch/index.tsx

@@ -1,9 +1,12 @@
+import { Fragment } from 'react'
+
 import type { MatchInfo } from 'requests'
 
 import { StreamPlayer } from 'features/StreamPlayer'
 
 import { useLiveMatch } from './hooks'
 import { MatchProfileCard } from '../MatchProfileCard'
+import { LiveMatchSidePlaylists } from '../LiveMatchSidePlaylists'
 import { Container } from '../../styled'
 
 type Props = {
@@ -19,14 +22,17 @@ export const LiveMatch = ({ profile }: Props) => {
   } = useLiveMatch()
 
   return (
-    <Container marginRight={320}>
-      <MatchProfileCard profile={profile} />
-      <StreamPlayer
-        url={matchUrl}
-        onPlayingChange={onPlayingChange}
-        onProgressChange={onPlayerProgressChange}
-        resumeFrom={lastPlayPosition.second}
-      />
-    </Container>
+    <Fragment>
+      <Container>
+        <MatchProfileCard profile={profile} />
+        <StreamPlayer
+          url={matchUrl}
+          onPlayingChange={onPlayingChange}
+          onProgressChange={onPlayerProgressChange}
+          resumeFrom={lastPlayPosition.second}
+        />
+      </Container>
+      <LiveMatchSidePlaylists />
+    </Fragment>
   )
 }

src/features/MatchPage/components/LiveMatchSidePlaylists/index.tsx

@@ -0,0 +1,27 @@
+import type { MatchPlaylistOption } from 'features/MatchPage/types'
+import { PlaylistTypes } from 'features/MatchPage/types'
+import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
+
+import { Wrapper, Container } from 'features/MatchSidePlaylists/styled'
+import { MatchPlaylists } from 'features/MatchSidePlaylists/components/MatchPlaylists'
+
+const fullGamePlaylist: MatchPlaylistOption = {
+  data: [],
+  id: FULL_GAME_KEY,
+  lexic: FULL_GAME_KEY,
+  type: PlaylistTypes.MATCH,
+}
+
+const selectedPlaylist = fullGamePlaylist
+const playlists = [fullGamePlaylist]
+
+export const LiveMatchSidePlaylists = () => (
+  <Wrapper>
+    <Container>
+      <MatchPlaylists
+        playlists={playlists}
+        selectedMathPlaylist={selectedPlaylist}
+      />
+    </Container>
+  </Wrapper>
+)

src/features/MatchPage/styled.tsx

@@ -16,17 +16,12 @@ export const Wrapper = styled.div`
   }
 `
 
-type ContainerProps = {
-  marginRight?: number,
-}
-
-export const Container = styled.div<ContainerProps>`
+export const Container = styled.div`
   max-width: 2090px;
   max-height: 896px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  margin-right: ${({ marginRight = 0 }) => `${marginRight}px`};
 
   @media ${devices.laptop} {
     max-width: 80%;

src/features/MatchPage/types.tsx

@@ -10,7 +10,7 @@ export type MatchPlaylistOption = {
   data: Episodes,
   duration?: number,
   id: string,
-  lexic: number,
+  lexic: number | string,
   type: PlaylistTypes.MATCH,
 }
 

src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx

@@ -8,38 +8,39 @@ import { T9n } from 'features/T9n'
 import { isEqual } from 'features/MatchSidePlaylists'
 
 import { PlayButton } from '../PlayButton'
-import { Item } from '../../styled'
 
 type Props = {
-  onSelect: (selectedMathPlaylist: PlaylistOption) => void,
-  playlists?: MatchPlaylistOptions,
+  onSelect?: (selectedMathPlaylist: PlaylistOption) => void,
+  playlists: MatchPlaylistOptions,
   selectedMathPlaylist?: PlaylistOption,
 }
 
 const List = styled.ul``
 
-export const MatchPlaylists = (props: Props) => {
-  const {
-    onSelect,
-    playlists,
-    selectedMathPlaylist,
-  } = props
-
-  return (
-    <List>
-      {
-        map(playlists, (playlist) => (
-          <Item key={playlist.id}>
-            <PlayButton
-              duration={playlist.duration}
-              active={isEqual(playlist, selectedMathPlaylist)}
-              onClick={() => onSelect(playlist)}
-            >
-              <T9n t={playlist.lexic} />
-            </PlayButton>
-          </Item>
-        ))
-      }
-    </List>
-  )
-}
+const Item = styled.li`
+  margin-bottom: 10px;
+  width: 100%;
+  height: 50px;
+`
+
+export const MatchPlaylists = ({
+  onSelect,
+  playlists,
+  selectedMathPlaylist,
+}: Props) => (
+  <List>
+    {
+      map(playlists, (playlist) => (
+        <Item key={playlist.id}>
+          <PlayButton
+            duration={playlist.duration}
+            active={isEqual(playlist, selectedMathPlaylist)}
+            onClick={() => onSelect?.(playlist)}
+          >
+            <T9n t={playlist.lexic} />
+          </PlayButton>
+        </Item>
+      ))
+    }
+  </List>
+)

src/features/MatchSidePlaylists/styled.tsx

@@ -50,12 +50,6 @@ export const Button = styled.button<ButtonProps>`
   )}
 `
 
-export const Item = styled.li`
-  margin-bottom: 10px;
-  width: 100%;
-  height: 50px;
-`
-
 export const Title = styled.span`
   font-weight: 500;
   font-size: 20px;