Skip to content

Implement camera stream and enhance quality check pre-commit #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
damnthonyy merged 4 commits into from
May 22, 2026
Merged

Implement camera stream and enhance quality check pre-commit #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4978f39
feat: add video endpoint and enhance pre-commit check
damnthonyy May 22, 2026
7f0d6ba
feat: update camera stream URL and fix image rendering
damnthonyy May 22, 2026
dda2410
chore
damnthonyy May 22, 2026
beebeb2
feat : add max warning for pre-commit
damnthonyy May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
#!/usr/bin/env sh
pnpm exec lint-staged
pnpm exec eslint . --max-warnings 4
pnpm run typecheck
4 changes: 3 additions & 1 deletion next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
/* config options here */
images: {
domains: ['10.10.220.79'],
},
};

export default nextConfig;
48 changes: 37 additions & 11 deletions src/components/dashboard/camera-feed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
'use client';

import React from 'react';
import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

interface CameraFeedProps {
isAutonomous: boolean;
}

const CAMERA_STREAM_URL =
process.env.NEXT_PUBLIC_CAMERA_STREAM_URL ||
'http://10.10.220.79:8080/camera/stream';

export function CameraFeed({ isAutonomous }: CameraFeedProps) {
const [error, setError] = useState<string | null>(null);

return (
<Card>
<CardHeader className="pb-3">
Expand All @@ -21,16 +27,36 @@
</CardHeader>
<CardContent>
<div className="relative aspect-video bg-zinc-900 rounded-lg overflow-hidden flex items-center justify-center border-2 border-zinc-800">
<div className="absolute top-2 left-2 flex items-center gap-2">
<div className="h-2 w-2 rounded-full bg-red-500 animate-pulse" />
<span className="text-white text-xs font-mono">REC</span>
</div>
{/* Crosshair overlay */}
<div className="absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none">
<div className="w-px h-8 bg-white" />
<div className="h-px w-8 bg-white absolute" />
</div>
<p className="text-zinc-500 text-sm font-mono">Flux vidéo simulé</p>
{!error && CAMERA_STREAM_URL ? (
<>
<img

Check warning on line 32 in src/components/dashboard/camera-feed.tsx

View workflow job for this annotation

GitHub Actions / Lint, format, typecheck, build 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={CAMERA_STREAM_URL}
alt="Flux caméra"
className="w-full h-full object-cover"
onError={() => setError('Erreur de chargement du flux')}
/>
<div className="absolute top-2 left-2 flex items-center gap-2">
<div className="h-2 w-2 rounded-full bg-red-500 animate-pulse" />
<span className="text-white text-xs font-mono">REC</span>
</div>
{/* Crosshair overlay */}
<div className="absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none">
<div className="w-px h-8 bg-white" />
<div className="h-px w-8 bg-white absolute" />
</div>
</>
) : (
<div className="text-center">
<p className="text-red-400 text-sm font-mono">
{error || 'Caméra non configurée'}
</p>
{CAMERA_STREAM_URL && (
<p className="text-zinc-500 text-xs font-mono mt-2">
{CAMERA_STREAM_URL}
</p>
)}
</div>
)}
</div>
</CardContent>
</Card>
Expand Down
Loading