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}>
+    <Fragment>
-      <MatchProfileCard profile={profile} />
+      <Container>
-      <StreamPlayer
+        <MatchProfileCard profile={profile} />
-        url={matchUrl}
+        <StreamPlayer
-        onPlayingChange={onPlayingChange}
+          url={matchUrl}
-        onProgressChange={onPlayerProgressChange}
+          onPlayingChange={onPlayingChange}
-        resumeFrom={lastPlayPosition.second}
+          onProgressChange={onPlayerProgressChange}
-      />
+          resumeFrom={lastPlayPosition.second}
-    </Container>
+        />
+      </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 = {
+export const Container = styled.div`
-  marginRight?: number,
-}
-
-export const Container = styled.div<ContainerProps>`
   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,
+  onSelect?: (selectedMathPlaylist: PlaylistOption) => void,
-  playlists?: MatchPlaylistOptions,
+  playlists: MatchPlaylistOptions,
   selectedMathPlaylist?: PlaylistOption,
 }
 
 const List = styled.ul``
 
-export const MatchPlaylists = (props: Props) => {
+const Item = styled.li`
-  const {
+  margin-bottom: 10px;
-    onSelect,
+  width: 100%;
-    playlists,
+  height: 50px;
-    selectedMathPlaylist,
+`
-  } = props
+
-
+export const MatchPlaylists = ({
-  return (
+  onSelect,
-    <List>
+  playlists,
-      {
+  selectedMathPlaylist,
-        map(playlists, (playlist) => (
+}: Props) => (
-          <Item key={playlist.id}>
+  <List>
-            <PlayButton
+    {
-              duration={playlist.duration}
+      map(playlists, (playlist) => (
-              active={isEqual(playlist, selectedMathPlaylist)}
+        <Item key={playlist.id}>
-              onClick={() => onSelect(playlist)}
+          <PlayButton
-            >
+            duration={playlist.duration}
-              <T9n t={playlist.lexic} />
+            active={isEqual(playlist, selectedMathPlaylist)}
-            </PlayButton>
+            onClick={() => onSelect?.(playlist)}
-          </Item>
+          >
-        ))
+            <T9n t={playlist.lexic} />
-      }
+          </PlayButton>
-    </List>
+        </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;