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

improve the preview

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-05-22 03:19:11 +03:00
parent 062ced2303
commit 8390aa3ae0
5 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend-tools/video-editor/client/public/videos/sample-video-37s.mp4 Normal file
View File

Binary file not shown.

2
frontend-tools/video-editor/client/src/components/IOSVideoPlayer.tsx
View File

@ -37,7 +37,7 @@ const IOSVideoPlayer = ({
} }
} else { } else {
// Fallback to sample video if needed // Fallback to sample video if needed
setVideoUrl("/videos/sample-video-30s.mp4"); setVideoUrl("/videos/sample-video-37s.mp4");
} }
}, [videoRef]); }, [videoRef]);

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

@ -2235,7 +2235,7 @@ const TimelineControls = ({
}, [showSuccessModal, redirectUrl, onSave]); }, [showSuccessModal, redirectUrl, onSave]);
return ( return (
<div className="timeline-container-card"> <div className={`timeline-container-card ${isPreviewMode ? 'preview-mode' : ''}`}>
{/* Current Timecode with Milliseconds */} {/* Current Timecode with Milliseconds */}
<div className="timeline-header"> <div className="timeline-header">
<div className="timeline-title"> <div className="timeline-title">
@ -2342,7 +2342,7 @@ const TimelineControls = ({
{/* Segment Tooltip */} {/* Segment Tooltip */}
{selectedSegmentId !== null && ( {selectedSegmentId !== null && (
<div <div
className="segment-tooltip two-row-tooltip" className={`segment-tooltip two-row-tooltip ${isPreviewMode ? 'preview-mode' : ''}`}
style={{ style={{
position: 'absolute', position: 'absolute',
...constrainTooltipPosition(currentTimePercent) ...constrainTooltipPosition(currentTimePercent)
@ -2639,7 +2639,7 @@ const TimelineControls = ({
{/* Empty space tooltip - positioned absolutely within timeline container */} {/* Empty space tooltip - positioned absolutely within timeline container */}
{showEmptySpaceTooltip && selectedSegmentId === null && ( {showEmptySpaceTooltip && selectedSegmentId === null && (
<div <div
className="empty-space-tooltip two-row-tooltip" className={`empty-space-tooltip two-row-tooltip ${isPreviewMode ? 'preview-mode' : ''}`}
style={{ style={{
position: 'absolute', position: 'absolute',
...constrainTooltipPosition(currentTimePercent) ...constrainTooltipPosition(currentTimePercent)

2
frontend-tools/video-editor/client/src/components/VideoPlayer.tsx
View File

@ -35,7 +35,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
const sampleVideoUrl = typeof window !== 'undefined' && const sampleVideoUrl = typeof window !== 'undefined' &&
(window as any).MEDIA_DATA?.videoUrl || (window as any).MEDIA_DATA?.videoUrl ||
"/videos/sample-video-30s.mp4"; "/videos/sample-video-37s.mp4";
// Detect iOS device // Detect iOS device
useEffect(() => { useEffect(() => {

38
frontend-tools/video-editor/client/src/styles/TimelineControls.css
View File

@ -812,4 +812,42 @@
0% { opacity: 0.7; transform: scale(1); } 0% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); } 50% { opacity: 1; transform: scale(1.05); }
100% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0.7; transform: scale(1); }
}
/* Preview mode styles */
.preview-mode .tooltip-action-btn {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.preview-mode .tooltip-time-btn {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
/* Timeline preview mode styles */
.timeline-container-card.preview-mode {
pointer-events: none;
}
.timeline-container-card.preview-mode .timeline-marker-head,
.timeline-container-card.preview-mode .timeline-marker-drag,
.timeline-container-card.preview-mode .clip-segment,
.timeline-container-card.preview-mode .clip-segment-handle,
.timeline-container-card.preview-mode .time-button,
.timeline-container-card.preview-mode .zoom-button,
.timeline-container-card.preview-mode .save-button,
.timeline-container-card.preview-mode .save-copy-button,
.timeline-container-card.preview-mode .save-segments-button {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.timeline-container-card.preview-mode .clip-segment:hover {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.15);
background-color: inherit !important;
} }