mirror of
https://github.com/yusufipk/OpenFrame.git
synced 2026-09-11 17:46:06 +00:00
yusufipek
d981d98cf5
Subtitle tracks hang off a version rather than off a video, because re-editing a cut shifts every cue. The file always lands in our own S3-compatible storage whatever hosts the video, so a Bunny-hosted cut and an R2 one take the same path: both already play through our own video element, so a track element is all it takes. Uploads are normalised before they are stored. Whatever arrives, SRT or WebVTT, is parsed into cues and re-serialised as a canonical WebVTT file, and anything we did not understand is dropped rather than passed through. That is what makes it safe to serve a user-supplied text file from our own origin. Files saved out of Windows editors are decoded as windows-1254 or windows-1252 when they are not valid UTF-8, rather than refused. A YouTube version cannot carry an uploaded track, so the same CC menu drives YouTube's own captions through the iframe module API. The embed hides YouTube's controls, so until now those captions were unreachable even when the video had them. Uploading and deleting take the editor permission rather than the commenter one: a subtitle is part of the delivered cut, not a comment attachment.
1079 lines
38 KiB
TypeScript
1079 lines
38 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
|
|
import Hls from 'hls.js';
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import { cn } from '@/lib/utils';
|
|
import { type AnnotationStroke, type AnnotationCanvasHandle } from '@/components/annotation-canvas';
|
|
import { PlayerCore } from '@/components/video-page/player-core';
|
|
import { VideoPageHeader } from '@/components/video-page/video-page-header';
|
|
import { ImagePreviewDialog } from '@/components/video-page/image-preview-dialog';
|
|
import { CompareVersionsDialog } from '@/components/video-page/compare-versions-dialog';
|
|
import { VideoPageLoading } from '@/components/video-page/video-page-loading';
|
|
import { VideoPageError } from '@/components/video-page/video-page-error';
|
|
import { GuestNameGate } from '@/components/video-page/guest-name-gate';
|
|
import { useCommentMedia } from '@/components/video-page/hooks/use-comment-media';
|
|
import { validateAnnotationStrokes } from '@/lib/validation';
|
|
import { resolveR2PlaybackUrl } from '@/lib/video-upload-validation';
|
|
import { useVersionActions } from '@/components/video-page/hooks/use-version-actions';
|
|
import { useWatchProgress } from '@/components/video-page/hooks/use-watch-progress';
|
|
import { useVideoPlayer } from '@/components/video-page/hooks/use-video-player';
|
|
import { useCommentActions } from '@/components/video-page/hooks/use-comment-actions';
|
|
import { useVideoPageData } from '@/components/video-page/hooks/use-video-page-data';
|
|
import { useCommentExport } from '@/components/video-page/hooks/use-comment-export';
|
|
import { useDownloadActions } from '@/components/video-page/hooks/use-download-actions';
|
|
import { useVersionDurationSync } from '@/components/video-page/hooks/use-version-duration-sync';
|
|
import { CommentComposer } from '@/components/video-page/comment-composer';
|
|
import { CommentsPane } from '@/components/video-page/comments-pane';
|
|
import { AssetsPane } from '@/components/video-page/assets-pane';
|
|
import { ApprovalRequestDialog } from '@/components/video-page/approval-request-dialog';
|
|
import { ApprovalRequestsPanel } from '@/components/video-page/approval-requests-panel';
|
|
import type {
|
|
CommentMarker,
|
|
PlayerAdapter,
|
|
VideoPageCommentsActions,
|
|
VideoPageCompareActions,
|
|
VideoPageComposerActions,
|
|
VideoPageHeaderActions,
|
|
} from '@/components/video-page/types';
|
|
import { useApprovals } from '@/components/video-page/hooks/use-approvals';
|
|
import { useVideoAssets } from '@/components/video-page/hooks/use-video-assets';
|
|
import { useSubtitles } from '@/components/video-page/hooks/use-subtitles';
|
|
import { useYoutubeCaptions } from '@/components/video-page/hooks/use-youtube-captions';
|
|
import { resolvePublicBunnyCdnHostname } from '@/lib/bunny-cdn';
|
|
import { getSpeedOptionsForProvider } from '@/components/video-page/hooks/video-player-utils';
|
|
|
|
function formatTime(seconds: number): string {
|
|
const totalSeconds = Math.floor(seconds);
|
|
const hrs = Math.floor(totalSeconds / 3600);
|
|
const mins = Math.floor((totalSeconds % 3600) / 60);
|
|
const secs = totalSeconds % 60;
|
|
if (hrs > 0) {
|
|
return `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|
}
|
|
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
function formatBunnyQualityLabel(
|
|
level: { height?: number; bitrate?: number },
|
|
index: number
|
|
): string {
|
|
if (typeof level.height === 'number' && level.height > 0) {
|
|
return `${level.height}p`;
|
|
}
|
|
if (typeof level.bitrate === 'number' && level.bitrate > 0) {
|
|
return `${Math.round(level.bitrate / 1000)} kbps`;
|
|
}
|
|
return `Level ${index + 1}`;
|
|
}
|
|
|
|
export type VideoPageMode = 'dashboard' | 'watch';
|
|
|
|
interface VideoPageContentProps {
|
|
mode: VideoPageMode;
|
|
videoId: string;
|
|
projectId?: string;
|
|
directUploadsEnabled?: boolean;
|
|
directUploadProvider?: import('@/components/video-page/types').DirectUploadProvider;
|
|
}
|
|
|
|
export function VideoPageContent({
|
|
mode,
|
|
videoId,
|
|
projectId: propProjectId,
|
|
directUploadsEnabled = false,
|
|
directUploadProvider = 'bunny',
|
|
}: VideoPageContentProps) {
|
|
const iframeRef = useRef<HTMLIFrameElement>(null);
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
const bunnyViewportRef = useRef<HTMLDivElement>(null);
|
|
const hlsRef = useRef<Hls | null>(null);
|
|
const playerRef = useRef<YT.Player | PlayerAdapter | null>(null);
|
|
const timelineRef = useRef<HTMLDivElement>(null);
|
|
const progressRef = useRef<HTMLDivElement>(null);
|
|
const playheadRef = useRef<HTMLDivElement>(null);
|
|
const scrubReadoutRef = useRef<HTMLDivElement>(null);
|
|
const videoContainerRef = useRef<HTMLDivElement>(null);
|
|
const pathname = usePathname();
|
|
const scheduleWatchProgressSaveRef = useRef<
|
|
(input: { progress: number; duration?: number; immediate?: boolean; force?: boolean }) => void
|
|
>(() => {});
|
|
|
|
const {
|
|
playingVoiceId,
|
|
voiceProgress,
|
|
voiceCurrentTime,
|
|
voicePlaybackRate,
|
|
playVoice,
|
|
toggleVoiceSpeed,
|
|
} = useCommentMedia();
|
|
const [showResolved, setShowResolved] = useState(false);
|
|
const [activeSidePane, setActiveSidePane] = useState<'comments' | 'assets'>('comments');
|
|
const [highlightedAssetId, setHighlightedAssetId] = useState<string | null>(null);
|
|
|
|
const editAnnotationCanvasRef = useRef<AnnotationCanvasHandle>(null);
|
|
|
|
// Annotation state
|
|
const [isAnnotating, setIsAnnotating] = useState(false);
|
|
const [annotationStrokes, setAnnotationStrokes] = useState<AnnotationStroke[] | null>(null);
|
|
const [viewingAnnotation, setViewingAnnotation] = useState<AnnotationStroke[] | null>(null);
|
|
const annotationCanvasRef = useRef<AnnotationCanvasHandle>(null);
|
|
|
|
const [guestName, setGuestName] = useState(() => {
|
|
if (typeof window === 'undefined') return '';
|
|
return localStorage.getItem('openframe_guest_name') || '';
|
|
});
|
|
const [guestNameConfirmed, setGuestNameConfirmed] = useState(() => {
|
|
if (mode === 'dashboard') return true;
|
|
if (typeof window === 'undefined') return false;
|
|
return !!localStorage.getItem('openframe_guest_name');
|
|
});
|
|
|
|
// Compare dialog state
|
|
const [showCompareDialog, setShowCompareDialog] = useState(false);
|
|
const [selectedCompareVersions, setSelectedCompareVersions] = useState<Set<string>>(new Set());
|
|
const [showApprovalRequestDialog, setShowApprovalRequestDialog] = useState(false);
|
|
const [showApprovalsPanel, setShowApprovalsPanel] = useState(false);
|
|
const router = useRouter();
|
|
|
|
const {
|
|
video,
|
|
setVideo,
|
|
loading,
|
|
error,
|
|
activeVersionId,
|
|
setActiveVersionId,
|
|
availableTags,
|
|
selectedTagId,
|
|
setSelectedTagId,
|
|
projectId,
|
|
fetchVersionComments,
|
|
} = useVideoPageData({
|
|
mode,
|
|
videoId,
|
|
propProjectId,
|
|
});
|
|
|
|
const isGuest = video ? !video.isAuthenticated : false;
|
|
const canInitializePlayer = mode !== 'watch' || !isGuest || guestNameConfirmed;
|
|
const normalizedGuestName = guestName.trim();
|
|
const canUploadAssets = !!video?.canUploadAssets;
|
|
const canDownloadAssets = !!video?.canDownloadAssets;
|
|
|
|
const {
|
|
assets,
|
|
isLoadingAssets,
|
|
isCreatingAsset,
|
|
deletingAssetIds,
|
|
activeDownloadAssetId,
|
|
hasMoreAssets,
|
|
isLoadingMoreAssets,
|
|
fetchAssets,
|
|
loadMoreAssets,
|
|
createAsset,
|
|
deleteAsset,
|
|
downloadAsset,
|
|
getGuestUploadToken,
|
|
} = useVideoAssets({
|
|
videoId,
|
|
isAuthenticated: !!video?.isAuthenticated,
|
|
canUploadAssets,
|
|
canDownloadAssets,
|
|
guestName: normalizedGuestName,
|
|
});
|
|
|
|
const {
|
|
showVersionDialog,
|
|
setShowVersionDialog,
|
|
newVersionUrl,
|
|
newVersionLabel,
|
|
setNewVersionLabel,
|
|
newVersionSource,
|
|
newVersionUrlError,
|
|
isCreatingVersion,
|
|
newVersionMode,
|
|
setNewVersionMode,
|
|
newVersionFile,
|
|
setNewVersionFile,
|
|
newVersionUploadProgress,
|
|
newVersionUploadStatus,
|
|
handleNewVersionUrlChange,
|
|
handleCreateVersion,
|
|
showDeleteVersionDialog,
|
|
setShowDeleteVersionDialog,
|
|
setVersionToDelete,
|
|
isDeletingVersion,
|
|
handleDeleteVersion,
|
|
} = useVersionActions({
|
|
projectId: propProjectId,
|
|
videoId,
|
|
directUploadsEnabled,
|
|
directUploadProvider,
|
|
setVideo,
|
|
activeVersionId,
|
|
setActiveVersionId,
|
|
});
|
|
|
|
// Cursor idle detection: hide overlay when cursor idle for 3s while playing
|
|
// Memoize version selection handler to prevent recreating on each render
|
|
const handleVersionSelect = useCallback(
|
|
(versionId: string) => {
|
|
setActiveVersionId(versionId);
|
|
},
|
|
[setActiveVersionId]
|
|
);
|
|
|
|
// Memoize toggle show resolved handler
|
|
const handleToggleShowResolved = useCallback(() => {
|
|
setShowResolved((prev) => !prev);
|
|
}, []);
|
|
|
|
const handleAssetMentionClick = useCallback((assetId: string) => {
|
|
setActiveSidePane('assets');
|
|
setHighlightedAssetId(assetId);
|
|
}, []);
|
|
|
|
const { isExportingCsv, isExportingPdf, exportComments } = useCommentExport({
|
|
activeVersionId,
|
|
showResolved,
|
|
});
|
|
|
|
// Determine current user info for permission checks and comment display
|
|
const currentUserId = video?.currentUserId || null;
|
|
const currentUserName = video?.currentUserName || null;
|
|
const canResolveComments = !!video?.canResolveComments;
|
|
const canRequestApproval = !!video?.canRequestApproval;
|
|
const canShareVideo = !!video?.canShareVideo;
|
|
|
|
const {
|
|
requests: approvalRequests,
|
|
candidates: approvalCandidates,
|
|
isLoadingRequests: isLoadingApprovals,
|
|
isLoadingCandidates: isLoadingApprovalCandidates,
|
|
isSubmittingRequest: isSubmittingApprovalRequest,
|
|
isSubmittingDecision: isSubmittingApprovalDecision,
|
|
isCancelingRequest: isCancelingApprovalRequest,
|
|
activePendingRequest,
|
|
error: approvalError,
|
|
setError: setApprovalError,
|
|
fetchRequests: fetchApprovalRequests,
|
|
fetchCandidates: fetchApprovalCandidates,
|
|
createRequest: createApprovalRequest,
|
|
submitDecision: submitApprovalDecision,
|
|
cancelRequest: cancelApprovalRequest,
|
|
} = useApprovals({
|
|
projectId,
|
|
activeVersionId,
|
|
currentUserId,
|
|
});
|
|
|
|
// Memoize active version lookup to avoid recalculating on every render
|
|
const activeVersion = useMemo(() => {
|
|
return (
|
|
video?.versions?.find((v) => v.id === activeVersionId) ||
|
|
video?.versions?.find((v) => v.isActive) ||
|
|
video?.versions?.[0]
|
|
);
|
|
}, [video?.versions, activeVersionId]);
|
|
const activeProviderId = activeVersion?.providerId;
|
|
const speedOptions = getSpeedOptionsForProvider(activeProviderId);
|
|
// Only the providers that play through our own <video> element can carry a <track>.
|
|
// A YouTube version is an iframe we do not control, and it brings its own captions.
|
|
const supportsSubtitles = activeProviderId === 'bunny' || activeProviderId === 'r2';
|
|
const {
|
|
subtitles,
|
|
subtitleTrackKey,
|
|
canManageSubtitles,
|
|
activeSubtitleLanguage,
|
|
selectSubtitleLanguage,
|
|
uploadSubtitle,
|
|
deleteSubtitle,
|
|
isUploadingSubtitle,
|
|
} = useSubtitles({
|
|
videoId,
|
|
versionId: activeVersionId,
|
|
videoRef,
|
|
supportsSubtitles,
|
|
});
|
|
const activeVersionDuration = activeVersion?.duration;
|
|
const bunnyCdnHostname = useMemo(() => resolvePublicBunnyCdnHostname(), []);
|
|
const embedUrl = useMemo(() => {
|
|
if (!activeVersion) return '';
|
|
if (activeVersion.providerId === 'youtube') {
|
|
const base = `https://www.youtube.com/embed/${activeVersion.videoId}?enablejsapi=1&rel=0&modestbranding=1&controls=0&showinfo=0&iv_load_policy=3&disablekb=1`;
|
|
if (typeof window === 'undefined') return base;
|
|
const origin = window.location.origin;
|
|
return `${base}&origin=${encodeURIComponent(origin)}`;
|
|
}
|
|
if (activeVersion.providerId === 'bunny') {
|
|
if (!bunnyCdnHostname) return '';
|
|
return `https://${bunnyCdnHostname}/${activeVersion.videoId}/playlist.m3u8`;
|
|
}
|
|
if (activeVersion.providerId === 'r2') {
|
|
return resolveR2PlaybackUrl(activeVersion);
|
|
}
|
|
try {
|
|
const url = new URL(activeVersion.originalUrl);
|
|
if (url.protocol !== 'http:' && url.protocol !== 'https:') {
|
|
return '';
|
|
}
|
|
return activeVersion.originalUrl;
|
|
} catch {
|
|
return '';
|
|
}
|
|
}, [activeVersion, bunnyCdnHostname]);
|
|
|
|
const {
|
|
isReady,
|
|
youtubeModuleRevision,
|
|
bunnyPlaybackState,
|
|
currentTime,
|
|
setCurrentTime,
|
|
videoDuration,
|
|
isPlaying,
|
|
isMuted,
|
|
isFrameMode,
|
|
frameStepLabel,
|
|
showScrubReadout,
|
|
playbackSpeed,
|
|
qualityOptions,
|
|
selectedQualityLevel,
|
|
isBunnyPortraitSource,
|
|
bunnyPortraitFrameWidth,
|
|
cursorIdle,
|
|
isFullscreenMode,
|
|
showComments,
|
|
isMobileCommentsOpen,
|
|
setShowComments,
|
|
setIsMobileCommentsOpen,
|
|
handleVideoMouseMove,
|
|
handleVideoMouseLeave,
|
|
handlePlayPause,
|
|
handleSeekToTimestamp,
|
|
handleMuteToggle,
|
|
handleFrameModeToggle,
|
|
handleSkip,
|
|
handleSpeedChange,
|
|
handleQualityChange,
|
|
handleTimelineMouseDown,
|
|
handleTimelineMouseMove,
|
|
toggleFullscreen,
|
|
} = useVideoPlayer({
|
|
activeVersion,
|
|
activeVersionId,
|
|
activeProviderId,
|
|
embedUrl,
|
|
canInitializePlayer,
|
|
iframeRef,
|
|
videoRef,
|
|
bunnyViewportRef,
|
|
timelineRef,
|
|
progressRef,
|
|
playheadRef,
|
|
scrubReadoutRef,
|
|
hlsRef,
|
|
playerRef,
|
|
formatTime,
|
|
formatBunnyQualityLabel,
|
|
speedOptions,
|
|
scheduleWatchProgressSaveRef,
|
|
setViewingAnnotation,
|
|
});
|
|
|
|
const { youtubeCaptionTracks, activeYoutubeCaptionLanguage, selectYoutubeCaptionLanguage } =
|
|
useYoutubeCaptions({
|
|
videoId,
|
|
versionId: activeVersionId,
|
|
playerRef,
|
|
enabled: activeProviderId === 'youtube',
|
|
isReady,
|
|
moduleRevision: youtubeModuleRevision,
|
|
});
|
|
|
|
// One CC menu, two sources behind it. A YouTube version can only offer the captions the
|
|
// video already carries, so nothing there is ours to manage.
|
|
const isYoutubeVersion = activeProviderId === 'youtube';
|
|
const subtitleTracks = isYoutubeVersion ? youtubeCaptionTracks : subtitles;
|
|
const activeCaptionLanguage = isYoutubeVersion
|
|
? activeYoutubeCaptionLanguage
|
|
: activeSubtitleLanguage;
|
|
const selectCaptionLanguage = isYoutubeVersion
|
|
? selectYoutubeCaptionLanguage
|
|
: selectSubtitleLanguage;
|
|
|
|
const {
|
|
savedProgress,
|
|
showResumePrompt,
|
|
scheduleWatchProgressSave,
|
|
handleResumeFromSaved,
|
|
handleDismissResume,
|
|
} = useWatchProgress({
|
|
videoId,
|
|
activeVersionId,
|
|
isAuthenticated: !!video?.isAuthenticated,
|
|
pathname,
|
|
playerRef,
|
|
isReady,
|
|
currentTime,
|
|
videoDuration,
|
|
});
|
|
|
|
useEffect(() => {
|
|
scheduleWatchProgressSaveRef.current = scheduleWatchProgressSave;
|
|
}, [scheduleWatchProgressSave]);
|
|
|
|
const handleResumeFromSavedWithSync = useCallback(() => {
|
|
const resumed = handleResumeFromSaved();
|
|
if (typeof resumed === 'number') {
|
|
setCurrentTime(resumed);
|
|
}
|
|
}, [handleResumeFromSaved, setCurrentTime]);
|
|
|
|
const { activeDownloadTarget, isDownloadingVideo, startDownload } = useDownloadActions({
|
|
activeVersion,
|
|
video,
|
|
});
|
|
|
|
// Memoize comments array
|
|
const comments = useMemo(() => {
|
|
return activeVersion?.comments || [];
|
|
}, [activeVersion]);
|
|
|
|
// Memoize filtered comments to avoid filtering on every render
|
|
const filteredComments = useMemo(() => {
|
|
return comments.filter((c) => showResolved || !c.isResolved);
|
|
}, [comments, showResolved]);
|
|
|
|
// Memoize sorted comments to avoid sorting on every render
|
|
const sortedComments = useMemo(() => {
|
|
return [...filteredComments].sort((a, b) => a.timestamp - b.timestamp);
|
|
}, [filteredComments]);
|
|
|
|
// Memoize duration computation
|
|
const duration = useMemo(() => {
|
|
return videoDuration || activeVersion?.duration || 0;
|
|
}, [videoDuration, activeVersion?.duration]);
|
|
|
|
const selectedQualityLabel = useMemo(() => {
|
|
if (selectedQualityLevel === -2) return 'Original';
|
|
if (selectedQualityLevel === -1) return 'Auto';
|
|
return qualityOptions.find((option) => option.level === selectedQualityLevel)?.label ?? 'Auto';
|
|
}, [qualityOptions, selectedQualityLevel]);
|
|
|
|
useEffect(() => {
|
|
if (!activeVersionId || mode !== 'dashboard') return;
|
|
void fetchApprovalRequests();
|
|
}, [activeVersionId, fetchApprovalRequests, mode]);
|
|
|
|
useEffect(() => {
|
|
if (!showApprovalRequestDialog || mode !== 'dashboard') return;
|
|
void fetchApprovalCandidates();
|
|
}, [fetchApprovalCandidates, mode, showApprovalRequestDialog]);
|
|
|
|
const {
|
|
commentText,
|
|
setCommentText,
|
|
isSubmittingComment,
|
|
isRecording,
|
|
recordingTime,
|
|
audioBlob,
|
|
isUploadingAudio,
|
|
imageFiles,
|
|
commentRangeStart,
|
|
commentRangeEnd,
|
|
toggleCommentRangeSelection,
|
|
clearCommentRangeSelection,
|
|
isUploadingImage,
|
|
imageInputRef,
|
|
removeImageFile,
|
|
handleAddComment,
|
|
handleImageSelect,
|
|
handlePaste,
|
|
handleDrop,
|
|
startRecording,
|
|
stopRecording,
|
|
cancelRecording,
|
|
submitCommentWithMedia,
|
|
replyingTo,
|
|
setReplyingTo,
|
|
replyText,
|
|
setReplyText,
|
|
isSubmittingReply,
|
|
isReplyRecording,
|
|
replyRecordingTime,
|
|
replyAudioBlob,
|
|
replyImageFiles,
|
|
replyRangeStart,
|
|
replyRangeEnd,
|
|
toggleReplyRangeSelection,
|
|
clearReplyRangeSelection,
|
|
isUploadingReplyAudio,
|
|
isUploadingReplyImage,
|
|
replyImageInputRef,
|
|
handleReplyComment,
|
|
startReplyRecording,
|
|
stopReplyRecording,
|
|
cancelReplyRecording,
|
|
submitReplyWithMedia,
|
|
editingCommentId,
|
|
editText,
|
|
setEditText,
|
|
editTagId,
|
|
setEditTagId,
|
|
editAnnotationData,
|
|
setEditAnnotationData,
|
|
isEditingAnnotation,
|
|
setIsEditingAnnotation,
|
|
editImageUrls,
|
|
editImageFiles,
|
|
editImageInputRef,
|
|
startEditingComment,
|
|
startEditingReply,
|
|
cancelEditingComment,
|
|
removeEditImageUrl,
|
|
isSubmittingEdit,
|
|
handleEditComment,
|
|
handleDeleteComment,
|
|
handleResolveComment,
|
|
previewImage,
|
|
setPreviewImage,
|
|
} = useCommentActions({
|
|
videoId,
|
|
setVideo,
|
|
activeVersionId,
|
|
activeVersion,
|
|
currentTime,
|
|
isGuest,
|
|
normalizedGuestName,
|
|
currentUserName,
|
|
canResolveComments,
|
|
availableTags,
|
|
selectedTagId,
|
|
setSelectedTagId,
|
|
annotationStrokes,
|
|
setAnnotationStrokes,
|
|
isAnnotating,
|
|
setIsAnnotating,
|
|
setViewingAnnotation,
|
|
annotationCanvasRef,
|
|
editAnnotationCanvasRef,
|
|
fetchVersionComments,
|
|
fetchAssets,
|
|
});
|
|
|
|
const commentMarkers = useMemo<CommentMarker[]>(() => {
|
|
return filteredComments.map((comment) => ({
|
|
id: comment.id,
|
|
timestamp: comment.timestamp,
|
|
timestampEnd: comment.timestampEnd,
|
|
color: comment.tag?.color || (comment.isResolved ? '#22C55E' : '#22D3EE'),
|
|
annotationData: comment.annotationData,
|
|
preview: `${comment.tag ? ` [${comment.tag.name}]` : ''} - ${comment.content?.substring(0, 30) || '(voice note)'}...`,
|
|
}));
|
|
}, [filteredComments]);
|
|
|
|
const editAnnotationInitialStrokes = useMemo<AnnotationStroke[] | undefined>(() => {
|
|
if (editAnnotationData) {
|
|
try {
|
|
const parsed = JSON.parse(editAnnotationData);
|
|
return (validateAnnotationStrokes(parsed) as AnnotationStroke[] | null) ?? undefined;
|
|
} catch {
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
const editingComment = comments.find((comment) => comment.id === editingCommentId);
|
|
if (!editingComment?.annotationData) return undefined;
|
|
try {
|
|
const parsed = JSON.parse(editingComment.annotationData);
|
|
return (validateAnnotationStrokes(parsed) as AnnotationStroke[] | null) ?? undefined;
|
|
} catch {
|
|
return undefined;
|
|
}
|
|
}, [editAnnotationData, comments, editingCommentId]);
|
|
|
|
useVersionDurationSync({
|
|
videoDuration,
|
|
activeVersionDuration,
|
|
activeVersionId,
|
|
propProjectId,
|
|
videoId,
|
|
setVideo,
|
|
});
|
|
|
|
const containerHeight = 'h-screen';
|
|
const backHref =
|
|
mode === 'dashboard'
|
|
? `/projects/${propProjectId}`
|
|
: video?.projectId
|
|
? `/projects/${video.projectId}`
|
|
: '/';
|
|
const isBunnyVersion = activeVersion?.providerId === 'bunny';
|
|
const showBunnyProcessingOverlay =
|
|
isBunnyVersion && bunnyPlaybackState === 'processing' && !isReady;
|
|
const isR2Version = activeVersion?.providerId === 'r2';
|
|
const showBunnyErrorOverlay = (isBunnyVersion || isR2Version) && bunnyPlaybackState === 'error';
|
|
|
|
const confirmGuestName = useCallback(() => {
|
|
if (!guestName.trim()) return;
|
|
localStorage.setItem('openframe_guest_name', guestName.trim());
|
|
setGuestNameConfirmed(true);
|
|
}, [guestName]);
|
|
|
|
const handleDeleteCurrentVersionClick = useCallback(() => {
|
|
setVersionToDelete(activeVersionId);
|
|
setShowDeleteVersionDialog(true);
|
|
}, [activeVersionId, setShowDeleteVersionDialog, setVersionToDelete]);
|
|
|
|
const handleOpenCompare = useCallback(() => {
|
|
setSelectedCompareVersions(new Set(activeVersionId ? [activeVersionId] : []));
|
|
setShowCompareDialog(true);
|
|
}, [activeVersionId]);
|
|
|
|
const handleOpenApprovalRequestDialog = useCallback(() => {
|
|
setApprovalError('');
|
|
setShowApprovalRequestDialog(true);
|
|
}, [setApprovalError]);
|
|
|
|
const handleOpenApprovalsPanel = useCallback(() => {
|
|
setApprovalError('');
|
|
setShowApprovalsPanel(true);
|
|
void fetchApprovalRequests();
|
|
}, [fetchApprovalRequests, setApprovalError]);
|
|
|
|
const toggleCompareVersion = useCallback((versionId: string) => {
|
|
setSelectedCompareVersions((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(versionId)) {
|
|
next.delete(versionId);
|
|
} else {
|
|
next.add(versionId);
|
|
}
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
const handleCompareConfirm = useCallback(() => {
|
|
const ids = Array.from(selectedCompareVersions).join(',');
|
|
setShowCompareDialog(false);
|
|
router.push(`/projects/${propProjectId}/videos/${videoId}/compare?versions=${ids}`);
|
|
}, [propProjectId, router, selectedCompareVersions, videoId]);
|
|
|
|
const handleStartEditAnnotation = useCallback(() => {
|
|
if (playerRef.current?.pauseVideo) {
|
|
playerRef.current.pauseVideo();
|
|
}
|
|
setIsEditingAnnotation(true);
|
|
setIsAnnotating(false);
|
|
}, [setIsEditingAnnotation]);
|
|
|
|
const pauseVideoForAnnotation = useCallback(() => {
|
|
if (playerRef.current?.pauseVideo) {
|
|
playerRef.current.pauseVideo();
|
|
}
|
|
}, []);
|
|
|
|
const headerActions: VideoPageHeaderActions = useMemo(
|
|
() => ({
|
|
onVersionSelect: handleVersionSelect,
|
|
onDeleteCurrentVersionClick: handleDeleteCurrentVersionClick,
|
|
onDownload: startDownload,
|
|
onOpenCompare: handleOpenCompare,
|
|
onCreateVersion: handleCreateVersion,
|
|
}),
|
|
[
|
|
handleVersionSelect,
|
|
handleDeleteCurrentVersionClick,
|
|
startDownload,
|
|
handleOpenCompare,
|
|
handleCreateVersion,
|
|
]
|
|
);
|
|
|
|
const commentsActions: VideoPageCommentsActions = useMemo(
|
|
() => ({
|
|
onExportComments: exportComments,
|
|
onResolveComment: handleResolveComment,
|
|
onEditComment: handleEditComment,
|
|
onDeleteComment: handleDeleteComment,
|
|
onReplyComment: handleReplyComment,
|
|
onSubmitReplyWithMedia: submitReplyWithMedia,
|
|
onStartEditAnnotation: handleStartEditAnnotation,
|
|
}),
|
|
[
|
|
exportComments,
|
|
handleResolveComment,
|
|
handleEditComment,
|
|
handleDeleteComment,
|
|
handleReplyComment,
|
|
submitReplyWithMedia,
|
|
handleStartEditAnnotation,
|
|
]
|
|
);
|
|
|
|
const composerActions: VideoPageComposerActions = useMemo(
|
|
() => ({
|
|
onSubmitCommentWithMedia: submitCommentWithMedia,
|
|
onAddComment: handleAddComment,
|
|
onPauseVideoForAnnotation: pauseVideoForAnnotation,
|
|
}),
|
|
[submitCommentWithMedia, handleAddComment, pauseVideoForAnnotation]
|
|
);
|
|
|
|
const compareActions: VideoPageCompareActions = useMemo(
|
|
() => ({
|
|
onToggleVersion: toggleCompareVersion,
|
|
onCompare: handleCompareConfirm,
|
|
}),
|
|
[toggleCompareVersion, handleCompareConfirm]
|
|
);
|
|
|
|
if (loading) {
|
|
return (
|
|
<VideoPageLoading
|
|
containerHeight={containerHeight}
|
|
mode={mode}
|
|
isFullscreenMode={isFullscreenMode}
|
|
cursorIdle={cursorIdle}
|
|
isPlaying={isPlaying}
|
|
showComments={showComments}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (error || !video || !activeVersion) {
|
|
return (
|
|
<VideoPageError
|
|
containerHeight={containerHeight}
|
|
error={error}
|
|
mode={mode}
|
|
projectId={propProjectId}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (mode === 'watch' && isGuest && !guestNameConfirmed) {
|
|
return (
|
|
<GuestNameGate
|
|
guestName={guestName}
|
|
setGuestName={setGuestName}
|
|
onConfirm={confirmGuestName}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn(containerHeight, 'flex flex-col bg-background overflow-hidden')}>
|
|
<div className="flex-1 flex flex-col lg:flex-row overflow-y-auto lg:overflow-hidden min-h-0">
|
|
<div className={cn('flex-1 w-full flex flex-col min-h-0', isFullscreenMode && 'relative')}>
|
|
<VideoPageHeader
|
|
mode={mode}
|
|
backHref={backHref}
|
|
title={video.title}
|
|
projectName={video.project.name}
|
|
isFullscreenMode={isFullscreenMode}
|
|
cursorIdle={cursorIdle}
|
|
isPlaying={isPlaying}
|
|
versions={video.versions}
|
|
activeVersion={activeVersion}
|
|
activeVersionId={activeVersionId}
|
|
onVersionSelect={headerActions.onVersionSelect}
|
|
onDeleteCurrentVersionClick={headerActions.onDeleteCurrentVersionClick}
|
|
showDeleteVersionDialog={showDeleteVersionDialog}
|
|
setShowDeleteVersionDialog={setShowDeleteVersionDialog}
|
|
isDeletingVersion={isDeletingVersion}
|
|
onDeleteVersion={handleDeleteVersion}
|
|
videoCanDownload={!!video.canDownload}
|
|
isDownloadingVideo={isDownloadingVideo}
|
|
activeDownloadTarget={activeDownloadTarget}
|
|
onDownload={headerActions.onDownload}
|
|
projectId={projectId}
|
|
videoId={videoId}
|
|
directUploadsEnabled={directUploadsEnabled}
|
|
showVersionDialog={showVersionDialog}
|
|
setShowVersionDialog={setShowVersionDialog}
|
|
newVersionMode={newVersionMode}
|
|
setNewVersionMode={setNewVersionMode}
|
|
newVersionUrl={newVersionUrl}
|
|
handleNewVersionUrlChange={handleNewVersionUrlChange}
|
|
newVersionUrlError={newVersionUrlError}
|
|
newVersionSource={newVersionSource}
|
|
newVersionFile={newVersionFile}
|
|
setNewVersionFile={setNewVersionFile}
|
|
newVersionLabel={newVersionLabel}
|
|
setNewVersionLabel={setNewVersionLabel}
|
|
newVersionUploadStatus={newVersionUploadStatus}
|
|
newVersionUploadProgress={newVersionUploadProgress}
|
|
isCreatingVersion={isCreatingVersion}
|
|
onCreateVersion={headerActions.onCreateVersion}
|
|
onOpenCompare={headerActions.onOpenCompare}
|
|
canRequestApproval={canRequestApproval}
|
|
canShareVideo={canShareVideo}
|
|
hasPendingApprovalRequest={!!activePendingRequest}
|
|
onOpenApprovalRequest={handleOpenApprovalRequestDialog}
|
|
onOpenApprovalsPanel={handleOpenApprovalsPanel}
|
|
/>
|
|
|
|
<PlayerCore
|
|
activeVersionId={activeVersionId}
|
|
activeProviderId={activeVersion?.providerId}
|
|
embedUrl={embedUrl}
|
|
videoRef={videoRef}
|
|
iframeRef={iframeRef}
|
|
bunnyViewportRef={bunnyViewportRef}
|
|
timelineRef={timelineRef}
|
|
progressRef={progressRef}
|
|
playheadRef={playheadRef}
|
|
scrubReadoutRef={scrubReadoutRef}
|
|
videoContainerRef={videoContainerRef}
|
|
showScrubReadout={showScrubReadout}
|
|
isFullscreenMode={isFullscreenMode}
|
|
cursorIdle={cursorIdle}
|
|
isPlaying={isPlaying}
|
|
handlePlayPause={handlePlayPause}
|
|
handleVideoMouseMove={handleVideoMouseMove}
|
|
handleVideoMouseLeave={handleVideoMouseLeave}
|
|
isBunnyPortraitSource={isBunnyPortraitSource}
|
|
bunnyPortraitFrameWidth={bunnyPortraitFrameWidth}
|
|
showBunnyProcessingOverlay={showBunnyProcessingOverlay}
|
|
showBunnyErrorOverlay={showBunnyErrorOverlay}
|
|
showResumePrompt={showResumePrompt}
|
|
savedProgress={savedProgress}
|
|
formatTime={formatTime}
|
|
handleResumeFromSaved={handleResumeFromSavedWithSync}
|
|
handleDismissResume={handleDismissResume}
|
|
isAnnotating={isAnnotating}
|
|
annotationCanvasRef={annotationCanvasRef}
|
|
setAnnotationStrokes={setAnnotationStrokes}
|
|
setIsAnnotating={setIsAnnotating}
|
|
setViewingAnnotation={setViewingAnnotation}
|
|
viewingAnnotation={viewingAnnotation}
|
|
isEditingAnnotation={isEditingAnnotation}
|
|
editAnnotationCanvasRef={editAnnotationCanvasRef}
|
|
editAnnotationInitialStrokes={editAnnotationInitialStrokes}
|
|
setEditAnnotationData={setEditAnnotationData}
|
|
setIsEditingAnnotation={setIsEditingAnnotation}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
isFrameMode={isFrameMode}
|
|
frameStepLabel={frameStepLabel}
|
|
handleSkip={handleSkip}
|
|
handleFrameModeToggle={handleFrameModeToggle}
|
|
handleMuteToggle={handleMuteToggle}
|
|
isMuted={isMuted}
|
|
selectedQualityLabel={selectedQualityLabel}
|
|
selectedQualityLevel={selectedQualityLevel}
|
|
qualityOptions={qualityOptions}
|
|
handleQualityChange={handleQualityChange}
|
|
subtitles={subtitles}
|
|
subtitleTracks={subtitleTracks}
|
|
subtitleTrackKey={subtitleTrackKey}
|
|
activeSubtitleLanguage={activeCaptionLanguage}
|
|
onSelectSubtitleLanguage={selectCaptionLanguage}
|
|
canManageSubtitles={canManageSubtitles}
|
|
onUploadSubtitle={uploadSubtitle}
|
|
onDeleteSubtitle={deleteSubtitle}
|
|
isUploadingSubtitle={isUploadingSubtitle}
|
|
playbackSpeed={playbackSpeed}
|
|
speedOptions={speedOptions}
|
|
handleSpeedChange={handleSpeedChange}
|
|
toggleFullscreen={toggleFullscreen}
|
|
showComments={showComments}
|
|
setShowComments={setShowComments}
|
|
setIsMobileCommentsOpen={setIsMobileCommentsOpen}
|
|
handleTimelineMouseDown={handleTimelineMouseDown}
|
|
handleTimelineMouseMove={handleTimelineMouseMove}
|
|
handleSeekToTimestamp={handleSeekToTimestamp}
|
|
commentMarkers={commentMarkers}
|
|
/>
|
|
</div>
|
|
|
|
<CommentsPane
|
|
isMobileCommentsOpen={isMobileCommentsOpen}
|
|
setIsMobileCommentsOpen={setIsMobileCommentsOpen}
|
|
isFullscreenMode={isFullscreenMode}
|
|
showComments={showComments}
|
|
comments={comments}
|
|
filteredComments={filteredComments}
|
|
sortedComments={sortedComments}
|
|
showResolved={showResolved}
|
|
handleToggleShowResolved={handleToggleShowResolved}
|
|
activeVersion={activeVersion}
|
|
isGuest={isGuest}
|
|
isExportingCsv={isExportingCsv}
|
|
isExportingPdf={isExportingPdf}
|
|
handleExportComments={commentsActions.onExportComments}
|
|
canResolveComments={canResolveComments}
|
|
handleResolveComment={commentsActions.onResolveComment}
|
|
handleSeekToTimestamp={handleSeekToTimestamp}
|
|
currentUserId={currentUserId}
|
|
projectOwnerId={video.project.ownerId}
|
|
editingCommentId={editingCommentId}
|
|
startEditingComment={startEditingComment}
|
|
startEditingReply={startEditingReply}
|
|
cancelEditingComment={cancelEditingComment}
|
|
editText={editText}
|
|
setEditText={setEditText}
|
|
editTagId={editTagId}
|
|
setEditTagId={setEditTagId}
|
|
editImageUrls={editImageUrls}
|
|
editImageFiles={editImageFiles}
|
|
editImageInputRef={editImageInputRef}
|
|
removeEditImageUrl={removeEditImageUrl}
|
|
onStartEditAnnotation={commentsActions.onStartEditAnnotation}
|
|
isSubmittingEdit={isSubmittingEdit}
|
|
availableTags={availableTags}
|
|
handleEditComment={commentsActions.onEditComment}
|
|
handleDeleteComment={commentsActions.onDeleteComment}
|
|
playVoice={playVoice}
|
|
playingVoiceId={playingVoiceId}
|
|
voiceProgress={voiceProgress}
|
|
voiceCurrentTime={voiceCurrentTime}
|
|
voicePlaybackRate={voicePlaybackRate}
|
|
toggleVoiceSpeed={toggleVoiceSpeed}
|
|
formatTime={formatTime}
|
|
setPreviewImage={setPreviewImage}
|
|
replyingTo={replyingTo}
|
|
setReplyingTo={setReplyingTo}
|
|
replyText={replyText}
|
|
setReplyText={setReplyText}
|
|
replyRangeStart={replyRangeStart}
|
|
replyRangeEnd={replyRangeEnd}
|
|
toggleReplyRangeSelection={toggleReplyRangeSelection}
|
|
clearReplyRangeSelection={clearReplyRangeSelection}
|
|
handleReplyComment={commentsActions.onReplyComment}
|
|
startReplyRecording={startReplyRecording}
|
|
isReplyRecording={isReplyRecording}
|
|
replyRecordingTime={replyRecordingTime}
|
|
stopReplyRecording={stopReplyRecording}
|
|
cancelReplyRecording={cancelReplyRecording}
|
|
replyAudioBlob={replyAudioBlob}
|
|
replyImageFiles={replyImageFiles}
|
|
replyImageInputRef={replyImageInputRef}
|
|
removeImageFile={removeImageFile}
|
|
handleImageSelect={handleImageSelect}
|
|
handlePaste={handlePaste}
|
|
handleDrop={handleDrop}
|
|
submitReplyWithMedia={commentsActions.onSubmitReplyWithMedia}
|
|
isSubmittingReply={isSubmittingReply}
|
|
isUploadingReplyAudio={isUploadingReplyAudio}
|
|
isUploadingReplyImage={isUploadingReplyImage}
|
|
assets={assets}
|
|
onAssetMentionClick={handleAssetMentionClick}
|
|
activePane={activeSidePane}
|
|
setActivePane={setActiveSidePane}
|
|
assetsPane={
|
|
<AssetsPane
|
|
videoId={videoId}
|
|
assets={assets}
|
|
isLoadingAssets={isLoadingAssets}
|
|
isCreatingAsset={isCreatingAsset}
|
|
deletingAssetIds={deletingAssetIds}
|
|
activeDownloadAssetId={activeDownloadAssetId}
|
|
canUploadAssets={canUploadAssets}
|
|
canDownloadAssets={canDownloadAssets}
|
|
getGuestUploadToken={getGuestUploadToken}
|
|
createAsset={createAsset}
|
|
deleteAsset={deleteAsset}
|
|
downloadAsset={downloadAsset}
|
|
hasMoreAssets={hasMoreAssets}
|
|
isLoadingMoreAssets={isLoadingMoreAssets}
|
|
loadMoreAssets={loadMoreAssets}
|
|
highlightedAssetId={highlightedAssetId}
|
|
onHighlightedAssetHandled={() => setHighlightedAssetId(null)}
|
|
directUploadProvider={directUploadProvider}
|
|
/>
|
|
}
|
|
composer={
|
|
<CommentComposer
|
|
isRecording={isRecording}
|
|
recordingTime={recordingTime}
|
|
stopRecording={stopRecording}
|
|
cancelRecording={cancelRecording}
|
|
audioBlob={audioBlob}
|
|
imageFiles={imageFiles}
|
|
imageInputRef={imageInputRef}
|
|
removeImageFile={(index) => removeImageFile(index, 'comment')}
|
|
commentText={commentText}
|
|
setCommentText={setCommentText}
|
|
commentRangeStart={commentRangeStart}
|
|
commentRangeEnd={commentRangeEnd}
|
|
toggleCommentRangeSelection={toggleCommentRangeSelection}
|
|
clearCommentRangeSelection={clearCommentRangeSelection}
|
|
playVoice={playVoice}
|
|
playingVoiceId={playingVoiceId}
|
|
voiceProgress={voiceProgress}
|
|
voiceCurrentTime={voiceCurrentTime}
|
|
formatTime={formatTime}
|
|
toggleVoiceSpeed={toggleVoiceSpeed}
|
|
voicePlaybackRate={voicePlaybackRate}
|
|
submitCommentWithMedia={composerActions.onSubmitCommentWithMedia}
|
|
isUploadingAudio={isUploadingAudio}
|
|
isUploadingImage={isUploadingImage}
|
|
annotationStrokes={annotationStrokes}
|
|
isAnnotating={isAnnotating}
|
|
setAnnotationStrokes={setAnnotationStrokes}
|
|
setIsAnnotating={setIsAnnotating}
|
|
handleAddComment={composerActions.onAddComment}
|
|
isSubmittingComment={isSubmittingComment}
|
|
startRecording={startRecording}
|
|
handlePaste={handlePaste}
|
|
handleImageSelect={handleImageSelect}
|
|
availableTags={availableTags}
|
|
selectedTagId={selectedTagId}
|
|
setSelectedTagId={setSelectedTagId}
|
|
canManageTags={!!video.canManageTags}
|
|
projectId={projectId}
|
|
pauseVideoForAnnotation={composerActions.onPauseVideoForAnnotation}
|
|
assets={assets}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<ImagePreviewDialog previewImage={previewImage} onClose={() => setPreviewImage(null)} />
|
|
|
|
<CompareVersionsDialog
|
|
open={showCompareDialog}
|
|
onOpenChange={setShowCompareDialog}
|
|
versions={video.versions}
|
|
selectedCompareVersions={selectedCompareVersions}
|
|
onToggleVersion={compareActions.onToggleVersion}
|
|
onCompare={compareActions.onCompare}
|
|
/>
|
|
|
|
{mode === 'dashboard' ? (
|
|
<>
|
|
<ApprovalRequestDialog
|
|
open={showApprovalRequestDialog}
|
|
onOpenChange={setShowApprovalRequestDialog}
|
|
candidates={approvalCandidates}
|
|
currentUserId={currentUserId}
|
|
activePendingRequest={activePendingRequest}
|
|
isLoadingCandidates={isLoadingApprovalCandidates}
|
|
isSubmittingRequest={isSubmittingApprovalRequest}
|
|
error={approvalError}
|
|
onRefreshCandidates={fetchApprovalCandidates}
|
|
onCreateRequest={createApprovalRequest}
|
|
/>
|
|
<ApprovalRequestsPanel
|
|
open={showApprovalsPanel}
|
|
onOpenChange={setShowApprovalsPanel}
|
|
requests={approvalRequests}
|
|
currentUserId={currentUserId}
|
|
canRequestApproval={canRequestApproval}
|
|
onOpenApprovalRequest={handleOpenApprovalRequestDialog}
|
|
isLoadingRequests={isLoadingApprovals}
|
|
isSubmittingDecision={isSubmittingApprovalDecision}
|
|
isCancelingRequest={isCancelingApprovalRequest}
|
|
error={approvalError}
|
|
onRefresh={fetchApprovalRequests}
|
|
onSubmitDecision={submitApprovalDecision}
|
|
onCancelRequest={cancelApprovalRequest}
|
|
/>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|