CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-05 23:18: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
const frameInterval = frame.seconds || 10;
// Try to detect total frames based on video duration vs frame interval
const videoDuration = this.player().duration() || 45; // fallback duration
const calculatedMaxFrames = Math.ceil(videoDuration / frameInterval);
const maxFrames = Math.min(calculatedMaxFrames, 6); // Cap at 6 frames to be safe
// Calculate total frames based on video duration vs frame interval
const videoDuration = this.player().duration();
if (!videoDuration) return;
const maxFrames = Math.ceil(videoDuration / frameInterval);
let frameIndex = Math.floor(currentTime / frameInterval);
// Clamp frameIndex to available frames to prevent showing empty areas
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
// Let's try a vertical layout first (1 column, multiple rows)
const frameRow = frameIndex; // Each frame is on its own row
const frameCol = 0; // Always first (and only) column
// Frames are arranged vertically (1 column, multiple rows)
const frameRow = frameIndex;
const frameCol = 0;
// Calculate background position (negative values to shift the sprite)
const xPos = -(frameCol * width);
@ -337,12 +337,6 @@ class ChapterMarkers extends Component {
// Ensure the image is visible
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) {

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
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 (!progressControl) {
// Look for moved progress control in custom components
const customComponents = this.player().customComponents || {};
progressControl = customComponents.movedProgressControl;
console.log('SpritePreview: progressControl from customComponents:', progressControl);
}
if (!progressControl) {
console.log('SpritePreview: No progress control found!');
return;
}
@ -197,20 +194,20 @@ class SpritePreview extends Component {
// Use sprite interval from frame data, fallback to 10 seconds
const frameInterval = frame.seconds || 10;
// Try to detect total frames based on video duration vs frame interval
const videoDuration = this.player().duration() || 45; // fallback duration
const calculatedMaxFrames = Math.ceil(videoDuration / frameInterval);
const maxFrames = Math.min(calculatedMaxFrames, 6); // Cap at 6 frames to be safe
// Calculate total frames based on video duration vs frame interval
const videoDuration = this.player().duration();
if (!videoDuration) return;
const maxFrames = Math.ceil(videoDuration / frameInterval);
let frameIndex = Math.floor(currentTime / frameInterval);
// Clamp frameIndex to available frames to prevent showing empty areas
frameIndex = Math.min(frameIndex, maxFrames - 1);
frameIndex = Math.max(frameIndex, 0);
// Based on the sprite image, it appears to have frames arranged vertically
// Let's try a vertical layout first (1 column, multiple rows)
const frameRow = frameIndex; // Each frame is on its own row
const frameCol = 0; // Always first (and only) column
// Frames are arranged vertically (1 column, multiple rows)
const frameRow = frameIndex;
const frameCol = 0;
// Calculate background position (negative values to shift the sprite)
const xPos = -(frameCol * width);
@ -227,12 +224,6 @@ class SpritePreview extends Component {
// Ensure the image is visible
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) {