Add switch to uncrop video for user (#187)

src/components/me/Me.tsx

@@ -15,6 +15,7 @@ const Me = ({ style }: MeProps): React.JSX.Element => {
 	const mirroredSelfView = useAppSelector((state) => state.settings.mirroredSelfView);
 	const displayName = useAppSelector((state) => state.settings.displayName);
 	const hideSelfView = useAppSelector((state) => state.settings.hideSelfView);
+	const contain = useAppSelector((state) => state.settings.videoContainEnabled);
 	const id = useAppSelector((state) => state.me.id);
 	const isActiveSpeaker = useIsActiveSpeaker(id);
 	const isMobile = useAppSelector(isMobileSelector);
@@ -30,7 +31,7 @@ const Me = ({ style }: MeProps): React.JSX.Element => {
 					width={style.width}
 					height={style.height}
 				>
-					{ webcamEnabled && <VideoView mirrored={mirroredSelfView} source='webcam' /> }
+					{ webcamEnabled && <VideoView mirrored={mirroredSelfView} contain={contain} source='webcam' /> }
 					{ micEnabled && <Volume /> }
 					{ micEnabled && !isMobile && <UnmuteAlert /> }
 					<DisplayName disabled={false} displayName={displayName} isMe />

src/components/mediapreview/MediaPreview.tsx

@@ -31,6 +31,7 @@ const MediaPreview = ({
 	const aspectRatio = useAppSelector((state) => state.settings.aspectRatio);
 	const audioDevice = useAppSelector((state) => state.settings.selectedAudioDevice);
 	const videoDevice = useAppSelector((state) => state.settings.selectedVideoDevice);
+	const contain = useAppSelector((state) => state.settings.videoContainEnabled);
 
 	useEffect(() => {
 		if (startAudio) dispatch(updatePreviewMic({ newDeviceId: audioDevice, updateSelection }));
@@ -68,7 +69,7 @@ const MediaPreview = ({
 						/>
 					</MediaControls>
 				)}
-				{ previewWebcamTrackId && <VideoView mirrored previewTrack /> }
+				{ previewWebcamTrackId && <VideoView contain={contain} mirrored previewTrack /> }
 			</VideoBox>
 		</>
 	);

src/components/settingsdialog/AppearanceSettings.tsx

@@ -12,6 +12,7 @@ import {
 	mirroredSelfViewLabel,
 	enableNotificationSoundsLabel,
 	enableVerticallyStackedSidePanels,
+	videoContainLabel,
 } from '../translated/translatedComponents';
 import LastNSlider from '../lastnslider/LastNSlider';
 
@@ -23,6 +24,7 @@ const AppearanceSettings = (): JSX.Element => {
 		hideSelfView,
 		notificationSounds,
 		verticalDivide,
+		videoContainEnabled,
 	} = useAppSelector((state) => state.settings);
 
 	const handleChange = (
@@ -89,6 +91,16 @@ const AppearanceSettings = (): JSX.Element => {
 					}
 					label={ enableVerticallyStackedSidePanels() }
 				/>
+				<FormControlLabel
+					control={
+						<Switch
+							checked={ videoContainEnabled }
+							onChange={ (event) => handleChange(event, 'videoContainEnabled') }
+							inputProps={ { 'aria-label': 'controlled' } }
+						/>
+					}
+					label={ videoContainLabel() }
+				/>
 			</FormGroup>
 		</>
 	);

src/components/translated/translatedComponents.tsx

@@ -658,6 +658,11 @@ export const backgroundBlurLabel = (): string => intl.formatMessage({
 	defaultMessage: 'Background blur'
 });
 
+export const videoContainLabel = (): string => intl.formatMessage({
+	id: 'settings.containVideo',
+	defaultMessage: 'Uncrop my video'
+});
+
 export const videoSettingsLabel = (): string => intl.formatMessage({
 	id: 'label.videoSettings',
 	defaultMessage: 'Video settings'

src/components/windowedvideo/WindowedVideo.tsx

@@ -12,6 +12,7 @@ const WindowedVideo = (): JSX.Element => {
 	const sessionId = useAppSelector((state) => state.me.sessionId);
 	const consumers = useAppSelector(windowedConsumersSelector);
 	const aspectRatio = useAppSelector((state) => state.settings.aspectRatio);
+	const contain = useAppSelector((state) => state.settings.videoContainEnabled);
 
 	const [ consumersToRender, setConsumersToRender ] = useState<StateConsumer[]>(consumers);
 
@@ -35,7 +36,7 @@ const WindowedVideo = (): JSX.Element => {
 							height: '100%'
 						}}
 					>
-						<VideoView consumer={consumer} contain roundedCorners={false} />
+						<VideoView consumer={consumer} contain={contain} roundedCorners={false} />
 					</VideoBox>
 				</SeparateWindow>
 			))}

src/store/slices/settingsSlice.tsx

@@ -36,6 +36,7 @@ export interface SettingsState {
 	notificationSounds: boolean;
 	locale?: string;
 	blurEnabled?: boolean;
+	videoContainEnabled?: boolean;
 }
 
 type SettingsUpdate = Partial<SettingsState>;
@@ -70,6 +71,7 @@ const initialState: SettingsState = {
 	notificationSounds: true,
 	locale: detect(),
 	blurEnabled: false,
+	videoContainEnabled: true,
 };
 
 const settingsSlice = createSlice({
@@ -172,6 +174,9 @@ const settingsSlice = createSlice({
 		setBlurEnabled: ((state, action: PayloadAction<boolean>) => {
 			state.blurEnabled = action.payload;
 		}),
+		setVideoContainEnabled: ((state, action: PayloadAction<boolean>) => {
+			state.videoContainEnabled = action.payload;
+		}),
 	},
 });
 

src/translations/en.json

@@ -195,6 +195,7 @@
 	"settings.cantSelectAudioOutput": "Unable to select audio output device",
 	"settings.cantSelectCamera": "Unable to select video device",
 	"settings.channelCount": "Select the audio channel count",
+	"settings.containVideo": "Uncrop my video",
 	"settings.echoCancellation": "Echo cancellation",
 	"settings.enableOpusDetails": "Enable OPUS details (page reload required)",
 	"settings.frameRate": "Select your video frame rate",