Spaces:
Running
Running
File size: 4,906 Bytes
9a9d18a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
import React, { useEffect, useState } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Copy, Smartphone, QrCode } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
interface QrCodeModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
sessionId: string;
}
const QrCodeModal: React.FC<QrCodeModalProps> = ({
open,
onOpenChange,
sessionId,
}) => {
const { toast } = useToast();
const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
const [phoneUrl, setPhoneUrl] = useState<string>("");
useEffect(() => {
if (sessionId) {
// Get current host URL - in production this would be the deployed URL
const currentHost = window.location.origin;
const phonePageUrl = `${currentHost}/phone-camera?sessionId=${sessionId}`;
setPhoneUrl(phonePageUrl);
// Generate QR code using a public QR code API
const qrApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(phonePageUrl)}`;
setQrCodeUrl(qrApiUrl);
}
}, [sessionId]);
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(phoneUrl);
toast({
title: "URL Copied!",
description: "Phone camera URL has been copied to clipboard.",
});
} catch (error) {
toast({
title: "Copy Failed",
description: "Could not copy URL to clipboard.",
variant: "destructive",
});
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[500px] p-8">
<DialogHeader>
<div className="flex justify-center items-center gap-4 mb-4">
<div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
<Smartphone className="w-5 h-5 text-white" />
</div>
</div>
<DialogTitle className="text-white text-center text-2xl font-bold">
Add Phone Camera
</DialogTitle>
<DialogDescription className="text-gray-400 text-base leading-relaxed text-center">
Scan the QR code with your phone to add a camera feed to your recording session.
</DialogDescription>
</DialogHeader>
<div className="space-y-6 py-4">
{/* QR Code Display */}
<div className="flex justify-center">
{qrCodeUrl ? (
<div className="bg-white p-4 rounded-lg">
<img
src={qrCodeUrl}
alt="QR Code for phone camera"
className="w-48 h-48"
/>
</div>
) : (
<div className="w-48 h-48 bg-gray-800 rounded-lg flex items-center justify-center">
<QrCode className="w-12 h-12 text-gray-600" />
</div>
)}
</div>
{/* Instructions */}
<div className="space-y-4">
<h3 className="text-lg font-semibold text-white text-center">
How to connect your phone camera:
</h3>
<ol className="text-sm text-gray-400 space-y-2 list-decimal list-inside">
<li>Open your phone's camera app</li>
<li>Scan the QR code above</li>
<li>Allow camera permissions when prompted</li>
<li>Your phone camera feed will appear in the recording interface</li>
</ol>
</div>
{/* Manual URL Option */}
<div className="space-y-3">
<h4 className="text-sm font-semibold text-gray-300">
Or open this URL manually on your phone:
</h4>
<div className="flex gap-2">
<input
type="text"
value={phoneUrl}
readOnly
className="flex-1 bg-gray-800 border border-gray-700 text-white px-3 py-2 rounded text-sm"
/>
<Button
onClick={copyToClipboard}
variant="outline"
size="sm"
className="border-gray-600 hover:border-blue-500 text-gray-300 hover:text-blue-400"
>
<Copy className="w-4 h-4" />
</Button>
</div>
</div>
{/* Close Button */}
<div className="flex justify-center pt-4">
<Button
onClick={() => onOpenChange(false)}
variant="outline"
className="border-gray-500 hover:border-gray-200 px-8 py-2 text-gray-300 hover:text-white"
>
Close
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
};
export default QrCodeModal;
|