feat: integrate Sensei Spook mascot in 4 stances, speech bubbles, and style updates
This commit is contained in:
Ajasra committed
commit
e04672db2a
104 files changed
+8262
No files matched your search
@@ -0,0 +1,357 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { Camera, SwitchCamera, Upload, AlertCircle, ArrowLeft, RefreshCw } from "lucide-react";
|
||||
import { BoothConfig } from "@/types/booth";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { MascotGuide } from "@/components/MascotGuide";
|
||||
|
||||
interface CameraScreenProps {
|
||||
config: BoothConfig;
|
||||
onPhotoCaptured: (imageBase64: string) => void;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export const CameraScreen: React.FC<CameraScreenProps> = ({
|
||||
config,
|
||||
onPhotoCaptured,
|
||||
onBack,
|
||||
}) => {
|
||||
const { t, isWeChat } = useI18n();
|
||||
const [facingMode, setFacingMode] = useState<"user" | "environment">(
|
||||
config.camera.defaultFacingMode || "user"
|
||||
);
|
||||
const [stream, setStream] = useState<MediaStream | null>(null);
|
||||
const [cameraError, setCameraError] = useState<string | null>(null);
|
||||
const [countdown, setCountdown] = useState<number | null>(null);
|
||||
const [isFlashing, setIsFlashing] = useState(false);
|
||||
const [hasMultipleCameras, setHasMultipleCameras] = useState<boolean>(false);
|
||||
const [isSwitchingCamera, setIsSwitchingCamera] = useState<boolean>(false);
|
||||
|
||||
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const streamRef = useRef<MediaStream | null>(null);
|
||||
|
||||
const stopStream = useCallback(() => {
|
||||
if (streamRef.current) {
|
||||
streamRef.current.getTracks().forEach((track) => {
|
||||
try {
|
||||
track.stop();
|
||||
} catch (e) {
|
||||
console.warn("Error stopping track:", e);
|
||||
}
|
||||
});
|
||||
streamRef.current = null;
|
||||
}
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = null;
|
||||
}
|
||||
setStream(null);
|
||||
}, []);
|
||||
|
||||
const checkCameraDevices = useCallback(async () => {
|
||||
if (typeof navigator === "undefined" || !navigator.mediaDevices?.enumerateDevices) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
const videoInputs = devices.filter((device) => device.kind === "videoinput");
|
||||
setHasMultipleCameras(videoInputs.length > 1);
|
||||
} catch (err) {
|
||||
console.warn("Could not enumerate camera devices:", err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof navigator !== "undefined" && navigator.mediaDevices?.addEventListener) {
|
||||
const handleDeviceChange = () => {
|
||||
checkCameraDevices();
|
||||
};
|
||||
navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
|
||||
return () => {
|
||||
navigator.mediaDevices.removeEventListener("devicechange", handleDeviceChange);
|
||||
};
|
||||
}
|
||||
}, [checkCameraDevices]);
|
||||
|
||||
const startCamera = useCallback(async (targetFacingMode: "user" | "environment") => {
|
||||
try {
|
||||
setCameraError(null);
|
||||
stopStream();
|
||||
|
||||
if (
|
||||
typeof window !== "undefined" &&
|
||||
!window.isSecureContext &&
|
||||
window.location.hostname !== "localhost" &&
|
||||
window.location.hostname !== "127.0.0.1"
|
||||
) {
|
||||
setCameraError(
|
||||
t({
|
||||
en: "Camera access requires HTTPS or localhost. Please take a photo with your device.",
|
||||
zh: "摄像头需要安全连接(HTTPS)。请直接使用手机拍摄或上传照片。"
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) {
|
||||
setCameraError(
|
||||
t({
|
||||
en: "Live camera is not supported. Please click Upload to take a photo.",
|
||||
zh: "当前环境不支持实时取景，请点击右下角按钮直接拍照或上传。"
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 60));
|
||||
|
||||
let newStream: MediaStream | null = null;
|
||||
try {
|
||||
const primaryConstraints: MediaStreamConstraints = {
|
||||
audio: false,
|
||||
video: {
|
||||
facingMode: { ideal: targetFacingMode },
|
||||
width: { ideal: 1920 },
|
||||
height: { ideal: 1080 },
|
||||
},
|
||||
};
|
||||
newStream = await navigator.mediaDevices.getUserMedia(primaryConstraints);
|
||||
} catch (tier1Error: any) {
|
||||
try {
|
||||
const secondaryConstraints: MediaStreamConstraints = {
|
||||
audio: false,
|
||||
video: {
|
||||
facingMode: { ideal: targetFacingMode },
|
||||
},
|
||||
};
|
||||
newStream = await navigator.mediaDevices.getUserMedia(secondaryConstraints);
|
||||
} catch (tier2Error: any) {
|
||||
newStream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: false,
|
||||
video: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!newStream) {
|
||||
throw new Error("Unable to acquire media stream.");
|
||||
}
|
||||
|
||||
streamRef.current = newStream;
|
||||
setStream(newStream);
|
||||
|
||||
if (videoRef.current) {
|
||||
const video = videoRef.current;
|
||||
video.srcObject = newStream;
|
||||
video.setAttribute("playsinline", "true");
|
||||
video.setAttribute("webkit-playsinline", "true");
|
||||
video.onloadedmetadata = () => {
|
||||
video.play().catch((playErr) => {
|
||||
console.log("[Camera] Video play deferred:", playErr);
|
||||
});
|
||||
};
|
||||
}
|
||||
checkCameraDevices();
|
||||
} catch (err: any) {
|
||||
console.error("Camera access error:", err);
|
||||
let errorMsg = t({
|
||||
en: "Camera access was denied or not found. Please click Upload to take/choose a photo.",
|
||||
zh: "无法访问摄像头。请点击下方上传按钮直接拍照或从相册选择。"
|
||||
});
|
||||
setCameraError(errorMsg);
|
||||
}
|
||||
}, [stopStream, checkCameraDevices, t]);
|
||||
|
||||
useEffect(() => {
|
||||
startCamera(facingMode);
|
||||
return () => {
|
||||
stopStream();
|
||||
};
|
||||
}, [facingMode, startCamera, stopStream]);
|
||||
|
||||
const toggleCameraFacingMode = async () => {
|
||||
if (isSwitchingCamera) return;
|
||||
setIsSwitchingCamera(true);
|
||||
const nextMode = facingMode === "user" ? "environment" : "user";
|
||||
setFacingMode(nextMode);
|
||||
setTimeout(() => {
|
||||
setIsSwitchingCamera(false);
|
||||
}, 400);
|
||||
};
|
||||
|
||||
const handleCapture = () => {
|
||||
if (!videoRef.current) return;
|
||||
const video = videoRef.current;
|
||||
const videoWidth = video.videoWidth || 1080;
|
||||
const videoHeight = video.videoHeight || 1920;
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = videoWidth;
|
||||
canvas.height = videoHeight;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
if (facingMode === "user") {
|
||||
ctx.translate(canvas.width, 0);
|
||||
ctx.scale(-1, 1);
|
||||
}
|
||||
|
||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
const photoBase64 = canvas.toDataURL("image/jpeg", 0.92);
|
||||
|
||||
setIsFlashing(true);
|
||||
setTimeout(() => {
|
||||
setIsFlashing(false);
|
||||
stopStream();
|
||||
onPhotoCaptured(photoBase64);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const startCountdown = () => {
|
||||
if (countdown !== null) return;
|
||||
const seconds = config.camera.countdownSeconds || 3;
|
||||
setCountdown(seconds);
|
||||
|
||||
let remaining = seconds;
|
||||
const interval = setInterval(() => {
|
||||
remaining -= 1;
|
||||
if (remaining > 0) {
|
||||
setCountdown(remaining);
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
setCountdown(null);
|
||||
handleCapture();
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const result = reader.result as string;
|
||||
stopStream();
|
||||
onPhotoCaptured(result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative flex-1 flex flex-col items-center justify-between p-2 sm:p-4 overflow-hidden select-none">
|
||||
{/* Top Header */}
|
||||
<div className="w-full flex items-center justify-between px-2 mb-1 z-30 min-h-[40px]">
|
||||
<button
|
||||
onClick={() => {
|
||||
stopStream();
|
||||
onBack();
|
||||
}}
|
||||
className="p-2 px-3 rounded-2xl btn-cartoon-dark text-white flex items-center space-x-1 font-black text-xs cursor-pointer shadow-md"
|
||||
>
|
||||
<ArrowLeft size={16} className="stroke-[3]" />
|
||||
<span>{t(config.labels.backButton)}</span>
|
||||
</button>
|
||||
|
||||
{hasMultipleCameras ? (
|
||||
<button
|
||||
onClick={toggleCameraFacingMode}
|
||||
disabled={isSwitchingCamera || countdown !== null}
|
||||
className="p-2.5 rounded-2xl btn-cartoon-dark text-amber-300 hover:text-white transition active:scale-95 shadow-md"
|
||||
title="Switch front/back camera"
|
||||
>
|
||||
<SwitchCamera size={18} className={`stroke-[2.5] ${isSwitchingCamera ? "animate-spin" : ""}`} />
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-10" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Video Viewport - Made bigger, flex-1 with Mascot overlaying */}
|
||||
<div className="relative w-full max-w-md flex-1 min-h-0 rounded-3xl overflow-hidden bg-black border-4 border-black shadow-[0_8px_0_#090314,0_0_25px_rgba(255,109,0,0.3)] flex items-center justify-center my-1">
|
||||
{cameraError ? (
|
||||
<div className="p-6 text-center text-red-200 flex flex-col items-center justify-center space-y-4">
|
||||
<AlertCircle size={44} className="text-amber-400 stroke-[2.5]" />
|
||||
<p className="text-xs sm:text-sm font-bold leading-relaxed">{cameraError}</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<video
|
||||
ref={videoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className={`w-full h-full object-cover ${facingMode === "user" ? "scale-x-[-1]" : ""}`}
|
||||
/>
|
||||
{isFlashing && <div className="absolute inset-0 bg-white z-50 animate-flash" />}
|
||||
{countdown !== null && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-[2px] z-40">
|
||||
<span className="text-8xl sm:text-9xl font-black text-amber-400 animate-ping drop-shadow-[0_8px_0_#090314]">
|
||||
{countdown}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{/* Martial Framing Guides */}
|
||||
<div className="absolute inset-x-6 top-6 bottom-20 pointer-events-none border border-dashed border-amber-400/30 rounded-2xl flex flex-col justify-start items-center py-3">
|
||||
<span className="text-[10px] font-black tracking-widest text-amber-300/60 uppercase">
|
||||
⚡ {t({ en: "HEAD & MARTIAL POSE", zh: "头部与武道姿势区域" })} ⚡
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Mascot Character - Overlaying bottom-left of the picture frame */}
|
||||
<div className="absolute -bottom-4 -left-3 sm:-bottom-2 sm:-left-2 z-30 pointer-events-none">
|
||||
<MascotGuide
|
||||
pose="kick"
|
||||
size="lg"
|
||||
speechPosition="right"
|
||||
speechText={{
|
||||
en: "Strike your pose! Punch, kick, or victory stance!",
|
||||
zh: "摆出你的武道英姿！冲拳、高踢或胜利架势！",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom Action Bar */}
|
||||
<div className="w-full max-w-sm flex items-center justify-between px-6 py-2 z-20 min-h-[76px]">
|
||||
{/* Upload / Device Photo Button */}
|
||||
{config.camera.allowUpload ? (
|
||||
<div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={handleFileUpload}
|
||||
/>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="p-3.5 rounded-2xl btn-cartoon-dark text-amber-300 transition active:scale-95 shadow-md flex items-center justify-center"
|
||||
title={t(config.labels.cameraUpload)}
|
||||
>
|
||||
<Upload size={20} className="stroke-[2.5]" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-12" />
|
||||
)}
|
||||
|
||||
{/* Shutter Button */}
|
||||
<button
|
||||
onClick={startCountdown}
|
||||
disabled={Boolean(cameraError) || countdown !== null || !stream}
|
||||
className="w-18 h-18 sm:w-20 sm:h-20 rounded-full btn-cartoon-orange flex items-center justify-center disabled:opacity-50 active:scale-95 shadow-lg"
|
||||
title={t(config.labels.cameraSnap)}
|
||||
>
|
||||
<Camera size={32} className="text-white drop-shadow-[0_2px_0_#9a3412]" />
|
||||
</button>
|
||||
|
||||
{/* Balance spacer */}
|
||||
<div className="w-12" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user