CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 07:28:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refine sprite frame calculation and cleanup logging

Browse Source 
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.
This commit is contained in:
Yiannis Christodoulou 2025-10-19 13:18:55 +03:00
parent a61692aa8c
commit 192333b8d9
2 changed files with 16 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend-tools/video-js/src/components/markers/ChapterMarkers.js
View File

@ -310,20 +310,20 @@ class ChapterMarkers extends Component {
// Use sprite interval from frame data, fallback to 10 seconds // Use sprite interval from frame data, fallback to 10 seconds
const frameInterval = frame.seconds || 10; const frameInterval = frame.seconds || 10;
// Try to detect total frames based on video duration vs frame interval // Calculate total frames based on video duration vs frame interval
const videoDuration = this.player().duration() || 45; // fallback duration const videoDuration = this.player().duration();
const calculatedMaxFrames = Math.ceil(videoDuration / frameInterval); if (!videoDuration) return;
const maxFrames = Math.min(calculatedMaxFrames, 6); // Cap at 6 frames to be safe
const maxFrames = Math.ceil(videoDuration / frameInterval);
let frameIndex = Math.floor(currentTime / frameInterval); let frameIndex = Math.floor(currentTime / frameInterval);
// Clamp frameIndex to available frames to prevent showing empty areas // Clamp frameIndex to available frames to prevent showing empty areas
frameIndex = Math.min(frameIndex, maxFrames - 1); frameIndex = Math.min(frameIndex, maxFrames - 1);
frameIndex = Math.max(frameIndex, 0);
// Based on the sprite image you shared, it appears to have frames arranged vertically // Frames are arranged vertically (1 column, multiple rows)
// Let's try a vertical layout first (1 column, multiple rows) const frameRow = frameIndex;
const frameRow = frameIndex; // Each frame is on its own row const frameCol = 0;
const frameCol = 0; // Always first (and only) column
// Calculate background position (negative values to shift the sprite) // Calculate background position (negative values to shift the sprite)
const xPos = -(frameCol * width); const xPos = -(frameCol * width);
@ -337,12 +337,6 @@ class ChapterMarkers extends Component {
// Ensure the image is visible // Ensure the image is visible
this.chapterImage.style.display = 'block'; this.chapterImage.style.display = 'block';
// Fallback: if we're beyond frame 3 (30s+), try showing frame 2 instead (20-30s frame)
if (frameIndex >= 3 && currentTime > 30) {
const fallbackYPos = -(2 * height); // Frame 2 (20-30s range)
this.chapterImage.style.backgroundPosition = `${xPos}px ${fallbackYPos}px`;
}
} }
formatTime(seconds) { formatTime(seconds) {

25
frontend-tools/video-js/src/components/markers/SpritePreview.js
View File

@ -38,18 +38,15 @@ class SpritePreview extends Component {
// Try to get progress control from control bar first, then from moved location // Try to get progress control from control bar first, then from moved location
let progressControl = this.player().getChild('controlBar').getChild('progressControl'); let progressControl = this.player().getChild('controlBar').getChild('progressControl');
console.log('SpritePreview: progressControl from controlBar:', progressControl);
// If not found in control bar, it might have been moved to a wrapper // If not found in control bar, it might have been moved to a wrapper
if (!progressControl) { if (!progressControl) {
// Look for moved progress control in custom components // Look for moved progress control in custom components
const customComponents = this.player().customComponents || {}; const customComponents = this.player().customComponents || {};
progressControl = customComponents.movedProgressControl; progressControl = customComponents.movedProgressControl;
console.log('SpritePreview: progressControl from customComponents:', progressControl);
} }
if (!progressControl) { if (!progressControl) {
console.log('SpritePreview: No progress control found!');
return; return;
} }
@ -197,20 +194,20 @@ class SpritePreview extends Component {
// Use sprite interval from frame data, fallback to 10 seconds // Use sprite interval from frame data, fallback to 10 seconds
const frameInterval = frame.seconds || 10; const frameInterval = frame.seconds || 10;
// Try to detect total frames based on video duration vs frame interval // Calculate total frames based on video duration vs frame interval
const videoDuration = this.player().duration() || 45; // fallback duration const videoDuration = this.player().duration();
const calculatedMaxFrames = Math.ceil(videoDuration / frameInterval); if (!videoDuration) return;
const maxFrames = Math.min(calculatedMaxFrames, 6); // Cap at 6 frames to be safe
const maxFrames = Math.ceil(videoDuration / frameInterval);
let frameIndex = Math.floor(currentTime / frameInterval); let frameIndex = Math.floor(currentTime / frameInterval);
// Clamp frameIndex to available frames to prevent showing empty areas // Clamp frameIndex to available frames to prevent showing empty areas
frameIndex = Math.min(frameIndex, maxFrames - 1); frameIndex = Math.min(frameIndex, maxFrames - 1);
frameIndex = Math.max(frameIndex, 0);
// Based on the sprite image, it appears to have frames arranged vertically // Frames are arranged vertically (1 column, multiple rows)
// Let's try a vertical layout first (1 column, multiple rows) const frameRow = frameIndex;
const frameRow = frameIndex; // Each frame is on its own row const frameCol = 0;
const frameCol = 0; // Always first (and only) column
// Calculate background position (negative values to shift the sprite) // Calculate background position (negative values to shift the sprite)
const xPos = -(frameCol * width); const xPos = -(frameCol * width);
@ -227,12 +224,6 @@ class SpritePreview extends Component {
// Ensure the image is visible // Ensure the image is visible
this.spriteImage.style.display = 'block'; this.spriteImage.style.display = 'block';
// Fallback: if we're beyond frame 3 (30s+), try showing frame 2 instead (20-30s frame)
if (frameIndex >= 3 && currentTime > 30) {
const fallbackYPos = -(2 * height); // Frame 2 (20-30s range)
this.spriteImage.style.backgroundPosition = `${xPos}px ${fallbackYPos}px`;
}
} }
formatTime(seconds) { formatTime(seconds) {