From f267ce1173006e954a52abcaa1dd7d38cf18a214 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Florczak?= <florczak.raf@gmail.com>
Date: Tue, 12 Nov 2024 16:22:17 +0100
Subject: [PATCH] Add option to toggle intermission and countdown BG
 transparency

This is a cherry-pick of restream's 037ba11339c16b86a0fdd52af4ccb227d6897bd4
---
 package.json                                  |  7 +++++
 .../dashboard/use-transparent-backgrounds.tsx | 28 +++++++++++++++++++
 src/browser/graphics/odliczanie.tsx           | 10 ++++---
 src/browser/graphics/przerwa.tsx              | 12 +++++---
 4 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 src/browser/dashboard/use-transparent-backgrounds.tsx

diff --git a/package.json b/package.json
index 14523248..84a65b63 100644
--- a/package.json
+++ b/package.json
@@ -204,6 +204,13 @@
         "width": 3,
         "workspace": "1. GSPS - Ogólne"
       },
+      {
+        "name": "use-transparent-backgrounds",
+        "title": "Przezroczyste tła",
+        "file": "use-transparent-backgrounds.html",
+        "width": 3,
+        "workspace": "1. GSPS - Ogólne"
+      },
       {
         "name": "obs-status",
         "title": "Status",
diff --git a/src/browser/dashboard/use-transparent-backgrounds.tsx b/src/browser/dashboard/use-transparent-backgrounds.tsx
new file mode 100644
index 00000000..cd97222a
--- /dev/null
+++ b/src/browser/dashboard/use-transparent-backgrounds.tsx
@@ -0,0 +1,28 @@
+import { useReplicant } from 'use-nodecg';
+import { DashboardThemeProvider } from './components/DashboardThemeProvider';
+import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
+import { render } from '../render';
+
+const App = () => {
+  const [useTransparentBackgrounds, setUseTransparentBackgrounds] = useReplicant<boolean>('useTransparentBackgrounds', true);
+
+  return (
+    <DashboardThemeProvider>
+      <FormGroup>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={useTransparentBackgrounds}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                setUseTransparentBackgrounds(event.target.checked);
+              }}
+            />
+          }
+          label="Używaj przezroczystegło tła przerwy i odliczania"
+        />
+      </FormGroup>
+    </DashboardThemeProvider>
+  );
+};
+
+render(<App />);
diff --git a/src/browser/graphics/odliczanie.tsx b/src/browser/graphics/odliczanie.tsx
index acbbee8f..95da85a2 100644
--- a/src/browser/graphics/odliczanie.tsx
+++ b/src/browser/graphics/odliczanie.tsx
@@ -1,6 +1,7 @@
 import { render } from '../render';
 import gspsLogo from './img/gsps_2024_logo.png';
-import mainBg from './img/gradient_transparent.png';
+import mainBg from './img/main-background.png';
+import transparentBg from './img/gradient_transparent.png'
 import styled from 'styled-components';
 import { IoIosMusicalNotes } from 'react-icons/io';
 import { IconContext } from 'react-icons';
@@ -10,10 +11,10 @@ import { useReplicant } from 'use-nodecg';
 import { Countdown, CountdownRunning, Song } from 'src/types/generated';
 import ThemeProvider from './components/theme-provider';
 
-const LayoutContainer = styled.div`
+const LayoutContainer = styled.div<{ useTransparentBackgrounds: boolean}>`
   width: 1920px;
   height: 1030px;
-  background-image: url(${mainBg});
+  background-image: url(${(props) => (props.useTransparentBackgrounds ? transparentBg : mainBg)});
   margin: 0;
   padding: 0;
 `;
@@ -64,12 +65,13 @@ export const Odliczanie = () => {
   const [countdown] = useReplicant<Countdown | undefined>('countdown', undefined);
   const [countdownRunning] = useReplicant<CountdownRunning>('countdownRunning', false);
   const [song] = useReplicant<Song>('song', '');
+  const [useTransparentBackgrounds] = useReplicant<boolean>('useTransparentBackgrounds', true);
   const songRef = useRef(null);
   const countdownRef = useRef(null);
 
   return (
     <ThemeProvider>
-      <LayoutContainer>
+      <LayoutContainer useTransparentBackgrounds={useTransparentBackgrounds}>
         <LogoDiv>
           <Logo src={gspsLogo} />
         </LogoDiv>
diff --git a/src/browser/graphics/przerwa.tsx b/src/browser/graphics/przerwa.tsx
index cfb48a97..adde2f46 100644
--- a/src/browser/graphics/przerwa.tsx
+++ b/src/browser/graphics/przerwa.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import eventLogo from './img/gsps_2024_logo.png';
-import mainBg from './img/gradient_transparent.png';
+import mainBg from './img/main-background.png';
+import transparentBg from './img/gradient_transparent.png'
 import { render } from '../render';
 import MediaBox from './components/media-box';
 import Song from './components/przerwa/song';
@@ -9,11 +10,12 @@ import NextRuns from './components/przerwa/next-runs';
 import ThemeProvider from './components/theme-provider';
 import BreakTicker from './components/przerwa/ticker';
 import Total from './components/przerwa/total';
+import { useReplicant } from 'use-nodecg';
 
-const LayoutContainer = styled.div`
+const LayoutContainer = styled.div<{ useTransparentBackgrounds: boolean}>`
   width: 1920px;
   height: 1026px;
-  background-image: url(${mainBg});
+  background-image: url(${(props) => (props.useTransparentBackgrounds ? transparentBg : mainBg)});
   margin: 0;
   padding: 0;
   border-bottom: #5f3ac2 4px solid;
@@ -38,9 +40,11 @@ const EventLogo = styled.img`
 `;
 
 export const App = () => {
+  const [useTransparentBackgrounds] = useReplicant<boolean>('useTransparentBackgrounds', true);
+
   return (
     <ThemeProvider>
-      <LayoutContainer>
+      <LayoutContainer useTransparentBackgrounds={useTransparentBackgrounds}>
         <Song />
         <MediaBoxContainer>
           <MediaBox useBreakItem />