sponsors

src/app/control/actions.ts

@@ -4,10 +4,10 @@ import { getAppState } from "@/state/getAppState";
 import { setAppState } from "@/state/setAppState";
 
 export const setLowerThird = async (
-  tl?: string,
-  bl?: string,
-  tr?: string,
-  br?: string,
+  tl: string = "",
+  bl: string = "",
+  tr: string = "",
+  br: string = "",
   duration?: number,
 ) => {
   const current = (await getAppState()).lowerThird ?? "";
@@ -15,7 +15,7 @@ export const setLowerThird = async (
 
   if (duration !== undefined) {
     setTimeout(async () => {
-      await setAppState({ lowerThird: `` });
+      await setAppState({ lowerThird: current });
     }, duration);
   }
 };

src/app/control/page.tsx

@@ -1,12 +1,47 @@
+"use client";
 import { FC } from "react";
-import { Stack } from "@mui/material";
+import { Button, Stack } from "@mui/material";
 import { LowerThirdControl } from "@/components/control/LowerThirdControl";
 import { setLowerThird } from "@/app/control/actions";
 
 const ControlScreen: FC = () => {
   return (
     <Stack gap={2}>
-      <Stack></Stack>
+      <Stack direction={"row"}>
+        <Button
+          variant={"outlined"}
+          onClick={() => {
+            void setLowerThird("social");
+          }}
+        >
+          Social media
+        </Button>
+        <Button
+          variant={"outlined"}
+          onClick={() => {
+            void setLowerThird("sponsors-SPONSOR");
+          }}
+        >
+          Sponsorzy
+        </Button>
+        <Button
+          variant={"outlined"}
+          onClick={() => {
+            void setLowerThird("sponsors-MEDIATECH");
+          }}
+        >
+          Patroni tech + medialni
+        </Button>
+        <Button
+          color={"error"}
+          variant={"outlined"}
+          onClick={() => {
+            void setLowerThird("");
+          }}
+        >
+          Zamknij
+        </Button>
+      </Stack>
       <LowerThirdControl onChange={setLowerThird} />
       <LowerThirdControl onChange={setLowerThird} />
       <LowerThirdControl onChange={setLowerThird} />

src/app/on-screen/page.tsx

@@ -6,7 +6,7 @@ import { LowerThirdBar } from "@/components/LowerThirdBar";
 import { AnimatedSection } from "@/components/AnimatedSection";
 import { Stack } from "@/components/Stack";
 
-const customGraphics = ["social"];
+const customGraphics = ["social", "sponsors-SPONSOR", "sponsors-MEDIATECH"];
 
 const Main: FC = () => {
   const [lowerThird, setLowerThird] = useState<string>("");
@@ -54,6 +54,18 @@ const Main: FC = () => {
               >
                 {header === "social" ? (
                   <img height={45} src={"/social.png"} alt={"social"} />
+                ) : header === "sponsors-SPONSOR" ? (
+                  <img
+                    height={95}
+                    src={"/sponsors-SPONSOR.png"}
+                    alt={"SPONSOR"}
+                  />
+                ) : header === "sponsors-MEDIATECH" ? (
+                  <img
+                    height={80}
+                    src={"/sponsors-MEDIATECH.png"}
+                    alt={"SPONSOR"}
+                  />
                 ) : (
                   <>
                     {header.length !== 0 && <h1>{header}</h1>}

src/components/control/LowerThirdControl/index.tsx

@@ -76,7 +76,7 @@ export const LowerThirdControl: FC<LowerThirdControlProps> = ({
           }}
           variant={active === "inf" ? "contained" : "text"}
         >
-          Inf
+          POKAŻ
         </Button>
         <Button
           onClick={() => {