mirror of
https://github.com/stashapp/stash.git
synced 2025-12-17 20:34:37 +03:00
Add keyboard shortcuts (#637)
* Add documentation * Fix manual styling * Add dialog for setting Movie images * Mention manual in README
This commit is contained in:
@@ -15,6 +15,7 @@ import { LoadingIndicator, Icon } from "src/components/Shared";
|
||||
import { useToast } from "src/hooks";
|
||||
import { ScenePlayer } from "src/components/ScenePlayer";
|
||||
import { TextUtils, JWUtils } from "src/utils";
|
||||
import * as Mousetrap from "mousetrap";
|
||||
import { SceneMarkersPanel } from "./SceneMarkersPanel";
|
||||
import { SceneFileInfoPanel } from "./SceneFileInfoPanel";
|
||||
import { SceneEditPanel } from "./SceneEditPanel";
|
||||
@@ -38,6 +39,8 @@ export const Scene: React.FC = () => {
|
||||
const [decrementO] = useSceneDecrementO(scene?.id ?? "0");
|
||||
const [resetO] = useSceneResetO(scene?.id ?? "0");
|
||||
|
||||
const [activeTabKey, setActiveTabKey] = useState("scene-details-panel");
|
||||
|
||||
const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState<boolean>(false);
|
||||
|
||||
const queryParams = queryString.parse(location.search);
|
||||
@@ -177,7 +180,10 @@ export const Scene: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Tab.Container defaultActiveKey="scene-details-panel">
|
||||
<Tab.Container
|
||||
activeKey={activeTabKey}
|
||||
onSelect={(k) => setActiveTabKey(k)}
|
||||
>
|
||||
<div>
|
||||
<Nav variant="tabs" className="mr-auto">
|
||||
<Nav.Item>
|
||||
@@ -224,7 +230,11 @@ export const Scene: React.FC = () => {
|
||||
<SceneDetailPanel scene={scene} />
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey="scene-markers-panel" title="Markers">
|
||||
<SceneMarkersPanel scene={scene} onClickMarker={onClickMarker} />
|
||||
<SceneMarkersPanel
|
||||
scene={scene}
|
||||
onClickMarker={onClickMarker}
|
||||
isVisible={activeTabKey === "scene-markers-panel"}
|
||||
/>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey="scene-movie-panel" title="Movies">
|
||||
<SceneMoviePanel scene={scene} />
|
||||
@@ -245,6 +255,7 @@ export const Scene: React.FC = () => {
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey="scene-edit-panel" title="Edit">
|
||||
<SceneEditPanel
|
||||
isVisible={activeTabKey === "scene-edit-panel"}
|
||||
scene={scene}
|
||||
onUpdate={(newScene) => setScene(newScene)}
|
||||
onDelete={() => setIsDeleteAlertOpen(true)}
|
||||
@@ -255,6 +266,23 @@ export const Scene: React.FC = () => {
|
||||
);
|
||||
}
|
||||
|
||||
// set up hotkeys
|
||||
useEffect(() => {
|
||||
Mousetrap.bind("a", () => setActiveTabKey("scene-details-panel"));
|
||||
Mousetrap.bind("e", () => setActiveTabKey("scene-edit-panel"));
|
||||
Mousetrap.bind("k", () => setActiveTabKey("scene-markers-panel"));
|
||||
Mousetrap.bind("f", () => setActiveTabKey("scene-file-info-panel"));
|
||||
Mousetrap.bind("o", () => onIncrementClick());
|
||||
|
||||
return () => {
|
||||
Mousetrap.unbind("a");
|
||||
Mousetrap.unbind("e");
|
||||
Mousetrap.unbind("k");
|
||||
Mousetrap.unbind("f");
|
||||
Mousetrap.unbind("o");
|
||||
};
|
||||
});
|
||||
|
||||
if (loading || !scene || !data?.findScene) {
|
||||
return <LoadingIndicator />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user