mirror of
https://github.com/yusufipk/OpenFrame.git
synced 2026-09-11 17:46:06 +00:00
feat(video-card): add edit, versioning, and delete functionality with dialogs
- Implemented edit dialog for updating video title and description. - Added functionality to create new video versions with URL validation. - Included delete confirmation dialog for video removal. - Enhanced UI with loading indicators and error handling. - Updated video card layout for better user interaction. feat(youtube): extend YT namespace with playback rate methods - Added methods to set and get playback rate. - Included method to retrieve available playback rates.
This commit is contained in:
Yusuf İpek
@@ -92,7 +92,7 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
|
||||
// Check access
|
||||
const isOwner = session?.user?.id === project.ownerId;
|
||||
const isMember = project.members.length > 0;
|
||||
const isPublicOrLink = project.visibility !== 'PRIVATE';
|
||||
const isPublic = project.visibility === 'PUBLIC';
|
||||
|
||||
// Check workspace membership
|
||||
let isWorkspaceMember = false;
|
||||
@@ -116,7 +116,7 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOwner && !isMember && !isPublicOrLink && !isWorkspaceMember) {
|
||||
if (!isOwner && !isMember && !isPublic && !isWorkspaceMember) {
|
||||
redirect('/dashboard');
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,281 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams, useSearchParams } from 'next/navigation';
|
||||
import {
|
||||
ArrowLeft,
|
||||
MessageSquare,
|
||||
ChevronDown,
|
||||
Loader2,
|
||||
GitCompareArrows,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface Version {
|
||||
id: string;
|
||||
versionNumber: number;
|
||||
versionLabel: string | null;
|
||||
providerId: string;
|
||||
videoId: string;
|
||||
originalUrl: string;
|
||||
title: string | null;
|
||||
thumbnailUrl: string | null;
|
||||
duration: number | null;
|
||||
isActive: boolean;
|
||||
_count: { comments: number };
|
||||
}
|
||||
|
||||
interface VideoData {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
projectId: string;
|
||||
project: {
|
||||
name: string;
|
||||
};
|
||||
versions: Version[];
|
||||
}
|
||||
|
||||
function getEmbedUrl(version: Version) {
|
||||
if (version.providerId === 'youtube') {
|
||||
return `https://www.youtube.com/embed/${version.videoId}?enablejsapi=1&rel=0&modestbranding=1`;
|
||||
}
|
||||
if (version.providerId === 'vimeo') {
|
||||
return `https://player.vimeo.com/video/${version.videoId}`;
|
||||
}
|
||||
return version.originalUrl;
|
||||
}
|
||||
|
||||
export default function CompareVersionsPage() {
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
const projectId = params.projectId as string;
|
||||
const videoId = params.videoId as string;
|
||||
|
||||
const [video, setVideo] = useState<VideoData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [leftVersionId, setLeftVersionId] = useState<string | null>(null);
|
||||
const [rightVersionId, setRightVersionId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchVideo() {
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${projectId}/videos/${videoId}`);
|
||||
if (!res.ok) {
|
||||
setError('Failed to load video');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
setVideo(data);
|
||||
|
||||
// Set initial versions from query params or defaults
|
||||
const leftParam = searchParams.get('left');
|
||||
const rightParam = searchParams.get('right');
|
||||
|
||||
if (data.versions.length >= 2) {
|
||||
// Sort versions ascending for comparison (older on left, newer on right)
|
||||
const sorted = [...data.versions].sort(
|
||||
(a: Version, b: Version) => a.versionNumber - b.versionNumber
|
||||
);
|
||||
setLeftVersionId(
|
||||
leftParam && sorted.find((v: Version) => v.id === leftParam)
|
||||
? leftParam
|
||||
: sorted[sorted.length - 2].id
|
||||
);
|
||||
setRightVersionId(
|
||||
rightParam && sorted.find((v: Version) => v.id === rightParam)
|
||||
? rightParam
|
||||
: sorted[sorted.length - 1].id
|
||||
);
|
||||
} else if (data.versions.length === 1) {
|
||||
setLeftVersionId(data.versions[0].id);
|
||||
setRightVersionId(data.versions[0].id);
|
||||
}
|
||||
} catch {
|
||||
setError('Failed to load video');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchVideo();
|
||||
}, [projectId, videoId, searchParams]);
|
||||
|
||||
const leftVersion = video?.versions.find((v) => v.id === leftVersionId);
|
||||
const rightVersion = video?.versions.find((v) => v.id === rightVersionId);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="h-screen flex items-center justify-center bg-background">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !video || video.versions.length < 2) {
|
||||
return (
|
||||
<div className="h-screen flex items-center justify-center bg-background">
|
||||
<div className="text-center">
|
||||
<p className="text-muted-foreground mb-4">
|
||||
{error || 'Need at least 2 versions to compare'}
|
||||
</p>
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/projects/${projectId}/videos/${videoId}`}>Back to Video</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-background overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href={`/projects/${projectId}/videos/${videoId}`}
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||
Back to Video
|
||||
</Link>
|
||||
<Separator orientation="vertical" className="h-5" />
|
||||
<div className="flex items-center gap-2">
|
||||
<GitCompareArrows className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">Compare Versions</span>
|
||||
<span className="text-xs text-muted-foreground">• {video.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Side-by-side comparison */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Left panel */}
|
||||
<div className="flex-1 flex flex-col border-r">
|
||||
<div className="shrink-0 flex items-center justify-between p-3 border-b bg-muted/30">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<Badge variant="secondary" className="mr-2">
|
||||
v{leftVersion?.versionNumber}
|
||||
</Badge>
|
||||
{leftVersion?.versionLabel || `Version ${leftVersion?.versionNumber}`}
|
||||
<ChevronDown className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{video.versions.map((v) => (
|
||||
<DropdownMenuItem
|
||||
key={v.id}
|
||||
onClick={() => setLeftVersionId(v.id)}
|
||||
disabled={v.id === rightVersionId}
|
||||
>
|
||||
<Badge
|
||||
variant={v.id === leftVersionId ? 'default' : 'secondary'}
|
||||
className="mr-2"
|
||||
>
|
||||
v{v.versionNumber}
|
||||
</Badge>
|
||||
{v.versionLabel || `Version ${v.versionNumber}`}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
{leftVersion?._count.comments || 0} comments
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 bg-black flex items-center justify-center p-2">
|
||||
{leftVersion && (
|
||||
<iframe
|
||||
src={getEmbedUrl(leftVersion)}
|
||||
className="w-full h-full"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{leftVersion?.duration && (
|
||||
<div className="shrink-0 px-3 py-2 border-t text-xs text-muted-foreground text-center">
|
||||
Duration: {Math.floor(leftVersion.duration / 60)}:
|
||||
{(leftVersion.duration % 60).toString().padStart(2, '0')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right panel */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="shrink-0 flex items-center justify-between p-3 border-b bg-muted/30">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<Badge variant="secondary" className="mr-2">
|
||||
v{rightVersion?.versionNumber}
|
||||
</Badge>
|
||||
{rightVersion?.versionLabel || `Version ${rightVersion?.versionNumber}`}
|
||||
<ChevronDown className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{video.versions.map((v) => (
|
||||
<DropdownMenuItem
|
||||
key={v.id}
|
||||
onClick={() => setRightVersionId(v.id)}
|
||||
disabled={v.id === leftVersionId}
|
||||
>
|
||||
<Badge
|
||||
variant={v.id === rightVersionId ? 'default' : 'secondary'}
|
||||
className="mr-2"
|
||||
>
|
||||
v{v.versionNumber}
|
||||
</Badge>
|
||||
{v.versionLabel || `Version ${v.versionNumber}`}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
{rightVersion?._count.comments || 0} comments
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 bg-black flex items-center justify-center p-2">
|
||||
{rightVersion && (
|
||||
<iframe
|
||||
src={getEmbedUrl(rightVersion)}
|
||||
className="w-full h-full"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{rightVersion?.duration && (
|
||||
<div className="shrink-0 px-3 py-2 border-t text-xs text-muted-foreground text-center">
|
||||
Duration: {Math.floor(rightVersion.duration / 60)}:
|
||||
{(rightVersion.duration % 60).toString().padStart(2, '0')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { ArrowLeft, Loader2, Link as LinkIcon, AlertCircle, CheckCircle2 } from 'lucide-react';
|
||||
@@ -9,31 +9,59 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { parseVideoUrl, getThumbnailUrl, type VideoSource } from '@/lib/video-providers';
|
||||
import { parseVideoUrl, fetchVideoMetadata, getThumbnailUrl, type VideoSource } from '@/lib/video-providers';
|
||||
|
||||
export default function NewVideoPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const projectId = params.projectId as string;
|
||||
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isFetchingMeta, setIsFetchingMeta] = useState(false);
|
||||
const [videoUrl, setVideoUrl] = useState('');
|
||||
const [videoSource, setVideoSource] = useState<VideoSource | null>(null);
|
||||
const [urlError, setUrlError] = useState('');
|
||||
const [submitError, setSubmitError] = useState('');
|
||||
const [formData, setFormData] = useState({
|
||||
title: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
// Auto-fetch metadata when a valid video source is detected
|
||||
useEffect(() => {
|
||||
if (!videoSource) return;
|
||||
|
||||
let cancelled = false;
|
||||
setIsFetchingMeta(true);
|
||||
|
||||
fetchVideoMetadata(videoSource).then((meta) => {
|
||||
if (cancelled || !meta) {
|
||||
setIsFetchingMeta(false);
|
||||
return;
|
||||
}
|
||||
if (!formData.title) {
|
||||
setFormData((prev) => ({ ...prev, title: meta.title }));
|
||||
}
|
||||
setVideoSource((prev) => (prev ? { ...prev, metadata: meta } : prev));
|
||||
setIsFetchingMeta(false);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [videoSource?.videoId, videoSource?.providerId]);
|
||||
|
||||
const handleUrlChange = (url: string) => {
|
||||
setVideoUrl(url);
|
||||
setUrlError('');
|
||||
|
||||
setSubmitError('');
|
||||
|
||||
if (!url.trim()) {
|
||||
setVideoSource(null);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const source = parseVideoUrl(url);
|
||||
if (source) {
|
||||
setVideoSource(source);
|
||||
@@ -47,31 +75,43 @@ export default function NewVideoPage() {
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
if (!videoSource) {
|
||||
setUrlError('Please enter a valid video URL');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setIsLoading(true);
|
||||
setSubmitError('');
|
||||
|
||||
try {
|
||||
// TODO: Implement actual video creation
|
||||
// const response = await fetch(`/api/projects/${projectId}/videos`, {
|
||||
// method: 'POST',
|
||||
// headers: { 'Content-Type': 'application/json' },
|
||||
// body: JSON.stringify({
|
||||
// ...formData,
|
||||
// ...videoSource,
|
||||
// }),
|
||||
// });
|
||||
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
const thumbnailUrl = getThumbnailUrl(videoSource, 'large');
|
||||
const title = formData.title.trim() || videoSource.metadata?.title || 'Untitled Video';
|
||||
|
||||
const response = await fetch(`/api/projects/${projectId}/videos`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title,
|
||||
description: formData.description.trim() || null,
|
||||
videoUrl: videoSource.originalUrl,
|
||||
providerId: videoSource.providerId,
|
||||
videoId: videoSource.videoId,
|
||||
thumbnailUrl,
|
||||
duration: videoSource.metadata?.duration || null,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
setSubmitError(data.error || 'Failed to add video');
|
||||
return;
|
||||
}
|
||||
|
||||
router.push(`/projects/${projectId}`);
|
||||
} catch (error) {
|
||||
console.error('Failed to add video:', error);
|
||||
setSubmitError('An unexpected error occurred');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@@ -80,9 +120,9 @@ export default function NewVideoPage() {
|
||||
const thumbnailUrl = videoSource ? getThumbnailUrl(videoSource, 'large') : null;
|
||||
|
||||
return (
|
||||
<div className="container max-w-2xl py-8">
|
||||
<div className="container max-w-2xl mx-auto py-8">
|
||||
<div className="mb-6">
|
||||
<Link
|
||||
<Link
|
||||
href={`/projects/${projectId}`}
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
@@ -115,19 +155,19 @@ export default function NewVideoPage() {
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* URL validation feedback */}
|
||||
|
||||
{urlError && (
|
||||
<p className="text-sm text-destructive flex items-center gap-1">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{urlError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
|
||||
{videoSource && (
|
||||
<p className="text-sm text-green-600 flex items-center gap-1">
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
{videoSource.providerId.charAt(0).toUpperCase() + videoSource.providerId.slice(1)} video detected
|
||||
{isFetchingMeta && ' — fetching metadata...'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -151,9 +191,9 @@ export default function NewVideoPage() {
|
||||
<Label htmlFor="title">Title</Label>
|
||||
<Input
|
||||
id="title"
|
||||
placeholder="Video title (will auto-fill from video if empty)"
|
||||
placeholder={isFetchingMeta ? 'Fetching title...' : 'Video title (will auto-fill from video if empty)'}
|
||||
value={formData.title}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
@@ -168,12 +208,19 @@ export default function NewVideoPage() {
|
||||
id="description"
|
||||
placeholder="Add context about this video..."
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
|
||||
rows={3}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{submitError && (
|
||||
<p className="text-sm text-destructive flex items-center gap-1">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{submitError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button type="submit" disabled={isLoading || !videoSource}>
|
||||
{isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
|
||||
@@ -44,9 +44,9 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
|
||||
const project = comment.version.video.project;
|
||||
const isOwner = session?.user?.id === project.ownerId;
|
||||
const isMember = project.members.length > 0;
|
||||
const isPublicOrLink = project.visibility !== 'PRIVATE';
|
||||
const isPublic = project.visibility === 'PUBLIC';
|
||||
|
||||
if (!isOwner && !isMember && !isPublicOrLink) {
|
||||
if (!isOwner && !isMember && !isPublic) {
|
||||
return NextResponse.json({ error: 'Access denied' }, { status: 403 });
|
||||
}
|
||||
|
||||
|
||||
@@ -46,9 +46,9 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
|
||||
// Check access
|
||||
const isOwner = session?.user?.id === video.project.ownerId;
|
||||
const isMember = video.project.members.length > 0;
|
||||
const isPublicOrLink = video.project.visibility !== 'PRIVATE';
|
||||
const isPublic = video.project.visibility === 'PUBLIC';
|
||||
|
||||
if (!isOwner && !isMember && !isPublicOrLink) {
|
||||
if (!isOwner && !isMember && !isPublic) {
|
||||
return NextResponse.json({ error: 'Access denied' }, { status: 403 });
|
||||
}
|
||||
|
||||
|
||||
@@ -27,9 +27,9 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
|
||||
|
||||
const isOwner = session?.user?.id === video.project.ownerId;
|
||||
const isMember = video.project.members.length > 0;
|
||||
const isPublicOrLink = video.project.visibility !== 'PRIVATE';
|
||||
const isPublic = video.project.visibility === 'PUBLIC';
|
||||
|
||||
if (!isOwner && !isMember && !isPublicOrLink) {
|
||||
if (!isOwner && !isMember && !isPublic) {
|
||||
return NextResponse.json({ error: 'Access denied' }, { status: 403 });
|
||||
}
|
||||
|
||||
|
||||
@@ -24,9 +24,9 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
|
||||
|
||||
const isOwner = session?.user?.id === project.ownerId;
|
||||
const isMember = project.members.length > 0;
|
||||
const isPublicOrLink = project.visibility !== 'PRIVATE';
|
||||
const isPublic = project.visibility === 'PUBLIC';
|
||||
|
||||
if (!isOwner && !isMember && !isPublicOrLink) {
|
||||
if (!isOwner && !isMember && !isPublic) {
|
||||
return NextResponse.json({ error: 'Access denied' }, { status: 403 });
|
||||
}
|
||||
|
||||
|
||||
@@ -34,9 +34,9 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
|
||||
const project = version.video.project;
|
||||
const isOwner = session?.user?.id === project.ownerId;
|
||||
const isMember = project.members.length > 0;
|
||||
const isPublicOrLink = project.visibility !== 'PRIVATE';
|
||||
const isPublic = project.visibility === 'PUBLIC';
|
||||
|
||||
if (!isOwner && !isMember && !isPublicOrLink) {
|
||||
if (!isOwner && !isMember && !isPublic) {
|
||||
return NextResponse.json({ error: 'Access denied' }, { status: 403 });
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { db } from '@/lib/db';
|
||||
import { auth } from '@/lib/auth';
|
||||
|
||||
type RouteParams = { params: Promise<{ videoId: string }> };
|
||||
|
||||
// GET /api/watch/[videoId] - Public watch endpoint (no projectId needed)
|
||||
export async function GET(request: NextRequest, { params }: RouteParams) {
|
||||
try {
|
||||
const session = await auth();
|
||||
const { videoId } = await params;
|
||||
|
||||
const video = await db.video.findUnique({
|
||||
where: { id: videoId },
|
||||
include: {
|
||||
project: {
|
||||
include: {
|
||||
members: { where: { userId: session?.user?.id || '' } },
|
||||
},
|
||||
},
|
||||
versions: {
|
||||
orderBy: { versionNumber: 'desc' },
|
||||
include: {
|
||||
comments: {
|
||||
orderBy: { timestamp: 'asc' },
|
||||
where: { parentId: null },
|
||||
include: {
|
||||
author: { select: { id: true, name: true, image: true } },
|
||||
replies: {
|
||||
orderBy: { createdAt: 'asc' },
|
||||
include: {
|
||||
author: { select: { id: true, name: true, image: true } },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
_count: { select: { comments: true } },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!video) {
|
||||
return NextResponse.json({ error: 'Video not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
// Check access
|
||||
const isOwner = session?.user?.id === video.project.ownerId;
|
||||
const isMember = video.project.members.length > 0;
|
||||
const isPublic = video.project.visibility === 'PUBLIC';
|
||||
|
||||
if (!isOwner && !isMember && !isPublic) {
|
||||
return NextResponse.json({ error: 'Access denied' }, { status: 403 });
|
||||
}
|
||||
|
||||
return NextResponse.json(video);
|
||||
} catch (error) {
|
||||
console.error('Error fetching video:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch video' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
+426
-331
@@ -3,13 +3,12 @@
|
||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Play,
|
||||
Pause,
|
||||
Volume2,
|
||||
import {
|
||||
ArrowLeft,
|
||||
Play,
|
||||
Pause,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
Maximize,
|
||||
MessageSquare,
|
||||
Mic,
|
||||
Send,
|
||||
@@ -18,13 +17,12 @@ import {
|
||||
Circle,
|
||||
ChevronDown,
|
||||
MoreVertical,
|
||||
User,
|
||||
SkipBack,
|
||||
SkipForward
|
||||
SkipForward,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
@@ -36,66 +34,51 @@ import {
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// Mock data
|
||||
const mockVideo = {
|
||||
id: 'v1',
|
||||
title: 'Main Product Walkthrough',
|
||||
description: 'Complete walkthrough of the new product features',
|
||||
projectId: '1',
|
||||
projectName: 'Product Demo v2',
|
||||
versions: [
|
||||
{ id: 'ver3', number: 3, label: 'Final Cut', isActive: true },
|
||||
{ id: 'ver2', number: 2, label: 'Review Round 2', isActive: false },
|
||||
{ id: 'ver1', number: 1, label: 'First Draft', isActive: false },
|
||||
],
|
||||
currentVersion: {
|
||||
id: 'ver3',
|
||||
number: 3,
|
||||
label: 'Final Cut',
|
||||
providerId: 'youtube',
|
||||
videoId: 'dQw4w9WgXcQ', // Sample video
|
||||
duration: 342, // 5:42
|
||||
},
|
||||
};
|
||||
interface Version {
|
||||
id: string;
|
||||
versionNumber: number;
|
||||
versionLabel: string | null;
|
||||
providerId: string;
|
||||
videoId: string;
|
||||
originalUrl: string;
|
||||
title: string | null;
|
||||
thumbnailUrl: string | null;
|
||||
duration: number | null;
|
||||
isActive: boolean;
|
||||
_count: { comments: number };
|
||||
}
|
||||
|
||||
const mockComments = [
|
||||
{
|
||||
id: 'c1',
|
||||
content: 'The transition here feels a bit abrupt. Can we add a fade?',
|
||||
timestamp: 45.5,
|
||||
author: { name: 'Sarah Chen', image: null },
|
||||
createdAt: '2 hours ago',
|
||||
isResolved: false,
|
||||
replies: [
|
||||
{
|
||||
id: 'c1r1',
|
||||
content: 'Good catch! I\'ll smooth that out in the next version.',
|
||||
author: { name: 'Mike Johnson', image: null },
|
||||
createdAt: '1 hour ago',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'c2',
|
||||
content: 'Love this section! The pacing is perfect.',
|
||||
timestamp: 120,
|
||||
author: { name: 'Alex Rivera', image: null },
|
||||
createdAt: '5 hours ago',
|
||||
isResolved: true,
|
||||
replies: [],
|
||||
},
|
||||
{
|
||||
id: 'c3',
|
||||
content: 'Can we add some background music here?',
|
||||
timestamp: 200,
|
||||
voiceUrl: '/mock-voice.mp3', // Mock voice comment
|
||||
voiceDuration: 8.5,
|
||||
author: { name: 'Jordan Lee', image: null },
|
||||
createdAt: '1 day ago',
|
||||
isResolved: false,
|
||||
replies: [],
|
||||
},
|
||||
];
|
||||
interface Comment {
|
||||
id: string;
|
||||
content: string | null;
|
||||
timestamp: number;
|
||||
voiceUrl: string | null;
|
||||
voiceDuration: number | null;
|
||||
isResolved: boolean;
|
||||
createdAt: string;
|
||||
author: { id: string; name: string | null; image: string | null } | null;
|
||||
guestName: string | null;
|
||||
replies: {
|
||||
id: string;
|
||||
content: string | null;
|
||||
createdAt: string;
|
||||
author: { id: string; name: string | null; image: string | null } | null;
|
||||
guestName: string | null;
|
||||
}[];
|
||||
}
|
||||
|
||||
interface VideoData {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
projectId: string;
|
||||
project: {
|
||||
name: string;
|
||||
ownerId: string;
|
||||
members: { role: string }[];
|
||||
};
|
||||
versions: (Version & { comments: Comment[] })[];
|
||||
}
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
@@ -103,32 +86,63 @@ function formatTime(seconds: number): string {
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
export default function VideoPage() {
|
||||
export default function WatchPage() {
|
||||
const params = useParams();
|
||||
const videoId = params.videoId as string;
|
||||
|
||||
// In real app, fetch projectId from video data
|
||||
const projectId = mockVideo.projectId;
|
||||
|
||||
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
const playerRef = useRef<any>(null);
|
||||
const playerRef = useRef<YT.Player | null>(null);
|
||||
const timelineRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [video, setVideo] = useState<VideoData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [activeVersionId, setActiveVersionId] = useState<string | null>(null);
|
||||
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [duration, setDuration] = useState(mockVideo.currentVersion.duration);
|
||||
const [isMuted, setIsMuted] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
|
||||
const [commentText, setCommentText] = useState('');
|
||||
const [isSubmittingComment, setIsSubmittingComment] = useState(false);
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [selectedTimestamp, setSelectedTimestamp] = useState<number | null>(null);
|
||||
const [comments, setComments] = useState(mockComments);
|
||||
const [showResolved, setShowResolved] = useState(false);
|
||||
|
||||
// Fetch video data
|
||||
useEffect(() => {
|
||||
async function fetchVideo() {
|
||||
try {
|
||||
const res = await fetch(`/api/watch/${videoId}`);
|
||||
if (!res.ok) {
|
||||
setError('Video not found or access denied');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
setVideo(data);
|
||||
const active = data.versions.find((v: Version) => v.isActive) || data.versions[0];
|
||||
if (active) setActiveVersionId(active.id);
|
||||
} catch {
|
||||
setError('Failed to load video');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchVideo();
|
||||
}, [videoId]);
|
||||
|
||||
const activeVersion = video?.versions.find((v) => v.id === activeVersionId);
|
||||
const comments = activeVersion?.comments || [];
|
||||
const filteredComments = comments.filter((c) => showResolved || !c.isResolved);
|
||||
const duration = activeVersion?.duration || 300;
|
||||
|
||||
// Load YouTube iframe API
|
||||
useEffect(() => {
|
||||
// Load YouTube iframe API script
|
||||
if (!activeVersion || activeVersion.providerId !== 'youtube') return;
|
||||
|
||||
if (!window.YT) {
|
||||
const tag = document.createElement('script');
|
||||
tag.src = 'https://www.youtube.com/iframe_api';
|
||||
@@ -136,36 +150,33 @@ export default function VideoPage() {
|
||||
firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag);
|
||||
}
|
||||
|
||||
// Initialize player when API is ready
|
||||
const onYouTubeIframeAPIReady = () => {
|
||||
playerRef.current = new window.YT.Player(iframeRef.current, {
|
||||
const initPlayer = () => {
|
||||
if (!iframeRef.current) return;
|
||||
playerRef.current = new YT.Player(iframeRef.current, {
|
||||
events: {
|
||||
onReady: () => {
|
||||
setIsReady(true);
|
||||
setDuration(playerRef.current.getDuration() || mockVideo.currentVersion.duration);
|
||||
},
|
||||
onStateChange: (event: any) => {
|
||||
setIsPlaying(event.data === window.YT.PlayerState.PLAYING);
|
||||
onReady: () => setIsReady(true),
|
||||
onStateChange: (event: YT.OnStateChangeEvent) => {
|
||||
setIsPlaying(event.data === YT.PlayerState.PLAYING);
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
if (window.YT && window.YT.Player) {
|
||||
onYouTubeIframeAPIReady();
|
||||
if (window.YT?.Player) {
|
||||
initPlayer();
|
||||
} else {
|
||||
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
|
||||
window.onYouTubeIframeAPIReady = initPlayer;
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.onYouTubeIframeAPIReady = undefined;
|
||||
};
|
||||
}, []);
|
||||
}, [activeVersion]);
|
||||
|
||||
// Update current time periodically
|
||||
useEffect(() => {
|
||||
if (!isReady || !playerRef.current) return;
|
||||
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (playerRef.current?.getCurrentTime && !isDragging) {
|
||||
setCurrentTime(playerRef.current.getCurrentTime());
|
||||
@@ -175,8 +186,6 @@ export default function VideoPage() {
|
||||
return () => clearInterval(interval);
|
||||
}, [isReady, isDragging]);
|
||||
|
||||
const filteredComments = comments.filter(c => showResolved || !c.isResolved);
|
||||
|
||||
const handlePlayPause = useCallback(() => {
|
||||
if (!playerRef.current) return;
|
||||
if (isPlaying) {
|
||||
@@ -193,28 +202,37 @@ export default function VideoPage() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleTimelineClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!timelineRef.current) return;
|
||||
const rect = timelineRef.current.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const percentage = Math.max(0, Math.min(1, x / rect.width));
|
||||
const newTime = percentage * duration;
|
||||
handleSeekToTimestamp(newTime);
|
||||
}, [duration, handleSeekToTimestamp]);
|
||||
const handleTimelineClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!timelineRef.current) return;
|
||||
const rect = timelineRef.current.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const percentage = Math.max(0, Math.min(1, x / rect.width));
|
||||
const newTime = percentage * duration;
|
||||
handleSeekToTimestamp(newTime);
|
||||
},
|
||||
[duration, handleSeekToTimestamp]
|
||||
);
|
||||
|
||||
const handleTimelineMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
setIsDragging(true);
|
||||
handleTimelineClick(e);
|
||||
}, [handleTimelineClick]);
|
||||
const handleTimelineMouseDown = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
setIsDragging(true);
|
||||
handleTimelineClick(e);
|
||||
},
|
||||
[handleTimelineClick]
|
||||
);
|
||||
|
||||
const handleTimelineMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!isDragging || !timelineRef.current) return;
|
||||
const rect = timelineRef.current.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const percentage = Math.max(0, Math.min(1, x / rect.width));
|
||||
const newTime = percentage * duration;
|
||||
setCurrentTime(newTime);
|
||||
}, [isDragging, duration]);
|
||||
const handleTimelineMouseMove = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!isDragging || !timelineRef.current) return;
|
||||
const rect = timelineRef.current.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const percentage = Math.max(0, Math.min(1, x / rect.width));
|
||||
const newTime = percentage * duration;
|
||||
setCurrentTime(newTime);
|
||||
},
|
||||
[isDragging, duration]
|
||||
);
|
||||
|
||||
const handleTimelineMouseUp = useCallback(() => {
|
||||
if (isDragging) {
|
||||
@@ -233,53 +251,132 @@ export default function VideoPage() {
|
||||
setIsMuted(!isMuted);
|
||||
}, [isMuted]);
|
||||
|
||||
const handleSkip = useCallback((seconds: number) => {
|
||||
const newTime = Math.max(0, Math.min(duration, currentTime + seconds));
|
||||
handleSeekToTimestamp(newTime);
|
||||
}, [currentTime, duration, handleSeekToTimestamp]);
|
||||
const handleSkip = useCallback(
|
||||
(seconds: number) => {
|
||||
const newTime = Math.max(0, Math.min(duration, currentTime + seconds));
|
||||
handleSeekToTimestamp(newTime);
|
||||
},
|
||||
[currentTime, duration, handleSeekToTimestamp]
|
||||
);
|
||||
|
||||
const handleAddComment = useCallback(() => {
|
||||
if (!commentText.trim() && !isRecording) return;
|
||||
|
||||
const newComment = {
|
||||
id: `c${Date.now()}`,
|
||||
content: commentText,
|
||||
timestamp: selectedTimestamp ?? currentTime,
|
||||
author: { name: 'You', image: null },
|
||||
createdAt: 'Just now',
|
||||
isResolved: false,
|
||||
replies: [],
|
||||
};
|
||||
|
||||
setComments(prev => [...prev, newComment]);
|
||||
setCommentText('');
|
||||
setSelectedTimestamp(null);
|
||||
}, [commentText, currentTime, selectedTimestamp, isRecording]);
|
||||
const handleAddComment = useCallback(async () => {
|
||||
if (!commentText.trim() || !activeVersion) return;
|
||||
setIsSubmittingComment(true);
|
||||
|
||||
const handleResolveComment = useCallback((commentId: string) => {
|
||||
setComments(prev => prev.map(c =>
|
||||
c.id === commentId ? { ...c, isResolved: !c.isResolved } : c
|
||||
));
|
||||
}, []);
|
||||
try {
|
||||
const res = await fetch(`/api/versions/${activeVersion.id}/comments`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
content: commentText,
|
||||
timestamp: selectedTimestamp ?? currentTime,
|
||||
}),
|
||||
});
|
||||
|
||||
// Hide YouTube controls, enable JS API
|
||||
const embedUrl = `https://www.youtube.com/embed/${mockVideo.currentVersion.videoId}?enablejsapi=1&rel=0&modestbranding=1&controls=0&showinfo=0&iv_load_policy=3&disablekb=1`;
|
||||
if (res.ok) {
|
||||
const newComment = await res.json();
|
||||
setVideo((prev) => {
|
||||
if (!prev) return prev;
|
||||
return {
|
||||
...prev,
|
||||
versions: prev.versions.map((v) =>
|
||||
v.id === activeVersionId
|
||||
? { ...v, comments: [...v.comments, { ...newComment, replies: newComment.replies || [] }] }
|
||||
: v
|
||||
),
|
||||
};
|
||||
});
|
||||
setCommentText('');
|
||||
setSelectedTimestamp(null);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to add comment:', err);
|
||||
} finally {
|
||||
setIsSubmittingComment(false);
|
||||
}
|
||||
}, [commentText, currentTime, selectedTimestamp, activeVersion, activeVersionId]);
|
||||
|
||||
const handleResolveComment = useCallback(
|
||||
async (commentId: string, currentlyResolved: boolean) => {
|
||||
try {
|
||||
const res = await fetch(`/api/comments/${commentId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ isResolved: !currentlyResolved }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setVideo((prev) => {
|
||||
if (!prev) return prev;
|
||||
return {
|
||||
...prev,
|
||||
versions: prev.versions.map((v) =>
|
||||
v.id === activeVersionId
|
||||
? {
|
||||
...v,
|
||||
comments: v.comments.map((c) =>
|
||||
c.id === commentId ? { ...c, isResolved: !c.isResolved } : c
|
||||
),
|
||||
}
|
||||
: v
|
||||
),
|
||||
};
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to resolve comment:', err);
|
||||
}
|
||||
},
|
||||
[activeVersionId]
|
||||
);
|
||||
|
||||
const getEmbedUrl = (version: Version) => {
|
||||
if (version.providerId === 'youtube') {
|
||||
return `https://www.youtube.com/embed/${version.videoId}?enablejsapi=1&rel=0&modestbranding=1&controls=0&showinfo=0&iv_load_policy=3&disablekb=1`;
|
||||
}
|
||||
if (version.providerId === 'vimeo') {
|
||||
return `https://player.vimeo.com/video/${version.videoId}`;
|
||||
}
|
||||
return version.originalUrl;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="h-screen flex items-center justify-center bg-background">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !video || !activeVersion) {
|
||||
return (
|
||||
<div className="h-screen flex items-center justify-center bg-background">
|
||||
<div className="text-center">
|
||||
<p className="text-muted-foreground mb-4">{error || 'Video not found'}</p>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/">Go Home</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const embedUrl = getEmbedUrl(activeVersion);
|
||||
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
className="h-screen flex flex-col bg-background overflow-hidden"
|
||||
onMouseUp={handleTimelineMouseUp}
|
||||
onMouseLeave={() => isDragging && handleTimelineMouseUp()}
|
||||
>
|
||||
{/* Main Content - Full Width Layout */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Video Area */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Compact Header Bar */}
|
||||
<div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href={`/projects/${projectId}`}
|
||||
<Link
|
||||
href={`/projects/${video.projectId}`}
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||
@@ -287,27 +384,38 @@ export default function VideoPage() {
|
||||
</Link>
|
||||
<Separator orientation="vertical" className="h-5" />
|
||||
<div className="min-w-0">
|
||||
<span className="text-sm font-medium">{mockVideo.title}</span>
|
||||
<span className="text-xs text-muted-foreground ml-2">• {mockVideo.projectName}</span>
|
||||
<span className="text-sm font-medium">{video.title}</span>
|
||||
<span className="text-xs text-muted-foreground ml-2">• {video.project.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Version Selector */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<Badge variant="secondary" className="mr-2">v{mockVideo.currentVersion.number}</Badge>
|
||||
{mockVideo.currentVersion.label}
|
||||
<Badge variant="secondary" className="mr-2">
|
||||
v{activeVersion.versionNumber}
|
||||
</Badge>
|
||||
{activeVersion.versionLabel || `Version ${activeVersion.versionNumber}`}
|
||||
<ChevronDown className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{mockVideo.versions.map((version) => (
|
||||
<DropdownMenuItem key={version.id}>
|
||||
<Badge variant={version.isActive ? 'default' : 'secondary'} className="mr-2">
|
||||
v{version.number}
|
||||
{video.versions.map((version) => (
|
||||
<DropdownMenuItem
|
||||
key={version.id}
|
||||
onClick={() => setActiveVersionId(version.id)}
|
||||
>
|
||||
<Badge
|
||||
variant={version.id === activeVersionId ? 'default' : 'secondary'}
|
||||
className="mr-2"
|
||||
>
|
||||
v{version.versionNumber}
|
||||
</Badge>
|
||||
{version.label}
|
||||
{version.versionLabel || `Version ${version.versionNumber}`}
|
||||
<span className="ml-auto text-xs text-muted-foreground">
|
||||
{version._count.comments} comments
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
@@ -315,7 +423,7 @@ export default function VideoPage() {
|
||||
</div>
|
||||
|
||||
{/* Video Player - Maximized */}
|
||||
<div
|
||||
<div
|
||||
className="flex-1 bg-black flex items-center justify-center relative cursor-pointer group"
|
||||
onClick={handlePlayPause}
|
||||
>
|
||||
@@ -327,12 +435,14 @@ export default function VideoPage() {
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
|
||||
|
||||
{/* Play/Pause overlay indicator */}
|
||||
<div className={cn(
|
||||
"absolute inset-0 flex items-center justify-center bg-black/20 transition-opacity",
|
||||
isPlaying ? "opacity-0 group-hover:opacity-100" : "opacity-100"
|
||||
)}>
|
||||
<div
|
||||
className={cn(
|
||||
'absolute inset-0 flex items-center justify-center bg-black/20 transition-opacity',
|
||||
isPlaying ? 'opacity-0 group-hover:opacity-100' : 'opacity-100'
|
||||
)}
|
||||
>
|
||||
<div className="w-16 h-16 rounded-full bg-black/60 flex items-center justify-center">
|
||||
{isPlaying ? (
|
||||
<Pause className="h-8 w-8 text-white" />
|
||||
@@ -343,81 +453,61 @@ export default function VideoPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Custom Controls Bar */}
|
||||
<div className="shrink-0 px-4 py-3 bg-background border-t">
|
||||
{/* Control buttons */}
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={handlePlayPause}
|
||||
>
|
||||
{isPlaying ? (
|
||||
<Pause className="h-4 w-4" />
|
||||
) : (
|
||||
<Play className="h-4 w-4 ml-0.5" />
|
||||
)}
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={handlePlayPause}>
|
||||
{isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4 ml-0.5" />}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleSkip(-10)}
|
||||
>
|
||||
<SkipBack className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleSkip(10)}
|
||||
>
|
||||
<SkipForward className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={handleMuteToggle}
|
||||
>
|
||||
{isMuted ? (
|
||||
<VolumeX className="h-4 w-4" />
|
||||
) : (
|
||||
<Volume2 className="h-4 w-4" />
|
||||
)}
|
||||
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleMuteToggle}>
|
||||
{isMuted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
|
||||
<span className="text-xs text-muted-foreground ml-2 tabular-nums">
|
||||
{formatTime(currentTime)} / {formatTime(duration)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Timeline with comment markers */}
|
||||
<div
|
||||
<div
|
||||
ref={timelineRef}
|
||||
className="relative h-8 bg-muted rounded cursor-pointer select-none"
|
||||
onMouseDown={handleTimelineMouseDown}
|
||||
onMouseMove={handleTimelineMouseMove}
|
||||
>
|
||||
{/* Buffered/loaded indicator could go here */}
|
||||
|
||||
{/* Progress bar */}
|
||||
<div
|
||||
<div
|
||||
className="absolute left-0 top-0 h-full bg-primary/30 rounded pointer-events-none"
|
||||
style={{ width: `${(currentTime / duration) * 100}%` }}
|
||||
/>
|
||||
|
||||
|
||||
{/* Playhead */}
|
||||
<div
|
||||
<div
|
||||
className="absolute top-0 h-full w-1 bg-primary rounded pointer-events-none"
|
||||
style={{ left: `calc(${(currentTime / duration) * 100}% - 2px)` }}
|
||||
/>
|
||||
|
||||
|
||||
{/* Comment markers */}
|
||||
{comments.map((comment) => (
|
||||
<button
|
||||
@@ -427,8 +517,8 @@ export default function VideoPage() {
|
||||
handleSeekToTimestamp(comment.timestamp);
|
||||
}}
|
||||
className={cn(
|
||||
"absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full transition-transform hover:scale-150 z-10",
|
||||
comment.isResolved ? "bg-green-500" : "bg-cyan-400"
|
||||
'absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full transition-transform hover:scale-150 z-10',
|
||||
comment.isResolved ? 'bg-green-500' : 'bg-cyan-400'
|
||||
)}
|
||||
style={{ left: `calc(${(comment.timestamp / duration) * 100}% - 6px)` }}
|
||||
title={`${formatTime(comment.timestamp)} - ${comment.content?.substring(0, 30)}...`}
|
||||
@@ -438,25 +528,20 @@ export default function VideoPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comments Sidebar - Fixed Right */}
|
||||
{/* Comments Sidebar */}
|
||||
<div className="w-80 shrink-0 border-l bg-card flex flex-col overflow-hidden">
|
||||
{/* Comments Header */}
|
||||
<div className="shrink-0 flex items-center justify-between p-4 border-b">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquare className="h-5 w-5" />
|
||||
<span className="font-medium">Comments</span>
|
||||
<Badge variant="secondary">{comments.length}</Badge>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowResolved(!showResolved)}
|
||||
>
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowResolved(!showResolved)}>
|
||||
{showResolved ? 'Hide' : 'Show'} Resolved
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Comments List - Scrollable */}
|
||||
{/* Comments List */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
{filteredComments.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
@@ -467,128 +552,136 @@ export default function VideoPage() {
|
||||
) : (
|
||||
filteredComments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
.map((comment) => (
|
||||
<div
|
||||
key={comment.id}
|
||||
className={cn(
|
||||
"group rounded-lg border p-3 transition-colors hover:bg-accent/50",
|
||||
comment.isResolved && "opacity-60"
|
||||
)}
|
||||
>
|
||||
{/* Comment Header */}
|
||||
<div className="flex items-start justify-between gap-2 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarImage src={comment.author.image ?? undefined} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{comment.author.name.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-sm font-medium">{comment.author.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => handleSeekToTimestamp(comment.timestamp)}
|
||||
className="flex items-center gap-1 text-xs text-primary hover:underline px-1.5 py-0.5 rounded bg-primary/10"
|
||||
>
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatTime(comment.timestamp)}
|
||||
</button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6"
|
||||
onClick={() => handleResolveComment(comment.id)}
|
||||
>
|
||||
{comment.isResolved ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
) : (
|
||||
<Circle className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6 opacity-0 group-hover:opacity-100">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>Reply</DropdownMenuItem>
|
||||
<DropdownMenuItem>Edit</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comment Content */}
|
||||
{comment.content && (
|
||||
<p className="text-sm mb-2">{comment.content}</p>
|
||||
)}
|
||||
|
||||
{/* Voice Comment */}
|
||||
{comment.voiceUrl && (
|
||||
<div className="flex items-center gap-2 p-2 bg-muted rounded mb-2">
|
||||
<Button size="icon" variant="ghost" className="h-8 w-8">
|
||||
<Play className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex-1 h-1 bg-primary/30 rounded">
|
||||
<div className="w-0 h-full bg-primary rounded" />
|
||||
.map((comment) => {
|
||||
const authorName =
|
||||
comment.author?.name || comment.guestName || 'Anonymous';
|
||||
return (
|
||||
<div
|
||||
key={comment.id}
|
||||
className={cn(
|
||||
'group rounded-lg border p-3 transition-colors hover:bg-accent/50',
|
||||
comment.isResolved && 'opacity-60'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarImage src={comment.author?.image ?? undefined} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{authorName.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-sm font-medium">{authorName}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatTime(comment.voiceDuration || 0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Timestamp & Meta */}
|
||||
<p className="text-xs text-muted-foreground">{comment.createdAt}</p>
|
||||
|
||||
{/* Replies */}
|
||||
{comment.replies.length > 0 && (
|
||||
<div className="mt-3 pl-3 border-l-2 space-y-2">
|
||||
{comment.replies.map((reply) => (
|
||||
<div key={reply.id} className="text-sm">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Avatar className="h-5 w-5">
|
||||
<AvatarFallback className="text-xs">
|
||||
{reply.author.name.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="font-medium text-xs">{reply.author.name}</span>
|
||||
<span className="text-xs text-muted-foreground">{reply.createdAt}</span>
|
||||
</div>
|
||||
<p className="text-sm">{reply.content}</p>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => handleSeekToTimestamp(comment.timestamp)}
|
||||
className="flex items-center gap-1 text-xs text-primary hover:underline px-1.5 py-0.5 rounded bg-primary/10"
|
||||
>
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatTime(comment.timestamp)}
|
||||
</button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6"
|
||||
onClick={() =>
|
||||
handleResolveComment(comment.id, comment.isResolved)
|
||||
}
|
||||
>
|
||||
{comment.isResolved ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
) : (
|
||||
<Circle className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>Reply</DropdownMenuItem>
|
||||
<DropdownMenuItem>Edit</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-destructive">
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
|
||||
{comment.content && <p className="text-sm mb-2">{comment.content}</p>}
|
||||
|
||||
{comment.voiceUrl && (
|
||||
<div className="flex items-center gap-2 p-2 bg-muted rounded mb-2">
|
||||
<Button size="icon" variant="ghost" className="h-8 w-8">
|
||||
<Play className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex-1 h-1 bg-primary/30 rounded">
|
||||
<div className="w-0 h-full bg-primary rounded" />
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatTime(comment.voiceDuration || 0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date(comment.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
|
||||
{comment.replies.length > 0 && (
|
||||
<div className="mt-3 pl-3 border-l-2 space-y-2">
|
||||
{comment.replies.map((reply) => {
|
||||
const replyAuthor =
|
||||
reply.author?.name || reply.guestName || 'Anonymous';
|
||||
return (
|
||||
<div key={reply.id} className="text-sm">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Avatar className="h-5 w-5">
|
||||
<AvatarFallback className="text-xs">
|
||||
{replyAuthor.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="font-medium text-xs">{replyAuthor}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(reply.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm">{reply.content}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Comment Input - Fixed at Bottom */}
|
||||
{/* Comment Input */}
|
||||
<div className="shrink-0 p-4 border-t bg-background">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setSelectedTimestamp(currentTime)}
|
||||
className={cn(selectedTimestamp !== null && "border-primary")}
|
||||
className={cn(selectedTimestamp !== null && 'border-primary')}
|
||||
>
|
||||
<Clock className="h-4 w-4 mr-1" />
|
||||
{selectedTimestamp !== null
|
||||
? formatTime(selectedTimestamp)
|
||||
: formatTime(currentTime)
|
||||
}
|
||||
{selectedTimestamp !== null ? formatTime(selectedTimestamp) : formatTime(currentTime)}
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Pin to this time
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">Pin to this time</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Textarea
|
||||
placeholder="Add a comment..."
|
||||
@@ -603,28 +696,30 @@ export default function VideoPage() {
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Button
|
||||
size="icon"
|
||||
<Button
|
||||
size="icon"
|
||||
onClick={handleAddComment}
|
||||
disabled={!commentText.trim()}
|
||||
disabled={!commentText.trim() || isSubmittingComment}
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
{isSubmittingComment ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant={isRecording ? "destructive" : "outline"}
|
||||
<Button
|
||||
size="icon"
|
||||
variant={isRecording ? 'destructive' : 'outline'}
|
||||
onClick={() => setIsRecording(!isRecording)}
|
||||
>
|
||||
<Mic className={cn("h-4 w-4", isRecording && "animate-pulse")} />
|
||||
<Mic className={cn('h-4 w-4', isRecording && 'animate-pulse')} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
⌘+Enter to submit
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">Cmd+Enter to submit</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user