added background image option plus more improvements

stashapp · Jul 28, 2023 · 6070085 · 6070085
1 parent ea32381
commit 6070085
Show file tree

Hide file tree

Showing 12 changed files with 284 additions and 104 deletions.
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
@@ -26,6 +26,9 @@ import { faLink, faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 import TextUtils from "src/utils/text";
 import { Icon } from "src/components/Shared/Icon";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
+import { ConfigurationContext } from "src/hooks/Config";
+import { IUIConfig } from "src/core/config";
+import ImageUtils from "src/utils/image";
 
 interface IProps {
   movie: GQL.MovieDataFragment;
@@ -36,6 +39,11 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
   const history = useHistory();
   const Toast = useToast();
 
+  // Configuration settings
+  const { configuration } = React.useContext(ConfigurationContext);
+  const uiConfig = configuration?.ui as IUIConfig | undefined;
+  const enableBackgroundImage = uiConfig?.enableBackgroundImage ?? false;
+
   // Editing state
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState<boolean>(false);
@@ -180,7 +188,11 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
     if (image && defaultImage) {
       return (
         <div className="movie-image-container">
-          <img alt="Front Cover" src={image} />
+          <img
+            alt="Front Cover"
+            src={image}
+            onLoad={ImageUtils.verifyImageSize}
+          />
         </div>
       );
     } else if (image) {
@@ -190,7 +202,11 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
           variant="link"
           onClick={() => showLightbox()}
         >
-          <img alt="Front Cover" src={image} />
+          <img
+            alt="Front Cover"
+            src={image}
+            onLoad={ImageUtils.verifyImageSize}
+          />
         </Button>
       );
     }
@@ -213,7 +229,11 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
           variant="link"
           onClick={() => showLightbox(index - 1)}
         >
-          <img alt="Back Cover" src={image} />
+          <img
+            alt="Back Cover"
+            src={image}
+            onLoad={ImageUtils.verifyImageSize}
+          />
         </Button>
       );
     }
@@ -302,6 +322,23 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
     }
   }
 
