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,7 +22,8 @@ export const LiveMatch = ({ profile }: Props) => {
   } = useLiveMatch()
 
   return (
-    <Container marginRight={320}>
+    <Fragment>
+      <Container>
         <MatchProfileCard profile={profile} />
         <StreamPlayer
           url={matchUrl}
@@ -28,5 +32,7 @@ export const LiveMatch = ({ profile }: Props) => {
           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,24 +8,26 @@ 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 {
+const Item = styled.li`
+  margin-bottom: 10px;
+  width: 100%;
+  height: 50px;
+`
+
+export const MatchPlaylists = ({
   onSelect,
   playlists,
   selectedMathPlaylist,
-  } = props
-
-  return (
+}: Props) => (
   <List>
     {
       map(playlists, (playlist) => (
@@ -33,7 +35,7 @@ export const MatchPlaylists = (props: Props) => {
           <PlayButton
             duration={playlist.duration}
             active={isEqual(playlist, selectedMathPlaylist)}
-              onClick={() => onSelect(playlist)}
+            onClick={() => onSelect?.(playlist)}
           >
             <T9n t={playlist.lexic} />
           </PlayButton>
@@ -41,5 +43,4 @@ export const MatchPlaylists = (props: Props) => {
       ))
     }
   </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;