feat: make band logo optional on break screen

src/dashboard/ChoreoPanel.tsx

@@ -164,11 +164,21 @@ export function ChoreoPanel() {
                 />
               </label>
             </div>
+            <label className="flex items-center gap-2 text-xs text-gray-600">
+              <input
+                type="checkbox"
+                className="h-4 w-4"
+                checked={slide.logoVisible ?? true}
+                onChange={(e) => updateSlide({ logoVisible: e.target.checked })}
+              />
+              {t.choreo.showLogo}
+            </label>
             <div className="grid grid-cols-2 gap-2">
               <label className="text-xs text-gray-600">
                 {t.choreo.logoLabel}
                 <select
                   className={inputCls}
+                  disabled={!(slide.logoVisible ?? true)}
                   value={slide.logoName ?? ""}
                   onChange={(e) =>
                     updateSlide({ logoName: e.target.value || null })
@@ -187,6 +197,7 @@ export function ChoreoPanel() {
                 <input
                   type="range"
                   className="w-full"
+                  disabled={!(slide.logoVisible ?? true)}
                   min={80}
                   max={480}
                   step={10}
@@ -201,6 +212,7 @@ export function ChoreoPanel() {
               <input
                 type="checkbox"
                 className="h-4 w-4"
+                disabled={!(slide.logoVisible ?? true)}
                 checked={slide.logoInverted ?? false}
                 onChange={(e) => updateSlide({ logoInverted: e.target.checked })}
               />

src/extension/replicants.ts

@@ -77,6 +77,7 @@ export function declareReplicants(nodecg: NodeCG.ServerAPI): Replicants {
     heading: branding.breakHeading ?? seed.breakHeading,
     nextActName: "",
     nextActFrom: "",
+    logoVisible: true,
     logoInverted: false,
     logoName: null,
     logoHeightPx: 240,

src/graphics/Break.tsx

@@ -113,7 +113,7 @@ export function Break() {
         <div className="text-6xl font-medium tracking-wide text-white/80">
           {slide?.heading}
         </div>
-        {logoUrl && (
+        {(slide?.logoVisible ?? true) && logoUrl && (
           <img
             src={logoUrl}
             alt=""

src/i18n/en.ts

@@ -64,6 +64,7 @@ export const en = {
     headingLabel: "Heading",
     nextActNameLabel: "Next act",
     nextActFromLabel: "Where they're from",
+    showLogo: "Show act logo",
     logoLabel: "Act logo",
     logoAuto: "Automatic (first image)",
     logoSizeLabel: (px: number) => `Logo size (${px}px)`,

src/i18n/sr.ts

@@ -59,6 +59,7 @@ export const sr: Strings = {
     headingLabel: "Naslov",
     nextActNameLabel: "Sledeći nastup",
     nextActFromLabel: "Odakle su",
+    showLogo: "Prikaži logo benda",
     logoLabel: "Logo benda",
     logoAuto: "Automatski (prva slika)",
     logoSizeLabel: (px: number) => `Veličina logoa (${px}px)`,

src/types/choreo.d.ts

@@ -23,6 +23,8 @@ export interface BreakSlide {
   heading: string;
   nextActName: string;
   nextActFrom: string;
+  /** show the band logo at all (hide when no act logo makes sense) */
+  logoVisible: boolean;
   /** invert the band logo's colors (dark logo on the dark background) */
   logoInverted: boolean;
   /** `base` of the assets:break-logo file to show; null = first uploaded */