codeday · aramshiva · Feb 2, 2025 · Feb 2, 2025 · Feb 2, 2025
diff --git a/bun.lock b/bun.lock
diff --git a/components/live/index.js b/components/live/index.js
@@ -1,13 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Head from 'next/head';
-import styled from 'styled-components';
-import { Slide } from '../screen';
-import { Title } from '../screen/text';
-import Schedule from './schedule';
-import NowPlaying from '../now-playing';
-import Social from './social';
-import Video from './video';
+import React from "react";
+import PropTypes from "prop-types";
+import Head from "next/head";
+import styled from "styled-components";
+import { Slide } from "../screen";
+import { Title } from "../screen/text";
+import Schedule from "./schedule";
+import NowPlaying from "../now-playing";
+import Social from "./social";
+import OBS from "./obs";
 
 const leftWidth = 30;
 
@@ -31,7 +31,11 @@ const ScheduleBox = styled.div`
     top: 0;
     bottom: 0;
     width: 4vw;
-    background-image: linear-gradient(to right, rgba(255, 104, 107, 0), rgba(255, 104, 107, 1));
+    background-image: linear-gradient(
+      to right,
+      rgba(255, 104, 107, 0),
+      rgba(255, 104, 107, 1)
+    );
   }
 
   &:after {
@@ -42,7 +46,10 @@ const ScheduleBox = styled.div`
     bottom: 0;
     left: 0;
     right: 0;
