Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(VideoOverlay): update NoAutoplayPermissionsOverlay styling and improve user instructions

This commit is contained in:
Adam Shiervani 2025-03-24 21:09:48 +01:00
parent 194258d4da
commit 934433f392
1 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui/src/components/VideoOverlay.tsx
View File

@ -5,6 +5,7 @@ import { Button, LinkButton } from "@components/Button";
import LoadingSpinner from "@components/LoadingSpinner"; import LoadingSpinner from "@components/LoadingSpinner";
import { GridCard } from "@components/Card"; import { GridCard } from "@components/Card";
import { motion, AnimatePresence } from "motion/react"; import { motion, AnimatePresence } from "motion/react";
import { LuPlay } from "react-icons/lu";
interface OverlayContentProps { interface OverlayContentProps {
children: React.ReactNode; children: React.ReactNode;
@ -230,28 +231,24 @@ export function NoAutoplayPermissionsOverlay({
}} }}
> >
<OverlayContent> <OverlayContent>
<div className="flex flex-col items-start gap-y-1"> <div className="space-y-4">
<ExclamationTriangleIcon className="h-12 w-12 text-yellow-500" /> <h2 className="text-2xl font-extrabold text-black dark:text-white">
<div className="text-left text-sm text-slate-700 dark:text-slate-300"> Autoplay permissions required
<div className="space-y-4"> </h2>
<div className="space-y-2 text-black dark:text-white">
<h2 className="text-xl font-bold">Autoplay Permissions Required</h2> <div className="space-y-2 text-center">
<ul className="list-disc space-y-2 pl-4 text-left"> <div>
<li>Your browser is blocking automatic video playback</li> <Button
<li>Click anywhere on the video area to start the stream</li> size="MD"
<li>To avoid this in the future, allow autoplay for this site</li> theme="primary"
</ul> LeadingIcon={LuPlay}
</div> text="Manually start stream"
<div className="flex items-center justify-center gap-x-2"> onClick={onPlayClick}
<Button />
size="MD" </div>
theme="light"
fullWidth <div className="text-xs text-slate-600 dark:text-slate-400">
LeadingIcon={PlayIcon} Please adjust browser settings to enable autoplay
text="Manually start stream"
onClick={onPlayClick}
/>
</div>
</div> </div>
</div> </div>
</div> </div>