4565: Added slide with theme fixture

Author: tuj

assets/shared/slide-utils/slide-util.jsx

@@ -63,6 +63,7 @@ function ThemeStyles({ id, css = null }) {
   const slideCss = css.replaceAll("#SLIDE_ID", `#${id}`);
 
   const ThemeComponent = createGlobalStyle`${slideCss}`;
+
   return <ThemeComponent />;
 }
 

assets/shared/templates/image-text.jsx

@@ -44,7 +44,6 @@ function ImageText({ slide, content, run, slideDone, executionId }) {
   const imageTimeoutRef = useRef();
   const [images, setImages] = useState([]);
   const [currentImage, setCurrentImage] = useState();
-  const [themeCss, setThemeCss] = useState(null);
   const logo = slide?.theme?.logo;
   const {
     showLogo,
@@ -69,15 +68,6 @@ function ImageText({ slide, content, run, slideDone, executionId }) {
     logoClasses.push(logoPosition);
   }
 
-  // Set theme styles.
-  useEffect(() => {
-    if (slide?.theme?.cssStyles) {
-      setThemeCss(
-        <ThemeStyles id={executionId} css={slide?.theme?.cssStyles} />,
-      );
-    }
-  }, [slide]);
-
   // Styling from content
   const {
     separator,
@@ -257,7 +247,9 @@ function ImageText({ slide, content, run, slideDone, executionId }) {
         )}
       </div>
 
-      {themeCss}
+      {slide?.theme?.cssStyles && (
+        <ThemeStyles id={executionId} css={slide.theme.cssStyles} />
+      )}
     </>
   );
 }

assets/template/fixtures/slide-fixtures.js

@@ -883,6 +883,27 @@ const slideFixtures = [
       fontSize: "font-size-lg",
     },
   },
+  {
+    id: "image-text-4-test-theme",
+    templateData: {
+      id: "01FP2SNGFN0BZQH03KCBXHKYHG",
+    },
+    themeFile: "/fixtures/example.css",
+    content: {
+      duration: 5000,
+      title: "Overskriften er her",
+      text: "Dette er brødtekst lorem ipsum dolor sit amet....",
+      image: [],
+      boxAlign: "top",
+      boxMargin: false,
+      shadow: true,
+      separator: false,
+      halfSize: false,
+      reversed: false,
+      mediaContain: true,
+      fontSize: "font-size-xl",
+    },
+  },
   {
     id: "instagram-0",
     templateData: {

assets/template/index.jsx

@@ -70,7 +70,7 @@ export const Slide = ({ slide: inputSlide }) => {
   useEffect(() => {
     if (inputSlide !== null) {
       const newSlide = { ...inputSlide };
-      newSlide.executionId = "" + new Date().getTime();
+      newSlide.executionId = "SLIDE_ID";
 
       // Attach theme.
       if (newSlide?.themeFile) {

fixtures/public/fixtures/example.css

@@ -0,0 +1,19 @@
+/*
+* Example theme file
+* #SLIDE_ID should always encapsulate all your theme styling
+* #SLIDE_ID will be replaced at runtime with the given slide execution id to make sure the theme styling
+* only applies to the given slide.
+*/
+
+#SLIDE_ID {
+  --bg-light: red;
+  --bg-dark: blue;
+  --text-light: purple;
+  --text-dark: green;
+  --text-color: yellow;
+}
+
+#SLIDE_ID .text {
+  background-color: var(--bg-light);
+  color: var(--text-color);
+}