{onSetZoom &&
zoomIndex !== undefined &&
- displayMode === DisplayMode.Grid ? (
+ (displayMode === DisplayMode.Grid ||
+ displayMode === DisplayMode.Wall) ? (
@@ -149,7 +159,7 @@ export const ListViewOptions: React.FC = ({
onSetDisplayMode(option);
}}
>
- {getLabel(option)}
+ {getLabel(intl, option)}
))}
@@ -160,3 +170,48 @@ export const ListViewOptions: React.FC
= ({
);
};
+
+export const ListViewButtonGroup: React.FC = ({
+ zoomIndex,
+ onSetZoom,
+ displayMode,
+ onSetDisplayMode,
+ displayModeOptions,
+}) => {
+ const intl = useIntl();
+
+ return (
+ <>
+ {displayModeOptions.length > 1 && (
+
+ {displayModeOptions.map((option) => (
+
+ {getLabel(intl, option)}
+
+ }
+ >
+
+
+ ))}
+
+ )}
+
+ {onSetZoom &&
+ zoomIndex !== undefined &&
+ (displayMode === DisplayMode.Grid ||
+ displayMode === DisplayMode.Wall) ? (
+
+ ) : null}
+
+
+ );
+};
diff --git a/ui/v2.5/src/components/List/Pagination.tsx b/ui/v2.5/src/components/List/Pagination.tsx
index e117b532e..bfa6697ee 100644
--- a/ui/v2.5/src/components/List/Pagination.tsx
+++ b/ui/v2.5/src/components/List/Pagination.tsx
@@ -44,7 +44,7 @@ const PageCount: React.FC<{
useStopWheelScroll(pageInput);
const pageOptions = useMemo(() => {
- const maxPagesToShow = 10;
+ const maxPagesToShow = 1000;
const min = Math.max(1, currentPage - maxPagesToShow / 2);
const max = Math.min(min + maxPagesToShow, totalPages);
const pages = [];
diff --git a/ui/v2.5/src/components/List/SavedFilterList.tsx b/ui/v2.5/src/components/List/SavedFilterList.tsx
index cbeeaa70a..df1d6136a 100644
--- a/ui/v2.5/src/components/List/SavedFilterList.tsx
+++ b/ui/v2.5/src/components/List/SavedFilterList.tsx
@@ -30,12 +30,15 @@ import { faBookmark, faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
import { AlertModal } from "../Shared/Alert";
import cx from "classnames";
import { TruncatedInlineText } from "../Shared/TruncatedText";
+import { OperationButton } from "../Shared/OperationButton";
+import { createPortal } from "react-dom";
const ExistingSavedFilterList: React.FC<{
name: string;
- setName: (name: string) => void;
- existing: { name: string; id: string }[];
-}> = ({ name, setName, existing }) => {
+ onSelect: (value: SavedFilterDataFragment) => void;
+ savedFilters: SavedFilterDataFragment[];
+ disabled?: boolean;
+}> = ({ name, onSelect, savedFilters: existing, disabled = false }) => {
const filtered = useMemo(() => {
if (!name) return existing;
@@ -51,7 +54,8 @@ const ExistingSavedFilterList: React.FC<{
@@ -64,7 +68,8 @@ const ExistingSavedFilterList: React.FC<{
export const SaveFilterDialog: React.FC<{
mode: FilterMode;
onClose: (name?: string, id?: string) => void;
-}> = ({ mode, onClose }) => {
+ isSaving?: boolean;
+}> = ({ mode, onClose, isSaving = false }) => {
const intl = useIntl();
const [filterName, setFilterName] = useState("");
@@ -79,6 +84,74 @@ export const SaveFilterDialog: React.FC<{
return (
+
+
+
+
+
+
+
+
+ setFilterName(e.target.value)}
+ disabled={isSaving}
+ />
+
+
+ setFilterName(f.name)}
+ savedFilters={data?.findSavedFilters ?? []}
+ />
+
+ {!!overwritingFilter && (
+
+
+
+ )}
+
+
+
+ onClose(filterName, overwritingFilter?.id)}
+ >
+ {intl.formatMessage({ id: "actions.save" })}
+
+
+
+ );
+};
+
+export const LoadFilterDialog: React.FC<{
+ mode: FilterMode;
+ onClose: (filter?: SavedFilterDataFragment) => void;
+}> = ({ mode, onClose }) => {
+ const intl = useIntl();
+ const [filterName, setFilterName] = useState("");
+
+ const { data } = useFindSavedFilters(mode);
+
+ return (
+
+
+
+
@@ -94,31 +167,14 @@ export const SaveFilterDialog: React.FC<{
onClose(f)}
+ savedFilters={data?.findSavedFilters ?? []}
/>
-
- {!!overwritingFilter && (
-
-
-
- )}
-
);
@@ -166,7 +222,7 @@ const OverwriteAlert: React.FC<{
void;
view?: View;
+ menuPortalTarget?: Element | DocumentFragment;
}
export const SavedFilterList: React.FC = ({
@@ -786,8 +843,15 @@ export const SavedFilterDropdown: React.FC = (props) => {
));
SavedFilterDropdownRef.displayName = "SavedFilterDropdown";
+ const menu = (
+
+ );
+
return (
-
+
= (props) => {
-
+ {props.menuPortalTarget
+ ? createPortal(menu, props.menuPortalTarget)
+ : menu}
);
};
diff --git a/ui/v2.5/src/components/List/ZoomSlider.tsx b/ui/v2.5/src/components/List/ZoomSlider.tsx
index dff8e4f57..093b5ec7a 100644
--- a/ui/v2.5/src/components/List/ZoomSlider.tsx
+++ b/ui/v2.5/src/components/List/ZoomSlider.tsx
@@ -2,19 +2,14 @@ import React, { useEffect } from "react";
import Mousetrap from "mousetrap";
import { Form } from "react-bootstrap";
-export interface IZoomSelectProps {
- minZoom: number;
- maxZoom: number;
- zoomIndex: number;
- onChangeZoom: (v: number) => void;
-}
+const minZoom = 0;
+const maxZoom = 3;
-export const ZoomSelect: React.FC = ({
- minZoom,
- maxZoom,
- zoomIndex,
- onChangeZoom,
-}) => {
+export function useZoomKeybinds(props: {
+ zoomIndex: number | undefined;
+ onChangeZoom: (v: number) => void;
+}) {
+ const { zoomIndex, onChangeZoom } = props;
useEffect(() => {
Mousetrap.bind("+", () => {
if (zoomIndex !== undefined && zoomIndex < maxZoom) {
@@ -32,7 +27,17 @@ export const ZoomSelect: React.FC = ({
Mousetrap.unbind("-");
};
});
+}
+export interface IZoomSelectProps {
+ zoomIndex: number;
+ onChangeZoom: (v: number) => void;
+}
+
+export const ZoomSelect: React.FC = ({
+ zoomIndex,
+ onChangeZoom,
+}) => {
return (
div > :not(:first-child) {
+ margin-left: 0.25rem;
+ }
+ }
+
+ .search-term-row {
+ align-items: center;
+ display: flex;
+ gap: 0.5rem;
+ justify-content: space-between;
+ margin-bottom: 0.5rem;
+ margin-left: 1.5rem;
+ margin-right: 1rem;
+
+ .search-term-input {
+ flex-basis: 75%;
+ }
+
+ @include media-breakpoint-down(xs) {
+ flex-wrap: wrap;
+
+ > span {
+ width: 100%;
+ }
+
+ .search-term-input {
+ flex-basis: 100%;
+ }
+ }
+ }
+
.filter-tags {
border-top: 1px solid rgb(16 22 26 / 40%);
padding: 1rem 1rem 0 1rem;
@@ -412,11 +454,22 @@ input[type="range"].zoom-slider {
}
}
-.filter-tags .clear-all-button {
- color: $text-color;
- // to match filter pills
- line-height: 16px;
- padding: 0;
+.filter-tags {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 0.5rem;
+
+ .more-tags {
+ background-color: transparent;
+ color: #fff;
+ }
+
+ .clear-all-button {
+ color: $text-color;
+ // to match filter pills
+ line-height: 16px;
+ padding: 0;
+ }
}
.filter-button {
@@ -695,7 +748,7 @@ input[type="range"].zoom-slider {
background-color: #202b33;
position: sticky;
top: 0;
- z-index: 100;
+ z-index: 1;
}
td:first-child {
@@ -864,6 +917,8 @@ input[type="range"].zoom-slider {
}
.filtered-list-toolbar {
+ align-items: center;
+ gap: 0.5rem;
justify-content: center;
margin-bottom: 0.5rem;
@@ -881,8 +936,10 @@ input[type="range"].zoom-slider {
}
}
- .btn.display-mode-select {
- margin-left: 0.5rem;
+ // set the width of the zoom-slider-container to prevent buttons moving when
+ // the slider appears/disappears
+ .zoom-slider-container {
+ min-width: 60px;
}
}
@@ -894,10 +951,6 @@ input[type="range"].zoom-slider {
}
}
-.search-term-input {
- margin-right: 0.5rem;
-}
-
.custom-field-filter {
align-items: center;
display: flex;
@@ -929,40 +982,454 @@ input[type="range"].zoom-slider {
}
.sidebar {
+ // make controls slightly larger on mobile
+ @include media-breakpoint-down(xs) {
+ .btn,
+ .form-control {
+ font-size: 1.25rem;
+ }
+ }
+
.sidebar-search-container {
display: flex;
margin-bottom: 0.5rem;
- margin-top: 0.25rem;
}
.search-term-input {
flex-grow: 1;
- margin-right: 0.25rem;
+ margin-right: 0;
.clearable-text-field {
height: 100%;
}
}
+
+ .edit-filter-button {
+ width: 100%;
+ }
+
+ .sidebar-footer {
+ background-color: $body-bg;
+ bottom: 0;
+ display: none;
+ padding: 0.5rem;
+ position: sticky;
+
+ @include media-breakpoint-down(xs) {
+ display: flex;
+ justify-content: center;
+ }
+ }
}
@include media-breakpoint-down(xs) {
- .sidebar .search-term-input {
- margin-right: 0.5rem;
+ .sidebar .sidebar-search-container {
+ margin-top: 0.25rem;
}
}
.pagination-footer {
- background-color: $body-bg;
+ background-color: transparent;
bottom: $navbar-height;
- padding: 0.5rem 1rem;
+ margin: auto;
+ padding: 0.5rem 1rem 0.75rem;
position: sticky;
+ width: fit-content;
z-index: 10;
@include media-breakpoint-up(sm) {
bottom: 0;
}
+ .pagination.btn-group {
+ box-shadow: 0 8px 10px 2px rgb(0 0 0 / 30%);
+ }
+
.pagination {
margin-bottom: 0;
+
+ .btn:disabled {
+ color: #888;
+ opacity: 1;
+ }
}
}
+
+// hide sidebar Edit Filter button on larger screens
+@include media-breakpoint-up(md) {
+ .sidebar .edit-filter-button {
+ display: none;
+ }
+}
+
+// the following refers to the new FilteredListToolbar2 component
+// ensure the rules here don't conflict with the original filtered-list-toolbar above
+// TODO - replace with only .filtered-list-toolbar once all lists use the new toolbar
+.scene-list-toolbar {
+ &.filtered-list-toolbar {
+ align-items: center;
+ background-color: $body-bg;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin-bottom: 0;
+ row-gap: 1rem;
+
+ > div {
+ align-items: center;
+ display: flex;
+ gap: 0.5rem;
+ justify-content: flex-start;
+
+ &:last-child {
+ flex-shrink: 0;
+ justify-content: flex-end;
+ }
+ }
+ }
+
+ &.filtered-list-toolbar {
+ flex-wrap: nowrap;
+ gap: 1rem;
+ // offset the main padding
+ margin-top: -0.5rem;
+ padding-bottom: 0.5rem;
+ padding-top: 0.5rem;
+ position: sticky;
+ top: $navbar-height;
+ z-index: 10;
+
+ @include media-breakpoint-down(xs) {
+ top: 0;
+ }
+
+ // hide drop down menu items for play and create new
+ // when the buttons are visible
+ @include media-breakpoint-up(sm) {
+ .scene-list-operations {
+ .play-item,
+ .create-new-item {
+ display: none;
+ }
+ }
+ }
+
+ // hide play and create new buttons on xs screens
+ // show these in the drop down menu instead
+ @include media-breakpoint-down(xs) {
+ .play-button,
+ .create-new-button {
+ display: none;
+ }
+ }
+
+ .toolbar-selection-section,
+ div.filter-section {
+ border: 1px solid $secondary;
+ border-radius: 0.25rem;
+ flex-grow: 1;
+ overflow-x: hidden;
+ }
+
+ div.toolbar-selection-section {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+
+ .sidebar-toggle-button {
+ margin-right: 0.5rem;
+ }
+
+ .selected-items-info {
+ align-items: center;
+ display: flex;
+ }
+
+ > div:first-child,
+ > div:last-child {
+ flex: 1;
+ }
+
+ > div:last-child {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .scene-list-operations {
+ display: flex;
+ }
+
+ // on smaller viewports move the operation buttons to the right
+ @include media-breakpoint-down(md) {
+ div.scene-list-operations {
+ flex: 1;
+ justify-content: flex-end;
+ order: 3;
+ }
+
+ > div:last-child {
+ flex: 0;
+ order: 2;
+ }
+ }
+ }
+
+ // on larger viewports, move the operation buttons to the center
+ @include media-breakpoint-up(lg) {
+ div.toolbar-selection-section div.scene-list-operations {
+ justify-content: center;
+
+ > .btn-group {
+ gap: 0.5rem;
+ }
+ }
+
+ div.toolbar-selection-section .empty-space {
+ flex: 1;
+ order: 3;
+ }
+ }
+
+ .search-container {
+ border-right: 1px solid $secondary;
+ display: flex;
+ margin-right: -0.5rem;
+ min-width: calc($sidebar-width - 15px);
+ padding-right: 10px;
+
+ .search-term-input {
+ margin-right: 0;
+ width: 100%;
+
+ .clearable-text-field {
+ height: 100%;
+ }
+ }
+ }
+
+ .filter-tags {
+ flex-grow: 1;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ margin-bottom: 0;
+
+ // account for filter button, and toggle sidebar buttons with gaps
+ width: calc(100% - 70px - 1rem);
+
+ @include media-breakpoint-down(xs) {
+ overflow-x: auto;
+ scrollbar-width: thin;
+ }
+
+ .tag-item {
+ white-space: nowrap;
+ }
+ }
+ }
+}
+
+// hide the search box in the toolbar when sidebar is shown on larger screens
+// larger screens don't overlap the sidebar
+@include media-breakpoint-up(md) {
+ .sidebar-pane:not(.hide-sidebar) .filtered-list-toolbar .search-container {
+ display: none;
+ }
+}
+// hide the search box when sidebar is hidden on smaller screens
+@include media-breakpoint-down(md) {
+ .sidebar-pane.hide-sidebar .filtered-list-toolbar .search-container {
+ display: none;
+ }
+}
+
+// hide the filter and saved filters icon buttons when sidebar is shown on smaller screens
+@include media-breakpoint-down(sm) {
+ .sidebar-pane:not(.hide-sidebar) .filtered-list-toolbar {
+ .filter-button,
+ .saved-filter-dropdown {
+ display: none;
+ }
+ }
+
+ // adjust the width of the filter-tags as well
+ .sidebar-pane:not(.hide-sidebar) .filtered-list-toolbar .filter-tags {
+ width: calc(100% - 35px - 0.5rem);
+ }
+}
+
+// move the sidebar toggle to the left on larger viewports
+@include media-breakpoint-up(md) {
+ .filtered-list-toolbar .filter-section {
+ .sidebar-toggle-button {
+ margin-left: 0;
+ }
+
+ .filter-tags {
+ order: 2;
+ }
+ }
+}
+
+// hide the search term tag item when the search box is visible
+@include media-breakpoint-up(lg) {
+ // TODO - remove scene-list-toolbar when all lists use the new toolbar
+ .scene-list-toolbar.filtered-list-toolbar
+ .filter-tags
+ .search-term-filter-tag {
+ display: none;
+ }
+}
+@include media-breakpoint-down(md) {
+ // TODO - remove scene-list-toolbar when all lists use the new toolbar
+ .sidebar-pane:not(.hide-sidebar)
+ .scene-list-toolbar.filtered-list-toolbar
+ .filter-tags
+ .search-term-filter-tag {
+ display: none;
+ }
+}
+
+// TODO - remove scene-list-toolbar when all lists use the new toolbar
+.detail-body .scene-list-toolbar.filtered-list-toolbar {
+ top: calc($sticky-detail-header-height + $navbar-height);
+
+ @include media-breakpoint-down(xs) {
+ top: 0;
+ }
+}
+
+#more-criteria-popover {
+ box-shadow: 0 8px 10px 2px rgb(0 0 0 / 30%);
+ max-width: 400px;
+ padding: 0.25rem;
+}
+
+.list-results-header {
+ align-items: flex-start;
+ background-color: $body-bg;
+ display: flex;
+
+ > div {
+ align-items: center;
+ display: flex;
+ flex: 1;
+ gap: 0.5rem;
+ justify-content: flex-start;
+
+ &.pagination-index-container {
+ justify-content: center;
+ }
+
+ &:last-child {
+ flex-shrink: 0;
+ justify-content: flex-end;
+ }
+ }
+}
+
+.list-results-header .pagination-index-container {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+
+ .pagination {
+ // hidden by default. Can be shown via css override if needed
+ display: none;
+ margin: 0;
+ }
+}
+
+.list-results-header {
+ gap: 0.25rem;
+ margin-bottom: 0.5rem;
+
+ .paginationIndex {
+ margin: 0;
+ }
+
+ // move pagination info to right on medium screens
+ @include media-breakpoint-down(md) {
+ & > .empty-space {
+ flex: 0;
+ }
+
+ & > div.pagination-index-container {
+ align-items: flex-end;
+ order: 3;
+ }
+ }
+
+ // center the header on smaller screens
+ @include media-breakpoint-down(sm) {
+ & > div,
+ & > div.pagination-index-container {
+ flex-basis: 100%;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ & > div.pagination-index-container {
+ align-items: center;
+ }
+ }
+}
+
+// sidebar visible styling
+.sidebar-pane:not(.hide-sidebar) .list-results-header {
+ // move pagination info to right on medium screens when sidebar
+ @include media-breakpoint-down(lg) {
+ & > .empty-space {
+ flex: 0;
+ }
+
+ & > div.pagination-index-container {
+ justify-content: flex-end;
+ order: 3;
+ }
+ }
+
+ // center the header on smaller screens when sidebar is visible
+ @include media-breakpoint-down(md) {
+ & > div,
+ & > div.pagination-index-container {
+ flex-basis: 100%;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ }
+}
+
+// Duration slider styles
+.duration-slider,
+.age-slider-container {
+ padding: 0.5rem 0 1rem;
+ width: 100%;
+}
+
+.duration-label-input,
+.age-label-input {
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: 0.25rem;
+ color: $text-color;
+ font-size: 0.875rem;
+ font-weight: 500;
+ padding: 0.125rem 0.25rem;
+ width: 4rem;
+
+ &:hover {
+ border-color: $secondary;
+ }
+
+ &:focus {
+ border-color: $primary;
+ outline: none;
+ }
+}
+
+.duration-preset {
+ cursor: pointer;
+}
diff --git a/ui/v2.5/src/components/List/util.ts b/ui/v2.5/src/components/List/util.ts
index bb85145e7..c15c3335a 100644
--- a/ui/v2.5/src/components/List/util.ts
+++ b/ui/v2.5/src/components/List/util.ts
@@ -1,17 +1,24 @@
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
import Mousetrap from "mousetrap";
import { ListFilterModel } from "src/models/list-filter/filter";
import { useHistory, useLocation } from "react-router-dom";
import { isEqual, isFunction } from "lodash-es";
import { QueryResult } from "@apollo/client";
import { IHasID } from "src/utils/data";
-import { ConfigurationContext } from "src/hooks/Config";
+import { useConfigurationContext } from "src/hooks/Config";
import { View } from "./views";
import { usePrevious } from "src/hooks/state";
import * as GQL from "src/core/generated-graphql";
import { DisplayMode } from "src/models/list-filter/types";
import { Criterion } from "src/models/list-filter/criteria/criterion";
+function locationEquals(
+ loc1: ReturnType | undefined,
+ loc2: ReturnType
+) {
+ return loc1 && loc1.pathname === loc2.pathname && loc1.search === loc2.search;
+}
+
export function useFilterURL(
filter: ListFilterModel,
setFilter: React.Dispatch>,
@@ -24,6 +31,7 @@ export function useFilterURL(
const history = useHistory();
const location = useLocation();
+ const prevLocation = usePrevious(location);
// when the filter changes, update the URL
const updateFilter = useCallback(
@@ -47,7 +55,8 @@ export function useFilterURL(
// and updates the filter accordingly.
useEffect(() => {
// don't apply if active is false
- if (!active) return;
+ // also don't apply if location is unchanged
+ if (!active || locationEquals(prevLocation, location)) return;
// re-init to load default filter on empty new query params
if (!location.search) {
@@ -73,7 +82,8 @@ export function useFilterURL(
});
}, [
active,
- location.search,
+ prevLocation,
+ location,
defaultFilter,
setFilter,
updateFilter,
@@ -84,7 +94,7 @@ export function useFilterURL(
}
export function useDefaultFilter(emptyFilter: ListFilterModel, view?: View) {
- const { configuration: config, loading } = useContext(ConfigurationContext);
+ const { configuration: config } = useConfigurationContext();
const defaultFilter = useMemo(() => {
if (view && config?.ui.defaultFilters?.[view]) {
@@ -104,9 +114,9 @@ export function useDefaultFilter(emptyFilter: ListFilterModel, view?: View) {
}
}, [view, config?.ui.defaultFilters, emptyFilter]);
- const retFilter = loading ? undefined : defaultFilter ?? emptyFilter;
+ const retFilter = defaultFilter ?? emptyFilter;
- return { defaultFilter: retFilter, loading };
+ return { defaultFilter: retFilter };
}
function useEmptyFilter(props: {
@@ -148,14 +158,14 @@ export function useFilterState(
const emptyFilter = useEmptyFilter({ filterMode, defaultSort, config });
- const { defaultFilter, loading } = useDefaultFilter(emptyFilter, view);
+ const { defaultFilter } = useDefaultFilter(emptyFilter, view);
const { setFilter } = useFilterURL(filter, setFilterState, {
defaultFilter,
active: useURL,
});
- return { loading, filter, setFilter };
+ return { filter, setFilter };
}
export function useFilterOperations(props: {
@@ -196,9 +206,12 @@ export function useFilterOperations(props: {
[setFilter]
);
- const clearAllCriteria = useCallback(() => {
- setFilter((cv) => cv.clearCriteria());
- }, [setFilter]);
+ const clearAllCriteria = useCallback(
+ (includeSearchTerm = false) => {
+ setFilter((cv) => cv.clearCriteria(includeSearchTerm));
+ },
+ [setFilter]
+ );
return {
setPage,
diff --git a/ui/v2.5/src/components/MainNavbar.tsx b/ui/v2.5/src/components/MainNavbar.tsx
index 98bbc26c6..caee46f0c 100644
--- a/ui/v2.5/src/components/MainNavbar.tsx
+++ b/ui/v2.5/src/components/MainNavbar.tsx
@@ -11,7 +11,7 @@ import {
MessageDescriptor,
useIntl,
} from "react-intl";
-import { Nav, Navbar, Button, Fade } from "react-bootstrap";
+import { Nav, Navbar, Button } from "react-bootstrap";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { LinkContainer } from "react-router-bootstrap";
import { Link, NavLink, useLocation, useHistory } from "react-router-dom";
@@ -19,7 +19,7 @@ import Mousetrap from "mousetrap";
import SessionUtils from "src/utils/session";
import { Icon } from "src/components/Shared/Icon";
-import { ConfigurationContext } from "src/hooks/Config";
+import { useConfigurationContext } from "src/hooks/Config";
import { ManualStateContext } from "./Help/context";
import { SettingsButton } from "./SettingsButton";
import {
@@ -103,7 +103,6 @@ const allMenuItems: IMenuItem[] = [
href: "/scenes",
icon: faPlayCircle,
hotkey: "g s",
- userCreatable: true,
},
{
name: "images",
@@ -182,7 +181,7 @@ const MainNavbarUtilityItems = PatchComponent(
export const MainNavbar: React.FC = () => {
const history = useHistory();
const location = useLocation();
- const { configuration, loading } = React.useContext(ConfigurationContext);
+ const { configuration } = useConfigurationContext();
const { openManual } = React.useContext(ManualStateContext);
const [expanded, setExpanded] = useState(false);
@@ -360,35 +359,31 @@ export const MainNavbar: React.FC = () => {
ref={navbarRef}
>
-
- <>
-
- {menuItems.map(({ href, icon, message }) => (
-
-
-
-
-
- ))}
-
-
-
-
+
+ {menuItems.map(({ href, icon, message }) => (
+
+
+
+
+
+ ))}
+
+
diff --git a/ui/v2.5/src/components/Performers/EditPerformersDialog.tsx b/ui/v2.5/src/components/Performers/EditPerformersDialog.tsx
index 71fcbedd9..677ac3aa1 100644
--- a/ui/v2.5/src/components/Performers/EditPerformersDialog.tsx
+++ b/ui/v2.5/src/components/Performers/EditPerformersDialog.tsx
@@ -27,6 +27,8 @@ import { BulkUpdateTextInput } from "../Shared/BulkUpdateTextInput";
import { faPencilAlt } from "@fortawesome/free-solid-svg-icons";
import * as FormUtils from "src/utils/form";
import { CountrySelect } from "../Shared/CountrySelect";
+import { useConfigurationContext } from "src/hooks/Config";
+import cx from "classnames";
interface IListOperationProps {
selected: GQL.SlimPerformerDataFragment[];
@@ -61,6 +63,10 @@ export const EditPerformersDialog: React.FC = (
) => {
const intl = useIntl();
const Toast = useToast();
+
+ const { configuration } = useConfigurationContext();
+ const { sfwContentMode } = configuration.interface;
+
const [tagIds, setTagIds] = useState({
mode: GQL.BulkUpdateIdMode.Add,
});
@@ -204,7 +210,7 @@ export const EditPerformersDialog: React.FC = (
setter: (newValue: string | undefined) => void
) {
return (
-
+
@@ -218,9 +224,13 @@ export const EditPerformersDialog: React.FC = (
}
function render() {
+ // sfw class needs to be set because it is outside body
+
return (
= (
}}
isRunning={isUpdating}
>
-
+
{FormUtils.renderLabel({
title: intl.formatMessage({ id: "rating" }),
})}
@@ -322,7 +332,7 @@ export const EditPerformersDialog: React.FC = (
setPenisLength(v)
)}
-
+
diff --git a/ui/v2.5/src/components/Performers/PerformerCard.tsx b/ui/v2.5/src/components/Performers/PerformerCard.tsx
index 02e2a68fd..5f7a26d42 100644
--- a/ui/v2.5/src/components/Performers/PerformerCard.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerCard.tsx
@@ -6,7 +6,6 @@ import NavUtils from "src/utils/navigation";
import TextUtils from "src/utils/text";
import { GridCard } from "../Shared/GridCard/GridCard";
import { CountryFlag } from "../Shared/CountryFlag";
-import { SweatDrops } from "../Shared/SweatDrops";
import { HoverPopover } from "../Shared/HoverPopover";
import { Icon } from "../Shared/Icon";
import { TagLink } from "../Shared/TagLink";
@@ -17,12 +16,16 @@ import {
} from "src/models/list-filter/criteria/criterion";
import { PopoverCountButton } from "../Shared/PopoverCountButton";
import GenderIcon from "./GenderIcon";
-import { faTag } from "@fortawesome/free-solid-svg-icons";
+import { faLink, faTag } from "@fortawesome/free-solid-svg-icons";
+import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
import { RatingBanner } from "../Shared/RatingBanner";
import { usePerformerUpdate } from "src/core/StashService";
import { ILabeledId } from "src/models/list-filter/types";
import { FavoriteIcon } from "../Shared/FavoriteIcon";
import { PatchComponent } from "src/patch";
+import { ExternalLinksButton } from "../Shared/ExternalLinksButton";
+import { useConfigurationContext } from "src/hooks/Config";
+import { OCounterButton } from "../Shared/CountButton";
export interface IPerformerCardExtraCriteria {
scenes?: ModifierCriterion[];
@@ -100,16 +103,7 @@ const PerformerCardPopovers: React.FC = PatchComponent(
function maybeRenderOCounter() {
if (!performer.o_counter) return;
- return (
-
-
-
- );
+ return ;
}
function maybeRenderTagPopoverButton() {
@@ -176,6 +170,8 @@ const PerformerCardPopovers: React.FC = PatchComponent(
const PerformerCardOverlays: React.FC = PatchComponent(
"PerformerCard.Overlays",
({ performer }) => {
+ const { configuration } = useConfigurationContext();
+ const uiConfig = configuration?.ui;
const [updatePerformer] = usePerformerUpdate();
function onToggleFavorite(v: boolean) {
@@ -215,6 +211,63 @@ const PerformerCardOverlays: React.FC = PatchComponent(
}
}
+ function maybeRenderLinks() {
+ if (!uiConfig?.showLinksOnPerformerCard) {
+ return;
+ }
+
+ if (performer.urls && performer.urls.length > 0) {
+ const twitter = performer.urls.filter((u) =>
+ u.match(/https?:\/\/(?:www\.)?(?:twitter|x).com\//)
+ );
+ const instagram = performer.urls.filter((u) =>
+ u.match(/https?:\/\/(?:www\.)?instagram.com\//)
+ );
+ const others = performer.urls.filter(
+ (u) => !twitter.includes(u) && !instagram.includes(u)
+ );
+
+ return (
+
+ {twitter.length > 0 && (
+
+ )}
+ {instagram.length > 0 && (
+
+ )}
+ {others.length > 0 && (
+
+ )}
+
+ );
+ }
+ }
+
return (
<>
= PatchComponent(
className="hide-not-favorite"
/>
{maybeRenderRatingBanner()}
+ {maybeRenderLinks()}
{maybeRenderFlag()}
);
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
index 03530c52e..dd72d0025 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
@@ -16,7 +16,7 @@ import { DetailsEditNavbar } from "src/components/Shared/DetailsEditNavbar";
import { ErrorMessage } from "src/components/Shared/ErrorMessage";
import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
import { useToast } from "src/hooks/Toast";
-import { ConfigurationContext } from "src/hooks/Config";
+import { useConfigurationContext } from "src/hooks/Config";
import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
import {
CompressedPerformerDetailsPanel,
@@ -47,6 +47,8 @@ import { HeaderImage } from "src/components/Shared/DetailsPage/HeaderImage";
import { LightboxLink } from "src/hooks/Lightbox/LightboxLink";
import { PatchComponent } from "src/patch";
import { ILightboxImage } from "src/hooks/Lightbox/types";
+import { goBackOrReplace } from "src/utils/history";
+import { OCounterButton } from "src/components/Shared/CountButton";
interface IProps {
performer: GQL.PerformerDataFragment;
@@ -238,7 +240,7 @@ const PerformerPage: React.FC = PatchComponent(
const intl = useIntl();
// Configuration settings
- const { configuration } = React.useContext(ConfigurationContext);
+ const { configuration } = useConfigurationContext();
const uiConfig = configuration?.ui;
const abbreviateCounter = uiConfig?.abbreviateCounters ?? false;
const enableBackgroundImage =
@@ -330,7 +332,7 @@ const PerformerPage: React.FC = PatchComponent(
return;
}
- history.goBack();
+ goBackOrReplace(history, "/performers");
}
function toggleEditing(value?: boolean) {
@@ -422,12 +424,17 @@ const PerformerPage: React.FC = PatchComponent(
- setRating(value)}
- clickToRate
- withoutContext
- />
+
+ setRating(value)}
+ clickToRate
+ withoutContext
+ />
+ {!!performer.o_counter && (
+
+ )}
+
{!isEditing && (
=
}
fullWidth={fullWidth}
/>
-
+
{performer.country ? (
= ({
const [scrapedPerformer, setScrapedPerformer] =
useState();
- const { configuration: stashConfig } = React.useContext(ConfigurationContext);
+ const { configuration: stashConfig } = useConfigurationContext();
const intl = useIntl();
@@ -466,7 +466,6 @@ export const PerformerEditPanel: React.FC = ({
setScraper(undefined);
} else {
setScrapedPerformer(result);
- updateStashIDs(performerResult.remote_site_id);
}
}
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeDialog.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeDialog.tsx
index eb5f26a83..ad7e44d6d 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeDialog.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeDialog.tsx
@@ -63,6 +63,7 @@ function renderScrapedGenderRow(
) {
return (
renderScrapedGender(result)}
@@ -113,6 +114,7 @@ function renderScrapedCircumcisedRow(
return (
renderScrapedCircumcised(result)}
renderNewField={() =>
@@ -146,6 +148,22 @@ export const PerformerScrapeDialog: React.FC = (
return;
}
+ // #6257 - it is possible (though unsupported) to have multiple stash IDs for the same
+ // endpoint; in that case, we should prefer the one matching the scraped remote site ID
+ // if it exists
+ const stashIDs = (props.performer.stash_ids ?? []).filter(
+ (s) => s.endpoint === endpoint
+ );
+ if (stashIDs.length > 1 && props.scraped.remote_site_id) {
+ const matchingID = stashIDs.find(
+ (s) => s.stash_id === props.scraped.remote_site_id
+ );
+ if (matchingID) {
+ return matchingID.stash_id;
+ }
+ }
+
+ // otherwise, return the first stash ID for the endpoint
return props.performer.stash_ids?.find((s) => s.endpoint === endpoint)
?.stash_id;
}
@@ -385,16 +403,19 @@ export const PerformerScrapeDialog: React.FC = (
return (
<>
setName(value)}
/>
setDisambiguation(value)}
/>
setAliases(value)}
@@ -405,46 +426,55 @@ export const PerformerScrapeDialog: React.FC = (
(value) => setGender(value)
)}
setBirthdate(value)}
/>
setDeathDate(value)}
/>
setEthnicity(value)}
/>
setCountry(value)}
/>
setHairColor(value)}
/>
setEyeColor(value)}
/>
setWeight(value)}
/>
setHeight(value)}
/>
setPenisLength(value)}
@@ -455,42 +485,50 @@ export const PerformerScrapeDialog: React.FC = (
(value) => setCircumcised(value)
)}
setMeasurements(value)}
/>
setFakeTits(value)}
/>
setCareerLength(value)}
/>
setTattoos(value)}
/>
setPiercings(value)}
/>
setURLs(value)}
/>
setDetails(value)}
/>
{scrapedTagsRow}
= (
onChange={(value) => setImage(value)}
/>
= ({
selectable
>
= ({
placement = "top",
target,
}) => {
- const { configuration: config } = React.useContext(ConfigurationContext);
+ const { configuration: config } = useConfigurationContext();
const showPerformerCardOnHover = config?.ui.showTagCardOnHover ?? true;
diff --git a/ui/v2.5/src/components/Performers/PerformerSelect.tsx b/ui/v2.5/src/components/Performers/PerformerSelect.tsx
index d31dc3ec7..f10519897 100644
--- a/ui/v2.5/src/components/Performers/PerformerSelect.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerSelect.tsx
@@ -13,7 +13,7 @@ import {
queryFindPerformersByIDForSelect,
queryFindPerformersForSelect,
} from "src/core/StashService";
-import { ConfigurationContext } from "src/hooks/Config";
+import { useConfigurationContext } from "src/hooks/Config";
import { useIntl } from "react-intl";
import { defaultMaxOptionsShown } from "src/core/config";
import { ListFilterModel } from "src/models/list-filter/filter";
@@ -82,12 +82,12 @@ const _PerformerSelect: React.FC<
> = (props) => {
const [createPerformer] = usePerformerCreate();
- const { configuration } = React.useContext(ConfigurationContext);
+ const { configuration } = useConfigurationContext();
const intl = useIntl();
const maxOptionsShown =
configuration?.ui.maxOptionsShown ?? defaultMaxOptionsShown;
const defaultCreatable =
- !configuration?.interface.disableDropdownCreate.performer ?? true;
+ !configuration?.interface.disableDropdownCreate.performer;
async function loadPerformers(input: string): Promise {
const filter = new ListFilterModel(GQL.FilterMode.Performers);
diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
index f76816f05..1840ad960 100644
--- a/ui/v2.5/src/components/Performers/styles.scss
+++ b/ui/v2.5/src/components/Performers/styles.scss
@@ -35,12 +35,33 @@
.rating-number .form-control {
width: inherit;
}
+
+ // The following min-width declarations prevent
+ // the performer's O-Count from moving around
+ // when hovering over rating stars
+ .rating-stars-precision-full .star-rating-number {
+ min-width: 0.75rem;
+ }
+
+ .rating-stars-precision-half .star-rating-number,
+ .rating-stars-precision-tenth .star-rating-number {
+ min-width: 1.45rem;
+ }
+
+ .rating-stars-precision-quarter .star-rating-number {
+ min-width: 2rem;
+ }
}
.alias {
font-weight: bold;
}
+ .quality-group {
+ display: inline-flex;
+ margin-top: 0.25rem;
+ }
+
// the detail element ids are the same as field type name
// which don't follow the correct convention
/* stylelint-disable selector-class-pattern */
@@ -86,6 +107,10 @@
.thumbnail-section {
position: relative;
+
+ .instagram {
+ color: pink;
+ }
}
&-image {
diff --git a/ui/v2.5/src/components/SceneDuplicateChecker/SceneDuplicateChecker.tsx b/ui/v2.5/src/components/SceneDuplicateChecker/SceneDuplicateChecker.tsx
index 2d8114935..d396a01f4 100644
--- a/ui/v2.5/src/components/SceneDuplicateChecker/SceneDuplicateChecker.tsx
+++ b/ui/v2.5/src/components/SceneDuplicateChecker/SceneDuplicateChecker.tsx
@@ -79,7 +79,24 @@ export const SceneDuplicateChecker: React.FC = () => {
},
});
- const scenes = data?.findDuplicateScenes ?? [];
+ const getGroupTotalSize = (group: GQL.SlimSceneDataFragment[]) => {
+ // Sum all file sizes across all scenes in the group
+ return group.reduce((groupTotal, scene) => {
+ const sceneTotal = scene.files.reduce(
+ (fileTotal, file) => fileTotal + file.size,
+ 0
+ );
+ return groupTotal + sceneTotal;
+ }, 0);
+ };
+
+ const scenes = useMemo(() => {
+ const groups = data?.findDuplicateScenes ?? [];
+ // Sort by total file size descending (largest groups first)
+ return [...groups].sort((a, b) => {
+ return getGroupTotalSize(b) - getGroupTotalSize(a);
+ });
+ }, [data?.findDuplicateScenes]);
const { data: missingPhash } = GQL.useFindScenesQuery({
variables: {
diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
index 5749f6331..77c0d2b19 100644
--- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
+++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
@@ -1,7 +1,6 @@
import React, {
KeyboardEvent,
useCallback,
- useContext,
useEffect,
useMemo,
useRef,
@@ -23,6 +22,7 @@ import "./vtt-thumbnails";
import "./big-buttons";
import "./track-activity";
import "./vrmode";
+import "./media-session";
import cx from "classnames";
import {
useSceneSaveActivity,
@@ -31,7 +31,7 @@ import {
import * as GQL from "src/core/generated-graphql";
import { ScenePlayerScrubber } from "./ScenePlayerScrubber";
-import { ConfigurationContext } from "src/hooks/Config";
+import { useConfigurationContext } from "src/hooks/Config";
import {
ConnectionState,
InteractiveContext,
@@ -120,6 +120,22 @@ function handleHotkeys(player: VideoJsPlayer, event: videojs.KeyboardEvent) {
return;
}
+ const skipButtons = player.skipButtons();
+ if (skipButtons) {
+ // handle multimedia keys
+ switch (event.key) {
+ case "MediaTrackNext":
+ if (!skipButtons.onNext) return;
+ skipButtons.onNext();
+ break;
+ case "MediaTrackPrevious":
+ if (!skipButtons.onPrevious) return;
+ skipButtons.onPrevious();
+ break;
+ // MediaPlayPause handled by videojs
+ }
+ }
+
switch (event.which) {
case 32: // space
case 13: // enter
@@ -224,7 +240,7 @@ export const ScenePlayer: React.FC = PatchComponent(
onNext,
onPrevious,
}) => {
- const { configuration } = useContext(ConfigurationContext);
+ const { configuration } = useConfigurationContext();
const interfaceConfig = configuration?.interface;
const uiConfig = configuration?.ui;
const videoRef = useRef(null);
@@ -354,7 +370,9 @@ export const ScenePlayer: React.FC = PatchComponent(
},
},
plugins: {
- airPlay: {},
+ airPlay: {
+ addButtonToControlBar: uiConfig?.enableChromecast ?? false,
+ },
chromecast: {},
vttThumbnails: {
showTimestamp: true,
@@ -380,6 +398,7 @@ export const ScenePlayer: React.FC = PatchComponent(
pauseBeforeLooping: false,
createButtons: uiConfig?.showAbLoopControls ?? false,
},
+ mediaSession: {},
},
};
@@ -413,7 +432,7 @@ export const ScenePlayer: React.FC = PatchComponent(
};
// empty deps - only init once
// showAbLoopControls is necessary to re-init the player when the config changes
- }, [uiConfig?.showAbLoopControls]);
+ }, [uiConfig?.showAbLoopControls, uiConfig?.enableChromecast]);
useEffect(() => {
const player = getPlayer();
@@ -857,6 +876,23 @@ export const ScenePlayer: React.FC = PatchComponent(
return () => player.off("ended");
}, [getPlayer, onComplete]);
+ // set up mediaSession plugin
+ useEffect(() => {
+ const player = getPlayer();
+ if (!player) return;
+
+ // set up mediasession plugin
+ // get performer names as array
+ const performers = scene?.performers.map((p) => p.name).join(", ");
+ player
+ .mediaSession()
+ .setMetadata(
+ scene?.title ?? "Stash",
+ scene?.studio?.name ?? performers ?? "Stash",
+ scene.paths.screenshot || ""
+ );
+ }, [getPlayer, scene]);
+
function onScrubberScroll() {
if (started.current) {
getPlayer()?.pause();
diff --git a/ui/v2.5/src/components/ScenePlayer/markers.ts b/ui/v2.5/src/components/ScenePlayer/markers.ts
index 83a695c1b..6215f7f47 100644
--- a/ui/v2.5/src/components/ScenePlayer/markers.ts
+++ b/ui/v2.5/src/components/ScenePlayer/markers.ts
@@ -5,6 +5,7 @@ export interface IMarker {
title: string;
seconds: number;
end_seconds?: number | null;
+ primaryTag: { name: string };
}
interface IMarkersOptions {
@@ -85,8 +86,13 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
markerSet.dot.toggleAttribute("marker-tooltip-shown", true);
// Set background color based on tag (if available)
- if (marker.title && this.tagColors[marker.title]) {
- markerSet.dot.style.backgroundColor = this.tagColors[marker.title];
+ if (
+ marker.primaryTag &&
+ marker.primaryTag.name &&
+ this.tagColors[marker.primaryTag.name]
+ ) {
+ markerSet.dot.style.backgroundColor =
+ this.tagColors[marker.primaryTag.name];
}
markerSet.dot.addEventListener("mouseenter", () => {
this.showMarkerTooltip(marker.title);
@@ -152,8 +158,12 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
rangeDiv.style.display = "none"; // Initially hidden
// Set background color based on tag (if available)
- if (marker.title && this.tagColors[marker.title]) {
- rangeDiv.style.backgroundColor = this.tagColors[marker.title];
+ if (
+ marker.primaryTag &&
+ marker.primaryTag.name &&
+ this.tagColors[marker.primaryTag.name]
+ ) {
+ rangeDiv.style.backgroundColor = this.tagColors[marker.primaryTag.name];
}
markerSet.range = rangeDiv;
diff --git a/ui/v2.5/src/components/ScenePlayer/media-session.ts b/ui/v2.5/src/components/ScenePlayer/media-session.ts
new file mode 100644
index 000000000..b3ce2d0ea
--- /dev/null
+++ b/ui/v2.5/src/components/ScenePlayer/media-session.ts
@@ -0,0 +1,71 @@
+import videojs, { VideoJsPlayer } from "video.js";
+
+class MediaSessionPlugin extends videojs.getPlugin("plugin") {
+ constructor(player: VideoJsPlayer) {
+ super(player);
+
+ player.ready(() => {
+ player.addClass("vjs-media-session");
+ this.setActionHandlers();
+ });
+
+ player.on("play", () => {
+ this.updatePlaybackState();
+ });
+
+ player.on("pause", () => {
+ this.updatePlaybackState();
+ });
+ this.updatePlaybackState();
+ }
+
+ // manually set poster since it's only set on useEffect
+ public setMetadata(title: string, artist: string, poster: string): void {
+ if ("mediaSession" in navigator) {
+ navigator.mediaSession.metadata = new MediaMetadata({
+ title,
+ artist,
+ artwork: [
+ {
+ src: poster || this.player.poster() || "",
+ type: "image/jpeg",
+ },
+ ],
+ });
+ }
+ }
+
+ private updatePlaybackState(): void {
+ if ("mediaSession" in navigator) {
+ const playbackState = this.player.paused() ? "paused" : "playing";
+ navigator.mediaSession.playbackState = playbackState;
+ }
+ }
+
+ private setActionHandlers(): void {
+ // method initialization
+ navigator.mediaSession.setActionHandler("play", () => {
+ this.player.play();
+ });
+ navigator.mediaSession.setActionHandler("pause", () => {
+ this.player.pause();
+ });
+ navigator.mediaSession.setActionHandler("nexttrack", () => {
+ this.player.skipButtons()?.handleForward();
+ });
+ navigator.mediaSession.setActionHandler("previoustrack", () => {
+ this.player.skipButtons()?.handleBackward();
+ });
+ }
+}
+
+videojs.registerPlugin("mediaSession", MediaSessionPlugin);
+
+/* eslint-disable @typescript-eslint/naming-convention */
+declare module "video.js" {
+ interface VideoJsPlayer {
+ mediaSession: () => MediaSessionPlugin;
+ }
+}
+
+export default MediaSessionPlugin;
diff --git a/ui/v2.5/src/components/ScenePlayer/util.ts b/ui/v2.5/src/components/ScenePlayer/util.ts
index a63ab6a2e..8c6fb8010 100644
--- a/ui/v2.5/src/components/ScenePlayer/util.ts
+++ b/ui/v2.5/src/components/ScenePlayer/util.ts
@@ -2,5 +2,6 @@ import videojs from "video.js";
export const VIDEO_PLAYER_ID = "VideoJsPlayer";
-export const getPlayerPosition = () =>
- videojs.getPlayer(VIDEO_PLAYER_ID)?.currentTime();
+export const getPlayer = () => videojs.getPlayer(VIDEO_PLAYER_ID);
+
+export const getPlayerPosition = () => getPlayer()?.currentTime();
diff --git a/ui/v2.5/src/components/Scenes/DeleteScenesDialog.tsx b/ui/v2.5/src/components/Scenes/DeleteScenesDialog.tsx
index 88f133a80..56cbd69b0 100644
--- a/ui/v2.5/src/components/Scenes/DeleteScenesDialog.tsx
+++ b/ui/v2.5/src/components/Scenes/DeleteScenesDialog.tsx
@@ -4,7 +4,7 @@ import { useScenesDestroy } from "src/core/StashService";
import * as GQL from "src/core/generated-graphql";
import { ModalComponent } from "src/components/Shared/Modal";
import { useToast } from "src/hooks/Toast";
-import { ConfigurationContext } from "src/hooks/Config";
+import { useConfigurationContext } from "src/hooks/Config";
import { FormattedMessage, useIntl } from "react-intl";
import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
import { objectPath } from "src/core/files";
@@ -34,7 +34,7 @@ export const DeleteScenesDialog: React.FC = (
{ count: props.selected.length, singularEntity, pluralEntity }
);
- const { configuration: config } = React.useContext(ConfigurationContext);
+ const { configuration: config } = useConfigurationContext();
const [deleteFile, setDeleteFile] = useState(
config?.defaults.deleteFile ?? false
@@ -94,6 +94,11 @@ export const DeleteScenesDialog: React.FC = (
}
});
+ const deleteTrashPath = config?.general.deleteTrashPath;
+ const deleteAlertId = deleteTrashPath
+ ? "dialogs.delete_alert_to_trash"
+ : "dialogs.delete_alert";
+
return (
@@ -103,7 +108,7 @@ export const DeleteScenesDialog: React.FC = (
singularEntity: intl.formatMessage({ id: "file" }),
pluralEntity: intl.formatMessage({ id: "files" }),
}}
- id="dialogs.delete_alert"
+ id={deleteAlertId}
/>
diff --git a/ui/v2.5/src/components/Scenes/EditSceneMarkersDialog.tsx b/ui/v2.5/src/components/Scenes/EditSceneMarkersDialog.tsx
new file mode 100644
index 000000000..bb1d8067b
--- /dev/null
+++ b/ui/v2.5/src/components/Scenes/EditSceneMarkersDialog.tsx
@@ -0,0 +1,200 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Form } from "react-bootstrap";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useBulkSceneMarkerUpdate } from "src/core/StashService";
+import * as GQL from "src/core/generated-graphql";
+import { ModalComponent } from "../Shared/Modal";
+import { useToast } from "src/hooks/Toast";
+import { MultiSet } from "../Shared/MultiSet";
+import {
+ getAggregateState,
+ getAggregateStateObject,
+} from "src/utils/bulkUpdate";
+import { BulkUpdateTextInput } from "../Shared/BulkUpdateTextInput";
+import { faPencilAlt } from "@fortawesome/free-solid-svg-icons";
+import { TagSelect } from "../Shared/Select";
+
+interface IListOperationProps {
+ selected: GQL.SceneMarkerDataFragment[];
+ onClose: (applied: boolean) => void;
+}
+
+const scenemarkerFields = ["title"];
+
+export const EditSceneMarkersDialog: React.FC = (
+ props: IListOperationProps
+) => {
+ const intl = useIntl();
+ const Toast = useToast();
+
+ const [updateInput, setUpdateInput] =
+ useState({
+ ids: props.selected.map((scenemarker) => {
+ return scenemarker.id;
+ }),
+ });
+
+ const [tagIds, setTagIds] = useState({
+ mode: GQL.BulkUpdateIdMode.Add,
+ });
+
+ const [updateSceneMarkers] = useBulkSceneMarkerUpdate();
+
+ // Network state
+ const [isUpdating, setIsUpdating] = useState(false);
+
+ const aggregateState = useMemo(() => {
+ const updateState: Partial = {};
+ const state = props.selected;
+ let updateTagIds: string[] = [];
+ let first = true;
+
+ state.forEach((scenemarker: GQL.SceneMarkerDataFragment) => {
+ getAggregateStateObject(
+ updateState,
+ scenemarker,
+ scenemarkerFields,
+ first
+ );
+
+ // sceneMarker data fragment doesn't have primary_tag_id, so handle separately
+ updateState.primary_tag_id = getAggregateState(
+ updateState.primary_tag_id,
+ scenemarker.primary_tag.id,
+ first
+ );
+
+ const thisTagIDs = (scenemarker.tags ?? []).map((p) => p.id).sort();
+
+ updateTagIds = getAggregateState(updateTagIds, thisTagIDs, first) ?? [];
+
+ first = false;
+ });
+
+ return { state: updateState, tagIds: updateTagIds };
+ }, [props.selected]);
+
+ // update initial state from aggregate
+ useEffect(() => {
+ setUpdateInput((current) => ({ ...current, ...aggregateState.state }));
+ }, [aggregateState]);
+
+ function setUpdateField(input: Partial) {
+ setUpdateInput((current) => ({ ...current, ...input }));
+ }
+
+ function getSceneMarkerInput(): GQL.BulkSceneMarkerUpdateInput {
+ const sceneMarkerInput: GQL.BulkSceneMarkerUpdateInput = {
+ ...updateInput,
+ tag_ids: tagIds,
+ };
+
+ return sceneMarkerInput;
+ }
+
+ async function onSave() {
+ setIsUpdating(true);
+ try {
+ await updateSceneMarkers({
+ variables: {
+ input: getSceneMarkerInput(),
+ },
+ });
+ Toast.success(
+ intl.formatMessage(
+ { id: "toast.updated_entity" },
+ {
+ entity: intl.formatMessage({ id: "markers" }).toLocaleLowerCase(),
+ }
+ )
+ );
+ props.onClose(true);
+ } catch (e) {
+ Toast.error(e);
+ }
+ setIsUpdating(false);
+ }
+
+ function renderTextField(
+ name: string,
+ value: string | undefined | null,
+ setter: (newValue: string | undefined) => void,
+ area: boolean = false
+ ) {
+ return (
+
+
+
+
+ setter(newValue)}
+ unsetDisabled={props.selected.length < 2}
+ as={area ? "textarea" : undefined}
+ />
+
+ );
+ }
+
+ function render() {
+ return (
+ props.onClose(false),
+ text: intl.formatMessage({ id: "actions.cancel" }),
+ variant: "secondary",
+ }}
+ isRunning={isUpdating}
+ >
+
+
+ );
+ }
+
+ return render();
+};
diff --git a/ui/v2.5/src/components/Scenes/SceneCard.tsx b/ui/v2.5/src/components/Scenes/SceneCard.tsx
index 99b910f67..2cb4a9af3 100644
--- a/ui/v2.5/src/components/Scenes/SceneCard.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneCard.tsx
@@ -6,12 +6,11 @@ import * as GQL from "src/core/generated-graphql";
import { Icon } from "../Shared/Icon";
import { GalleryLink, TagLink, SceneMarkerLink } from "../Shared/TagLink";
import { HoverPopover } from "../Shared/HoverPopover";
-import { SweatDrops } from "../Shared/SweatDrops";
import { TruncatedText } from "../Shared/TruncatedText";
import NavUtils from "src/utils/navigation";
import TextUtils from "src/utils/text";
import { SceneQueue } from "src/models/sceneQueue";
-import { ConfigurationContext } from "src/hooks/Config";
+import { useConfigurationContext } from "src/hooks/Config";
import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";
import { GridCard } from "../Shared/GridCard/GridCard";
import { RatingBanner } from "../Shared/RatingBanner";
@@ -30,6 +29,7 @@ import { PatchComponent } from "src/patch";
import { StudioOverlay } from "../Shared/GridCard/StudioOverlay";
import { GroupTag } from "../Groups/GroupTag";
import { FileSize } from "../Shared/FileSize";
+import { OCounterButton } from "../Shared/CountButton";
interface IScenePreviewProps {
isPortrait: boolean;
@@ -218,16 +218,7 @@ const SceneCardPopovers = PatchComponent(
function maybeRenderOCounter() {
if (props.scene.o_counter) {
- return (
-
-
-
- );
+ return ;
}
}
@@ -353,7 +344,7 @@ const SceneCardImage = PatchComponent(
"SceneCard.Image",
(props: ISceneCardProps) => {
const history = useHistory();
- const { configuration } = React.useContext(ConfigurationContext);
+ const { configuration } = useConfigurationContext();
const cont = configuration?.interface.continuePlaylistDefault ?? false;
const file = useMemo(
@@ -437,7 +428,7 @@ const SceneCardImage = PatchComponent(
export const SceneCard = PatchComponent(
"SceneCard",
(props: ISceneCardProps) => {
- const { configuration } = React.useContext(ConfigurationContext);
+ const { configuration } = useConfigurationContext();
const file = useMemo(
() => (props.scene.files.length > 0 ? props.scene.files[0] : undefined),
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/ExternalPlayerButton.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/ExternalPlayerButton.tsx
index b17dfb6bb..3701f4138 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/ExternalPlayerButton.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/ExternalPlayerButton.tsx
@@ -29,7 +29,7 @@ export const ExternalPlayerButton: React.FC = ({
const streamURL = new URL(stream);
if (isAndroid) {
const scheme = streamURL.protocol.slice(0, -1);
- streamURL.hash = `Intent;action=android.intent.action.VIEW;scheme=${scheme};type=video/mp4;S.title=${encodeURI(
+ streamURL.hash = `Intent;action=android.intent.action.VIEW;scheme=${scheme};type=video/mp4;S.title=${encodeURIComponent(
title
)};end`;
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/OCounterButton.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/OCounterButton.tsx
index 8fdb7dfd7..d8963df4d 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/OCounterButton.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/OCounterButton.tsx
@@ -1,10 +1,11 @@
-import { faBan, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { faBan, faMinus, faThumbsUp } from "@fortawesome/free-solid-svg-icons";
import React, { useState } from "react";
import { Button, ButtonGroup, Dropdown, DropdownButton } from "react-bootstrap";
import { useIntl } from "react-intl";
import { Icon } from "src/components/Shared/Icon";
import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
import { SweatDrops } from "src/components/Shared/SweatDrops";
+import { useConfigurationContext } from "src/hooks/Config";
export interface IOCounterButtonProps {
value: number;
@@ -17,6 +18,12 @@ export const OCounterButton: React.FC = (
props: IOCounterButtonProps
) => {
const intl = useIntl();
+ const { configuration } = useConfigurationContext();
+ const { sfwContentMode } = configuration.interface;
+
+ const icon = !sfwContentMode ? : ;
+ const messageID = !sfwContentMode ? "o_count" : "o_count_sfw";
+
const [loading, setLoading] = useState(false);
async function increment() {
@@ -44,9 +51,9 @@ export const OCounterButton: React.FC = (
className="minimal pr-1"
onClick={increment}
variant="secondary"
- title={intl.formatMessage({ id: "o_counter" })}
+ title={intl.formatMessage({ id: messageID })}
>
-
+ {icon}
{props.value}
);
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
index c4088654a..aee6ab344 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -3,7 +3,6 @@ import React, {
useEffect,
useState,
useMemo,
- useContext,
useRef,
useLayoutEffect,
} from "react";
@@ -32,7 +31,7 @@ import SceneQueue, { QueuedScene } from "src/models/sceneQueue";
import { ListFilterModel } from "src/models/list-filter/filter";
import Mousetrap from "mousetrap";
import { OrganizedButton } from "./OrganizedButton";
-import { ConfigurationContext } from "src/hooks/Config";
+import { useConfigurationContext } from "src/hooks/Config";
import { getPlayerPosition } from "src/components/ScenePlayer/util";
import {
faEllipsisV,
@@ -51,6 +50,7 @@ import { lazyComponent } from "src/utils/lazyComponent";
import cx from "classnames";
import { TruncatedText } from "src/components/Shared/TruncatedText";
import { PatchComponent, PatchContainerComponent } from "src/patch";
+import { goBackOrReplace } from "src/utils/history";
const SubmitStashBoxDraft = lazyComponent(
() => import("src/components/Dialogs/SubmitDraft")
@@ -183,7 +183,7 @@ const ScenePage: React.FC = PatchComponent("ScenePage", (props) => {
const intl = useIntl();
const [updateScene] = useSceneUpdate();
const [generateScreenshot] = useSceneGenerateScreenshot();
- const { configuration } = useContext(ConfigurationContext);
+ const { configuration } = useConfigurationContext();
const [showDraftModal, setShowDraftModal] = useState(false);
const boxes = configuration?.general?.stashBoxes ?? [];
@@ -247,6 +247,12 @@ const ScenePage: React.FC = PatchComponent("ScenePage", (props) => {
Mousetrap.bind("p p", () => onQueuePrevious());
Mousetrap.bind("p r", () => onQueueRandom());
Mousetrap.bind(",", () => setCollapsed(!collapsed));
+ Mousetrap.bind("c c", () => {
+ onGenerateScreenshot(getPlayerPosition());
+ });
+ Mousetrap.bind("c d", () => {
+ onGenerateScreenshot();
+ });
return () => {
Mousetrap.unbind("a");
@@ -260,6 +266,8 @@ const ScenePage: React.FC = PatchComponent("ScenePage", (props) => {
Mousetrap.unbind("p p");
Mousetrap.unbind("p r");
Mousetrap.unbind(",");
+ Mousetrap.unbind("c c");
+ Mousetrap.unbind("c d");
};
});
@@ -680,7 +688,7 @@ const SceneLoader: React.FC> = ({
match,
}) => {
const { id } = match.params;
- const { configuration } = useContext(ConfigurationContext);
+ const { configuration } = useConfigurationContext();
const { data, loading, error } = useFindScene(id);
const [scene, setScene] = useState();
@@ -909,7 +917,7 @@ const SceneLoader: React.FC> = ({
) {
loadScene(queueScenes[currentQueueIndex + 1].id);
} else {
- history.goBack();
+ goBackOrReplace(history, "/scenes");
}
}
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
index 69b378787..e56ea265b 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
@@ -19,7 +19,7 @@ import ImageUtils from "src/utils/image";
import { getStashIDs } from "src/utils/stashIds";
import { useFormik } from "formik";
import { Prompt } from "react-router-dom";
-import { ConfigurationContext } from "src/hooks/Config";
+import { useConfigurationContext } from "src/hooks/Config";
import { IGroupEntry, SceneGroupTable } from "./SceneGroupTable";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import { objectTitle } from "src/core/files";
@@ -103,7 +103,7 @@ export const SceneEditPanel: React.FC = ({
setStudio(scene.studio ?? null);
}, [scene.studio]);
- const { configuration: stashConfig } = React.useContext(ConfigurationContext);
+ const { configuration: stashConfig } = useConfigurationContext();
// Network state
const [isLoading, setIsLoading] = useState(false);
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneHistoryPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneHistoryPanel.tsx
index 1ac9dd5a2..2ba587a2b 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneHistoryPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneHistoryPanel.tsx
@@ -21,6 +21,7 @@ import {
useSceneResetActivity,
} from "src/core/StashService";
import * as GQL from "src/core/generated-graphql";
+import { useConfigurationContext } from "src/hooks/Config";
import { useToast } from "src/hooks/Toast";
import { TextField } from "src/utils/field";
import TextUtils from "src/utils/text";
@@ -172,6 +173,9 @@ export const SceneHistoryPanel: React.FC = ({ scene }) => {
const intl = useIntl();
const Toast = useToast();
+ const { configuration } = useConfigurationContext();
+ const { sfwContentMode } = configuration.interface;
+
const [dialogs, setDialogs] = React.useState({
playHistory: false,
oHistory: false,
@@ -299,6 +303,9 @@ export const SceneHistoryPanel: React.FC = ({ scene }) => {
}
function maybeRenderDialogs() {
+ const clearHistoryMessageID = sfwContentMode
+ ? "dialogs.clear_o_history_confirm_sfw"
+ : "dialogs.clear_play_history_confirm";
return (
<>