feat: Add keyboard shortcuts hint in AppBar and add full library view

Ipmake · Jan 28, 2025 · 36c496b · 36c496b
1 parent e6f9983
commit 36c496b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/frontend/src/components/AppBar.tsx b/frontend/src/components/AppBar.tsx
@@ -35,10 +35,12 @@ import {
   People,
   Search,
   Settings,
+  ShortcutRounded,
 } from "@mui/icons-material";
 import { useSyncInterfaceState } from "./PerPlexedSync";
 import { useSyncSessionState } from "../states/SyncSessionState";
 import { config } from "..";
+import { useBigReader } from "./BigReader";
 
 const BarSide: SxProps<Theme> = {
   display: "flex",
@@ -166,6 +168,31 @@ function Appbar() {
           <ListItemText>Fullscreen</ListItemText>
         </MenuItem>
 
+        <MenuItem
+          onClick={() => {
+            useBigReader.getState().setBigReader(`
+--- Hint ---
+You can right click on any library item at the top to view the entire library.
+
+--- Browsing ---
+CTRL + F - Search
+
+--- Playback ---
+Space / k - Play/Pause
+Left Arrow / j - Back 10s
+Right Arrow / l - Forward 10s
+Up Arrow - Volume Up
+Down Arrow - Volume Down 
+S - Skip onscreen markers (intro, credits, etc)
+            `);
+          }}
+        >
+          <ListItemIcon>
+            <ShortcutRounded fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Shortcuts</ListItemText>
+        </MenuItem>
+
         <MenuItem
           onClick={() => {
             setAnchorEl(null);
@@ -228,8 +255,9 @@ function Appbar() {
             ?.filter((e) => ["movie", "show"].includes(e.type))
             .map((library) => (
               <HeadLink
-                key={library.key}
                 to={`/browse/${library.key}`}
+                key={library.key}
+                library={library}
                 active={location.pathname.includes(`/browse/${library.key}`)}
               >
                 {library.title}
@@ -643,13 +671,16 @@ function SearchBar() {
 
 function HeadLink({
   to,
+  library,
   children,
   active,
 }: {
   to: string;
+  library?: Plex.LibarySection;
   children: React.ReactNode;
   active?: boolean;
 }): JSX.Element {
+  const [, setSearchParams] = useSearchParams();
   return (
     <Link
       className={`head-link${active ? " head-link-active" : ""}`}
@@ -662,6 +693,15 @@ function HeadLink({
         fontFamily: '"Inter Variable", sans-serif',
         userSelect: "none",
       }}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        if (library)
+          setSearchParams(
+            new URLSearchParams({
+              bkey: `/library/sections/${library.key}/all`,
+            })
+          );
+      }}
       aria-current={active ? "page" : undefined}
     >
       {children}

diff --git a/frontend/src/components/BigReader.tsx b/frontend/src/components/BigReader.tsx
@@ -46,6 +46,7 @@ function BigReader() {
             fontWeight: "light",
             color: "white",
             mb: "10px",
+            whiteSpace: "pre-wrap",
           }}
         >
           {bigReader}

diff --git a/frontend/src/components/HeroDisplay.tsx b/frontend/src/components/HeroDisplay.tsx
@@ -11,15 +11,12 @@ import { useSearchParams, useNavigate } from "react-router-dom";
 import { usePreviewPlayer } from "../states/PreviewPlayerState";
 import ReactPlayer from "react-player";
 import { useBigReader } from "./BigReader";
-import { useWatchListCache } from "../states/WatchListCache";
 import { WatchListButton } from "./MovieItem";
 
 function HeroDisplay({ item }: { item: Plex.Metadata }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
 
-  const { addItem, removeItem, isOnWatchList } = useWatchListCache()
-
   const { MetaScreenPlayerMuted, setMetaScreenPlayerMuted } =
     usePreviewPlayer();