Add data saver mode

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

@@ -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)}
 						>

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

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

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 }) => (

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,