feat: Add support for optimised video play in home page underneath carousel#123
Open
feat: Add support for optimised video play in home page underneath carousel#123
Conversation
- Add TypeScript configuration and dependencies - Update ESLint config to include TypeScript support - Remove jsconfig.json in favor of tsconfig.json - Add video hover functionality to AppsCarousel component - Update app descriptions and add video URLs/posters - Add new Mammoth menu item to navigation - Include video conversion and poster fix scripts - Add AdvancedVideoPlayer component for enhanced video handling
…ormance optimization - Add useIntersectionObserver hook for efficient viewport detection - Implement lazy loading for PrimaryHero video with smooth fade-in animation using framer-motion - Optimize AdvancedVideoPlayer with intersection observer to only load videos when in view - Remove Next.js Image component from video posters to prevent quality loss - Add fade-in transition (0.8s easeOut) for better UX in PrimaryHero - Update debug panel in AdvancedVideoPlayer to show intersection state - Improve performance by reducing unnecessary video loading and bandwidth usage
- Add lazy loading to MediaRow videos using useIntersectionObserver - Add lazy loading to Footer video using useIntersectionObserver - Remove unused totalRows parameter from MediaRow component - Videos now load only when 100px from viewport for better performance - Maintains all existing functionality while reducing initial page load
- Add convert_underneath_videos.sh script for automated video processing - Remove old fix_posters.sh and rename_files.sh scripts - Add comprehensive README.md for underneath video assets - Include video conversion specifications and usage instructions - Add reminders to update apps-on-celestia.js with new video paths
- Remove useIntersectionObserver hook and all related logic from video components - Restore immediate video loading for better performance in production - Keep framer-motion fade-in animation in PrimaryHero for smooth UX - Fix slow video loading issues caused by delayed intersection observer triggers Affects: - PrimaryHero.js: restored immediate loading + kept smooth animation - MediaRow.js: restored immediate VideoPlayer rendering - Footer.js: restored immediate footer video loading - AdvancedVideoPlayer.tsx: removed intersection observer dependency - Deleted useIntersectionObserver.ts hook file Videos now load immediately on component render instead of waiting for viewport intersection.
…ter support - Replace VideoPlayer/Video components with native HTML video elements - Add preload='auto' with manual play() triggering for better loading control - Generate poster images from first frame of all videos using ffmpeg - Add poster support to PrimaryHero, AppsCarousel, MediaRow, and Footer components - Update data structures to include posterSrc paths - Remove unused VideoPlayer and AdvancedVideoPlayer imports - Improve video loading performance and user experience
- Add video caching system with blob URL management for better performance - Implement lazy loading for videos in AppsCarousel and MediaRow components - Add blog post caching with localStorage to reduce API calls and handle rate limiting - Optimize video autoplay with multiple retry strategies for Safari compatibility - Add viewport-based video loading (mobile/desktop) with resize handling - Reduce video file sizes by ~30-40% through optimization - Add intersection observer for efficient video loading when components enter viewport - Implement duplicate video loading prevention in carousel - Add graceful fallbacks for video loading failures - Improve hero video height responsiveness (90vh -> 100vh on large screens) Performance improvements: - Videos now load only when needed, reducing initial page load - Cached blob URLs prevent re-downloading of videos - Blog API calls cached for 1 hour with stale cache fallback on rate limits - Mobile/desktop video switching without re-downloading
- Skip blob URL conversion for Safari to prevent infinite byte-range requests - Use preload='none' for Safari instead of preload='metadata' - Change AppsCarousel to scroll-based video loading trigger - Fix hydration mismatch by detecting Safari on client-side only - Maintain 200px viewport offset for lazy loading videos Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.