Skip to content

Commit 53ed3d9

Browse files
WhyAsh5114WhyAsh5114
committed
refactor: clean up camera selection component and improve formatting
1 parent d67f707 commit 53ed3d9

1 file changed

Lines changed: 60 additions & 65 deletions

File tree

‎src/routes/(app)/compete/[roomId]/+page.svelte‎

Lines changed: 60 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
8181
try {
8282
const devices = await navigator.mediaDevices.enumerateDevices();
83-
availableCameras = devices.filter(device => device.kind === 'videoinput');
83+
availableCameras = devices.filter((device) => device.kind === 'videoinput');
8484
8585
// Set default camera if none selected yet
8686
if (availableCameras.length > 0 && !selectedCamera) {
@@ -552,7 +552,7 @@
552552
});
553553
554554
// Only update scores for remote users to prevent overriding local score
555-
Object.keys(fetchedScores).forEach(userId => {
555+
Object.keys(fetchedScores).forEach((userId) => {
556556
if (userId !== agoraClient?.uid?.toString()) {
557557
scores[userId] = fetchedScores[userId];
558558
}
@@ -618,16 +618,16 @@
618618
syncScore().then(() => {
619619
// Determine current user's position
620620
const currentUserId = agoraClient?.uid?.toString() || '';
621-
const userPosition = rankings.findIndex(r => r.userId === currentUserId) + 1;
621+
const userPosition = rankings.findIndex((r) => r.userId === currentUserId) + 1;
622622
const userScore = scores[currentUserId] || 0;
623-
623+
624624
// Create URL with search parameters
625625
const searchParams = new URLSearchParams();
626626
searchParams.set('position', userPosition.toString());
627627
searchParams.set('score', userScore.toString());
628628
searchParams.set('total', rankings.length.toString());
629629
searchParams.set('roomId', roomId);
630-
630+
631631
// Redirect to results page with parameters
632632
toast.info('Competition ended!');
633633
setTimeout(() => {
@@ -665,9 +665,10 @@
665665
666666
// Request camera permissions early to make deviceId accessible
667667
if (browser) {
668-
navigator.mediaDevices.getUserMedia({ video: true })
668+
navigator.mediaDevices
669+
.getUserMedia({ video: true })
669670
.then(() => getCameras())
670-
.catch(err => console.error('[CAMERA] Permission error:', err));
671+
.catch((err) => console.error('[CAMERA] Permission error:', err));
671672
}
672673
673674
return () => {
@@ -761,34 +762,32 @@
761762
</Card.Header>
762763
<Card.Content class="space-y-4">
763764
<!-- Camera selector -->
764-
{#if availableCameras.length > 1}
765-
<div class="mb-2">
766-
<Select.Root
767-
value={selectedCamera}
768-
type="single"
769-
onValueChange={(value) => switchCamera(value)}
770-
>
771-
<Select.Trigger class="w-full">
772-
{#if selectedCamera}
773-
<span>
774-
{availableCameras.find((camera) => camera.deviceId === selectedCamera)
775-
?.label ||
776-
`Camera ${availableCameras.indexOf(availableCameras.find((camera) => camera.deviceId === selectedCamera)!) + 1}`}
777-
</span>
778-
{:else}
779-
<span>Select a camera</span>
780-
{/if}
781-
</Select.Trigger>
782-
<Select.Content>
783-
{#each availableCameras as camera}
784-
<Select.Item value={camera.deviceId}>
785-
{camera.label || `Camera ${availableCameras.indexOf(camera) + 1}`}
786-
</Select.Item>
787-
{/each}
788-
</Select.Content>
789-
</Select.Root>
790-
</div>
791-
{/if}
765+
<div class="mb-2">
766+
<Select.Root
767+
value={selectedCamera}
768+
type="single"
769+
onValueChange={(value) => switchCamera(value)}
770+
>
771+
<Select.Trigger class="w-full">
772+
{#if selectedCamera}
773+
<span>
774+
{availableCameras.find((camera) => camera.deviceId === selectedCamera)
775+
?.label ||
776+
`Camera ${availableCameras.indexOf(availableCameras.find((camera) => camera.deviceId === selectedCamera)!) + 1}`}
777+
</span>
778+
{:else}
779+
<span>Select a camera</span>
780+
{/if}
781+
</Select.Trigger>
782+
<Select.Content>
783+
{#each availableCameras as camera}
784+
<Select.Item value={camera.deviceId}>
785+
{camera.label || `Camera ${availableCameras.indexOf(camera) + 1}`}
786+
</Select.Item>
787+
{/each}
788+
</Select.Content>
789+
</Select.Root>
790+
</div>
792791

793792
<!-- Local stream (full width) -->
794793
<div class="relative overflow-hidden rounded-lg bg-muted">
@@ -853,36 +852,32 @@
853852
<Card.Content>
854853
<div class="space-y-4">
855854
<!-- Camera selector for waiting room -->
856-
{#if availableCameras.length > 1}
857-
<div class="mb-4">
858-
<label for="camera-select" class="mb-2 block text-sm font-medium">Select Camera</label
859-
>
860-
<Select.Root
861-
type="single"
862-
value={selectedCamera}
863-
onValueChange={(value) => switchCamera(value)}
864-
>
865-
<Select.Trigger class="w-full">
866-
{#if selectedCamera}
867-
<span>
868-
{availableCameras.find((camera) => camera.deviceId === selectedCamera)
869-
?.label ||
870-
`Camera ${availableCameras.indexOf(availableCameras.find((camera) => camera.deviceId === selectedCamera)!) + 1}`}
871-
</span>
872-
{:else}
873-
<span>Select a camera</span>
874-
{/if}
875-
</Select.Trigger>
876-
<Select.Content>
877-
{#each availableCameras as camera}
878-
<Select.Item value={camera.deviceId}>
879-
{camera.label || `Camera ${availableCameras.indexOf(camera) + 1}`}
880-
</Select.Item>
881-
{/each}
882-
</Select.Content>
883-
</Select.Root>
884-
</div>
885-
{/if}
855+
<div class="mb-4">
856+
<label for="camera-select" class="mb-2 block text-sm font-medium">Select Camera</label>
857+
<Select.Root
858+
type="single"
859+
value={selectedCamera}
860+
onValueChange={(value) => switchCamera(value)}
861+
>
862+
<Select.Trigger class="w-full">
863+
{#if selectedCamera}
864+
<span>
865+
{availableCameras.find((camera) => camera.deviceId === selectedCamera)?.label ||
866+
`Camera ${availableCameras.indexOf(availableCameras.find((camera) => camera.deviceId === selectedCamera)!) + 1}`}
867+
</span>
868+
{:else}
869+
<span>Select a camera</span>
870+
{/if}
871+
</Select.Trigger>
872+
<Select.Content>
873+
{#each availableCameras as camera}
874+
<Select.Item value={camera.deviceId}>
875+
{camera.label || `Camera ${availableCameras.indexOf(camera) + 1}`}
876+
</Select.Item>
877+
{/each}
878+
</Select.Content>
879+
</Select.Root>
880+
</div>
886881

887882
<div>
888883
<div class="mb-2 flex items-center gap-2">

0 commit comments

Comments
 (0)