Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enhancement: mjpeg stream widget placeholder image (#2192)

Browse Source 
* 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>
This commit is contained in:
Preetham Kulai 2023-10-17 01:42:28 +05:30 committed by GitHub
parent 8d34dc5725
commit 2f4985b977
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/widgets/mjpeg/component.jsx
View File

@ -6,8 +6,31 @@ export default function Component({ service }) {
return ( return (
<div> <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"> <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" /> <Image layout="fill" objectFit={fit} className="drop-shadow-2xl" src={stream} alt="stream" />
</div> </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="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" />