Add keyboard shortcuts (#637)

* Add documentation
* Fix manual styling
* Add dialog for setting Movie images
* Mention manual in README
This commit is contained in:
WithoutPants
2020-07-02 08:45:14 +10:00
committed by GitHub
parent 3157d748bc
commit bfeb7d1824
23 changed files with 698 additions and 30 deletions

View File

@@ -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 />;
}