Skip to content

Commit

Permalink
Merge pull request #94 from cloudflare/data-saver-mode
Browse files Browse the repository at this point in the history
Add data saver mode
  • Loading branch information
third774 authored Aug 22, 2024
2 parents 4af2783 + 997da28 commit 7cc2ced
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 3 deletions.
8 changes: 8 additions & 0 deletions app/components/OverflowMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)}
>
Expand Down
4 changes: 2 additions & 2 deletions app/components/Participant.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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'
)}
Expand Down
2 changes: 2 additions & 0 deletions app/hooks/useRoomContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion app/routes/_room.$roomName.room.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
const {
userMedia,
peer,
dataSaverMode,
pushedTracks,
room: { otherUsers, websocket, identity },
} = useRoomContext()
Expand Down Expand Up @@ -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 }) => (
Expand Down
3 changes: 3 additions & 0 deletions app/routes/_room.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -176,6 +177,8 @@ function Room() {
const context: RoomContextType = {
joined,
setJoined,
dataSaverMode,
setDataSaverMode,
traceLink,
userMedia,
userDirectoryUrl,
Expand Down

0 comments on commit 7cc2ced

Please sign in to comment.