Autoplay permission handling (#285)

* feat(WebRTC): enhance connection management with connection failures after X attempts or a certain time

* refactor(WebRTC): simplify WebRTCVideo component and enhance connection error handling

* fix(WebRTC): extend connection timeout from 1 second to 60 seconds for improved error handling

* feat(VideoOverlay): add NoAutoplayPermissionsOverlay component and improve HDMIErrorOverlay content

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

* Remove unused PlayIcon import to clean up code

ui/src/components/VideoOverlay.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import { ArrowRightIcon } from "@heroicons/react/16/solid";
-import { LinkButton } from "@components/Button";
+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;
@@ -34,7 +35,7 @@ export function LoadingOverlay({ show }: LoadingOverlayProps) {
           exit={{ opacity: 0 }}
           transition={{
             duration: show ? 0.3 : 0.1,
-            ease: "easeInOut"
+            ease: "easeInOut",
           }}
         >
           <OverlayContent>
@@ -68,7 +69,7 @@ export function ConnectionErrorOverlay({ show }: ConnectionErrorOverlayProps) {
           exit={{ opacity: 0 }}
           transition={{
             duration: 0.3,
-            ease: "easeInOut"
+            ease: "easeInOut",
           }}
         >
           <OverlayContent>
@@ -118,25 +119,27 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
       <AnimatePresence>
         {show && isNoSignal && (
           <motion.div
-            className="absolute inset-0 w-full h-full aspect-video"
+            className="absolute inset-0 aspect-video h-full w-full"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{
               duration: 0.3,
-              ease: "easeInOut"
+              ease: "easeInOut",
             }}
           >
             <OverlayContent>
               <div className="flex flex-col items-start gap-y-1">
-                <ExclamationTriangleIcon className="w-12 h-12 text-yellow-500" />
+                <ExclamationTriangleIcon className="h-12 w-12 text-yellow-500" />
-                <div className="text-sm text-left text-slate-700 dark:text-slate-300">
+                <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">No HDMI signal detected.</h2>
                       <ul className="list-disc space-y-2 pl-4 text-left">
                         <li>Ensure the HDMI cable securely connected at both ends</li>
-                        <li>Ensure source device is powered on and outputting a signal</li>
+                        <li>
+                          Ensure source device is powered on and outputting a signal
+                        </li>
                         <li>
                           If using an adapter, it&apos;s compatible and functioning
                           correctly
@@ -169,7 +172,7 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
             exit={{ opacity: 0 }}
             transition={{
               duration: 0.3,
-              ease: "easeInOut"
+              ease: "easeInOut",
             }}
           >
             <OverlayContent>
@@ -187,7 +190,7 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
                     </div>
                     <div>
                       <LinkButton
-                        to={"/help/hdmi-error"}
+                        to={"https://jetkvm.com/docs/getting-started/troubleshooting"}
                         theme="light"
                         text="Learn more"
                         TrailingIcon={ArrowRightIcon}
@@ -204,3 +207,54 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
     </>
   );
 }
+
+interface NoAutoplayPermissionsOverlayProps {
+  show: boolean;
+  onPlayClick: () => void;
+}
+
+export function NoAutoplayPermissionsOverlay({
+  show,
+  onPlayClick,
+}: NoAutoplayPermissionsOverlayProps) {
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className="absolute inset-0 z-10 aspect-video h-full w-full"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{
+            duration: 0.3,
+            ease: "easeInOut",
+          }}
+        >
+          <OverlayContent>
+            <div className="space-y-4">
+              <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="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>
+          </OverlayContent>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

ui/src/components/WebRTCVideo.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   useDeviceSettingsStore,
   useHidStore,
@@ -15,7 +15,7 @@ import Actionbar from "@components/ActionBar";
 import InfoBar from "@components/InfoBar";
 import useKeyboard from "@/hooks/useKeyboard";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
-import { HDMIErrorOverlay } from "./VideoOverlay";
+import { HDMIErrorOverlay, NoAutoplayPermissionsOverlay } from "./VideoOverlay";
 import { ConnectionErrorOverlay } from "./VideoOverlay";
 import { LoadingOverlay } from "./VideoOverlay";
 
@@ -418,6 +418,7 @@ export default function WebRTCVideo() {
     [keyDownHandler, keyUpHandler, resetKeyboardState, sendKeyboardEvent],
   );
 
+  // Setup Video Event Listeners
   useEffect(
     function setupVideoEventListeners() {
       const videoElmRefValue = videoElm.current;
@@ -510,6 +511,14 @@ export default function WebRTCVideo() {
     [settings.mouseMode, relMouseMoveHandler, mouseWheelHandler],
   );
 
+  const hasNoAutoPlayPermissions = useMemo(() => {
+    if (peerConnectionState !== "connected") return false;
+    if (isPlaying) return false;
+    if (hdmiError) return false;
+    if (videoHeight === 0 || videoWidth === 0) return false;
+    return true;
+  }, [peerConnectionState, isPlaying, hdmiError, videoHeight, videoWidth]);
+
   return (
     <div className="grid h-full w-full grid-rows-layout">
       <div className="min-h-[39.5px]">
@@ -575,6 +584,12 @@ export default function WebRTCVideo() {
                           <LoadingOverlay show={isLoading} />
                           <ConnectionErrorOverlay show={isConnectionError} />
                           <HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} />
+                          <NoAutoplayPermissionsOverlay
+                            show={hasNoAutoPlayPermissions}
+                            onPlayClick={() => {
+                              videoElm.current?.play();
+                            }}
+                          />
                         </div>
                       </div>
                     </div>