feat(streamer): BRANDING env to hide denpa.fm refs, drop station pill

config/streamer-minecraft-tg.env.example

@@ -16,6 +16,8 @@ FRAMERATE=30
 RESOLUTION=1920x1080
 
 STATION_TUNE_IN_URL=denpa.femboy.page
+# set to false to hide all "denpa.fm" branding + links in the overlay
+BRANDING=true
 
 ICECAST_STATUS_URL=http://icecast:8000/status-json.xsl
 

streamer/src/config.ts

@@ -21,6 +21,7 @@ export interface Config {
   stationDisplayName?: string;
   stationTagline?: string;
   stationTuneInUrl: string;
+  branding: boolean;
   healthPort: number;
   logLevel: "debug" | "info" | "warn" | "error";
   icecastStatusUrl?: string;
@@ -77,6 +78,7 @@ export function loadConfig(env: Record<string, string | undefined> = process.env
     stationDisplayName: env.STATION_DISPLAY_NAME || undefined,
     stationTagline: env.STATION_TAGLINE || undefined,
     stationTuneInUrl: env.STATION_TUNE_IN_URL ?? "denpa.femboy.page",
+    branding: (env.BRANDING ?? "true").toLowerCase() !== "false",
     healthPort: Number(env.HEALTH_PORT ?? 12010),
     logLevel,
     icecastStatusUrl: env.ICECAST_STATUS_URL || undefined,

streamer/src/index.ts

@@ -34,6 +34,7 @@ async function main() {
     station: cfg.station,
     tz: cfg.tz,
     tuneInUrl: cfg.stationTuneInUrl,
+    branding: cfg.branding,
   });
 
   const pcm = new PcmTap({ host: cfg.pcmHost, port: cfg.pcmPort });

streamer/src/page-server.ts

@@ -11,6 +11,7 @@ export interface PageServerOpts {
   station: string;
   tz: string;
   tuneInUrl: string;
+  branding: boolean;
 }
 
 export class PageServer extends EventEmitter {
@@ -77,6 +78,7 @@ export class PageServer extends EventEmitter {
       station: this.opts.station,
       tz: this.opts.tz,
       tuneInUrl: this.opts.tuneInUrl,
+      branding: this.opts.branding,
     })}</script>`;
     let html = "";
     createReadStream(indexPath, "utf8")

streamer/src/views/App.tsx

@@ -5,7 +5,7 @@ import { StreamModern } from "./modern.tsx";
 
 declare global {
   interface Window {
-    __STREAMER_CONFIG__: { style: "denpa" | "modern"; station: string; tz: string; tuneInUrl: string };
+    __STREAMER_CONFIG__: { style: "denpa" | "modern"; station: string; tz: string; tuneInUrl: string; branding: boolean };
   }
 }
 

streamer/src/views/denpa.tsx

@@ -6,7 +6,7 @@ import { fmtMs, fmtClock, fmtClockSec, fmtJpDate } from "./shared/format.ts";
 
 const KAOMOJI_STREAM = ["(´｡• ᵕ •｡`)", "٩(◕‿◕)۶", "(｡◕‿◕｡)", "(>ω<)", "(✿◠‿◠)"];
 
-interface Cfg { station: string; tz: string; tuneInUrl: string; }
+interface Cfg { station: string; tz: string; tuneInUrl: string; branding: boolean; }
 interface Listeners { current: number; peak: number; }
 interface Props { cfg: Cfg; listeners: Listeners; }
 
