اشترك في القناة على يوتيوب (function() { 'use strict'; // === إعدادات التهيئة (قم بتعديلها حسب حاجتك) === const CONFIG = { API_KEY: 'AIzaSyA67_S4crxPdauxOmFdw6JiZ8h0fG_Ktxk', // ⚠️ قيّده من Google Cloud Console CHANNEL_ID: 'UChA-6bAHnbm868mCbX3pk6A', MAX_RESULTS: 16, CACHE_DURATION: 5 * 60 * 1000, // 5 دقائق GRID_ID: 'video-grid' }; // === وحدة إدارة فيديوهات يوتيوب === const YouTubeGallery = { grid: null, uploadsPlaylistId: null, init() { this.grid = document.getElementById(CONFIG.GRID_ID); if (!this.grid) return; this.uploadsPlaylistId = CONFIG.CHANNEL_ID.replace('UC', 'UU'); this.bindEvents(); this.loadVideos(); }, bindEvents() { // تفويض الأحداث للنقر (مع دعم اللمس) this.grid.addEventListener('click', (e) => { const item = e.target.closest('.video-item'); if (!item) return; // تجاهل النقر على زر الإغلاق if (e.target.closest('.video-close-btn')) return; const videoId = item.dataset.videoId; if (videoId) { this.playVideo(videoId, item); } }); // دعم لوحة المفاتيح لإمكانية الوصول this.grid.addEventListener('keydown', (e) => { const item = e.target.closest('.video-item'); if (!item) return; if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); const videoId = item.dataset.videoId; if (videoId) this.playVideo(videoId, item); } }); }, // === جلب الفيديوهات مع التخزين المؤقت === async loadVideos() { const cacheKey = 'yt_gallery_cache_v1'; const cached = this.getFromCache(cacheKey); if (cached) { this.renderVideos(cached); return; } try { const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${this.uploadsPlaylistId}&maxResults=${CONFIG.MAX_RESULTS}&key=${CONFIG.API_KEY}`; const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); const data = await response.json(); if (data.items?.length > 0) { this.saveToCache(cacheKey, data.items); this.renderVideos(data.items); } else { this.showStatus('لا توجد فيديوهات حاليًا.', 'error'); } } catch (error) { console.error('YouTube API Error:', error); this.showStatus('حدث خطأ أثناء تحميل الفيديوهات.', 'error', true); } }, // === عرض الفيديوهات === renderVideos(items) { // استخدام DocumentFragment للأداء const fragment = document.createDocumentFragment(); items.forEach(item => { const snippet = item.snippet; const videoId = snippet?.resourceId?.videoId; if (!videoId) return; const title = snippet.title || 'بدون عنوان'; const thumbnail = snippet.thumbnails?.maxres?.url || snippet.thumbnails?.high?.url || ''; const videoEl = document.createElement('div'); videoEl.className = 'video-item'; videoEl.dataset.videoId = videoId; videoEl.dataset.title = title; videoEl.setAttribute('role', 'button'); videoEl.setAttribute('tabindex', '0'); videoEl.setAttribute('aria-label', `مشاهدة: ${title}`); videoEl.innerHTML = ` ▶ ${this.escapeHtml(title)} `; fragment.appendChild(videoEl); }); this.grid.innerHTML = ''; this.grid.appendChild(fragment); }, // === تشغيل الفيديو === playVideo(videoId, element) { // منع التشغيل المكرر if (element.querySelector('.video-player-wrapper')) return; // حفظ المحتوى الأصلي const originalContent = element.innerHTML; element.innerHTML = ` × `; // إضافة مستمع لزر الإغلاق const closeBtn = element.querySelector('.video-close-btn'); closeBtn?.addEventListener('click', (e) => { e.stopPropagation(); element.innerHTML = originalContent; }); }, // === عرض حالة التحميل/الخطأ === showStatus(message, type = 'info', withRetry = false) { let html = `${message}`; if (withRetry) { html += `↻ محاولة مرة أخرى`; } this.grid.innerHTML = html; }, // === أدوات التخزين المؤقت === getFromCache(key) { try { const item = localStorage.getItem(key); if (!item) return null; const parsed = JSON.parse(item); if (Date.now() - parsed.timestamp < CONFIG.CACHE_DURATION) { return parsed.data; } } catch (e) { console.warn('Cache read error:', e); } return null; }, saveToCache(key, data) { try { localStorage.setItem(key, JSON.stringify({ data: data, timestamp: Date.now() })); } catch (e) { console.warn('Cache write error:', e); } }, // === أداة للهروب من نصوص HTML (للحماية من XSS) === escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } }; // === بدء التشغيل عند جاهزية الصفحة === if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => YouTubeGallery.init()); } else { YouTubeGallery.init(); } // جعل الدوال متاحة عالميًا للأحداث المضمنة (مثل زر إعادة المحاولة) window.YouTubeGallery = YouTubeGallery; })();