101 Commits

Author SHA1 Message Date
Yiannis Christodoulou
f90e03740e Improve caption positioning and sizing for mobile/iOS
Enhances subtitle and caption display by adjusting their position above the control bar on iOS using both CSS (::cue) and programmatic cue updates. Increases caption font size responsively for mobile and tablet screens, and ensures native text tracks are used on iOS for better fullscreen support. Dynamically updates cue positioning based on user activity and track changes to improve accessibility and readability.
2025-10-20 01:10:50 +03:00
Yiannis Christodoulou
41b0bdcb50 For embed players, use longer timeout to keep controls visible 2025-10-20 00:29:29 +03:00
Yiannis Christodoulou
1a080adddc cleanup comments and old code 2025-10-18 21:34:19 +03:00
Yiannis Christodoulou
6f3ed46413 Add audio sample and update video sample assets
Moved sample-media-file.json to src/assets, updated subtitle info with a new URL, and added a new sample-media-file.mp3.json for audio testing. These changes support improved handling and testing of both video and audio media in the VideoJSPlayer component.
2025-10-17 15:46:46 +03:00
Yiannis Christodoulou
178b5ed37c audio poster 2025-10-17 14:13:12 +03:00
Yiannis Christodoulou
2a12fec89e Keep poster visible for audio embeds and update track handling
Ensures the poster image remains visible during playback for audio files in embed players by updating both JavaScript logic and CSS. Also updates subtitle track handling to set the default track and adjusts Video.js player configuration for better control over native and emulated tracks.
2025-10-17 14:05:38 +03:00
Yiannis Christodoulou
03d62909b4 audio poster image 2025-10-16 17:19:59 +03:00
Yiannis Christodoulou
af7b4f6212 Hide fullscreen and PiP controls for audio and touch devices
Updated VideoJSPlayer to hide the fullscreen toggle for audio files and the picture-in-picture toggle for both audio files and touch devices, improving the control bar UI for these scenarios.
2025-10-16 16:55:05 +03:00
Yiannis Christodoulou
166882558d Hide load progress bar in VideoJSPlayer seek bar
Set loadProgressBar to false in the seekBar config to hide the buffered/loaded progress indicator in the VideoJSPlayer component.
2025-10-16 15:43:43 +03:00
Yiannis Christodoulou
aa458a1a31 Add sample media file and update VideoJSPlayer
Added a comprehensive sample-media-file.json for use with the video player. Updated VideoJSPlayer.jsx to support or utilize the new sample media file, likely for development or testing purposes.
2025-10-16 15:16:11 +03:00
Yiannis Christodoulou
211a442f29 Add default audio poster and update video player props
Added a default audio poster image and updated VideoJSPlayer to use it when no poster_url is provided. Also refactored mock media data property names for consistency.
2025-10-16 13:41:48 +03:00
Yiannis Christodoulou
cf1b84d538 Hide time tooltip, mouse display, and sprite preview for audio files 2025-10-13 01:14:15 +03:00
Yiannis Christodoulou
ea67201fa5 fix: Subtitles button toggles settings menu directly to subtitles 2025-10-13 00:48:52 +03:00
Yiannis Christodoulou
62ce066910 Hide progress bar on embed player until video starts
Restores conditional logic to hide the progress bar for embed players until playback begins, ensuring regular players display the progress bar as expected.
2025-10-11 03:17:29 +03:00
Yiannis Christodoulou
f07e5b9e5a Revert "Keep progress bar always visible in VideoJSPlayer"
This reverts commit 24e9fb4e40e6cfd2e37ba8e2a75e2b070d83c725.
2025-10-11 02:42:26 +03:00
Yiannis Christodoulou
24e9fb4e40 Keep progress bar always visible in VideoJSPlayer
Updated the logic to ensure the progress bar remains visible even when the control bar is hidden, except for embed players where it is hidden with controls. Also cleaned up hls_info mock data and improved initial progress bar visibility handling.
2025-10-11 02:38:49 +03:00
Yiannis Christodoulou
8eb196bf74 Improve mobile UX for chapters overlay and add chapters
Enhanced the CustomChaptersOverlay component and CSS for a more responsive, touch-friendly mobile experience, including haptic feedback, scroll optimizations, and body scroll locking. Updated SubtitlesButton indicator for better alignment. Added multiple new chapters to the sample video in VideoJSPlayer.jsx for richer navigation.
2025-10-11 01:35:38 +03:00
Yiannis Christodoulou
ab96f33bf3 Enable and refine mobile play/pause touch handling
Uncomments and activates the setupMobilePlayPause function to improve mobile play/pause behavior. Removes unnecessary console.log statements and refactors the play/pause logic for clarity.
2025-10-11 01:00:00 +03:00
Yiannis Christodoulou
27a6ab0755 Update video player config and progress bar visibility
Renamed 'hls_info' to '_hls_info' in mock data and restored an empty 'hls_info' object. Changed 'useRoundedCorners' to false. Added a console log for 'autoplayHandler'. Modified progress bar visibility logic to always hide initially, regardless of embed player status.
2025-10-11 00:26:26 +03:00
Yiannis Christodoulou
76e85d2577 Improve subtitles menu and button behavior in VideoJS
Adds direct access to the subtitles submenu from the subtitles button, updates the button's active state based on subtitle selection, and dispatches a custom event on subtitle state changes. Also cleans up unused static video.js files and enables the SubtitlesButton CSS.
2025-10-10 11:06:13 +03:00
Yiannis Christodoulou
fef43efaa9 Refactor video player tooltips and remove static assets
Moved tooltip logic for custom video player controls (autoplay, next video, settings) into VideoJSPlayer.jsx, removing direct 'title' attributes from button components. Improved dynamic tooltip updates for the autoplay toggle. Removed unused static video_js CSS and JS assets.
2025-10-10 10:46:31 +03:00
Yiannis Christodoulou
816135266c Skip empty tooltips 2025-10-10 10:30:29 +03:00
Yiannis Christodoulou
4bec15fad5 Remove debug console.log statements from VideoJSPlayer
Eliminated multiple console.log statements used for debugging in the VideoJSPlayer component to clean up the code and reduce unnecessary console output.
2025-10-10 09:39:18 +03:00
Yiannis Christodoulou
5da377a8a5 Make control bar spacer fully transparent
Updated the spacer element in the video player's control bar to be fully transparent and non-interactive by setting background, border, outline, boxShadow, opacity, and pointerEvents styles. This ensures the spacer does not affect the visual appearance or user interaction.
2025-10-10 09:36:23 +03:00
Yiannis Christodoulou
d8cfc8be7b build assets 2025-10-10 09:31:48 +03:00
Yiannis Christodoulou
b2279f73f6 Enable user actions and update progress bar styles
Uncommented and enabled click, tap, and doubleClick user actions in VideoJSPlayer. Adjusted progress bar margin and padding for improved layout. Cleaned up VideoJSPlayerRoundedCorners.css by removing commented-out gradient overlay and related styles.
2025-10-10 09:11:40 +03:00
Yiannis Christodoulou
115af7497b build assets 2025-10-10 01:45:47 +03:00
Yiannis Christodoulou
e1108a9ba6 Support moved progress control in markers and sprite preview
Updated ChapterMarkers and SpritePreview components to locate the progress control even if it has been moved out of the control bar, using a reference stored in customComponents. Also updated VideoJSPlayer to store customComponents on the player instance for easier access by child components.
2025-10-10 01:39:33 +03:00
Yiannis Christodoulou
59f65bdd21 Refine progress bar positioning and styling in VideoJSPlayer
Enhanced the logic for moving and styling the progress bar relative to the control bar, including improved style resets and visibility transitions. Updated the default non-touch progress bar position from 'top' to 'bottom' in playerConfig.js for a more native touch style experience.
2025-10-10 01:20:09 +03:00
Yiannis Christodoulou
4acdec7474 Adjust control bar font size for touch devices
Added a separate mobileFontSize to PlayerConfig and updated AutoplayToggleButton, NextVideoButton, and VideoJSPlayer to use a smaller font size for control bar icons and text on touch devices. This improves UI consistency and usability across device types.
2025-10-10 01:01:23 +03:00
Yiannis Christodoulou
9896eb0376 Refactor control and progress bar styling logic
Removed unnecessary setTimeouts for applying control bar and progress bar styles, applying them synchronously instead. Updated playerConfig to set nonTouchPosition to 'top' and touchPosition to 'bottom'. Added initial sync for progress bar visibility.
2025-10-10 00:36:14 +03:00
Yiannis Christodoulou
d925bd0b5d Hide progress bar until video starts playing
Updated VideoJSPlayer to initially hide the progress bar and only show it when the video starts playing or seeking. Also commented out fixed positioning for the control bar in embed.css, likely to adjust control bar behavior for embedded players.
2025-10-10 00:26:01 +03:00
Yiannis Christodoulou
bf27cbf559 Disable touch tooltip support for standard buttons
Commented out the call to addTouchTooltipSupport in enableStandardButtonTooltips, removing touch tooltip support for standard video player buttons. This may be to address issues with tooltip behavior on mobile devices.
2025-10-10 00:19:10 +03:00
Yiannis Christodoulou
523ae2e736 Fix progress bar spacer for touch devices
Update condition to add the progress bar spacer when on touch devices, ensuring correct UI behavior regardless of nonTouchPosition setting.
2025-10-10 00:14:46 +03:00
Yiannis Christodoulou
09c643b6b1 Remove unused control bar items from VideoJSPlayer
Eliminated several control bar components such as playToggle, currentTimeDisplay, timeDivider, durationDisplay, and fullscreenToggle from the VideoJSPlayer configuration to streamline the player UI.
2025-10-09 18:32:20 +03:00
Yiannis Christodoulou
acdf11d597 Refactor progress bar styling and update config
Progress bar color styling is now always applied, not just for custom positions, by moving the relevant code outside the position check. Updated playerConfig.js to set touchPosition to 'top' and fixed the control bar backgroundColor value.
2025-10-09 18:03:46 +03:00
Yiannis Christodoulou
15c85c1c10 Refactor progress bar positioning for touch and non-touch devices
Updated VideoJSPlayer to determine progress bar position based on device type, using separate config options for touch and non-touch devices. PlayerConfig now has 'nonTouchPosition' and 'touchPosition' instead of a single 'position' property. Also set nativeControlsForTouch to false for consistent custom controls.
2025-10-09 16:34:19 +03:00
Yiannis Christodoulou
9c4aeb3134 Refactor player controls and progress bar layout
Moved native controls and progress bar positioning logic to PlayerConfig for better configurability. Separated control bar styling from progress bar layout, allowing independent application of styles. Added a spacer to the control bar to improve button alignment when the progress bar is repositioned. Cleaned up legacy code and improved maintainability.
2025-10-09 15:42:48 +03:00
Yiannis Christodoulou
9ada2cb8c9 Add configurable control bar styles to VideoJSPlayer
Introduced a new controlBar configuration in playerConfig.js to allow customization of control bar background color, height, and font size. Updated VideoJSPlayer.jsx to apply these styles dynamically, including line height for time controls.
2025-10-09 14:38:00 +03:00
Yiannis Christodoulou
ea3cdda18c Refactor progress bar placement and controls in VideoJSPlayer
Moved the progress bar below the control bar for a native touch style, with configurable positioning and styling via PlayerConfig. Removed the TestButton and related code, and updated user action options to comment out click, tap, and doubleClick behaviors. Improved progress bar visibility handling based on user activity and cleaned up related event listeners.
2025-10-09 13:51:16 +03:00
Yiannis Christodoulou
c4a3e3f383 try vertical video 2025-10-06 19:15:02 +03:00
Yiannis Christodoulou
e65954f391 Refactor embed player styles and overlay behavior
Simplifies and updates embed player CSS for YouTube-style fullscreen poster and video display, moving legacy styles to embed_OLD.css. Refines overlay visibility logic in EmbedInfoOverlay for more accurate YouTube-like behavior, and ensures embed styles are imported in VideoJSPlayer. Updates HTML to enforce full-viewport sizing and overflow handling for embedded player.
2025-10-06 13:57:54 +03:00
Yiannis Christodoulou
a29d94dcbd Remove VideoJSNew and consolidate player components
Deleted VideoJSNew.jsx and removed VideoJSPlayerNew from exports. Merged VideoJSPlayerNew.css into VideoJSPlayer.css and updated VideoJSPlayer.jsx with new features, configuration, and sample data. Refactored and enhanced VideoJSPlayer to be the main player component, updating references and improving tooltip, autoplay, and control bar logic.
2025-10-06 12:41:54 +03:00
Yiannis Christodoulou
afaab453e1 refactor everything related to video.js 2025-10-06 11:42:07 +03:00
Yiannis Christodoulou
ccfe93a0f4 Hide HLS buffer segment boundaries and update dev mode 2025-10-03 11:24:35 +03:00
Yiannis Christodoulou
94d8a70d59 Update mock media data for VideoJSPlayer
Replaces the mock video, poster, and related URLs in the development fallback data with new assets for user 'markos'. Updates encoding and HLS info to match the new video, and disables development mode by setting isDevMode to false.
2025-10-03 11:24:35 +03:00
Yiannis Christodoulou
a43316bd5b Add custom wrapper for fullscreen button in VideoJS 2025-10-03 11:24:34 +03:00
Yiannis Christodoulou
09bd4d59b1 Style and wrap picture-in-picture button in VideoJS
Added custom CSS for the picture-in-picture button wrapper to ensure consistent sizing and alignment with other controls. Updated VideoJSPlayer.jsx to wrap the PiP button in a styled container for improved UI consistency.
2025-10-03 11:24:34 +03:00
Yiannis Christodoulou
37464e5a86 Add custom wrapper for settings button in VideoJS 2025-10-03 11:24:34 +03:00
Yiannis Christodoulou
9e689c88ba Add custom wrapper for autoplay toggle button 2025-10-03 11:24:34 +03:00