From 838948bf932d694ba8d361cdb5f772c089784a17 Mon Sep 17 00:00:00 2001
From: harshithpabbati <pabbatiharshith@gmail.com>
Date: Fri, 17 Dec 2021 16:20:09 +0530
Subject: [PATCH] Get shared components into parity with current version of
 prebuilt

---
 .../shared/components/Aside/NetworkAside.js   |   8 +-
 custom/shared/components/Audio/Audio.js       |  46 ++++--
 custom/shared/components/Audio/AudioTrack.js  |  29 ++--
 .../components/Audio/CombinedAudioTrack.js    |  29 ++--
 custom/shared/components/Capsule/Capsule.js   |  25 ++--
 custom/shared/components/Card/Card.js         |   4 +-
 .../shared/components/HairCheck/HairCheck.js  |   9 +-
 custom/shared/components/Tile/Video.js        | 139 ++++++++++++++++--
 custom/shared/contexts/UIStateProvider.js     |   6 +
 9 files changed, 210 insertions(+), 85 deletions(-)

diff --git a/custom/shared/components/Aside/NetworkAside.js b/custom/shared/components/Aside/NetworkAside.js
index 0f4d61c..0469039 100644
--- a/custom/shared/components/Aside/NetworkAside.js
+++ b/custom/shared/components/Aside/NetworkAside.js
@@ -22,9 +22,7 @@ export const NetworkAside = () => {
   }, [callObject]);
 
   useEffect(() => {
-    if (!callObject) {
-      return;
-    }
+    if (!callObject) return;
 
     updateStats();
 
@@ -38,7 +36,7 @@ export const NetworkAside = () => {
       Math.round(
         (networkStats?.stats?.latest?.videoRecvBitsPerSecond ?? 0) / 1000
       ),
-    [networkStats]
+    [networkStats?.stats?.latest?.videoRecvBitsPerSecond]
   );
 
   const uploadKbs = useMemo(
@@ -46,7 +44,7 @@ export const NetworkAside = () => {
       Math.round(
         (networkStats?.stats?.latest?.videoSendBitsPerSecond ?? 0) / 1000
       ),
-    [networkStats]
+    [networkStats?.stats?.latest?.videoSendBitsPerSecond]
   );
 
   if (!showAside || showAside !== NETWORK_ASIDE) {
diff --git a/custom/shared/components/Audio/Audio.js b/custom/shared/components/Audio/Audio.js
index a806340..a4d74dc 100644
--- a/custom/shared/components/Audio/Audio.js
+++ b/custom/shared/components/Audio/Audio.js
@@ -8,22 +8,30 @@
  * into into a single audio node using the CombinedAudioTrack component
  */
 import React, { useEffect, useMemo } from 'react';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
 import { useTracks } from '@custom/shared/contexts/TracksProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { isScreenId } from '@custom/shared/contexts/participantsState';
 import Bowser from 'bowser';
 import { Portal } from 'react-portal';
 import AudioTrack from './AudioTrack';
 import CombinedAudioTrack from './CombinedAudioTrack';
 
+
 export const Audio = () => {
+  const { disableAudio } = useCallState();
   const { audioTracks } = useTracks();
+  const { setShowAutoplayFailedModal } = useUIState();
 
   const renderedTracks = useMemo(
     () =>
-      Object.entries(audioTracks).reduce(
-        (tracks, [id, track]) => ({ ...tracks, [id]: track }),
-        {}
-      ),
-    [audioTracks]
+      Object.entries(audioTracks).reduce((tracks, [id, track]) => {
+        if (!disableAudio || isScreenId(id)) {
+          tracks[id] = track;
+        }
+        return tracks;
+      }, {}),
+    [audioTracks, disableAudio]
   );
 
   // On iOS safari, when headphones are disconnected, all audio elements are paused.
@@ -32,25 +40,31 @@ export const Audio = () => {
   // To fix that, we call `play` on each audio track on all devicechange events.
   useEffect(() => {
     const playTracks = () => {
-      document.querySelectorAll('.audioTracks audio').forEach(async (audio) => {
-        try {
-          if (audio.paused && audio.readyState === audio.HAVE_ENOUGH_DATA) {
-            await audio?.play();
+      document
+        .querySelectorAll('.audioTracks audio')
+        .forEach(async (audio) => {
+          try {
+            if (audio.paused && audio.readyState === audio.HAVE_ENOUGH_DATA) {
+              await audio?.play();
+            }
+          } catch (e) {
+            setShowAutoplayFailedModal(true);
           }
-        } catch (e) {
-          // Auto play failed
-        }
-      });
+        });
     };
     navigator.mediaDevices.addEventListener('devicechange', playTracks);
     return () => {
       navigator.mediaDevices.removeEventListener('devicechange', playTracks);
     };
-  }, []);
+  }, [setShowAutoplayFailedModal]);
 
   const tracksComponent = useMemo(() => {
-    const { browser } = Bowser.parse(navigator.userAgent);
-    if (browser.name === 'Chrome' && parseInt(browser.version, 10) >= 92) {
+    const { browser, platform, os } = Bowser.parse(navigator.userAgent);
+    if (
+      browser.name === 'Chrome' &&
+      parseInt(browser.version, 10) >= 92 &&
+      (platform.type === 'desktop' || os.name === 'Android')
+    ) {
       return <CombinedAudioTrack tracks={renderedTracks} />;
     }
     return Object.entries(renderedTracks).map(([id, track]) => (
diff --git a/custom/shared/components/Audio/AudioTrack.js b/custom/shared/components/Audio/AudioTrack.js
index 82b22db..5da059d 100644
--- a/custom/shared/components/Audio/AudioTrack.js
+++ b/custom/shared/components/Audio/AudioTrack.js
@@ -1,38 +1,35 @@
 import React, { useRef, useEffect } from 'react';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import PropTypes from 'prop-types';
 
-const AudioTrack = ({ track }) => {
+export const AudioTrack = ({ track }) => {
   const audioRef = useRef(null);
+  const { setShowAutoplayFailedModal } = useUIState();
 
   useEffect(() => {
-    if (!audioRef.current) return false;
+    const audioTag = audioRef.current;
+    if (!audioTag) return false;
     let playTimeout;
 
     const handleCanPlay = () => {
       playTimeout = setTimeout(() => {
-        console.log('Unable to autoplay audio element');
+        setShowAutoplayFailedModal(true);
       }, 1500);
     };
     const handlePlay = () => {
       clearTimeout(playTimeout);
     };
-    audioRef.current.addEventListener('canplay', handleCanPlay);
-    audioRef.current.addEventListener('play', handlePlay);
-    audioRef.current.srcObject = new MediaStream([track]);
-
-    const audioEl = audioRef.current;
+    audioTag.addEventListener('canplay', handleCanPlay);
+    audioTag.addEventListener('play', handlePlay);
+    audioTag.srcObject = new MediaStream([track]);
 
     return () => {
-      audioEl?.removeEventListener('canplay', handleCanPlay);
-      audioEl?.removeEventListener('play', handlePlay);
+      audioTag?.removeEventListener('canplay', handleCanPlay);
+      audioTag?.removeEventListener('play', handlePlay);
     };
-  }, [track]);
+  }, [setShowAutoplayFailedModal, track]);
 
-  return track ? (
-    <audio autoPlay playsInline ref={audioRef}>
-      <track kind="captions" />
-    </audio>
-  ) : null;
+  return track ? <audio autoPlay playsInline ref={audioRef} /> : null;
 };
 
 AudioTrack.propTypes = {
diff --git a/custom/shared/components/Audio/CombinedAudioTrack.js b/custom/shared/components/Audio/CombinedAudioTrack.js
index 0e81f23..0082860 100644
--- a/custom/shared/components/Audio/CombinedAudioTrack.js
+++ b/custom/shared/components/Audio/CombinedAudioTrack.js
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useDeepCompareEffect, useDeepCompareMemo } from 'use-deep-compare';
 
-const CombinedAudioTrack = ({ tracks }) => {
+export const CombinedAudioTrack = ({ tracks }) => {
   const audioEl = useRef(null);
 
   useEffect(() => {
@@ -25,12 +25,21 @@ const CombinedAudioTrack = ({ tracks }) => {
     allTracks.forEach((track) => {
       const persistentTrack = track?.persistentTrack;
       if (persistentTrack) {
-        persistentTrack.addEventListener(
-          'ended',
-          (ev) => stream.removeTrack(ev.target),
-          { once: true }
-        );
-        stream.addTrack(persistentTrack);
+        switch (persistentTrack.readyState) {
+          case 'ended':
+            stream.removeTrack(persistentTrack);
+            break;
+          case 'live':
+            persistentTrack.addEventListener(
+              'ended',
+              (ev) => {
+                stream.removeTrack(ev.target);
+              },
+              { once: true }
+            );
+            stream.addTrack(persistentTrack);
+            break;
+        }
       }
     });
 
@@ -53,11 +62,7 @@ const CombinedAudioTrack = ({ tracks }) => {
     playAudio();
   }, [tracks, trackIds]);
 
-  return (
-    <audio autoPlay playsInline ref={audioEl}>
-      <track kind="captions" />
-    </audio>
-  );
+  return <audio autoPlay playsInline ref={audioEl} />;
 };
 
 CombinedAudioTrack.propTypes = {
diff --git a/custom/shared/components/Capsule/Capsule.js b/custom/shared/components/Capsule/Capsule.js
index 09362b0..1849715 100644
--- a/custom/shared/components/Capsule/Capsule.js
+++ b/custom/shared/components/Capsule/Capsule.js
@@ -6,18 +6,19 @@ export const Capsule = ({ children, variant }) => (
   <span className={classNames('capsule', variant)}>
     {children}
     <style jsx>{`
-      display: inline-flex;
-      padding: 4px 6px;
-      margin: 0 6px;
-      align-items: center;
-      line-height: 1;
-      justify-content: center;
-      border-radius: 5px;
-      font-size: 0.75rem;
-      font-weight: var(--weight-bold);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-
+      .capsule {
+        display: inline-flex;
+        padding: 4px 6px;
+        margin: 0 6px;
+        align-items: center;
+        line-height: 1;
+        justify-content: center;
+        border-radius: 5px;
+        font-size: 0.75rem;
+        font-weight: var(--weight-bold);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+      }
       .capsule.success {
         background-color: var(--green-default);
         color: #ffffff;
diff --git a/custom/shared/components/Card/Card.js b/custom/shared/components/Card/Card.js
index 304ab95..932606f 100644
--- a/custom/shared/components/Card/Card.js
+++ b/custom/shared/components/Card/Card.js
@@ -50,7 +50,9 @@ export const CardBody = ({ children }) => (
   <div className="card-body">
     {children}
     <style jsx>{`
-      color: var(--text-mid);
+      .card-body {
+        color: var(--text-mid);
+      }
 
       & + :global(.card-footer) {
         margin-top: var(--spacing-md);
diff --git a/custom/shared/components/HairCheck/HairCheck.js b/custom/shared/components/HairCheck/HairCheck.js
index c57c960..c58ace1 100644
--- a/custom/shared/components/HairCheck/HairCheck.js
+++ b/custom/shared/components/HairCheck/HairCheck.js
@@ -105,17 +105,12 @@ export const HairCheck = () => {
   ]);
 
   const hasError = useMemo(() => {
-    if (
-      !deviceState ||
+    return !(!deviceState ||
       [
         DEVICE_STATE_LOADING,
         DEVICE_STATE_PENDING,
         DEVICE_STATE_GRANTED,
-      ].includes(deviceState)
-    ) {
-      return false;
-    }
-    return true;
+      ].includes(deviceState));
   }, [deviceState]);
 
   const camErrorVerbose = useMemo(() => {
diff --git a/custom/shared/components/Tile/Video.js b/custom/shared/components/Tile/Video.js
index 660c8cc..5e975be 100644
--- a/custom/shared/components/Tile/Video.js
+++ b/custom/shared/components/Tile/Video.js
@@ -1,10 +1,36 @@
-import React, { useMemo, forwardRef, memo, useEffect } from 'react';
+import React, { useMemo, forwardRef, memo, useEffect, useState } from 'react';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { isScreenId } from '@custom/shared/contexts/participantsState';
 import Bowser from 'bowser';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { shallowEqualObjects } from 'shallow-equal';
+import { useDeepCompareMemo } from 'use-deep-compare';
 
 export const Video = memo(
-  forwardRef(({ participantId, videoTrack, ...rest }, videoEl) => {
+  forwardRef(({ fit = 'contain', participantId, videoTrack, ...rest }, videoEl) => {
+    const { callObject } = useCallState();
+    const { isMobile } = useUIState();
+
+    const isLocalCam = useMemo(() => {
+      const localParticipant = callObject.participants()?.local;
+      return participantId === localParticipant.session_id && !isScreenId(participantId);
+    }, [callObject, participantId]);
+
+    const [isMirrored, setIsMirrored] = useState(isLocalCam);
+
+    /**
+     * Considered as playable video:
+     * - local cam feed
+     * - any screen share
+     * - remote cam feed that is subscribed and reported as playable
+     */
+    const isPlayable = useDeepCompareMemo(
+      () => isLocalCam || isScreenId(participantId),
+      [isLocalCam, isScreenId(participantId)]
+    );
+
     /**
      * Memo: Chrome >= 92?
      * See: https://bugs.chromium.org/p/chromium/issues/detail?id=1232649
@@ -19,33 +45,114 @@ export const Video = memo(
     }, []);
 
     /**
-     * Effect: Umount
-     * Note: nullify src to ensure media object is not counted
+     * Determine if video needs to be mirrored.
+     */
+    useEffect(() => {
+      if (!videoTrack) return;
+
+      const videoTrackSettings = videoTrack.getSettings();
+      const isUsersFrontCamera =
+        'facingMode' in videoTrackSettings
+          ? isLocalCam && videoTrackSettings.facingMode === 'user'
+          : isLocalCam;
+      // only apply mirror effect to user facing camera
+      if (isMirrored !== isUsersFrontCamera) {
+        setIsMirrored(isUsersFrontCamera);
+      }
+    }, [isMirrored, isLocalCam, videoTrack]);
+
+    /**
+     * Handle canplay & picture-in-picture events.
      */
     useEffect(() => {
       const video = videoEl.current;
-      if (!video) return false;
-      // clean up when video renders for different participant
-      video.srcObject = null;
-      if (isChrome92) video.load();
-      return () => {
-        // clean up when unmounted
-        video.srcObject = null;
-        if (isChrome92) video.load();
+      if (!video) return;
+      const handleCanPlay = () => {
+        if (!video.paused) return;
+        video.play();
       };
-    }, [videoEl, isChrome92, participantId]);
+      const handleEnterPIP = () => {
+        video.style.transform = 'scale(1)';
+      };
+      const handleLeavePIP = () => {
+        video.style.transform = '';
+        setTimeout(() => {
+          if (video.paused) video.play();
+        }, 100);
+      };
+      video.addEventListener('canplay', handleCanPlay);
+      video.addEventListener('enterpictureinpicture', handleEnterPIP);
+      video.addEventListener('leavepictureinpicture', handleLeavePIP);
+      return () => {
+        video.removeEventListener('canplay', handleCanPlay);
+        video.removeEventListener('enterpictureinpicture', handleEnterPIP);
+        video.removeEventListener('leavepictureinpicture', handleLeavePIP);
+      };
+    }, [isChrome92, videoEl]);
 
     /**
-     * Effect: mount source (and force load on Chrome)
+     * Update srcObject.
      */
     useEffect(() => {
       const video = videoEl.current;
       if (!video || !videoTrack) return;
       video.srcObject = new MediaStream([videoTrack]);
       if (isChrome92) video.load();
-    }, [videoEl, isChrome92, videoTrack]);
+      return () => {
+        // clean up when unmounted
+        video.srcObject = null;
+        if (isChrome92) video.load();
+      };
+    }, [isChrome92, participantId, videoEl, videoTrack, videoTrack?.id]);
 
-    return <video autoPlay muted playsInline ref={videoEl} {...rest} />;
+      return (
+        <>
+          <video
+            className={classNames(fit, {
+              isMirrored,
+              isMobile,
+              playable: isPlayable && videoTrack?.enabled,
+            })}
+            autoPlay
+            muted
+            playsInline
+            ref={videoEl}
+            {...props}
+          />
+          <style jsx>{`
+          video {
+            opacity: 0;
+          }
+          video.playable {
+            opacity: 1;
+          }
+          video.isMirrored {
+            transform: scale(-1, 1);
+          }
+          video.isMobile {
+            border-radius: 4px;
+            display: block;
+            height: 100%;
+            position: relative;
+            width: 100%;
+          }
+          video:not(.isMobile) {
+            height: calc(100% + 4px);
+            left: -2px;
+            object-position: center;
+            position: absolute;
+            top: -2px;
+            width: calc(100% + 4px);
+          }
+          video.contain {
+            object-fit: contain;
+          }
+          video.cover {
+            object-fit: cover;
+          }
+        `}</style>
+        </>
+      );
   }),
   (p, n) => shallowEqualObjects(p, n)
 );
diff --git a/custom/shared/contexts/UIStateProvider.js b/custom/shared/contexts/UIStateProvider.js
index d2e02d1..0a376fb 100644
--- a/custom/shared/contexts/UIStateProvider.js
+++ b/custom/shared/contexts/UIStateProvider.js
@@ -20,6 +20,7 @@ export const UIStateProvider = ({
   customTrayComponent,
   children,
 }) => {
+  const [isMobile, setIsMobile] = useState(false);
   const [pinnedId, setPinnedId] = useState(null);
   const [preferredViewMode, setPreferredViewMode] = useState(VIEW_MODE_SPEAKER);
   const [viewMode, setViewMode] = useState(preferredViewMode);
@@ -28,6 +29,7 @@ export const UIStateProvider = ({
   const [showAside, setShowAside] = useState();
   const [activeModals, setActiveModals] = useState({});
   const [customCapsule, setCustomCapsule] = useState();
+  const [showAutoplayFailedModal, setShowAutoplayFailedModal] = useState(false);
 
   const openModal = useCallback((modalName) => {
     setActiveModals((prevState) => ({
@@ -87,6 +89,10 @@ export const UIStateProvider = ({
         setShowParticipantsBar,
         customCapsule,
         setCustomCapsule,
+        showAutoplayFailedModal,
+        setShowAutoplayFailedModal,
+        isMobile,
+        setIsMobile,
       }}
     >
       {children}