OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "updated placeholder image to tv static animation"

Browse Source 
This reverts commit f0efdd8833.
This commit is contained in:
shamoon 2023-10-16 11:56:57 -07:00
parent f0efdd8833
commit ae99eeb32b
3 changed files with 6 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/_app.jsx
View File

@ -6,7 +6,6 @@ import Head from "next/head";
import "styles/globals.css"; import "styles/globals.css";
import "styles/theme.css"; import "styles/theme.css";
import "styles/manrope.css"; import "styles/manrope.css";
import "styles/stream.css";
import nextI18nextConfig from "../../next-i18next.config"; import nextI18nextConfig from "../../next-i18next.config";
import { ColorProvider } from "utils/contexts/color"; import { ColorProvider } from "utils/contexts/color";

15
src/styles/stream.css
View File

@ -1,15 +0,0 @@
.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%;
}
}

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

@ -1,14 +1,16 @@
import Image from "next/image"; import Image from "next/image";
import { useState } from 'react';
export default function Component({ service }) { export default function Component({ service }) {
const { widget } = service; const { widget } = service;
const { stream, fit = "contain" } = widget; const { stream, fit = "contain" } = widget;
const [src, setImgSrc] = useState(stream);
return ( return (
<div> <div>
<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="" onError={(e) => {e.target.className='animation'}} /> <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" alt="" src={stream} /> <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')} />
</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" />
<div className="h-[68px] overflow-clip" /> <div className="h-[68px] overflow-clip" />