From f0efdd8833e65919e5898957619d0b1a08479b16 Mon Sep 17 00:00:00 2001
From: scamper07 <preetham.kulai21@gmail.com>
Date: Tue, 17 Oct 2023 00:19:35 +0530
Subject: [PATCH] updated placeholder image to tv static animation

---
 src/pages/_app.jsx              |  1 +
 src/styles/stream.css           | 15 +++++++++++++++
 src/widgets/mjpeg/component.jsx | 10 ++++------
 3 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 src/styles/stream.css

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 2a1f4c743..3318dd2ea 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -6,6 +6,7 @@ import Head from "next/head";
 import "styles/globals.css";
 import "styles/theme.css";
 import "styles/manrope.css";
+import "styles/stream.css";
 import nextI18nextConfig from "../../next-i18next.config";
 
 import { ColorProvider } from "utils/contexts/color";
diff --git a/src/styles/stream.css b/src/styles/stream.css
new file mode 100644
index 000000000..dbef1272e
--- /dev/null
+++ b/src/styles/stream.css
@@ -0,0 +1,15 @@
+.animation {
+  margin: auto;
+  background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
+  animation: tv-static 5s linear infinite;
+}
+
+@keyframes tv-static {
+  from {
+    background-size: 100% 100%;
+  }
+
+  to {
+    background-size: 200% 200%;
+  }
+}
\ No newline at end of file
diff --git a/src/widgets/mjpeg/component.jsx b/src/widgets/mjpeg/component.jsx
index 122ba5111..4fe3c868c 100644
--- a/src/widgets/mjpeg/component.jsx
+++ b/src/widgets/mjpeg/component.jsx
@@ -1,19 +1,17 @@
 import Image from "next/image";
-import { useState } from 'react';
 
 export default function Component({ service }) {
   const { widget } = service;
   const { stream, fit = "contain" } = widget;
-  const [src, setImgSrc] = useState(stream);
-
+  
   return (
     <div>
       <div className="absolute top-0 bottom-0 right-0 left-0">
-        <Image layout="fill" objectFit="fill" className="blur-md" src={src} alt="stream" onError={() => setImgSrc('https://images.unsplash.com/photo-1610337673044-720471f83677?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1972&q=80')} />
-        <Image layout="fill" objectFit={fit} className="drop-shadow-2xl" src={src} alt="stream" onError={() => setImgSrc('https://images.unsplash.com/photo-1610337673044-720471f83677?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1972&q=80')} />
+        <Image layout="fill" objectFit="fill" className="blur-md" src={stream} alt="" onError={(e) => {e.target.className='animation'}} />
+        <Image layout="fill" objectFit={fit} className="drop-shadow-2xl" alt="" src={stream} />
       </div>
       <div className="absolute top-0 right-0 bottom-0 left-0 overflow-clip shadow-[inset_0_0_200px_#000] shadow-theme-700/10 dark:shadow-theme-900/10" />
       <div className="h-[68px] overflow-clip" />
     </div>
   );
-}
+}
\ No newline at end of file