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

Update chapter handling for empty state and default segment

Browse Source 
Simplifies logic in TimelineControls to use clipSegments.length for button and modal text, instead of filtering for titled chapters. In useVideoChapters, ensures a default segment spanning the entire video is created when no chapters exist, improving initial state handling and Safari compatibility.
This commit is contained in:
Yiannis Christodoulou 2025-10-19 20:08:53 +03:00
parent ce0ae1a8da
commit 7343817393
2 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx
View File

@ -3947,11 +3947,11 @@ const TimelineControls = ({
<button <button
onClick={() => setShowSaveChaptersModal(true)} onClick={() => setShowSaveChaptersModal(true)}
className="save-chapters-button" className="save-chapters-button"
data-tooltip={clipSegments.filter((s) => s.chapterTitle && s.chapterTitle.trim()).length === 0 data-tooltip={clipSegments.length === 0
? "Clear all chapters" ? "Clear all chapters"
: "Save chapters"} : "Save chapters"}
> >
{clipSegments.filter((s) => s.chapterTitle && s.chapterTitle.trim()).length === 0 {clipSegments.length === 0
? 'Clear Chapters' ? 'Clear Chapters'
: 'Save Chapters'} : 'Save Chapters'}
</button> </button>
@ -3974,7 +3974,7 @@ const TimelineControls = ({
className="modal-button modal-button-primary" className="modal-button modal-button-primary"
onClick={handleSaveChaptersConfirm} onClick={handleSaveChaptersConfirm}
> >
{clipSegments.filter((s) => s.chapterTitle && s.chapterTitle.trim()).length === 0 {clipSegments.length === 0
? 'Clear Chapters' ? 'Clear Chapters'
: 'Save Chapters'} : 'Save Chapters'}
</button> </button>
@ -3982,14 +3982,9 @@ const TimelineControls = ({
} }
> >
<p className="modal-message"> <p className="modal-message">
{(() => { {clipSegments.length === 0
const chaptersWithTitles = clipSegments.filter((s) => s.chapterTitle && s.chapterTitle.trim()).length; ? "Are you sure you want to clear all chapters? This will remove all existing chapters from the database."
if (chaptersWithTitles === 0) { : `Are you sure you want to save the chapters? This will save ${clipSegments.filter((s) => s.chapterTitle && s.chapterTitle.trim()).length} chapters to the database.`}
return "Are you sure you want to clear all chapters? This will remove all existing chapters from the database.";
} else {
return `Are you sure you want to save the chapters? This will save ${chaptersWithTitles} chapters to the database.`;
}
})()}
</p> </p>
</Modal> </Modal>

24
frontend-tools/chapters-editor/client/src/hooks/useVideoChapters.tsx
View File

@ -147,8 +147,15 @@ const useVideoChapters = () => {
initialSegments.push(segment); initialSegments.push(segment);
} }
} else { } else {
// Start with empty state - no default segment // Create a default segment that spans the entire video on first load
initialSegments = []; const initialSegment: Segment = {
id: 1,
chapterTitle: '',
startTime: 0,
endTime: video.duration,
};
initialSegments = [initialSegment];
} }
// Initialize history state with the segments // Initialize history state with the segments
@ -267,17 +274,24 @@ const useVideoChapters = () => {
// Check if we now have duration and initialize if needed // Check if we now have duration and initialize if needed
if (video.duration > 0 && clipSegments.length === 0) { if (video.duration > 0 && clipSegments.length === 0) {
logger.debug('Safari: Successfully initialized metadata with empty state'); logger.debug('Safari: Successfully initialized metadata, creating default segment');
const defaultSegment: Segment = {
id: 1,
chapterTitle: '',
startTime: 0,
endTime: video.duration,
};
setDuration(video.duration); setDuration(video.duration);
setTrimEnd(video.duration); setTrimEnd(video.duration);
setClipSegments([]); setClipSegments([defaultSegment]);
const initialState: EditorState = { const initialState: EditorState = {
trimStart: 0, trimStart: 0,
trimEnd: video.duration, trimEnd: video.duration,
splitPoints: [], splitPoints: [],
clipSegments: [], clipSegments: [defaultSegment],
}; };
setHistory([initialState]); setHistory([initialState]);