mirror of
https://github.com/DorkSquadRR/DorkNet.git
synced 2026-10-25 23:18:44 -07:00
site: load images from own img.{apex}; add Bowling/Paintball art
The public site built room/profile image URLs against a hardcoded
img.rec.net fallback for any non-localhost host, so thumbnails loaded
from real Rec Room (Azure-fronted — hence the TiPMix / x-ms-routing-name
cookies the browser rejected) and DorkNet custom-room images could never
display. Derive the CDN apex from the live host instead (shared
imageApex helper in types.ts, used by profileImageUrl and Rooms.tsx) so
images come from this server's own img.{apex}.
Add the two RR-Original thumbnails as static CDN files in data/images so
img.{apex} serves them directly: image_BowlingAlley.png and
image_PaintballKeyArt.png (both real PNGs).
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 818 KiB |
@@ -59,12 +59,23 @@ export interface SiteStats {
|
|||||||
inventionCount: number;
|
inventionCount: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
// CDN URL helper for profile images. Mirrors the admin SPA's helper
|
// Resolve the image-CDN apex for the current host. The site is served
|
||||||
// so the apex visit ends up calling img.localhost (signed via the
|
// from the DorkNet apex (or www.apex) and the server exposes its
|
||||||
// hardcoded p1 key id baked into the patched client). On rec.net
|
// image-transform pipeline at img.{apex}, signed with the hardcoded p1
|
||||||
// fallbacks to img.rec.net so the site works on either apex.
|
// key id baked into the patched client. Derive the apex from the live
|
||||||
|
// host so images load from THIS server's own CDN instead of leaking to
|
||||||
|
// real Rec Room (img.rec.net) — which also drops the Azure affinity
|
||||||
|
// cookies the browser was rejecting. Localhost dev → img.localhost.
|
||||||
|
export function imageApex(): string {
|
||||||
|
if (typeof window === 'undefined') return 'localhost';
|
||||||
|
const host = window.location.host.split(':')[0];
|
||||||
|
if (host === 'localhost' || host.endsWith('.localhost')) return 'localhost';
|
||||||
|
return host.startsWith('www.') ? host.slice(4) : host;
|
||||||
|
}
|
||||||
|
|
||||||
|
// CDN URL helper for profile images, served from the server's own
|
||||||
|
// img.{apex} (see imageApex).
|
||||||
export function profileImageUrl(name: string | null | undefined, width = 96): string | null {
|
export function profileImageUrl(name: string | null | undefined, width = 96): string | null {
|
||||||
if (!name) return null;
|
if (!name) return null;
|
||||||
const apex = typeof window !== 'undefined' && window.location.host.endsWith('localhost') ? 'localhost' : 'rec.net';
|
return `https://img.${imageApex()}/${encodeURIComponent(name)}?width=${width}&cropSquare=1&sig=p1`;
|
||||||
return `https://img.${apex}/${encodeURIComponent(name)}?width=${width}&cropSquare=1&sig=p1`;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { useEffect, useMemo, useState } from 'react';
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
import { get } from '../lib/api';
|
import { get } from '../lib/api';
|
||||||
import type { SiteRoom } from '../lib/types';
|
import type { SiteRoom } from '../lib/types';
|
||||||
|
import { imageApex } from '../lib/types';
|
||||||
import { Empty } from '../components/Empty';
|
import { Empty } from '../components/Empty';
|
||||||
import { num } from '../lib/format';
|
import { num } from '../lib/format';
|
||||||
|
|
||||||
@@ -55,8 +56,7 @@ export function Rooms() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function RoomCard({ room }: { room: SiteRoom }) {
|
function RoomCard({ room }: { room: SiteRoom }) {
|
||||||
const apex = typeof window !== 'undefined' && window.location.host.endsWith('localhost') ? 'localhost' : 'rec.net';
|
const img = room.imageName ? `https://img.${imageApex()}/${encodeURIComponent(room.imageName)}?width=320&sig=p1` : null;
|
||||||
const img = room.imageName ? `https://img.${apex}/${encodeURIComponent(room.imageName)}?width=320&sig=p1` : null;
|
|
||||||
return (
|
return (
|
||||||
<div className="card overflow-hidden">
|
<div className="card overflow-hidden">
|
||||||
<div className="aspect-[16/9] bg-ink-800 flex items-center justify-center">
|
<div className="aspect-[16/9] bg-ink-800 flex items-center justify-center">
|
||||||
|
|||||||
Reference in New Issue
Block a user