cursedbelt 5.97.0 → 5.99.0

package/src/react/media/vidstackQuality.tsx

@@ -0,0 +1,65 @@
+/**
+ * The quality menu on cursedbelt's Vidstack player (forge task 3868) — kept out of
+ * `VideoPlayer.tsx` so the `./react/media/video-player` subpath exports what it always did.
+ */
+import { isHLSProvider, type MediaProviderAdapter } from '@vidstack/react';
+import type { DefaultVideoLayoutSlots } from '@vidstack/react/player/layouts/default';
+import { useSyncExternalStore } from 'react';
+import {
+  bindHlsQuality,
+  type HlsQualityEngine,
+  NATIVE_HLS_REASON,
+  NO_LADDER_REASON,
+  readVideoQuality,
+  unavailableQuality,
+  type VideoQualityStore,
+} from './videoQuality.js';
+import { VideoQualitySelect } from './VideoQualitySelect.js';
+
+/**
+ * The viewer's quality choice on Vidstack's hls.js (forge task 3868) — the same choice, read from
+ * the same key, as every `hlsSource.ts` surface (`videoQuality.ts` has what each one means).
+ *
+ * 🔴 Auto is capped at the player's size HERE TOO. Vidstack's hls.js ran with the library's
+ * defaults, so this stage alone fetched the top rung into any size of player; with that rung now
+ * the ORIGINAL (a 4K film's is ~20 Mbps), Auto means the same thing on every surface, and Max is
+ * the one remembered choice that lifts the cap.
+ *
+ * Safari's own HLS (Vidstack's plain `VideoProvider` playing a ladder) and the progressive copy
+ * can choose nothing, and say why.
+ */
+export function bindVidstackQuality(
+  provider: MediaProviderAdapter | null,
+  store: VideoQualityStore,
+  ladder: boolean,
+): void {
+  if (!provider) {
+    store.set(null);
+    return;
+  }
+  if (isHLSProvider(provider)) {
+    store.set(null);
+    provider.config = { ...provider.config, capLevelToPlayerSize: readVideoQuality() === 'auto' };
+    provider.onInstance((hls) => {
+      bindHlsQuality(hls as unknown as HlsQualityEngine, store.set);
+    });
+    return;
+  }
+  store.set(unavailableQuality(ladder ? NATIVE_HLS_REASON : NO_LADDER_REASON));
+}
+
+/** The quality menu in the bar, re-rendered by the store alone — see `VideoQualityStore`. */
+function QualitySlot({ store }: { store: VideoQualityStore }) {
+  const control = useSyncExternalStore(store.subscribe, store.get, store.get);
+  return <VideoQualitySelect className='cbvp-quality' control={control} fieldStyle={false} />;
+}
+
+/**
+ * Quality beside the settings cog, where YouTube keeps it. It REPLACES Vidstack's own quality
+ * submenu (hidden in `videoPlayer.css`): that one has no Max, remembers nothing, and two menus
+ * choosing one thing would disagree.
+ */
+export function qualitySlots(store: VideoQualityStore): DefaultVideoLayoutSlots {
+  const pair = { beforeSettingsMenu: <QualitySlot store={store} /> };
+  return { ...pair, smallLayout: { ...pair }, largeLayout: { ...pair } };
+}

package/src/react/media-gallery/MediaGallery.spec.tsx

@@ -364,6 +364,32 @@ describe('MediaGallery detail view', () => {
     expect(container.querySelector('.cbgd-root')).not.toBeNull();
   });
 
