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

fix: iPhone update tooltip based on current time position

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-05-22 01:03:37 +03:00
parent 4cdfdb8354
commit ef3b93995a
1 changed files with 42 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
frontend-tools/video-editor/client/src/components/TimelineControls.tsx
View File

@ -1066,6 +1066,43 @@ const TimelineControls = ({
} }
}; };
// Function to update tooltip based on current time position
const updateTooltipForPosition = (currentPosition: number) => {
if (!timelineRef.current) return;
// Find if we're in a segment at the current position
const segmentAtPosition = clipSegments.find(
seg => currentPosition >= seg.startTime && currentPosition <= seg.endTime
);
if (segmentAtPosition) {
setSelectedSegmentId(segmentAtPosition.id);
setShowEmptySpaceTooltip(false);
} else {
// Calculate available space for new segment before showing tooltip
const availableSpace = calculateAvailableSpace(currentPosition);
setAvailableSegmentDuration(availableSpace);
// Only show tooltip if there's enough space for a minimal segment
if (availableSpace >= 0.5) {
setSelectedSegmentId(null);
setShowEmptySpaceTooltip(true);
} else {
setSelectedSegmentId(null);
setShowEmptySpaceTooltip(false);
}
}
// Update tooltip position
const rect = timelineRef.current.getBoundingClientRect();
const positionPercent = (currentPosition / duration) * 100;
const xPos = rect.left + (rect.width * (positionPercent / 100));
setTooltipPosition({
x: xPos,
y: rect.top - 10
});
};
// Handle timeline click to seek and show a tooltip // Handle timeline click to seek and show a tooltip
const handleTimelineClick = (e: React.MouseEvent<HTMLDivElement>) => { const handleTimelineClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (!timelineRef.current || !scrollContainerRef.current) return; if (!timelineRef.current || !scrollContainerRef.current) return;
@ -2070,47 +2107,8 @@ const TimelineControls = ({
setClickedTime(newTime); setClickedTime(newTime);
setDisplayTime(newTime); setDisplayTime(newTime);
// Check if we're in a segment to show the appropriate tooltip // Update tooltip state based on new position
const segmentAtTime = clipSegments.find( updateTooltipForPosition(newTime);
seg => newTime >= seg.startTime && newTime <= seg.endTime
);
// Calculate available space for new segment if needed
const availableSpace = segmentAtTime ? 0 : calculateAvailableSpace(newTime);
if (segmentAtTime) {
// Show segment tooltip
setSelectedSegmentId(segmentAtTime.id);
setShowEmptySpaceTooltip(false);
} else if (availableSpace >= 0.5) {
// Only show tooltip if there's enough space for a minimal segment
// Show empty space tooltip
setSelectedSegmentId(null);
setShowEmptySpaceTooltip(true);
setAvailableSegmentDuration(availableSpace);
} else {
// Not enough space, don't show tooltip
setSelectedSegmentId(null);
setShowEmptySpaceTooltip(false);
}
// Calculate and update tooltip position
if ((segmentAtTime || availableSpace >= 0.5) && timelineRef.current) {
const timelineRect = timelineRef.current.getBoundingClientRect();
let xPos = moveEvent.clientX; // Default to cursor position
if (zoomLevel > 1 && scrollContainerRef.current) {
// For zoomed timeline, adjust for scroll position
const visibleTimelineLeft = timelineRect.left - scrollContainerRef.current.scrollLeft;
const percentPos = newTime / duration;
xPos = visibleTimelineLeft + (timelineRect.width * percentPos);
}
setTooltipPosition({
x: xPos,
y: timelineRect.top - 10
});
}
// Store position globally for iOS Safari // Store position globally for iOS Safari
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
@ -2283,6 +2281,9 @@ const TimelineControls = ({
setClickedTime(newTime); setClickedTime(newTime);
setDisplayTime(newTime); setDisplayTime(newTime);
// Update tooltip state based on new position
updateTooltipForPosition(newTime);
// Store position globally for mobile browsers // Store position globally for mobile browsers
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
(window as any).lastSeekedPosition = newTime; (window as any).lastSeekedPosition = newTime;