0.3.00

2026-08-22 08:26:10 +12:00
parent 3ae8ffad64
commit b131932a4e
34 changed files with 10740 additions and 9190 deletions
@@ -0,0 +1,128 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api/client';
+import type { MetadataHeroSettingsResponse } from '../api/types';
+import { Banner, Button, Card, Loading, PageHead, Toggle } from '../components/ui';
+import { useAction, useQuery } from '../lib/hooks';
+import { useToast } from '../lib/toast';
+
+const DEFAULT_ORDER = ['title', 'ratings', 'facts', 'summary'];
+
+export function MetadataHeroPage() {
+  const query = useQuery<MetadataHeroSettingsResponse>('/admin/api/metadata-hero');
+  const { busy, run } = useAction();
+  const { wrap } = useToast();
+  const [order, setOrder] = useState<string[] | null>(null);
+
+  useEffect(() => {
+    if (order === null && query.data) setOrder(query.data.settings.contentOrder);
+  }, [order, query.data]);
+
+  const selected = order ?? DEFAULT_ORDER;
+  const options = query.data?.options ?? [];
+  const displayOptions = [
+    ...selected,
+    ...options.map((option) => option.value).filter((value) => !selected.includes(value)),
+  ];
+  const move = (value: string, offset: number) => {
+    const from = selected.indexOf(value);
+    const to = from + offset;
+    if (from < 0 || to < 0 || to >= selected.length) return;
+    const next = [...selected];
+    const moved = next[from];
+    next[from] = next[to]!;
+    next[to] = moved!;
+    setOrder(next);
+  };
+  const save = () => run('save', async () => {
+    const response = await wrap(
+      () => api.post<MetadataHeroSettingsResponse>('/admin/api/metadata-hero', { contentOrder: selected }),
+      'Metadata hero saved for every television.',
+    );
+    if (response) {
+      query.set(response);
+      setOrder(response.settings.contentOrder);
+    }
+  });
+
+  return (
+    <>
+      <PageHead
+        title="Metadata hero"
+        intro="Choose which content appears beside focused browse cards, and the order every television uses."
+      />
+      <Banner message={query.error} />
+      {query.loading ? <Loading rows={2} /> : (
+        <div className="metadata-hero-layout">
+          <Card
+            title="Content order"
+            intro="Enabled blocks are drawn from top to bottom. Changes apply to the whole household."
+            icon="sliders"
+            footer={
+              <>
+                <Button variant="primary" busy={busy === 'save'} onClick={() => void save()}>
+                  Save metadata hero
+                </Button>
+                <Button onClick={() => setOrder(DEFAULT_ORDER)}>Restore default order</Button>
+              </>
+            }
+          >
+            <div className="metadata-hero-order">
+              {displayOptions.map((value) => {
+                const option = options.find((entry) => entry.value === value);
+                if (!option) return null;
+                const index = selected.indexOf(value);
+                const enabled = index >= 0;
+                return (
+                  <div className="metadata-hero-order-row" data-enabled={enabled || undefined} key={value}>
+                    <span className="metadata-hero-order-number">{enabled ? index + 1 : '—'}</span>
+                    <Toggle
+                      label={option.label}
+                      hint={option.description}
+                      checked={enabled}
+                      disabled={enabled && selected.length === 1}
+                      onChange={(on) => setOrder(on
+                        ? [...selected, value]
+                        : selected.filter((entry) => entry !== value))}
+                    />
+                    <div className="metadata-hero-order-actions">
+                      <Button size="sm" variant="quiet" disabled={!enabled || index === 0}
+                        title={`Move ${option.label} up`} onClick={() => move(value, -1)}>↑</Button>
+                      <Button size="sm" variant="quiet" disabled={!enabled || index === selected.length - 1}
+                        title={`Move ${option.label} down`} onClick={() => move(value, 1)}>↓</Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </Card>
+
+          <Card
+            title="Television preview"
+            intro="A representative focused film at launcher scale and in the current order."
+            icon="tv"
+          >
+            <div className="metadata-hero-preview" aria-label="Metadata hero preview">
+              <div className="metadata-hero-preview-copy">
+                {selected.map((section) => {
+                  if (section === 'title') return <div className="metadata-preview-title" key={section}>THE SOUTHERN LIGHT</div>;
+                  if (section === 'ratings') return <div className="metadata-preview-ratings" key={section}><b>IMDb 8.2</b><b>TMDb 81%</b></div>;
+                  if (section === 'facts') return <div className="metadata-preview-facts" key={section}>
+                    <span>2026&nbsp;&nbsp; • &nbsp;&nbsp;1h 54m&nbsp;&nbsp; • &nbsp;&nbsp;M&nbsp;&nbsp; • &nbsp;&nbsp;Drama, Mystery</span>
+                    <b>4K</b><b>5.1</b>
+                  </div>;
+                  if (section === 'recommendation_reason') return <div className="metadata-preview-reason" key={section}>Because you watched Harbour Lights</div>;
+                  if (section === 'time_remaining') return <div className="metadata-preview-progress" key={section}>
+                    <span><i /></span><b>47 MINUTES REMAINING</b>
+                  </div>;
+                  if (section === 'summary') return <p className="metadata-preview-summary" key={section}>A quiet coastal town follows an unexpected signal across the winter sky.</p>;
+                  return null;
+                })}
+              </div>
+              <div className="metadata-hero-preview-art" aria-hidden="true" />
+            </div>
+          </Card>
+        </div>
+      )}
+    </>
+  );
+}