mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-22 06:28:10 +02:00
fix(mobile): use CameraRecorder in mobile new-reel page
This commit is contained in:
1 parent
e33f721360
commit
5e50399457
1 file changed
+14
-1
@@ -1,4 +1,5 @@
|
|||||||
import { useState, useCallback, useRef } from "react";
|
import { useState, useCallback, useRef } from "react";
|
||||||
|
import { CameraRecorder } from "@/components/camera-recorder";
|
||||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||||
import { useLocation } from "wouter";
|
import { useLocation } from "wouter";
|
||||||
import {
|
import {
|
||||||
@@ -40,6 +41,8 @@ export default function MobileNewReel() {
|
|||||||
const cameraInputRef = useRef<HTMLInputElement>(null);
|
const cameraInputRef = useRef<HTMLInputElement>(null);
|
||||||
const audioRef = useRef<HTMLAudioElement>(null);
|
const audioRef = useRef<HTMLAudioElement>(null);
|
||||||
|
|
||||||
|
const [showCamera, setShowCamera] = useState(false);
|
||||||
|
|
||||||
// État du workflow
|
// État du workflow
|
||||||
const [currentStep, setCurrentStep] = useState<Step>('video');
|
const [currentStep, setCurrentStep] = useState<Step>('video');
|
||||||
|
|
||||||
@@ -235,7 +238,7 @@ export default function MobileNewReel() {
|
|||||||
<input ref={cameraInputRef} type="file" accept="video/*" capture="environment" onChange={handleCameraCapture} className="hidden" />
|
<input ref={cameraInputRef} type="file" accept="video/*" capture="environment" onChange={handleCameraCapture} className="hidden" />
|
||||||
|
|
||||||
<div className="flex gap-2 justify-center mb-6">
|
<div className="flex gap-2 justify-center mb-6">
|
||||||
<Button onClick={() => cameraInputRef.current?.click()} variant="outline" size="lg" className="h-12">
|
<Button onClick={() => setShowCamera(true)} variant="outline" size="lg" className="h-12">
|
||||||
<Camera className="mr-2 h-5 w-5" /> Capturer
|
<Camera className="mr-2 h-5 w-5" /> Capturer
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={open} variant="outline" size="lg" className="h-12">
|
<Button onClick={open} variant="outline" size="lg" className="h-12">
|
||||||
@@ -243,6 +246,16 @@ export default function MobileNewReel() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{showCamera && (
|
||||||
|
<CameraRecorder
|
||||||
|
onCapture={(file) => {
|
||||||
|
uploadMutation.mutate(file);
|
||||||
|
setShowCamera(false);
|
||||||
|
}}
|
||||||
|
onCancel={() => setShowCamera(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{selectedVideo ? (
|
{selectedVideo ? (
|
||||||
<div className="relative rounded-lg overflow-hidden aspect-[9/16] bg-black max-h-[50vh] mx-auto shadow-lg">
|
<div className="relative rounded-lg overflow-hidden aspect-[9/16] bg-black max-h-[50vh] mx-auto shadow-lg">
|
||||||
<video src={selectedVideo.originalUrl} className="w-full h-full object-contain" controls />
|
<video src={selectedVideo.originalUrl} className="w-full h-full object-contain" controls />
|
||||||
|
|||||||
Reference in new issue
Block a user