Add data saver mode

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,