Upload 10 files

app.py

@@ -2,6 +2,7 @@ from flask import Flask, render_template, jsonify, request
 import requests
 import logging
 import os
+import random
 
 app = Flask(__name__)
 
@@ -14,6 +15,10 @@ HEADERS = {
     'User-Agent': 'xiaoxiaoapi/1.0.0 (https://xxapi.cn)'
 }
 
+# Video URL cache
+video_url_cache = []
+CACHE_SIZE = 20
+
 @app.route('/')
 def index():
     """Render the main application page"""
@@ -21,7 +26,7 @@ def index():
 
 @app.route('/api/videos', methods=['GET'])
 def get_videos():
-    """Fetch videos from the external API"""
+    """Fetch videos from the external API with caching"""
     try:
         # Get count parameter (default to 1)
         count = int(request.args.get('count', 1))
@@ -30,23 +35,53 @@ def get_videos():
         count = min(count, 5)
         
         videos = []
-        for _ in range(count):
-            response = requests.get(API_URL, headers=HEADERS)
+        
+        # If cache has enough videos, return from cache
+        if len(video_url_cache) >= count:
+            # Randomly select videos instead of sequential order
+            selected_videos = random.sample(video_url_cache, count)
+            for video_url in selected_videos:
+                videos.append({
+                    'url': video_url,
+                    'timestamp': None
+                })
+                # Remove used videos from cache to avoid repetition
+                if video_url in video_url_cache:
+                    video_url_cache.remove(video_url)
+        
+        # If we need more videos (either for response or to refill cache)
+        fetch_count = max(count - len(videos), CACHE_SIZE - len(video_url_cache))
+        
+        if fetch_count > 0:
+            new_urls = []
+            for _ in range(fetch_count):
+                try:
+                    response = requests.get(API_URL, headers=HEADERS, timeout=3)
+                    
+                    if response.status_code == 200:
+                        data = response.json()
+                        if data.get('code') == 200 and data.get('data'):
+                            video_url = data.get('data')
+                            new_urls.append(video_url)
+                    else:
+                        logger.warning(f"API returned status code: {response.status_code}")
+                except Exception as e:
+                    logger.error(f"Error in API request: {str(e)}")
             
-            # Check if request was successful
-            if response.status_code == 200:
-                data = response.json()
-                if data.get('code') == 200 and data.get('data'):
-                    video_url = data.get('data')
+            # Add to response if needed
+            needed_for_response = count - len(videos)
+            if needed_for_response > 0 and new_urls:
+                for i in range(min(needed_for_response, len(new_urls))):
                     videos.append({
-                        'url': video_url,
-                        'timestamp': None  # Client will set this
+                        'url': new_urls[i],
+                        'timestamp': None
                     })
