From ab167d565acace2dbdcd0a66b7f9852bfeabd96d Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Tue, 21 Nov 2023 18:22:50 +0100 Subject: [PATCH] Add popup close keyboard shortcut, more tabbable styles --- src/components/buttons/Toggle.tsx | 2 +- src/components/media/MediaCard.tsx | 12 +++++++++--- .../player/atoms/settings/CaptionSettingsView.tsx | 11 ++++++----- .../player/atoms/settings/CaptionsView.tsx | 1 + .../player/atoms/settings/PlaybackSettingsView.tsx | 2 +- src/components/player/base/BackLink.tsx | 7 ++++--- src/components/player/internals/Button.tsx | 2 +- .../player/internals/ContextMenu/Input.tsx | 2 +- .../player/internals/ContextMenu/Links.tsx | 6 +++--- src/components/player/internals/KeyboardEvents.tsx | 5 ++++- src/setup/index.css | 2 +- 11 files changed, 32 insertions(+), 20 deletions(-) diff --git a/src/components/buttons/Toggle.tsx b/src/components/buttons/Toggle.tsx index 7f477056..cdca03d6 100644 --- a/src/components/buttons/Toggle.tsx +++ b/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" )} > diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx index 6c11eb44..1277abf8 100644 --- a/src/components/media/MediaCard.tsx +++ b/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 {content}; return ( - + {content} ); diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx index bb29f329..10d2792a 100644 --- a/src/components/player/atoms/settings/CaptionSettingsView.tsx +++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx @@ -14,9 +14,10 @@ export function ColorOption(props: { onClick: () => void; }) { return ( -
) : null}
- + ); } @@ -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 ( diff --git a/src/components/player/atoms/settings/CaptionsView.tsx b/src/components/player/atoms/settings/CaptionsView.tsx index aab0d20c..efc51af5 100644 --- a/src/components/player/atoms/settings/CaptionsView.tsx +++ b/src/components/player/atoms/settings/CaptionsView.tsx @@ -153,6 +153,7 @@ export function CaptionsView({ id }: { id: string }) { diff --git a/src/components/player/atoms/settings/PlaybackSettingsView.tsx b/src/components/player/atoms/settings/PlaybackSettingsView.tsx index 4491ca0b..c71c5627 100644 --- a/src/components/player/atoms/settings/PlaybackSettingsView.tsx +++ b/src/components/player/atoms/settings/PlaybackSettingsView.tsx @@ -17,7 +17,7 @@ function ButtonList(props: { ); } diff --git a/src/components/player/internals/Button.tsx b/src/components/player/internals/Button.tsx index 7421662d..16ddda0b 100644 --- a/src/components/player/internals/Button.tsx +++ b/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 ?? "", diff --git a/src/components/player/internals/ContextMenu/Input.tsx b/src/components/player/internals/ContextMenu/Input.tsx index 79023f88..2428e715 100644 --- a/src/components/player/internals/ContextMenu/Input.tsx +++ b/src/components/player/internals/ContextMenu/Input.tsx @@ -12,7 +12,7 @@ export function Input(props: { /> props.onInput(e.currentTarget.value)} /> diff --git a/src/components/player/internals/ContextMenu/Links.tsx b/src/components/player/internals/ContextMenu/Links.tsx index d28817f9..616647a9 100644 --- a/src/components/player/internals/ContextMenu/Links.tsx +++ b/src/components/player/internals/ContextMenu/Links.tsx @@ -39,7 +39,7 @@ export function BackLink(props: { <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, }); diff --git a/src/components/player/internals/KeyboardEvents.tsx b/src/components/player/internals/KeyboardEvents.tsx index 4b3e002d..101ac3dd 100644 --- a/src/components/player/internals/KeyboardEvents.tsx +++ b/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; } diff --git a/src/setup/index.css b/src/setup/index.css index 57409891..6af17060 100644 --- a/src/setup/index.css +++ b/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'); } \ No newline at end of file