Add PlatformOverviewSection component - #23
Merged
Merged
Conversation
Introduce a new PlatformOverviewSection React component (src/components/PlatformOverviewSection) with styles.module.css that shows tabbed, keyboard-accessible demo videos. Features: in-view autoplay via IntersectionObserver, prefers-reduced-motion support, media status handling and a placeholder UI while videos load. Wire the section into the homepage (import added in src/pages/index.js). Add static/video/platform-overview/README.md describing required demo MP4 files and recommended export settings.
Use Docusaurus useColorMode to load a dark-themed video file when in dark mode (appends .dark.mp4). Update video key/src to include color mode so the player reloads on theme change, and add colorMode to effect dependencies. Update media hint and README to document the .dark.mp4 variants for each demo.
Update PlatformOverviewSection styles to match specific video dimensions and layout: change aspect-ratio to 1440/762, simplify viewport background, add inset/padding adjustments, use calc() for video width/height, set box-sizing and background, and switch object-fit to contain to avoid cropping. Also add tuned positioning for the video in the responsive block. Update platform-overview README to recommend MP4 (H.264), muted, 1440×762 and keep identical dimensions for light/dark variants.
Delete several binary assets from static/img that are no longer needed: autobase_create_cluster_demo.gif, background.mp4, deploying.png, pg-console-home.png, pg-console-login.png, pg-console.png, postgresql_cluster.dark_mode.png, and postgresql_cluster.png. This cleans up unused media from the repository.
Add a new "YAML Editor" demo to PlatformOverviewSection and update demo labels to be action-oriented (e.g., "Create Clusters", "Edit Parameters"). Adjust mobile styles: make tabs display as a 2-column grid and ensure full-width tab buttons. Update platform-overview README to list yaml-editor.mp4 and yaml-editor.dark.mp4.
Adds clusters.mp4 and clusters.dark.mp4 to static/video/platform-overview. Updates README to recommend MP4 (H.264), muted, 1920×1080 (16:9) with faststart enabled for web playback and to keep identical dimensions/encoding for light and dark variants, improving playback compatibility and standardizing assets.
Split intersection observers to detect 'near' vs 'in-view' and load video earlier when near the section. Add isNearView, hasStartedPlaying and prefetchedVideos refs. Dynamically set preload to 'auto' when near, call video.load() to start loading, and set hasStartedPlaying on play. After playback starts and while in view, prefetch the next demo video (skipping on Save-Data or very slow connections) with a delayed <link rel=prefetch>. Also reset media play state on activeIndex/colorMode changes and clean up observers.
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.
Introduce a new PlatformOverviewSection React component (src/components/PlatformOverviewSection) with styles.module.css that shows tabbed, keyboard-accessible demo videos.
Features: in-view autoplay via IntersectionObserver, prefers-reduced-motion support, media status handling and a placeholder UI while videos load.