From cc7a868553450f08fa4cc9e6c072ae28859e99a7 Mon Sep 17 00:00:00 2001 From: Olivia Pyskoty Date: Mon, 29 Aug 2022 17:18:05 -0700 Subject: [PATCH 01/10] add storybook controls for switching off video --- src/stories/App.stories.jsx | 12 ++++++------ src/stories/mocks/twilio-video.js | 26 ++++++++++++++++---------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/stories/App.stories.jsx b/src/stories/App.stories.jsx index daa0311c5..016e20deb 100644 --- a/src/stories/App.stories.jsx +++ b/src/stories/App.stories.jsx @@ -20,11 +20,11 @@ export default { unpublishAllAudio: { control: { type: 'boolean' }, }, - unpublishAllVideo: { - control: { type: 'boolean' }, + unpublishVideo: { + control: { type: 'text' }, }, - switchOffAllVideo: { - control: { type: 'boolean' }, + switchOffVideo: { + control: { type: 'text' }, }, }, }; @@ -38,6 +38,6 @@ Prod.args = { presentationParticipant: null, disableAllAudio: false, unpublishAllAudio: false, - unpublishAllVideo: false, - switchOffAllVideo: false, + unpublishVideo: null, + switchOffVideo: null, }; diff --git a/src/stories/mocks/twilio-video.js b/src/stories/mocks/twilio-video.js index cb1680a40..81899c812 100644 --- a/src/stories/mocks/twilio-video.js +++ b/src/stories/mocks/twilio-video.js @@ -105,6 +105,7 @@ class LocalParticipant extends EventEmitter { ]); this.identity = 'Local Participant'; + this.sid = this.identity; } } @@ -122,6 +123,7 @@ const mockRoom = new MockRoom(); class MockParticipant extends EventEmitter { constructor(name) { super(); + this.sid = name; this.identity = name; this.tracks = new Map([ ['video', new MockPublication('video')], @@ -223,20 +225,24 @@ export function decorator(story, { args }) { videoTrack?.enable(); } - if (args.unpublishAllAudio) { - mockParticipant.unpublishTrack('audio'); - } else { - mockParticipant.publishTrack('audio'); - } - - if (args.unpublishAllVideo) { - mockParticipant.unpublishTrack('video'); + if (args.unpublishVideo) { + const participantList = args.unpublishVideo.split(','); + if (participantList.includes(i.toString())) { + mockParticipant.unpublishTrack('video'); + } else { + mockParticipant.publishTrack('video'); + } } else { mockParticipant.publishTrack('video'); } - if (args.switchOffAllVideo) { - videoTrack?.switchOff(); + if (args.switchOffVideo) { + const participantList = args.switchOffVideo.split(','); + if (participantList.includes(i.toString())) { + videoTrack?.switchOff(); + } else { + videoTrack?.switchOn(); + } } else { videoTrack?.switchOn(); } From a711fe5656739f8eb0af508050d9ace71041fce9 Mon Sep 17 00:00:00 2001 From: Olivia Pyskoty Date: Tue, 30 Aug 2022 13:53:25 -0700 Subject: [PATCH 02/10] Update avatar icon --- src/icons/AvatarIcon.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/icons/AvatarIcon.tsx b/src/icons/AvatarIcon.tsx index b6ff09fb3..29e476911 100644 --- a/src/icons/AvatarIcon.tsx +++ b/src/icons/AvatarIcon.tsx @@ -2,15 +2,13 @@ import React from 'react'; export default function AvatarIcon() { return ( - - - - - + + ); } From 07ba55efcc4a83645c951daf94c8c3d15f7dbf11 Mon Sep 17 00:00:00 2001 From: Olivia Pyskoty Date: Tue, 30 Aug 2022 14:02:59 -0700 Subject: [PATCH 03/10] add low bandwidth message and UI --- .../MainParticipantInfo.tsx | 28 +++++++++++++++++- .../ParticipantInfo/ParticipantInfo.tsx | 29 ++++++++++++++++++- 2 files changed, 55 insertions(+), 2 deletions(-) diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.tsx index cf70c46a9..59b1ec265 100644 --- a/src/components/MainParticipantInfo/MainParticipantInfo.tsx +++ b/src/components/MainParticipantInfo/MainParticipantInfo.tsx @@ -108,6 +108,22 @@ const useStyles = makeStyles((theme: Theme) => ({ background: '#A90000', }, }, + trackSwitchOffContainer: { + opacity: 0, + visibility: 'hidden', + transition: 'all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1)', + }, + isSwitchedOff: { + opacity: 1, + visibility: 'visible', + transition: 'all 0.5s linear 2s', + }, + switchOffMessage: { + background: '#1F304C', + borderRadius: '100px', + padding: '0.3em 1.5em', + color: '#FFFFFF', + }, })); interface MainParticipantInfoProps { @@ -173,7 +189,17 @@ export default function MainParticipantInfo({ participant, children }: MainParti )} - {(!isVideoEnabled || isVideoSwitchedOff) && ( +
+ + Low bandwidth + +
+ + {!isVideoEnabled && (
diff --git a/src/components/ParticipantInfo/ParticipantInfo.tsx b/src/components/ParticipantInfo/ParticipantInfo.tsx index 6b8227d45..94373d2a0 100644 --- a/src/components/ParticipantInfo/ParticipantInfo.tsx +++ b/src/components/ParticipantInfo/ParticipantInfo.tsx @@ -145,6 +145,22 @@ const useStyles = makeStyles((theme: Theme) => dominantSpeaker: { border: `solid ${borderWidth}px #7BEAA5`, }, + trackSwitchOffContainer: { + opacity: 0, + visibility: 'hidden', + transition: 'all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1)', + }, + isSwitchedOff: { + opacity: 1, + visibility: 'visible', + transition: 'all 0.5s linear 2s', + }, + switchOffMessage: { + background: '#1F304C', + borderRadius: '100px', + padding: '0.3em 1.5em', + color: '#FFFFFF', + }, }) ); @@ -214,8 +230,19 @@ export default function ParticipantInfo({
{isSelected && }
+
- {(!isVideoEnabled || isVideoSwitchedOff) && ( +
+ + Low bandwidth + +
+ + {!isVideoEnabled && (
From 201991e2bb12bc63e3e6e494b6debb6bb134c5eb Mon Sep 17 00:00:00 2001 From: Olivia Pyskoty Date: Tue, 30 Aug 2022 14:57:34 -0700 Subject: [PATCH 04/10] update tests to account for switch off ui --- .../MainParticipantInfo/MainParticipantInfo.test.tsx | 4 ++-- src/components/ParticipantInfo/ParticipantInfo.test.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx index d77866a70..a1a95eb8d 100644 --- a/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx +++ b/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx @@ -60,12 +60,12 @@ describe('the MainParticipantInfo component', () => { expect(wrapper.find(AvatarIcon).exists()).toBe(false); }); - it('should render the AvatarIcon component when video is switched off', () => { + it('should display the Low bandwidth message when the video track is switchedOff', () => { mockUseIsTrackSwitchedOff.mockImplementationOnce(() => true); const wrapper = shallow( mock children ); - expect(wrapper.find(AvatarIcon).exists()).toBe(true); + expect(wrapper.text()).toContain('Low bandwidth'); }); it('should not render the reconnecting UI when the user is connected', () => { diff --git a/src/components/ParticipantInfo/ParticipantInfo.test.tsx b/src/components/ParticipantInfo/ParticipantInfo.test.tsx index e3ad063cf..4e75d8077 100644 --- a/src/components/ParticipantInfo/ParticipantInfo.test.tsx +++ b/src/components/ParticipantInfo/ParticipantInfo.test.tsx @@ -43,7 +43,7 @@ describe('the ParticipantInfo component', () => { expect(wrapper.find(AvatarIcon).exists()).toBe(false); }); - it('should render the AvatarIcon component when the video track is switchedOff', () => { + it('should display the Low bandwidth message when the video track is switchedOff', () => { mockUseIsTrackSwitchedOff.mockImplementation(() => true); mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( @@ -51,7 +51,7 @@ describe('the ParticipantInfo component', () => { mock children ); - expect(wrapper.find(AvatarIcon).exists()).toBe(true); + expect(wrapper.text()).toContain('Low bandwidth'); }); it('should not render the reconnecting UI when the user is connected', () => { From b72f3b4f61fa2d823a93f73886911e6dce0206e0 Mon Sep 17 00:00:00 2001 From: Olivia Pyskoty Date: Thu, 1 Sep 2022 10:31:11 -0700 Subject: [PATCH 05/10] remove transitions --- .../MainParticipantInfo.tsx | 8 ++--- .../ParticipantInfo/ParticipantInfo.tsx | 30 ++++++++----------- 2 files changed, 17 insertions(+), 21 deletions(-) diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.tsx index 59b1ec265..de26cc778 100644 --- a/src/components/MainParticipantInfo/MainParticipantInfo.tsx +++ b/src/components/MainParticipantInfo/MainParticipantInfo.tsx @@ -58,7 +58,7 @@ const useStyles = makeStyles((theme: Theme) => ({ gridArea: '1 / 1 / 3 / 3', }, }, - avatarContainer: { + videoOffContainer: { display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -116,7 +116,7 @@ const useStyles = makeStyles((theme: Theme) => ({ isSwitchedOff: { opacity: 1, visibility: 'visible', - transition: 'all 0.5s linear 2s', + transition: 'all 0.5s linear', }, switchOffMessage: { background: '#1F304C', @@ -190,7 +190,7 @@ export default function MainParticipantInfo({ participant, children }: MainParti )}
@@ -200,7 +200,7 @@ export default function MainParticipantInfo({ participant, children }: MainParti
{!isVideoEnabled && ( -
+
)} diff --git a/src/components/ParticipantInfo/ParticipantInfo.tsx b/src/components/ParticipantInfo/ParticipantInfo.tsx index 94373d2a0..1a281fc72 100644 --- a/src/components/ParticipantInfo/ParticipantInfo.tsx +++ b/src/components/ParticipantInfo/ParticipantInfo.tsx @@ -62,7 +62,7 @@ const useStyles = makeStyles((theme: Theme) => background: 'transparent', top: 0, }, - avatarContainer: { + videoOffContainer: { display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -145,21 +145,18 @@ const useStyles = makeStyles((theme: Theme) => dominantSpeaker: { border: `solid ${borderWidth}px #7BEAA5`, }, - trackSwitchOffContainer: { + switchOffMessage: { opacity: 0, visibility: 'hidden', - transition: 'all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1)', - }, - isSwitchedOff: { - opacity: 1, - visibility: 'visible', - transition: 'all 0.5s linear 2s', - }, - switchOffMessage: { background: '#1F304C', borderRadius: '100px', padding: '0.3em 1.5em', color: '#FFFFFF', + transition: 'all 0.5s linear 2s', + }, + isSwitchedOff: { + opacity: 1, + visibility: 'visible', }, }) ); @@ -232,18 +229,17 @@ export default function ParticipantInfo({
-
- +
+ Low bandwidth
{!isVideoEnabled && ( -
+
)} From f14f45b8a60a66c87d8b291596f84297a65dcd5d Mon Sep 17 00:00:00 2001 From: Olivia Pyskoty Date: Tue, 6 Sep 2022 09:54:48 -0700 Subject: [PATCH 06/10] include MUI fade --- .../ParticipantInfo/ParticipantInfo.tsx | 42 +++++++++++++------ 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/src/components/ParticipantInfo/ParticipantInfo.tsx b/src/components/ParticipantInfo/ParticipantInfo.tsx index 1a281fc72..8c2337e6f 100644 --- a/src/components/ParticipantInfo/ParticipantInfo.tsx +++ b/src/components/ParticipantInfo/ParticipantInfo.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import clsx from 'clsx'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import { LocalAudioTrack, LocalVideoTrack, Participant, RemoteAudioTrack, RemoteVideoTrack } from 'twilio-video'; @@ -15,6 +15,7 @@ import usePublications from '../../hooks/usePublications/usePublications'; import useTrack from '../../hooks/useTrack/useTrack'; import useParticipantIsReconnecting from '../../hooks/useParticipantIsReconnecting/useParticipantIsReconnecting'; import { useAppState } from '../../state'; +import { Fade } from '@material-ui/core'; const borderWidth = 2; @@ -146,13 +147,13 @@ const useStyles = makeStyles((theme: Theme) => border: `solid ${borderWidth}px #7BEAA5`, }, switchOffMessage: { - opacity: 0, - visibility: 'hidden', + // opacity: 0, + // visibility: 'hidden', background: '#1F304C', borderRadius: '100px', padding: '0.3em 1.5em', color: '#FFFFFF', - transition: 'all 0.5s linear 2s', + // transition: 'all 0.5s linear 2s', }, isSwitchedOff: { opacity: 1, @@ -195,9 +196,25 @@ export default function ParticipantInfo({ const isParticipantReconnecting = useParticipantIsReconnecting(participant); const { isGalleryViewActive } = useAppState(); + const [showVideoSwitchOffMessage, setShowVideoSwitchedOffMessage] = useState(isVideoSwitchedOff); const classes = useStyles(); + // useEffect(() => { + // if (!isVideoSwitchedOff) { + // setShowVideoSwitchedOffMessage(false); + // return; + // } + + // const timer = setTimeout(() => { + // setShowVideoSwitchedOffMessage(true); + // }, 2000); + + // return () => clearTimeout(timer); + // }, [isVideoSwitchedOff]); + + // console.log(showVideoSwitchOffMessage) + return (
-
- - Low bandwidth - -
+ {isVideoSwitchedOff && ( +
+ + + Low bandwidth + + +
+ )} {!isVideoEnabled && (
From f2aa0506cfcbbdaf8ab71ca3c35d2b5e36d5627c Mon Sep 17 00:00:00 2001 From: Olivia Pyskoty Date: Tue, 6 Sep 2022 10:30:20 -0700 Subject: [PATCH 07/10] remove commented out code --- .../ParticipantInfo/ParticipantInfo.tsx | 25 +------------------ 1 file changed, 1 insertion(+), 24 deletions(-) diff --git a/src/components/ParticipantInfo/ParticipantInfo.tsx b/src/components/ParticipantInfo/ParticipantInfo.tsx index 8c2337e6f..365c13ac6 100644 --- a/src/components/ParticipantInfo/ParticipantInfo.tsx +++ b/src/components/ParticipantInfo/ParticipantInfo.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import clsx from 'clsx'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import { LocalAudioTrack, LocalVideoTrack, Participant, RemoteAudioTrack, RemoteVideoTrack } from 'twilio-video'; @@ -147,17 +147,10 @@ const useStyles = makeStyles((theme: Theme) => border: `solid ${borderWidth}px #7BEAA5`, }, switchOffMessage: { - // opacity: 0, - // visibility: 'hidden', background: '#1F304C', borderRadius: '100px', padding: '0.3em 1.5em', color: '#FFFFFF', - // transition: 'all 0.5s linear 2s', - }, - isSwitchedOff: { - opacity: 1, - visibility: 'visible', }, }) ); @@ -196,25 +189,9 @@ export default function ParticipantInfo({ const isParticipantReconnecting = useParticipantIsReconnecting(participant); const { isGalleryViewActive } = useAppState(); - const [showVideoSwitchOffMessage, setShowVideoSwitchedOffMessage] = useState(isVideoSwitchedOff); const classes = useStyles(); - // useEffect(() => { - // if (!isVideoSwitchedOff) { - // setShowVideoSwitchedOffMessage(false); - // return; - // } - - // const timer = setTimeout(() => { - // setShowVideoSwitchedOffMessage(true); - // }, 2000); - - // return () => clearTimeout(timer); - // }, [isVideoSwitchedOff]); - - // console.log(showVideoSwitchOffMessage) - return (
Date: Tue, 6 Sep 2022 10:30:32 -0700 Subject: [PATCH 08/10] add dominant speaker logic for mainparticipantinfo --- .../MainParticipantInfo.tsx | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.tsx index de26cc778..080af6052 100644 --- a/src/components/MainParticipantInfo/MainParticipantInfo.tsx +++ b/src/components/MainParticipantInfo/MainParticipantInfo.tsx @@ -8,6 +8,7 @@ import AvatarIcon from '../../icons/AvatarIcon'; import NetworkQualityLevel from '../NetworkQualityLevel/NetworkQualityLevel'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; +import Fade from '@material-ui/core/Fade'; import useIsRecording from '../../hooks/useIsRecording/useIsRecording'; import useIsTrackSwitchedOff from '../../hooks/useIsTrackSwitchedOff/useIsTrackSwitchedOff'; @@ -16,6 +17,7 @@ import usePublications from '../../hooks/usePublications/usePublications'; import useScreenShareParticipant from '../../hooks/useScreenShareParticipant/useScreenShareParticipant'; import useTrack from '../../hooks/useTrack/useTrack'; import useVideoContext from '../../hooks/useVideoContext/useVideoContext'; +import useDominantSpeaker from '../../hooks/useDominantSpeaker/useDominantSpeaker'; const useStyles = makeStyles((theme: Theme) => ({ container: { @@ -152,6 +154,7 @@ export default function MainParticipantInfo({ participant, children }: MainParti const isVideoSwitchedOff = useIsTrackSwitchedOff(videoTrack as LocalVideoTrack | RemoteVideoTrack); const isParticipantReconnecting = useParticipantIsReconnecting(participant); + const dominantSpeaker = useDominantSpeaker(); const isRecording = useIsRecording(); @@ -189,15 +192,19 @@ export default function MainParticipantInfo({ participant, children }: MainParti )}
-
- - Low bandwidth - -
+ {isVideoSwitchedOff && ( +
+ + + Low bandwidth + + +
+ )} {!isVideoEnabled && (
From 127a93eafdd9b3de8698470060613d38a13d6d14 Mon Sep 17 00:00:00 2001 From: Olivia Pyskoty Date: Wed, 7 Sep 2022 14:36:03 -0700 Subject: [PATCH 09/10] update Fade components for faster transition --- .../MainParticipantInfo/MainParticipantInfo.tsx | 8 +------- src/components/ParticipantInfo/ParticipantInfo.tsx | 2 +- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.tsx index 080af6052..ffdc34a76 100644 --- a/src/components/MainParticipantInfo/MainParticipantInfo.tsx +++ b/src/components/MainParticipantInfo/MainParticipantInfo.tsx @@ -17,7 +17,6 @@ import usePublications from '../../hooks/usePublications/usePublications'; import useScreenShareParticipant from '../../hooks/useScreenShareParticipant/useScreenShareParticipant'; import useTrack from '../../hooks/useTrack/useTrack'; import useVideoContext from '../../hooks/useVideoContext/useVideoContext'; -import useDominantSpeaker from '../../hooks/useDominantSpeaker/useDominantSpeaker'; const useStyles = makeStyles((theme: Theme) => ({ container: { @@ -154,7 +153,6 @@ export default function MainParticipantInfo({ participant, children }: MainParti const isVideoSwitchedOff = useIsTrackSwitchedOff(videoTrack as LocalVideoTrack | RemoteVideoTrack); const isParticipantReconnecting = useParticipantIsReconnecting(participant); - const dominantSpeaker = useDominantSpeaker(); const isRecording = useIsRecording(); @@ -194,11 +192,7 @@ export default function MainParticipantInfo({ participant, children }: MainParti
{isVideoSwitchedOff && (
- + Low bandwidth diff --git a/src/components/ParticipantInfo/ParticipantInfo.tsx b/src/components/ParticipantInfo/ParticipantInfo.tsx index 365c13ac6..63c80b6ef 100644 --- a/src/components/ParticipantInfo/ParticipantInfo.tsx +++ b/src/components/ParticipantInfo/ParticipantInfo.tsx @@ -225,7 +225,7 @@ export default function ParticipantInfo({
{isVideoSwitchedOff && (
- + Low bandwidth From e52a0632061a5fbf7736a87aaae965a0deafbd8a Mon Sep 17 00:00:00 2001 From: Olivia Pyskoty Date: Wed, 7 Sep 2022 14:58:54 -0700 Subject: [PATCH 10/10] remove unsued classnames --- .../MainParticipantInfo/MainParticipantInfo.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.tsx index ffdc34a76..d53cdae21 100644 --- a/src/components/MainParticipantInfo/MainParticipantInfo.tsx +++ b/src/components/MainParticipantInfo/MainParticipantInfo.tsx @@ -109,16 +109,6 @@ const useStyles = makeStyles((theme: Theme) => ({ background: '#A90000', }, }, - trackSwitchOffContainer: { - opacity: 0, - visibility: 'hidden', - transition: 'all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1)', - }, - isSwitchedOff: { - opacity: 1, - visibility: 'visible', - transition: 'all 0.5s linear', - }, switchOffMessage: { background: '#1F304C', borderRadius: '100px',