remove files
This commit is contained in:
Maze Winther
parent
efbebd13b8
commit
975560c28e
|
|
@ -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 };
|
||||
}
|
||||
Loading…
Reference in New Issue