From f791375d4280f18c2aa4ed09ed37d472e1198789 Mon Sep 17 00:00:00 2001 From: sylenien Date: Thu, 4 Aug 2022 16:20:06 +0200 Subject: [PATCH] fix(ui/player): refactor older files --- frontend/app/components/Session/LivePlayer.js | 22 +++++++++++-------- .../StatedScreen/StatedScreen.ts | 2 +- frontend/app/player/Player.ts | 17 +++++++------- 3 files changed, 23 insertions(+), 18 deletions(-) diff --git a/frontend/app/components/Session/LivePlayer.js b/frontend/app/components/Session/LivePlayer.js index 5793e2d52..b26e80923 100644 --- a/frontend/app/components/Session/LivePlayer.js +++ b/frontend/app/components/Session/LivePlayer.js @@ -16,13 +16,20 @@ import PlayerBlockHeader from '../Session_/PlayerBlockHeader'; import PlayerBlock from '../Session_/PlayerBlock'; import styles from '../Session_/session.module.css'; - const InitLoader = connectPlayer(state => ({ loading: !state.initialized }))(Loader); - -function LivePlayer ({ session, toggleFullscreen, closeBottomBlock, fullscreen, jwt, loadingCredentials, assistCredendials, request, isEnterprise, hasErrors }) { +function LivePlayer ({ + session, + toggleFullscreen, + closeBottomBlock, + fullscreen, + loadingCredentials, + assistCredendials, + request, + isEnterprise, +}) { useEffect(() => { if (!loadingCredentials) { initPlayer(session, assistCredendials, true); @@ -47,7 +54,6 @@ function LivePlayer ({ session, toggleFullscreen, closeBottomBlock, fullscreen, } const [activeTab, setActiveTab] = useState(''); - return ( @@ -62,19 +68,17 @@ function LivePlayer ({ session, toggleFullscreen, closeBottomBlock, fullscreen, export default withRequest({ initialData: null, - endpoint: '/assist/credentials', - dataWrapper: data => data, - dataName: 'assistCredendials', + endpoint: '/assist/credentials', + dataWrapper: data => data, + dataName: 'assistCredendials', loadingName: 'loadingCredentials', })(withPermissions(['ASSIST_LIVE'], '', true)(connect( state => { return { session: state.getIn([ 'sessions', 'current' ]), showAssist: state.getIn([ 'sessions', 'showChatWindow' ]), - jwt: state.get('jwt'), fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]), isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee', - hasErrors: !!state.getIn([ 'sessions', 'errors' ]), } }, { toggleFullscreen, closeBottomBlock }, diff --git a/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts b/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts index 177419f35..29fead989 100644 --- a/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts +++ b/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts @@ -81,7 +81,7 @@ export default class StatedScreen extends Screen { const { markedTargets } = getState(); if (markedTargets) { update({ - markedTargets: markedTargets.map(mt => ({ + markedTargets: markedTargets.map((mt: any) => ({ ...mt, boundingRect: this.calculateRelativeBoundingRect(mt.el), })), diff --git a/frontend/app/player/Player.ts b/frontend/app/player/Player.ts index 2b1d0b405..c7f37c0ca 100644 --- a/frontend/app/player/Player.ts +++ b/frontend/app/player/Player.ts @@ -1,11 +1,12 @@ import { goTo as listsGoTo } from './lists'; import { update, getState } from './store'; -import MessageDistributor, { INITIAL_STATE as SUPER_INITIAL_STATE, State as SuperState } from './MessageDistributor/MessageDistributor'; +import MessageDistributor, { INITIAL_STATE as SUPER_INITIAL_STATE } from './MessageDistributor/MessageDistributor'; const fps = 60; const performance = window.performance || { now: Date.now.bind(Date) }; const requestAnimationFrame = window.requestAnimationFrame || + // @ts-ignore window.webkitRequestAnimationFrame || // @ts-ignore window.mozRequestAnimationFrame || @@ -13,7 +14,7 @@ const requestAnimationFrame = window.oRequestAnimationFrame || // @ts-ignore window.msRequestAnimationFrame || - (callback => window.setTimeout(() => { callback(performance.now()); }, 1000 / fps)); + ((callback: (args: any) => void) => window.setTimeout(() => { callback(performance.now()); }, 1000 / fps)); const cancelAnimationFrame = window.cancelAnimationFrame || // @ts-ignore @@ -71,7 +72,7 @@ export default class Player extends MessageDistributor { let prevTime = getState().time; let animationPrevTime = performance.now(); - const nextFrame = (animationCurrentTime) => { + const nextFrame = (animationCurrentTime: number) => { const { speed, skip, @@ -91,7 +92,7 @@ export default class Player extends MessageDistributor { let time = prevTime + diffTime; - const skipInterval = skip && skipIntervals.find(si => si.contains(time)); // TODO: good skip by messages + const skipInterval = skip && skipIntervals.find((si: Node) => si.contains(time)); // TODO: good skip by messages if (skipInterval) time = skipInterval.end; const fmt = super.getFirstMessageTime(); @@ -151,7 +152,7 @@ export default class Player extends MessageDistributor { } } - jump(time = getState().time, index) { + jump(time = getState().time, index: number) { const { live } = getState(); if (live) return; @@ -176,7 +177,7 @@ export default class Player extends MessageDistributor { update({ skip }); } - toggleInspectorMode(flag, clickCallback) { + toggleInspectorMode(flag: boolean, clickCallback?: (args: any) => void) { if (typeof flag !== 'boolean') { const { inspectorMode } = getState(); flag = !inspectorMode; @@ -197,7 +198,7 @@ export default class Player extends MessageDistributor { this.setMarkedTargets(targets); } - activeTarget(index) { + activeTarget(index: number) { this.setActiveTarget(index); } @@ -219,7 +220,7 @@ export default class Player extends MessageDistributor { update({ autoplay }); } - toggleEvents(shouldShow = undefined) { + toggleEvents(shouldShow?: boolean) { const showEvents = shouldShow || !getState().showEvents; localStorage.setItem(SHOW_EVENTS_STORAGE_KEY, `${showEvents}`); update({ showEvents });