From 2f4985b977180e0922d0814a1fc485073c97e626 Mon Sep 17 00:00:00 2001
From: Preetham Kulai <preetham.kulai21@gmail.com>
Date: Tue, 17 Oct 2023 01:42:28 +0530
Subject: [PATCH] Enhancement: mjpeg stream widget placeholder image (#2192)

* added placeholder image on stream load error

* updated placeholder image to tv static animation

* Revert "updated placeholder image to tv static animation"

This reverts commit f0efdd8833e65919e5898957619d0b1a08479b16.

* Inline animated tv static image

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
---
 src/widgets/mjpeg/component.jsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/widgets/mjpeg/component.jsx b/src/widgets/mjpeg/component.jsx
index 30907c311..b5a07a915 100644
--- a/src/widgets/mjpeg/component.jsx
+++ b/src/widgets/mjpeg/component.jsx
@@ -6,8 +6,31 @@ export default function Component({ service }) {
 
   return (
     <div>
+      <style>{`
+        .tv-static img {
+          display: none !important;
+        }
+        .tv-static {
+          margin: auto;
+          background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
+          animation: tv-static 5s linear infinite;
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+        @keyframes tv-static {
+          from {
+            background-size: 100% 100%;
+          }
+          to {
+            background-size: 200% 200%;
+          }
+        }
+      `}</style>
       <div className="absolute top-0 bottom-0 right-0 left-0">
-        <Image layout="fill" objectFit="fill" className="blur-md" src={stream} alt="stream" />
+        <Image layout="fill" objectFit="fill" className="blur-md" src={stream} alt="stream" onError={(e) => {e.target.parentElement.parentElement.className='tv-static'}} />
         <Image layout="fill" objectFit={fit} className="drop-shadow-2xl" src={stream} alt="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" />