-    background-image: linear-gradient(rgba(255, 104, 107, 0), rgba(255, 104, 107, 1));
+    background-image: linear-gradient(
+      rgba(255, 104, 107, 0),
+      rgba(255, 104, 107, 1)
+    );
   }
 `;
 
@@ -73,29 +80,30 @@ export default class Live extends React.Component {
   static propTypes = {
     event: PropTypes.object.isRequired,
     config: PropTypes.object.isRequired,
-  }
+  };
 
   componentDidMount() {
     this.forceUpdate();
   }
 
   render() {
     const { event, config } = this.props;
-    if (typeof window === 'undefined') return null;
+    if (typeof window === "undefined") return null;
 
     return (
       <Slide padding="0">
         <Head>
-          <link rel="stylesheet" href="https://f1.codeday.org/fonts/gosha-sans/all.css" />
+          <link
+            rel="stylesheet"
+            href="https://f1.codeday.org/fonts/gosha-sans/all.css"
+          />
         </Head>
         <ScheduleBox>
           <Schedule event={event} config={config} />
         </ScheduleBox>
-        <RadioBox>
-          {config.radio && <NowPlaying align="left" />}
-        </RadioBox>
+        <RadioBox>{config.radio && <NowPlaying align="left" />}</RadioBox>
         <SocialBox>
-          <Video purpose="intro"/>
+          <OBS/>
         </SocialBox>
       </Slide>
     );

diff --git a/components/live/obs/fallbackslide.js b/components/live/obs/fallbackslide.js
@@ -0,0 +1,91 @@
+import React, { useEffect } from 'react';
+import dynamic from 'next/dynamic';
+import Text from '@codeday/topo/Atom/Text';
+import Box from '@codeday/topo/Atom/Box';
+import Image from 'next/image';
+
+const ReactTypingEffect = dynamic(
+  () => import('react-typing-effect'),
+  { ssr: false },
+);
+
+const hellos = [
+    'Pershendetje shoku im!',
+    'Բարեւ իմ ընկեր!',
+    'Salam dostum!',
+    'Kaixo lagun!',
+    'Вітаю мой сябар!',
+    'Zdravo prijatelju!',
+    'Здравей приятелю!',
+    'Hola amic meu!',
+    'Kumusta akong higala!',
+    'Moni mnzanga!',
+    '朋友你好！',
+    'Salutu o amicu!',
+    'Zdravo prijatelju!',
+    'Ahoj příteli!',
+    'Hej min ven!',
+    'Hallo mijn vriend!',
+    'Hello my friend!',
+    'Tere mu sõber!',
+    'Kumusta Kaibigan ko!',
+    'Hei ystäväni!',
+    'Bonjour, mon ami!',
+    'Hallo myn freon!',
+    'Hola meu amigo!',
+    'Hallo, mein Freund!',
+    'Γεια σου φίλε μου!',
+    'Bonjou zanmi mwen!',
+    'Sannu abokina!',
+    'Aloha e kuʻu hoaaloha!',
+    'Szia barátom!',
+    'Halló, vinur minn!',
+    'Ndewo, enyi m!',
+    'Ndewo, enyi m!',
+    'Dia duit a chara!',
+    'Ciao amico!',
+    'こんにちは、友よ！',
+    'Halo kancaku!',
+    'Сәлеметсіз бе менің досым!',
+    'Mwaramutse nshuti yanjye!',
+    'Silav hevalê min!',
+    'Salve amice!',
+    'Sveiks mans draugs!',
+    'Labas mano drauge!',
+    'Hallo mäi Frënd!',
+    'Здраво пријателе!',
+    'Ahoy Mateys!',
+    'سلام دوست من!',
+    'Привет мой друг!',
+    '안녕 내 친구!',
+    'สวัสดีเพื่อนของฉัน!',
+    'Merhaba arkadaşım!',
+    'Xin chào bạn của tôi!',
+    'Olá meu amigo!',
+    'مرحبا صديقي!',
+    'שלום חבר שלי!',
+    'नमस्ते मेरे दोस्त!',
+];
+
+export default function FallbackSlide({ onComplete }) {
+  useEffect(() => {
+    const interval = setInterval(onComplete, 5000);
+    return () => clearInterval(interval);
+  }, [onComplete]);
+
+return (
+    <Box p={8} style={{ backgroundColor: '#ff686b', color: '#fff', position: 'relative', height: '60vh' }}>
+        <Box position="absolute" top="calc(50% - 6em)" left={0} right={0} textAlign="center">
+            <Image src="/logo.png" alt="CodeDay" width={266} height={52.6} />
+            <Text as="div" fontSize="xl">
+                <ReactTypingEffect
+                    speed={50}
+                    eraseSpeed={50}
+                    typingDelay={100}
+                    text={hellos.sort(() => Math.random() > 0.5 ? 1 : -1)}
+                />
+            </Text>
+        </Box>
+    </Box>
+)
+}
diff --git a/components/live/obs/index.js b/components/live/obs/index.js
@@ -0,0 +1,12 @@
+import React, { useState, useEffect } from "react";
+import Video from "./video";
+import FallbackSlide from "./fallbackslide";
+
+const INTERVAL = 5 * 60 * 1000;
+export default function OBS() {
+  return (
+    <>
+      <Video fallback={<FallbackSlide />} purpose="live" />
+    </>
+  );
+}
diff --git a/components/live/video.js → components/live/obs/video.js b/components/live/video.js → components/live/obs/video.js
@@ -98,4 +98,4 @@ export default function Video(purpose) {
             </div>
         </>
     );
-}
+}
diff --git a/package.json b/package.json
@@ -14,7 +14,9 @@
     "apollo-cache-inmemory": "^1.6.3",
     "apollo-client": "^2.6.4",
     "apollo-link-prismic": "^1.0.4",
+    "confetti-react": "^2.6.0",
     "dotenv": "^8.1.0",
+    "framer-motion": "^12.0.6",
     "graphql": "^14.5.8",
     "graphql-tag": "^2.10.1",
     "luxon": "^2.1.1",
@@ -28,10 +30,14 @@
     "random-seed": "^0.3.0",
     "react": "^18.2.0",
     "react-addons-css-transition-group": "^15.6.2",
+    "react-canvas-confetti": "^2.0.7",
+    "react-confetti": "^6.2.2",
     "react-dom": "^18.2.0",
     "react-player": "^2.16.0",
     "react-sound": "^1.2.0",
+    "react-typing-effect": "^2.0.5",
     "react-typist-n10": "^2.0.4",
+    "react-use": "^17.6.0",
     "react-youtube": "^7.9.0",
     "styled-components": "^4.4.0",
     "superagent": "^5.1.0"

diff --git a/public/logo.png b/public/logo.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -98,4 +98,4 @@ export default function Video(purpose) { @@
                 </div>
             </>
         );
-    }
+    }