227 Commits

Author SHA1 Message Date
Yiannis Christodoulou
e0f13e9635 Add keyboard shortcuts for video playback
Implemented keyboard shortcuts for play/pause (spacebar) and seeking backward/forward (arrow keys) in the video editor. Shortcuts are disabled when typing in input fields to prevent interference.
2025-10-19 14:03:23 +03:00
Yiannis Christodoulou
0fac57ee9b Add posterUrl to MEDIA_DATA global object
Introduces a new optional 'posterUrl' property to the MEDIA_DATA object on the window, updating both the runtime initialization and TypeScript type declaration.
2025-10-19 13:56:47 +03:00
Yiannis Christodoulou
54e2f1d7e4 Add audio poster support for audio files in video players
Introduces an audio-poster.jpg image and updates both chapters and video editor React video player components to display a poster image for audio files when no poster is provided. Also adds a posterUrl field to MEDIA_DATA and ensures fallback logic for poster images is consistent across iOS and standard video players.
2025-10-19 13:56:17 +03:00
Yiannis Christodoulou
192333b8d9 Refine sprite frame calculation and cleanup logging
Improves frame index calculation for sprite previews in ChapterMarkers and SpritePreview components by removing arbitrary frame caps and fallback logic, ensuring accurate frame selection based on video duration and interval. Also removes unnecessary console logging from SpritePreview.
2025-10-19 13:18:55 +03:00
Yiannis Christodoulou
03872d0b25 Support empty chapters state in editor
Allows users to clear all chapters, sending an empty array to the backend. Removes default segment creation when no chapters exist, updates UI and modal messaging for empty state, and ensures backend receives empty chapters when appropriate.
2025-10-19 12:40:12 +03:00
Yiannis Christodoulou
c21317dbb4 Close settings menu after option selection
Update speed, quality, and subtitle change handlers to close the entire settings menu after a selection is made, instead of only closing submenus or overlays. This improves user experience by streamlining menu interactions.
2025-10-19 11:12:08 +03:00
Yiannis Christodoulou
1887c262d5 Improve subtitle restoration for mobile devices
Increases subtitle restoration attempts and uses exponential backoff to better support mobile devices where text tracks may load slowly. Adds logic to only warn when subtitle tracks are present but the desired language is not found, and improves error handling for native text track access.
2025-10-18 22:00:20 +03:00
Yiannis Christodoulou
b2729d16aa Hide settings tooltip when menu is open
Removes the tooltip from the settings button when the settings menu is open and restores it when the menu is closed. This improves user experience by preventing the tooltip from overlapping the open menu.
2025-10-18 21:43:24 +03:00
Yiannis Christodoulou
1a080adddc cleanup comments and old code 2025-10-18 21:34:19 +03:00
Yiannis Christodoulou
a4f0c742a0 Improve VideoJS control bar layout and responsiveness
Added CSS rules to prevent control bar button overflow, prioritize essential controls, and hide less important buttons on smaller screens. Also removed legacy VideoJS static assets no longer in use.
2025-10-17 15:52:23 +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
55c701e055 fix: Adjust subtitle position when controls are visible 2025-10-17 11:31:39 +03:00
Yiannis Christodoulou
40d13e8bd0 Update Greek subtitles timing in sample VTT file
Adjusted the timing of subtitle cues in sample-subtitles-greek.vtt to better align with the video content.
2025-10-17 11:29:45 +03:00
Yiannis Christodoulou
4772c11305 fix Format segments data for API request - use ref to get latest segments and sort by start time 2025-10-16 18:38:46 +03:00
Yiannis Christodoulou
0854eabd7f Reset control bar behavior after end screen events
Adds a method to reset the control bar to its default auto-hide behavior after the end screen is hidden, when auto-playing the next video, and during cleanup. Ensures the control bar does not remain visible unintentionally after video end or transitions.
2025-10-16 18:04:16 +03:00
Yiannis Christodoulou
03d62909b4 audio poster image 2025-10-16 17:19:59 +03:00
Yiannis Christodoulou
48e632c17f Improve icon size calculation for AutoplayToggleButton
Icon size is now calculated in pixels based on em units from PlayerConfig, with scaling and sensible defaults. Added defensive checks to ensure iconSize is always a valid number, improving reliability across device types.
2025-10-16 17:13:44 +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
84ed74d40d Increase mobile caption font size to 13
Updated the mobileFontSize setting in the captions config from 10 to 13 to improve readability on mobile devices.
2025-10-16 16:19:20 +03:00
Yiannis Christodoulou
5a282c7cd2 Improve Safari audio/video initialization and fallbacks
Adds Safari-specific detection and initialization logic to better support audio and video playback, especially for cases where metadata is not loaded as expected. Implements fallback event listeners, user interaction triggers, and exposes an initialization helper to ensure the editor works reliably on Safari and iOS devices.
2025-10-16 16:12:35 +03:00
Yiannis Christodoulou
219e80e9e2 Scope fullscreen button size to hover-capable devices
Wrapped the fullscreen button SVG sizing rules in a media query targeting devices with hover and fine pointer capabilities. This prevents the size override from affecting touch devices.
2025-10-16 15:50:56 +03:00
Yiannis Christodoulou
d955576a7e Center fullscreen button and adjust its size
Added CSS rules to center the fullscreen button's SVG and set its width and height to 30px for improved alignment and appearance.
2025-10-16 15:48:21 +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
085e944861 ChapterEditor: Add keyboard shortcuts for video playback controls
Implemented keyboard shortcuts for play/pause (Space), jump backward (ArrowLeft), and jump forward (ArrowRight) in the chapters editor. Shortcuts are disabled when typing in input fields to prevent interference with text entry.
2025-10-16 14:59:32 +03:00
Yiannis Christodoulou
276bf6a875 Standardize z-index hierarchy for VideoJS overlays
Introduced a Z-INDEX-HIERARCHY.md documentation file and updated z-index values across overlay and control CSS files to enforce a consistent stacking order. Ensures tooltips are always on top, menus and chapters overlays are above informational overlays, and end screen overlays remain at the base of the overlay stack. This improves UI layering logic and user interaction reliability.
2025-10-16 14:47:23 +03:00
Yiannis Christodoulou
6b68e6537f Chapter Editor: Show placeholder for default chapter titles
When a segment's chapter title is a default generated name (e.g., 'Chapter 1'), the editing field now displays an empty string to trigger the placeholder, improving the user experience for custom title entry.
2025-10-16 14:28:15 +03:00
Yiannis Christodoulou
88d6ef3700 Increase default font size in player config
Updated the fontSize property from 12 to 14 in the player configuration to improve text readability.
2025-10-16 13:42:04 +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
d9aee11d44 fix: Edit: Chapter: When undoing / redoing edits, the edits are not saved 2025-10-13 01:49:53 +03:00
Yiannis Christodoulou
bd786c0fe6 Generate chapter names based on segment order
Introduces a helper function to assign chapter titles like 'Chapter 1', 'Chapter 2', etc., based on the chronological position of each segment. Updates all segment creation and splitting logic in TimelineControls and useVideoChapters to use this naming convention for improved clarity and consistency.
2025-10-13 01:45:18 +03:00
Yiannis Christodoulou
e06115b8ee fix: Chapters: If adding a chapter between two existing chapters, the order of the chapters are wrong in the editor timeline, and in the player chapter view 2025-10-13 01:40:03 +03:00
Yiannis Christodoulou
f67021b17b fix: Chapters: Play should not stop at the end of a chapter or a cutaway area, but should just continue play through. 2025-10-13 01:35:12 +03:00
Yiannis Christodoulou
ee7fb7950c Chapters: Play Preview should not be included for the chapter editor - only Play is needed 2025-10-13 01:24:20 +03:00
Yiannis Christodoulou
13ac69bd50 Remove play icon from chapter drag handle
Updated the CustomChaptersOverlay component to always display the chapter index in the drag handle, removing the conditional play icon ('▶') for the active chapter. This simplifies the UI and ensures consistent labeling of chapter handles.
2025-10-13 01:18:21 +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
c5b11505e0 Ensure time control visibility in VideoJSPlayer
Updated CSS to always display the time control in the video player across all screen sizes, while hiding the time divider. This improves consistency in the player UI.
2025-10-13 00:28:44 +03:00
Yiannis Christodoulou
fb373f3c2c fix: Chapters: The default text in a new chapter’s text field is “segment”. Change to (e.g.): “Add Chapter Text” 2025-10-12 21:37:29 +03:00
Yiannis Christodoulou
0fccefeec6 Refine tooltip and chapter input styles in timeline
Adjusted the tooltip position transition endpoint for better placement. Updated the chapter input to use a textarea selector, set fixed height constraints, and improved focus and placeholder styles for consistency. CSS and static assets updated to reflect these changes.
2025-10-12 21:34:48 +03:00
Yiannis Christodoulou
6b349e5813 update assets 2025-10-11 03:33:44 +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
30fdfaf452 Redesign end screen overlay with compact grid and text overlays
Refactors EndScreenOverlay to use a more compact grid layout, overlays video title and meta info directly on thumbnails, and adjusts card heights for better space utilization. Updates CSS for responsive breakpoints, adds new sample videos, and improves grid configuration logic for various screen sizes. Debugging styles and logs are included for development visibility.
2025-10-11 03:09:49 +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
107b8d9db0 Enhance end screen overlay with responsive grid and swiper
Redesigned the end screen overlay to support a responsive grid layout for related videos on larger screens and a horizontal swiper for small screens. Improved card consistency, added navigation indicators for the swiper, and unified styling in both CSS and JS for better user experience and maintainability.
2025-10-11 02:38:56 +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
f787087531 Improve mobile responsiveness for settings and chapters
Adds mobile-first responsive CSS for the custom settings menu and chapters overlay, including adaptive sizing, touch-friendly interactions, and prevention of body scroll when overlays are open. Updates CustomSettingsMenu.js to detect mobile devices, handle touch events for menu items, and manage scroll locking and haptic feedback for a better mobile user experience.
2025-10-11 01:48:26 +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