From 1b29b1d10428ce1a5b755503309cb3c052d6a0e4 Mon Sep 17 00:00:00 2001
From: jmartin <jmartin@jmartgraphix.com>
Date: Fri, 24 Jul 2026 12:21:03 -0400
Subject: [PATCH] Handle Vimeo embed privacy for non-embeddable clips

O3r and future imports with embed_privacy=nowhere show a poster
link to Vimeo instead of a blocked iframe player.
---
 client/src/pages/ProjectPage.scss   | 70 ++++++++++++++++++++++++++
 client/src/pages/ProjectPage.tsx    | 76 +++++++++++++++++++++--------
 server/src/services/vimeo-import.ts | 25 ++++++++--
 3 files changed, 149 insertions(+), 22 deletions(-)

diff --git a/client/src/pages/ProjectPage.scss b/client/src/pages/ProjectPage.scss
index 4b0233c..780011e 100644
--- a/client/src/pages/ProjectPage.scss
+++ b/client/src/pages/ProjectPage.scss
@@ -60,12 +60,14 @@
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid var(--border);
+    position: relative;
 
     iframe,
     video {
       width: 100%;
       height: 100%;
       border: 0;
+      display: block;
     }
 
     p {
@@ -77,6 +79,74 @@
     }
   }
 
+  &__video-link {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    text-decoration: none;
+  }
+
+  &__video-poster {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    opacity: 0.85;
+    transition: opacity 0.2s;
+
+    &--empty {
+      background: linear-gradient(145deg, #141416, #0c0c0e);
+    }
+
+    .project-page__video-link:hover & {
+      opacity: 1;
+    }
+  }
+
+  &__video-cta {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.65rem;
+    font-weight: 500;
+    font-size: 1rem;
+    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 0.25);
+    transition: background 0.2s;
+    padding: 1rem;
+    text-align: center;
+
+    .project-page__video-link:hover & {
+      background: rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  &__play {
+    display: grid;
+    place-items: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: var(--accent);
+    color: #0a0a0b;
+    font-size: 1.1rem;
+    padding-left: 3px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  }
+
+  &__video-note {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.75);
+    max-width: 22rem;
+    line-height: 1.35;
+  }
+
   &__gallery {
     display: grid;
     grid-template-columns: 1fr;
diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx
index 8cf3e51..e4922ba 100644
--- a/client/src/pages/ProjectPage.tsx
+++ b/client/src/pages/ProjectPage.tsx
@@ -60,6 +60,10 @@ export function ProjectPage() {
   const images = (project.media || []).filter((m) => m.type === "image");
   const videos = (project.media || []).filter((m) => m.type === "video");
   const slides = images.map((m) => ({ src: mediaSrc(m.url) }));
+  const poster =
+    mediaSrc(project.thumbnail?.thumbnailUrl || project.thumbnail?.url) ||
+    mediaSrc(images[0]?.thumbnailUrl || images[0]?.url) ||
+    "";
 
   return (
     <article className="project-page page-enter">
@@ -96,25 +100,59 @@ export function ProjectPage() {
 
         {videos.length > 0 && (
           <div className="project-page__videos">
-            {videos.map((v) => (
-              <div key={v.id} className="project-page__video">
-                {v.videoSource === "youtube" || v.videoSource === "vimeo" ? (
-                  <iframe
-                    src={mediaSrc(v.url)}
-                    title={v.caption || project.title}
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowFullScreen
-                  />
-                ) : v.videoSource === "self_hosted" ? (
-                  <video src={mediaSrc(v.url)} controls playsInline />
-                ) : (
-                  <a href={v.externalUrl || v.url} target="_blank" rel="noreferrer" className="btn btn--ghost">
-                    Watch video ↗
-                  </a>
-                )}
-                {v.caption && <p>{v.caption}</p>}
-              </div>
-            ))}
+            {videos.map((v) => {
+              const watchUrl = v.externalUrl || v.url;
+              // Vimeo "nowhere" privacy stores watch-page URL (no player.vimeo.com) → link card
+              const showEmbed =
+                v.videoSource === "youtube" ||
+                (v.videoSource === "vimeo" && v.url.includes("player.vimeo.com"));
+
+              return (
+                <div key={v.id} className="project-page__video">
+                  {showEmbed ? (
+                    <iframe
+                      src={mediaSrc(v.url)}
+                      title={v.caption || project.title}
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      allowFullScreen
+                      referrerPolicy="strict-origin-when-cross-origin"
+                    />
+                  ) : v.videoSource === "self_hosted" ? (
+                    <video src={mediaSrc(v.url)} controls playsInline poster={poster || undefined} />
+                  ) : (
+                    <a
+                      href={watchUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="project-page__video-link"
+                    >
+                      {poster ? (
+                        <img src={poster} alt="" className="project-page__video-poster" />
+                      ) : (
+                        <div className="project-page__video-poster project-page__video-poster--empty" />
+                      )}
+                      <span className="project-page__video-cta">
+                        <span className="project-page__play" aria-hidden>
+                          ▶
+                        </span>
+                        Watch on {v.videoSource === "vimeo" || watchUrl.includes("vimeo.com")
+                          ? "Vimeo"
+                          : v.videoSource === "youtube" || watchUrl.includes("youtu")
+                            ? "YouTube"
+                            : "external site"}{" "}
+                        ↗
+                      </span>
+                      {(v.videoSource === "vimeo" || watchUrl.includes("vimeo.com")) && (
+                        <span className="project-page__video-note">
+                          This clip’s Vimeo privacy settings block on-site embedding
+                        </span>
+                      )}
+                    </a>
+                  )}
+                  {v.caption && <p>{v.caption}</p>}
+                </div>
+              );
+            })}
           </div>
         )}
 
diff --git a/server/src/services/vimeo-import.ts b/server/src/services/vimeo-import.ts
index e6eef09..39bdb30 100644
--- a/server/src/services/vimeo-import.ts
+++ b/server/src/services/vimeo-import.ts
@@ -87,6 +87,8 @@ interface VimeoSimpleVideo {
   tags?: string;
   width?: number;
   height?: number;
+  /** anywhere | nowhere | whitelist — "nowhere" blocks iframe embeds */
+  embed_privacy?: string;
 }
 
 async function listVideos(username: string): Promise<VimeoSimpleVideo[]> {
@@ -271,21 +273,38 @@ export async function runVimeoImport(
         }
       }
 
-      // Vimeo embed media
+      // Embed only when Vimeo allows it (embed_privacy: anywhere / whitelist)
+      const canEmbed =
+        !video.embed_privacy ||
+        video.embed_privacy === "anywhere" ||
+        video.embed_privacy === "whitelist";
+
       await prisma.media.create({
         data: {
           projectId: project.id,
           type: "video",
-          url: `https://player.vimeo.com/video/${video.id}`,
+          // Non-embeddable clips use the watch page URL (no player.vimeo.com iframe)
+          url: canEmbed
+            ? `https://player.vimeo.com/video/${video.id}`
+            : sourceUrl,
           externalUrl: sourceUrl,
           videoSource: "vimeo",
           videoId: String(video.id),
-          caption: title,
+          caption: canEmbed
+            ? title
+            : `${title} (opens on Vimeo — embedding disabled by privacy settings)`,
           sortOrder: 1,
           width: video.width,
           height: video.height,
         },
       });
+      if (!canEmbed) {
+        log(
+          lines,
+          onLog,
+          `    note: embed privacy “${video.embed_privacy}” — link-out card instead of iframe`
+        );
+      }
 
       if (thumbnailId) {
         await prisma.project.update({