fix(#747): new broadcast endpoint

src/features/AirPlay/index.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react'
 
-import includes from 'lodash/includes'
-
 import { usePageParams } from 'hooks/usePageParams'
 
 import { API_ROOT } from 'config'
@@ -19,9 +17,7 @@ export const AirPlay = ({ videoRef }: Props) => {
   const { profileId: matchId, sportType } = usePageParams()
 
   useEffect(() => {
-    const baseUrl = includes(videoRef?.current?.src, '.m3u8')
+    const baseUrl = `${API_ROOT}/v1/broadcasts/${sportType}/${matchId}/master.m3u8?access_token=${readToken()}`
-      ? `${API_ROOT}/video/chromecast/stream/${sportType}/${matchId}.m3u8?access_token=${readToken()}`
-      : videoRef?.current?.src!
 
     const video = videoRef.current!
     const airPlayBtn = document.getElementById('airPlay')!

src/features/ChromeCast/index.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 import {
   Fragment,
-  memo,
   useEffect,
   useRef,
   useState,
@@ -16,13 +15,9 @@ import { Container } from './styled'
 import { CastPlayer } from './CastVideos'
 import { useMatchPageStore } from '../MatchPage/store'
 
-type Props = {
-  src?: string,
-}
-
 const NO_DEVICES_AVAILABLE = 'NO_DEVICES_AVAILABLE'
 
-export const ChromeCast = memo(({ src } : Props) => {
+export const ChromeCast = () => {
   const [isCastAvailable, setIsCastAvailable] = useState(false)
 
   const { profile } = useMatchPageStore()
@@ -32,8 +27,7 @@ export const ChromeCast = memo(({ src } : Props) => {
   const GoogleCastLauncher = (document as any).createElement('google-cast-launcher')
   GoogleCastLauncher.setAttribute('id', 'castbutton')
 
-  const baseUrl = src ?? `${API_ROOT}/video/chromecast/stream/${sportType}/${matchId}.m3u8`
+  const baseUrl = `${API_ROOT}/v1/broadcasts/${sportType}/${matchId}/master.m3u8?access_token=${readToken()}`
-  const urlWithToken = (/\d.m3u8/.test(baseUrl)) ? `${baseUrl}?access_token=${readToken()}` : baseUrl
 
   const teamsInfo = `${profile?.team1.name_eng} - ${profile?.team2.name_eng}`
 
@@ -55,7 +49,7 @@ export const ChromeCast = memo(({ src } : Props) => {
 
     document.body.appendChild(script)
 
-    const castPlayer = new CastPlayer(urlWithToken, teamsInfo);
+    const castPlayer = new CastPlayer(baseUrl, teamsInfo);
     (window as any).__onGCastApiAvailable = (isAvailable: boolean) => {
       if (isAvailable) {
         castPlayer.initializeCastPlayer()
@@ -71,11 +65,11 @@ export const ChromeCast = memo(({ src } : Props) => {
       document.body.removeChild(script)
       setIsCastAvailable(false)
     }
-  }, [teamsInfo, urlWithToken])
+  }, [teamsInfo, baseUrl])
 
   return (
     <Fragment>
       {isCastAvailable && <Container ref={containerRef} />}
     </Fragment>
   )
-})
+}

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

@@ -39,7 +39,7 @@ export const useLiveMatch = () => {
   const { chapters } = useChapters({
     profile,
     selectedPlaylist,
-    url: `${API_ROOT}/video/stream/${sportType}/${matchId}.m3u8?access_token=${readToken()}`,
+    url: `${API_ROOT}/v1/broadcasts/${sportType}/${matchId}/master.m3u8?access_token=${readToken()}`,
   })
 
   const {

src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx

@@ -31,7 +31,6 @@ export const ControlsMobile = (controlsProps: {props: ControlsPropsExtended}) =>
     progressBarElement,
     selectedAudioTrack,
     selectedQuality,
-    src,
     videoQualities,
     videoRef,
   } = props
@@ -60,7 +59,7 @@ export const ControlsMobile = (controlsProps: {props: ControlsPropsExtended}) =>
             </LiveBtn>
           )}
           <AirPlay videoRef={videoRef} />
-          <ChromeCast src={src} />
+          <ChromeCast />
           <Settings
             onSelect={onQualitySelect}
             selectedQuality={selectedQuality}

src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx

@@ -56,7 +56,6 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
     rewindForward,
     selectedAudioTrack,
     selectedQuality,
-    src,
     togglePlaying,
     videoQualities,
     videoRef,
@@ -118,7 +117,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
               <T9n t='live' />
             </LiveBtn>
           )}
-          <ChromeCast src={src} />
+          <ChromeCast />
           {document.pictureInPictureEnabled && (
             <PiP videoRef={videoRef} />
           )}

src/features/StreamPlayer/config.tsx

@@ -1,17 +1,10 @@
 import type { HlsConfig } from 'hls.js'
 
-import { readToken } from 'helpers/token'
-
 import { isMobileDevice } from 'config/userAgent'
 
 export const streamConfig: Partial<HlsConfig> = {
   liveSyncDuration: 30,
   maxBufferLength: 30,
-  xhrSetup: (xhr, urlString) => {
-    const url = new URL(urlString)
-    url.searchParams.set('access_token', readToken() || '')
-    xhr.open('GET', url.toString())
-  },
 }
 
 export const REWIND_SECONDS = isMobileDevice ? 10 : 5