From 70cbe4e041ea3126ceaf6b056747243b3210514a Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Mon, 8 Aug 2022 15:42:47 +0400 Subject: [PATCH] fix(#1701): increase and limitation scrubber --- package-lock.json | 25 ++++-------- src/features/MatchPage/index.tsx | 2 - .../components/Chapters/index.tsx | 38 ++++++++---------- .../components/Chapters/styled.tsx | 2 + .../components/ProgressBar/index.tsx | 4 +- .../components/ProgressBar/styled.tsx | 40 ++++--------------- src/features/StreamPlayer/index.tsx | 1 - 7 files changed, 34 insertions(+), 78 deletions(-) diff --git a/package-lock.json b/package-lock.json index b61e1f82..7ad00beb 100644 --- a/package-lock.json +++ b/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", diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx index 6b3960d5..eb2fd7c0 100644 --- a/src/features/MatchPage/index.tsx +++ b/src/features/MatchPage/index.tsx @@ -81,8 +81,6 @@ const MatchPageComponent = () => { {playFromOTT && ( )} diff --git a/src/features/StreamPlayer/components/Chapters/index.tsx b/src/features/StreamPlayer/components/Chapters/index.tsx index 39d72dd4..0a8182b6 100644 --- a/src/features/StreamPlayer/components/Chapters/index.tsx +++ b/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, - videoRef?: RefObject, } -export const Chapters = ({ chapters, videoRef }: Props) => { - const maxWidthProgressBar = videoRef?.current?.offsetWidth - return ( - - {map(chapters, ({ - loaded, - played, - width, - }, index) => ( - - - - - ))} - - ) -} +export const Chapters = ({ chapters }: Props) => ( + + {map(chapters, ({ + loaded, + played, + width, + }, index) => ( + + + + + ))} + +) diff --git a/src/features/StreamPlayer/components/Chapters/styled.tsx b/src/features/StreamPlayer/components/Chapters/styled.tsx index 0caa93a3..7a20409c 100644 --- a/src/features/StreamPlayer/components/Chapters/styled.tsx +++ b/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%; ` diff --git a/src/features/StreamPlayer/components/ProgressBar/index.tsx b/src/features/StreamPlayer/components/ProgressBar/index.tsx index b2897fcd..741f09ea 100644 --- a/src/features/StreamPlayer/components/ProgressBar/index.tsx +++ b/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 ( - + diff --git a/src/features/StreamPlayer/components/ProgressBar/styled.tsx b/src/features/StreamPlayer/components/ProgressBar/styled.tsx index 7eacc35e..b68173be 100644 --- a/src/features/StreamPlayer/components/ProgressBar/styled.tsx +++ b/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; ` : ''} ` diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx index 19605c0e..67bcec54 100644 --- a/src/features/StreamPlayer/index.tsx +++ b/src/features/StreamPlayer/index.tsx @@ -153,7 +153,6 @@ export const StreamPlayer = (props: Props) => { onPlayedProgressChange={onProgressChange} playedProgress={playedProgress} loadedProgress={loadedProgress} - videoRef={videoRef} />