226 lines
11 KiB
TypeScript
226 lines
11 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import Image from 'next/image';
|
||
import Header from "@/components/Header";
|
||
import Footer from "@/components/Footer";
|
||
|
||
export default function LiveStream() {
|
||
const [selectedCamera, setSelectedCamera] = useState(1);
|
||
|
||
const cameras = [
|
||
{
|
||
id: 1,
|
||
name: 'Dikimevi İstasyonu - Ana Giriş',
|
||
location: 'Dikimevi',
|
||
videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg?autoplay=1',
|
||
status: 'online',
|
||
viewers: 1243
|
||
},
|
||
{
|
||
id: 2,
|
||
name: 'Tuzluçayır İstasyonu - İnşaat Sahası',
|
||
location: 'Tuzluçayır',
|
||
videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg?autoplay=1',
|
||
status: 'online',
|
||
viewers: 856
|
||
},
|
||
{
|
||
id: 3,
|
||
name: 'A2 Metro Hattı - Tünel Kazı Çalışması',
|
||
location: 'Mamak',
|
||
videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg?autoplay=1',
|
||
status: 'online',
|
||
viewers: 2134
|
||
},
|
||
{
|
||
id: 4,
|
||
name: 'İstasyon Binası İç Mekan',
|
||
location: 'Dikimevi',
|
||
videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg?autoplay=1',
|
||
status: 'online',
|
||
viewers: 534
|
||
}
|
||
];
|
||
|
||
const selectedCam = cameras.find(cam => cam.id === selectedCamera) || cameras[0];
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#003366]">
|
||
<Header />
|
||
|
||
<main className="pt-24 md:pt-32 pb-16">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
{/* Başlık */}
|
||
<div className="text-center mb-12">
|
||
<div className="flex items-center justify-center space-x-3 mb-4">
|
||
<div className="w-4 h-4 bg-red-500 rounded-full animate-pulse"></div>
|
||
<h1 className="text-4xl font-bold text-white">Canlı Yayın</h1>
|
||
</div>
|
||
<p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
|
||
A2 Metro Hattı inşaat çalışmalarını 7/24 canlı izleyin
|
||
</p>
|
||
</div>
|
||
|
||
{/* Ana Video Player */}
|
||
<div className="bg-white rounded-2xl shadow-2xl overflow-hidden mb-8">
|
||
{/* Video */}
|
||
<div className="relative w-full bg-black" style={{ paddingBottom: '56.25%' }}>
|
||
<iframe
|
||
className="absolute top-0 left-0 w-full h-full"
|
||
src={selectedCam.videoUrl}
|
||
title={selectedCam.name}
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
></iframe>
|
||
</div>
|
||
|
||
{/* Video Bilgileri */}
|
||
<div className="p-6 lg:p-8">
|
||
<div className="flex items-start justify-between mb-4">
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2 mb-2">
|
||
<span className="px-3 py-1 bg-red-500 text-white text-xs font-semibold rounded-full flex items-center space-x-1">
|
||
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
||
<span>CANLI</span>
|
||
</span>
|
||
<span className="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-semibold rounded-full">
|
||
📍 {selectedCam.location}
|
||
</span>
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-[#004B87] mb-2">
|
||
{selectedCam.name}
|
||
</h2>
|
||
<div className="flex items-center space-x-4 text-sm text-gray-600">
|
||
<div className="flex items-center space-x-1">
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||
<path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
|
||
</svg>
|
||
<span>{selectedCam.viewers.toLocaleString('tr-TR')} izleyici</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||
</svg>
|
||
<span>24/7 Yayında</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Paylaş Butonu */}
|
||
<button className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center space-x-2">
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
|
||
</svg>
|
||
<span className="font-semibold">Paylaş</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Açıklama */}
|
||
<div className="bg-gray-50 rounded-lg p-4">
|
||
<h3 className="font-semibold text-[#004B87] mb-2">Canlı Yayın Hakkında</h3>
|
||
<p className="text-gray-700 text-sm leading-relaxed">
|
||
A2 Metro Hattı inşaat çalışmalarını şeffaflık ilkesi doğrultusunda 7/24 canlı olarak yayınlıyoruz.
|
||
İnşaat ilerlemesini takip edebilir, çalışmaların her aşamasını görebilirsiniz.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Diğer Kameralar */}
|
||
<div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
|
||
<h3 className="text-2xl font-bold text-[#004B87] mb-6">Diğer Kameralar</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{cameras.map((camera) => (
|
||
<button
|
||
key={camera.id}
|
||
onClick={() => setSelectedCamera(camera.id)}
|
||
className={`relative rounded-xl overflow-hidden transition-all duration-300 ${
|
||
selectedCamera === camera.id
|
||
? 'ring-4 ring-[#00B4D8] shadow-xl scale-105'
|
||
: 'hover:shadow-lg hover:scale-102'
|
||
}`}
|
||
>
|
||
{/* Thumbnail */}
|
||
<div className="aspect-video bg-gray-900 relative">
|
||
<Image
|
||
src={`https://picsum.photos/400/225?random=${camera.id}`}
|
||
alt={camera.name}
|
||
width={400}
|
||
height={225}
|
||
className="w-full h-full object-cover opacity-80"
|
||
/>
|
||
{/* CANLI Badge */}
|
||
<div className="absolute top-2 left-2 px-2 py-1 bg-red-500 text-white text-xs font-semibold rounded flex items-center space-x-1">
|
||
<div className="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></div>
|
||
<span>CANLI</span>
|
||
</div>
|
||
{/* İzleyici Sayısı */}
|
||
<div className="absolute bottom-2 right-2 px-2 py-1 bg-black/75 text-white text-xs rounded flex items-center space-x-1">
|
||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||
<path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
|
||
</svg>
|
||
<span>{camera.viewers}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bilgi */}
|
||
<div className="p-3 bg-white">
|
||
<h4 className="font-semibold text-[#004B87] text-sm mb-1 line-clamp-2">
|
||
{camera.name}
|
||
</h4>
|
||
<p className="text-xs text-gray-500 flex items-center">
|
||
<svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
|
||
</svg>
|
||
{camera.location}
|
||
</p>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* İstatistikler */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
||
<div className="bg-white rounded-xl p-6 text-center">
|
||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg className="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-3xl font-bold text-[#004B87] mb-2">4</h3>
|
||
<p className="text-gray-600">Aktif Kamera</p>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl p-6 text-center">
|
||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg className="w-8 h-8 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||
<path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-3xl font-bold text-[#004B87] mb-2">4,767</h3>
|
||
<p className="text-gray-600">Toplam İzleyici</p>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl p-6 text-center">
|
||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg className="w-8 h-8 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-3xl font-bold text-[#004B87] mb-2">24/7</h3>
|
||
<p className="text-gray-600">Kesintisiz Yayın</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|