Video filters and transforms (#826)

stashapp · Oct 22, 2020 · 2987b7f · 2987b7f
1 parent 71c814c
commit 2987b7f
Show file tree

Hide file tree

Showing 5 changed files with 872 additions and 12 deletions.
diff --git a/ui/v2.5/.stylelintrc b/ui/v2.5/.stylelintrc
@@ -4,7 +4,7 @@
   ],
   "extends": "stylelint-config-prettier",
   "rules": {
-    "indentation": 2,
+    "indentation": null,
     "at-rule-empty-line-before": [ "always", {
       except: ["after-same-name", "first-nested" ],
       ignore: ["after-comment"],

diff --git a/ui/v2.5/src/components/Changelog/versions/v040.md b/ui/v2.5/src/components/Changelog/versions/v040.md
@@ -1,4 +1,5 @@
 ### ✨ New Features
+* Add filters tab in scene page.
 * Add selectable streaming quality profiles in the scene player.
 * Add scrapers list setting page.
 * Add support for individual images and manual creation of galleries.

diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -1,4 +1,4 @@
-import { Tab, Nav, Dropdown, Button } from "react-bootstrap";
+import { Tab, Nav, Dropdown, Button, ButtonGroup } from "react-bootstrap";
 import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useParams, useLocation, useHistory, Link } from "react-router-dom";
@@ -25,6 +25,7 @@ import { OCounterButton } from "./OCounterButton";
 import { SceneMoviePanel } from "./SceneMoviePanel";
 import { DeleteScenesDialog } from "../DeleteScenesDialog";
 import { SceneGenerateDialog } from "../SceneGenerateDialog";
+import { SceneVideoFilterPanel } from "./SceneVideoFilterPanel";
 
 interface ISceneParams {
   id?: string;
@@ -226,22 +227,27 @@ export const Scene: React.FC = () => {
             ) : (
               ""
             )}
+            <Nav.Item>
+              <Nav.Link eventKey="scene-video-filter-panel">Filters</Nav.Link>
+            </Nav.Item>
             <Nav.Item>
               <Nav.Link eventKey="scene-file-info-panel">File Info</Nav.Link>
             </Nav.Item>
             <Nav.Item>
               <Nav.Link eventKey="scene-edit-panel">Edit</Nav.Link>
             </Nav.Item>
-            <Nav.Item className="ml-auto">
-              <OCounterButton
-                loading={oLoading}
-                value={scene.o_counter || 0}
-                onIncrement={onIncrementClick}
-                onDecrement={onDecrementClick}
-                onReset={onResetClick}
-              />
-            </Nav.Item>
-            <Nav.Item>{renderOperations()}</Nav.Item>
+            <ButtonGroup className="ml-auto">
+              <Nav.Item className="ml-auto">
+                <OCounterButton
+                  loading={oLoading}
+                  value={scene.o_counter || 0}
+                  onIncrement={onIncrementClick}
+                  onDecrement={onDecrementClick}
+                  onReset={onResetClick}
+                />
+              </Nav.Item>
+              <Nav.Item>{renderOperations()}</Nav.Item>
+            </ButtonGroup>
           </Nav>
         </div>
 
@@ -266,6 +272,9 @@ export const Scene: React.FC = () => {
           ) : (
             ""
           )}
+          <Tab.Pane eventKey="scene-video-filter-panel" title="Filter">
+            <SceneVideoFilterPanel scene={scene} />
+          </Tab.Pane>
           <Tab.Pane
             className="file-info-panel"
             eventKey="scene-file-info-panel"