From eef908648b1128319b6b00137f7cc7b26dd1d6c8 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 5 Jul 2021 12:22:17 +0530 Subject: [PATCH] feature(ui) - events toggle and duration counter --- .../AssistActions/AssistActions.tsx | 7 ++-- .../EventsToggleButton/EventsToggleButton.css | 7 ++++ .../EventsToggleButton/EventsToggleButton.tsx | 32 +++++++++++++++++++ .../Session/EventsToggleButton/index.js | 1 + frontend/app/components/Session/WebPlayer.js | 24 ++++++++++---- .../app/components/Session_/Player/Player.js | 6 +++- .../components/shared/SessionItem/Counter.tsx | 17 ++++++---- .../shared/SessionItem/SessionItem.js | 7 ++-- frontend/app/player/Player.ts | 9 ++++++ frontend/app/player/singletone.js | 2 ++ .../app/svg/icons/chevron-double-left.svg | 4 +++ .../app/svg/icons/chevron-double-right.svg | 4 +++ frontend/env.js | 4 +-- 13 files changed, 103 insertions(+), 21 deletions(-) create mode 100644 frontend/app/components/Session/EventsToggleButton/EventsToggleButton.css create mode 100644 frontend/app/components/Session/EventsToggleButton/EventsToggleButton.tsx create mode 100644 frontend/app/components/Session/EventsToggleButton/index.js create mode 100644 frontend/app/svg/icons/chevron-double-left.svg create mode 100644 frontend/app/svg/icons/chevron-double-right.svg diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx index c2327065f..e32df2298 100644 --- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx +++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx @@ -21,8 +21,11 @@ function AssistActions({ toggleChatWindow, userId, calling }: Props) { const [ localStream, setLocalStream ] = useState(null); const [ endCall, setEndCall ] = useState<()=>void>(()=>{}); - function onClose(stream) { - console.log("Closed") + useEffect(() => { + return endCall + }, []) + + function onClose(stream) { stream.getTracks().forEach(t=>t.stop()); } function onReject() { diff --git a/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.css b/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.css new file mode 100644 index 000000000..19eda2568 --- /dev/null +++ b/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.css @@ -0,0 +1,7 @@ +.wrapper { + background-color: rgba(255, 255, 255, 1); + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + padding: 5px; + box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.5); +} \ No newline at end of file diff --git a/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.tsx b/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.tsx new file mode 100644 index 000000000..55ebf9523 --- /dev/null +++ b/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { Icon, Popup } from 'UI' +import { connectPlayer, toggleEvents } from 'Player'; +import cn from 'classnames' +import stl from './EventsToggleButton.css' + +function EventsToggleButton({ showEvents, toggleEvents }) { + return ( + + + + } + content={ showEvents ? 'Hide Events' : 'Show Events' } + size="tiny" + inverted + position="bottom right" + /> + ) +} + +export default connectPlayer(state => ({ + showEvents: !state.showEvents +}), { toggleEvents })(EventsToggleButton) + diff --git a/frontend/app/components/Session/EventsToggleButton/index.js b/frontend/app/components/Session/EventsToggleButton/index.js new file mode 100644 index 000000000..b391f169d --- /dev/null +++ b/frontend/app/components/Session/EventsToggleButton/index.js @@ -0,0 +1 @@ +export { default } from './EventsToggleButton' \ No newline at end of file diff --git a/frontend/app/components/Session/WebPlayer.js b/frontend/app/components/Session/WebPlayer.js index 9cfa607a0..28183d9b4 100644 --- a/frontend/app/components/Session/WebPlayer.js +++ b/frontend/app/components/Session/WebPlayer.js @@ -8,13 +8,15 @@ import { init as initPlayer, clean as cleanPlayer, } from 'Player'; -import { Controls as PlayerControls } from 'Player'; +import { Controls as PlayerControls, toggleEvents } from 'Player'; +import cn from 'classnames' import PlayerBlockHeader from '../Session_/PlayerBlockHeader'; import EventsBlock from '../Session_/EventsBlock'; import PlayerBlock from '../Session_/PlayerBlock'; import styles from '../Session_/session.css'; +import EventsToggleButton from './EventsToggleButton'; @@ -28,6 +30,19 @@ const InitLoader = connectPlayer(state => ({ loading: !state.initialized }))(Loader); +const PlayerContentConnected = connectPlayer(state => ({ + showEvents: !state.showEvents +}), { toggleEvents })(PlayerContent); + + +function PlayerContent({ live, fullscreen, showEvents, toggleEvents }) { + return ( +
+ + { showEvents && !live && !fullscreen && } +
+ ) +} function WebPlayer ({ session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt }) { useEffect(() => { @@ -44,10 +59,7 @@ function WebPlayer ({ session, toggleFullscreen, closeBottomBlock, live, fullscr -
- - { !live && !fullscreen && } -
+ ); @@ -61,5 +73,5 @@ export default connect(state => ({ }), { toggleFullscreen, closeBottomBlock, -})(WebPlayer) +})(WebPlayer) diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js index eda7cac41..ff93a08cb 100644 --- a/frontend/app/components/Session_/Player/Player.js +++ b/frontend/app/components/Session_/Player/Player.js @@ -9,6 +9,7 @@ import { attach as attachPlayer, Controls as PlayerControls, connectPlayer } fro import Controls from './Controls'; import stl from './player.css'; import AutoplayTimer from '../AutoplayTimer'; +import EventsToggleButton from '../../Session/EventsToggleButton'; const ScreenWrapper = withOverlay()(React.memo(() =>
)); @@ -20,7 +21,8 @@ const ScreenWrapper = withOverlay()(React.memo(() =>
({ //session: state.getIn([ 'sessions', 'current' ]), @@ -105,6 +107,7 @@ export default class Player extends React.PureComponent { completed, autoplay, nextId, + live, } = this.props; return ( @@ -124,6 +127,7 @@ export default class Player extends React.PureComponent { // label="Esc" // /> } + {!live && !fullscreen && }
{ !removeOverlay &&
{ - setInterval(function() { - setCount(count + 1000) - }, 1000) - }, []) + if (!intervalId) { + intervalId = setInterval(() => { + setDuration(duration + 1000) + }, 1000) + } + return () => clearInterval(intervalId) + }, [duration]) return (
- {startTime && Duration.fromMillis(startTime + count).toFormat('m:ss')} + {startTime && Duration.fromMillis(duration).toFormat('m:ss')}
) } diff --git a/frontend/app/components/shared/SessionItem/SessionItem.js b/frontend/app/components/shared/SessionItem/SessionItem.js index 7ec36ef74..36a7f186a 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.js +++ b/frontend/app/components/shared/SessionItem/SessionItem.js @@ -89,7 +89,9 @@ export default class SessionItem extends React.PureComponent {
-
{ formattedDuration }
+
+ { live ? : formattedDuration } +
@@ -109,8 +111,7 @@ export default class SessionItem extends React.PureComponent {
)} - - { live && } + { live && }
diff --git a/frontend/app/player/Player.ts b/frontend/app/player/Player.ts index ed6c7720b..b835c7934 100644 --- a/frontend/app/player/Player.ts +++ b/frontend/app/player/Player.ts @@ -27,11 +27,13 @@ const SPEED_STORAGE_KEY = "__$player-speed$__"; const SKIP_STORAGE_KEY = "__$player-skip$__"; const SKIP_TO_ISSUE_STORAGE_KEY = "__$player-skip-to-issue$__"; const AUTOPLAY_STORAGE_KEY = "__$player-autoplay$__"; +const SHOW_EVENTS_STORAGE_KEY = "__$player-show-events$__"; const storedSpeed: number = parseInt(localStorage.getItem(SPEED_STORAGE_KEY) || "") ; const initialSpeed = [1,2,4,8,16].includes(storedSpeed) ? storedSpeed : 1; const initialSkip = !!localStorage.getItem(SKIP_STORAGE_KEY); const initialSkipToIssue = !!localStorage.getItem(SKIP_TO_ISSUE_STORAGE_KEY); const initialAutoplay = !!localStorage.getItem(AUTOPLAY_STORAGE_KEY); +const initialShowEvents = !!localStorage.getItem(SHOW_EVENTS_STORAGE_KEY); export const INITIAL_STATE: SuperState = { ...SUPER_INITIAL_STATE, @@ -50,6 +52,7 @@ export const INITIAL_NON_RESETABLE_STATE = { skipToIssue: initialSkipToIssue, autoplay: initialAutoplay, speed: initialSpeed, + showEvents: initialShowEvents } export default class Player extends MessageDistributor { @@ -197,6 +200,12 @@ export default class Player extends MessageDistributor { localStorage.setItem(AUTOPLAY_STORAGE_KEY, `${autoplay}`); update({ autoplay }); } + + toggleEvents() { + const showEvents = !getState().showEvents; + localStorage.setItem(SHOW_EVENTS_STORAGE_KEY, `${showEvents}`); + update({ showEvents }); + } _updateSpeed(speed: number) { localStorage.setItem(SPEED_STORAGE_KEY, `${speed}`); diff --git a/frontend/app/player/singletone.js b/frontend/app/player/singletone.js index 93d33dfbd..63865de91 100644 --- a/frontend/app/player/singletone.js +++ b/frontend/app/player/singletone.js @@ -61,6 +61,7 @@ export const toggleSkip = initCheck((...args) => instance.toggleSkip(...args)); export const toggleSkipToIssue = initCheck((...args) => instance.toggleSkipToIssue(...args)); export const toggleAutoplay = initCheck((...args) => instance.toggleAutoplay(...args)); export const toggleSpeed = initCheck((...args) => instance.toggleSpeed(...args)); +export const toggleEvents = initCheck((...args) => instance.toggleEvents(...args)); export const speedUp = initCheck((...args) => instance.speedUp(...args)); export const speedDown = initCheck((...args) => instance.speedDown(...args)); export const attach = initCheck((...args) => instance.attach(...args)); @@ -76,6 +77,7 @@ export const Controls = { toggleSkip, toggleSkipToIssue, toggleAutoplay, + toggleEvents, toggleSpeed, speedUp, speedDown, diff --git a/frontend/app/svg/icons/chevron-double-left.svg b/frontend/app/svg/icons/chevron-double-left.svg new file mode 100644 index 000000000..7181fd111 --- /dev/null +++ b/frontend/app/svg/icons/chevron-double-left.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/chevron-double-right.svg b/frontend/app/svg/icons/chevron-double-right.svg new file mode 100644 index 000000000..73e1b352d --- /dev/null +++ b/frontend/app/svg/icons/chevron-double-right.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/env.js b/frontend/env.js index 7e07175b4..aeb8d1d5f 100644 --- a/frontend/env.js +++ b/frontend/env.js @@ -5,13 +5,13 @@ require('dotenv').config() const oss = { name: 'oss', - PRODUCTION: false, + PRODUCTION: true, SENTRY_ENABLED: false, SENTRY_URL: "", CAPTCHA_ENABLED: process.env.CAPTCHA_ENABLED === 'true', CAPTCHA_SITE_KEY: process.env.CAPTCHA_SITE_KEY, ORIGIN: () => 'window.location.origin', - API_EDP: 'https://do.openreplay.com/api', + API_EDP: () => 'window.location.origin + "/api"', ASSETS_HOST: () => 'window.location.origin + "/assets"', VERSION: '1.0.0', SOURCEMAP: true,