+  function maybeRenderHeaderBackgroundImage() {
+    if (enableBackgroundImage && !isEditing && frontImage) {
+      return (
+        <div className="background-image-container">
+          <picture>
+            <source src={frontImage} />
+            <img
+              className="background-image"
+              src={frontImage}
+              alt={`${movie.name} background`}
+            />
+          </picture>
+        </div>
+      );
+    }
+  }
+
   function maybeRenderTab() {
     if (!isEditing) {
       return renderTabs();
@@ -317,31 +354,34 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
       </Helmet>
 
       <div className={`detail-header ${isEditing ? "edit" : ""}`}>
-        <div className="detail-header-image">
-          <div className="logo w-100">
-            {encodingImage ? (
-              <LoadingIndicator message="Encoding image..." />
-            ) : (
-              <div className="movie-images">
-                {renderFrontImage()}
-                {renderBackImage()}
-              </div>
-            )}
+        {maybeRenderHeaderBackgroundImage()}
+        <div className="detail-container">
+          <div className="detail-header-image">
+            <div className="logo w-100">
+              {encodingImage ? (
+                <LoadingIndicator message="Encoding image..." />
+              ) : (
+                <div className="movie-images">
+                  {renderFrontImage()}
+                  {renderBackImage()}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-        <div className="row">
-          <div className="movie-head col">
-            <h2>
-              <span className="movie-name">{movie.name}</span>
-              {renderClickableIcons()}
-            </h2>
-            {maybeRenderAliases()}
-            <RatingSystem
-              value={movie.rating100 ?? undefined}
-              onSetRating={(value) => setRating(value ?? null)}
-            />
-            {maybeRenderDetails()}
-            {maybeRenderEditPanel()}
+          <div className="row">
+            <div className="movie-head col">
+              <h2>
+                <span className="movie-name">{movie.name}</span>
+                {renderClickableIcons()}
+              </h2>
+              {maybeRenderAliases()}
+              <RatingSystem
+                value={movie.rating100 ?? undefined}
+                onSetRating={(value) => setRating(value ?? null)}
+              />
+              {maybeRenderDetails()}
+              {maybeRenderEditPanel()}
+            </div>
           </div>
         </div>
       </div>

diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
@@ -42,6 +42,7 @@ import {
 import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { IUIConfig } from "src/core/config";
 import { useRatingKeybinds } from "src/hooks/keybinds";
+import ImageUtils from "src/utils/image";
 
 interface IProps {
   performer: GQL.PerformerDataFragment;
@@ -60,6 +61,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
   const { configuration } = React.useContext(ConfigurationContext);
   const uiConfig = configuration?.ui as IUIConfig | undefined;
   const abbreviateCounter = uiConfig?.abbreviateCounters ?? false;
+  const enableBackgroundImage = uiConfig?.enableBackgroundImage ?? false;
   const showAllDetails = uiConfig?.showAllDetails ?? false;
 
   const [collapsed, setCollapsed] = useState<boolean>(!showAllDetails);
@@ -186,7 +188,12 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
     if (activeImage) {
       return (
         <Button variant="link" onClick={() => showLightbox()}>
-          <img className="performer" src={activeImage} alt={performer.name} />
+          <img
+            className="performer"
+            src={activeImage}
+            alt={performer.name}
+            onLoad={ImageUtils.verifyImageSize}
+          />
         </Button>
       );
     }
@@ -293,6 +300,23 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
     </React.Fragment>
   );
 
+  function maybeRenderHeaderBackgroundImage() {
+    if (enableBackgroundImage && !isEditing && activeImage) {
+      return (
+        <div className="background-image-container">
+          <picture>
+            <source src={activeImage} />
+            <img
+              className="background-image"
+              src={activeImage}
+              alt={`${performer.name} background`}
+            />
+          </picture>
+        </div>
+      );
+    }
+  }
+
   function maybeRenderEditPanel() {
     if (isEditing) {
       return (
@@ -502,32 +526,35 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
           collapsed ? "collapsed" : ""
         }`}
       >
-        <div className="detail-header-image">
-          {encodingImage ? (
-            <LoadingIndicator message="Encoding image..." />
-          ) : (
-            renderImage()
-          )}
-        </div>
-        <div className="row">
-          <div className="performer-head col">
-            <h2>
-              <span className="performer-name">{performer.name}</span>
-              {performer.disambiguation && (
-                <span className="performer-disambiguation">
-                  {` (${performer.disambiguation})`}
-                </span>
-              )}
-              {maybeRenderShowCollapseButton()}
-              {renderClickableIcons()}
-            </h2>
-            {maybeRenderAliases()}
-            <RatingSystem
-              value={performer.rating100 ?? undefined}
-              onSetRating={(value) => setRating(value ?? null)}
-            />
-            {maybeRenderDetails()}
-            {maybeRenderEditPanel()}
+        {maybeRenderHeaderBackgroundImage()}
+        <div className="detail-container">
+          <div className="detail-header-image">
+            {encodingImage ? (
+              <LoadingIndicator message="Encoding image..." />
+            ) : (
+              renderImage()
+            )}
+          </div>
+          <div className="row">
+            <div className="performer-head col">
+              <h2>
+                <span className="performer-name">{performer.name}</span>
+                {performer.disambiguation && (
+                  <span className="performer-disambiguation">
+                    {` (${performer.disambiguation})`}
+                  </span>
+                )}
+                {maybeRenderShowCollapseButton()}
+                {renderClickableIcons()}
+              </h2>
+              {maybeRenderAliases()}
+              <RatingSystem
+                value={performer.rating100 ?? undefined}
+                onSetRating={(value) => setRating(value ?? null)}
+              />
+              {maybeRenderDetails()}
+              {maybeRenderEditPanel()}
+            </div>
           </div>
         </div>
       </div>

diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
@@ -22,11 +22,17 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
 
   function renderTagsField() {
     return (
-      <ul className="pl-0">
-        {(performer.tags ?? []).map((tag) => (
-          <TagLink key={tag.id} tagType="performer" tag={tag} />
-        ))}
-      </ul>
+      <>
+        {performer.tags ? (
+          <ul className="pl-0">
+            {(performer.tags ?? []).map((tag) => (
+              <TagLink key={tag.id} tagType="performer" tag={tag} />
+            ))}
+          </ul>
+        ) : (
+          ""
+        )}
+      </>
     );
   }
 

diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
@@ -19,8 +19,6 @@
     vertical-align: top;
 
     .name-icons {
-      margin-left: 10px;
-
       .not-favorite {
         color: rgba(191, 204, 214, 0.5);
       }

diff --git a/ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx b/ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx
@@ -556,6 +556,13 @@ export const SettingsInterfacePanel: React.FC = () => {
           value={ui.maxOptionsShown ?? defaultMaxOptionsShown}
           onChange={(v) => saveUI({ maxOptionsShown: v })}
         />
+        <BooleanSetting
+          id="enable_background_image"
+          headingID="config.ui.editing.enable_background_image.heading"
+          subHeadingID="config.ui.editing.enable_background_image.description"
+          checked={ui.enableBackgroundImage ?? undefined}
+          onChange={(v) => saveUI({ enableBackgroundImage: v })}
+        />
         <BooleanSetting
           id="show_all_details"
           headingID="config.ui.editing.show_all_details.heading"