Add a camera shutter sound (7988cd1a) · Commits · sc07 / Canvas · GitLab

packages/client/src/components/Header/HeaderRight.tsx

+3 −0

Original line number	Diff line number	Diff line
		@@ -171,6 +171,7 @@ export const HeaderRight = () => {
		<Button
		className="justify-start"
		onPress={handleCaptureCanvas}
		silent
		role="menuitem"
		size="sm"
		>
		@@ -180,6 +181,7 @@ export const HeaderRight = () => {
		<Button
		className="justify-start"
		onPress={handleCaptureView}
		silent
		role="menuitem"
		size="sm"
		>
		@@ -199,6 +201,7 @@ export const HeaderRight = () => {
		<Button
		className="justify-start"
		onPress={handleCaptureTemplateArea}
		silent
		role="menuitem"
		size="sm"
		>

+14 −0

Original line number	Diff line number	Diff line
		@@ -12,6 +12,7 @@ import African1 from "../../sounds/African1.mp3";
		import African2 from "../../sounds/African2.mp3";
		import African3 from "../../sounds/African3.mp3";
		import African4 from "../../sounds/African4.mp3";
		import Camera from "../../sounds/Camera.mp3";
		import Coffee1 from "../../sounds/Coffee1.mp3";
		import Coffee2 from "../../sounds/Coffee2.mp3";
		import Retro6 from "../../sounds/Retro6.mp3";
		@@ -45,6 +46,7 @@ export const AudioSettings = () => {
		const [African3Sound] = useSound(African3, { volume: 0.5 });

		const [African4Sound] = useSound(African4, { volume: 0.5 });
		const [CameraSound] = useSound(Camera, { volume: 0.25 });

		const [Retro6Sound] = useSound(Retro6, { volume: 0.3 });

		@@ -440,6 +442,18 @@ export const AudioSettings = () => {
		>
		UI Click
		</Switch>
		<Switch
		silent
		isSelected={state.cameraShutter}
		onValueChange={(v) => {
		dispatch([_(v), "cameraShutter"]);
		if (v) {
		CameraSound();
		}
		}}
		>
		Camera Shutter
		</Switch>
		<Switch
		silent
		isSelected={state.disconnected}

+3 −0

Original line number	Diff line number	Diff line
		@@ -906,6 +906,7 @@ export const Palette = () => {
		<Button
		className="mobile-action-sheet-item"
		onPress={handleMobileCaptureCanvas}
		silent
		role="menuitem"
		size="sm"
		>
		@@ -915,6 +916,7 @@ export const Palette = () => {
		<Button
		className="mobile-action-sheet-item"
		onPress={handleMobileCaptureView}
		silent
		role="menuitem"
		size="sm"
		>
		@@ -934,6 +936,7 @@ export const Palette = () => {
		<Button
		className="mobile-action-sheet-item"
		onPress={handleMobileCaptureTemplateArea}
		silent
		role="menuitem"
		size="sm"
		>

+8 −3

Original line number	Diff line number	Diff line
		@@ -7,6 +7,7 @@ import React, {
		import useSound from "use-sound";

		import African3 from "../sounds/African3.mp3";
		import Camera from "../sounds/Camera.mp3";

		interface IAudioState {
		place: boolean;
		@@ -17,6 +18,7 @@ interface IAudioState {
		pixelBucketFull: boolean;
		pixelUndo: boolean;
		uiClick: boolean;
		cameraShutter: boolean;
		}

		const Defaults: IAudioState = {
		@@ -28,6 +30,7 @@ const Defaults: IAudioState = {
		pixelBucketFull: false,
		pixelUndo: false,
		uiClick: false,
		cameraShutter: false,
		};

		type AudioActions =
		@@ -35,7 +38,7 @@ type AudioActions =
		\| ["disable", keyof IAudioState];

		interface IPlay {
		(type: "UI_CLICK"): unknown;
		(type: "UI_CLICK" \| "CAMERA_SHUTTER"): unknown;
		}

		const context = createContext<{
		@@ -58,12 +61,14 @@ const AudioContext = ({ children }: React.PropsWithChildren) => {
		);

		const [African3Sound] = useSound(African3, { volume: 0.5 });
		const [CameraSound] = useSound(Camera, { volume: 0.25 });

		const play: IPlay = useCallback(
		(type: "UI_CLICK") => {
		(type) => {
		if (type === "UI_CLICK" && state.uiClick) African3Sound();
		if (type === "CAMERA_SHUTTER" && state.cameraShutter) CameraSound();
		},
		[African3Sound, state],
		[African3Sound, CameraSound, state],
		);

		return (

+4 −1

Original line number	Diff line number	Diff line
		@@ -22,6 +22,7 @@ import {
		import { Template as TemplateRenderer } from "@/lib/template";

		import { useAppContext } from "./AppContext";
		import { useAudio } from "./AudioContext";
		import { useTemplateContext } from "./TemplateContext";

		const TEMPLATE_CAPTURE_PADDING = 2;
		@@ -104,6 +105,7 @@ const createSnapshotPreview = (snapshot: CanvasSnapshot): SnapshotPreview => {
		const CaptureSnapshotFeedback = () => {
		const prefersReducedMotion = useReducedMotion();
		const { settings } = useAppContext();
		const { play } = useAudio();
		const cameraFlashEnabled = settings.get["capture.cameraFlash"];
		const pendingSnapshot = useRef<CanvasSnapshot \| null>(null);
		const snapshotDelay = useRef<number \| undefined>(undefined);
		@@ -120,6 +122,7 @@ const CaptureSnapshotFeedback = () => {
		snapshotDelay.current = undefined;
		};
		const handleSnapshot = (snapshot: CanvasSnapshot) => {
		play("CAMERA_SHUTTER");
		setSnapshotFlashId(cameraFlashEnabled ? snapshot.id : undefined);
		pendingSnapshot.current?.save();
		pendingSnapshot.current = null;
		@@ -155,7 +158,7 @@ const CaptureSnapshotFeedback = () => {
		pendingSnapshot.current?.save();
		pendingSnapshot.current = null;
		};
		}, [cameraFlashEnabled, prefersReducedMotion]);
		}, [cameraFlashEnabled, play, prefersReducedMotion]);

		const handlePolaroidComplete = (snapshot: CanvasSnapshot) => {
		snapshot.save();