diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 3318dd2e..2a1f4c74 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -6,7 +6,6 @@ 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 deleted file mode 100644 index dbef1272..00000000 --- a/src/styles/stream.css +++ /dev/null @@ -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%; - } -} \ No newline at end of file diff --git a/src/widgets/mjpeg/component.jsx b/src/widgets/mjpeg/component.jsx index 4fe3c868..122ba511 100644 --- a/src/widgets/mjpeg/component.jsx +++ b/src/widgets/mjpeg/component.jsx @@ -1,17 +1,19 @@ 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 (
- {e.target.className='animation'}} /> - + stream 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')} /> + stream 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')} />
); -} \ No newline at end of file +}