fix(#1701): increase and limitation scrubber

package-lock.json

@@ -14,7 +14,7 @@
         "babel-polyfill": "^6.26.0",
         "date-fns": "^2.14.0",
         "history": "^4.10.1",
-        "hls.js": "^0.14.15",
+        "hls.js": "^1.1.1",
         "lodash": "^4.17.15",
         "m3u8-parser": "^4.7.0",
         "oidc-client": "^1.11.5",
@@ -46,7 +46,6 @@
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^7.1.2",
         "@types/history": "^4.7.6",
-        "@types/hls.js": "^0.13.2",
         "@types/jest": "^26.0.15",
         "@types/lodash": "^4.14.154",
         "@types/node": "^12.0.0",
@@ -8659,12 +8658,6 @@
       "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==",
       "dev": true
     },
-    "node_modules/@types/hls.js": {
-      "version": "0.13.3",
-      "resolved": "https://registry.npmjs.org/@types/hls.js/-/hls.js-0.13.3.tgz",
-      "integrity": "sha512-Po8ZPCsAcPPuf5OODPEkb6cdWJ/w4BdX1veP7IIOc2WG0x1SW4GEQ1+FHKN1AMG2AePJfNUceJbh5PKtP92yRQ==",
-      "dev": true
-    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -17659,13 +17652,9 @@
       }
     },
     "node_modules/hls.js": {
-      "version": "0.14.17",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-0.14.17.tgz",
-      "integrity": "sha512-25A7+m6qqp6UVkuzUQ//VVh2EEOPYlOBg32ypr34bcPO7liBMOkKFvbjbCBfiPAOTA/7BSx1Dujft3Th57WyFg==",
-      "dependencies": {
-        "eventemitter3": "^4.0.3",
-        "url-toolkit": "^2.1.6"
-      }
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.2.0.tgz",
+      "integrity": "sha512-QIEQIUpBRhcpBMq3NA+/qozG8lbNfVekuX7kCMUlhiVu4382xFWsnwcuBe/CA4Gp/wB/pf2aRBaGRFlxh/FN8g=="
     },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
@@ -47026,9 +47015,9 @@
       }
     },
     "hls.js": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.1.5.tgz",
