0.3.01

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;