@@ -34,12 +51,16 @@ export function ModeCarousel({ current, onChange }: Props) {
{MODES.map((mode, idx) => {
const isActive = mode.id === current;
diff --git a/src/components/ProControlBar.test.tsx b/src/components/ProControlBar.test.tsx
new file mode 100644
index 0000000..0ff80dc
--- /dev/null
+++ b/src/components/ProControlBar.test.tsx
@@ -0,0 +1,85 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { ProControlBar } from './ProControlBar';
+import type { CameraSettings } from '../types/camera';
+
+const settings: CameraSettings = {
+ iso: 100,
+ shutterSpeed: '1/125',
+ ev: 0,
+ whiteBalance: 'Auto',
+ kelvin: 5500,
+ tint: 0,
+ focusMode: 'AF-S',
+ focusPeaking: false,
+ focusPeakingColor: 'red',
+ manualFocus: 50,
+ meteringMode: 'Matrix',
+ driveMode: 'Single',
+ flashMode: 'Auto',
+ aspectRatio: '4:3',
+ fileFormat: 'JPEG',
+ colorProfile: 'Natural',
+ zebraStripes: false,
+ zebraThreshold: 95,
+ histogram: true,
+ gridOverlay: 'RuleOfThirds',
+ horizonLevel: false,
+ liveNoise: false,
+ stabilization: 'Standard',
+ anamorphic: false,
+ videoResolution: '4K',
+ videoFps: '30',
+ audioLevel: 75,
+ windFilter: true,
+ stereoAudio: true,
+ zoomLevel: 1,
+ eyeAF: true,
+ faceDetection: true,
+ subjectTracking: false,
+ nightModeFrames: 8,
+ hdrMode: false,
+ location: null,
+};
+
+afterEach(() => cleanup());
+
+describe('ProControlBar', () => {
+ it('renders without crashing in photo mode', () => {
+ render(
);
+ expect(screen.getByText('ISO')).toBeDefined();
+ });
+
+ it('hides shutter control in photo mode', () => {
+ render(
);
+ expect(screen.queryByText('SHUTTER')).toBeNull();
+ });
+
+ it('shows shutter control in pro mode', () => {
+ render(
);
+ expect(screen.getByText('SHUTTER')).toBeDefined();
+ });
+
+ it('opens ISO panel on click', () => {
+ render(
);
+ const isoButton = screen.getByRole('button', { name: /ISO/ });
+ fireEvent.click(isoButton);
+ expect(screen.getByText('ISO SENSITIVITY')).toBeDefined();
+ });
+
+ it('updates ISO setting when a value is clicked in panel', () => {
+ const updateSetting = vi.fn();
+ render(
);
+ const isoButton = screen.getByRole('button', { name: /ISO/ });
+ fireEvent.click(isoButton);
+ const iso400Button = screen.getByText('400');
+ fireEvent.click(iso400Button);
+ expect(updateSetting).toHaveBeenCalledWith('iso', 400);
+ });
+
+ it('shows audio and stabilization controls in video mode', () => {
+ render(
);
+ expect(screen.getByText('AUDIO')).toBeDefined();
+ expect(screen.getByText('STAB')).toBeDefined();
+ });
+});
diff --git a/src/components/SettingsPanel.test.tsx b/src/components/SettingsPanel.test.tsx
new file mode 100644
index 0000000..26aaa63
--- /dev/null
+++ b/src/components/SettingsPanel.test.tsx
@@ -0,0 +1,122 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { SettingsPanel } from './SettingsPanel';
+import type { CameraSettings, CustomPreset } from '../types/camera';
+
+const defaultSettings: CameraSettings = {
+ iso: 100,
+ shutterSpeed: '1/125',
+ ev: 0,
+ whiteBalance: 'Auto',
+ kelvin: 5500,
+ tint: 0,
+ focusMode: 'AF-S',
+ focusPeaking: false,
+ focusPeakingColor: 'red',
+ manualFocus: 50,
+ meteringMode: 'Matrix',
+ driveMode: 'Single',
+ flashMode: 'Auto',
+ aspectRatio: '4:3',
+ fileFormat: 'JPEG',
+ colorProfile: 'Natural',
+ zebraStripes: false,
+ zebraThreshold: 95,
+ histogram: true,
+ gridOverlay: 'RuleOfThirds',
+ horizonLevel: false,
+ liveNoise: false,
+ stabilization: 'Standard',
+ anamorphic: false,
+ videoResolution: '4K',
+ videoFps: '30',
+ audioLevel: 75,
+ windFilter: true,
+ stereoAudio: true,
+ zoomLevel: 1,
+ eyeAF: true,
+ faceDetection: true,
+ subjectTracking: false,
+ nightModeFrames: 8,
+ hdrMode: false,
+ location: null,
+};
+
+const defaultPresets: CustomPreset[] = [];
+
+function renderSettingsPanel(overrides: Partial
[0]> = {}) {
+ return render(
+
+ );
+}
+
+afterEach(() => cleanup());
+
+describe('SettingsPanel', () => {
+ it('renders without crashing', () => {
+ renderSettingsPanel();
+ expect(screen.getByText('Settings')).toBeDefined();
+ });
+
+ it('switches to Geo section', () => {
+ renderSettingsPanel();
+ const geoTab = screen.getByRole('button', { name: 'Geo' });
+ fireEvent.click(geoTab);
+ expect(screen.getByText('Geotagging & Metadata')).toBeDefined();
+ });
+
+ it('switches to Presets section', () => {
+ renderSettingsPanel();
+ const presetsTab = screen.getByRole('button', { name: 'Presets' });
+ fireEvent.click(presetsTab);
+ expect(screen.getByText('Custom Presets')).toBeDefined();
+ });
+
+ it('toggles an overlay setting', () => {
+ const updateSetting = vi.fn();
+ renderSettingsPanel({ updateSetting });
+ const overlaysTab = screen.getByRole('button', { name: 'Overlays' });
+ fireEvent.click(overlaysTab);
+ const label = screen.getByText('Live Histogram');
+ const toggle = label.parentElement?.parentElement?.querySelector('button');
+ expect(toggle).toBeDefined();
+ fireEvent.click(toggle!);
+ expect(updateSetting).toHaveBeenCalledWith('histogram', false);
+ });
+
+ it('saves a new preset', () => {
+ const savePreset = vi.fn();
+ renderSettingsPanel({ savePreset });
+ const presetsTab = screen.getByRole('button', { name: 'Presets' });
+ fireEvent.click(presetsTab);
+ const presetNameInput = screen.getByPlaceholderText('Preset name...');
+ fireEvent.change(presetNameInput, { target: { value: 'My Preset' } });
+ // The save button has an SVG icon (Save) and no text
+ const saveButton = screen.getAllByRole('button').find((b) =>
+ b.querySelector('svg') !== null && b.textContent === ''
+ );
+ expect(saveButton).toBeDefined();
+ fireEvent.click(saveButton!);
+ expect(savePreset).toHaveBeenCalledWith('My Preset');
+ });
+
+ it('does not save preset with empty name', () => {
+ const savePreset = vi.fn();
+ renderSettingsPanel({ savePreset });
+ const presetsTab = screen.getByRole('button', { name: 'Presets' });
+ fireEvent.click(presetsTab);
+ const saveButton = screen.getAllByRole('button').find((b) =>
+ b.querySelector('svg') !== null && b.textContent === ''
+ );
+ fireEvent.click(saveButton!);
+ expect(savePreset).not.toHaveBeenCalled();
+ });
+});
diff --git a/src/components/ShotLog.test.tsx b/src/components/ShotLog.test.tsx
new file mode 100644
index 0000000..53b385a
--- /dev/null
+++ b/src/components/ShotLog.test.tsx
@@ -0,0 +1,24 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { ShotLog } from './ShotLog';
+
+afterEach(() => cleanup());
+
+describe('ShotLog', () => {
+ it('renders without crashing', () => {
+ render();
+ expect(screen.getByText('Shot Log')).toBeDefined();
+ });
+
+ it('displays session count', () => {
+ render();
+ expect(screen.getByText(/sessions recorded/)).toBeDefined();
+ });
+
+ it('toggles entry expansion', () => {
+ render();
+ const proEntry = screen.getByText('PRO');
+ fireEvent.click(proEntry.closest('button')!);
+ expect(screen.getByText('Golden Gate Bridge, SF')).toBeDefined();
+ });
+});
diff --git a/src/components/Viewfinder.test.tsx b/src/components/Viewfinder.test.tsx
new file mode 100644
index 0000000..e1c68bc
--- /dev/null
+++ b/src/components/Viewfinder.test.tsx
@@ -0,0 +1,139 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { Viewfinder } from './Viewfinder';
+import type { CameraSettings } from '../types/camera';
+
+const settings: CameraSettings = {
+ iso: 100,
+ shutterSpeed: '1/125',
+ ev: 0,
+ whiteBalance: 'Auto',
+ kelvin: 5500,
+ tint: 0,
+ focusMode: 'AF-S',
+ focusPeaking: false,
+ focusPeakingColor: 'red',
+ manualFocus: 50,
+ meteringMode: 'Matrix',
+ driveMode: 'Single',
+ flashMode: 'Auto',
+ aspectRatio: '4:3',
+ fileFormat: 'JPEG',
+ colorProfile: 'Natural',
+ zebraStripes: false,
+ zebraThreshold: 95,
+ histogram: true,
+ gridOverlay: 'RuleOfThirds',
+ horizonLevel: false,
+ liveNoise: false,
+ stabilization: 'Standard',
+ anamorphic: false,
+ videoResolution: '4K',
+ videoFps: '30',
+ audioLevel: 75,
+ windFilter: true,
+ stereoAudio: true,
+ zoomLevel: 1,
+ eyeAF: true,
+ faceDetection: true,
+ subjectTracking: false,
+ nightModeFrames: 8,
+ hdrMode: false,
+ location: null,
+};
+
+afterEach(() => cleanup());
+
+describe('Viewfinder', () => {
+ it('renders without crashing in photo mode', () => {
+ render(
+
+ );
+ expect(screen.getByText(/PHOTO/)).toBeDefined();
+ });
+
+ it('displays recording indicator when recording', () => {
+ render(
+
+ );
+ expect(screen.getByText(/0:00/)).toBeDefined();
+ });
+
+ const getShutterButton = () => {
+ // The shutter button contains a div with w-20 h-20 (outer ring)
+ return screen.getAllByRole('button').find((b) =>
+ b.querySelector('div[class*="w-20"][class*="h-20"]') !== null
+ );
+ };
+
+ it('calls toggleRecording when record button is clicked in video mode', () => {
+ const toggleRecording = vi.fn();
+ render(
+
+ );
+ const shutterButton = getShutterButton();
+ expect(shutterButton).toBeDefined();
+ fireEvent.click(shutterButton!);
+ expect(toggleRecording).toHaveBeenCalled();
+ });
+
+ it('calls triggerShutter when shutter button is clicked in photo mode', () => {
+ const triggerShutter = vi.fn();
+ render(
+
+ );
+ const shutterButton = getShutterButton();
+ expect(shutterButton).toBeDefined();
+ fireEvent.click(shutterButton!);
+ expect(triggerShutter).toHaveBeenCalled();
+ });
+
+ it('displays ISO, shutter, and EV info', () => {
+ render(
+
+ );
+ expect(screen.getByText('ISO 100')).toBeDefined();
+ expect(screen.getByText(/1\/125/)).toBeDefined();
+ expect(screen.getByText(/EV/)).toBeDefined();
+ });
+});
diff --git a/src/components/ViewfinderOverlays.test.tsx b/src/components/ViewfinderOverlays.test.tsx
new file mode 100644
index 0000000..98e7417
--- /dev/null
+++ b/src/components/ViewfinderOverlays.test.tsx
@@ -0,0 +1,90 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { ViewfinderOverlays } from './ViewfinderOverlays';
+import type { CameraSettings } from '../types/camera';
+
+const settings: CameraSettings = {
+ iso: 100,
+ shutterSpeed: '1/125',
+ ev: 0,
+ whiteBalance: 'Auto',
+ kelvin: 5500,
+ tint: 0,
+ focusMode: 'AF-S',
+ focusPeaking: false,
+ focusPeakingColor: 'red',
+ manualFocus: 50,
+ meteringMode: 'Matrix',
+ driveMode: 'Single',
+ flashMode: 'Auto',
+ aspectRatio: '4:3',
+ fileFormat: 'JPEG',
+ colorProfile: 'Natural',
+ zebraStripes: false,
+ zebraThreshold: 95,
+ histogram: true,
+ gridOverlay: 'None',
+ horizonLevel: false,
+ liveNoise: false,
+ stabilization: 'Standard',
+ anamorphic: false,
+ videoResolution: '4K',
+ videoFps: '30',
+ audioLevel: 75,
+ windFilter: true,
+ stereoAudio: true,
+ zoomLevel: 1,
+ eyeAF: false,
+ faceDetection: false,
+ subjectTracking: false,
+ nightModeFrames: 8,
+ hdrMode: false,
+ location: null,
+};
+
+afterEach(() => cleanup());
+
+describe('ViewfinderOverlays', () => {
+ it('renders without crashing', () => {
+ render();
+ expect(screen.getByText('0')).toBeDefined(); // EV scale center tick
+ });
+
+ it('renders grid overlay when RuleOfThirds is set', () => {
+ const { container } = render(
+
+ );
+ // Grid lines are absolutely positioned 1px divs
+ const gridLines = container.querySelectorAll('div[style*="left: 33.33%"]');
+ expect(gridLines.length).toBeGreaterThanOrEqual(1);
+ });
+
+ it('renders focus peaking when enabled', () => {
+ const { container } = render(
+
+ );
+ const peaking = container.querySelector('div[style*="mixBlendMode"]');
+ expect(peaking).toBeDefined();
+ });
+
+ it('renders zebra stripes when enabled', () => {
+ const { container } = render(
+
+ );
+ const zebra = container.querySelector('div[style*="repeating-linear-gradient"]');
+ expect(zebra).toBeDefined();
+ });
+
+ it('renders shutter flash when shooting', () => {
+ const { container } = render();
+ const flash = container.querySelector('div[style*="animationDuration"]');
+ expect(flash).toBeDefined();
+ });
+
+ it('displays EV scale ticks', () => {
+ render();
+ expect(screen.getByText('0')).toBeDefined();
+ expect(screen.getByText('-3')).toBeDefined();
+ expect(screen.getByText('+3')).toBeDefined();
+ });
+});
diff --git a/src/hooks/useCameraSettings.ts b/src/hooks/useCameraSettings.ts
index 6e0ce67..0b50cdd 100644
--- a/src/hooks/useCameraSettings.ts
+++ b/src/hooks/useCameraSettings.ts
@@ -1,5 +1,5 @@
import { useState, useCallback, useEffect } from 'react';
-import type { CameraSettings, ShootingMode, CustomPreset } from '../types/camera';
+import type { CameraSettings, CustomPreset, ShootingMode } from '../types/camera';
const ISO_VALUES = [50, 100, 200, 400, 800, 1600, 3200, 6400, 12800];
const SHUTTER_SPEEDS = [
@@ -8,6 +8,14 @@ const SHUTTER_SPEEDS = [
'8"', '15"', '30"', 'BULB'
];
+const STORAGE_KEYS = {
+ mode: 'procam-mode',
+ settings: 'procam-settings',
+ presets: 'procam-presets',
+} as const;
+
+const MAX_PRESETS = 50;
+
const defaultSettings: CameraSettings = {
iso: 100,
shutterSpeed: '1/125',
@@ -44,7 +52,7 @@ const defaultSettings: CameraSettings = {
subjectTracking: false,
nightModeFrames: 8,
hdrMode: false,
- location: { lat: 37.7749, lng: -122.4194, alt: 52 },
+ location: null,
};
const defaultPresets: CustomPreset[] = [
@@ -53,60 +61,139 @@ const defaultPresets: CustomPreset[] = [
{ id: '3', name: 'Cinema LOG', settings: { iso: 800, shutterSpeed: '1/50', colorProfile: 'LOG', stabilization: 'Active', anamorphic: true } },
];
-function loadFromStorage(key: string, fallback: T): T {
+const VALID_MODES: ShootingMode[] = [
+ 'photo', 'video', 'pro', 'night', 'portrait', 'panorama', 'slowmo',
+ 'timelapse', 'macro', 'astro', 'cinema', 'burst',
+];
+
+function isFiniteNumber(value: unknown): value is number {
+ return typeof value === 'number' && Number.isFinite(value);
+}
+
+function isValidLocation(value: unknown): value is { lat: number; lng: number; alt: number } | null {
+ if (value === null) return true;
+ if (typeof value !== 'object' || value === null) return false;
+ const loc = value as Record;
+ return (
+ isFiniteNumber(loc.lat) && loc.lat >= -90 && loc.lat <= 90 &&
+ isFiniteNumber(loc.lng) && loc.lng >= -180 && loc.lng <= 180 &&
+ isFiniteNumber(loc.alt)
+ );
+}
+
+function isValidCameraSettings(value: unknown): value is Partial {
+ if (typeof value !== 'object' || value === null) return false;
+ const s = value as Record;
+
+ if (s.iso !== undefined && (!isFiniteNumber(s.iso) || !ISO_VALUES.includes(s.iso))) return false;
+ if (s.shutterSpeed !== undefined && typeof s.shutterSpeed !== 'string') return false;
+ if (s.ev !== undefined && (!isFiniteNumber(s.ev) || s.ev < -3 || s.ev > 3)) return false;
+ if (s.kelvin !== undefined && (!isFiniteNumber(s.kelvin) || s.kelvin < 2300 || s.kelvin > 10000)) return false;
+ if (s.tint !== undefined && (!isFiniteNumber(s.tint) || s.tint < -50 || s.tint > 50)) return false;
+ if (s.manualFocus !== undefined && (!isFiniteNumber(s.manualFocus) || s.manualFocus < 0 || s.manualFocus > 100)) return false;
+ if (s.zebraThreshold !== undefined && (!isFiniteNumber(s.zebraThreshold) || s.zebraThreshold < 70 || s.zebraThreshold > 100)) return false;
+ if (s.audioLevel !== undefined && (!isFiniteNumber(s.audioLevel) || s.audioLevel < 0 || s.audioLevel > 100)) return false;
+ if (s.zoomLevel !== undefined && (!isFiniteNumber(s.zoomLevel) || s.zoomLevel < 0.6 || s.zoomLevel > 100)) return false;
+ if (s.nightModeFrames !== undefined && !Number.isInteger(s.nightModeFrames)) return false;
+ if (s.location !== undefined && !isValidLocation(s.location)) return false;
+
+ return true;
+}
+
+function isValidPreset(value: unknown): value is CustomPreset {
+ if (typeof value !== 'object' || value === null) return false;
+ const p = value as Record;
+ return (
+ typeof p.id === 'string' && p.id.length > 0 &&
+ typeof p.name === 'string' && p.name.length > 0 &&
+ isValidCameraSettings(p.settings)
+ );
+}
+
+function loadFromStorage(key: string, fallback: T, sanitize?: (value: unknown) => T | null): T {
try {
const raw = localStorage.getItem(key);
- if (raw !== null) return JSON.parse(raw) as T;
+ if (raw === null) return fallback;
+ const parsed = JSON.parse(raw);
+ if (sanitize) {
+ const cleaned = sanitize(parsed);
+ if (cleaned !== null) return cleaned;
+ return fallback;
+ }
+ return parsed as T;
} catch {
return fallback;
}
- return fallback;
}
function saveToStorage(key: string, value: T): void {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch {
- return;
+ // Storage quota exceeded or private mode — silently ignore so the app keeps working.
}
}
+export function clearStoredSettings(): void {
+ Object.values(STORAGE_KEYS).forEach((key) => {
+ try {
+ localStorage.removeItem(key);
+ } catch {
+ // Ignore removal failures.
+ }
+ });
+}
+
export function useCameraSettings() {
- const [mode, setMode] = useState(() => loadFromStorage('procam-mode', 'photo'));
- const [settings, setSettings] = useState(() =>
- loadFromStorage('procam-settings', defaultSettings)
+ const [mode, setMode] = useState(() =>
+ loadFromStorage(STORAGE_KEYS.mode, 'photo', (value): ShootingMode | null =>
+ typeof value === 'string' && VALID_MODES.includes(value as ShootingMode) ? (value as ShootingMode) : null
+ )
);
+ const [settings, setSettings] = useState(() => {
+ const loaded = loadFromStorage(STORAGE_KEYS.settings, defaultSettings, (value): CameraSettings | null => {
+ if (!isValidCameraSettings(value)) return null;
+ return { ...defaultSettings, ...value };
+ });
+ return loaded;
+ });
const [isRecording, setIsRecording] = useState(false);
const [isShooting, setIsShooting] = useState(false);
const [presets, setPresets] = useState(() =>
- loadFromStorage('procam-presets', defaultPresets)
+ loadFromStorage(STORAGE_KEYS.presets, defaultPresets, (value): CustomPreset[] | null => {
+ if (!Array.isArray(value) || !value.every(isValidPreset)) return null;
+ return value;
+ })
);
useEffect(() => {
- saveToStorage('procam-mode', mode);
- saveToStorage('procam-settings', settings);
- saveToStorage('procam-presets', presets);
+ saveToStorage(STORAGE_KEYS.mode, mode);
+ saveToStorage(STORAGE_KEYS.settings, settings);
+ saveToStorage(STORAGE_KEYS.presets, presets);
}, [mode, settings, presets]);
const updateSetting = useCallback((key: K, value: CameraSettings[K]) => {
- setSettings(prev => ({ ...prev, [key]: value }));
+ setSettings((prev) => ({ ...prev, [key]: value }));
}, []);
const applyPreset = useCallback((preset: CustomPreset) => {
- setSettings(prev => ({ ...prev, ...preset.settings }));
+ setSettings((prev) => ({ ...prev, ...preset.settings }));
}, []);
const savePreset = useCallback((name: string) => {
+ if (!name.trim()) return;
+ if (presets.length >= MAX_PRESETS) return;
+
const newPreset: CustomPreset = {
- id: crypto.randomUUID?.() ?? Date.now().toString(),
- name,
+ id: crypto.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+ name: name.trim(),
settings: { ...settings },
};
- setPresets(prev => [...prev, newPreset]);
- }, [settings]);
+ setPresets((prev) => [...prev, newPreset]);
+ }, [settings, presets.length]);
const deletePreset = useCallback((id: string) => {
- setPresets(prev => prev.filter(p => p.id !== id));
+ setPresets((prev) => prev.filter((p) => p.id !== id));
}, []);
const triggerShutter = useCallback(() => {
@@ -115,7 +202,7 @@ export function useCameraSettings() {
}, []);
const toggleRecording = useCallback(() => {
- setIsRecording(prev => !prev);
+ setIsRecording((prev) => !prev);
}, []);
const getISO = () => ISO_VALUES;
@@ -123,7 +210,7 @@ export function useCameraSettings() {
const nextISO = useCallback(() => {
const idx = ISO_VALUES.indexOf(settings.iso);
- if (idx < 0) return; // current ISO not in stop list (e.g. from a preset); do nothing
+ if (idx < 0) return;
if (idx < ISO_VALUES.length - 1) updateSetting('iso', ISO_VALUES[idx + 1]);
}, [settings.iso, updateSetting]);
@@ -151,6 +238,7 @@ export function useCameraSettings() {
isRecording, toggleRecording,
isShooting, triggerShutter,
presets, applyPreset, savePreset, deletePreset,
+ clearStoredSettings,
getISO, getShutterSpeeds,
nextISO, prevISO, nextShutter, prevShutter,
};