Rename Movie to Group in UI (stashapp#4963)

* Replace movies with groups in the UI * Massage menu items * Change view names * Rename Movie components to Group * Refactor movie to group variable names * Rename movie class names to group
randemgame · Jun 26, 2024 · af6841b · af6841b
1 parent d986a9e
commit af6841b
Show file tree

Hide file tree

Showing 63 changed files with 643 additions and 612 deletions.
diff --git a/ui/v2.5/src/App.tsx b/ui/v2.5/src/App.tsx
@@ -66,7 +66,7 @@ const Galleries = lazyComponent(
   () => import("./components/Galleries/Galleries")
 );
 
-const Movies = lazyComponent(() => import("./components/Movies/Movies"));
+const Groups = lazyComponent(() => import("./components/Movies/Movies"));
 const Tags = lazyComponent(() => import("./components/Tags/Tags"));
 const Images = lazyComponent(() => import("./components/Images/Images"));
 const Setup = lazyComponent(() => import("./components/Setup/Setup"));
@@ -312,7 +312,7 @@ export const App: React.FC = () => {
             <Route path="/performers" component={Performers} />
             <Route path="/tags" component={Tags} />
             <Route path="/studios" component={Studios} />
-            <Route path="/movies" component={Movies} />
+            <Route path="/groups" component={Groups} />
             <Route path="/stats" component={Stats} />
             <Route path="/settings" component={Settings} />
             <Route

diff --git a/ui/v2.5/src/components/FrontPage/Control.tsx b/ui/v2.5/src/components/FrontPage/Control.tsx
@@ -7,7 +7,7 @@ import { ConfigurationContext } from "src/hooks/Config";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { GalleryRecommendationRow } from "../Galleries/GalleryRecommendationRow";
 import { ImageRecommendationRow } from "../Images/ImageRecommendationRow";
-import { MovieRecommendationRow } from "../Movies/MovieRecommendationRow";
+import { GroupRecommendationRow } from "../Movies/MovieRecommendationRow";
 import { PerformerRecommendationRow } from "../Performers/PerformerRecommendationRow";
 import { SceneRecommendationRow } from "../Scenes/SceneRecommendationRow";
 import { StudioRecommendationRow } from "../Studios/StudioRecommendationRow";
@@ -45,7 +45,7 @@ const RecommendationRow: React.FC<IFilter> = ({ mode, filter, header }) => {
       );
     case GQL.FilterMode.Movies:
       return (
-        <MovieRecommendationRow
+        <GroupRecommendationRow
           isTouch={isTouch}
           filter={filter}
           header={header}

diff --git a/ui/v2.5/src/components/FrontPage/FrontPageConfig.tsx b/ui/v2.5/src/components/FrontPage/FrontPageConfig.tsx
@@ -22,7 +22,7 @@ interface IAddSavedFilterModalProps {
 const FilterModeToMessageID = {
   [GQL.FilterMode.Galleries]: "galleries",
   [GQL.FilterMode.Images]: "images",
-  [GQL.FilterMode.Movies]: "movies",
+  [GQL.FilterMode.Movies]: "groups",
   [GQL.FilterMode.Performers]: "performers",
   [GQL.FilterMode.SceneMarkers]: "markers",
   [GQL.FilterMode.Scenes]: "scenes",

diff --git a/ui/v2.5/src/components/FrontPage/styles.scss b/ui/v2.5/src/components/FrontPage/styles.scss
@@ -111,7 +111,7 @@
   }
 }
 
-.movie-skeleton {
+.group-skeleton {
   max-width: 240px;
   min-height: 540px;
   min-width: 240px;
@@ -313,7 +313,7 @@
     width: 20rem;
   }
 
-  .slick-list .movie-card.card {
+  .slick-list .group-card.card {
     width: 16rem;
   }
 

diff --git a/ui/v2.5/src/components/List/EditFilterDialog.tsx b/ui/v2.5/src/components/List/EditFilterDialog.tsx
@@ -193,7 +193,7 @@ const CriterionOptionList: React.FC<ICriterionList> = ({
 const FilterModeToConfigKey = {
   [FilterMode.Galleries]: "galleries",
   [FilterMode.Images]: "images",
-  [FilterMode.Movies]: "movies",
+  [FilterMode.Movies]: "groups",
   [FilterMode.Performers]: "performers",
   [FilterMode.SceneMarkers]: "sceneMarkers",
   [FilterMode.Scenes]: "scenes",

diff --git a/ui/v2.5/src/components/List/Filters/LabeledIdFilter.tsx b/ui/v2.5/src/components/List/Filters/LabeledIdFilter.tsx
@@ -24,7 +24,7 @@ export const LabeledIdFilter: React.FC<ILabeledIdFilterProps> = ({
     inputType !== "performer_tags" &&
     inputType !== "tags" &&
     inputType !== "scenes" &&
-    inputType !== "movies" &&
+    inputType !== "groups" &&
     inputType !== "galleries"
   ) {
     return null;

diff --git a/ui/v2.5/src/components/List/views.ts b/ui/v2.5/src/components/List/views.ts
@@ -2,7 +2,7 @@ export enum View {
   Galleries = "galleries",
   Images = "images",
   Scenes = "scenes",
-  Movies = "movies",
+  Groups = "groups",
   Performers = "performers",
   Tags = "tags",
   SceneMarkers = "scene_markers",
@@ -17,7 +17,7 @@ export enum View {
   PerformerScenes = "performer_scenes",
   PerformerGalleries = "performer_galleries",
   PerformerImages = "performer_images",
-  PerformerMovies = "performer_movies",
+  PerformerGroups = "performer_groups",
   PerformerAppearsWith = "performer_appears_with",
 
   StudioGalleries = "studio_galleries",
@@ -26,9 +26,9 @@ export enum View {
   GalleryImages = "gallery_images",
 
   StudioScenes = "studio_scenes",
-  StudioMovies = "studio_movies",
+  StudioGroups = "studio_groups",
   StudioPerformers = "studio_performers",
   StudioChildren = "studio_children",
 
-  MovieScenes = "movie_scenes",
+  GroupScenes = "group_scenes",
 }
diff --git a/ui/v2.5/src/components/MainNavbar.tsx b/ui/v2.5/src/components/MainNavbar.tsx
@@ -1,4 +1,10 @@
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+} from "react";
 import {
   defineMessages,
   FormattedMessage,
@@ -52,9 +58,9 @@ const messages = defineMessages({
     id: "images",
     defaultMessage: "Images",
   },
-  movies: {
-    id: "movies",
-    defaultMessage: "Movies",
+  groups: {
+    id: "groups",
+    defaultMessage: "Groups",
   },
   markers: {
     id: "markers",
@@ -107,9 +113,9 @@ const allMenuItems: IMenuItem[] = [
     hotkey: "g i",
   },
   {
-    name: "movies",
-    message: messages.movies,
-    href: "/movies",
+    name: "groups",
+    message: messages.groups,
+    href: "/groups",
     icon: faFilm,
     hotkey: "g v",
     userCreatable: true,
@@ -179,20 +185,26 @@ export const MainNavbar: React.FC = () => {
   const { configuration, loading } = React.useContext(ConfigurationContext);
   const { openManual } = React.useContext(ManualStateContext);
 
-  // Show all menu items by default, unless config says otherwise
-  const [menuItems, setMenuItems] = useState<IMenuItem[]>(allMenuItems);
-
   const [expanded, setExpanded] = useState(false);
 
-  useEffect(() => {
-    const iCfg = configuration?.interface;
-    if (iCfg?.menuItems) {
-      setMenuItems(
-        allMenuItems.filter((menuItem) =>
-          iCfg.menuItems!.includes(menuItem.name)
-        )
-      );
+  // Show all menu items by default, unless config says otherwise
+  const menuItems = useMemo(() => {
+    let cfgMenuItems = configuration?.interface.menuItems;
+    if (!cfgMenuItems) {
+      return allMenuItems;
     }
+
+    // translate old movies menu item to groups
+    cfgMenuItems = cfgMenuItems.map((item) => {
+      if (item === "movies") {
+        return "groups";
+      }
+      return item;
+    });
+
+    return allMenuItems.filter((menuItem) =>
+      cfgMenuItems!.includes(menuItem.name)
+    );
   }, [configuration]);
 
   // react-bootstrap typing bug

diff --git a/ui/v2.5/src/components/Movies/EditMoviesDialog.tsx b/ui/v2.5/src/components/Movies/EditMoviesDialog.tsx
@@ -24,7 +24,7 @@ interface IListOperationProps {
   onClose: (applied: boolean) => void;
 }
 
-export const EditMoviesDialog: React.FC<IListOperationProps> = (
+export const EditGroupsDialog: React.FC<IListOperationProps> = (
   props: IListOperationProps
 ) => {
   const intl = useIntl();
@@ -69,7 +69,7 @@ export const EditMoviesDialog: React.FC<IListOperationProps> = (
         intl.formatMessage(
           { id: "toast.updated_entity" },
           {
-            entity: intl.formatMessage({ id: "movies" }).toLocaleLowerCase(),
+            entity: intl.formatMessage({ id: "groups" }).toLocaleLowerCase(),
           }
         )
       );
@@ -126,7 +126,7 @@ export const EditMoviesDialog: React.FC<IListOperationProps> = (
         icon={faPencilAlt}
         header={intl.formatMessage(
           { id: "actions.edit_entity" },
-          { entityType: intl.formatMessage({ id: "movies" }) }
+          { entityType: intl.formatMessage({ id: "groups" }) }
         )}
         accept={{
           onClick: onSave,

diff --git a/ui/v2.5/src/components/Movies/MovieCard.tsx b/ui/v2.5/src/components/Movies/MovieCard.tsx
@@ -12,16 +12,16 @@ import { faPlayCircle, faTag } from "@fortawesome/free-solid-svg-icons";
 import ScreenUtils from "src/utils/screen";
 
 interface IProps {
-  movie: GQL.MovieDataFragment;
+  group: GQL.MovieDataFragment;
   containerWidth?: number;
   sceneIndex?: number;
   selecting?: boolean;
   selected?: boolean;
   onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
 }
 
-export const MovieCard: React.FC<IProps> = ({
-  movie,
+export const GroupCard: React.FC<IProps> = ({
+  group,
   sceneIndex,
   containerWidth,
   selecting,
@@ -47,17 +47,17 @@ export const MovieCard: React.FC<IProps> = ({
     return (
       <>
         <hr />
-        <span className="movie-scene-number">
+        <span className="group-scene-number">
           <FormattedMessage id="scene" /> #{sceneIndex}
         </span>
       </>
     );
   }
 
   function maybeRenderScenesPopoverButton() {
-    if (movie.scenes.length === 0) return;
+    if (group.scenes.length === 0) return;
 
-    const popoverContent = movie.scenes.map((scene) => (
+    const popoverContent = group.scenes.map((scene) => (
       <SceneLink key={scene.id} scene={scene} />
     ));
 
@@ -69,31 +69,31 @@ export const MovieCard: React.FC<IProps> = ({
       >
         <Button className="minimal">
           <Icon icon={faPlayCircle} />
-          <span>{movie.scenes.length}</span>
+          <span>{group.scenes.length}</span>
         </Button>
       </HoverPopover>
     );
   }
 
   function maybeRenderTagPopoverButton() {
-    if (movie.tags.length <= 0) return;
+    if (group.tags.length <= 0) return;
 
-    const popoverContent = movie.tags.map((tag) => (
-      <TagLink key={tag.id} linkType="movie" tag={tag} />
+    const popoverContent = group.tags.map((tag) => (
+      <TagLink key={tag.id} linkType="group" tag={tag} />
     ));
 
     return (
       <HoverPopover placement="bottom" content={popoverContent}>
         <Button className="minimal tag-count">
           <Icon icon={faTag} />
-          <span>{movie.tags.length}</span>
+          <span>{group.tags.length}</span>
         </Button>
       </HoverPopover>
     );
   }
 
   function maybeRenderPopoverButtonGroup() {
-    if (sceneIndex || movie.scenes.length > 0 || movie.tags.length > 0) {
+    if (sceneIndex || group.scenes.length > 0 || group.tags.length > 0) {
       return (
         <>
           {maybeRenderSceneNumber()}
@@ -109,28 +109,28 @@ export const MovieCard: React.FC<IProps> = ({
 
   return (
     <GridCard
-      className="movie-card"
-      url={`/movies/${movie.id}`}
+      className="group-card"
+      url={`/groups/${group.id}`}
       width={cardWidth}
-      title={movie.name}
-      linkClassName="movie-card-header"
+      title={group.name}
+      linkClassName="group-card-header"
       image={
         <>
           <img
             loading="lazy"
-            className="movie-card-image"
-            alt={movie.name ?? ""}
-            src={movie.front_image_path ?? ""}
+            className="group-card-image"
+            alt={group.name ?? ""}
+            src={group.front_image_path ?? ""}
           />
-          <RatingBanner rating={movie.rating100} />
+          <RatingBanner rating={group.rating100} />
         </>
       }
       details={
-        <div className="movie-card__details">
-          <span className="movie-card__date">{movie.date}</span>
+        <div className="group-card__details">
+          <span className="group-card__date">{group.date}</span>
           <TruncatedText
-            className="movie-card__description"
-            text={movie.synopsis}
+            className="group-card__description"
+            text={group.synopsis}
             lineCount={3}
           />
         </div>

diff --git a/ui/v2.5/src/components/Movies/MovieCardGrid.tsx b/ui/v2.5/src/components/Movies/MovieCardGrid.tsx
@@ -1,27 +1,27 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { MovieCard } from "./MovieCard";
+import { GroupCard } from "./MovieCard";
 import { useContainerDimensions } from "../Shared/GridCard/GridCard";
 
-interface IMovieCardGrid {
-  movies: GQL.MovieDataFragment[];
+interface IGroupCardGrid {
+  groups: GQL.MovieDataFragment[];
   selectedIds: Set<string>;
   onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
 }
 
-export const MovieCardGrid: React.FC<IMovieCardGrid> = ({
-  movies,
+export const GroupCardGrid: React.FC<IGroupCardGrid> = ({
+  groups,
   selectedIds,
   onSelectChange,
 }) => {
   const [componentRef, { width }] = useContainerDimensions();
   return (
     <div className="row justify-content-center" ref={componentRef}>
-      {movies.map((p) => (
-        <MovieCard
+      {groups.map((p) => (
+        <GroupCard
           key={p.id}
           containerWidth={width}
-          movie={p}
+          group={p}
           selecting={selectedIds.size > 0}
           selected={selectedIds.has(p.id)}
           onSelectedChanged={(selected: boolean, shiftKey: boolean) =>