From 4da75134ed0b3281749f8941c83f14f42c1c9534 Mon Sep 17 00:00:00 2001
From: Julian <1682314+spkesDE@users.noreply.github.com>
Date: Thu, 25 Jan 2024 17:45:26 +0100
Subject: [PATCH] feat: add video background support (#1839)

---
 .../layout/Templates/BoardLayout.tsx          | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/components/layout/Templates/BoardLayout.tsx b/src/components/layout/Templates/BoardLayout.tsx
index 81f4ed712..f82730dac 100644
--- a/src/components/layout/Templates/BoardLayout.tsx
+++ b/src/components/layout/Templates/BoardLayout.tsx
@@ -243,6 +243,12 @@ const BackgroundImage = () => {
     return null;
   }
 
+  // Check if the background image URL is a video
+  const videoFormat = getVideoFormat(config?.settings.customization.backgroundImageUrl);
+  if (videoFormat) {
+    return <BackgroundVideo videoSource={config?.settings.customization.backgroundImageUrl} videoFormat={videoFormat} />;
+  }
+
   return (
     <Global
       styles={{
@@ -259,6 +265,41 @@ const BackgroundImage = () => {
   );
 };
 
+
+const getVideoFormat = (video: string) => {
+  const supportedFormats = ['mp4', 'webm', 'ogg'];
+  for(const format of supportedFormats) {
+    if(video.endsWith(format)) return format;
+  }
+  return undefined;
+}
+
+interface BackgroundVideoProps {
+  videoSource: string;
+  videoFormat: string;
+}
+
+const BackgroundVideo = ({videoSource, videoFormat}: BackgroundVideoProps) => {
+    return (
+      <video
+        autoPlay
+        muted
+        loop
+        style={{
+          position: 'fixed',
+          width: '100vw',
+          height: '100vh',
+          top: 0,
+          left: 0,
+          objectFit: 'cover'
+        }}
+      >
+        <source src={videoSource} type={`video/${videoFormat}`} />
+      </video>
+    );
+};
+
+
 export const useBoardLink = (
   link: '/board' | `/board/${string}/customize` | `/board/${string}`
 ) => {