WIP: client ui control panel in progress

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',
         }}
       >
-        <Button
+        {/* <Button
           onClick={() => setIsWithControls(true)}
           onTouchStart={() => setIsWithControls(true)}
         >
@@ -236,7 +242,19 @@ function App() {
         >
           ENTER FULL SCREEN
         </Button>
-        <ToggleDarkModeSwitch />
+        <ToggleDarkModeSwitch /> */}
+        <PlayerControlPanel
+          onSwitchChangedCallback={(isEnabled) => 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}
+        />
         <div
           id="video-container"
           style={{
@@ -245,6 +263,7 @@ function App() {
           }}
         >
           <div
+            id="player-wrapper-id"
             className="player-wrapper"
             style={{
               position: 'relative',
@@ -253,7 +272,7 @@ function App() {
           >
             <ReactPlayer
               ref={player}
-              id="video-local-test-peer-sees"
+              id={REACT_PLAYER_WRAPPER_ID}
               playing={playing}
               playsinline={true}
               controls={isWithControls}
@@ -273,7 +292,8 @@ function App() {
                 top: 0,
                 left: 0,
               }}
-            />
+            >
+            </ReactPlayer>
           </div>
           <canvas id="comparison-canvas" style={{ display: 'none' }}></canvas>
         </div>

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%)'
+
+{
+  /* <Row between="xs">
+  <Col xs={2} />
+  <Col xs={2} />
+  <Col xs={2} />
+</Row> */
+}
+
+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 (
+    <>
+      <Card elevation={4}>
+        <Row between="xs">
+          <Col xs={1}>
+            <Button
+              icon={isPlaying ? 'pause' : 'play'}
+              minimal
+              onClick={handleClickPlayPause}
+            >
+              {isPlaying ? 'Pause' : 'Play'}
+            </Button>
+          </Col>
+          <Col xs={3}>
+            <H5>Deskreen</H5>
+          </Col>
+          <Col xs={4}>
+            <Row end="xs">
+              <Col xs={12}>
+                <Switch
+                  onChange={() => {
+                    onSwitchChangedCallback(!isDefaultPlayerTurnedOn);
+                  }}
+                  innerLabel={isDefaultPlayerTurnedOn ? 'ON' : 'OFF'}
+                  inline
+                  label={`Default Video Player is`}
+                  alignIndicator={Alignment.RIGHT}
+                  checked={isDefaultPlayerTurnedOn}
+                  disabled={!isFullScreenAPIAvailable}
+                />
+                <Button icon="cog" minimal />
+                <Button minimal onClick={handleClickFullscreen}>
+                  <img
+                    src={isFullScreenOn ? FullScreenEnter : FullScreenExit}
+                    width={16}
+                    height={16}
+                    style={{
+                      transform: 'scale(1.5)',
+                      filter: isDarkTheme
+                        ? DARK_UI_PLAYER_CONTROL_BUTTONS_COLOR
+                        : LIGHT_UI_PLAYER_CONTROL_BUTTONS_COLOR,
+                    }}
+                  />
+                </Button>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+      </Card>
+    </>
+  );
+}
+
+export default PlayerControlPanel;

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 (
     <Switch
       onChange={() => {

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%);';

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');
       });

app/client/src/images/fullscreen_24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>

app/client/src/images/fullscreen_exit-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>