0.3.01

admin-ui/src/api/types.ts

@@ -789,6 +789,7 @@ export interface MetadataHeroOption {
 
 export interface MetadataHeroSettings {
   contentOrder: string[];
+  timeRemainingColour: 'green' | 'white';
   updatedAt?: string;
   updatedBy?: string;
 }

admin-ui/src/pages/MetadataHero.tsx

@@ -1,7 +1,7 @@
 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 { Banner, Button, Card, Loading, PageHead, Segments, Toggle } from '../components/ui';
 import { useAction, useQuery } from '../lib/hooks';
 import { useToast } from '../lib/toast';
 
@@ -12,12 +12,17 @@ export function MetadataHeroPage() {
   const { busy, run } = useAction();
   const { wrap } = useToast();
   const [order, setOrder] = useState<string[] | null>(null);
+  const [timeRemainingColour, setTimeRemainingColour] = useState<'green' | 'white' | null>(null);
 
   useEffect(() => {
     if (order === null && query.data) setOrder(query.data.settings.contentOrder);
-  }, [order, query.data]);
+    if (timeRemainingColour === null && query.data) {
+      setTimeRemainingColour(query.data.settings.timeRemainingColour ?? 'green');
+    }
+  }, [order, query.data, timeRemainingColour]);
 
   const selected = order ?? DEFAULT_ORDER;
+  const selectedTimeRemainingColour = timeRemainingColour ?? 'green';
   const options = query.data?.options ?? [];
   const displayOptions = [
     ...selected,
@@ -35,12 +40,16 @@ export function MetadataHeroPage() {
   };
   const save = () => run('save', async () => {
     const response = await wrap(
-      () => api.post<MetadataHeroSettingsResponse>('/admin/api/metadata-hero', { contentOrder: selected }),
+      () => api.post<MetadataHeroSettingsResponse>('/admin/api/metadata-hero', {
+        contentOrder: selected,
+        timeRemainingColour: selectedTimeRemainingColour,
+      }),
       'Metadata hero saved for every television.',
     );
     if (response) {
       query.set(response);
       setOrder(response.settings.contentOrder);
+      setTimeRemainingColour(response.settings.timeRemainingColour);
     }
   });
 
@@ -62,7 +71,10 @@ export function MetadataHeroPage() {
                 <Button variant="primary" busy={busy === 'save'} onClick={() => void save()}>
                   Save metadata hero
                 </Button>
-                <Button onClick={() => setOrder(DEFAULT_ORDER)}>Restore default order</Button>
+                <Button onClick={() => {
+                  setOrder(DEFAULT_ORDER);
+                  setTimeRemainingColour('green');
+                }}>Restore defaults</Button>
               </>
             }
           >
@@ -94,6 +106,18 @@ export function MetadataHeroPage() {
                 );
               })}
             </div>
+            <div className="metadata-hero-colour">
+              <b>Time-remaining text colour</b>
+              <p>Choose the caption colour used beside the resume progress bar.</p>
+              <Segments
+                value={selectedTimeRemainingColour}
+                options={[
+                  { value: 'green', label: 'Emby green' },
+                  { value: 'white', label: 'White' },
+                ]}
+                onChange={setTimeRemainingColour}
+              />
+            </div>
           </Card>
 
           <Card
@@ -111,8 +135,8 @@ export function MetadataHeroPage() {
                     <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>
+                  if (section === 'time_remaining') return <div className="metadata-preview-progress" data-colour={selectedTimeRemainingColour} 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;

admin-ui/src/styles.css

@@ -3698,6 +3698,16 @@ details summary {
 }
 .metadata-hero-order-actions { display: flex; gap: 5px; }
 .metadata-hero-order-actions button { min-width: 34px; padding-inline: 8px; }
+.metadata-hero-colour {
+  display: grid;
+  gap: 7px;
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px solid var(--line-soft);
+}
+.metadata-hero-colour > b { font-size: 13.5px; }
+.metadata-hero-colour > p { margin: 0; color: var(--muted); font-size: 12.5px; }
+.metadata-hero-colour .segments { width: fit-content; }
 .metadata-hero-preview {
   position: relative;
   isolation: isolate;
@@ -3805,7 +3815,8 @@ details summary {
   height: 100%;
   background: var(--accent);
 }
-.metadata-preview-progress b { font-size: inherit; line-height: inherit; }
+.metadata-preview-progress b { color: var(--accent); font-size: inherit; line-height: inherit; }
+.metadata-preview-progress[data-colour="white"] b { color: #fff; }
 .metadata-preview-summary { margin: 0; color: #cbd2d7; font-size: 12px; line-height: 1.45; }
 
 @media (max-width: 980px) {