+  test('🔴 a photo with an original draws the web copy and an Original toggle; one without draws none (forge task 3873)', () => {
+    const withOriginal: MediaGalleryItem[] = [
+      { ...(ITEMS[0] as MediaGalleryItem), url: '/files/img1.web.jpg', originalUrl: '/files/img1' },
+    ];
+    const first = render(<MediaGallery items={withOriginal} />);
+    fireEvent.click(first.getByRole('button', { name: 'Open beach.jpg' }));
+    expect(first.container.querySelector('.cbgd-stage-img img')?.getAttribute('src')).toBe('/files/img1.web.jpg');
+    const toggle = first.getByRole('button', { name: 'Original' });
+    expect(toggle.getAttribute('aria-pressed')).toBe('false');
+    expect(toggle.getAttribute('aria-disabled')).not.toBe('true');
+    cleanup();
+
+    const heic: MediaGalleryItem[] = [
+      { ...(ITEMS[0] as MediaGalleryItem), name: 'IMG_1.HEIC', mime: 'image/heic', url: '/files/img1.web.jpg', originalUrl: '/files/img1' },
+    ];
+    const second = render(<MediaGallery items={heic} />);
+    fireEvent.click(second.getByRole('button', { name: 'Open IMG_1.HEIC' }));
+    // Refused, never hidden: the HEIC original is exactly what the web copy exists for.
+    expect(second.getByRole('button', { name: /Original/ }).getAttribute('aria-disabled')).toBe('true');
+    cleanup();
+
+    const plain = render(<MediaGallery items={ITEMS} />);
+    fireEvent.click(plain.getByRole('button', { name: 'Open beach.jpg' }));
+    expect(plain.queryByRole('button', { name: 'Original' })).toBeNull();
+  });
+
   test('onDelete renders a confirm-gated delete and closes the detail after it runs', async () => {
     let deleted: string | null = null;
     const { getByRole, findByRole, container } = render(

package/src/react/media-gallery/MediaGallery.tsx

@@ -80,6 +80,9 @@ import { DenseGalleryDetail, DenseGalleryShell } from '../media/DenseGalleryShel
 import { CBGD_BARE_TILE_HEIGHT } from '../media/VirtualMediaGrid.js';
 import { useGalleryReturn } from './galleryReturn.js';
 import { useHlsSource } from '../media/hlsSource.js';
+import { VideoQualitySelect } from '../media/VideoQualitySelect.js';
+import { ImageOriginalToggle } from '../media/ImageOriginalToggle.js';
+import { useImageOriginal } from '../media/useImageOriginal.js';
 import {
   isRecoverableFault,
   probeSourceFault,
@@ -1197,22 +1200,27 @@ function NativeVideoStage({
   onFault?: (fault: SourceFault) => void;
 }) {
   const ref = React.useRef<HTMLVideoElement>(null);
-  useHlsSource(ref, { hlsUrl, streamUrl }, { ...(onFault ? { onFault } : {}) });
+  const quality = useHlsSource(ref, { hlsUrl, streamUrl }, { ...(onFault ? { onFault } : {}) });
   useStageVolume(ref);
   return (
-    // biome-ignore lint/a11y/useMediaCaption: arbitrary user-stored files carry no captions
-    <video
-      ref={ref}
-      className='cbmg-stage-video'
-      poster={poster}
-      controls
-      autoPlay
-      playsInline
-      loop={repeat}
-      // A looping element never fires `ended`, so passing both would silently disable
-      // auto-advance rather than combining the two. See `VideoPlayerProps.loop`.
-      onEnded={repeat ? undefined : onEnded}
-    />
+    // The box exists for the quality menu (task 3868): native `controls` take no extra control,
+    // so the menu sits in the picture's top corner and shows when the controls do.
+    <div className='cbmg-stage-native'>
+      {/* biome-ignore lint/a11y/useMediaCaption: arbitrary user-stored files carry no captions */}
+      <video
+        ref={ref}
+        className='cbmg-stage-video'
+        poster={poster}
+        controls
+        autoPlay
+        playsInline
+        loop={repeat}
+        // A looping element never fires `ended`, so passing both would silently disable
+        // auto-advance rather than combining the two. See `VideoPlayerProps.loop`.
+        onEnded={repeat ? undefined : onEnded}
+      />
+      <VideoQualitySelect className='cbmg-stage-quality' control={quality} />
+    </div>
   );
 }
 
@@ -1337,13 +1345,36 @@ function NativeVideoSurface({
 function ImageSurface({
   item,
   url,
+  originalUrl,
   reAsk,
 }: {
   item: MediaGalleryItem;
   url: string;
+  originalUrl?: string | undefined;
   reAsk: () => boolean;
 }) {
   const { fault, report } = useSourceFault(reAsk);
+  // How wide the picture is DRAWN, and how wide the web copy is — the two numbers that decide
+  // whether the original is needed (`useImageOriginal`). The `<img>` is `contain`ed with max
+  // sizes, so its own box IS the drawn picture.
+  const [drawnWidth, setDrawnWidth] = useState(0);
+  const [webWidth, setWebWidth] = useState(0);
+  const observer = useRef<ResizeObserver | null>(null);
+  const measure = useCallback((img: HTMLImageElement | null) => {
+    observer.current?.disconnect();
+    observer.current = null;
+    if (!img || typeof ResizeObserver === 'undefined') return;
+    observer.current = new ResizeObserver(() => setDrawnWidth(img.clientWidth));
+    observer.current.observe(img);
+  }, []);
+  const original = useImageOriginal({
+    src: url,
+    originalSrc: originalUrl,
+    mime: item.mime,
+    name: item.name,
+    drawnWidth,
+    webWidth,
+  });
   if (fault) {
     return <StageSourceFault item={item} category='image' fault={fault} subject='This picture' />;
   }
@@ -1354,13 +1385,22 @@ function ImageSurface({
           constraint: a quarter-turned picture is laid out in its ORIGINAL box, so without it
           a portrait scan turned upright overflows the frame it is centered in. */}
       <img
-        src={url}
+        ref={measure}
+        src={original.src}
         alt={item.name}
         style={orientationStyle(item)}
+        onLoad={(event) => {
+          // Only the WEB copy's size is the threshold — the original's is what it is past.
+          if (original.src === url) setWebWidth(event.currentTarget.naturalWidth);
+          setDrawnWidth(event.currentTarget.clientWidth);
+        }}
         onError={() => {
-          void probeSourceFault(url).then(report);
+          // The original failing is `useImageOriginal`'s own case (it decodes before the swap);
+          // a fault here is the web copy's.
+          void probeSourceFault(original.src).then(report);
         }}
       />
+      <ImageOriginalToggle className='cbgd-stage-original' control={original.control} />
     </div>
   );
 }
@@ -1484,7 +1524,7 @@ function GalleryStage({
     if (!media.url) return <StageLoading label={resolving ? 'Loading…' : 'Image unavailable.'} />;
     // `key`ed on the URL for the reason the video stage is: a new URL — including the one a
     // re-ask mints — is a new attempt and must not inherit the previous one's fault.
-    return <ImageSurface key={media.url} item={item} url={media.url} reAsk={refresh} />;
+    return <ImageSurface key={media.url} item={item} url={media.url} originalUrl={media.originalUrl} reAsk={refresh} />;
   }
 
   if (category === 'audio') {

package/src/react/media-gallery/mediaGallery.css

@@ -135,6 +135,35 @@
 	max-height: 100%;
 	height: 100%;
 }
+/* The native stage's box: exactly the video's, so the quality menu (task 3868) can sit in its
+   corner. It shows with the native controls — on hover or focus — and always on touch, where
+   there is no hover to reveal it. */
+.cbmg-stage-native {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+.cbmg-stage-quality {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	opacity: 0;
+	transition: opacity 150ms ease;
+}
+.cbmg-stage-native:hover .cbmg-stage-quality,
+.cbmg-stage-quality:focus-within {
+	opacity: 1;
+}
+@media (hover: none) {
+	.cbmg-stage-quality {
+		opacity: 1;
+	}
+}
+@media (pointer: coarse) {
+	.cbmg-stage-quality button {
+		min-height: 44px;
+	}
+}
 
 /* ── A TURNED clip (`MediaGalleryItem.orientation` on a video). The owner, 2026-08-14:
    *"a video showing in portrait mode that is actually supposed to be widescreen to fill all
@@ -227,6 +256,7 @@
 
 /* Inside the turned frame the stage element must stop claiming its own 70vh, or the flex
    centering above has nothing left to center. */
+.cbmg-stage-turn[data-turned='true'] .cbmg-stage-native,
 .cbmg-stage-turn[data-turned='true'] .cbmg-stage-video,
 .cbmg-stage-turn[data-turned='true'] [data-testid='video-player'] {
 	height: auto;
@@ -1067,3 +1097,15 @@
 	font-size: 13px;
 	color: var(--muted-foreground);
 }
+
+/* The "Original" toggle on a picture's stage (forge task 3873, `ImageOriginalToggle`): over the
+   letterbox's bottom-right corner, where a viewer's eye is not, and above the picture it swaps.
+   `.cbgd-stage-img` is a flex box, so it anchors the absolute corner. */
+.cbgd-stage-img {
+	position: relative;
+}
+.cbgd-stage-original {
+	position: absolute;
+	right: 12px;
+	bottom: 12px;
+}

package/src/react/media-gallery/mediaGalleryModel.ts

@@ -93,8 +93,8 @@ export function galleryDateHaystack(createdAt: number | undefined): string {
   const date = new Date(createdAt);
   if (Number.isNaN(date.getTime())) return '';
   const pad = (n: number) => String(n).padStart(2, '0');
-  const iso = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-  const parts = [iso, iso.slice(0, 7), iso.slice(0, 4), date.toLocaleDateString()];
+  const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  const parts = [day, day.slice(0, 7), day.slice(0, 4), date.toLocaleDateString()];
   for (const month of ['short', 'long'] as const) {
     parts.push(date.toLocaleDateString(undefined, { day: 'numeric', month, year: 'numeric' }));
     parts.push(date.toLocaleDateString(undefined, { month, year: 'numeric' }));
@@ -205,6 +205,8 @@ export function staticItemMedia(item: MediaGalleryItem): MediaGalleryItemMedia {
   const media: MediaGalleryItemMedia = {};
   if (item.url) media.url = item.url;
   if (item.thumbnailUrl) media.thumbnailUrl = item.thumbnailUrl;
+  // A still's original past its web copy — see `MediaGalleryItemMedia.originalUrl`.
+  if (item.originalUrl) media.originalUrl = item.originalUrl;
   if (item.posterUrl) media.posterUrl = item.posterUrl;
   if (item.streamUrl) media.streamUrl = item.streamUrl;
   // Additional to `streamUrl`, never instead of it — see `MediaGalleryItemMedia.hlsUrl`.

package/src/react/media-gallery/types.ts

@@ -33,6 +33,16 @@ export interface MediaGalleryItemMedia {
   url?: string;
   /** Smaller grid derivative; tiles fall back to `url` when absent. */
   thumbnailUrl?: string;
+  /**
+   * A still's ORIGINAL, signed inline, when `url` is its web copy (forge task 3873).
+   *
+   * The stage draws `url` and swaps in this one once the picture is drawn with more device
+   * pixels than the web copy holds, or when the viewer pressed "Original" — and only after it
+   * has decoded. Absent (an app whose `url` already IS the original) draws no control. An
+   * original no browser can draw (a HEIC, a RAW) is still worth handing over: the control
+   * then says why it is refused. See `imageOriginal.ts`.
+   */
+  originalUrl?: string;
   /** Video poster frame for the idle tile. */
   posterUrl?: string;
   /** Range-streamable video source when it differs from `url` (signed stream endpoints). */

package/src/react/sharing/SharePanel.tsx

@@ -27,6 +27,7 @@
  *    no controls rather than nothing at all: a relative who cannot change sharing
  *    still benefits from knowing the record is shared with their cousin.
  */
+import { dayKeyOf } from "cwip/calendar";
 import { useState } from "react";
 import {
 	describeAccess,
@@ -243,7 +244,7 @@ export function SharePanel({
 						<ol className="mt-1 flex flex-col gap-1 text-[var(--muted-foreground)] text-sm">
 							{events.map((event) => (
 								<li key={event.id}>
-									<span className="tabular-nums">{event.at.slice(0, 10)}</span>{" "}
+									<span className="tabular-nums">{dayKeyOf(Date.parse(event.at))}</span>{" "}
 									{describeShareEvent(event, labelFor(event.subject))}
 								</li>
 							))}