Ff
app/
├── src/main/
│ ├── java/com/example/matchviewer/
│ │ ├── MainActivity.java # النشاط الرئيسي
│ │ ├── MatchDetailsActivity.java # نشاط تفاصيل المباراة
│ │ ├── Match.java # نموذج بيانات المباراة
│ │ └── MatchAdapter.java # محول RecyclerView
│ ├── res/
│ │ ├── layout/ # ملفات التخطيط
│ │ ├── values/ # الألوان والنصوص والأنماط
│ │ ├── drawable/ # الرسوميات والأيقونات
│ │ └── mipmap/ # أيقونات التطبيق
│ └── AndroidManifest.xml # ملف البيان
└── build.gradle # إعدادات البناء
// تطبيق React بملف واحد لمشاهدة المباريات // تعليمات سريعة: // 1) استخدم مشروع Vite أو Create React App. // 2) ثبت TailwindCSS أو أضف ملف CSS بسيط، لأن الشيفرة تستخدم كلاسات Tailwind. // 3) احفظ هذا الملف كمكون صفحة (مثلاً src/App.jsx) واستبدل محتويات App.jsx به. // 4) لتشغيل فيديو فعلي - استبدل روابط الفيديو في videoSrc بروابط MP4 أو HLS (m3u8) متاحة. // 5) يمكن توصيل هذا الواجهة مع API حقيقي لجلب المباريات وجدولها واستريمات البث.
import React, {useState, useEffect, useRef} from 'react';
export default function MatchesApp(){ // بيانات تجريبية - استبدلها ببيانات من API const sampleMatches = [ {id:1, league: 'دوري المحترفين', home: 'الفريق أ', away: 'الفريق ب', time: '2025-08-10 19:00', status: 'قبل المباراة', videoSrc: ''}, {id:2, league: 'دوري المحترفين', home: 'الفريق ج', away: 'الفريق د', time: '2025-08-10 21:00', status: 'قبل المباراة', videoSrc: ''}, {id:3, league: 'كأس البلد', home: 'الفريق هـ', away: 'الفريق و', time: '2025-08-11 18:00', status: 'بث مباشر', videoSrc: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'}, ];
const [matches, setMatches] = useState(sampleMatches); const [query, setQuery] = useState(''); const [leagueFilter, setLeagueFilter] = useState('الكل'); const [selectedMatch, setSelectedMatch] = useState(null); const videoRef = useRef(null);
useEffect(()=>{ // هنا توصيل إلى API لجلب المباريات في حال وجود واحد. // مثال: // fetch('/api/matches').then(r=>r.json()).then(data=>setMatches(data)) },[]);
const leagues = ['الكل', ...Array.from(new Set(matches.map(m=>m.league)) )];
const filtered = matches.filter(m=>{ const byQuery = (m.home + ' ' + m.away + ' ' + m.league).toLowerCase().includes(query.trim().toLowerCase()); const byLeague = leagueFilter === 'الكل' ? true : m.league === leagueFilter; return byQuery && byLeague; });
function playMatch(match){ setSelectedMatch(match); // محاولة تشغيل الفيديو إن وُجد setTimeout(()=>{ if(videoRef.current){ videoRef.current.play().catch(()=>{}); } }, 50); }
return (
{/* عمود الفيديو وتفاصيل المباراة */}
{selectedMatch ? (
) : (
)}
{/* عمود قائمة المباريات */}
); }
تطبيق مشاهدة المباريات
setQuery(e.target.value)} placeholder="ابحث باسم الفريق أو البطولة" className="px-3 py-2 rounded shadow-sm bg-white/80 dark:bg-gray-800/60" />
{selectedMatch.home} vs {selectedMatch.away}
البطولة: {selectedMatch.league} — الوقت: {selectedMatch.time} — الحالة: {selectedMatch.status}
{selectedMatch.videoSrc ? (
) : (
لا يوجد بث متاح لهذه المباراة الآن
)}
اختر مباراة من القائمة على اليمين لبدء المشاهدة
يمكن ربط هذا المشغل بروابط HLS (m3u8) أو mp4 أو بخدمة CDN/Broadcast
