108 أسطر
4.1 KiB
JavaScript
108 أسطر
4.1 KiB
JavaScript
/* ============================================
|
|
info.js - طلباتك بلس - صفحة المعلومات (index2)
|
|
============================================ */
|
|
|
|
// --- إعدادات API (تأخذ القيمة من المتغير المُعرّف في index2.html) ---
|
|
|
|
|
|
// --- التحكم بالسلايدر (تبديل الصور) ---
|
|
let currentSlide = 1;
|
|
let slideInterval;
|
|
|
|
function startSlider() {
|
|
// تبديل كل 5 ثواني
|
|
slideInterval = setInterval(() => {
|
|
const slide1 = document.getElementById('slide1');
|
|
const slide2 = document.getElementById('slide2');
|
|
if (currentSlide === 1) {
|
|
slide1.style.opacity = '0';
|
|
slide2.style.opacity = '1';
|
|
currentSlide = 2;
|
|
} else {
|
|
slide1.style.opacity = '1';
|
|
slide2.style.opacity = '0';
|
|
currentSlide = 1;
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
// --- تحميل وعرض الفيديوهات ---
|
|
async function loadVideos() {
|
|
try {
|
|
const res = await fetch('/api/settings');
|
|
if (!res.ok) throw new Error('فشل تحميل الإعدادات');
|
|
const data = await res.json();
|
|
const videos = data.videos || [];
|
|
renderVideos(videos);
|
|
} catch (err) {
|
|
console.error('خطأ في تحميل الفيديوهات:', err);
|
|
document.getElementById('videosContainer').innerHTML = '<p class="text-red-500">تعذر تحميل الفيديوهات</p>';
|
|
}
|
|
}
|
|
|
|
function renderVideos(videoUrls) {
|
|
const container = document.getElementById('videosContainer');
|
|
container.innerHTML = ''; // تفريغ أي محتوى سابق
|
|
|
|
if (!videoUrls || videoUrls.length === 0) {
|
|
container.innerHTML = '<p class="text-zinc-500">لا توجد فيديوهات متاحة حالياً</p>';
|
|
return;
|
|
}
|
|
|
|
videoUrls.forEach(url => {
|
|
const videoId = extractYouTubeVideoId(url);
|
|
if (!videoId) return; // تجاهل الروابط غير الصالحة
|
|
|
|
// إنشاء بطاقة الفيديو باستخدام Tailwind
|
|
const card = document.createElement('div');
|
|
card.className = 'bg-zinc-50 p-4 rounded-2xl shadow-md border border-zinc-200';
|
|
|
|
// يمكن عرض الفيديو كصورة مصغرة مع رابط للتشغيل، أو تضمين iframe للمعاينة المباشرة.
|
|
// هنا سنستخدم iframe لتشغيل الفيديو مباشرة (يمكن تغييرها إلى صورة مصغرة حسب الرغبة).
|
|
card.innerHTML = `
|
|
<div class="relative pb-9/16" style="padding-bottom: 56.25%;">
|
|
<iframe class="absolute top-0 left-0 w-full h-full rounded-xl"
|
|
src="https://www.youtube.com/embed/${videoId}"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
<a href="${url}" target="_blank" class="mt-3 inline-block text-[#ff661c] hover:underline">
|
|
مشاهدة على يوتيوب
|
|
</a>
|
|
`;
|
|
container.appendChild(card);
|
|
});
|
|
}
|
|
|
|
// استخراج معرف الفيديو من رابط يوتيوب (يدعم عدة صيغ)
|
|
function extractYouTubeVideoId(url) {
|
|
const patterns = [
|
|
/youtube\.com\/watch\?v=([^&]+)/,
|
|
/youtu\.be\/([^?]+)/,
|
|
/youtube\.com\/embed\/([^?]+)/,
|
|
/youtube\.com\/v\/([^?]+)/,
|
|
/youtube\.com\/shorts\/([^?]+)/
|
|
];
|
|
for (let pattern of patterns) {
|
|
const match = url.match(pattern);
|
|
if (match && match[1]) return match[1];
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// --- تهيئة الصفحة ---
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
startSlider();
|
|
loadVideos();
|
|
});
|
|
|
|
// اختياري: إيقاف السلايدر عندما لا تكون الصفحة مرئية لتوفير الموارد
|
|
document.addEventListener('visibilitychange', () => {
|
|
if (document.hidden) {
|
|
clearInterval(slideInterval);
|
|
} else {
|
|
startSlider();
|
|
}
|
|
}); |