@@ -148,15 +148,19 @@ export function StreamDenpa({ cfg, listeners }: Props) {
       `}</style>
 
       <div className="sd-header">
-        <div className="sd-wm">
+        {cfg.branding && (
-          <div className="eyebrow">電波 TRANSMISSION</div>
+          <>
-          <span className="big">denpa.fm</span>
+            <div className="sd-wm">
-        </div>
+              <div className="eyebrow">電波 TRANSMISSION</div>
-        <div className="sd-channel">
+              <span className="big">denpa.fm</span>
-          {channel} ←<br/>
+            </div>
-          {nameJp}<br/>
+            <div className="sd-channel">
-          {"<3"} block radio
+              {channel} ←<br/>
-        </div>
+              {nameJp}<br/>
+              {"<3"} block radio
+            </div>
+          </>
+        )}
         <div className="sd-status">
           <div className="live">[<span className="blink">REC</span>] ON AIR</div>
           <div>{fmtJpDate(now)}</div>
@@ -245,15 +249,17 @@ export function StreamDenpa({ cfg, listeners }: Props) {
       <div className="sd-bomb b2"><span className="sd-sticker" style={{ background: "#ffe24a", color: "#0a0410", transform: "rotate(5deg)" }}>SIDE A · CH.01</span></div>
 
       {/* Bottom strip */}
-      <div className="sd-bottom">
+      {cfg.branding && (
-        <div className="sd-listen"><b>&gt;&gt;</b> tune in @ {cfg.tuneInUrl}</div>
+        <div className="sd-bottom">
-        <div className="sd-ticker">
+          <div className="sd-listen"><b>&gt;&gt;</b> tune in @ {cfg.tuneInUrl}</div>
-          <div className="sd-ticker-inner">
+          <div className="sd-ticker">
-            ※ now broadcasting from a small room in tokyo ※ 24/7 always-on {cfg.station} station ※ stream URL: {cfg.tuneInUrl} ※ requests via @denpa_bot ※ no ads · no algorithms · just blocks ※ {KAOMOJI_STREAM.join(" ※ ")} ※
+            <div className="sd-ticker-inner">
+              ※ now broadcasting from a small room in tokyo ※ 24/7 always-on {cfg.station} station ※ stream URL: {cfg.tuneInUrl} ※ requests via @denpa_bot ※ no ads · no algorithms · just blocks ※ {KAOMOJI_STREAM.join(" ※ ")} ※
+            </div>
           </div>
+          <div className="sd-clock">{fmtClock(now)}</div>
         </div>
-        <div className="sd-clock">{fmtClock(now)}</div>
+      )}
-      </div>
     </div>
   );
 }

streamer/src/views/modern.tsx

@@ -4,7 +4,7 @@ import { useSpectrum } from "./shared/useSpectrum.ts";
 import { useElapsed } from "./shared/useElapsed.ts";
 import { fmtMs, fmtClock } from "./shared/format.ts";
 
-interface Cfg { station: string; tz: string; tuneInUrl: string; }
+interface Cfg { station: string; tz: string; tuneInUrl: string; branding: boolean; }
 interface Listeners { current: number; peak: number; }
 interface Props { cfg: Cfg; listeners: Listeners; }
 
@@ -202,10 +202,12 @@ export function StreamModern({ cfg, listeners }: Props) {
       <div className="sm-bg"></div>
       <div className="sm-grain"></div>
 
-      <div className="sm-brand">
+      {cfg.branding && (
-        <span className="sm-brand-dot"></span>
+        <div className="sm-brand">
-        denpa.fm — {cfg.station}
+          <span className="sm-brand-dot"></span>
-      </div>
+          denpa.fm — {cfg.station}
+        </div>
+      )}
 
       <div className="sm-meta-top">
         <div className="sm-live"><span className="sm-live-dot"></span>Live</div>
@@ -221,7 +223,6 @@ export function StreamModern({ cfg, listeners }: Props) {
       <div className="sm-right">
         <div className="sm-eyebrow">
           <span>Now playing</span>
-          <span className="pill">{cfg.station}</span>
         </div>
         <h1 className="sm-title">{np.title}</h1>
         <div className="sm-artist">{np.artist}</div>
@@ -255,11 +256,13 @@ export function StreamModern({ cfg, listeners }: Props) {
         </div>
       </div>
 
-      <div className="sm-bottom">
+      {cfg.branding && (
-        <span>Tune in at <span className="listeners">{cfg.tuneInUrl}</span></span>
+        <div className="sm-bottom">
-        <span><span className="listeners">{listeners.current}</span> listeners · 24/7 · auto-DJ</span>
+          <span>Tune in at <span className="listeners">{cfg.tuneInUrl}</span></span>
-        <span>{cfg.tuneInUrl}</span>
+          <span><span className="listeners">{listeners.current}</span> listeners · 24/7 · auto-DJ</span>
-      </div>
+          <span>{cfg.tuneInUrl}</span>
+        </div>
+      )}
     </div>
   );
 }