mirror of
https://github.com/OpenCut-app/OpenCut.git
synced 2026-07-13 21:52:53 +02:00
remove files
This commit is contained in:
@@ -1,133 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useRef, useEffect } from "react";
|
|
||||||
import { usePlaybackStore } from "@/stores/playback-store";
|
|
||||||
|
|
||||||
interface VideoPlayerProps {
|
|
||||||
src: string;
|
|
||||||
poster?: string;
|
|
||||||
className?: string;
|
|
||||||
clipStartTime: number;
|
|
||||||
trimStart: number;
|
|
||||||
trimEnd: number;
|
|
||||||
clipDuration: number;
|
|
||||||
trackMuted?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function VideoPlayer({
|
|
||||||
src,
|
|
||||||
poster,
|
|
||||||
className = "",
|
|
||||||
clipStartTime,
|
|
||||||
trimStart,
|
|
||||||
trimEnd,
|
|
||||||
clipDuration,
|
|
||||||
trackMuted = false,
|
|
||||||
}: VideoPlayerProps) {
|
|
||||||
const videoRef = useRef<HTMLVideoElement>(null);
|
|
||||||
const { isPlaying, currentTime, volume, speed, muted } = usePlaybackStore();
|
|
||||||
|
|
||||||
// Calculate if we're within this clip's timeline range
|
|
||||||
const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
|
|
||||||
const isInClipRange =
|
|
||||||
currentTime >= clipStartTime && currentTime < clipEndTime;
|
|
||||||
|
|
||||||
// Sync playback events
|
|
||||||
useEffect(() => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video || !isInClipRange) return;
|
|
||||||
|
|
||||||
const handleSeekEvent = (e: CustomEvent) => {
|
|
||||||
// Always update video time, even if outside clip range
|
|
||||||
const timelineTime = e.detail.time;
|
|
||||||
const videoTime = Math.max(
|
|
||||||
trimStart,
|
|
||||||
Math.min(
|
|
||||||
clipDuration - trimEnd,
|
|
||||||
timelineTime - clipStartTime + trimStart
|
|
||||||
)
|
|
||||||
);
|
|
||||||
video.currentTime = videoTime;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUpdateEvent = (e: CustomEvent) => {
|
|
||||||
// Always update video time, even if outside clip range
|
|
||||||
const timelineTime = e.detail.time;
|
|
||||||
const targetTime = Math.max(
|
|
||||||
trimStart,
|
|
||||||
Math.min(
|
|
||||||
clipDuration - trimEnd,
|
|
||||||
timelineTime - clipStartTime + trimStart
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (Math.abs(video.currentTime - targetTime) > 0.5) {
|
|
||||||
video.currentTime = targetTime;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSpeed = (e: CustomEvent) => {
|
|
||||||
video.playbackRate = e.detail.speed;
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("playback-seek", handleSeekEvent as EventListener);
|
|
||||||
window.addEventListener(
|
|
||||||
"playback-update",
|
|
||||||
handleUpdateEvent as EventListener
|
|
||||||
);
|
|
||||||
window.addEventListener("playback-speed", handleSpeed as EventListener);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener(
|
|
||||||
"playback-seek",
|
|
||||||
handleSeekEvent as EventListener
|
|
||||||
);
|
|
||||||
window.removeEventListener(
|
|
||||||
"playback-update",
|
|
||||||
handleUpdateEvent as EventListener
|
|
||||||
);
|
|
||||||
window.removeEventListener(
|
|
||||||
"playback-speed",
|
|
||||||
handleSpeed as EventListener
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
|
|
||||||
|
|
||||||
// Sync playback state
|
|
||||||
useEffect(() => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
|
|
||||||
if (isPlaying && isInClipRange) {
|
|
||||||
video.play().catch(() => {});
|
|
||||||
} else {
|
|
||||||
video.pause();
|
|
||||||
}
|
|
||||||
}, [isPlaying, isInClipRange]);
|
|
||||||
|
|
||||||
// Sync volume and speed
|
|
||||||
useEffect(() => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
|
|
||||||
video.volume = volume;
|
|
||||||
video.muted = muted || trackMuted;
|
|
||||||
video.playbackRate = speed;
|
|
||||||
}, [volume, speed, muted, trackMuted]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<video
|
|
||||||
ref={videoRef}
|
|
||||||
src={src}
|
|
||||||
poster={poster}
|
|
||||||
className={`max-w-full max-h-full object-contain ${className}`}
|
|
||||||
playsInline
|
|
||||||
preload="auto"
|
|
||||||
controls={false}
|
|
||||||
disablePictureInPicture
|
|
||||||
disableRemotePlayback
|
|
||||||
style={{ pointerEvents: "none" }}
|
|
||||||
onContextMenu={(e) => e.preventDefault()}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
import { DEFAULT_FPS } from "@/constants/editor-constants";
|
|
||||||
import { roundToFrame } from "@/lib/time-utils";
|
|
||||||
|
|
||||||
export function findBookmarkIndex({
|
|
||||||
bookmarks,
|
|
||||||
frameTime,
|
|
||||||
}: {
|
|
||||||
bookmarks: number[];
|
|
||||||
frameTime: number;
|
|
||||||
}): number {
|
|
||||||
return bookmarks.findIndex(
|
|
||||||
(bookmark) => Math.abs(bookmark - frameTime) < 0.001,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isBookmarkAtTime({
|
|
||||||
bookmarks,
|
|
||||||
frameTime,
|
|
||||||
}: {
|
|
||||||
bookmarks: number[];
|
|
||||||
frameTime: number;
|
|
||||||
}): boolean {
|
|
||||||
return bookmarks.some((bookmark) => Math.abs(bookmark - frameTime) < 0.001);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function toggleBookmarkInArray({
|
|
||||||
bookmarks,
|
|
||||||
frameTime,
|
|
||||||
}: {
|
|
||||||
bookmarks: number[];
|
|
||||||
frameTime: number;
|
|
||||||
}): number[] {
|
|
||||||
const bookmarkIndex = findBookmarkIndex({ bookmarks, frameTime });
|
|
||||||
|
|
||||||
if (bookmarkIndex !== -1) {
|
|
||||||
return bookmarks.filter((_, i) => i !== bookmarkIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
return [...bookmarks, frameTime].sort((a, b) => a - b);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function removeBookmarkFromArray({
|
|
||||||
bookmarks,
|
|
||||||
frameTime,
|
|
||||||
}: {
|
|
||||||
bookmarks: number[];
|
|
||||||
frameTime: number;
|
|
||||||
}): number[] {
|
|
||||||
return bookmarks.filter(
|
|
||||||
(bookmark) => Math.abs(bookmark - frameTime) >= 0.001,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getFrameTime({
|
|
||||||
time,
|
|
||||||
fps = DEFAULT_FPS,
|
|
||||||
}: {
|
|
||||||
time: number;
|
|
||||||
fps?: number;
|
|
||||||
}): number {
|
|
||||||
return roundToFrame({ time, fps });
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import type { TimelineTrack } from "@/types/timeline";
|
|
||||||
|
|
||||||
export function calculateTotalDuration({
|
|
||||||
tracks,
|
|
||||||
}: {
|
|
||||||
tracks: TimelineTrack[];
|
|
||||||
}): number {
|
|
||||||
if (tracks.length === 0) return 0;
|
|
||||||
|
|
||||||
const trackEndTimes = tracks.map((track) =>
|
|
||||||
track.elements.reduce((maxEnd, element) => {
|
|
||||||
const elementEnd =
|
|
||||||
element.startTime +
|
|
||||||
element.duration -
|
|
||||||
element.trimStart -
|
|
||||||
element.trimEnd;
|
|
||||||
return Math.max(maxEnd, elementEnd);
|
|
||||||
}, 0),
|
|
||||||
);
|
|
||||||
|
|
||||||
return Math.max(...trackEndTimes, 0);
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
import { TimelineElement } from "@/types/timeline";
|
|
||||||
|
|
||||||
export function checkElementOverlaps({
|
|
||||||
elements,
|
|
||||||
}: {
|
|
||||||
elements: TimelineElement[];
|
|
||||||
}): boolean {
|
|
||||||
const sortedElements = [...elements].sort(
|
|
||||||
(a, b) => a.startTime - b.startTime,
|
|
||||||
);
|
|
||||||
|
|
||||||
for (let i = 0; i < sortedElements.length - 1; i++) {
|
|
||||||
const current = sortedElements[i];
|
|
||||||
const next = sortedElements[i + 1];
|
|
||||||
|
|
||||||
const currentEnd =
|
|
||||||
current.startTime +
|
|
||||||
(current.duration - current.trimStart - current.trimEnd);
|
|
||||||
|
|
||||||
if (currentEnd > next.startTime) return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function resolveElementOverlaps({
|
|
||||||
elements,
|
|
||||||
}: {
|
|
||||||
elements: TimelineElement[];
|
|
||||||
}): TimelineElement[] {
|
|
||||||
const sortedElements = [...elements].sort(
|
|
||||||
(a, b) => a.startTime - b.startTime,
|
|
||||||
);
|
|
||||||
const resolvedElements: TimelineElement[] = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < sortedElements.length; i++) {
|
|
||||||
const current = { ...sortedElements[i] };
|
|
||||||
|
|
||||||
if (resolvedElements.length > 0) {
|
|
||||||
const previous = resolvedElements[resolvedElements.length - 1];
|
|
||||||
const previousEnd =
|
|
||||||
previous.startTime +
|
|
||||||
(previous.duration - previous.trimStart - previous.trimEnd);
|
|
||||||
|
|
||||||
if (current.startTime < previousEnd) {
|
|
||||||
current.startTime = previousEnd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
resolvedElements.push(current);
|
|
||||||
}
|
|
||||||
|
|
||||||
return resolvedElements;
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
export * from "./track-utils";
|
|
||||||
export * from "./element-utils";
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
import type { TrackType, TimelineTrack } from "@/types/timeline";
|
|
||||||
import { TRACK_COLORS, TRACK_HEIGHTS } from "@/constants/timeline-constants";
|
|
||||||
import { generateUUID } from "@/lib/utils";
|
|
||||||
|
|
||||||
export function getTrackColors({ type }: { type: TrackType }) {
|
|
||||||
return TRACK_COLORS[type];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getTrackElementClasses({ type }: { type: TrackType }) {
|
|
||||||
const colors = getTrackColors({ type });
|
|
||||||
return `${colors.background} ${colors.border}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getTrackHeight({ type }: { type: TrackType }): number {
|
|
||||||
return TRACK_HEIGHTS[type];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getCumulativeHeightBefore({
|
|
||||||
tracks,
|
|
||||||
trackIndex,
|
|
||||||
}: {
|
|
||||||
tracks: Array<{ type: TrackType }>;
|
|
||||||
trackIndex: number;
|
|
||||||
}): number {
|
|
||||||
const GAP = 4;
|
|
||||||
return tracks
|
|
||||||
.slice(0, trackIndex)
|
|
||||||
.reduce(
|
|
||||||
(sum, track) => sum + getTrackHeight({ type: track.type }) + GAP,
|
|
||||||
0,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getTotalTracksHeight({
|
|
||||||
tracks,
|
|
||||||
}: {
|
|
||||||
tracks: Array<{ type: TrackType }>;
|
|
||||||
}): number {
|
|
||||||
const GAP = 4;
|
|
||||||
const tracksHeight = tracks.reduce(
|
|
||||||
(sum, track) => sum + getTrackHeight({ type: track.type }),
|
|
||||||
0,
|
|
||||||
);
|
|
||||||
const gapsHeight = Math.max(0, tracks.length - 1) * GAP;
|
|
||||||
return tracksHeight + gapsHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function sortTracksByOrder({
|
|
||||||
tracks,
|
|
||||||
}: {
|
|
||||||
tracks: TimelineTrack[];
|
|
||||||
}): TimelineTrack[] {
|
|
||||||
return [...tracks].sort((a, b) => {
|
|
||||||
if (a.type === "text" && b.type !== "text") return -1;
|
|
||||||
if (b.type === "text" && a.type !== "text") return 1;
|
|
||||||
|
|
||||||
if (a.type === "audio" && b.type !== "audio") return 1;
|
|
||||||
if (b.type === "audio" && a.type !== "audio") return -1;
|
|
||||||
|
|
||||||
if (a.type === "media" && b.type === "media") {
|
|
||||||
if (a.isMain && !b.isMain) return 1;
|
|
||||||
if (!a.isMain && b.isMain) return -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getMainTrack({
|
|
||||||
tracks,
|
|
||||||
}: {
|
|
||||||
tracks: TimelineTrack[];
|
|
||||||
}): TimelineTrack | null {
|
|
||||||
return tracks.find((track) => track.isMain) || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ensureMainTrack({
|
|
||||||
tracks,
|
|
||||||
}: {
|
|
||||||
tracks: TimelineTrack[];
|
|
||||||
}): TimelineTrack[] {
|
|
||||||
const hasMainTrack = tracks.some((track) => track.isMain);
|
|
||||||
|
|
||||||
if (!hasMainTrack) {
|
|
||||||
const mainTrack: TimelineTrack = {
|
|
||||||
id: generateUUID(),
|
|
||||||
name: "Main Track",
|
|
||||||
type: "media",
|
|
||||||
elements: [],
|
|
||||||
muted: false,
|
|
||||||
isMain: true,
|
|
||||||
};
|
|
||||||
return [mainTrack, ...tracks];
|
|
||||||
}
|
|
||||||
|
|
||||||
return tracks;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function canElementGoOnTrack({
|
|
||||||
elementType,
|
|
||||||
trackType,
|
|
||||||
}: {
|
|
||||||
elementType: "text" | "media";
|
|
||||||
trackType: TrackType;
|
|
||||||
}): boolean {
|
|
||||||
if (elementType === "text") {
|
|
||||||
return trackType === "text";
|
|
||||||
}
|
|
||||||
if (elementType === "media") {
|
|
||||||
return trackType === "media" || trackType === "audio";
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function validateElementTrackCompatibility({
|
|
||||||
element,
|
|
||||||
track,
|
|
||||||
}: {
|
|
||||||
element: { type: "text" | "media" };
|
|
||||||
track: { type: TrackType };
|
|
||||||
}): { isValid: boolean; errorMessage?: string } {
|
|
||||||
const isValid = canElementGoOnTrack({
|
|
||||||
elementType: element.type,
|
|
||||||
trackType: track.type,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!isValid) {
|
|
||||||
const errorMessage =
|
|
||||||
element.type === "text"
|
|
||||||
? "Text elements can only be placed on text tracks"
|
|
||||||
: "Media elements can only be placed on media or audio tracks";
|
|
||||||
|
|
||||||
return { isValid: false, errorMessage };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { isValid: true };
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user