-      "integrity": "sha512-mQX5TSNtJEzGo5HPpvcQgCu+BWoKDQM6YYtg/KbgWkmVAcqOCvSTi0SuqG2ZJLXxIzdnFcKU2z7Mrw/YQWhPOA=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.2.0.tgz",
+      "integrity": "sha512-QIEQIUpBRhcpBMq3NA+/qozG8lbNfVekuX7kCMUlhiVu4382xFWsnwcuBe/CA4Gp/wB/pf2aRBaGRFlxh/FN8g=="
     },
     "hmac-drbg": {
       "version": "1.0.1",

src/features/MatchPage/index.tsx

@@ -81,8 +81,6 @@ const MatchPageComponent = () => {
           <Wrapper>
             {playFromOTT && (
               <LiveMatch
-                // events={events}
-                // profile={profile}
                 tournamentData={tournamentData}
               />
             )}

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

@@ -1,5 +1,3 @@
-import { RefObject } from 'react'
-
 import map from 'lodash/map'
 
 import type { Chapter } from '../../types'
@@ -18,25 +16,21 @@ type ChapterWithStyles = Chapter & {
 
 type Props = {
   chapters: Array<ChapterWithStyles>,
-  videoRef?: RefObject<HTMLVideoElement>,
 }
 
-export const Chapters = ({ chapters, videoRef }: Props) => {
-  const maxWidthProgressBar = videoRef?.current?.offsetWidth
-  return (
-    <ChapterList>
-      {map(chapters, ({
-        loaded,
-        played,
-        width,
-      }, index) => (
-        <ChapterContainer key={index} style={{ width: `${width}%` }}>
-          <LoadedProgress style={{ width: `${loaded}%` }} />
-          <PlayedProgress
-            style={{ maxWidth: `${maxWidthProgressBar ? `${maxWidthProgressBar - 20}px` : '100%'}`, width: `${played}%` }}
-          />
-        </ChapterContainer>
-      ))}
-    </ChapterList>
-  )
-}
+export const Chapters = ({ chapters }: Props) => (
+  <ChapterList>
+    {map(chapters, ({
+      loaded,
+      played,
+      width,
+    }, index) => (
+      <ChapterContainer key={index} style={{ width: `${width}%` }}>
+        <LoadedProgress style={{ width: `${loaded}%` }} />
+        <PlayedProgress
+          style={{ width: `${played}%` }}
+        />
+      </ChapterContainer>
+    ))}
+  </ChapterList>
+)

src/features/StreamPlayer/components/Chapters/styled.tsx

@@ -22,6 +22,7 @@ export const LoadedProgress = styled.div`
   z-index: 1;
   background-color: rgba(255, 255, 255, 0.6);
   height: 100%;
+  max-width: 100%;
 `
 
 export const PlayedProgress = styled.div`
@@ -29,4 +30,5 @@ export const PlayedProgress = styled.div`
   z-index: 2;
   background-color: #CC0000;
   height: 100%;
+  max-width: 100%;
 `

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

@@ -8,7 +8,7 @@ import { useProgressBar } from './hooks'
 import { ProgressBarList } from './styled'
 
 export const ProgressBar = (props: Props) => {
-  const { onPlayedProgressChange, videoRef } = props
+  const { onPlayedProgressChange } = props
   const progressBarRef = useSlider({ onChange: onPlayedProgressChange })
   const {
     calculatedChapters,
@@ -18,7 +18,7 @@ export const ProgressBar = (props: Props) => {
 
   return (
     <ProgressBarList ref={progressBarRef}>
-      <Chapters chapters={calculatedChapters} videoRef={videoRef} />
+      <Chapters chapters={calculatedChapters} />
       <Scrubber style={{ left: `${playedProgressInPercent}%` }}>
         <TimeTooltip time={time} />
       </Scrubber>

src/features/StreamPlayer/components/ProgressBar/styled.tsx

@@ -1,40 +1,13 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
+
 import { Wrapper } from '../TimeTooltip/styled'
 
 export const ProgressBarList = styled.div`
   flex-grow: 1;
   height: 4px;
   position: relative;
-  background-color: rgba(255, 255, 255, 0.3);
-  cursor: pointer;
-
-  ${isMobileDevice
-    ? css`
-      height: 1px;
-    `
-    : ''}
-`
-
-export const LoadedProgress = styled.div`
-  position: absolute;
-  z-index: 1;
-  background-color: rgba(255, 255, 255, 0.6);
-  height: 100%;
-`
-
-export const PlayedProgress = styled.div`
-  position: absolute;
-  z-index: 2;
-  background-color: #CC0000;
-  height: 100%;
-
-  ${isMobileDevice
-    ? css`
-      background-color: #FFFFFF;
-    `
-    : ''}
 `
 
 export const Scrubber = styled.div`
@@ -42,7 +15,7 @@ export const Scrubber = styled.div`
   outline: none;
   position: absolute;
   top: 0;
-  transform: translate(-50%, -38%);
+  transform: translate(-50%, -43%);
   z-index: 3;
   width: 18px;
   height: 18px;
@@ -53,12 +26,13 @@ export const Scrubber = styled.div`
   :hover ${Wrapper} {
     visibility: visible;
   }
-
+  
   ${isMobileDevice
     ? css`
-      width: 14px;
-      height: 14px;
-      background-color: #FFFFFF;
+      width: 30px;
+    height: 30px;
+    background-clip: padding-box;
+    border: 10px solid transparent;
     `
     : ''}
 `

src/features/StreamPlayer/index.tsx

@@ -153,7 +153,6 @@ export const StreamPlayer = (props: Props) => {
             onPlayedProgressChange={onProgressChange}
             playedProgress={playedProgress}
             loadedProgress={loadedProgress}
-            videoRef={videoRef}
           />
         </ControlsRow>
         <ControlsRow>