+
@@ -731,6 +767,8 @@ export default function LookoutRecorder() {
>
{ releasePendingStream(); setCaptureMode(null); setCameraDeviceId(null); }}
onBrowserError={(message) => {
// Browser capture failed — return to the selector (the "picker") and remember why,
@@ -868,8 +906,10 @@ function CameraPreviewVideo({ stream }: { stream: MediaStream }) {
// it as "go back to mode selection" rather than a scary error — see the error effect.
const SCREEN_CANCELLED_MESSAGE = "Screen sharing was cancelled.";
-function LapseRecorder({ draftId, onShareFailed, onBrowserError }: {
+function LapseRecorder({ draftId, lookoutToken, apiBaseUrl, onShareFailed, onBrowserError }: {
draftId: string;
+ lookoutToken: string;
+ apiBaseUrl: string;
onShareFailed: () => void;
onBrowserError: (message: string) => void;
}) {
@@ -877,6 +917,11 @@ function LapseRecorder({ draftId, onShareFailed, onBrowserError }: {
const { state, actions } = useLookout();
const [error, setError] = useState(null);
const [captureError, setCaptureError] = useState(null);
+ // Once recording stops we offer the cut/edit step before handing off to the publish
+ // page. `editorDone` flips when the user saves or dismisses the editor, which is what
+ // actually releases them to publish.
+ const [editorOpen, setEditorOpen] = useState(false);
+ const [editorDone, setEditorDone] = useState(false);
const screenStarted = useRef(false);
const isCamera = state.captureMode === "camera";
@@ -937,10 +982,18 @@ function LapseRecorder({ draftId, onShareFailed, onBrowserError }: {
}, 30 * 1000);
useEffect(() => {
- if (state.status === "stopped" || state.status === "compiling" || state.status === "complete") {
+ const recordingEnded = state.status === "stopped" || state.status === "compiling" || state.status === "complete";
+ if (!recordingEnded) return;
+
+ // The user has finished with the editor (saved cuts or dismissed it) — hand off to
+ // the existing publish page. Without a token to edit against, skip straight there so
+ // the flow never gets stuck.
+ if (editorDone || !lookoutToken) {
router.push(`/timelapse/publish/${draftId}`);
+ } else {
+ setEditorOpen(true);
}
- }, [state.status, draftId, router]);
+ }, [state.status, editorDone, lookoutToken, draftId, router]);
function handleStartSharing() {
actions.startSharing().catch((err) =>
@@ -958,12 +1011,32 @@ function LapseRecorder({ draftId, onShareFailed, onBrowserError }: {
async function stopRecording() {
try {
- await actions.stop();
+ // `edit: true` asks the server to hold the session open for editing after stop
+ // instead of compiling straight to `complete`. Without it the cut/edit step below
+ // gets a `not_ready` session ("isn't available for editing").
+ await actions.stop({ edit: true });
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to stop recording");
}
}
+ // After recording stops, the cut/edit step is offered in a Lapse-styled modal. This
+ // must precede the capture-state branches below (once stopped, `state.isSharing` is
+ // false, which would otherwise render the empty placeholder). Dismissing or saving
+ // sets `editorDone`, which the effect above turns into the publish-page handoff — the
+ // editor itself publishes the (possibly cut) session; we just continue Lapse's flow.
+ if (editorOpen && lookoutToken) {
+ return (
+
+ { setEditorOpen(false); setEditorDone(true); }}
+ />
+
+ );
+ }
+
// Camera failures show an inline modal; screen failures are handled by the effect above,
// which sends the user back to the selector with the error recorded.
if (captureError) {
diff --git a/apps/client/src/components/ui/CopyField.tsx b/apps/client/src/components/ui/CopyField.tsx
new file mode 100644
index 0000000..6b6eccf
--- /dev/null
+++ b/apps/client/src/components/ui/CopyField.tsx
@@ -0,0 +1,96 @@
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import Icon from "@hackclub/icons";
+
+/**
+ * A read-only field holding something the user has to take somewhere else - a link, a token - with a copy button
+ * beside it. The value stays visible and selects itself on focus, because copying needs a secure context and the
+ * user's permission, and a button that silently does nothing is worse than a field they can select by hand.
+ */
+export function CopyField({ value, label, className }: {
+ value: string;
+
+ /** Describes the value for screen readers, e.g. "Recording session link". */
+ label: string;
+
+ className?: string;
+}) {
+ const [copied, setCopied] = useState(false);
+ const resetTimer = useRef | null>(null);
+
+ // Copying right before this unmounts would otherwise leave the timer to set state on a gone component.
+ useEffect(() => () => {
+ if (resetTimer.current) clearTimeout(resetTimer.current);
+ }, []);
+
+ async function copy() {
+ try {
+ await navigator.clipboard.writeText(value);
+ } catch {
+ // No clipboard access - the field is selectable for exactly this case, so leave it be.
+ return;
+ }
+
+ setCopied(true);
+ if (resetTimer.current) clearTimeout(resetTimer.current);
+ resetTimer.current = setTimeout(() => setCopied(false), 2000);
+ }
+
+ return (
+
+
+ );
+ }
+
+ // Lookout opens the redirect in the user's *default* browser, which isn't necessarily the one they started
+ // recording in. Rather than pushing them through a second sign-in here, point them back at the browser that
+ // already has their session: opening Lapse there lands them on this timelapse's publish page by itself (see
+ // the draft check in `_app.tsx`). Signing in here still works for anyone who'd rather - or has to.
+ if (!isLoading && !currentUser) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/apps/client/src/pages/timelapse/publish/[id].tsx b/apps/client/src/pages/timelapse/publish/[id].tsx
index af8efb1..6b9133b 100644
--- a/apps/client/src/pages/timelapse/publish/[id].tsx
+++ b/apps/client/src/pages/timelapse/publish/[id].tsx
@@ -7,7 +7,8 @@ import type { TimelapseVisibility } from "@hackclub/lapse-api";
import { api } from "@/api";
import { useAuth } from "@/hooks/useAuth";
import { useInterval } from "@/hooks/useInterval";
-import { removeStoredSession } from "@/components/lookout/sessions";
+import { getStoredSessions, removeStoredSession, type StoredLookoutSession } from "@/components/lookout/sessions";
+import { EditorModal } from "@/components/lookout/EditorModal";
import RootLayout from "@/components/layout/RootLayout";
import { Button } from "@/components/ui/Button";
@@ -64,6 +65,23 @@ export default function Page() {
const [loadStatus, setLoadStatus] = useState(null);
const [step, setStep] = useState("details");
+
+ // Resuming an interrupted edit: if this page loads (e.g. after a refresh) while the
+ // session's edit hold is still live, the cut/edit modal reopens instead of leaving
+ // the user staring at the compile spinner until the hold lapses. The Lookout token
+ // for the draft is only known on this device, via the recorder's stored sessions.
+ const [storedSession, setStoredSession] = useState(null);
+ const [editorOpen, setEditorOpen] = useState(false);
+ const [editorDone, setEditorDone] = useState(false);
+ // Set from the status poll. Desktop recordings are edited in the desktop app, never here. `null` until a poll
+ // says either way - the editor stays shut while we don't know, rather than guessing and opening it.
+ const [recordedOnDesktop, setRecordedOnDesktop] = useState(null);
+
+ useEffect(() => {
+ // localStorage is client-only, so this can't run during render.
+ if (!draftId) return;
+ setStoredSession(getStoredSessions().find(s => s.draftId === draftId) ?? null);
+ }, [draftId]);
const [hackatimeProject, setHackatimeProject] = useState(null);
const [isLoadingHackatime, setIsLoadingHackatime] = useState(false);
const [isPublishing, setIsPublishing] = useState(false);
@@ -78,6 +96,10 @@ export default function Page() {
useInterval(async () => {
if (!draftId || compilationStatus !== "waiting") return;
+ // The status poll comes first: it's what tells us whether this session was recorded on the desktop, which
+ // the edit-hold probe below needs to know before it decides to open anything.
+ let onDesktop = recordedOnDesktop;
+
try {
const res = await api.timelapse.pollLookoutStatus({ draftId });
if (!res.ok) {
@@ -87,6 +109,9 @@ export default function Page() {
return;
}
+ onDesktop = res.data.recordedOnDesktop;
+ setRecordedOnDesktop(onDesktop);
+
if (res.data.lookoutStatus === "complete") {
setCompilationStatus("ready");
setVideoUrl(res.data.videoUrl);
@@ -98,6 +123,33 @@ export default function Page() {
} catch (err) {
console.warn("(publish.tsx) poll error:", err);
}
+
+ // While the session's edit hold is live, offer to resume editing instead of
+ // waiting out the hold. Asked directly of Lookout (the hold isn't visible through
+ // Lapse's status poll), and only until a definitive answer: a live hold opens the
+ // editor; a session past its hold can never become editable again, so stop asking.
+ //
+ // Desktop recordings are the exception. Their hold belongs to the desktop app's own editor window, which
+ // is very likely open on this exact session right now - a second editor here would have both surfaces
+ // renewing the same lease and racing to write cuts, last one winning. So we stay out of it and just wait
+ // for the compile, which is what the user is watching the app finish anyway.
+ if (storedSession && onDesktop === false && !editorOpen && !editorDone) {
+ try {
+ const res = await fetch(
+ `${storedSession.lookoutApiBaseUrl}/api/sessions/${storedSession.lookoutToken}/status`
+ );
+ if (res.ok) {
+ const status: { editable?: boolean; editHoldUntil?: string } = await res.json();
+ if (status.editable || status.editHoldUntil) {
+ setEditorOpen(true);
+ } else {
+ setEditorDone(true);
+ }
+ }
+ } catch (err) {
+ console.warn("(publish.tsx) edit-hold probe error:", err);
+ }
+ }
}, 3000);
function handleVisibilitySelect() {
@@ -323,6 +375,14 @@ export default function Page() {
)}
+ {editorOpen && storedSession && (
+
@@ -686,8 +695,12 @@ export default function LookoutRecorder() {
The Lookout app should have opened on your desktop. If nothing happened, you may need to install it first.
++ We'll bring you back here to publish once your timelapse is done. +
+ {/* Installing is the way out of this screen for most people who end up reading it, so it leads. */}
Get Lookout
-
+
+
+
+ {/*
+ The deep link, in the flesh. Lookout has a "paste a lookout:// link" box precisely for when the
+ handoff doesn't fire on its own (a browser that swallows unknown schemes, a fresh install that
+ hasn't registered one yet), and this is the only place the link exists to be copied from.
+ */}
+
+
+
+ Open Lookout again
+
+
+
+
+ Still nothing? Copy this link and paste it into Lookout. +
+
+ e.currentTarget.select()}
+ aria-label={label}
+ className="flex-1 min-w-0 h-10 bg-darkless border border-slate rounded-lg px-3 text-xs font-mono text-secondary"
+ />
+
+
+
+ );
+}
diff --git a/apps/client/src/pages/_app.tsx b/apps/client/src/pages/_app.tsx
index 739bc2a..9f694ac 100644
--- a/apps/client/src/pages/_app.tsx
+++ b/apps/client/src/pages/_app.tsx
@@ -31,7 +31,11 @@ const App: AppType = ({ Component, pageProps }) => {
}, [router]);
useEffect(() => {
- if (router.pathname.startsWith("/timelapse/publish") || router.pathname.startsWith("/timelapse/create"))
+ // `/timelapse/handoff` is exempt for the same reason as the other two: it's already taking the user to
+ // publish, and it has an unauthenticated state to show first that this redirect would trample.
+ if (router.pathname.startsWith("/timelapse/publish")
+ || router.pathname.startsWith("/timelapse/create")
+ || router.pathname.startsWith("/timelapse/handoff"))
return;
// Never probe a protected endpoint on the auth pages or without a session. The request would 401 and
diff --git a/apps/client/src/pages/timelapse/handoff/[id].tsx b/apps/client/src/pages/timelapse/handoff/[id].tsx
new file mode 100644
index 0000000..a31dc78
--- /dev/null
+++ b/apps/client/src/pages/timelapse/handoff/[id].tsx
@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import Icon from "@hackclub/icons";
+
+import { api } from "@/api";
+import { useAuthContext } from "@/context/AuthContext";
+
+import RootLayout from "@/components/layout/RootLayout";
+import { Button } from "@/components/ui/Button";
+import { CopyField } from "@/components/ui/CopyField";
+import { LoadingModal } from "@/components/layout/LoadingModal";
+import { NOT_FOUND_STATUS, StatusPage } from "@/components/layout/StatusPage";
+
+/**
+ * Where Lookout sends the user when a timelapse they recorded in the desktop app finishes compiling (its
+ * `redirectUrl` hook, set when we create the session). It opens in their *default* browser, which is not
+ * necessarily the one they started the recording in - so unlike the rest of the recording flow, this page
+ * can't assume a signed-in session, and says so instead of bouncing them into OAuth unannounced.
+ *
+ * It exists as its own route rather than pointing the hook straight at `/timelapse/publish/:id` because the
+ * hook is immutable: every session ever created carries the URL it was born with, forever. Keeping a page of
+ * our own in front of the publish flow means that URL stays valid even if the flow behind it moves.
+ */
+export default function Page() {
+ const router = useRouter();
+ const { currentUser, isLoading } = useAuthContext();
+
+ const rawId = router.query.id as string | undefined;
+ const draftId = rawId && rawId !== "undefined" ? rawId : undefined;
+
+ const [gone, setGone] = useState(false);
+ // This page's own URL, for the "wrong browser" case below. Read after mount - it doesn't exist during
+ // prerender, and it has to be the absolute form to be worth pasting anywhere.
+ const [handoffUrl, setHandoffUrl] = useState("");
+
+ useEffect(() => {
+ setHandoffUrl(window.location.href);
+ }, []);
+
+ useEffect(() => {
+ if (!router.isReady || isLoading || !draftId) return;
+
+ // Signing in returns here, not to the homepage, so the handoff survives the detour.
+ if (!currentUser) return;
+
+ (async () => {
+ // The draft is the whole point of the trip - if it's already been published or discarded (from another
+ // tab, another device, or an earlier visit to this same link), there's nothing to hand off to.
+ try {
+ const res = await api.timelapse.pollLookoutStatus({ draftId });
+ // Only a missing draft ends the trip here. Any other failure (Lookout being down, say) is the publish
+ // page's problem - it polls the same endpoint and reports errors properly.
+ if (!res.ok && res.error === "NOT_FOUND") {
+ setGone(true);
+ return;
+ }
+ } catch {
+ // A network blip shouldn't strand the user here either.
+ }
+
+ router.replace(`/timelapse/publish/${draftId}`);
+ })();
+ }, [router, router.isReady, isLoading, currentUser, draftId]);
+
+ if (router.isReady && !draftId) {
+ return
+
+
+
+
+
+
+ Nothing left to publish
++ This recording has already been published or discarded. Your timelapses are on your profile. +
+
+
+
+
+
+
+
+ Your timelapse is ready
++ This browser isn't signed in to Lapse. Head back to the browser you started recording + in - it'll pick up right where you left off. +
+
+
+
+
+ Sign in here instead
+
+ Or paste this link over there:
+