-                else:
-                    logger.warning(f"API returned unexpected data format: {data}")
-            else:
-                logger.error(f"API request failed with status code: {response.status_code}")
-                
+                    # Don't add these to cache since we're using them now
+                    new_urls[i] = None
+            
+            # Add remaining new URLs to cache
+            video_url_cache.extend([url for url in new_urls if url is not None])
+        
         return jsonify({
             'success': True,
             'videos': videos

static/js/main.js

@@ -51,8 +51,8 @@ const App = (function() {
         // Set up event listeners
         setupEventListeners();
         
-        // Load initial videos
-        VideoPlayer.loadVideos(3).then(() => {
+        // Load initial video and start playing immediately
+        VideoPlayer.loadVideos(1, true).then(() => {
             // Show swipe indicator after initial load
             setTimeout(() => {
                 swipeIndicator.style.display = 'flex';
@@ -61,7 +61,12 @@ const App = (function() {
                     setTimeout(() => {
                         swipeIndicator.style.display = 'none';
                     }, 500);
-                }, 5000);
+                }, 3000);
+            }, 500);
+            
+            // Load more videos in background for smooth experience
+            setTimeout(() => {
+                VideoPlayer.loadVideos(3, false);
             }, 1000);
         });
         
@@ -212,12 +217,17 @@ const App = (function() {
         videoItem.className = 'video-item';
         videoItem.setAttribute('data-id', videoData.id);
         
-        // Generate thumbnail (in real app, would use actual video thumbnails)
-        const thumbnailUrl = videoData.thumbnail || generatePlaceholderImage();
+        // Use thumbnail if available, otherwise use placeholder
+        let thumbnailUrl;
+        if (videoData.thumbnail) {
+            thumbnailUrl = videoData.thumbnail;
+        } else {
+            thumbnailUrl = generatePlaceholderImage(videoData.id);
+        }
         
         videoItem.innerHTML = `
             <div class="video-thumbnail">
-                <img src="${thumbnailUrl}" alt="${videoData.title}">
+                <img src="${thumbnailUrl}" alt="${videoData.title}" onerror="this.src='${generatePlaceholderImage(videoData.id)}'">
                 <div class="video-duration">${formatDuration(videoData.duration)}</div>
             </div>
             <div class="video-item-info">
@@ -350,11 +360,20 @@ const App = (function() {
     }
     
     /**
-     * Generate placeholder image URL
+     * Generate consistent placeholder image URL based on ID
+     * @param {String} id Item ID for consistent image generation
      * @returns {String} Image URL
      */
-    function generatePlaceholderImage() {
-        const randomId = Math.floor(Math.random() * 1000);
+    function generatePlaceholderImage(id) {
+        // Generate a deterministic number from the string ID
+        let hash = 0;
+        if (id && id.length > 0) {
+            for (let i = 0; i < id.length; i++) {
+                hash = ((hash << 5) - hash) + id.charCodeAt(i);
+                hash |= 0; // Convert to 32bit integer
+            }
+        }
+        const randomId = Math.abs(hash % 1000); // Ensure positive
         return `https://picsum.photos/seed/${randomId}/300/500`;
     }
     

static/js/player.js

@@ -25,6 +25,7 @@ const VideoPlayer = (function() {
     let touchEndY = 0;
     let isLoading = false;
     let isMuted = false;
+    let videoLoadTimeout;
     
     /**
      * Initialize the video player
@@ -70,11 +71,32 @@ const VideoPlayer = (function() {
     /**
      * Load videos from the API
      * @param {Number} count Number of videos to load
+     * @param {Boolean} showLoading Whether to show loading screen
      * @returns {Promise} Promise that resolves when videos are loaded
      */
-    function loadVideos(count = 1) {
+    function loadVideos(count = 1, showLoading = true) {
+        if (isLoading) return Promise.resolve();
+        
         isLoading = true;
-        App.showLoading();
+        if (showLoading) {
+            App.showLoading();
+        }
+        
+        // Clear any existing timeout
+        if (videoLoadTimeout) {
+            clearTimeout(videoLoadTimeout);
+        }
+        
+        // Set a timeout to ensure loading doesn't hang
+        videoLoadTimeout = setTimeout(() => {
+            if (isLoading) {
+                isLoading = false;
+                if (showLoading) {
+                    App.hideLoading();
+                }
+                App.showToast('加载超时，请检查网络后重试');
+            }
+        }, 8000);
         
         return fetch(`/api/videos?count=${count}`)
             .then(response => {
@@ -85,13 +107,25 @@ const VideoPlayer = (function() {
             })
             .then(data => {
                 if (data.success && data.videos && data.videos.length > 0) {
-                    data.videos.forEach(videoData => {
-                        createVideoElement(videoData.url);
-                    });
+                    // Immediately create and start playing the first video
+                    const firstVideo = data.videos[0];
+                    createVideoElement(firstVideo.url);
                     
-                    // Start playing first video if this is initial load
-                    if (videos.length === count) {
+                    // If this is the first video, play it immediately
+                    if (videos.length === 1) {
                         playCurrentVideo();
+                        if (showLoading) {
+                            App.hideLoading();
+                        }
+                    }
+                    
+                    // Asynchronously load remaining videos without blocking UI
+                    if (data.videos.length > 1) {
+                        setTimeout(() => {
+                            for (let i = 1; i < data.videos.length; i++) {
+                                createVideoElement(data.videos[i].url);
+                            }
+                        }, 300);
                     }
                 } else {
                     throw new Error('No videos returned from API');
@@ -99,11 +133,14 @@ const VideoPlayer = (function() {
             })
             .catch(error => {
                 console.error('Error loading videos:', error);
-                App.showToast('加载视频失败，请检查网络连接');
+                App.showToast('加载视频失败，请重试');
             })
             .finally(() => {
+                clearTimeout(videoLoadTimeout);
                 isLoading = false;
-                App.hideLoading();
+                if (showLoading) {
+                    App.hideLoading();
+                }
             });
     }
     
@@ -152,397 +189,448 @@ const VideoPlayer = (function() {
         overlay.className = 'video-overlay';
         
         const videoInfo = document.createElement('div');
-       videoInfo.className = 'video-info';
-       
-       const titleEl = document.createElement('div');
-       titleEl.className = 'video-title';
-       titleEl.textContent = videoObj.title;
-       
-       const descEl = document.createElement('div');
-       descEl.className = 'video-desc';
-       descEl.textContent = videoObj.desc;
-       
-       const metaEl = document.createElement('div');
-       metaEl.className = 'video-meta';
-       
-       const durationEl = document.createElement('div');
-       durationEl.className = 'video-meta-item duration';
-       durationEl.innerHTML = `
-           <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-               <path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.5 7H11V13L16.2 16.2L17 14.9L12.5 12.2V7Z"/>
-           </svg>
-           <span>00:00</span>
-       `;
-       
-       metaEl.appendChild(durationEl);
-       videoInfo.appendChild(titleEl);
-       videoInfo.appendChild(descEl);
-       videoInfo.appendChild(metaEl);
-       overlay.appendChild(videoInfo);
-       
-       // Add elements to DOM
-       videoCard.appendChild(video);
-       videoCard.appendChild(overlay);
-       videoFeed.appendChild(videoCard);
-       
-       // Add to videos array
-       videos.push(videoObj);
-       
-       // Set up video event listeners
-       setupVideoEvents(video, videoObj, durationEl);
-   }
-   
-   /**
-    * Set up event listeners for a video
-    * @param {HTMLElement} video Video element
-    * @param {Object} videoObj Video object
-    * @param {HTMLElement} durationEl Duration display element
-    */
-   function setupVideoEvents(video, videoObj, durationEl) {
-       // Update duration when metadata is loaded
-       video.addEventListener('loadedmetadata', function() {
-           videoObj.duration = Math.round(video.duration);
-           const durationSpan = durationEl.querySelector('span');
-           if (durationSpan) {
-               durationSpan.textContent = formatDuration(videoObj.duration);
-           }
-       });
-       
-       // Update progress bar
-       video.addEventListener('timeupdate', function() {
-           if (videos.indexOf(videoObj) === currentIndex) {
-               const progress = (video.currentTime / video.duration) * 100;
-               progressFill.style.width = `${progress}%`;
-           }
-       });
-       
-       // Handle video errors
-       video.addEventListener('error', function() {
-           console.error('Video load error:', videoObj.url);
-           App.showToast('视频加载失败，正在尝试下一个');
-           if (videos.indexOf(videoObj) === currentIndex) {
-               switchToVideo(currentIndex + 1);
-           }
-       });
-   }
-   
-   /**
-    * Switch to a different video
-    * @param {Number} index Index of video to switch to
-    */
-   function switchToVideo(index) {
-       if (index < 0 || index >= videos.length || isLoading) return;
-       
-       // Pause all videos
-       videos.forEach(item => {
-           item.video.pause();
-       });
-       
-       // Update current index
-       currentIndex = index;
-       
-       // Update video positions
-       updateVideoPositions();
-       
-       // Play current video
-       playCurrentVideo();
-       
-       // Reset progress bar
-       progressFill.style.width = '0';
-       
-       // Update action buttons
-       updateActionButtons();
-       
-       // Add to history
-       if (videos[currentIndex]) {
-           StorageManager.addToHistory(videos[currentIndex]);
-       }
-       
-       // Load more videos if needed
-       if (currentIndex >= videos.length - 2) {
-           loadVideos(2);
-       }
-   }
-   
-   /**
-    * Play the current video
-    */
-   function playCurrentVideo() {
-       if (!videos[currentIndex]) return;
-       
-       const video = videos[currentIndex].video;
-       
-       // Try to play and handle autoplay restrictions
-       const playPromise = video.play();
-       
-       if (playPromise !== undefined) {
-           playPromise.catch(error => {
-               // Auto-play was prevented, set muted and try again
-               console.log('Autoplay prevented, trying muted playback');
-               video.muted = true;
-               isMuted = true;
-               updateVolumeUI();
-               video.play().catch(e => {
-                   console.error('Failed to play video even with mute:', e);
-               });
-           });
-       }
-   }
-   
-   /**
-    * Update positions of all videos
-    */
-   function updateVideoPositions() {
-       videos.forEach((item, idx) => {
-           item.element.style.transform = `translateY(${(idx - currentIndex) * 100}%)`;
-       });
-   }
-   
-   /**
-    * Update action buttons state based on current video
-    */
-   function updateActionButtons() {
-       if (!videos[currentIndex]) return;
-       
-       const videoId = videos[currentIndex].id;
-       
-       // Update like button
-       if (StorageManager.isLiked(videoId)) {
-           likeButton.classList.add('active');
-       } else {
-           likeButton.classList.remove('active');
-       }
-       
-       // Update favorite button
-       if (StorageManager.isFavorite(videoId)) {
-           favoriteButton.classList.add('active');
-       } else {
-           favoriteButton.classList.remove('active');
-       }
-       
-       // Update counts
-       likeCount.textContent = Math.floor(videos[currentIndex].likes);
-       favoriteCount.textContent = StorageManager.isFavorite(videoId) ? '1' : '0';
-   }
-   
-   /**
-    * Handle touch start event
-    * @param {Event} e Touch event
-    */
-   function handleTouchStart(e) {
-       touchStartY = e.touches[0].clientY;
-   }
-   
-   /**
-    * Handle touch end event
-    * @param {Event} e Touch event
-    */
-   function handleTouchEnd(e) {
-       // Only process touch events on home screen
-       if (!document.getElementById('homeScreen').classList.contains('active')) {
-           return;
-       }
-       
-       touchEndY = e.changedTouches[0].clientY;
-       const deltaY = touchStartY - touchEndY;
-       
-       // If swipe distance is significant
-       if (Math.abs(deltaY) > 50) {
-           if (deltaY > 0) {
-               // Swipe up - next video
-               switchToVideo(currentIndex + 1);
-           } else {
-               // Swipe down - previous video
-               switchToVideo(currentIndex - 1);
-           }
-       }
-   }
-   
-   /**
-    * Handle click on video feed
-    * @param {Event} e Click event
-    */
-   function handleVideoClick(e) {
-       // Ignore clicks on controls
-       if (e.target.closest('.action-button') || 
-           e.target.closest('.volume-control')) {
-           return;
-       }
-       
-       // Toggle play/pause
-       if (!videos[currentIndex]) return;
-       
-       const video = videos[currentIndex].video;
-       
-       if (video.paused) {
-           video.play();
-           playIcon.style.display = 'block';
-           pauseIcon.style.display = 'none';
-       } else {
-           video.pause();
-           playIcon.style.display = 'none';
-           pauseIcon.style.display = 'block';
-       }
-       
-       // Show play/pause overlay
-       playPauseOverlay.classList.add('visible');
-       setTimeout(() => {
-           playPauseOverlay.classList.remove('visible');
-       }, 800);
-   }
-   
-   /**
-    * Toggle mute state
-    */
-   function toggleMute() {
-       isMuted = !isMuted;
-       
-       // Update all videos
-       videos.forEach(item => {
-           item.video.muted = isMuted;
-       });
-       
-       // Update UI
-       updateVolumeUI();
-       
-       // Show toast
-       App.showToast(isMuted ? '已静音' : '已开启声音');
-   }
-   
-   /**
-    * Update volume control UI
-    */
-   function updateVolumeUI() {
-       if (isMuted) {
-           volumeOnIcon.style.display = 'none';
-           volumeOffIcon.style.display = 'block';
-       } else {
-           volumeOnIcon.style.display = 'block';
-           volumeOffIcon.style.display = 'none';
-       }
-   }
-   
-   /**
-    * Toggle like for current video
-    */
-   function toggleLike() {
-       if (!videos[currentIndex]) return;
-       
-       const videoId = videos[currentIndex].id;
-       const newLikeState = StorageManager.toggleLike(videoId);
-       
-       // Update UI
-       if (newLikeState) {
-           likeButton.classList.add('active');
-           videos[currentIndex].likes++;
-           App.showToast('已添加到喜欢');
-       } else {
-           likeButton.classList.remove('active');
-           videos[currentIndex].likes--;
-           App.showToast('已取消喜欢');
-       }
-       
-       // Update count
-       likeCount.textContent = Math.floor(videos[currentIndex].likes);
-       
-       // Update profile stats
-       App.updateStats();
-   }
-   
-   /**
-    * Toggle favorite for current video
-    */
-   function toggleFavorite() {
-       if (!videos[currentIndex]) return;
-       
-       const newFavoriteState = StorageManager.toggleFavorite(videos[currentIndex]);
-       
-       // Update UI
-       if (newFavoriteState) {
-           favoriteButton.classList.add('active');
-           favoriteCount.textContent = '1';
-           App.showToast('已添加到收藏');
-       } else {
-           favoriteButton.classList.remove('active');
-           favoriteCount.textContent = '0';
-           App.showToast('已取消收藏');
-       }
-       
-       // Update profile stats
-       App.updateStats();
-   }
-   
-   /**
-    * Play a video from the history or favorites
-    * @param {Object} videoData Video data from storage
-    */
-   function playVideoFromLibrary(videoData) {
-       if (!videoData || !videoData.url) return;
-       
-       // Check if video is already loaded
-       const existingIndex = videos.findIndex(v => v.id === videoData.id);
-       
-       if (existingIndex !== -1) {
-           // Switch to existing video
-           switchToVideo(existingIndex);
-       } else {
-           // Create new video element
-           createVideoElement(videoData.url);
-           
-           // Switch to the new video
-           switchToVideo(videos.length - 1);
-       }
-       
-       // Switch to home screen
-       App.switchToScreen('homeScreen');
-   }
-   
-   /**
-    * Generate a unique video ID
-    * @returns {String} Unique ID
-    */
-   function generateVideoId() {
-       return 'v_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now();
-   }
-   
-   /**
-    * Format duration in seconds to MM:SS
-    * @param {Number} seconds Duration in seconds
-    * @returns {String} Formatted duration
-    */
-   function formatDuration(seconds) {
-       if (!seconds) return '00:00';
-       
-       const minutes = Math.floor(seconds / 60);
-       const remainingSeconds = Math.floor(seconds % 60);
-       return `${minutes < 10 ? '0' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
-   }
-   
-   /**
-    * Get random video description
-    * @returns {String} Random description
-    */
-   function getRandomDescription() {
-       const descriptions = [
-           "精选高质量视频，带给你视觉享受",
-           "每日精选，让你流连忘返",
-           "热门推荐，不容错过的精彩瞬间",
-           "探索更多精彩内容，尽在VideoCharm",
-           "发现生活中的美好瞬间",
-           "精彩纷呈，尽在眼前",
-           "让心情放松的精选内容",
-           "视觉盛宴，触手可及"
-       ];
-       
-       return descriptions[Math.floor(Math.random() * descriptions.length)];
-   }
-   
-   // Public API
-   return {
-       init: init,
-       loadVideos: loadVideos,
-       switchToVideo: switchToVideo,
-       playVideoFromLibrary: playVideoFromLibrary,
-       updateVideoPositions: updateVideoPositions
-   };
+        videoInfo.className = 'video-info';
+        
+        const titleEl = document.createElement('div');
+        titleEl.className = 'video-title';
+        titleEl.textContent = videoObj.title;
+        
+        const descEl = document.createElement('div');
+        descEl.className = 'video-desc';
+        descEl.textContent = videoObj.desc;
+        
+        const metaEl = document.createElement('div');
+        metaEl.className = 'video-meta';
+        
+        const durationEl = document.createElement('div');
+        durationEl.className = 'video-meta-item duration';
+        durationEl.innerHTML = `
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.5 7H11V13L16.2 16.2L17 14.9L12.5 12.2V7Z"/>
+            </svg>
+            <span>00:00</span>
+        `;
+        
+        metaEl.appendChild(durationEl);
+        videoInfo.appendChild(titleEl);
+        videoInfo.appendChild(descEl);
+        videoInfo.appendChild(metaEl);
+        overlay.appendChild(videoInfo);
+        
+        // Add elements to DOM
+        videoCard.appendChild(video);
+        videoCard.appendChild(overlay);
+        videoFeed.appendChild(videoCard);
+        
+        // Add to videos array
+        videos.push(videoObj);
+        
+        // Set up video event listeners
+        setupVideoEvents(video, videoObj, durationEl);
+    }
+    
+    /**
+     * Set up event listeners for a video
+     * @param {HTMLElement} video Video element
+     * @param {Object} videoObj Video object
+     * @param {HTMLElement} durationEl Duration display element
+     */
+    function setupVideoEvents(video, videoObj, durationEl) {
+        // Use video's first frame as thumbnail when available
+        video.addEventListener('loadeddata', function() {
+            videoObj.hasLoadedData = true;
+            // Capture first frame as thumbnail
+            videoObj.thumbnail = captureVideoFrame(video);
+        });
+        
+        // Update duration when metadata is loaded
+        video.addEventListener('loadedmetadata', function() {
+            videoObj.duration = Math.round(video.duration);
+            const durationSpan = durationEl.querySelector('span');
+            if (durationSpan) {
+                durationSpan.textContent = formatDuration(videoObj.duration);
+            }
+        });
+        
+        // Update progress bar
+        video.addEventListener('timeupdate', function() {
+            if (videos.indexOf(videoObj) === currentIndex) {
+                const progress = (video.currentTime / video.duration) * 100;
+                progressFill.style.width = `${progress}%`;
+            }
+        });
+        
+        // Handle playback end (for non-looping videos)
+        video.addEventListener('ended', function() {
+            if (!video.loop) {
+                // Automatically advance to next video
+                switchToVideo(currentIndex + 1);
+            }
+        });
+        
+        // Handle video errors
+        video.addEventListener('error', function() {
+            console.error('Video load error:', videoObj.url);
+            App.showToast('视频加载失败，正在尝试下一个');
+            if (videos.indexOf(videoObj) === currentIndex) {
+                switchToVideo(currentIndex + 1);
+            }
+        });
+    }
+    
+    /**
+     * Capture a frame from video to use as thumbnail
+     * @param {HTMLVideoElement} video Video element
+     * @returns {String} Data URL of thumbnail
+     */
+    function captureVideoFrame(video) {
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            
+            return canvas.toDataURL('image/jpeg', 0.7);
+        } catch (e) {
+            console.error('Error capturing video frame:', e);
+            return null;
+        }
+    }
+    
+    /**
+     * Switch to a different video
+     * @param {Number} index Index of video to switch to
+     */
+    function switchToVideo(index) {
+        if (index < 0 || isLoading) return;
+        
+        // Handle case where requested index exceeds available videos
+        if (index >= videos.length) {
+            // Show loading toast and load more videos
+            App.showToast('正在加载新视频...');
+            loadVideos(1, false).then(() => {
+                // After loading, try again if video exists now
+                if (index < videos.length) {
+                    switchToVideo(index);
+                }
+            });
+            return;
+        }
+        
+        // Pause all videos
+        videos.forEach(item => {
+            item.video.pause();
+        });
+        
+        // Update current index
+        currentIndex = index;
+        
+        // Update video positions
+        updateVideoPositions();
+        
+        // Play current video
+        playCurrentVideo();
+        
+        // Reset progress bar
+        progressFill.style.width = '0';
+        
+        // Update action buttons
+        updateActionButtons();
+        
+        // Add to history
+        if (videos[currentIndex]) {
+            StorageManager.addToHistory(videos[currentIndex]);
+        }
+        
+        // Preload more videos when close to end
+        if (currentIndex >= videos.length - 1) {
+            loadVideos(2, false);
+        }
+    }
+    
+    /**
+     * Play the current video
+     */
+    function playCurrentVideo() {
+        if (!videos[currentIndex]) return;
+        
+        const video = videos[currentIndex].video;
+        
+        // Try to play and handle autoplay restrictions
+        const playPromise = video.play();
+        
+        if (playPromise !== undefined) {
+            playPromise.catch(error => {
+                console.log('Autoplay prevented, trying muted playback');
+                // Auto-play was prevented, set muted and try again
+                video.muted = true;
+                isMuted = true;
+                updateVolumeUI();
+                video.play().catch(e => {
+                    console.error('Failed to play video even with mute:', e);
+                    // If even muted autoplay fails, show a play button overlay
+                    App.showToast('点击视频开始播放');
+                });
+            });
+        }
+    }
+    
+    /**
+     * Update positions of all videos
+     */
+    function updateVideoPositions() {
+        videos.forEach((item, idx) => {
+            item.element.style.transform = `translateY(${(idx - currentIndex) * 100}%)`;
+        });
+    }
+    
+    /**
+     * Update action buttons state based on current video
+     */
+    function updateActionButtons() {
+        if (!videos[currentIndex]) return;
+        
+        const videoId = videos[currentIndex].id;
+        
+        // Update like button
+        if (StorageManager.isLiked(videoId)) {
+            likeButton.classList.add('active');
+        } else {
+            likeButton.classList.remove('active');
+        }
+        
+        // Update favorite button
+        if (StorageManager.isFavorite(videoId)) {
+            favoriteButton.classList.add('active');
+        } else {
+            favoriteButton.classList.remove('active');
+        }
+        
+        // Update counts
+        likeCount.textContent = Math.floor(videos[currentIndex].likes);
+        favoriteCount.textContent = StorageManager.isFavorite(videoId) ? '1' : '0';
+    }
+    
+    /**
+     * Handle touch start event
+     * @param {Event} e Touch event
+     */
+    function handleTouchStart(e) {
+        touchStartY = e.touches[0].clientY;
+    }
+    
+    /**
+     * Handle touch end event
+     * @param {Event} e Touch event
+     */
+    function handleTouchEnd(e) {
+        // Only process touch events on home screen
+        if (!document.getElementById('homeScreen').classList.contains('active')) {
+            return;
+        }
+        
+        touchEndY = e.changedTouches[0].clientY;
+        const deltaY = touchStartY - touchEndY;
+        
+        // If swipe distance is significant
+        if (Math.abs(deltaY) > 50) {
+            if (deltaY > 0) {
+                // Swipe up - next video
+                switchToVideo(currentIndex + 1);
+            } else {
+                // Swipe down - previous video
+                switchToVideo(currentIndex - 1);
+            }
+        }
+    }
+    
+    /**
+     * Handle click on video feed
+     * @param {Event} e Click event
+     */
+    function handleVideoClick(e) {
+        // Ignore clicks on controls
+        if (e.target.closest('.action-button') || 
+            e.target.closest('.volume-control')) {
+            return;
+        }
+        
+        // Toggle play/pause
+        if (!videos[currentIndex]) return;
+        
+        const video = videos[currentIndex].video;
+        
+        if (video.paused) {
+            video.play();
+            playIcon.style.display = 'block';
+            pauseIcon.style.display = 'none';
+        } else {
+            video.pause();
+            playIcon.style.display = 'none';
+            pauseIcon.style.display = 'block';
+        }
+        
+        // Show play/pause overlay
+        playPauseOverlay.classList.add('visible');
+        setTimeout(() => {
+            playPauseOverlay.classList.remove('visible');
+        }, 800);
+    }
+    
+    /**
+     * Toggle mute state
+     */
+    function toggleMute() {
+        isMuted = !isMuted;
+        
+        // Update all videos
+        videos.forEach(item => {
+            item.video.muted = isMuted;
+        });
+        
+        // Update UI
+        updateVolumeUI();
+        
+        // Show toast
+        App.showToast(isMuted ? '已静音' : '已开启声音');
+    }
+    
+    /**
+     * Update volume control UI
+     */
+    function updateVolumeUI() {
+        if (isMuted) {
+            volumeOnIcon.style.display = 'none';
+            volumeOffIcon.style.display = 'block';
+        } else {
+            volumeOnIcon.style.display = 'block';
+            volumeOffIcon.style.display = 'none';
+        }
+    }
+    
+    /**
+     * Toggle like for current video
+     */
+    function toggleLike() {
+        if (!videos[currentIndex]) return;
+        
+        const videoId = videos[currentIndex].id;
+        const newLikeState = StorageManager.toggleLike(videoId);
+        
+        // Update UI
+        if (newLikeState) {
+            likeButton.classList.add('active');
+            videos[currentIndex].likes++;
+            App.showToast('已添加到喜欢');
+        } else {
+            likeButton.classList.remove('active');
+            videos[currentIndex].likes--;
+            App.showToast('已取消喜欢');
+        }
+        
+        // Update count
+        likeCount.textContent = Math.floor(videos[currentIndex].likes);
+        
+        // Update profile stats
+        App.updateStats();
+    }
+    
+    /**
+     * Toggle favorite for current video
+     */
+    function toggleFavorite() {
+        if (!videos[currentIndex]) return;
+        
+        const newFavoriteState = StorageManager.toggleFavorite(videos[currentIndex]);
+        
+        // Update UI
+        if (newFavoriteState) {
+            favoriteButton.classList.add('active');
+            favoriteCount.textContent = '1';
+            App.showToast('已添加到收藏');
+        } else {
+            favoriteButton.classList.remove('active');
+            favoriteCount.textContent = '0';
+            App.showToast('已取消收藏');
+        }
+        
+        // Update profile stats
+        App.updateStats();
+    }
+    
+    /**
+     * Play a video from the history or favorites
+     * @param {Object} videoData Video data from storage
+     */
+    function playVideoFromLibrary(videoData) {
+        if (!videoData || !videoData.url) return;
+        
+        // Check if video is already loaded
+        const existingIndex = videos.findIndex(v => v.id === videoData.id);
+        
+        if (existingIndex !== -1) {
+            // Switch to existing video
+            switchToVideo(existingIndex);
+        } else {
+            // Create new video element
+            createVideoElement(videoData.url);
+            
+            // Switch to the new video
+            switchToVideo(videos.length - 1);
+        }
+        
+        // Switch to home screen
+        App.switchToScreen('homeScreen');
+    }
+    
+    /**
+     * Generate a unique video ID
+     * @returns {String} Unique ID
+     */
+    function generateVideoId() {
+        return 'v_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now();
+    }
+    
+    /**
+     * Format duration in seconds to MM:SS
+     * @param {Number} seconds Duration in seconds
+     * @returns {String} Formatted duration
+     */
+    function formatDuration(seconds) {
+        if (!seconds) return '00:00';
+        
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = Math.floor(seconds % 60);
+        return `${minutes < 10 ? '0' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+    }
+    
+    /**
+     * Get random video description
+     * @returns {String} Random description
+     */
+    function getRandomDescription() {
+        const descriptions = [
+            "精选高质量视频，带给你视���享受",
+            "每日精选，让你流连忘返",
+            "热门推荐，不容错过的精彩瞬间",
+            "探索更多精彩内容，尽在VideoCharm",
+            "发现生活中的美好瞬间",
+            "精彩纷呈，尽在眼前",
+            "让心情放松的精选内容",
+            "视觉盛宴，触手可及"
+        ];
+        
+        return descriptions[Math.floor(Math.random() * descriptions.length)];
+    }
+    
+    // Public API
+    return {
+        init: init,
+        loadVideos: loadVideos,
+        switchToVideo: switchToVideo,
+        playVideoFromLibrary: playVideoFromLibrary,
+        updateVideoPositions: updateVideoPositions
+    };
 })();

static/js/storage.js

@@ -122,6 +122,10 @@ const StorageManager = (function() {
         if (existingIndex !== -1) {
             // Update timestamp of existing item
             history[existingIndex].timestamp = new Date().getTime();
+            // Update thumbnail if available
+            if (video.thumbnail) {
+                history[existingIndex].thumbnail = video.thumbnail;
+            }
         } else {
             // Create simplified record for storage
             const historyItem = {
@@ -191,76 +195,76 @@ const StorageManager = (function() {
     }
     
     /**
-     * Toggle like status for a video
-     * @param {String} videoId Video ID
-     * @returns {Boolean} New like status
-     */
-    function toggleLike(videoId) {
-        if (!videoId) return false;
-        
-        const likes = getLikes();
-        const index = likes.indexOf(videoId);
-        
-        if (index !== -1) {
-            // Remove like
-            likes.splice(index, 1);
-            localStorage.setItem(KEYS.LIKES, JSON.stringify(likes));
-            return false;
-        } else {
-            // Add like
-            likes.push(videoId);
-            localStorage.setItem(KEYS.LIKES, JSON.stringify(likes));
-            return true;
-        }
-    }
+    * Toggle like status for a video
+    * @param {String} videoId Video ID
+    * @returns {Boolean} New like status
+    */
+   function toggleLike(videoId) {
+    if (!videoId) return false;
     
-    /**
-     * Check if a video is liked
-     * @param {String} videoId Video ID to check
-     * @returns {Boolean} Whether video is liked
-     */
-    function isLiked(videoId) {
-        if (!videoId) return false;
-        
-        const likes = getLikes();
-        return likes.includes(videoId);
-    }
+    const likes = getLikes();
+    const index = likes.indexOf(videoId);
     
-    /**
-     * Increment view count
-     */
-    function incrementViews() {
-        const views = getViews();
-        localStorage.setItem(KEYS.VIEWS, JSON.stringify(views + 1));
-    }
-    
-    /**
-     * Clear all history
-     */
-    function clearHistory() {
-        localStorage.setItem(KEYS.HISTORY, JSON.stringify([]));
-    }
-    
-    /**
-     * Clear all favorites
-     */
-    function clearFavorites() {
-        localStorage.setItem(KEYS.FAVORITES, JSON.stringify([]));
+    if (index !== -1) {
+        // Remove like
+        likes.splice(index, 1);
+        localStorage.setItem(KEYS.LIKES, JSON.stringify(likes));
+        return false;
+    } else {
+        // Add like
+        likes.push(videoId);
+        localStorage.setItem(KEYS.LIKES, JSON.stringify(likes));
+        return true;
     }
+}
+
+/**
+ * Check if a video is liked
+ * @param {String} videoId Video ID to check
+ * @returns {Boolean} Whether video is liked
+ */
+function isLiked(videoId) {
+    if (!videoId) return false;
     
-    // Public API
-    return {
-        init: initStorage,
-        getHistory: getHistory,
-        getFavorites: getFavorites,
-        getLikes: getLikes,
-        getViews: getViews,
-        addToHistory: addToHistory,
-        toggleFavorite: toggleFavorite,
-        isFavorite: isFavorite,
-        toggleLike: toggleLike,
-        isLiked: isLiked,
-        clearHistory: clearHistory,
-        clearFavorites: clearFavorites
-    };
+    const likes = getLikes();
+    return likes.includes(videoId);
+}
+
+/**
+ * Increment view count
+ */
+function incrementViews() {
+    const views = getViews();
+    localStorage.setItem(KEYS.VIEWS, JSON.stringify(views + 1));
+}
+
+/**
+ * Clear all history
+ */
+function clearHistory() {
+    localStorage.setItem(KEYS.HISTORY, JSON.stringify([]));
+}
+
+/**
+ * Clear all favorites
+ */
+function clearFavorites() {
+    localStorage.setItem(KEYS.FAVORITES, JSON.stringify([]));
+}
+
+// Public API
+return {
+    init: initStorage,
+    getHistory: getHistory,
+    getFavorites: getFavorites,
+    getLikes: getLikes,
+    getViews: getViews,
+    addToHistory: addToHistory,
+    toggleFavorite: toggleFavorite,
+    isFavorite: isFavorite,
+    toggleLike: toggleLike,
+    isLiked: isLiked,
+    clearHistory: clearHistory,
+    clearFavorites: clearFavorites
+};
 })();