Add popup close keyboard shortcut, more tabbable styles

src/components/buttons/Toggle.tsx

@@ -6,7 +6,7 @@ export function Toggle(props: { onClick: () => void; enabled?: boolean }) {
       type="button"
       onClick={props.onClick}
       className={classNames(
-        "w-11 h-6 p-1 rounded-full grid transition-colors duration-100 group/toggle",
+        "w-11 h-6 p-1 rounded-full grid transition-colors duration-100 group/toggle tabbable",
         props.enabled ? "bg-buttons-toggle" : "bg-buttons-toggleDisabled"
       )}
     >

src/components/media/MediaCard.tsx

@@ -1,4 +1,4 @@
-import c from "classnames";
+import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
@@ -50,7 +50,7 @@ function MediaCardContent({
         flareSize={300}
         cssColorVar="--colors-mediaCard-hoverAccent"
         backgroundClass="bg-mediaCard-hoverBackground duration-100"
-        className={c({
+        className={classNames({
           "rounded-xl bg-background-main group-hover:opacity-100": canLink,
         })}
       />
@@ -155,7 +155,13 @@ export function MediaCard(props: MediaCardProps) {
 
   if (!props.linkable) return <span>{content}</span>;
   return (
-    <Link to={link} className={props.closable ? "hover:cursor-default" : ""}>
+    <Link
+      to={link}
+      className={classNames(
+        "tabbable",
+        props.closable ? "hover:cursor-default" : ""
+      )}
+    >
       {content}
     </Link>
   );

src/components/player/atoms/settings/CaptionSettingsView.tsx

@@ -14,9 +14,10 @@ export function ColorOption(props: {
   onClick: () => void;
 }) {
   return (
-    <div
+    <button
+      type="button"
       className={classNames(
-        "p-1.5 bg-video-context-buttonFocus rounded transition-colors duration-100",
+        "tabbable p-1.5 bg-video-context-buttonFocus rounded transition-colors duration-100",
         props.active ? "bg-opacity-100" : "bg-opacity-0 cursor-pointer"
       )}
       onClick={props.onClick}
@@ -29,7 +30,7 @@ export function ColorOption(props: {
           <Icon className="text-sm text-black" icon={Icons.CHECKMARK} />
         ) : null}
       </div>
-    </div>
+    </button>
   );
 }
 
@@ -77,11 +78,11 @@ export function CaptionSetting(props: {
     };
   }, [isFocused]);
 
-  const inputClasses = `py-1 bg-video-context-inputBg rounded text-white cursor-text ${
+  const inputClasses = `tabbable py-1 bg-video-context-inputBg rounded text-white cursor-text ${
     props.controlButtons ? "text-center px-4 w-24" : "px-3 text-left w-20"
   }`;
   const arrowButtonClasses =
-    "hover:text-white transition-colors duration-100 w-full h-full flex justify-center items-center hover:bg-video-context-buttonOverInputHover rounded";
+    "tabbable hover:text-white transition-colors duration-100 w-full h-full flex justify-center items-center hover:bg-video-context-buttonOverInputHover rounded";
   const textTransformer = props.textTransformer ?? ((s) => s);
 
   return (

src/components/player/atoms/settings/CaptionsView.tsx

@@ -153,6 +153,7 @@ export function CaptionsView({ id }: { id: string }) {
             <button
               type="button"
               onClick={() => router.navigate("/captions/settings")}
+              className="py-1 -my-1 px-3 -mx-3 rounded tabbable"
             >
               Customize
             </button>

src/components/player/atoms/settings/PlaybackSettingsView.tsx

@@ -17,7 +17,7 @@ function ButtonList(props: {
           <button
             type="button"
             className={classNames(
-              "w-full px-2 py-1 rounded-md",
+              "w-full px-2 py-1 rounded-md tabbable",
               props.selected === option
                 ? "bg-video-context-buttons-active text-white"
                 : null

src/components/player/base/BackLink.tsx

@@ -9,14 +9,15 @@ export function BackLink(props: { url: string }) {
 
   return (
     <div className="flex items-center">
-      <span
+      <button
+        type="button"
         onClick={() => history.push(props.url)}
-        className="flex items-center cursor-pointer text-type-secondary hover:text-white transition-colors duration-200 font-medium"
+        className="py-1 -my-1 px-2 -mx-2 tabbable rounded-lg flex items-center cursor-pointer text-type-secondary hover:text-white transition-colors duration-200 font-medium"
       >
         <Icon className="mr-2" icon={Icons.ARROW_LEFT} />
         <span className="md:hidden">{t("videoPlayer.backToHomeShort")}</span>
         <span className="hidden md:block">{t("videoPlayer.backToHome")}</span>
-      </span>
+      </button>
     </div>
   );
 }

src/components/player/internals/Button.tsx

@@ -22,7 +22,7 @@ export const VideoPlayerButton = forwardRef<
       type="button"
       onClick={(e) => props.onClick?.(e.currentTarget as HTMLButtonElement)}
       className={classNames([
-        "p-2 rounded-full hover:bg-video-buttonBackground hover:bg-opacity-50 transition-transform duration-100 flex items-center",
+        "tabbable p-2 rounded-full hover:bg-video-buttonBackground hover:bg-opacity-50 transition-transform duration-100 flex items-center",
         props.activeClass ??
           "active:scale-110 active:bg-opacity-75 active:text-white",
         props.className ?? "",

src/components/player/internals/ContextMenu/Input.tsx

@@ -12,7 +12,7 @@ export function Input(props: {
       />
       <input
         placeholder="Search"
-        className="w-full py-2 px-3 pl-[calc(0.75rem+24px)] focus:outline-none bg-video-context-inputBg rounded placeholder:text-video-context-inputPlaceholder"
+        className="w-full py-2 px-3 pl-[calc(0.75rem+24px)] tabbable bg-video-context-inputBg rounded placeholder:text-video-context-inputPlaceholder"
         value={props.value}
         onInput={(e) => props.onInput(e.currentTarget.value)}
       />

src/components/player/internals/ContextMenu/Links.tsx

@@ -39,7 +39,7 @@ export function BackLink(props: {
     <Title rightSide={props.rightSide}>
       <button
         type="button"
-        className="-ml-2 p-2 rounded hover:bg-video-context-light hover:bg-opacity-10"
+        className="-ml-2 p-2 rounded tabbable hover:bg-video-context-light hover:bg-opacity-10"
         onClick={props.onClick}
       >
         <Icon className="text-xl" icon={Icons.ARROW_LEFT} />
@@ -57,9 +57,9 @@ export function Link(props: {
   children?: ReactNode;
   className?: string;
 }) {
-  const classes = classNames("flex py-2 px-3 rounded w-full -ml-3", {
+  const classes = classNames("flex py-2 px-3 rounded-lg w-full -ml-3", {
     "cursor-default": !props.clickable,
-    "hover:bg-video-context-hoverColor hover:bg-opacity-50 cursor-pointer":
+    "hover:bg-video-context-hoverColor hover:bg-opacity-50 cursor-pointer tabbable":
       props.clickable,
     "bg-video-context-hoverColor bg-opacity-50": props.active,
   });

src/components/player/internals/KeyboardEvents.tsx

@@ -2,10 +2,12 @@ import { useEffect, useRef, useState } from "react";
 
 import { useCaptions } from "@/components/player/hooks/useCaptions";
 import { useVolume } from "@/components/player/hooks/useVolume";
+import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 import { usePlayerStore } from "@/stores/player/store";
 import { useEmpheralVolumeStore } from "@/stores/volume";
 
 export function KeyboardEvents() {
+  const router = useOverlayRouter("");
   const display = usePlayerStore((s) => s.display);
   const mediaPlaying = usePlayerStore((s) => s.mediaPlaying);
   const time = usePlayerStore((s) => s.progress.time);
@@ -90,6 +92,7 @@ export function KeyboardEvents() {
         dataRef.current.display?.[
           dataRef.current.mediaPlaying.isPaused ? "play" : "pause"
         ]();
+      if (k === "Escape") router.close();
 
       // captions
       if (k === "c") dataRef.current.toggleLastUsed().catch(() => {}); // ignore errors
@@ -114,7 +117,7 @@ export function KeyboardEvents() {
     return () => {
       window.removeEventListener("keydown", keyEventHandler);
     };
-  }, []);
+  }, [router]);
 
   return null;
 }

src/setup/index.css

@@ -216,6 +216,6 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
 }
 
 .tabbable:focus {
-  outline: 1px solid theme('colors.themePreview.primary');
+  outline: 2px solid theme('colors.themePreview.primary');
   box-shadow: 0 0 10px theme('colors.themePreview.secondary');
 }