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 {
// Fallback to sample video if needed
setVideoUrl("/videos/sample-video-30s.mp4");
setVideoUrl("/videos/sample-video-37s.mp4");
}
}, [videoRef]);

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

@ -2235,7 +2235,7 @@ const TimelineControls = ({
}, [showSuccessModal, redirectUrl, onSave]);
return (
<div className="timeline-container-card">
<div className={`timeline-container-card ${isPreviewMode ? 'preview-mode' : ''}`}>
{/* Current Timecode with Milliseconds */}
<div className="timeline-header">
<div className="timeline-title">
@ -2342,7 +2342,7 @@ const TimelineControls = ({
{/* Segment Tooltip */}
{selectedSegmentId !== null && (
<div
className="segment-tooltip two-row-tooltip"
className={`segment-tooltip two-row-tooltip ${isPreviewMode ? 'preview-mode' : ''}`}
style={{
position: 'absolute',
...constrainTooltipPosition(currentTimePercent)
@ -2639,7 +2639,7 @@ const TimelineControls = ({
{/* Empty space tooltip - positioned absolutely within timeline container */}
{showEmptySpaceTooltip && selectedSegmentId === null && (
<div
className="empty-space-tooltip two-row-tooltip"
className={`empty-space-tooltip two-row-tooltip ${isPreviewMode ? 'preview-mode' : ''}`}
style={{
position: 'absolute',
...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' &&
(window as any).MEDIA_DATA?.videoUrl ||
"/videos/sample-video-30s.mp4";
"/videos/sample-video-37s.mp4";
// Detect iOS device
useEffect(() => {

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

@ -813,3 +813,41 @@
50% { opacity: 1; transform: scale(1.05); }
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;
}