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

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

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