+
+ Timeline
+
+
+ Total Segments:{' '}
+
+ {formatDetailedTime(
+ clipSegments.reduce((sum, segment) => sum + (segment.endTime - segment.startTime), 0)
+ )}
+
+
+
1 ? 'auto' : 'hidden',
+ }}
+ >
+
+ {/* Current Position Marker */}
+
+ {/* Top circle for popup toggle */}
+
{
+ // Prevent event propagation to avoid triggering the timeline container click
+ e.stopPropagation();
+
+ // For ensuring accurate segment detection, refresh clipSegments first
+ // This helps when clicking right after creating a new segment
+ const refreshedSegmentAtCurrentTime = clipSegments.find(
+ (seg) => currentTime >= seg.startTime && currentTime <= seg.endTime
+ );
+
+ // Toggle tooltip visibility with a single click
+ if (selectedSegmentId || showEmptySpaceTooltip) {
+ // When tooltip is open and - icon is clicked, simply close the tooltips
+ logger.debug('Closing tooltip');
+ setSelectedSegmentId(null);
+ setShowEmptySpaceTooltip(false);
+ // Don't reopen the tooltip - just leave it closed
+ return;
+ } else {
+ // Use our improved tooltip position logic
+ updateTooltipForPosition(currentTime);
+ logger.debug('Opening tooltip at:', formatDetailedTime(currentTime));
+ }
+ }}
+ >
+
+ {selectedSegmentId || showEmptySpaceTooltip ? '-' : '+'}
+
+
+
+ {/* Bottom circle for dragging */}
+ {isPlayingSegments ? null : (
+
+ ⋮
+
+ )}
+
+
+ {/* Trim Line Markers - hidden when segments exist */}
+ {clipSegments.length === 0 && (
+ <>
+
+
+
+ )}
+
+ {/* Clip Segments */}
+ {renderClipSegments()}
+
+ {/* Split Points */}
+ {renderSplitPoints()}
+
+ {/* Thumbnails */}
+ {renderThumbnails()}
+
+ {/* Segment Tooltip */}
+ {selectedSegmentId !== null && (
+
{
+ if (isPlayingSegments) {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ }}
+ >
+ {/* First row with time adjustment buttons */}
+
+
+ -50ms
+
+
{
+ if (isPlayingSegments) {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ }}
+ >
+ {formatDetailedTime(displayTime)}
+
+
+ +50ms
+
+
+
+ {/* Second row with action buttons */}
+
+
{
+ e.stopPropagation();
+ // Call the delete segment function with the current segment ID
+ const deleteEvent = new CustomEvent('delete-segment', {
+ detail: {
+ segmentId: selectedSegmentId,
+ },
+ });
+ document.dispatchEvent(deleteEvent);
+ // We don't need to manually close the tooltip - our event handler will take care of updating the UI
+ }}
+ >
+
+
+
+
{
+ e.stopPropagation();
+ // Call the split segment function with the current segment ID and time
+ const splitEvent = new CustomEvent('split-segment', {
+ detail: {
+ segmentId: selectedSegmentId,
+ time: clickedTime,
+ },
+ });
+ document.dispatchEvent(splitEvent);
+ // Keep the tooltip open
+ // setSelectedSegmentId(null);
+ }}
+ >
+
+
+
+
{
+ e.stopPropagation();
+
+ // Find the selected segment
+ const segment = clipSegments.find((seg) => seg.id === selectedSegmentId);
+ if (segment && videoRef.current) {
+ // Enable continuePastBoundary flag when user explicitly clicks play
+ // This will allow playback to continue even if we're at segment boundary
+ setContinuePastBoundary(true);
+ logger.debug(
+ 'Setting continuePastBoundary=true to allow playback through boundaries'
+ );
+
+ // Special handling for when we're at the end of the segment already
+ // Check if we're at or extremely close to the end boundary
+ if (Math.abs(videoRef.current.currentTime - segment.endTime) < 0.05) {
+ logger.debug(
+ `Already at end boundary (${formatDetailedTime(
+ videoRef.current.currentTime
+ )}), nudging position back slightly`
+ );
+ const newPosition = Math.max(segment.startTime, segment.endTime - 0.1); // Move 100ms back from end
+ videoRef.current.currentTime = newPosition;
+ onSeek(newPosition);
+ setClickedTime(newPosition);
+ logger.debug(`Position adjusted to ${formatDetailedTime(newPosition)}`);
+ } else {
+ // Normal case - just seek to the start of the segment
+ onSeek(segment.startTime);
+ setClickedTime(segment.startTime);
+ }
+
+ // Set active segment for boundary checking before playing
+ setActiveSegment(segment);
+
+ // Start playing from the beginning of the segment with proper promise handling
+ videoRef.current
+ .play()
+ .then(() => {
+ setIsPlayingSegment(true);
+ logger.debug('Playing from beginning of segment');
+ })
+ .catch((err) => {
+ console.error('Error playing from beginning:', err);
+ });
+ }
+
+ // Don't close the tooltip
+ }}
+ >
+
+ {/*
{
+ e.stopPropagation();
+
+ // Find the current segment
+ const currentSegment = clipSegments.find(seg =>
+ currentTime >= seg.startTime && currentTime <= seg.endTime
+ );
+
+ if (isPlaying) {
+ // If playing, just pause
+ if (videoRef.current) {
+ videoRef.current.pause();
+ setIsPlayingSegment(false);
+ setContinuePastBoundary(false);
+ }
+ } else {
+ // If starting playback, set the active segment
+ if (currentSegment) {
+ setActiveSegment(currentSegment);
+ }
+
+ // Reset continuation flag when starting new playback
+ setContinuePastBoundary(false);
+
+ if (videoRef.current) {
+ videoRef.current.play()
+ .then(() => {
+ setIsPlayingSegment(true);
+ })
+ .catch(err => {
+ console.error("Error playing video:", err);
+ setIsPlayingSegment(false);
+ });
+ }
+ }
+ }}
+ >
+ {isPlaying ? (
+ */}
+
+ {/* Play/Pause button for empty space - Same as main play/pause button */}
+
{
+ e.stopPropagation();
+
+ if (isPlaying) {
+ // If playing, just pause
+ if (videoRef.current) {
+ videoRef.current.pause();
+ setIsPlayingSegment(false);
+ setContinuePastBoundary(false);
+ }
+ } else {
+ onPlayPause();
+ }
+ }}
+ >
+ {isPlaying ? (
+
+
+
{
+ e.stopPropagation();
+
+ // Find the selected segment and update its start time
+ const segment = clipSegments.find((seg) => seg.id === selectedSegmentId);
+ if (segment) {
+ // Create updated segments with new start time for selected segment
+ const updatedSegments = clipSegments.map((seg) => {
+ if (seg.id === selectedSegmentId) {
+ return {
+ ...seg,
+ startTime:
+ clickedTime < seg.endTime - 0.5
+ ? clickedTime
+ : seg.endTime - 0.5,
+ };
+ }
+ return seg;
+ });
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true, // Ensure this specific action is recorded in history
+ action: 'adjust_start_time',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug('Set in clicked');
+ }
+
+ // Keep tooltip open
+ // setSelectedSegmentId(null);
+ }}
+ >
+
+
{
+ e.stopPropagation();
+
+ // Find the selected segment and update its end time
+ const segment = clipSegments.find((seg) => seg.id === selectedSegmentId);
+ if (segment) {
+ // Create updated segments with new end time for selected segment
+ const updatedSegments = clipSegments.map((seg) => {
+ if (seg.id === selectedSegmentId) {
+ return {
+ ...seg,
+ endTime:
+ clickedTime > seg.startTime + 0.5
+ ? clickedTime
+ : seg.startTime + 0.5,
+ };
+ }
+ return seg;
+ });
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true, // Ensure this specific action is recorded in history
+ action: 'adjust_end_time',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug('Set out clicked');
+ }
+
+ // Keep the tooltip open
+ // setSelectedSegmentId(null);
+ }}
+ >
+
+
+
+ )}
+
+ {/* Empty space tooltip - positioned absolutely within timeline container */}
+ {showEmptySpaceTooltip && selectedSegmentId === null && (
+
{
+ if (isPlayingSegments) {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ }}
+ >
+ {/* First row with time adjustment buttons - same as segment tooltip */}
+
+
+ -50ms
+
+
{
+ if (isPlayingSegments) {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ }}
+ >
+ {formatDetailedTime(clickedTime)}
+
+
+ +50ms
+
+
+
+ {/* Second row with action buttons similar to segment tooltip */}
+
+ {/* New segment button - Moved to first position */}
+
{
+ e.stopPropagation();
+
+ // Only create if we have at least 0.5 seconds of space
+ if (availableSegmentDuration < 0.5) {
+ // Not enough space, do nothing
+ return;
+ }
+
+ // Create a new segment with the calculated available duration
+ const segmentStartTime = clickedTime;
+ const segmentEndTime = segmentStartTime + availableSegmentDuration;
+
+ // Create the new segment with a generic name
+ const newSegment: Segment = {
+ id: Date.now(),
+ name: `segment`,
+ startTime: segmentStartTime,
+ endTime: segmentEndTime,
+ thumbnail: '', // Empty placeholder - we'll use dynamic colors instead
+ };
+
+ // Add the new segment to existing segments
+ const updatedSegments = [...clipSegments, newSegment];
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true, // Explicitly record this action in history
+ action: 'create_segment',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+
+ // Close empty space tooltip
+ setShowEmptySpaceTooltip(false);
+
+ // After creating the segment, wait a short time for the state to update
+ setTimeout(() => {
+ // The newly created segment is the last one in the array with the ID we just assigned
+ const createdSegment = updatedSegments[updatedSegments.length - 1];
+
+ if (createdSegment) {
+ // Set this segment as selected to show its tooltip
+ setSelectedSegmentId(createdSegment.id);
+ logger.debug('Created and selected new segment:', createdSegment.id);
+ }
+ }, 100); // Small delay to ensure state is updated
+ }}
+ >
+
+
+ New
+
+
+ {/* Go to start button - play from beginning of cutaway (until next segment) */}
+
{
+ e.stopPropagation();
+
+ if (videoRef.current) {
+ // Find cutaway boundaries (current position is somewhere in the cutaway)
+ const currentTime = clickedTime;
+
+ // Enable continuePastBoundary flag when user explicitly clicks play
+ // This will allow playback to continue even if we're at segment boundary
+ setContinuePastBoundary(true);
+ logger.debug(
+ 'Setting continuePastBoundary=true to allow playback through boundaries'
+ );
+
+ // For start, find the previous segment's end or use video start (0)
+ const sortedSegments = [...clipSegments].sort(
+ (a, b) => a.startTime - b.startTime
+ );
+
+ // Find the previous segment (one that ends before the current time)
+ const previousSegment = [...sortedSegments]
+ .reverse()
+ .find((seg) => seg.endTime < currentTime);
+
+ // Start from either previous segment end or beginning of video
+ // Add a small offset (0.025 second = 25ms) to ensure we're definitely past the segment boundary
+ const startTime = previousSegment ? previousSegment.endTime + 0.025 : 0;
+
+ // For end, find the next segment after the current position
+ // Since we're looking for the boundary of this empty space, we need to find the
+ // segment that starts after our current position
+ const nextSegment = sortedSegments.find(
+ (seg) => seg.startTime > currentTime
+ );
+
+ // Define end boundary (either next segment start or video end)
+ const endTime = nextSegment ? nextSegment.startTime : duration;
+
+ // Create a virtual "segment" for the cutaway area
+ const cutawaySegment: Segment = {
+ id: -999, // Use a unique negative ID to indicate a virtual segment
+ name: 'Cutaway',
+ startTime: startTime,
+ endTime: endTime,
+ thumbnail: '',
+ };
+
+ // Seek to the start of the cutaway (true beginning of this cutaway area)
+ onSeek(startTime);
+ setClickedTime(startTime);
+
+ // IMPORTANT: First reset isPlayingSegment to false to ensure clean state
+ setIsPlayingSegment(false);
+
+ // Then set active segment for boundary checking
+ // We use setTimeout to ensure this happens in the next tick
+ // after the isPlayingSegment value is updated
+ setTimeout(() => {
+ setActiveSegment(cutawaySegment);
+ }, 0);
+
+ // Add a manual boundary check specifically for cutaway playback
+ // This ensures we detect when we reach the next segment's start
+ const checkCutawayBoundary = () => {
+ if (!videoRef.current) return;
+
+ // Check if we've entered a segment (i.e., reached a boundary)
+ const currentPosition = videoRef.current.currentTime;
+ const segments = [...clipSegments].sort(
+ (a, b) => a.startTime - b.startTime
+ );
+
+ // Find the next segment we're approaching - use a wider detection range
+ // to catch the boundary earlier
+ const nextSegment = segments.find(
+ (seg) => seg.startTime > currentPosition - 0.3
+ );
+
+ // We need to detect boundaries much earlier to allow for time to react
+ // This is a key fix - we need to detect the boundary BEFORE we reach it
+ // But don't stop if we're in continuePastBoundary mode
+ const shouldStop =
+ nextSegment &&
+ currentPosition >= nextSegment.startTime - 0.25 &&
+ currentPosition <= nextSegment.startTime + 0.1 &&
+ !continuePastBoundary;
+
+ // Add logging to show boundary check decisions
+ if (
+ nextSegment &&
+ currentPosition >= nextSegment.startTime - 0.25 &&
+ currentPosition <= nextSegment.startTime + 0.1
+ ) {
+ logger.debug(
+ `Approaching boundary at ${formatDetailedTime(
+ nextSegment.startTime
+ )}, continuePastBoundary=${continuePastBoundary}, willStop=${shouldStop}`
+ );
+ }
+
+ // Also check if we've entered a different segment - we need to detect this too
+ const segmentAtCurrentTime = segments.find(
+ (seg) =>
+ currentPosition >= seg.startTime &&
+ currentPosition <= seg.endTime
+ );
+
+ // If we've moved directly into a segment during playback, we need to update the active segment
+ if (
+ segmentAtCurrentTime &&
+ activeSegment?.id !== segmentAtCurrentTime.id
+ ) {
+ logger.debug(
+ `Entered segment ${segmentAtCurrentTime.id} during cutaway playback`
+ );
+ setActiveSegment(segmentAtCurrentTime);
+ setSelectedSegmentId(segmentAtCurrentTime.id);
+ setShowEmptySpaceTooltip(false);
+
+ // Remove our boundary checker since we're now in a standard segment
+ videoRef.current.removeEventListener(
+ 'timeupdate',
+ checkCutawayBoundary
+ );
+
+ // Reset continuation flags
+ setContinuePastBoundary(false);
+ sessionStorage.removeItem('continuingPastSegment');
+ return;
+ }
+
+ // If we've entered a segment, stop at its boundary
+ if (shouldStop && nextSegment) {
+ logger.debug(
+ `CUTAWAY MANUAL BOUNDARY CHECK: Current position ${formatDetailedTime(
+ currentPosition
+ )} approaching segment at ${formatDetailedTime(
+ nextSegment.startTime
+ )} (distance: ${Math.abs(
+ currentPosition - nextSegment.startTime
+ ).toFixed(3)}s) - STOPPING`
+ );
+
+ videoRef.current.pause();
+ // Force exact time position with high precision and multiple attempts
+ setTimeout(() => {
+ if (videoRef.current) {
+ // First seek directly to exact start time, no offset
+ videoRef.current.currentTime = nextSegment.startTime;
+ // Update UI immediately to match video position
+ onSeek(nextSegment.startTime);
+ // Also update tooltip time displays
+ setDisplayTime(nextSegment.startTime);
+ setClickedTime(nextSegment.startTime);
+
+ // Reset continuePastBoundary when stopping at a boundary
+ setContinuePastBoundary(false);
+
+ // Update tooltip to show the segment at the boundary
+ setSelectedSegmentId(nextSegment.id);
+ setShowEmptySpaceTooltip(false);
+ setActiveSegment(nextSegment);
+
+ // Force multiple adjustments to ensure exact precision
+ const verifyPosition = () => {
+ if (videoRef.current) {
+ // Always force the exact time in every verification
+ videoRef.current.currentTime =
+ nextSegment.startTime;
+
+ // Make sure we update the UI to reflect the corrected position
+ onSeek(nextSegment.startTime);
+
+ // Update the displayTime and clickedTime state to match exact position
+ setDisplayTime(nextSegment.startTime);
+ setClickedTime(nextSegment.startTime);
+
+ logger.debug(
+ `Position corrected to exact segment boundary: ${formatDetailedTime(
+ videoRef.current.currentTime
+ )} (target: ${formatDetailedTime(nextSegment.startTime)})`
+ );
+ }
+ };
+
+ // Apply multiple correction attempts with increasing delays
+ setTimeout(verifyPosition, 10); // Immediate correction
+ setTimeout(verifyPosition, 20); // First correction
+ setTimeout(verifyPosition, 50); // Second correction
+ setTimeout(verifyPosition, 100); // Third correction
+ setTimeout(verifyPosition, 200); // Final correction
+
+ // Also add event listeners to ensure position is corrected whenever video state changes
+ videoRef.current.addEventListener('seeked', verifyPosition);
+ videoRef.current.addEventListener(
+ 'canplay',
+ verifyPosition
+ );
+ videoRef.current.addEventListener(
+ 'waiting',
+ verifyPosition
+ );
+
+ // Remove these event listeners after a short time
+ setTimeout(() => {
+ if (videoRef.current) {
+ videoRef.current.removeEventListener(
+ 'seeked',
+ verifyPosition
+ );
+ videoRef.current.removeEventListener(
+ 'canplay',
+ verifyPosition
+ );
+ videoRef.current.removeEventListener(
+ 'waiting',
+ verifyPosition
+ );
+ }
+ }, 300);
+ }
+ }, 10);
+ setIsPlayingSegment(false);
+ setActiveSegment(null);
+
+ // Remove our boundary checker
+ videoRef.current.removeEventListener(
+ 'timeupdate',
+ checkCutawayBoundary
+ );
+ return;
+ }
+ };
+
+ // Start our manual boundary checker
+ videoRef.current.addEventListener('timeupdate', checkCutawayBoundary);
+
+ // Start playing with proper promise handling - use setTimeout to ensure
+ // that our activeSegment setting has had time to take effect
+ setTimeout(() => {
+ if (videoRef.current) {
+ // Now start playback
+ videoRef.current
+ .play()
+ .then(() => {
+ setIsPlayingSegment(true);
+ logger.debug(
+ 'CUTAWAY PLAYBACK STARTED:',
+ formatDetailedTime(startTime),
+ 'to',
+ formatDetailedTime(endTime),
+ previousSegment
+ ? `(after segment ${
+ previousSegment.id
+ }, offset +25ms from ${formatDetailedTime(
+ previousSegment.endTime
+ )})`
+ : '(from video start)',
+ nextSegment
+ ? `(will stop at segment ${nextSegment.id})`
+ : '(will play to end)'
+ );
+ })
+ .catch((err) => {
+ console.error('Error playing cutaway:', err);
+ });
+ }
+ }, 50);
+ }
+ }}
+ >
+
+
+ {/* Play/Pause button for empty space */}
+ {/*
{
+ e.stopPropagation();
+
+ if (videoRef.current) {
+ if (isPlaying) {
+ // If already playing, pause the video
+ videoRef.current.pause();
+ setIsPlayingSegment(false);
+ // Reset continuePastBoundary when stopping playback
+ setContinuePastBoundary(false);
+ logger.debug("Pause clicked in empty space - resetting continuePastBoundary flag");
+ } else {
+ // Enable continuePastBoundary flag when user explicitly clicks play
+ // This will allow playback to continue even if we're at segment boundary
+ setContinuePastBoundary(true);
+ logger.debug("Setting continuePastBoundary=true to allow playback through boundaries");
+
+ // Find the current time and determine cutaway boundaries
+ // For end, find the next segment after current position
+ // Make sure we look for any segment that starts after our current position,
+ // including the first segment if we're before it
+ const sortedSegments = [...clipSegments].sort((a, b) => a.startTime - b.startTime);
+ const currentTime = videoRef.current.currentTime;
+ const nextSegment = sortedSegments.find(seg => seg.startTime > currentTime);
+
+ // Check if we're at a segment boundary that we previously stopped at
+ const isAtSegmentBoundary = nextSegment && Math.abs(currentTime - nextSegment.startTime) < 0.05;
+
+ if (isAtSegmentBoundary && nextSegment) {
+ // We're at the start of a segment - just continue into the segment rather than staying in cutaway
+ logger.debug(`At segment boundary: Moving into segment ${nextSegment.id}`);
+
+ // Update UI to show segment tooltip instead of empty space tooltip
+ setSelectedSegmentId(nextSegment.id);
+ setShowEmptySpaceTooltip(false);
+
+ // Set this segment as the active segment for boundary checking
+ setActiveSegment(nextSegment);
+
+ // Play from this segment directly
+ videoRef.current.play()
+ .then(() => {
+ setIsPlayingSegment(true);
+ logger.debug("Playing from segment start after boundary");
+ })
+ .catch(err => {
+ console.error("Error starting playback:", err);
+ });
+
+ return; // Exit early as we've handled this special case
+ }
+
+ // Define end boundary (either next segment start or video end)
+ const endTime = nextSegment ? nextSegment.startTime : duration;
+
+ // Special handling for when we're already at a segment boundary
+ // If we're at or extremely close to the segment boundary already,
+ // we need to nudge the position slightly back to allow playback
+ let adjustedCurrentTime = currentTime;
+
+ if (nextSegment && Math.abs(currentTime - nextSegment.startTime) < 0.05) {
+ logger.debug(`Already at boundary (${formatDetailedTime(currentTime)}), nudging position back slightly`);
+ adjustedCurrentTime = Math.max(0, currentTime - 0.1); // Move 100ms back
+ videoRef.current.currentTime = adjustedCurrentTime;
+ onSeek(adjustedCurrentTime);
+ logger.debug(`Position adjusted to ${formatDetailedTime(adjustedCurrentTime)}`);
+ }
+
+ // Create a virtual "segment" for the cutaway area
+ const cutawaySegment: Segment = {
+ id: -999, // Use a consistent negative ID for virtual segments
+ name: "Cutaway",
+ startTime: adjustedCurrentTime, // Use the potentially adjusted time
+ endTime: endTime,
+ thumbnail: ""
+ };
+
+ // IMPORTANT: First reset isPlayingSegment to false to ensure clean state
+ setIsPlayingSegment(false);
+
+ // Then set active segment for boundary checking
+ // We use setTimeout to ensure this happens in the next tick
+ // after the isPlayingSegment value is updated
+ setTimeout(() => {
+ setActiveSegment(cutawaySegment);
+ }, 0);
+
+ // Add a manual boundary check specifically for cutaway playback
+ // This ensures we detect when we reach the next segment's start
+ const checkCutawayBoundary = () => {
+ if (!videoRef.current) return;
+
+ // Check if we've entered a segment (i.e., reached a boundary)
+ const currentPosition = videoRef.current.currentTime;
+ const segments = [...clipSegments].sort((a, b) => a.startTime - b.startTime);
+
+ // Find the next segment we're approaching - use a wider detection range
+ // to catch the boundary earlier
+ const nextSegment = segments.find(seg => seg.startTime > currentPosition - 0.3);
+
+ // Also check if we've entered a different segment - we need to detect this too
+ const segmentAtCurrentTime = segments.find(
+ seg => currentPosition >= seg.startTime && currentPosition <= seg.endTime
+ );
+
+ // If we've moved directly into a segment during playback, we need to update the active segment
+ if (segmentAtCurrentTime && activeSegment?.id !== segmentAtCurrentTime.id) {
+ logger.debug(`Entered segment ${segmentAtCurrentTime.id} during cutaway playback`);
+ setActiveSegment(segmentAtCurrentTime);
+ setSelectedSegmentId(segmentAtCurrentTime.id);
+ setShowEmptySpaceTooltip(false);
+
+ // Remove our boundary checker since we're now in a standard segment
+ videoRef.current.removeEventListener('timeupdate', checkCutawayBoundary);
+
+ // Reset continuation flags
+ setContinuePastBoundary(false);
+ sessionStorage.removeItem('continuingPastSegment');
+ return;
+ }
+
+ // We need to detect boundaries much earlier to allow for time to react
+ // This is a key fix - we need to detect the boundary BEFORE we reach it
+ // But don't stop if we're in continuePastBoundary mode
+ const shouldStop = nextSegment &&
+ (currentPosition >= nextSegment.startTime - 0.25) &&
+ (currentPosition <= nextSegment.startTime + 0.1) &&
+ !continuePastBoundary;
+
+ // Add logging to show boundary check decisions
+ if (nextSegment && (currentPosition >= nextSegment.startTime - 0.25) &&
+ (currentPosition <= nextSegment.startTime + 0.1)) {
+ logger.debug(`Approaching boundary at ${formatDetailedTime(nextSegment.startTime)}, continuePastBoundary=${continuePastBoundary}, willStop=${shouldStop}`);
+ }
+
+ // If we've entered a segment, stop at its boundary
+ if (shouldStop && nextSegment) {
+ logger.debug(`CUTAWAY MANUAL BOUNDARY CHECK: Current position ${formatDetailedTime(currentPosition)} approaching segment at ${formatDetailedTime(nextSegment.startTime)} (distance: ${Math.abs(currentPosition - nextSegment.startTime).toFixed(3)}s) - STOPPING`);
+
+ videoRef.current.pause();
+ // Force exact time position with high precision
+ setTimeout(() => {
+ if (videoRef.current) {
+ // First seek directly to exact start time, no offset
+ videoRef.current.currentTime = nextSegment.startTime;
+ // Update UI immediately to match video position
+ onSeek(nextSegment.startTime);
+ // Also update tooltip time displays
+ setDisplayTime(nextSegment.startTime);
+ setClickedTime(nextSegment.startTime);
+
+ // Reset continuePastBoundary when stopping at a boundary
+ setContinuePastBoundary(false);
+
+ // Update tooltip to show the segment at the boundary
+ setSelectedSegmentId(nextSegment.id);
+ setShowEmptySpaceTooltip(false);
+ setActiveSegment(nextSegment);
+
+ // Force multiple adjustments to ensure exact precision
+ const verifyPosition = () => {
+ if (videoRef.current) {
+ // Always force the exact time in every verification
+ videoRef.current.currentTime = nextSegment.startTime;
+
+ // Make sure we update the UI to reflect the corrected position
+ onSeek(nextSegment.startTime);
+
+ // Update the displayTime and clickedTime state to match exact position
+ setDisplayTime(nextSegment.startTime);
+ setClickedTime(nextSegment.startTime);
+
+ logger.debug(`Position corrected to exact segment boundary: ${formatDetailedTime(videoRef.current.currentTime)} (target: ${formatDetailedTime(nextSegment.startTime)})`);
+ }
+ };
+
+ // Apply multiple correction attempts with increasing delays
+ setTimeout(verifyPosition, 10); // Immediate correction
+ setTimeout(verifyPosition, 20); // First correction
+ setTimeout(verifyPosition, 50); // Second correction
+ setTimeout(verifyPosition, 100); // Third correction
+ setTimeout(verifyPosition, 200); // Final correction
+
+ // Also add event listeners to ensure position is corrected whenever video state changes
+ videoRef.current.addEventListener('seeked', verifyPosition);
+ videoRef.current.addEventListener('canplay', verifyPosition);
+ videoRef.current.addEventListener('waiting', verifyPosition);
+
+ // Remove these event listeners after a short time
+ setTimeout(() => {
+ if (videoRef.current) {
+ videoRef.current.removeEventListener('seeked', verifyPosition);
+ videoRef.current.removeEventListener('canplay', verifyPosition);
+ videoRef.current.removeEventListener('waiting', verifyPosition);
+ }
+ }, 300);
+ }
+ }, 10);
+ setIsPlayingSegment(false);
+ setActiveSegment(null);
+
+ // Remove our boundary checker
+ videoRef.current.removeEventListener('timeupdate', checkCutawayBoundary);
+ return;
+ }
+ };
+
+ // Start our manual boundary checker
+ videoRef.current.addEventListener('timeupdate', checkCutawayBoundary);
+
+ // Start playing from current position with boundary restrictions
+ // Use a timeout to ensure active segment is set before playback starts
+ setTimeout(() => {
+ if (videoRef.current) {
+ videoRef.current.play()
+ .then(() => {
+ setIsPlayingSegment(true);
+ logger.debug("Play clicked in empty space - position:",
+ formatDetailedTime(currentTime),
+ "will stop at:", formatDetailedTime(endTime),
+ nextSegment ? `(start of segment ${nextSegment.id})` : "(end of video)"
+ );
+ })
+ .catch(err => {
+ console.error("Error starting playback:", err);
+ });
+ }
+ }, 50);
+ }
+ }
+ }}
+ >
+ {isPlaying ? (
+ */}
+
+ {/* Play/Pause button for empty space - Same as main play/pause button */}
+
{
+ e.stopPropagation();
+
+ if (isPlaying) {
+ // If playing, just pause
+ if (videoRef.current) {
+ videoRef.current.pause();
+ setIsPlayingSegment(false);
+ setContinuePastBoundary(false);
+ }
+ } else {
+ onPlayPause();
+ }
+ }}
+ >
+ {isPlaying ? (
+
+
+ {/* Segment end adjustment button (always shown) */}
+
{
+ e.stopPropagation();
+
+ // Find the previous segment (one that ends before the current time)
+ const sortedSegments = [...clipSegments].sort(
+ (a, b) => a.startTime - b.startTime
+ );
+ const prevSegment = sortedSegments
+ .filter((seg) => seg.endTime <= clickedTime)
+ .sort((a, b) => b.endTime - a.endTime)[0]; // Get the closest one before
+
+ if (prevSegment) {
+ // Regular case: adjust end of previous segment
+ const updatedSegments = clipSegments.map((seg) => {
+ if (seg.id === prevSegment.id) {
+ return {
+ ...seg,
+ endTime: clickedTime,
+ };
+ }
+ return seg;
+ });
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true,
+ action: 'adjust_previous_end_time',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug(
+ 'Adjusted end of previous segment to:',
+ formatDetailedTime(clickedTime)
+ );
+
+ // Show the previous segment's tooltip
+ setSelectedSegmentId(prevSegment.id);
+ setShowEmptySpaceTooltip(false);
+ } else if (clipSegments.length > 0) {
+ // No previous segment at cursor position, but segments exist elsewhere
+
+ // First, check if we're in a gap between segments - if so, create a new segment for the gap
+ const sortedByStart = [...clipSegments].sort(
+ (a, b) => a.startTime - b.startTime
+ );
+ let inGap = false;
+ let gapStart = 0;
+
+ // Check if we're in a gap between segments
+ for (let i = 0; i < sortedByStart.length - 1; i++) {
+ const currentSegEnd = sortedByStart[i].endTime;
+ const nextSegStart = sortedByStart[i + 1].startTime;
+
+ if (clickedTime > currentSegEnd && clickedTime < nextSegStart) {
+ inGap = true;
+ gapStart = currentSegEnd;
+ break;
+ }
+ }
+
+ if (inGap) {
+ // We're in a gap, create a new segment from gap start to clicked time
+ const newSegment: Segment = {
+ id: Date.now(),
+ name: 'segment',
+ startTime: gapStart,
+ endTime: clickedTime,
+ thumbnail: '', // Empty placeholder - we'll use dynamic colors instead
+ };
+
+ // Add the new segment to existing segments
+ const updatedSegments = [...clipSegments, newSegment];
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true,
+ action: 'create_segment_in_gap',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug(
+ 'Created new segment in gap from',
+ formatDetailedTime(gapStart),
+ 'to',
+ formatDetailedTime(clickedTime)
+ );
+
+ // Show the new segment's tooltip
+ setSelectedSegmentId(newSegment.id);
+ setShowEmptySpaceTooltip(false);
+ }
+ // Check if we're before all segments and should create a segment from start
+ else if (clickedTime < sortedByStart[0].startTime) {
+ // Create a new segment from start of video to clicked time
+ const newSegment: Segment = {
+ id: Date.now(),
+ name: 'segment',
+ startTime: 0,
+ endTime: clickedTime,
+ thumbnail: '', // Empty placeholder - we'll use dynamic colors instead
+ };
+
+ // Add the new segment to existing segments
+ const updatedSegments = [...clipSegments, newSegment];
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true,
+ action: 'create_segment_from_start',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug(
+ 'Created new segment from start to:',
+ formatDetailedTime(clickedTime)
+ );
+
+ // Show the new segment's tooltip
+ setSelectedSegmentId(newSegment.id);
+ setShowEmptySpaceTooltip(false);
+ } else {
+ // Not in a gap, check if we can extend the last segment to end of video
+ const lastSegment = [...clipSegments].sort(
+ (a, b) => b.endTime - a.endTime
+ )[0];
+
+ if (lastSegment && lastSegment.endTime < duration) {
+ // Extend the last segment to end of video
+ const updatedSegments = clipSegments.map((seg) => {
+ if (seg.id === lastSegment.id) {
+ return {
+ ...seg,
+ endTime: duration,
+ };
+ }
+ return seg;
+ });
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true,
+ action: 'extend_last_segment',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug('Extended last segment to end of video');
+
+ // Show the last segment's tooltip
+ setSelectedSegmentId(lastSegment.id);
+ setShowEmptySpaceTooltip(false);
+ }
+ }
+ } else if (clickedTime > 0) {
+ // No segments exist; create a new segment from start to clicked time
+ const newSegment: Segment = {
+ id: Date.now(),
+ name: 'segment',
+ startTime: 0,
+ endTime: clickedTime,
+ thumbnail: '', // Empty placeholder - we'll use dynamic colors instead
+ };
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: [newSegment],
+ recordHistory: true,
+ action: 'create_segment_from_start',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug(
+ 'Created new segment from start to:',
+ formatDetailedTime(clickedTime)
+ );
+
+ // Show the new segment's tooltip
+ setSelectedSegmentId(newSegment.id);
+ setShowEmptySpaceTooltip(false);
+ }
+ }}
+ >
+
+
+ {/* Segment start adjustment button (always shown) */}
+
{
+ e.stopPropagation();
+
+ // Find the next segment (one that starts after the current time)
+ const sortedSegments = [...clipSegments].sort(
+ (a, b) => a.startTime - b.startTime
+ );
+ const nextSegment = sortedSegments
+ .filter((seg) => seg.startTime >= clickedTime)
+ .sort((a, b) => a.startTime - b.startTime)[0]; // Get the closest one after
+
+ if (nextSegment) {
+ // Regular case: adjust start of next segment
+ const updatedSegments = clipSegments.map((seg) => {
+ if (seg.id === nextSegment.id) {
+ return {
+ ...seg,
+ startTime: clickedTime,
+ };
+ }
+ return seg;
+ });
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true,
+ action: 'adjust_next_start_time',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug(
+ 'Adjusted start of next segment to:',
+ formatDetailedTime(clickedTime)
+ );
+
+ // Show the next segment's tooltip
+ setSelectedSegmentId(nextSegment.id);
+ setShowEmptySpaceTooltip(false);
+ } else if (clipSegments.length > 0) {
+ // No next segment at cursor position, but segments exist elsewhere
+
+ // First, check if we're in a gap between segments - if so, create a new segment for the gap
+ const sortedByStart = [...clipSegments].sort(
+ (a, b) => a.startTime - b.startTime
+ );
+ let inGap = false;
+ let gapEnd = 0;
+
+ // Check if we're in a gap between segments
+ for (let i = 0; i < sortedByStart.length - 1; i++) {
+ const currentSegEnd = sortedByStart[i].endTime;
+ const nextSegStart = sortedByStart[i + 1].startTime;
+
+ if (clickedTime > currentSegEnd && clickedTime < nextSegStart) {
+ inGap = true;
+ gapEnd = nextSegStart;
+ break;
+ }
+ }
+
+ if (inGap) {
+ // We're in a gap, create a new segment from clicked time to gap end
+ const newSegment: Segment = {
+ id: Date.now(),
+ name: 'segment',
+ startTime: clickedTime,
+ endTime: gapEnd,
+ thumbnail: '', // Empty placeholder - we'll use dynamic colors instead
+ };
+
+ // Add the new segment to existing segments
+ const updatedSegments = [...clipSegments, newSegment];
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true,
+ action: 'create_segment_in_gap',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug(
+ 'Created new segment in gap from',
+ formatDetailedTime(clickedTime),
+ 'to',
+ formatDetailedTime(gapEnd)
+ );
+
+ // Show the new segment's tooltip
+ setSelectedSegmentId(newSegment.id);
+ setShowEmptySpaceTooltip(false);
+ } else {
+ // Check if we're at the start of the video with segments ahead
+ if (clickedTime < sortedByStart[0].startTime) {
+ // Create a new segment from clicked time to first segment start
+ const newSegment: Segment = {
+ id: Date.now(),
+ name: 'segment',
+ startTime: clickedTime,
+ endTime: sortedByStart[0].startTime,
+ thumbnail: '', // Empty placeholder - we'll use dynamic colors instead
+ };
+
+ // Add the new segment to existing segments
+ const updatedSegments = [...clipSegments, newSegment];
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true,
+ action: 'create_segment_before_first',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug(
+ 'Created new segment from',
+ formatDetailedTime(clickedTime),
+ 'to first segment'
+ );
+
+ // Show the new segment's tooltip
+ setSelectedSegmentId(newSegment.id);
+ setShowEmptySpaceTooltip(false);
+ }
+ // Check if we're after all segments and should create a segment to the end
+ else if (
+ clickedTime > sortedByStart[sortedByStart.length - 1].endTime
+ ) {
+ // Create a new segment from clicked time to end of video
+ const newSegment: Segment = {
+ id: Date.now(),
+ name: 'segment',
+ startTime: clickedTime,
+ endTime: duration,
+ thumbnail: '', // Empty placeholder - we'll use dynamic colors instead
+ };
+
+ // Add the new segment to existing segments
+ const updatedSegments = [...clipSegments, newSegment];
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true,
+ action: 'create_segment_to_end',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug(
+ 'Created new segment from',
+ formatDetailedTime(clickedTime),
+ 'to end'
+ );
+
+ // Show the new segment's tooltip
+ setSelectedSegmentId(newSegment.id);
+ setShowEmptySpaceTooltip(false);
+ } else {
+ // Not in a gap, check if we can extend the first segment to start of video
+ const firstSegment = sortedByStart[0];
+
+ if (firstSegment && firstSegment.startTime > 0) {
+ // Extend the first segment to start of video
+ const updatedSegments = clipSegments.map((seg) => {
+ if (seg.id === firstSegment.id) {
+ return {
+ ...seg,
+ startTime: 0,
+ };
+ }
+ return seg;
+ });
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: updatedSegments,
+ recordHistory: true,
+ action: 'extend_first_segment',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug('Extended first segment to start of video');
+
+ // Show the first segment's tooltip
+ setSelectedSegmentId(firstSegment.id);
+ setShowEmptySpaceTooltip(false);
+ }
+ }
+ }
+ } else if (clickedTime < duration) {
+ // No segments exist; create a new segment from clicked time to end
+ const newSegment: Segment = {
+ id: Date.now(),
+ name: 'segment',
+ startTime: clickedTime,
+ endTime: duration,
+ thumbnail: '', // Empty placeholder - we'll use dynamic colors instead
+ };
+
+ // Create and dispatch the update event
+ const updateEvent = new CustomEvent('update-segments', {
+ detail: {
+ segments: [newSegment],
+ recordHistory: true,
+ action: 'create_segment_to_end',
+ },
+ });
+ document.dispatchEvent(updateEvent);
+ logger.debug(
+ 'Created new segment from',
+ formatDetailedTime(clickedTime),
+ 'to end'
+ );
+
+ // Show the new segment's tooltip
+ setSelectedSegmentId(newSegment.id);
+ setShowEmptySpaceTooltip(false);
+ }
+ }}
+ >
+
+
+
+ )}
+
+
+ {/* Precise Time Input */}
+
+
Go to Time:
+
{
+ if (e.key === 'Enter') {
+ const input = e.currentTarget.value;
+ try {
+ // Parse time format like "00:30:15.250" or "30:15.250" or "30:15"
+ const parts = input.split(':');
+ let hours = 0,
+ minutes = 0,
+ seconds = 0,
+ milliseconds = 0;
+
+ if (parts.length === 3) {
+ // Format: HH:MM:SS.ms
+ hours = parseInt(parts[0]);
+ minutes = parseInt(parts[1]);
+ const secParts = parts[2].split('.');
+ seconds = parseInt(secParts[0]);
+ if (secParts.length > 1)
+ milliseconds = parseInt(secParts[1].padEnd(3, '0').substring(0, 3));
+ } else if (parts.length === 2) {
+ // Format: MM:SS.ms
+ minutes = parseInt(parts[0]);
+ const secParts = parts[1].split('.');
+ seconds = parseInt(secParts[0]);
+ if (secParts.length > 1)
+ milliseconds = parseInt(secParts[1].padEnd(3, '0').substring(0, 3));
+ }
+
+ const totalSeconds = hours * 3600 + minutes * 60 + seconds + milliseconds / 1000;
+ if (!isNaN(totalSeconds) && totalSeconds >= 0 && totalSeconds <= duration) {
+ onSeek(totalSeconds);
+
+ // Create a helper function to show tooltip that uses the same logic as the millisecond buttons
+ const showTooltipAtTime = (timeInSeconds: number) => {
+ // Find the segment at the given time using improved matching
+ const segmentAtTime = clipSegments.find((seg) => {
+ const isWithinSegment =
+ timeInSeconds >= seg.startTime && timeInSeconds <= seg.endTime;
+ const isAtExactStart = Math.abs(timeInSeconds - seg.startTime) < 0.001; // Within 1ms of start
+ const isAtExactEnd = Math.abs(timeInSeconds - seg.endTime) < 0.001; // Within 1ms of end
+ return isWithinSegment || isAtExactStart || isAtExactEnd;
+ });
+
+ // Calculate position for tooltip
+ if (timelineRef.current && scrollContainerRef.current) {
+ const rect = timelineRef.current.getBoundingClientRect();
+
+ // Handle zoomed timeline by accounting for scroll position
+ let xPos;
+
+ if (zoomLevel > 1) {
+ // For zoomed timeline, calculate position based on visible area
+ const visibleTimelineLeft =
+ rect.left - scrollContainerRef.current.scrollLeft;
+ const markerVisibleX =
+ visibleTimelineLeft + (timeInSeconds / duration) * rect.width;
+ xPos = markerVisibleX;
+ } else {
+ // For non-zoomed timeline, use the simple calculation
+ const positionPercent = timeInSeconds / duration;
+ xPos = rect.left + rect.width * positionPercent;
+ }
+
+ setTooltipPosition({
+ x: xPos,
+ y: rect.top - 10,
+ });
+ setClickedTime(timeInSeconds);
+
+ if (segmentAtTime) {
+ // Show segment tooltip
+ setSelectedSegmentId(segmentAtTime.id);
+ setShowEmptySpaceTooltip(false);
+ } else {
+ // Show empty space tooltip
+ setSelectedSegmentId(null);
+ setShowEmptySpaceTooltip(true);
+ }
+ }
+ };
+
+ // Show tooltip after a slight delay to ensure UI updates
+ setTimeout(() => showTooltipAtTime(totalSeconds), 10);
+ }
+ } catch (error) {
+ console.error('Invalid time format:', error);
+ }
+ }
+ }}
+ />
+ {/* Helper function to show tooltip at current position */}
+ {/* This is defined within the component to access state variables and functions */}
+
+ {(() => {
+ // Helper function to show the appropriate tooltip at the current time position
+ const showTooltipAtCurrentTime = () => {
+ // Find the segment at the current time (after seeking) - using improved matching for better precision
+ const segmentAtCurrentTime = clipSegments.find((seg) => {
+ const isWithinSegment = currentTime >= seg.startTime && currentTime <= seg.endTime;
+ const isAtExactStart = Math.abs(currentTime - seg.startTime) < 0.001; // Within 1ms of start
+ const isAtExactEnd = Math.abs(currentTime - seg.endTime) < 0.001; // Within 1ms of end
+ return isWithinSegment || isAtExactStart || isAtExactEnd;
+ });
+
+ // Calculate position for tooltip (above the timeline where the marker is)
+ if (timelineRef.current && scrollContainerRef.current) {
+ const rect = timelineRef.current.getBoundingClientRect();
+
+ // Handle zoomed timeline by accounting for scroll position
+ let xPos;
+
+ if (zoomLevel > 1) {
+ // For zoomed timeline, calculate position based on visible area
+ const visibleTimelineLeft = rect.left - scrollContainerRef.current.scrollLeft;
+ const markerVisibleX =
+ visibleTimelineLeft + (currentTime / duration) * rect.width;
+ xPos = markerVisibleX;
+ } else {
+ // For non-zoomed timeline, use the simple calculation
+ const positionPercent = currentTime / duration;
+ xPos = rect.left + rect.width * positionPercent;
+ }
+
+ setTooltipPosition({
+ x: xPos,
+ y: rect.top - 10,
+ });
+ setClickedTime(currentTime);
+
+ if (segmentAtCurrentTime) {
+ // Show segment tooltip
+ setSelectedSegmentId(segmentAtCurrentTime.id);
+ setShowEmptySpaceTooltip(false);
+ } else {
+ // Calculate available space for new segment before showing tooltip
+ const availableSpace = calculateAvailableSpace(currentTime);
+ setAvailableSegmentDuration(availableSpace);
+
+ // Only show tooltip if there's enough space for a minimal segment
+ if (availableSpace >= 0.5) {
+ // Show empty space tooltip
+ setSelectedSegmentId(null);
+ setShowEmptySpaceTooltip(true);
+ } else {
+ // Not enough space, don't show any tooltip
+ setSelectedSegmentId(null);
+ setShowEmptySpaceTooltip(false);
+ }
+ }
+ }
+ };
+
+ return (
+ <>
+ {
+ // Move back 10ms
+ onSeek(currentTime - 0.01);
+ // Show appropriate tooltip
+ setTimeout(showTooltipAtCurrentTime, 10); // Short delay to ensure time is updated
+ }}
+ data-tooltip="Move back 10ms"
+ >
+ -10ms
+
+ {
+ // Move back 1ms
+ onSeek(currentTime - 0.001);
+ // Show appropriate tooltip
+ setTimeout(showTooltipAtCurrentTime, 10);
+ }}
+ data-tooltip="Move back 1ms"
+ >
+ -1ms
+
+ {
+ // Move forward 1ms
+ onSeek(currentTime + 0.001);
+ // Show appropriate tooltip
+ setTimeout(showTooltipAtCurrentTime, 10);
+ }}
+ data-tooltip="Move forward 1ms"
+ >
+ +1ms
+
+ {
+ // Move forward 10ms
+ onSeek(currentTime + 0.01);
+ // Show appropriate tooltip
+ setTimeout(showTooltipAtCurrentTime, 10);
+ }}
+ data-tooltip="Move forward 10ms"
+ >
+ +10ms
+
+
+ );
+ })()}
+
+
+
+ {/* Zoom Dropdown Control and Save Buttons */}
+
+
+
setIsZoomDropdownOpen(!isZoomDropdownOpen)}
+ >
+ Zoom {zoomLevel}x
+
+
+
+
+ {isZoomDropdownOpen && (
+
+ {[1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096].map((level) => (
+
{
+ onZoomChange(level);
+ setIsZoomDropdownOpen(false);
+ }}
+ >
+ {zoomLevel === level && (
+
+
+ )}
+ Zoom {level}x
+
+ ))}
+
+ )}
+
+
+ {/* Save Buttons Row */}
+
+ {onSave && (
+ setShowSaveModal(true)}
+ className="save-button"
+ data-tooltip="Save changes"
+ >
+ Save
+
+ )}
+
+ {onSaveACopy && (
+ setShowSaveAsModal(true)}
+ className="save-copy-button"
+ data-tooltip="Save as a new copy"
+ >
+ Save as Copy
+
+ )}
+
+ {onSaveSegments && (
+ setShowSaveSegmentsModal(true)}
+ className="save-segments-button"
+ data-tooltip="Save segments as separate files"
+ >
+ Save Segments
+
+ )}
+
+
+ {/* Save Confirmation Modal */}
+
setShowSaveModal(false)}
+ title="Save Changes"
+ actions={
+ <>
+ setShowSaveModal(false)}
+ >
+ Cancel
+
+ {
+ // Reset unsaved changes flag before saving
+ if (onSave) onSave();
+ handleSaveConfirm();
+ }}
+ >
+ Confirm Save
+
+
+ }
+ >
+
+ You're about to replace the original video with this trimmed version. This can't be undone.
+
+
+
+ {/* Save As Copy Modal */}
+
setShowSaveAsModal(false)}
+ title="Save As New Copy"
+ actions={
+ <>
+ setShowSaveAsModal(false)}
+ >
+ Cancel
+
+ {
+ // Reset unsaved changes flag before saving
+ if (onSaveACopy) onSaveACopy();
+ handleSaveAsCopyConfirm();
+ }}
+ >
+ Confirm Save As Copy
+
+
+ }
+ >
+
+ You're about to save a new copy with your edits. The original video will stay the same. Find
+ the new file in your My Media folder - named after the original file.
+
+
+
+ {/* Processing Modal */}
+
{}} title="Processing Video">
+
+ Please wait while your video is being processed...
+
+
+ {/* Save Segments Modal */}
+
setShowSaveSegmentsModal(false)}
+ title="Save Segments"
+ actions={
+ <>
+ setShowSaveSegmentsModal(false)}
+ >
+ Cancel
+
+ {
+ // Reset unsaved changes flag before saving
+ if (onSaveSegments) onSaveSegments();
+ handleSaveSegmentsConfirm();
+ }}
+ >
+ Save Segments
+
+
+ }
+ >
+
+ You're about to save each segment as a separate video. Find the new files in your My Media
+ folder - named after the original file.
+
+
+
+ {/* Success Modal */}
+
setShowSuccessModal(false)}
+ title="Video Edited Successfully"
+ >
+
+ {/*
+ {successMessage || "Processing completed successfully!"}
+
*/}
+
+
+ {saveType === 'segments'
+ ? 'You will be redirected to your '
+ : 'You will be redirected to your '}
+
+ media page
+
+ {' in '}
+ 10 seconds.{' '}
+ {saveType === 'segments'
+ ? 'The new video(s) will soon be there.'
+ : 'Changes to the video might take a few minutes to be applied.'}
+
+
+
+ {/* Error Modal */}
+
setShowErrorModal(false)}
+ title="Video Processing Error"
+ >
+
+
+
+
+
+
{errorMessage}
+
+ setShowErrorModal(false)}
+ className="modal-choice-button centered-choice"
+ >
+
+
+ Close
+
+
+
+
+ {/* Dropdown was moved inside the container element */}
+
+
+
+ {/* Mobile Uninitialized Overlay - Show only when on mobile and video hasn't been played yet */}
+ {isIOSUninitialized && (
+