From 0e0f24454ec77d16a1aaa3ad9c83e180ae207e9b Mon Sep 17 00:00:00 2001 From: Rakov Date: Wed, 16 Aug 2023 12:36:01 +0300 Subject: [PATCH] fix(#747): new broadcast endpoint --- src/features/AirPlay/index.tsx | 6 +----- src/features/ChromeCast/index.tsx | 16 +++++----------- .../components/LiveMatch/hooks/index.tsx | 2 +- .../Controls/Components/ControlsMobile/index.tsx | 3 +-- .../Controls/Components/ControlsWeb/index.tsx | 3 +-- src/features/StreamPlayer/config.tsx | 7 ------- 6 files changed, 9 insertions(+), 28 deletions(-) diff --git a/src/features/AirPlay/index.tsx b/src/features/AirPlay/index.tsx index 627fe641..9dcae381 100644 --- a/src/features/AirPlay/index.tsx +++ b/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') - ? `${API_ROOT}/video/chromecast/stream/${sportType}/${matchId}.m3u8?access_token=${readToken()}` - : videoRef?.current?.src! + const baseUrl = `${API_ROOT}/v1/broadcasts/${sportType}/${matchId}/master.m3u8?access_token=${readToken()}` const video = videoRef.current! const airPlayBtn = document.getElementById('airPlay')! diff --git a/src/features/ChromeCast/index.tsx b/src/features/ChromeCast/index.tsx index 0a038712..38408729 100644 --- a/src/features/ChromeCast/index.tsx +++ b/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 urlWithToken = (/\d.m3u8/.test(baseUrl)) ? `${baseUrl}?access_token=${readToken()}` : baseUrl + const baseUrl = `${API_ROOT}/v1/broadcasts/${sportType}/${matchId}/master.m3u8?access_token=${readToken()}` 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 ( {isCastAvailable && } ) -}) +} diff --git a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx index d2dc0c41..1d248d6d 100644 --- a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx +++ b/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 { diff --git a/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx index 45982564..ea87d84d 100644 --- a/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx +++ b/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}) => )} - + rewindForward, selectedAudioTrack, selectedQuality, - src, togglePlaying, videoQualities, videoRef, @@ -118,7 +117,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) => )} - + {document.pictureInPictureEnabled && ( )} diff --git a/src/features/StreamPlayer/config.tsx b/src/features/StreamPlayer/config.tsx index eb585004..f1063bf4 100644 --- a/src/features/StreamPlayer/config.tsx +++ b/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 = { 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