pinto/vfxreview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile client player layoout updates
Deploy / deploy (push) Successful in 2m45s
Details

Browse Source
This commit is contained in:
twotalesanimation
2026-06-12 11:01:00 +02:00
parent 80fcee7f0f
commit 5bfaf49fa1
2 changed files with 63 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/client/[token]/page.tsx
+1 -1
View File
@@ -378,7 +378,7 @@ export default function ClientPortalPage({
</div>
{ver ? (
<div className="flex items-center gap-3 shrink-0">
<span className="text-xs font-mono text-zinc-500">
<span className="hidden sm:inline text-xs font-mono text-zinc-500">
v{String(ver.versionNumber).padStart(3, '0')}
</span>
<span
app/client/[token]/review/[versionId]/page.tsx
+62 -58
View File
@@ -2,6 +2,7 @@
import { useState, useEffect, useRef, useCallback } from "react";
import Link from "next/link";
import Image from "next/image";
import { ReviewPlayer, type ReviewPlayerRef } from "@/components/player/ReviewPlayer";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
@@ -215,82 +216,85 @@ export default function ClientReviewPage({
return (
<div className="flex flex-col h-screen bg-zinc-950 text-white overflow-hidden">
{/* Header */}
<header className="flex items-center gap-3 px-4 py-2.5 border-b border-zinc-800 bg-zinc-900 shrink-0">
<Link
href={`/client/${token}`}
className="text-zinc-400 hover:text-white transition-colors flex items-center gap-1.5 text-sm"
>
<ArrowLeft className="h-4 w-4" />
<span className="hidden sm:inline">All Shots</span>
</Link>
<header className="flex flex-col sm:flex-row sm:items-center gap-2 px-4 py-2.5 border-b border-zinc-800 bg-zinc-900 shrink-0">
{/* Row 1: back + shot info + status */}
<div className="flex items-center gap-3 flex-1 min-w-0">
<Link
href={`/client/${token}`}
className="text-zinc-400 hover:text-white transition-colors flex items-center gap-1.5 text-sm shrink-0"
>
<ArrowLeft className="h-4 w-4" />
<span className="hidden sm:inline">All Shots</span>
</Link>
<div className="h-4 w-px bg-zinc-700" />
<div className="h-4 w-px bg-zinc-700 shrink-0" />
<div className="flex items-center gap-2 flex-1 min-w-0">
<div className="w-5 h-5 rounded bg-amber-500 flex items-center justify-center shrink-0">
<Film className="h-3 w-3 text-black" />
<div className="flex items-center gap-2 flex-1 min-w-0">
<div className="w-5 h-5 rounded bg-black flex items-center justify-center shrink-0">
<Image src="/logo.svg" alt="Logo" width={14} height={14} />
</div>
{(() => {
const project = version.shot?.project ?? version.task?.project;
const contextCode =
version.shot?.shotCode ??
version.task?.shot?.shotCode ??
version.task?.asset?.assetCode ??
null;
return (
<>
<span className="text-xs text-zinc-500 hidden sm:block">{project?.code}</span>
<span className="text-zinc-600">/</span>
{contextCode && (
<>
<span className="font-mono font-semibold">{contextCode}</span>
<span className="text-zinc-600">/</span>
</>
)}
<span className="font-mono text-sm text-zinc-300">
v{String(version.versionNumber).padStart(3, "000")}
</span>
</>
);
})()}
</div>
{(() => {
const project = version.shot?.project ?? version.task?.project;
const contextCode =
version.shot?.shotCode ??
version.task?.shot?.shotCode ??
version.task?.asset?.assetCode ??
null;
return (
<>
<span className="text-xs text-zinc-500 hidden sm:block">{project?.code}</span>
<span className="text-zinc-600">/</span>
{contextCode && (
<>
<span className="font-mono font-semibold">{contextCode}</span>
<span className="text-zinc-600">/</span>
</>
)}
<span className="font-mono text-sm text-zinc-300">
v{String(version.versionNumber).padStart(3, "0")}
</span>
</>
);
})()}
<span
className={cn(
"text-xs px-2.5 py-1 rounded-full border hidden sm:inline-flex items-center gap-1 shrink-0",
approvalStyle
)}
>
{currentApprovalStatus === "PENDING_REVIEW" ? (
<Clock className="h-3 w-3" />
) : currentApprovalStatus === "APPROVED" ? (
<CheckCircle2 className="h-3 w-3" />
) : currentApprovalStatus === "NEEDS_CHANGES" ? (
<AlertCircle className="h-3 w-3" />
) : (
<XCircle className="h-3 w-3" />
)}
{currentApprovalStatus.replace(/_/g, " ")}
</span>
</div>
<span
className={cn(
"text-xs px-2.5 py-1 rounded-full border hidden sm:inline-flex items-center gap-1",
approvalStyle
)}
>
{currentApprovalStatus === "PENDING_REVIEW" ? (
<Clock className="h-3 w-3" />
) : currentApprovalStatus === "APPROVED" ? (
<CheckCircle2 className="h-3 w-3" />
) : currentApprovalStatus === "NEEDS_CHANGES" ? (
<AlertCircle className="h-3 w-3" />
) : (
<XCircle className="h-3 w-3" />
)}
{currentApprovalStatus.replace(/_/g, " ")}
</span>
{/* Decision buttons */}
{/* Row 2 on mobile / inline on desktop: decision buttons */}
<div className="flex items-center gap-2 shrink-0">
<Button
size="sm"
variant="outline"
className="h-10 sm:h-8 text-xs gap-1 text-orange-400 border-orange-500/30 hover:bg-orange-500/10"
className="flex-1 sm:flex-none h-9 sm:h-8 text-xs gap-1 text-orange-400 border-orange-500/30 hover:bg-orange-500/10"
onClick={() => setApprovalDialog({ open: true, status: "NEEDS_CHANGES" })}
>
<AlertCircle className="h-3.5 w-3.5" />
<span className="hidden sm:inline">Needs Changes</span>
Needs Changes
</Button>
<Button
size="sm"
className="h-10 sm:h-8 text-xs gap-1 bg-emerald-600 hover:bg-emerald-500 text-white"
className="flex-1 sm:flex-none h-9 sm:h-8 text-xs gap-1 bg-emerald-600 hover:bg-emerald-500 text-white"
onClick={() => setApprovalDialog({ open: true, status: "APPROVED" })}
>
<CheckCircle2 className="h-3.5 w-3.5" />
<span className="hidden sm:inline">Approve</span>
Approve
</Button>
</div>
</header>