From 997da2842c053cd75a9f23eff58329c3e025b102 Mon Sep 17 00:00:00 2001
From: Kevin Kipp <kkipp@cloudflare.com>
Date: Wed, 21 Aug 2024 19:48:10 -0500
Subject: [PATCH] Add data saver mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When enabled, this will stop pulling video tracks from other users—but
only their webcams. Screensharing will still be pulled since it is more
critical to understanding.
---
 app/components/OverflowMenu.tsx     | 8 ++++++++
 app/components/Participant.tsx      | 4 ++--
 app/hooks/useRoomContext.ts         | 2 ++
 app/routes/_room.$roomName.room.tsx | 3 ++-
 app/routes/_room.tsx                | 3 +++
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/components/OverflowMenu.tsx b/app/components/OverflowMenu.tsx
index ddc19831..a646ee13 100644
--- a/app/components/OverflowMenu.tsx
+++ b/app/components/OverflowMenu.tsx
@@ -17,6 +17,8 @@ interface OverflowMenuProps {
 export const OverflowMenu: FC<OverflowMenuProps> = ({ bugReportsEnabled }) => {
 	const {
 		room: { otherUsers, identity },
+		dataSaverMode,
+		setDataSaverMode,
 	} = useRoomContext()
 	const [settingsMenuOpen, setSettingMenuOpen] = useState(false)
 	const [bugReportMenuOpen, setBugReportMenuOpen] = useState(false)
@@ -33,6 +35,12 @@ export const OverflowMenu: FC<OverflowMenuProps> = ({ bugReportsEnabled }) => {
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Portal>
 					<DropdownMenu.Content sideOffset={5}>
+						<DropdownMenu.Item
+							onSelect={() => setDataSaverMode(!dataSaverMode)}
+						>
+							<Icon type="WifiIcon" className="mr-2" />
+							{dataSaverMode ? 'Disable Data Saver' : 'Enable Data Saver'}
+						</DropdownMenu.Item>
 						<DropdownMenu.Item
 							onSelect={() => navigator.clipboard.writeText(roomUrl)}
 						>
diff --git a/app/components/Participant.tsx b/app/components/Participant.tsx
index 73ef484b..3a1db3e8 100644
--- a/app/components/Participant.tsx
+++ b/app/components/Participant.tsx
@@ -53,7 +53,7 @@ export const Participant = forwardRef<
 		ref
 	) => {
 		const { data } = useUserMetadata(user.name)
-		const { traceLink, peer } = useRoomContext()
+		const { traceLink, peer, dataSaverMode } = useRoomContext()
 
 		useDeadPulledTrackMonitor(
 			user.tracks.video,
@@ -148,7 +148,7 @@ export const Participant = forwardRef<
 								{
 									'opacity-100': isScreenShare
 										? user.tracks.screenShareEnabled
-										: user.tracks.videoEnabled,
+										: user.tracks.videoEnabled && (!dataSaverMode || isSelf),
 								},
 								isSelf && isScreenShare && 'opacity-75'
 							)}
diff --git a/app/hooks/useRoomContext.ts b/app/hooks/useRoomContext.ts
index 9841de01..fbcb7d29 100644
--- a/app/hooks/useRoomContext.ts
+++ b/app/hooks/useRoomContext.ts
@@ -11,6 +11,8 @@ export type RoomContextType = {
 	userDirectoryUrl?: string
 	joined: boolean
 	setJoined: Dispatch<SetStateAction<boolean>>
+	dataSaverMode: boolean
+	setDataSaverMode: Dispatch<SetStateAction<boolean>>
 	userMedia: UserMedia
 	peer: RxjsPeer
 	iceConnectionState: RTCIceConnectionState
diff --git a/app/routes/_room.$roomName.room.tsx b/app/routes/_room.$roomName.room.tsx
index 1ea9ab54..651c958d 100644
--- a/app/routes/_room.$roomName.room.tsx
+++ b/app/routes/_room.$roomName.room.tsx
@@ -123,6 +123,7 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
 	const {
 		userMedia,
 		peer,
+		dataSaverMode,
 		pushedTracks,
 		room: { otherUsers, websocket, identity },
 	} = useRoomContext()
@@ -242,7 +243,7 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
 						{actorsOnStage.map((user) => (
 							<Fragment key={user.id}>
 								<PullVideoTrack
-									video={user.tracks.video}
+									video={dataSaverMode ? undefined : user.tracks.video}
 									audio={user.tracks.audio}
 								>
 									{({ videoTrack, audioTrack }) => (
diff --git a/app/routes/_room.tsx b/app/routes/_room.tsx
index ddba34a6..c41a4b53 100644
--- a/app/routes/_room.tsx
+++ b/app/routes/_room.tsx
@@ -100,6 +100,7 @@ function tryToGetDimensions(videoStreamTrack?: MediaStreamTrack) {
 
 function Room() {
 	const [joined, setJoined] = useState(false)
+	const [dataSaverMode, setDataSaverMode] = useState(false)
 	const { roomName } = useParams()
 	invariant(roomName)
 
@@ -176,6 +177,8 @@ function Room() {
 	const context: RoomContextType = {
 		joined,
 		setJoined,
+		dataSaverMode,
+		setDataSaverMode,
 		traceLink,
 		userMedia,
 		userDirectoryUrl,