feat(ott-2237): add youtube player

package.json

@@ -32,6 +32,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
     "react-window": "^1.8.6",
+    "react-youtube": "^7.14.0",
     "screenfull": "^5.0.2",
     "styled-components": "^5.3.3",
     "workbox-core": "^5.1.4",

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

@@ -4,6 +4,7 @@ import type { Events } from 'requests/getMatchEvents'
 import type { MatchInfo } from 'requests/getMatchInfo'
 
 import { StreamPlayer } from 'features/StreamPlayer'
+import { YoutubePlayer } from 'features/StreamPlayer/components/YoutubePlayer'
 import { MatchSidePlaylists } from 'features/MatchSidePlaylists'
 
 import { Container } from '../../styled'
@@ -26,10 +27,12 @@ export const LiveMatch = ({ events, profile }: Props) => {
     streamUrl,
   } = useLiveMatch(profile)
 
+  const Player = profile?.youtube_link ? YoutubePlayer : StreamPlayer
+
   return (
     <Fragment>
       <Container>
-        <StreamPlayer
+        <Player
           onPlayingChange={onPlayingChange}
           onProgressChange={onPlayerProgressChange}
           profile={profile}

src/features/StreamPlayer/components/YoutubePlayer/index.tsx

@@ -0,0 +1,43 @@
+import YouTube from 'react-youtube'
+
+import { PlayerWrapper } from '../../styled'
+import { useVideoPlayer, Props } from '../../hooks'
+
+export const YoutubePlayer = (props: Props) => {
+  const { profile } = props
+
+  const {
+    onMouseMove,
+    onPlayerClick,
+    onTouchEnd,
+    onTouchStart,
+    playing,
+    wrapperRef,
+  } = useVideoPlayer(props)
+
+  const youtube_link = profile?.youtube_link || ''
+  const key = youtube_link.slice(32, youtube_link.length)
+
+  return (
+    <PlayerWrapper
+      ref={wrapperRef}
+      playing={playing}
+      onClick={onPlayerClick}
+      onMouseMove={onMouseMove}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+    >
+      <YouTube
+        videoId={key}
+        opts={{
+          height: String(wrapperRef.current?.clientHeight),
+          playerVars: {
+            autoplay: 1,
+            modestbranding: 1,
+          },
+          width: String(wrapperRef.current?.clientWidth),
+        }}
+      />
+    </PlayerWrapper>
+  )
+}

src/requests/getMatchInfo.tsx

@@ -32,6 +32,7 @@ export type MatchInfo = {
     name_eng: string,
     name_rus: string,
   },
+  youtube_link?: string,
 } | null
 
 export const getMatchInfo = (sportId: number, matchId: number): Promise<MatchInfo> => {