Loading videos...

const FEED_TYPE = 'for-you'; // Load videos for current feed let currentPage = 1; let loading = false; async function loadVideos() { if (loading) return; loading = true; try { const response = await apiFetch(`/api/videos/${FEED_TYPE}?page=${currentPage}`); const data = await response.json(); const container = document.getElementById('videos-container'); if (currentPage === 1) { container.innerHTML = ''; } else { // Remove spinner const spinner = container.querySelector('.spinner'); if (spinner) spinner.remove(); } data.data.forEach(video => { container.insertAdjacentHTML('beforeend', createVideoCard(video)); }); // Add spinner if there are more pages if (data.next_page_url) { container.insertAdjacentHTML('beforeend', ''); } currentPage++; loading = false; // Initialize video interactions for new videos document.querySelectorAll('[data-video-id]').forEach(element => { const videoId = element.dataset.videoId; if (!element.dataset.initialized) { new VideoInteractions(videoId); element.dataset.initialized = 'true'; } }); // Initialize video players document.querySelectorAll('video.video-player').forEach(video => { if (!video.dataset.initialized) { new VideoPlayer(video); video.dataset.initialized = 'true'; } }); } catch (error) { console.error('Error loading videos:', error); loading = false; } } function createVideoCard(video) { return `
${video.user.name}

${video.user.name}

@${video.user.username || video.user.name}

${video.description ? `

${video.description}

` : ''}
`; } function toggleComments(videoId) { const commentsSection = document.getElementById(`comments-${videoId}`); if (commentsSection) { commentsSection.classList.toggle('hidden'); // Load comments if showing if (!commentsSection.classList.contains('hidden') && window.currentUserId) { loadComments(videoId); } } } async function loadComments(videoId) { try { const response = await apiFetch(`/api/videos/${videoId}/comments`); const data = await response.json(); const commentsList = document.querySelector(`#comments-${videoId} #comments-list`); if (commentsList) { commentsList.innerHTML = ''; data.data.forEach(comment => { commentsList.insertAdjacentHTML('beforeend', `
${comment.user.name}
${comment.user.name}
${comment.content}
${timeAgo(comment.created_at)}
`); }); // Initialize comments manager for this video if (!window.commentsManagers) window.commentsManagers = {}; if (!window.commentsManagers[videoId]) { window.commentsManagers[videoId] = new CommentsManager(videoId); } } } catch (error) { console.error('Error loading comments:', error); } } // Infinite scroll window.addEventListener('scroll', () => { const { scrollTop, scrollHeight, clientHeight } = document.documentElement; if (scrollTop + clientHeight >= scrollHeight - 100 && !loading) { loadVideos(); } }); // Initial load loadVideos();