Ott 902 livematch start watch from (#348)

* feat(ott-902): add resume and changed config

* feat(ott-902): fix line

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

@@ -10,10 +10,12 @@ import {
 
 import { usePlayerProgressReporter } from 'features/MatchPage/hooks/usePlayerProgressReporter'
 import { useLastPlayPosition } from 'features/MatchPage/hooks/useLastPlayPosition'
+import { useUrlParam } from 'features/MatchPage/hooks/useUrlParam'
 
 export const useLiveMatch = () => {
   const { sportType } = useSportNameParam()
   const matchId = usePageId()
+  const resume = useUrlParam()
 
   const [liveVideos, setLiveVideos] = useState<LiveVideos>([])
 
@@ -24,6 +26,7 @@ export const useLiveMatch = () => {
 
   return {
     matchUrl: liveVideos[0] || '',
+    resume,
     ...usePlayerProgressReporter(),
     ...useLastPlayPosition(),
   }

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

@@ -15,10 +15,10 @@ type Props = {
 
 export const LiveMatch = ({ profile }: Props) => {
   const {
-    lastPlayPosition,
     matchUrl,
     onPlayerProgressChange,
     onPlayingChange,
+    resume,
   } = useLiveMatch()
 
   return (
@@ -29,7 +29,7 @@ export const LiveMatch = ({ profile }: Props) => {
           url={matchUrl}
           onPlayingChange={onPlayingChange}
           onProgressChange={onPlayerProgressChange}
-          resumeFrom={lastPlayPosition.second}
+          resumeFrom={resume}
         />
       </Container>
       <LiveMatchSidePlaylists />

src/features/MatchPage/hooks/useLastPlayPosition.tsx

@@ -1,11 +1,4 @@
-import {
-  useEffect,
-  useState,
-  useMemo,
-} from 'react'
-import { useLocation } from 'react-router'
-
-import isBoolean from 'lodash/isBoolean'
+import { useEffect, useState } from 'react'
 
 import type { LastPlayPosition } from 'requests'
 import { getMatchLastWatchSeconds } from 'requests'
@@ -16,24 +9,12 @@ import {
   useRequest,
 } from 'hooks'
 
-export const RESUME_KEY = 'resume'
-
-const readResumeParam = (search: string) => {
-  const params = new URLSearchParams(search)
-  const rawValue = params.get(RESUME_KEY)
-  if (!rawValue) return false
-
-  const value = JSON.parse(rawValue)
-  return isBoolean(value) && Boolean(value)
-}
-
 const initialPosition = {
   half: 0,
   second: 0,
 }
 
 export const useLastPlayPosition = () => {
-  const { search } = useLocation()
   const { sportType } = useSportNameParam()
   const matchId = usePageId()
   const [
@@ -45,16 +26,11 @@ export const useLastPlayPosition = () => {
     request: requestLastPlayPosition,
   } = useRequest(getMatchLastWatchSeconds)
 
-  const resume = useMemo(() => readResumeParam(search), [search])
-
   useEffect(() => {
-    if (resume) {
-      requestLastPlayPosition(sportType, matchId).then(setPosition)
-    }
+    requestLastPlayPosition(sportType, matchId).then(setPosition)
   }, [
     sportType,
     matchId,
-    resume,
     requestLastPlayPosition,
   ])
 

src/features/MatchPage/hooks/useUrlParam.tsx

@@ -0,0 +1,23 @@
+import { useMemo } from 'react'
+import { useLocation } from 'react-router'
+
+import isNumber from 'lodash/isNumber'
+
+export const RESUME_KEY = 'resume'
+
+const readResumeParam = (search: string) => {
+  const params = new URLSearchParams(search)
+  const rawValue = params.get(RESUME_KEY)
+  if (!rawValue) return undefined
+
+  const value = JSON.parse(rawValue)
+  return isNumber(value) ? value : 0
+}
+
+export const useUrlParam = () => {
+  const { search } = useLocation()
+
+  const resume = useMemo(() => readResumeParam(search), [search])
+
+  return resume
+}

src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx

@@ -47,13 +47,13 @@ export const LiveMatchPlaylist = () => {
     <List>
       <Item>
         <SimplePlaylistButton
-          to={`${sport}${PAGES.match}/${match.id}`}
+          to={`/${sport}${PAGES.match}/${match.id}`}
           title='watch_live_stream'
         />
       </Item>
       <Item>
         <SimplePlaylistButton
-          to={`${sport}${PAGES.match}/${match.id}`}
+          to={`/${sport}${PAGES.match}/${match.id}/?resume=${0}`}
           title='watch_from_beginning'
         />
       </Item>
@@ -61,7 +61,7 @@ export const LiveMatchPlaylist = () => {
         ? (
           <Item>
             <SimplePlaylistButton
-              to={`${sport}${PAGES.match}/${match.id}`}
+              to={`/${sport}${PAGES.match}/${match.id}/?resume=${lastPlayPosition.second}`}
               title='watch_from'
               startWatch={lastPlayPosition?.second}
             />

src/features/QueryParamsStorage/index.tsx

@@ -22,6 +22,11 @@ class QueryParamStorage implements Storage {
   constructor(historyArg: History) {
     this.history = historyArg
     this.urlParams = new URLSearchParams(this.history.location.search)
+    this.history.listen((location, action) => {
+      if (action !== 'REPLACE') {
+        this.urlParams = new URLSearchParams(location.search)
+      }
+    })
   }
 
   get entries() {

src/features/StreamPlayer/hooks/index.tsx

@@ -26,7 +26,7 @@ const initialState = {
 export type Props = {
   onPlayingChange: (playing: boolean) => void,
   onProgressChange: (seconds: number) => void,
-  resumeFrom: number,
+  resumeFrom?: number,
   url: string,
 }
 
@@ -36,7 +36,7 @@ export const useVideoPlayer = ({
   resumeFrom,
   url,
 }: Props) => {
-  const { hls, videoRef } = useHlsPlayer(url)
+  const { hls, videoRef } = useHlsPlayer(url, resumeFrom)
   const [{
     duration,
     loadedProgress,
@@ -46,8 +46,8 @@ export const useVideoPlayer = ({
     seek,
   }, setPlayerState] = useObjectState({
     ...initialState,
-    playedProgress: toMilliSeconds(resumeFrom),
-    seek: resumeFrom,
+    playedProgress: toMilliSeconds(resumeFrom || 0),
+    seek: resumeFrom || 0,
   })
 
   const startPlaying = useMemo(() => once(() => {

src/features/StreamPlayer/hooks/useHlsPlayer.tsx

@@ -5,10 +5,18 @@ import {
 } from 'react'
 import Hls from 'hls.js'
 
+import isNumber from 'lodash/isNumber'
+
 import { streamConfig } from '../config'
 
-export const useHlsPlayer = (src: string) => {
-  const hls = useMemo(() => new Hls(streamConfig), [])
+export const useHlsPlayer = (src: string, resumeFrom?: number) => {
+  const hls = useMemo(() => {
+    const newStreamConfig = { ...streamConfig }
+    if (isNumber(resumeFrom)) {
+      newStreamConfig.startPosition = resumeFrom
+    }
+    return new Hls(newStreamConfig)
+  }, [resumeFrom])
   const videoRef = useRef<HTMLVideoElement>(null)
 
   useEffect(() => {