server/artcraft
1
0
Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-10-20 17:02:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix login video on desktop (#1958)

Browse Source
This commit is contained in:
Brandon Thomas
2026-09-26 17:08:31 -07:00
committed by GitHub
parent c3844acdad
commit 780e4494e9
1 changed files with 11 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/libs/components/login-modal/src/lib/login-modal.tsx
+11 -16
View File
@@ -12,7 +12,7 @@ import { useLoginModalStore } from "./useLoginModalStore";
// Webapp auth-showcase video (swap by passing `videoUrl`). // Webapp auth-showcase video (swap by passing `videoUrl`).
const DEFAULT_SHOWCASE_VIDEO = const DEFAULT_SHOWCASE_VIDEO =
"https://player.vimeo.com/video/1169289718?background=1&autoplay=1&loop=1&muted=1"; "https://frontend-cdn.fakeyou.com/videos/knight-video.mp4";
const LOGIN_SUCCESS_DURATION_MS = 3000; const LOGIN_SUCCESS_DURATION_MS = 3000;
interface LoginModalProps { interface LoginModalProps {
@@ -20,7 +20,7 @@ interface LoginModalProps {
onOpenChange?: (isOpen: boolean) => void; onOpenChange?: (isOpen: boolean) => void;
onArtCraftAuthSuccess?: (userInfo: any) => void; onArtCraftAuthSuccess?: (userInfo: any) => void;
isSignUp?: boolean; isSignUp?: boolean;
/** Optional override for the right-pane showcase video. */ /** Optional direct media URL for the right-pane showcase video. */
videoUrl?: string; videoUrl?: string;
// Accepted for backwards compatibility with existing call sites (MainApp // Accepted for backwards compatibility with existing call sites (MainApp
// passes these); no longer used now that the showcase is a single video. // passes these); no longer used now that the showcase is a single video.
@@ -283,24 +283,19 @@ export function LoginModal({
); );
} }
// Right-pane video showcase — Vimeo background embed scaled to cover the pane, // Right-pane video showcase — muted background video cropped to cover the pane,
// with a legibility gradient + caption. Mirrors the webapp auth-showcase. // with a legibility gradient + caption. Mirrors the webapp auth-showcase.
function LoginShowcase({ videoUrl }: { videoUrl: string }) { function LoginShowcase({ videoUrl }: { videoUrl: string }) {
return ( return (
<div <div className="absolute inset-2 overflow-hidden rounded-2xl bg-black">
className="absolute inset-2 overflow-hidden rounded-2xl bg-black" <video
style={{ containerType: "size" }}
>
<iframe
src={videoUrl} src={videoUrl}
title="ArtCraft" autoPlay
allow="autoplay; fullscreen; picture-in-picture" muted
allowFullScreen loop
className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" playsInline
style={{ preload="auto"
width: "max(100cqw, calc(100cqh * 16 / 9))", className="pointer-events-none absolute inset-0 h-full w-full object-cover"
height: "max(100cqh, calc(100cqw * 9 / 16))",
}}
/> />
<div <div