feat: Add Crop Factor Mode (#242)

web/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.68",
+  "version": "0.4.69",
   "type": "module",
   "scripts": {
     "dev": "vite",

web/src/core/photo.ts

@@ -65,6 +65,10 @@ class Photo {
    * @example '24mm'
    */
   public get focalLength(): string {
+    if (localStorage.getItem('focalLengthRatioMode') === 'true') {
+      const focalLength = parseFloat(this.metadata?.focalLength?.replace(' mm', '') || '0');
+      return (focalLength * parseFloat(localStorage.getItem('focalLengthRatio') || '1')).toFixed(0) + 'mm';
+    }
     return localStorage.getItem('focalLength35mmMode') === 'false' ? this.metadata.focalLength || '' : this.metadata.focalLengthIn35mm || '';
   }
 

web/src/locales/translations/en.json

@@ -57,6 +57,8 @@
   "root.settings.quality": "Quality",
   "root.settings.fix-image-width": "Fix Image Width",
   "root.settings.focal-length-35mm-mode": "Focal Length 35mm Mode",
+  "root.settings.focal-length-ratio": "Crop Factor",
+  "root.settings.focal-length-ratio-mode": "Fixed Crop Factor",
   "root.settings.disable-exposure-meter": "Disable Exposure Meter",
   "root.settings.image-width": "Image Width (px)",
   "root.settings.fix-watermark": "Add Watermark",

web/src/locales/translations/ja.json

@@ -57,6 +57,8 @@
   "root.settings.quality": "画質",
   "root.settings.fix-image-width": "画像幅を固定",
   "root.settings.focal-length-35mm-mode": "35mm換算焦点距離",
+  "root.settings.focal-length-ratio": "焦点距離比率",
+  "root.settings.focal-length-ratio-mode": "焦点距離比率モード",
   "root.settings.disable-exposure-meter": "露出計を無効化",
   "root.settings.image-width": "画像幅(px)",
   "root.settings.fix-watermark": "ウォーターマーク",

web/src/locales/translations/ko.json

@@ -58,6 +58,8 @@
   "root.settings.quality": "품질",
   "root.settings.fix-image-width": "사진 너비 고정",
   "root.settings.focal-length-35mm-mode": "35mm 환산 화각 표시",
+  "root.settings.focal-length-ratio": "크롭 팩터",
+  "root.settings.focal-length-ratio-mode": "크롭 팩터 강제 변경",
   "root.settings.disable-exposure-meter": "노출계 표시 끄기",
   "root.settings.image-width": "사진 너비 (px)",
   "root.settings.fix-watermark": "워터마크 설정",

web/src/pages/setting/components/focal-length-35mm-mode.list-item.tsx

@@ -5,7 +5,9 @@ import CameraIcon from '../../../icons/camera.icon';
 
 const FocalLength35mmModeListItem = () => {
   const { t } = useTranslation();
-  const { focalLength35mmMode, setFocalLength35mmMode } = useStore();
+  const { focalLengthRatioMode, focalLength35mmMode, setFocalLength35mmMode } = useStore();
+
+  if (focalLengthRatioMode) return null;
 
   return (
     <ListItem

web/src/pages/setting/components/focal-length-ratio-mode.list-item.tsx

@@ -0,0 +1,32 @@
+import { ListInput, ListItem, Toggle } from 'konsta/react';
+import { useStore } from '../../../store';
+import { useTranslation } from 'react-i18next';
+import CameraIcon from '../../../icons/camera.icon';
+
+const FocalLengthRatioModeListItem = () => {
+  const { t } = useTranslation();
+  const { focalLengthRatioMode, setFocalLengthRatioMode, focalLengthRatio, setFocalLengthRatio } = useStore();
+
+  return (
+    <>
+      <ListItem
+        title={t('root.settings.focal-length-ratio-mode')}
+        media={<CameraIcon size={26} />}
+        after={<Toggle checked={focalLengthRatioMode} onChange={() => setFocalLengthRatioMode(!focalLengthRatioMode)} />}
+      />
+
+      {focalLengthRatioMode && (
+        <ListInput
+          floatingLabel
+          info={`35mm FF = 1, APS-C = 1.5, APS-C(Canon) = 1.6, Four Thirds = 2, 1" = 2.7`}
+          label={t('root.settings.focal-length-ratio')}
+          type="number"
+          value={focalLengthRatio}
+          onChange={(e) => setFocalLengthRatio(e.target.value)}
+        />
+      )}
+    </>
+  );
+};
+
+export default FocalLengthRatioModeListItem;

web/src/pages/setting/page.tsx

@@ -29,6 +29,7 @@ import PrivacyPolicyListItem from './components/privacy-policy.list-item';
 import { useStore } from '../../store';
 import SponsorKakaopayListItem from './components/sponsor-kakaopay.list-item';
 import SponsorsListItem from './components/sponsors.list-item';
+import FocalLengthRatioModeListItem from './components/focal-length-ratio-mode.list-item';
 
 const ExportSettingsPage = () => {
   const { t } = useTranslation();
@@ -48,6 +49,7 @@ const ExportSettingsPage = () => {
         <ExportToJpegListItem />
         <QualityListItem />
         <FixImageWidthListItem />
+        <FocalLengthRatioModeListItem />
         <FocalLength35mmModeListItem />
         <RatioListItem />
       </List>

web/src/store.ts

@@ -78,6 +78,12 @@ type Store = {
   focalLength35mmMode: boolean;
   setFocalLength35mmMode: (focalLength35mmMode: boolean) => void;
 
+  focalLengthRatioMode: boolean;
+  setFocalLengthRatioMode: (focalLengthRatioMode: boolean) => void;
+
+  focalLengthRatio: number;
+  setFocalLengthRatio: (focalLengthRatio: number) => void;
+
   disableExposureMeter: boolean;
   setDisableExposureMeter: (disableExposureMeter: boolean) => void;
 
@@ -236,6 +242,20 @@ const useStore = create<Store>((set) => ({
       return { focalLength35mmMode };
     }),
 
+  focalLengthRatioMode: localStorage.getItem('focalLengthRatioMode') === 'true',
+  setFocalLengthRatioMode: (focalLengthRatioMode: boolean) =>
+    set(() => {
+      localStorage.setItem('focalLengthRatioMode', focalLengthRatioMode.toString());
+      return { focalLengthRatioMode };
+    }),
+
+  focalLengthRatio: parseFloat(localStorage.getItem('focalLengthRatio') || '1'),
+  setFocalLengthRatio: (focalLengthRatio: number) =>
+    set(() => {
+      localStorage.setItem('focalLengthRatio', focalLengthRatio.toString());
+      return { focalLengthRatio };
+    }),
+
   disableExposureMeter: localStorage.getItem('disableExposureMeter') === 'true',
   setDisableExposureMeter: (disableExposureMeter: boolean) =>
     set(() => {