From b1b127f79fa57a427ad659b4d3ee0c898cb5fd62 Mon Sep 17 00:00:00 2001 From: Pavlo Buidenkov Date: Sun, 29 Nov 2020 20:55:26 +0200 Subject: [PATCH] WIP: client ui control panel in progress --- app/client/src/App.tsx | 44 ++++++-- .../components/PlayerControlPanel/index.tsx | 103 ++++++++++++++++++ .../components/ToggleDarkModeSwitch/index.tsx | 4 +- app/client/src/constants/styleConstants.ts | 2 + .../src/features/PeerConnection/index.ts | 6 - app/client/src/images/fullscreen_24px.svg | 1 + .../src/images/fullscreen_exit-24px.svg | 1 + 7 files changed, 140 insertions(+), 21 deletions(-) create mode 100644 app/client/src/components/PlayerControlPanel/index.tsx create mode 100644 app/client/src/images/fullscreen_24px.svg create mode 100644 app/client/src/images/fullscreen_exit-24px.svg diff --git a/app/client/src/App.tsx b/app/client/src/App.tsx index d754561..7db991e 100644 --- a/app/client/src/App.tsx +++ b/app/client/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useRef, useContext } from 'react'; +import React, { useEffect, useState, useRef, useContext, useCallback } from 'react'; import { H3, Button } from '@blueprintjs/core'; import { Grid, Row, Col } from 'react-flexbox-grid'; import { findDOMNode } from 'react-dom'; @@ -16,10 +16,13 @@ import { } from './constants/styleConstants'; import { AppContext } from './providers/AppContextProvider'; import ToggleDarkModeSwitch from './components/ToggleDarkModeSwitch'; +import PlayerControlPanel from './components/PlayerControlPanel'; const Fade = require('react-reveal/Fade'); const Slide = require('react-reveal/Slide'); +const REACT_PLAYER_WRAPPER_ID = "react-player-wrapper-id"; + function getPromptContent(step: number) { switch (step) { case 1: @@ -41,7 +44,7 @@ function getPromptContent(step: number) { } function App() { - const { isDarkTheme, setIsDarkThemeHook } = useContext(AppContext); + const { isDarkTheme } = useContext(AppContext); const player = useRef(null); const [promptStep, setPromptStep] = useState(1); @@ -56,6 +59,7 @@ function App() { }); const [playing, setPlaying] = useState(true); + const [isFullScreenOn, setIsFullScreenOn] = useState(false); const [url, setUrl] = useState(); const [isWithControls, setIsWithControls] = useState(!screenfull.isEnabled); const [isShownTextPrompt, setIsShownTextPrompt] = useState(false); @@ -104,14 +108,16 @@ function App() { }, 1500); }, [isShownSpinnerIcon]); - const handleClickFullscreen = () => { - // @ts-ignore Property 'request' does not exist on type '{ isEnabled: false; }'. - screenfull.request(findDOMNode(player.current)); - }; + // const handleClickFullscreen = useCallback(() => { + // if (!player.current) return; + // // @ts-ignore Property 'request' does not exist on type '{ isEnabled: false; }'. + // screenfull.request(findDOMNode(player.current)); + // setIsFullScreenOn(!isFullScreenOn); + // }, []); - const handlePlayPause = () => { + const handlePlayPause = useCallback(() => { setPlaying(!playing); - }; + }, [playing]); useEffect(() => { document.body.style.backgroundColor = isDarkTheme @@ -221,7 +227,7 @@ function App() { height: '100vh', }} > - - + */} + setIsWithControls(isEnabled)} + isDefaultPlayerTurnedOn={isWithControls} + handleClickFullscreen={() => { + // @ts-ignore Property 'request' does not exist on type '{ isEnabled: false; }'. + screenfull.request(findDOMNode(player.current)); + setIsFullScreenOn(!isFullScreenOn); + }} + handleClickPlayPause={handlePlayPause} + isFullScreenOn={isFullScreenOn} + isPlaying={playing} + />
+ > +
diff --git a/app/client/src/components/PlayerControlPanel/index.tsx b/app/client/src/components/PlayerControlPanel/index.tsx new file mode 100644 index 0000000..bf2b153 --- /dev/null +++ b/app/client/src/components/PlayerControlPanel/index.tsx @@ -0,0 +1,103 @@ +import React, { useContext, useMemo, useState } from 'react'; +import { Alignment, Button, Card, H5, Switch } from '@blueprintjs/core'; +import FullScreenEnter from '../../images/fullscreen_24px.svg'; +import FullScreenExit from '../../images/fullscreen_exit-24px.svg'; +import { Col, Row } from 'react-flexbox-grid'; +import { AppContext } from '../../providers/AppContextProvider'; +import { + DARK_UI_PLAYER_CONTROL_BUTTONS_COLOR, + LIGHT_UI_PLAYER_CONTROL_BUTTONS_COLOR, +} from '../../constants/styleConstants'; +import screenfull from 'screenfull'; + +// light theme player button icon color: +// filter: invert(44%) sepia(42%) saturate(211%) hue-rotate(164deg) brightness(89%) contrast(94%); + +// DARK theme player button icon color: +// filter: 'invert(93%) sepia(2%) saturate(5711%) hue-rotate(178deg) brightness(86%) contrast(72%)' + +{ + /* + + + + */ +} + +interface PlayerControlPanelProps { + onSwitchChangedCallback: (isEnabled: boolean) => void; + isFullScreenOn: boolean; + isPlaying: boolean; + isDefaultPlayerTurnedOn: boolean; + handleClickFullscreen: () => void; + handleClickPlayPause: () => void; +} + +function PlayerControlPanel(props: PlayerControlPanelProps) { + const { isDarkTheme } = useContext(AppContext); + + const { + isPlaying, + isFullScreenOn, + onSwitchChangedCallback, + isDefaultPlayerTurnedOn, + handleClickPlayPause, + handleClickFullscreen, + } = props; + + const isFullScreenAPIAvailable = useMemo(() => screenfull.isEnabled, []); + + return ( + <> + + + + + + +
Deskreen
+ + + + + { + onSwitchChangedCallback(!isDefaultPlayerTurnedOn); + }} + innerLabel={isDefaultPlayerTurnedOn ? 'ON' : 'OFF'} + inline + label={`Default Video Player is`} + alignIndicator={Alignment.RIGHT} + checked={isDefaultPlayerTurnedOn} + disabled={!isFullScreenAPIAvailable} + /> + + + + + + + + ); +} + +export default PlayerControlPanel; diff --git a/app/client/src/components/ToggleDarkModeSwitch/index.tsx b/app/client/src/components/ToggleDarkModeSwitch/index.tsx index abc9a51..14f0b36 100644 --- a/app/client/src/components/ToggleDarkModeSwitch/index.tsx +++ b/app/client/src/components/ToggleDarkModeSwitch/index.tsx @@ -1,12 +1,10 @@ import React, { useContext } from 'react'; -import { Icon, Text, Switch, Classes, Alignment } from '@blueprintjs/core'; -import { Row, Col } from 'react-flexbox-grid'; +import { Switch, Classes, Alignment } from '@blueprintjs/core'; import { AppContext } from '../../providers/AppContextProvider'; function ToggleDarkModeSwitch() { const { isDarkTheme, setIsDarkThemeHook } = useContext(AppContext) - return ( { diff --git a/app/client/src/constants/styleConstants.ts b/app/client/src/constants/styleConstants.ts index ea0ed59..d26f635 100644 --- a/app/client/src/constants/styleConstants.ts +++ b/app/client/src/constants/styleConstants.ts @@ -1,2 +1,4 @@ export const LIGHT_UI_BACKGROUND = 'rgba(240, 248, 250, 1)'; export const DARK_UI_BACKGROUND = '#293742'; +export const DARK_UI_PLAYER_CONTROL_BUTTONS_COLOR = 'invert(93%) sepia(2%) saturate(5711%) hue-rotate(178deg) brightness(86%) contrast(72%)'; +export const LIGHT_UI_PLAYER_CONTROL_BUTTONS_COLOR = 'invert(44%) sepia(42%) saturate(211%) hue-rotate(164deg) brightness(89%) contrast(94%);'; diff --git a/app/client/src/features/PeerConnection/index.ts b/app/client/src/features/PeerConnection/index.ts index e6645a7..5512a78 100644 --- a/app/client/src/features/PeerConnection/index.ts +++ b/app/client/src/features/PeerConnection/index.ts @@ -127,12 +127,6 @@ export default class LocalTestPeer { }); peer.on('stream', (stream) => { - setTimeout(() => { - (document.querySelector( - '#video-local-test-peer-sees' - ) as any).srcObject = stream; - }, 1000); - this.videoAutoQualityOptimizer.setGoodQualityCallback(() => { this.peer.send('set good quality'); }); diff --git a/app/client/src/images/fullscreen_24px.svg b/app/client/src/images/fullscreen_24px.svg new file mode 100644 index 0000000..9e60d60 --- /dev/null +++ b/app/client/src/images/fullscreen_24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/src/images/fullscreen_exit-24px.svg b/app/client/src/images/fullscreen_exit-24px.svg new file mode 100644 index 0000000..76d9e1d --- /dev/null +++ b/app/client/src/images/fullscreen_exit-24px.svg @@ -0,0 +1 @@ + \ No newline at end of file