Add option to toggle intermission and countdown BG transparency

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",

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 />);

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>

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 />