Visitar URL original
fix(site): serve 1344-wide hero videos to 1x screens and phones by adamdotdevin · Pull Request #63135 · anomalyco/opencode · GitHub
Skip to content

fix(site): serve 1344-wide hero videos to 1x screens and phones #63135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adamdotdevin merged 1 commit into from
Nov 10, 2026
Merged

fix(site): serve 1344-wide hero videos to 1x screens and phones #63135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions services/site/media-manifest.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,26 @@ b3b147cdb22ec2117d539c18490c7103adaa088a13600852b5a5363f667ee051 186628 /brand
c0d7932b3c2f5d27368e2039e580c169ac94802b8317260e5e679551c41e8461 6300093 /font/film/opencode-font-film-v3-4x5.mp4
a8d0f5bc1395a756affd9cff1cd0db46e97fba0c1d72508d0e665c62a8a92c2d 146992 /media/card-loops/mobile-orb-75.720.av1.a8d0f5bc.mp4
a82f1012a18962731b12ee4b07da137a8a89165b3aef838705c43d75d186ef90 336142 /media/card-loops/mobile-orb-75.720.hevc.a82f1012.mp4
786fbf2f4822681daf7063799a3ffbd84ce657fcfbf687d650dbc1a9fe436d55 352541 /media/heroes/desktop-landscape-dark.1344.av1.786fbf2f.mp4
0ec0f7860d32edce83b78108db41ce65bf183c099e8c3b364b4a77e2c1aafa72 306293 /media/heroes/desktop-landscape-dark.1344.hevc.0ec0f786.mp4
15c689fca5a08d9ae0a7d06dd3ecbed5789d88971879acf25e39de9a8df9c46d 352083 /media/heroes/desktop-landscape-light.1344.av1.15c689fc.mp4
abbd4c515db52ef33db424096faab55107f4e0e15481a6b8b14fb043e023163b 306103 /media/heroes/desktop-landscape-light.1344.hevc.abbd4c51.mp4
3b3f184817a3cd1eb216c09c921520d02cbae820ba52f6c019fd2ea5267d5676 103517 /media/heroes/mini-landscape-dark.1344.av1.3b3f1848.mp4
5fd0a3a4c00b391cd0108dccedb0d7a15279650535bd2f4116adee66fb1625be 95428 /media/heroes/mini-landscape-dark.1344.hevc.5fd0a3a4.mp4
53928eaea9b8e4820bff00e300693ad77a34aeacacf2e59b9c8d1ee415ba499c 104159 /media/heroes/mini-landscape-light.1344.av1.53928eae.mp4
8bd6c6dacdd225458215807d20e0f075c1e9de9f38922f6c299d17a88b333245 93068 /media/heroes/mini-landscape-light.1344.hevc.8bd6c6da.mp4
bafd5cce3babd9c1c4a78aa0e6bfeb1529638f89f9764e5adf09ef928e86d6da 328347 /media/heroes/mobile-landscape-dark.1344.av1.bafd5cce.mp4
89e31924c59bafaa5272702c271c55cf561b54ead5502020d543b5201469cbcd 517466 /media/heroes/mobile-landscape-dark.1344.hevc.89e31924.mp4
bafd5cce3babd9c1c4a78aa0e6bfeb1529638f89f9764e5adf09ef928e86d6da 328347 /media/heroes/mobile-landscape-light.1344.av1.bafd5cce.mp4
89e31924c59bafaa5272702c271c55cf561b54ead5502020d543b5201469cbcd 517466 /media/heroes/mobile-landscape-light.1344.hevc.89e31924.mp4
a224db242fba95d01b40c4ff06f0ef737ba1d47b25cfaa8f23dd9f6702d3b31b 354268 /media/heroes/sdk-landscape-dark.1344.av1.a224db24.mp4
a5d12f8580fa6e6eede6f96c7e1cdba745f47f4ad2dbfe92f37090431fd4b280 847359 /media/heroes/sdk-landscape-dark.1344.hevc.a5d12f85.mp4
c1c71f19753b06de76c3bdac4a8624adadeb2743b1faed5475e33b0836b92a74 354950 /media/heroes/sdk-landscape-light.1344.av1.c1c71f19.mp4
8e891c4e819bbb3ef412af51edde9bd641b07e02305ce14537ad4ecc5506d288 797150 /media/heroes/sdk-landscape-light.1344.hevc.8e891c4e.mp4
36d715053320c22a76cec9503e8860c12438dd8d250c39abd53ca3e670e039f2 118574 /media/heroes/terminal-landscape-dark.1344.av1.36d71505.mp4
6ab989deb9da73742f10ec663f4235c064397f10f08a133833c2ace92fdea836 215948 /media/heroes/terminal-landscape-dark.1344.hevc.6ab989de.mp4
2495c0087a76a8b0618c95baf434fb26cc6975807f81597e0b0974a71053b7b2 117896 /media/heroes/terminal-landscape-light.1344.av1.2495c008.mp4
04f5da935b3c06169608357d18276b6dca64bc0c2c660d2aca31dff5e6338695 214867 /media/heroes/terminal-landscape-light.1344.hevc.04f5da93.mp4
927d3f29a862b2af9853d2ba951f29e4ff381e0c5f1b08c7d8b34cd62b7128e2 2818872 /opencode-brand-assets.zip
0f1d6dfc747f2d88650b2073bb04cd41380241adfa4de3e2f070bdc4bb367579 272426 /press/anomaly/anomaly-logo.zip
9cba0d1d2108c8af4e22cc54cafcd8532101d6bbd2809ac18dd26ff1aaf615b3 5999115 /press-media/zips/opencode-desktop-media.zip
Expand Down
40 changes: 20 additions & 20 deletions services/site/src/component/site/media-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,59 +134,59 @@
[800, "hevc", "1bfc3877", 90]
],
"/product-videos/heroes/desktop-landscape-dark.mp4": [
[1280, "av1", "87488462", 5, "phone"],
[1344, "av1", "786fbf2f", 8, "lo"],
[1920, "av1", "476dd57a", 8],
[1280, "hevc", "f9408e0f", 120, "phone"],
[1344, "hevc", "0ec0f786", 120, "lo"],
[1920, "hevc", "4a955f68", 150]
],
"/product-videos/heroes/desktop-landscape-light.mp4": [
[1280, "av1", "166905a1", 5, "phone"],
[1344, "av1", "15c689fc", 8, "lo"],
[1920, "av1", "461fb508", 8],
[1280, "hevc", "27a6e47e", 120, "phone"],
[1344, "hevc", "abbd4c51", 120, "lo"],
[1920, "hevc", "d0bae749", 150]
],
"/product-videos/heroes/mini-landscape-dark.mp4": [
[1280, "av1", "47ac0990", 5, "phone"],
[1280, "hevc", "a0d62021", 120, "phone"]
[1344, "av1", "3b3f1848", 8, "lo"],
[1344, "hevc", "5fd0a3a4", 120, "lo"]
],
"/product-videos/heroes/mini-landscape-light.mp4": [
[1280, "av1", "d1ec2aa0", 5, "phone"],
[1280, "hevc", "cf388476", 120, "phone"]
[1344, "av1", "53928eae", 8, "lo"],
[1344, "hevc", "8bd6c6da", 120, "lo"]
],
"/product-videos/heroes/mobile-landscape-dark.mp4": [
[1280, "av1", "968f138e", 5, "phone"],
[1344, "av1", "bafd5cce", 8, "lo"],
[1920, "av1", "2d4e37e8", 8],
[1280, "hevc", "dd010af3", 120, "phone"],
[1344, "hevc", "89e31924", 120, "lo"],
[1920, "hevc", "731d098b", 150]
],
"/product-videos/heroes/mobile-landscape-light.mp4": [
[1280, "av1", "968f138e", 5, "phone"],
[1344, "av1", "bafd5cce", 8, "lo"],
[1920, "av1", "2d4e37e8", 8],
[1280, "hevc", "dd010af3", 120, "phone"],
[1344, "hevc", "89e31924", 120, "lo"],
[1920, "hevc", "731d098b", 150]
],
"/product-videos/heroes/sdk-landscape-dark.mp4": [
[1280, "av1", "034290df", 5, "phone"],
[1344, "av1", "a224db24", 8, "lo"],
[1920, "av1", "29015746", 8],
[1280, "hevc", "05b60004", 120, "phone"],
[1344, "hevc", "a5d12f85", 120, "lo"],
[1920, "hevc", "d644d9f8", 150]
],
"/product-videos/heroes/sdk-landscape-light.mp4": [
[1280, "av1", "e9956023", 5, "phone"],
[1344, "av1", "c1c71f19", 8, "lo"],
[1920, "av1", "8bbc435d", 8],
[1280, "hevc", "39c3c112", 120, "phone"],
[1344, "hevc", "8e891c4e", 120, "lo"],
[1920, "hevc", "2b6ebcca", 150]
],
"/product-videos/heroes/terminal-landscape-dark.mp4": [
[1280, "av1", "c5372903", 5, "phone"],
[1344, "av1", "36d71505", 8, "lo"],
[1920, "av1", "2b371817", 8],
[1280, "hevc", "d717c7ac", 120, "phone"],
[1344, "hevc", "6ab989de", 120, "lo"],
[1920, "hevc", "0f4dba50", 150]
],
"/product-videos/heroes/terminal-landscape-light.mp4": [
[1280, "av1", "ea1f17d7", 5, "phone"],
[1344, "av1", "2495c008", 8, "lo"],
[1920, "av1", "51bebb60", 8],
[1280, "hevc", "61386db5", 120, "phone"],
[1344, "hevc", "04f5da93", 120, "lo"],
[1920, "hevc", "3e2fb1e7", 150]
],
"/product-videos/more/mini-portrait.mp4": [[720, "av1", "1bdc53ec", 4]]
Expand Down
7 changes: 4 additions & 3 deletions services/site/src/component/site/media.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,18 @@ type Manifest = {
// Original → per format, [width, hash][].
image: Record<string, Partial<Record<"avif" | "webp", [width: number, hash: string][]>>>
}
type MediaKey = "hi" | "phone"
type MediaKey = "hi" | "lo"

const manifest: Manifest = Object.values(
import.meta.glob<Manifest>("./media-manifest.json", { eager: true, import: "default" }),
)[0] ?? { video: {}, image: {} }

// The 1080-wide card and 1200-wide clip files go to screens of 2.5 device pixels per CSS pixel or
// more (most phones); the 1280-wide hero files to phone-width windows.
// more (most phones); the 1344-wide hero files (the hero's widest CSS size) to 1× screens and
// phone-width windows.
const queries: Record<MediaKey, string> = {
hi: "(min-resolution: 2.5dppx)",
phone: "(max-width: 40rem)",
lo: "(max-resolution: 1dppx), (max-width: 40rem)",
}

const base = (src: string) => `/media/${src.replace(/^\/(product-videos\/)?/, "").replace(/\.\w+$/, "")}`
Expand Down
Loading