diff --git a/pkg/models/model_gallery.go b/pkg/models/model_gallery.go index 078e2a5df..76d494185 100644 --- a/pkg/models/model_gallery.go +++ b/pkg/models/model_gallery.go @@ -58,7 +58,7 @@ func (g *Gallery) GetThumbnail(index int) []byte { if err != nil { return data } - resizedImage := imaging.Resize(srcImage, 512, 0, imaging.Lanczos) + resizedImage := imaging.Resize(srcImage, 100, 0, imaging.NearestNeighbor) buf := new(bytes.Buffer) err = jpeg.Encode(buf, resizedImage, nil) if err != nil { diff --git a/schema/documents/data/studio-slim.graphql b/schema/documents/data/studio-slim.graphql new file mode 100644 index 000000000..0ce2ec675 --- /dev/null +++ b/schema/documents/data/studio-slim.graphql @@ -0,0 +1,5 @@ +fragment SlimStudioData on Studio { + id + name + image_path +} \ No newline at end of file diff --git a/schema/documents/documents.graphql b/schema/documents/documents.graphql index 4fee08df4..46df061b0 100644 --- a/schema/documents/documents.graphql +++ b/schema/documents/documents.graphql @@ -25,34 +25,6 @@ query FindScene($id: ID!, $checksum: String) { } } -query FindSceneForEditing($id: ID) { - findScene(id: $id) { - ...SceneData - } - - allPerformers { - id - name - birthdate - image_path - } - - allTags { - id - name - } - - allStudios { - id - name - } - - validGalleriesForScene(scene_id: $id) { - id - path - } -} - query FindSceneMarkers($filter: FindFilterType, $scene_marker_filter: SceneMarkerFilterType) { findSceneMarkers(filter: $filter, scene_marker_filter: $scene_marker_filter) { count @@ -169,6 +141,12 @@ query AllPerformersForFilter { } } +query AllStudiosForFilter { + allStudios { + ...SlimStudioData + } +} + query AllTagsForFilter { allTags { id @@ -176,6 +154,13 @@ query AllTagsForFilter { } } +query ValidGalleriesForScene($scene_id: ID!) { + validGalleriesForScene(scene_id: $scene_id) { + id + path + } +} + query Stats { stats { scene_count, diff --git a/ui/v2/.env b/ui/v2/.env new file mode 100644 index 000000000..5f323191f --- /dev/null +++ b/ui/v2/.env @@ -0,0 +1 @@ +BROWSER=none \ No newline at end of file diff --git a/ui/v2/.gitignore b/ui/v2/.gitignore new file mode 100755 index 000000000..4d29575de --- /dev/null +++ b/ui/v2/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/ui/v2/.vscode/launch.json b/ui/v2/.vscode/launch.json new file mode 100644 index 000000000..a0b21cbef --- /dev/null +++ b/ui/v2/.vscode/launch.json @@ -0,0 +1,18 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Chrome", + "url": "http://localhost:3000", + "webRoot": "${workspaceFolder}/src", + "sourceMapPathOverrides": { + "webpack:///src/*": "${webRoot}/*" + } + } + ] +} \ No newline at end of file diff --git a/ui/v2/.vscode/settings.json b/ui/v2/.vscode/settings.json new file mode 100644 index 000000000..ba34e28f0 --- /dev/null +++ b/ui/v2/.vscode/settings.json @@ -0,0 +1,10 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib", + "editor.tabSize": 2, + "editor.renderWhitespace": "boundary", + "editor.wordWrap": "bounded", + "javascript.preferences.importModuleSpecifier": "relative", + "typescript.preferences.importModuleSpecifier": "relative", + "editor.wordWrapColumn": 120, + "editor.rulers": [120] +} \ No newline at end of file diff --git a/ui/v2/README.md b/ui/v2/README.md new file mode 100755 index 000000000..60f58b443 --- /dev/null +++ b/ui/v2/README.md @@ -0,0 +1,47 @@ +* Install gulp `yarn global add gulp` + + +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm test` + +Launches the test runner in the interactive watch mode.
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. + +## Learn More + +You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). + +To learn React, check out the [React documentation](https://reactjs.org/). diff --git a/ui/v2/codegen.yml b/ui/v2/codegen.yml new file mode 100644 index 000000000..c7f185d97 --- /dev/null +++ b/ui/v2/codegen.yml @@ -0,0 +1,17 @@ +overwrite: true +schema: "../../schema/schema.graphql" +documents: "../../schema/documents/**/*.graphql" +generates: + src/core/generated-graphql.tsx: + config: + noNamespaces: true + optionalType: "undefined" + noHOC: true + noComponents: true + withHooks: true + plugins: + - add: "/* tslint:disable */" + - time + - "typescript-common" + - "typescript-client" + - "typescript-react-apollo" diff --git a/ui/v2/package.json b/ui/v2/package.json new file mode 100644 index 000000000..38f437392 --- /dev/null +++ b/ui/v2/package.json @@ -0,0 +1,62 @@ +{ + "name": "stash", + "version": "0.1.0", + "private": true, + "dependencies": { + "@blueprintjs/core": "3.13.0", + "@blueprintjs/select": "3.6.1", + "@types/jest": "24.0.5", + "@types/lodash": "4.14.121", + "@types/node": "11.9.4", + "@types/query-string": "6.2.0", + "@types/react": "16.8.3", + "@types/react-dom": "16.8.1", + "@types/react-router-dom": "4.3.1", + "apollo-boost": "0.1.28", + "axios": "0.18.0", + "bulma": "0.7.4", + "formik": "1.5.1", + "graphql": "14.1.1", + "lodash": "4.17.11", + "node-sass": "4.11.0", + "query-string": "6.2.0", + "react": "16.8.3", + "react-apollo": "2.4.1", + "react-apollo-hooks": "0.4.1", + "react-dom": "16.8.3", + "react-images": "0.5.19", + "react-jw-player": "1.19.0", + "react-photo-gallery": "6.3.2", + "react-router-dom": "4.3.1", + "react-scripts": "2.1.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject", + "lint": "tslint -c ./tslint.json 'src/**/*.{ts,tsx}'", + "lint:fix": "tslint --fix -c ./tslint.json 'src/**/*.{ts,tsx}'", + "gqlgen": "gql-gen --config codegen.yml" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ], + "devDependencies": { + "graphql-code-generator": "0.18.0", + "graphql-codegen-add": "0.18.0", + "graphql-codegen-typescript-client": "0.18.0", + "graphql-codegen-typescript-common": "0.18.0", + "graphql-codegen-typescript-react-apollo": "0.18.0", + "graphql-codegen-time": "0.18.0", + "tslint": "5.13.0", + "tslint-react": "3.6.0", + "typescript": "3.3.3" + } +} \ No newline at end of file diff --git a/ui/v2/public/favicon.ico b/ui/v2/public/favicon.ico new file mode 100755 index 000000000..a11777cc4 Binary files /dev/null and b/ui/v2/public/favicon.ico differ diff --git a/ui/v2/public/index.html b/ui/v2/public/index.html new file mode 100755 index 000000000..75980d58e --- /dev/null +++ b/ui/v2/public/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + React App + + + +
+ + + diff --git a/ui/v2/public/manifest.json b/ui/v2/public/manifest.json new file mode 100755 index 000000000..1f2f141fa --- /dev/null +++ b/ui/v2/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/ui/v2/src/App.tsx b/ui/v2/src/App.tsx new file mode 100755 index 000000000..d4422d9af --- /dev/null +++ b/ui/v2/src/App.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { Route, Switch } from "react-router-dom"; +import { ErrorBoundary } from "./components/ErrorBoundary"; +import Galleries from "./components/Galleries/Galleries"; +import { MainNavbar } from "./components/MainNavbar"; +import { PageNotFound } from "./components/PageNotFound"; +import Performers from "./components/performers/performers"; +import Scenes from "./components/scenes/scenes"; +import { Settings } from "./components/Settings/Settings"; +import { Stats } from "./components/Stats"; +import Studios from "./components/Studios/Studios"; +import Tags from "./components/Tags/Tags"; + +export class App extends React.Component { + public render() { + return ( +
+ + + + + + {/* */} + + + + + + + + +
+ ); + } +} diff --git a/ui/v2/src/components/ErrorBoundary.tsx b/ui/v2/src/components/ErrorBoundary.tsx new file mode 100644 index 000000000..eb47f4547 --- /dev/null +++ b/ui/v2/src/components/ErrorBoundary.tsx @@ -0,0 +1,34 @@ +import React from "react"; + +export class ErrorBoundary extends React.Component { + constructor(props: any) { + super(props); + this.state = { error: null, errorInfo: null }; + } + + public componentDidCatch(error: any, errorInfo: any) { + this.setState({ + error, + errorInfo, + }); + } + + public render() { + if (this.state.errorInfo) { + // Error path + return ( +
+

Something went wrong.

+
+ {this.state.error && this.state.error.toString()} +
+ {this.state.errorInfo.componentStack} +
+
+ ); + } + + // Normally, just render children + return this.props.children; + } +} diff --git a/ui/v2/src/components/Galleries/Galleries.tsx b/ui/v2/src/components/Galleries/Galleries.tsx new file mode 100644 index 000000000..51db624b5 --- /dev/null +++ b/ui/v2/src/components/Galleries/Galleries.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import { Route, Switch } from "react-router-dom"; +import { Gallery } from "./Gallery"; +import { GalleryList } from "./GalleryList"; + +const Galleries = () => ( + + + + +); + +export default Galleries; diff --git a/ui/v2/src/components/Galleries/Gallery.tsx b/ui/v2/src/components/Galleries/Gallery.tsx new file mode 100644 index 000000000..f5ea014e3 --- /dev/null +++ b/ui/v2/src/components/Galleries/Gallery.tsx @@ -0,0 +1,32 @@ +import { + Spinner, +} from "@blueprintjs/core"; +import _ from "lodash"; +import React, { FunctionComponent, useEffect, useState } from "react"; +import * as GQL from "../../core/generated-graphql"; +import { StashService } from "../../core/StashService"; +import { IBaseProps } from "../../models"; +import { GalleryViewer } from "./GalleryViewer"; + +interface IProps extends IBaseProps {} + +export const Gallery: FunctionComponent = (props: IProps) => { + const [gallery, setGallery] = useState>({}); + const [isLoading, setIsLoading] = useState(false); + + const { data, error, loading } = StashService.useFindGallery(props.match.params.id); + + useEffect(() => { + setIsLoading(loading); + if (!data || !data.findGallery || !!error) { return; } + setGallery(data.findGallery); + }, [data]); + + if (!data || !data.findGallery || isLoading) { return ; } + if (!!error) { return <>{error.message}; } + return ( +
+ +
+ ); +}; diff --git a/ui/v2/src/components/Galleries/GalleryList.tsx b/ui/v2/src/components/Galleries/GalleryList.tsx new file mode 100644 index 000000000..6ba0f0fae --- /dev/null +++ b/ui/v2/src/components/Galleries/GalleryList.tsx @@ -0,0 +1,54 @@ +import { HTMLTable } from "@blueprintjs/core"; +import _ from "lodash"; +import React, { FunctionComponent } from "react"; +import { QueryHookResult } from "react-apollo-hooks"; +import { Link } from "react-router-dom"; +import { FindGalleriesQuery, FindGalleriesVariables } from "../../core/generated-graphql"; +import { ListHook } from "../../hooks/ListHook"; +import { IBaseProps } from "../../models/base-props"; +import { ListFilterModel } from "../../models/list-filter/filter"; +import { DisplayMode, FilterMode } from "../../models/list-filter/types"; + +interface IProps extends IBaseProps {} + +export const GalleryList: FunctionComponent = (props: IProps) => { + const listData = ListHook.useList({ + filterMode: FilterMode.Galleries, + props, + renderContent, + }); + + function renderContent(result: QueryHookResult, filter: ListFilterModel) { + if (!result.data || !result.data.findGalleries) { return; } + if (filter.displayMode === DisplayMode.Grid) { + return

TODO

; + } else if (filter.displayMode === DisplayMode.List) { + return ( + + + + Preview + Path + + + + {result.data.findGalleries.galleries.map((gallery) => ( + + + + {gallery.files.length > 0 ? : undefined} + + + {gallery.path} + + ))} + + + ); + } else if (filter.displayMode === DisplayMode.Wall) { + return

TODO

; + } + } + + return listData.template; +}; diff --git a/ui/v2/src/components/Galleries/GalleryViewer.tsx b/ui/v2/src/components/Galleries/GalleryViewer.tsx new file mode 100644 index 000000000..5a1e7a3ef --- /dev/null +++ b/ui/v2/src/components/Galleries/GalleryViewer.tsx @@ -0,0 +1,47 @@ +import _ from "lodash"; +import React, { FunctionComponent, useState } from "react"; +import Lightbox from "react-images"; +import Gallery from "react-photo-gallery"; +import * as GQL from "../../core/generated-graphql"; + +interface IProps { + gallery: GQL.GalleryDataFragment; +} + +export const GalleryViewer: FunctionComponent = (props: IProps) => { + const [currentImage, setCurrentImage] = useState(0); + const [lightboxIsOpen, setLightboxIsOpen] = useState(false); + + function openLightbox(event: any, obj: any) { + setCurrentImage(obj.index); + setLightboxIsOpen(true); + } + function closeLightbox() { + setCurrentImage(0); + setLightboxIsOpen(false); + } + function gotoPrevious() { + setCurrentImage(currentImage - 1); + } + function gotoNext() { + setCurrentImage(currentImage + 1); + } + + const photos = props.gallery.files.map((file) => ({src: file.path || "", caption: file.name})); + const thumbs = props.gallery.files.map((file) => ({src: `${file.path}?thumb=true` || "", width: 1, height: 1})); + return ( +
+ + window.open(photos[currentImage].src, "_blank")} + width={9999} + /> +
+ ); +}; diff --git a/ui/v2/src/components/MainNavbar.tsx b/ui/v2/src/components/MainNavbar.tsx new file mode 100644 index 000000000..535bd16f4 --- /dev/null +++ b/ui/v2/src/components/MainNavbar.tsx @@ -0,0 +1,112 @@ +import { + Navbar, + NavbarDivider, + NavbarGroup, + NavbarHeading, +} from "@blueprintjs/core"; +import React, { FunctionComponent } from "react"; +import { Link, NavLink } from "react-router-dom"; + +interface IMainNavbarProps {} + +export const MainNavbar: FunctionComponent = (props) => { + let newButtonPath: string | undefined; + let newButtonElement: JSX.Element | undefined; + switch (window.location.pathname) { + case "/performers": { + newButtonPath = "/performers/new"; + break; + } + case "/studios": { + newButtonPath = "/studios/new"; + break; + } + } + if (!!newButtonPath) { + newButtonElement = ( + <> + + New + + + + ); + } + + return ( + +
+ + Stash + + + + Scenes + + + + Markers + + + + Galleries + + + + Performers + + + + Studios + + + + Tags + + + + {newButtonElement} + + +
+ + ); +}; diff --git a/ui/v2/src/components/PageNotFound.tsx b/ui/v2/src/components/PageNotFound.tsx new file mode 100644 index 000000000..8e7cfb32e --- /dev/null +++ b/ui/v2/src/components/PageNotFound.tsx @@ -0,0 +1,7 @@ +import React, { FunctionComponent } from "react"; + +export const PageNotFound: FunctionComponent = () => { + return ( +

Page not found.

+ ); +}; diff --git a/ui/v2/src/components/Settings/Settings.tsx b/ui/v2/src/components/Settings/Settings.tsx new file mode 100644 index 000000000..2636ace81 --- /dev/null +++ b/ui/v2/src/components/Settings/Settings.tsx @@ -0,0 +1,48 @@ +import { + Card, + Tab, + Tabs, +} from "@blueprintjs/core"; +import queryString from "query-string"; +import React, { FunctionComponent, useEffect, useState } from "react"; +import { IBaseProps } from "../../models"; +import { SettingsAboutPanel } from "./SettingsAboutPanel"; +import { SettingsConfigurationPanel } from "./SettingsConfigurationPanel"; +import { SettingsLogsPanel } from "./SettingsLogsPanel"; +import { SettingsTasksPanel } from "./SettingsTasksPanel"; + +interface IProps extends IBaseProps {} + +type TabId = "configuration" | "tasks" | "logs" | "about"; + +export const Settings: FunctionComponent = (props: IProps) => { + const [tabId, setTabId] = useState(getTabId()); + + useEffect(() => { + const location = Object.assign({}, props.history.location); + location.search = queryString.stringify({tab: tabId}, {encode: false}); + props.history.replace(location); + }, [tabId]); + + function getTabId(): TabId { + const queryParams = queryString.parse(props.location.search); + if (!queryParams.tab || typeof queryParams.tab !== "string") { return "tasks"; } + return queryParams.tab as TabId; + } + + return ( + + setTabId(newId as TabId)} + defaultSelectedTabId={getTabId()} + > + } /> + } /> + } /> + } /> + + + ); +}; diff --git a/ui/v2/src/components/Settings/SettingsAboutPanel.tsx b/ui/v2/src/components/Settings/SettingsAboutPanel.tsx new file mode 100644 index 000000000..d2d93ba60 --- /dev/null +++ b/ui/v2/src/components/Settings/SettingsAboutPanel.tsx @@ -0,0 +1,19 @@ +import { + H1, + H4, + H6, + Tag, +} from "@blueprintjs/core"; +import React, { FunctionComponent } from "react"; +import * as GQL from "../../core/generated-graphql"; +import { TextUtils } from "../../utils/text"; + +interface IProps {} + +export const SettingsAboutPanel: FunctionComponent = (props: IProps) => { + return ( + <> + About + + ); +}; diff --git a/ui/v2/src/components/Settings/SettingsConfigurationPanel.tsx b/ui/v2/src/components/Settings/SettingsConfigurationPanel.tsx new file mode 100644 index 000000000..54e7ef427 --- /dev/null +++ b/ui/v2/src/components/Settings/SettingsConfigurationPanel.tsx @@ -0,0 +1,19 @@ +import { + H1, + H4, + H6, + Tag, +} from "@blueprintjs/core"; +import React, { FunctionComponent } from "react"; +import * as GQL from "../../core/generated-graphql"; +import { TextUtils } from "../../utils/text"; + +interface IProps {} + +export const SettingsConfigurationPanel: FunctionComponent = (props: IProps) => { + return ( + <> + Configuration + + ); +}; diff --git a/ui/v2/src/components/Settings/SettingsLogsPanel.tsx b/ui/v2/src/components/Settings/SettingsLogsPanel.tsx new file mode 100644 index 000000000..5d13bbd9d --- /dev/null +++ b/ui/v2/src/components/Settings/SettingsLogsPanel.tsx @@ -0,0 +1,19 @@ +import { + H1, + H4, + H6, + Tag, +} from "@blueprintjs/core"; +import React, { FunctionComponent } from "react"; +import * as GQL from "../../core/generated-graphql"; +import { TextUtils } from "../../utils/text"; + +interface IProps {} + +export const SettingsLogsPanel: FunctionComponent = (props: IProps) => { + return ( + <> + Logs + + ); +}; diff --git a/ui/v2/src/components/Settings/SettingsTasksPanel.tsx b/ui/v2/src/components/Settings/SettingsTasksPanel.tsx new file mode 100644 index 000000000..a783ab119 --- /dev/null +++ b/ui/v2/src/components/Settings/SettingsTasksPanel.tsx @@ -0,0 +1,95 @@ +import { + Alert, + Button, + Divider, + FormGroup, + H1, + H4, + H6, + InputGroup, + Tag, +} from "@blueprintjs/core"; +import React, { FunctionComponent, useState } from "react"; +import * as GQL from "../../core/generated-graphql"; +import { StashService } from "../../core/StashService"; +import { TextUtils } from "../../utils/text"; + +interface IProps {} + +export const SettingsTasksPanel: FunctionComponent = (props: IProps) => { + const [isImportAlertOpen, setIsImportAlertOpen] = useState(false); + + function onImport() { + setIsImportAlertOpen(false); + StashService.queryMetadataImport(); + } + + function renderImportAlert() { + return ( + setIsImportAlertOpen(false)} + onConfirm={() => onImport()} + > +

+ Are you sure you want to import? This will delete the database and re-import from + your exported metadata. +

+ + ); + } + + return ( + <> + {renderImportAlert()} + +

Library

+ + + setEditingTag(undefined)} + title={!!editingTag && !!editingTag.id ? "Edit Tag" : "New Tag"} + > +
+ + setName(newValue.target.value)} + value={name} + /> + +
+
+
+ +
+
+ + + {tagElements} + + ); +}; diff --git a/ui/v2/src/components/Tags/Tags.tsx b/ui/v2/src/components/Tags/Tags.tsx new file mode 100644 index 000000000..9c1f591f9 --- /dev/null +++ b/ui/v2/src/components/Tags/Tags.tsx @@ -0,0 +1,11 @@ +import React from "react"; +import { Route, Switch } from "react-router-dom"; +import { TagList } from "./TagList"; + +const Tags = () => ( + + + +); + +export default Tags; diff --git a/ui/v2/src/components/Wall/Wall.scss b/ui/v2/src/components/Wall/Wall.scss new file mode 100644 index 000000000..1a87e65ea --- /dev/null +++ b/ui/v2/src/components/Wall/Wall.scss @@ -0,0 +1,98 @@ +.wall-overlay { + background-color: rgba(0,0,0,.8); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + pointer-events: none; + transition: transform .5s ease-in-out; +} +.visible { + opacity: 1; + transition: opacity .5s ease-in-out; +} +.hidden { + opacity: 0; + transition: opacity .5s ease-in-out; +} +.visible-unanimated { + opacity: 1; +} +.hidden-unanimated { + opacity: 0; +} + + +.double-scale { + position: absolute; + z-index: 2; + transform: scale(2); + background-color: black; +} + +.double-scale img { + opacity: 0; +} + +.scene-wall-item-container { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + width: 100%; + height: 100%; + transition: transform .5s; +} + +.scene-wall-item-container video { + position: absolute; + width: 100%; + height: 100%; + z-index: -1; +} + +.scene-wall-item-text-container { + position: absolute; + font-weight: 700; + color: #444; + padding: 5px; + width: 100%; + bottom: 0; + background: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.65)); + overflow: hidden; + text-align: center; + + & span { + line-height: 1; + font-weight: 400; + font-size: 10px; + margin: 0 3px; + } +} + +.scene-wall-item-blur { + position: absolute; + top: -5px; + left: -5px; + right: -5px; + bottom: -5px; + /*background-color: rgba(255, 255, 255, 0.75);*/ + /*backdrop-filter: blur(5px);*/ + z-index: -1; +} + +.wall.grid-item video, .wall.grid-item img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.wall.grid-item { + padding: 0 !important; + line-height: 0; + overflow: visible; + position: relative; +} diff --git a/ui/v2/src/components/Wall/WallItem.tsx b/ui/v2/src/components/Wall/WallItem.tsx new file mode 100644 index 000000000..e7e04921e --- /dev/null +++ b/ui/v2/src/components/Wall/WallItem.tsx @@ -0,0 +1,114 @@ +import _ from "lodash"; +import React, { FunctionComponent, useRef, useState } from "react"; +import { Link } from "react-router-dom"; +import * as GQL from "../../core/generated-graphql"; +import { VideoHoverHook } from "../../hooks/VideoHover"; +import { TextUtils } from "../../utils/text"; + +interface IWallItemProps { + scene?: GQL.SlimSceneDataFragment; + sceneMarker?: GQL.SceneMarkerDataFragment; + origin?: string; + onOverlay: (show: boolean) => void; + clickHandler?: (item: GQL.SlimSceneDataFragment | GQL.SceneMarkerDataFragment) => void; +} + +export const WallItem: FunctionComponent = (props: IWallItemProps) => { + const [videoPath, setVideoPath] = useState(undefined); + const videoHoverHook = VideoHoverHook.useVideoHover({resetOnMouseLeave: true}); + + function onMouseEnter() { + VideoHoverHook.onMouseEnter(videoHoverHook); + if (!videoPath || videoPath === "") { + if (!!props.sceneMarker) { + setVideoPath(props.sceneMarker.stream || ""); + } else if (!!props.scene) { + setVideoPath(props.scene.paths.preview || ""); + } + } + props.onOverlay(true); + } + const debouncedOnMouseEnter = useRef(_.debounce(onMouseEnter, 500)); + + function onMouseLeave() { + VideoHoverHook.onMouseLeave(videoHoverHook); + setVideoPath(""); + debouncedOnMouseEnter.current.cancel(); + props.onOverlay(false); + } + + function onClick() { + if (props.clickHandler === undefined) { return; } + if (props.scene !== undefined) { + props.clickHandler(props.scene); + } else if (props.sceneMarker !== undefined) { + props.clickHandler(props.sceneMarker); + } + } + + let linkSrc: string = "#"; + if (props.clickHandler === undefined) { + if (props.scene !== undefined) { + linkSrc = `/scenes/${props.scene.id}`; + } else if (props.sceneMarker !== undefined) { + linkSrc = `/scenes/${props.sceneMarker.scene.id}?t=${props.sceneMarker.seconds}`; + } + } + + function onTransitionEnd(event: React.TransitionEvent) { + const target = (event.target as any); + if (target.classList.contains("double-scale")) { + target.parentElement.style.zIndex = 10; + } else { + target.parentElement.style.zIndex = null; + } + } + + let previewSrc: string = ""; + let title: string = ""; + let tags: JSX.Element[] = []; + if (!!props.sceneMarker) { + previewSrc = props.sceneMarker.preview; + title = `${props.sceneMarker!.title} - ${TextUtils.secondsToTimestamp(props.sceneMarker.seconds)}`; + tags = props.sceneMarker.tags.map((tag) => ({tag.name})); + tags.unshift({props.sceneMarker.primary_tag.name}); + } else if (!!props.scene) { + previewSrc = props.scene.paths.webp || ""; + title = props.scene.title || ""; + // tags = props.scene.tags.map((tag) => ({tag.name})); + } + + const className = ["scene-wall-item-container"]; + if (videoHoverHook.isHovering.current) { className.push("double-scale"); } + const style: React.CSSProperties = {}; + if (!!props.origin) { style.transformOrigin = props.origin; } + return ( +
+
debouncedOnMouseEnter.current()} + onMouseMove={() => debouncedOnMouseEnter.current()} + onMouseLeave={onMouseLeave} + > + onClick()} to={linkSrc}> +
+
+ ); +}; diff --git a/ui/v2/src/components/Wall/WallPanel.tsx b/ui/v2/src/components/Wall/WallPanel.tsx new file mode 100644 index 000000000..df466f727 --- /dev/null +++ b/ui/v2/src/components/Wall/WallPanel.tsx @@ -0,0 +1,89 @@ +import _ from "lodash"; +import React, { FunctionComponent, useState } from "react"; +import * as GQL from "../../core/generated-graphql"; +import "./Wall.scss"; +import { WallItem } from "./WallItem"; + +interface IWallPanelProps { + scenes?: GQL.SlimSceneDataFragment[]; + sceneMarkers?: GQL.SceneMarkerDataFragment[]; + clickHandler?: (item: GQL.SlimSceneDataFragment | GQL.SceneMarkerDataFragment) => void; +} + +export const WallPanel: FunctionComponent = (props: IWallPanelProps) => { + const [showOverlay, setShowOverlay] = useState(false); + + function onOverlay(show: boolean) { + setShowOverlay(show); + } + + function getOrigin(index: number, rowSize: number, total: number): string { + const isAtStart = index % rowSize === 0; + const isAtEnd = index % rowSize === rowSize - 1; + const endRemaining = total % rowSize; + + // First row + if (total === 1) { return "top"; } + if (index === 0) { return "top left"; } + if (index === rowSize - 1 || (total < rowSize && index === total - 1)) { return "top right"; } + if (index < rowSize) { return "top"; } + + // Bottom row + if (isAtEnd && index === total - 1) { return "bottom right"; } + if (isAtStart && index === total - rowSize) { return "bottom left"; } + if (endRemaining !== 0 && index >= total - endRemaining) { return "bottom"; } + if (endRemaining === 0 && index >= total - rowSize) { return "bottom"; } + + // Everything else + if (isAtStart) { return "center left"; } + if (isAtEnd) { return "center right"; } + return "center"; + } + + function maybeRenderScenes() { + if (props.scenes === undefined) { return; } + return props.scenes.map((scene, index) => { + const origin = getOrigin(index, 5, props.scenes!.length); + return ( + + ); + }); + } + + function maybeRenderSceneMarkers() { + if (props.sceneMarkers === undefined) { return; } + return props.sceneMarkers.map((marker, index) => { + const origin = getOrigin(index, 5, props.sceneMarkers!.length); + return ( + + ); + }); + } + + function render() { + const overlayClassName = showOverlay ? "visible" : "hidden"; + return ( + <> +
+
+ {maybeRenderScenes()} + {maybeRenderSceneMarkers()} +
+ + ); + } + + return render(); +}; diff --git a/ui/v2/src/components/list/AddFilter.tsx b/ui/v2/src/components/list/AddFilter.tsx new file mode 100644 index 000000000..4486de6bb --- /dev/null +++ b/ui/v2/src/components/list/AddFilter.tsx @@ -0,0 +1,140 @@ +import { + Button, + Classes, + Dialog, + FormGroup, + HTMLSelect, +} from "@blueprintjs/core"; +import _ from "lodash"; +import React, { FunctionComponent, useEffect, useRef, useState } from "react"; +import { isArray } from "util"; +import { Criterion, CriterionType } from "../../models/list-filter/criteria/criterion"; +import { NoneCriterion } from "../../models/list-filter/criteria/none"; +import { PerformersCriterion } from "../../models/list-filter/criteria/performers"; +import { StudiosCriterion } from "../../models/list-filter/criteria/studios"; +import { TagsCriterion } from "../../models/list-filter/criteria/tags"; +import { makeCriteria } from "../../models/list-filter/criteria/utils"; +import { ListFilterModel } from "../../models/list-filter/filter"; +import { FilterMultiSelect } from "../select/FilterMultiSelect"; + +interface IAddFilterProps { + onAddCriterion: (criterion: Criterion) => void; + onCancel: () => void; + filter: ListFilterModel; + editingCriterion?: Criterion; +} + +export const AddFilter: FunctionComponent = (props: IAddFilterProps) => { + const singleValueSelect = useRef(null); + + const [isOpen, setIsOpen] = useState(false); + const [criterion, setCriterion] = useState>(new NoneCriterion()); + + // Configure if we are editing an existing criterion + useEffect(() => { + if (!props.editingCriterion) { return; } + setIsOpen(true); + setCriterion(props.editingCriterion); + }, [props.editingCriterion]); + + function onChangedCriteriaType(event: React.ChangeEvent) { + const newCriterionType = event.target.value as CriterionType; + const newCriterion = makeCriteria(newCriterionType); + setCriterion(newCriterion); + } + + function onChangedSingleSelect(event: React.ChangeEvent) { + const newCriterion = _.cloneDeep(criterion); + newCriterion.value = event.target.value; + setCriterion(newCriterion); + } + + function onAddFilter() { + if (!isArray(criterion.value) && !!singleValueSelect.current) { + const value = singleValueSelect.current.props.defaultValue; + if (value === undefined || value === "" || typeof value === "number") { criterion.value = criterion.options[0]; } + } + props.onAddCriterion(criterion); + onToggle(); + } + + function onToggle() { + if (isOpen) { + props.onCancel(); + } + setIsOpen(!isOpen); + setCriterion(makeCriteria()); + } + + const maybeRenderFilterPopoverContents = () => { + if (criterion.type === "none") { return; } + + function renderSelect() { + if (isArray(criterion.value)) { + let type: "performers" | "studios" | "tags" | "" = ""; + if (criterion instanceof PerformersCriterion) { + type = "performers"; + } else if (criterion instanceof StudiosCriterion) { + type = "studios"; + } else if (criterion instanceof TagsCriterion) { + type = "tags"; + } + + if (type === "") { + return (<>todo); + } else { + return ( + criterion.value = items.map((i) => ({id: i.id, label: i.name!}))} + openOnKeyDown={true} + initialIds={criterion.value.map((labeled) => labeled.id)} + /> + ); + } + } else { + return ( + + ); + } + } + return {renderSelect()}; + }; + + function maybeRenderFilterSelect() { + if (!!props.editingCriterion) { return; } + return ( + + + + ); + } + + const title = !props.editingCriterion ? "Add Filter" : "Update Filter"; + return ( + <> + + onToggle()} title={title}> +
+ {maybeRenderFilterSelect()} + {maybeRenderFilterPopoverContents()} +
+
+
+ +
+
+ + + ); +}; diff --git a/ui/v2/src/components/list/ListFilter.tsx b/ui/v2/src/components/list/ListFilter.tsx new file mode 100644 index 000000000..b821322e6 --- /dev/null +++ b/ui/v2/src/components/list/ListFilter.tsx @@ -0,0 +1,188 @@ +import { + AnchorButton, + Button, + ButtonGroup, + ControlGroup, + HTMLSelect, + InputGroup, + Menu, + MenuItem, + Popover, + Tag, +} from "@blueprintjs/core"; +import { debounce } from "lodash"; +import React, { FunctionComponent, SyntheticEvent, useEffect, useRef, useState } from "react"; +import { Criterion } from "../../models/list-filter/criteria/criterion"; +import { ListFilterModel } from "../../models/list-filter/filter"; +import { DisplayMode } from "../../models/list-filter/types"; +import { AddFilter } from "./AddFilter"; + +interface IListFilterProps { + onChangePageSize: (pageSize: number) => void; + onChangeQuery: (query: string) => void; + onChangeSortDirection: (sortDirection: "asc" | "desc") => void; + onChangeSortBy: (sortBy: string) => void; + onChangeDisplayMode: (displayMode: DisplayMode) => void; + onAddCriterion: (criterion: Criterion) => void; + onRemoveCriterion: (criterion: Criterion) => void; + filter: ListFilterModel; +} + +const PAGE_SIZE_OPTIONS = ["20", "40", "60", "120"]; + +export const ListFilter: FunctionComponent = (props: IListFilterProps) => { + let searchCallback: any; + + const [editingCriterion, setEditingCriterion] = useState(undefined); + + useEffect(() => { + searchCallback = debounce((event) => { + props.onChangeQuery(event.target.value); + }, 500); + }); + + function onChangePageSize(event: SyntheticEvent) { + const val = event!.currentTarget!.value; + props.onChangePageSize(parseInt(val, 10)); + } + + function onChangeQuery(event: SyntheticEvent) { + event.persist(); + searchCallback(event); + } + + function onChangeSortDirection(_: any) { + if (props.filter.sortDirection === "asc") { + props.onChangeSortDirection("desc"); + } else { + props.onChangeSortDirection("asc"); + } + } + + function onChangeSortBy(event: React.MouseEvent) { + props.onChangeSortBy(event.currentTarget.text); + } + + function onChangeDisplayMode(displayMode: DisplayMode) { + props.onChangeDisplayMode(displayMode); + } + + function onAddCriterion(criterion: Criterion) { + props.onAddCriterion(criterion); + } + + function onCancelAddCriterion() { + setEditingCriterion(undefined); + } + + let removedCriterionId = ""; + function onRemoveCriterionTag(criterion?: Criterion) { + if (!criterion) { return; } + setEditingCriterion(undefined); + removedCriterionId = criterion.getId(); + props.onRemoveCriterion(criterion); + } + function onClickCriterionTag(criterion?: Criterion) { + if (!criterion || removedCriterionId !== "") { return; } + setEditingCriterion(criterion); + } + + function renderSortByOptions() { + return props.filter.sortByOptions.map((option) => ( + + )); + } + + function renderDisplayModeOptions() { + function getIcon(option: DisplayMode) { + switch (option) { + case DisplayMode.Grid: return "grid-view"; + case DisplayMode.List: return "list"; + case DisplayMode.Wall: return "symbol-square"; + } + } + function getLabel(option: DisplayMode) { + switch (option) { + case DisplayMode.Grid: return "Grid"; + case DisplayMode.List: return "List"; + case DisplayMode.Wall: return "Wall"; + } + } + return props.filter.displayModeOptions.map((option) => ( + + {renderSortByOptions()} + + + + + + + {renderDisplayModeOptions()} + +
+
+ {renderFilterTags()} +
+ + ); + } + + return render(); +}; diff --git a/ui/v2/src/components/list/Pagination.tsx b/ui/v2/src/components/list/Pagination.tsx new file mode 100644 index 000000000..057e9c0a4 --- /dev/null +++ b/ui/v2/src/components/list/Pagination.tsx @@ -0,0 +1,119 @@ +import { Button, ButtonGroup } from "@blueprintjs/core"; +import React from "react"; + +interface IPaginationProps { + itemsPerPage: number; + currentPage: number; + totalItems: number; + onChangePage: (page: number) => void; +} + +interface IPaginationState { + pages: number[]; + totalPages: number; +} + +export class Pagination extends React.Component { + constructor(props: IPaginationProps) { + super(props); + this.state = { + pages: [], + totalPages: Number.MAX_SAFE_INTEGER, + }; + } + + public componentWillMount() { + this.setPage(this.props.currentPage, false); + } + + public componentDidUpdate(prevProps: IPaginationProps) { + if (this.props.totalItems !== prevProps.totalItems || this.props.itemsPerPage !== prevProps.itemsPerPage) { + this.setPage(this.props.currentPage); + } + } + + public render() { + if (!this.state || !this.state.pages || this.state.pages.length <= 1) { return null; } + + return ( + + + + + + ); + } + + return ( + <> + {renderScraperDialog()} +
+
+ +
+
+ { setIsEditing(!isEditing); updatePerformerEditState(performer); }} + onSave={onSave} + onImageChange={onImageChange} + onDisplayFreeOnesDialog={onDisplayFreeOnesDialog} + /> +

+ setName(value)} + /> +

+
+ Aliases: + setAliases(value)} + /> +
+
+ Favorite: +
+ + + + {TableUtils.renderEditableTextTableRow( + {title: "Birthdate (YYYY-MM-DD)", value: birthdate, isEditing, onChange: setBirthdate})} + {renderEthnicity()} + {TableUtils.renderEditableTextTableRow( + {title: "Eye Color", value: eyeColor, isEditing, onChange: setEyeColor})} + {TableUtils.renderEditableTextTableRow( + {title: "Country", value: country, isEditing, onChange: setCountry})} + {TableUtils.renderEditableTextTableRow( + {title: "Height (CM)", value: height, isEditing, onChange: setHeight})} + {TableUtils.renderEditableTextTableRow( + {title: "Measurements", value: measurements, isEditing, onChange: setMeasurements})} + {TableUtils.renderEditableTextTableRow( + {title: "Fake Tits", value: fakeTits, isEditing, onChange: setFakeTits})} + {TableUtils.renderEditableTextTableRow( + {title: "Career Length", value: careerLength, isEditing, onChange: setCareerLength})} + {TableUtils.renderEditableTextTableRow( + {title: "Tattoos", value: tattoos, isEditing, onChange: setTattoos})} + {TableUtils.renderEditableTextTableRow( + {title: "Piercings", value: piercings, isEditing, onChange: setPiercings})} + {TableUtils.renderEditableTextTableRow( + {title: "URL", value: url, isEditing, onChange: setUrl})} + {TableUtils.renderEditableTextTableRow( + {title: "Twitter", value: twitter, isEditing, onChange: setTwitter})} + {TableUtils.renderEditableTextTableRow( + {title: "Instagram", value: instagram, isEditing, onChange: setInstagram})} + + +
+
+ + ); +}; diff --git a/ui/v2/src/components/performers/PerformerList.tsx b/ui/v2/src/components/performers/PerformerList.tsx new file mode 100644 index 000000000..965aeb1cb --- /dev/null +++ b/ui/v2/src/components/performers/PerformerList.tsx @@ -0,0 +1,37 @@ +import _ from "lodash"; +import React, { FunctionComponent } from "react"; +import { QueryHookResult } from "react-apollo-hooks"; +import { FindPerformersQuery, FindPerformersVariables } from "../../core/generated-graphql"; +import { ListHook } from "../../hooks/ListHook"; +import { IBaseProps } from "../../models/base-props"; +import { ListFilterModel } from "../../models/list-filter/filter"; +import { DisplayMode, FilterMode } from "../../models/list-filter/types"; +import { PerformerCard } from "./PerformerCard"; + +interface IPerformerListProps extends IBaseProps {} + +export const PerformerList: FunctionComponent = (props: IPerformerListProps) => { + const listData = ListHook.useList({ + filterMode: FilterMode.Performers, + props, + renderContent, + }); + + function renderContent( + result: QueryHookResult, filter: ListFilterModel) { + if (!result.data || !result.data.findPerformers) { return; } + if (filter.displayMode === DisplayMode.Grid) { + return ( +
+ {result.data.findPerformers.performers.map((p) => ())} +
+ ); + } else if (filter.displayMode === DisplayMode.List) { + return

TODO

; + } else if (filter.displayMode === DisplayMode.Wall) { + return; + } + } + + return listData.template; +}; diff --git a/ui/v2/src/components/performers/performers.tsx b/ui/v2/src/components/performers/performers.tsx new file mode 100644 index 000000000..e6a2347c8 --- /dev/null +++ b/ui/v2/src/components/performers/performers.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import { Route, Switch } from "react-router-dom"; +import { Performer } from "./PerformerDetails/Performer"; +import { PerformerList } from "./PerformerList"; + +const Performers = () => ( + + + + +); + +export default Performers; diff --git a/ui/v2/src/components/scenes/SceneCard.tsx b/ui/v2/src/components/scenes/SceneCard.tsx new file mode 100644 index 000000000..90102b582 --- /dev/null +++ b/ui/v2/src/components/scenes/SceneCard.tsx @@ -0,0 +1,149 @@ +import { + Button, + ButtonGroup, + Card, + Divider, + Elevation, + H4, + Popover, + Tag, +} from "@blueprintjs/core"; +import React, { FunctionComponent, RefObject, useEffect, useRef, useState } from "react"; +import { Link } from "react-router-dom"; +import * as GQL from "../../core/generated-graphql"; +import { VideoHoverHook } from "../../hooks/VideoHover"; +import { ColorUtils } from "../../utils/color"; +import { TextUtils } from "../../utils/text"; +import { SceneHelpers } from "./helpers"; + +interface ISceneCardProps { + scene: GQL.SlimSceneDataFragment; +} + +export const SceneCard: FunctionComponent = (props: ISceneCardProps) => { + const [previewPath, setPreviewPath] = useState(undefined); + const videoHoverHook = VideoHoverHook.useVideoHover(); + + function maybeRenderRatingBanner() { + if (!props.scene.rating) { return; } + return ( +
+ RATING: {props.scene.rating} +
+ ); + } + + function maybeRenderTagPopoverButton() { + if (props.scene.tags.length <= 0) { return; } + + const tags = props.scene.tags.map((tag) => ( + {tag.name} + )); + return ( + +