feat: Add "Auto" video scaling option and dynamically adjust video object-fit and transform based on scale value.

Author: wj-xiao

browser/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { CSSProperties, useEffect, useMemo, useState } from 'react';
 import { Alert, Result, Spin } from 'antd';
 import clsx from 'clsx';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
@@ -55,6 +55,30 @@ const App = () => {
     setShouldSwapDimensions(videoRotation === 90 || videoRotation === 270);
   }, [videoRotation]);
 
+  const videoStyle = useMemo(() => {
+    const baseStyle = {
+      transformOrigin: 'center',
+      maxWidth: shouldSwapDimensions ? '100vh' : '100%',
+      maxHeight: shouldSwapDimensions ? '100vw' : '100%'
+    };
+
+    if (videoScale === 0) {
+      return {
+        ...baseStyle,
+        width: shouldSwapDimensions ? '100vh' : '100%',
+        height: shouldSwapDimensions ? '100vw' : '100%',
+        objectFit: 'contain',
+        transform: `rotate(${videoRotation}deg)`
+      };
+    }
+
+    return {
+      ...baseStyle,
+      objectFit: 'scale-down',
+      transform: `scale(${videoScale}) rotate(${videoRotation}deg)`
+    };
+  }, [videoScale, videoRotation, shouldSwapDimensions]);
+
   function initResolution() {
     const resolution = storage.getVideoResolution();
     if (resolution) {
@@ -130,13 +154,7 @@ const App = () => {
           shouldSwapDimensions ? 'min-h-[640px] min-w-[360px]' : 'min-h-[360px] min-w-[640px]',
           mouseStyle
         )}
-        style={{
-          transform: `scale(${videoScale}) rotate(${videoRotation}deg)`,
-          transformOrigin: 'center',
-          maxWidth: shouldSwapDimensions ? '100vh' : '100%',
-          maxHeight: shouldSwapDimensions ? '100vw' : '100%',
-          objectFit: 'scale-down'
-        }}
+        style={videoStyle as CSSProperties}
         autoPlay
         playsInline
       />

browser/src/components/menu/video/scale.tsx

@@ -8,19 +8,20 @@ import { useTranslation } from 'react-i18next';
 import { videoScaleAtom } from '@/jotai/device.ts';
 import * as storage from '@/libs/storage';
 
-const ScaleList = [
-  { label: '200', value: 2 },
-  { label: '150', value: 1.5 },
-  { label: '100', value: 1 },
-  { label: '75', value: 0.75 },
-  { label: '50', value: 0.5 }
-];
-
 export const Scale = (): ReactElement => {
   const { t } = useTranslation();
 
   const [videoScale, setVideoScale] = useAtom(videoScaleAtom);
 
+  const ScaleList = [
+    { label: t('video.auto'), value: 0 },
+    { label: '200', value: 2 },
+    { label: '150', value: 1.5 },
+    { label: '100', value: 1 },
+    { label: '75', value: 0.75 },
+    { label: '50', value: 0.5 }
+  ];
+
   useEffect(() => {
     const scale = storage.getVideoScale();
     if (scale) {
@@ -45,7 +46,7 @@ export const Scale = (): ReactElement => {
           onClick={() => updateScale(item.value)}
         >
           <span>{item.label}</span>
-          <PercentIcon size={12} />
+          {item.value > 0 && <PercentIcon size={12} />}
         </div>
       ))}
     </>

browser/src/i18n/locales/en.ts

@@ -25,6 +25,7 @@ const en = {
     video: {
       resolution: 'Resolution',
       scale: 'Scale',
+      auto: "Auto",
       rotation: 'Rotation',
       customResolution: 'Custom',
       device: 'Device',

browser/src/i18n/locales/zh.ts

@@ -23,6 +23,7 @@ const zh = {
     video: {
       resolution: '分辨率',
       scale: '缩放',
+      auto: '自动',
       rotation: '旋转',
       customResolution: '自定义',
       device: '设备',