source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
refactor: remove video ambient backdrop functionality and related styles for simplification
+6
-132
+1
-1
public/css/profile.css
+1
-1
public/css/profile.css
-2
src/actions/index.ts
-2
src/actions/index.ts
···
2
2
import { z } from "astro/zod";
3
3
import { fetchVideoPosts } from "../utils/bluesky-api";
4
4
import { parseRichText } from "../utils/richtext";
5
-
import { getVideoAmbientBackdropInlineStyle } from "../utils/video-ambient-backdrop";
6
5
7
6
export const server = {
8
7
/** Loads the next page of video posts for a handle using the stored cursor. */
···
18
17
postId: post.postId,
19
18
thumbnail: post.thumbnail,
20
19
captionHtml: parseRichText(post.caption),
21
-
videoAmbientBackdropStyle: getVideoAmbientBackdropInlineStyle(post.thumbnail),
22
20
}));
23
21
24
22
return {
+3
-6
src/pages/@[handle].astro
+3
-6
src/pages/@[handle].astro
···
6
6
import { getColor } from '../utils/orbyt-api';
7
7
import { parseRichText } from '../utils/richtext';
8
8
import { getChromeBackgroundColor, getUiColorScheme } from '../utils/profile-colors';
9
-
import { getVideoAmbientBackdropInlineStyle } from '../utils/video-ambient-backdrop';
10
9
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
11
10
import SiteClientRouterHeadStyles from '../components/SiteClientRouterHeadStyles.astro';
12
11
import { ClientRouter } from 'astro:transitions';
···
274
273
<div class="posts">
275
274
{videoPosts.length > 0 ? videoPosts.map((post) => (
276
275
<div class="post">
277
-
<div class="post-image-container" style={getVideoAmbientBackdropInlineStyle(post.thumbnail)}>
278
-
<div class="video-ambient-backdrop" aria-hidden="true"></div>
276
+
<div class="post-image-container">
279
277
<img class="post-placeholder" src="/images/post/placeholder.png" alt="" />
280
278
<img class="post-thumb" src={post.thumbnail} alt="" style={`view-transition-name: video-${post.postId}`} />
281
279
<div class="post-overlay">
···
305
303
306
304
// Wrapper to work around Astro actions client typing (expects FormData, accepts object)
307
305
async function loadMorePosts(handle: string, cursor: string) {
308
-
return (actions as unknown as { loadMorePosts: (input: { handle: string; cursor: string }) => Promise<{ data?: { posts?: { postId: string; thumbnail: string; captionHtml: string; videoAmbientBackdropStyle: string }[]; nextCursor?: string | null }; error?: unknown }> })
306
+
return (actions as unknown as { loadMorePosts: (input: { handle: string; cursor: string }) => Promise<{ data?: { posts?: { postId: string; thumbnail: string; captionHtml: string }[]; nextCursor?: string | null }; error?: unknown }> })
309
307
.loadMorePosts({ handle, cursor });
310
308
}
311
309
···
341
339
const postDiv = document.createElement('div');
342
340
postDiv.className = 'post';
343
341
postDiv.innerHTML = `
344
-
<div class="post-image-container" style="${post.videoAmbientBackdropStyle}">
345
-
<div class="video-ambient-backdrop" aria-hidden="true"></div>
342
+
<div class="post-image-container">
346
343
<img class="post-placeholder" src="/images/post/placeholder.png" alt="" />
347
344
<img class="post-thumb" src="${post.thumbnail}" alt="" style="view-transition-name: video-${post.postId}" />
348
345
<div class="post-overlay">
+1
-3
src/pages/@[handle]/[postId].astro
+1
-3
src/pages/@[handle]/[postId].astro
···
6
6
import DocumentColorScheme from '../../components/DocumentColorScheme.astro';
7
7
import SiteClientRouterHeadStyles from '../../components/SiteClientRouterHeadStyles.astro';
8
8
import { SITE_DOCUMENT } from '../../utils/site-document-theme';
9
-
import { getVideoAmbientBackdropInlineStyle } from '../../utils/video-ambient-backdrop';
10
9
import { ClientRouter } from 'astro:transitions';
11
10
import { useTranslations, localeToHtmlLang } from '../../i18n/utils';
12
11
···
89
88
? (caption.length > 200 ? caption.substring(0, 200) + '...' : caption)
90
89
: `Post by @${authorHandle}`;
91
90
92
-
const videoAmbientBackdropStyle = getVideoAmbientBackdropInlineStyle(thumbnail);
93
91
94
92
const locale = Astro.locals.locale ?? 'en';
95
93
const t = useTranslations(locale);
···
402
400
</div>
403
401
404
402
<div class="post-media-visual">
405
-
<div class="video-container" style={videoAmbientBackdropStyle}>
403
+
<div class="video-container">
406
404
<div class="video-ambient-backdrop" aria-hidden="true"></div>
407
405
<video id="vinit" muted playsinline loop autoplay preload="auto" oncontextmenu="return false;">
408
406
</video>
-93
src/utils/video-ambient-backdrop.ts
-93
src/utils/video-ambient-backdrop.ts
···
1
-
// Hash-seeded gradient values for video backdrops using oklch.
2
-
// Golden angle maximizes hue separation across consecutive hashes.
3
-
const GOLDEN_ANGLE = 137.50776;
4
-
5
-
/** Formats an oklch color triple as a CSS `oklch(...)` string. */
6
-
function oklchToCss(l: number, c: number, h: number): string {
7
-
return `oklch(${l.toFixed(3)} ${c.toFixed(3)} ${h.toFixed(2)})`;
8
-
}
9
-
10
-
/** Wraps an arbitrary hue value into the [0, 360) range. */
11
-
function normalizeHue(value: number): number {
12
-
const hue = value % 360;
13
-
return hue < 0 ? hue + 360 : hue;
14
-
}
15
-
16
-
/**
17
-
* Derives a deterministic pair of dark oklch colors from a seed URL.
18
-
* Primary and secondary hues are separated by ~150–210° so the gradient
19
-
* reads as two distinct tones without clashing.
20
-
*/
21
-
function getVideoAmbientBackdropGradientColors(seedUrl: string | null): readonly [string, string] {
22
-
const seed = seedUrl ?? 'fallback';
23
-
24
-
const baseHue = normalizeHue((hashVideoAmbientBackdropSeed(`${seed}:h`) * GOLDEN_ANGLE) % 360);
25
-
26
-
const secondHueOffset = 150 + (hashVideoAmbientBackdropSeed(`${seed}:h2`) % 61);
27
-
const secondHue = normalizeHue(baseHue + secondHueOffset);
28
-
29
-
const lightPrimary = 0.16 + (hashVideoAmbientBackdropSeed(`${seed}:l1`) % 6) * 0.01;
30
-
const lightSecondary = 0.1 + (hashVideoAmbientBackdropSeed(`${seed}:l2`) % 5) * 0.01;
31
-
const chromaPrimary = 0.04 + (hashVideoAmbientBackdropSeed(`${seed}:c1`) % 4) * 0.01;
32
-
const chromaSecondary = 0.02 + (hashVideoAmbientBackdropSeed(`${seed}:c2`) % 3) * 0.01;
33
-
34
-
return [
35
-
oklchToCss(lightPrimary, chromaPrimary, baseHue),
36
-
oklchToCss(lightSecondary, chromaSecondary, secondHue),
37
-
];
38
-
}
39
-
40
-
const VIDEO_AMBIENT_BACKDROP_ANGLES = [155, 170, 185, 200, 215, 230] as const;
41
-
const VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_X = [14, 28, 42, 58, 72, 86] as const;
42
-
const VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_Y = [12, 20, 28, 36] as const;
43
-
const VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_OPACITY = [0.07, 0.09, 0.11, 0.13] as const;
44
-
const VIDEO_AMBIENT_BACKDROP_SCRIM_OPACITY = [0.42, 0.46, 0.5, 0.54] as const;
45
-
46
-
/**
47
-
* Fast, non-cryptographic djb2-style hash for a string seed.
48
-
* Used to pick deterministic but visually varied backdrop parameters
49
-
* without any runtime randomness that would break SSR/hydration parity.
50
-
*/
51
-
export function hashVideoAmbientBackdropSeed(value: string): number {
52
-
let hash = 0;
53
-
for (let i = 0; i < value.length; i += 1) {
54
-
hash = (hash << 5) - hash + value.charCodeAt(i);
55
-
hash |= 0;
56
-
}
57
-
return Math.abs(hash);
58
-
}
59
-
60
-
/**
61
-
* Builds a complete CSS inline style string for the video ambient backdrop element.
62
-
* All CSS custom properties (`--video-ambient-backdrop-*`) are derived from `seedUrl`
63
-
* so the same thumbnail URL always produces the same gradient, angle, and highlight.
64
-
*/
65
-
export function getVideoAmbientBackdropInlineStyle(seedUrl: string | null): string {
66
-
const seed = seedUrl ?? 'fallback';
67
-
const [start, end] = getVideoAmbientBackdropGradientColors(seed);
68
-
const angle = VIDEO_AMBIENT_BACKDROP_ANGLES[
69
-
hashVideoAmbientBackdropSeed(`${seed}:angle`) % VIDEO_AMBIENT_BACKDROP_ANGLES.length
70
-
];
71
-
const highlightX = VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_X[
72
-
hashVideoAmbientBackdropSeed(`${seed}:hx`) % VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_X.length
73
-
];
74
-
const highlightY = VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_Y[
75
-
hashVideoAmbientBackdropSeed(`${seed}:hy`) % VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_Y.length
76
-
];
77
-
const highlightOpacity = VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_OPACITY[
78
-
hashVideoAmbientBackdropSeed(`${seed}:ho`) % VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_OPACITY.length
79
-
];
80
-
const scrimOpacity = VIDEO_AMBIENT_BACKDROP_SCRIM_OPACITY[
81
-
hashVideoAmbientBackdropSeed(`${seed}:so`) % VIDEO_AMBIENT_BACKDROP_SCRIM_OPACITY.length
82
-
];
83
-
84
-
return [
85
-
`--video-ambient-backdrop-start: ${start}`,
86
-
`--video-ambient-backdrop-end: ${end}`,
87
-
`--video-ambient-backdrop-angle: ${angle}deg`,
88
-
`--video-ambient-backdrop-highlight-x: ${highlightX}%`,
89
-
`--video-ambient-backdrop-highlight-y: ${highlightY}%`,
90
-
`--video-ambient-backdrop-highlight-opacity: ${highlightOpacity}`,
91
-
`--video-ambient-backdrop-scrim-opacity: ${scrimOpacity}`,
92
-
].join('; ');
93
-
}