5103022014/Robot-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: 5103022014:08fa4324d9a6d4a77a0df1c6f1bf8bc8622b0e5b
Branches Tags
5103022014:main
..
compare: 5103022014:5d3f55dc84a6495162821586a1dd74394b36977d
Branches Tags
5103022014:main

No commits in common. "08fa4324d9a6d4a77a0df1c6f1bf8bc8622b0e5b" and "5d3f55dc84a6495162821586a1dd74394b36977d" have entirely different histories.
08fa4324d9 ... 5d3f55dc84

1 changed files with 14 additions and 20 deletions
Show Stats Expand all files Collapse all files

34
app/page.tsx
View File

@ -136,26 +136,20 @@ export default function RobotDashboard() {
<span className="w-3 h-3 rounded-full bg-red-500 animate-pulse"></span> <span className="w-3 h-3 rounded-full bg-red-500 animate-pulse"></span>
Live Feed Live Feed
</h2> </h2>
<div className="aspect-video bg-black rounded-lg overflow-hidden border border-gray-900 relative">
{/* --- CONTAINER KAMERA YANG SUDAH DIPERBAIKI --- */} {/* eslint-disable-next-line @next/next/no-img-element */}
<div className="aspect-4/3 md:aspect-video w-full bg-black rounded-lg overflow-hidden border border-gray-900 relative"> <img
{/* eslint-disable-next-line @next/next/no-img-element */} src={streamUrl}
<img alt="Robot view"
src={streamUrl} // PERUBAHAN DI SINI: Posisi absolut ke kiri, hilangkan max-width, dan set object-position ke kiri
alt="Robot view" className="absolute top-0 left-0 h-full max-w-none object-cover"
className="absolute top-0 left-0 h-full max-w-none object-cover" style={{ width: '200%', objectPosition: 'left' }}
style={{ onError={(e) => {
width: '200%', e.currentTarget.style.display = 'none';
objectPosition: 'left center' e.currentTarget.parentElement!.innerHTML = '<div class="text-red-400 text-center p-4">Kamera gagal dimuat.<br/>Pastikan Pi dan HP berada dalam jaringan Tailscale/Wi-Fi yang sama.</div>';
}} }}
onError={(e) => { />
e.currentTarget.style.display = 'none'; </div>
e.currentTarget.parentElement!.innerHTML = '<div class="text-red-400 text-center p-4">Kamera gagal dimuat.<br/>Pastikan Pi dan HP berada dalam jaringan Tailscale/Wi-Fi yang sama.</div>';
}}
/>
</div>
{/* ---------------------------------------------- */}
</div> </div>
<div className="bg-gray-800 rounded-xl p-4 border border-gray-700 shadow-xl flex flex-col"> <div className="bg-gray-800 rounded-xl p-4 border border-gray-700 shadow-xl flex flex-col">