Fixed: When adding a scene, the cover does not show

Fixes Whisparr#202
plz12345 · Apr 7, 2024 · 0674e8f · 0674e8f
1 parent 66a14e5
commit 0674e8f
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 22 deletions.
diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovie/AddNewMovieModalContent.css b/frontend/src/AddMovie/AddNewMovie/AddNewMovie/AddNewMovieModalContent.css
@@ -11,6 +11,14 @@
   flex: 0 0 170px;
   margin-right: 20px;
   height: 250px;
+  object-fit: cover;
+}
+
+.screenShot {
+  flex: 0 0 300px;
+  margin-right: 20px;
+  height: 169px;
+  object-fit: cover;
 }
 
 .info {

diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovie/AddNewMovieModalContent.css.d.ts b/frontend/src/AddMovie/AddNewMovie/AddNewMovie/AddNewMovieModalContent.css.d.ts
@@ -8,6 +8,7 @@ interface CssExports {
   'modalFooter': string;
   'overview': string;
   'poster': string;
+  'screenShot': string;
   'searchForMissingMovieContainer': string;
   'searchForMissingMovieInput': string;
   'searchForMissingMovieLabel': string;

diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovie/AddNewMovieModalContent.js b/frontend/src/AddMovie/AddNewMovie/AddNewMovie/AddNewMovieModalContent.js
@@ -12,6 +12,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
 import MoviePoster from 'Movie/MoviePoster';
+import ScenePoster from 'Scene/ScenePoster';
 import translate from 'Utilities/String/translate';
 import styles from './AddNewMovieModalContent.css';
 
@@ -51,6 +52,8 @@ class AddNewMovieModalContent extends Component {
       onInputChange
     } = this.props;
 
+    const ImageComponent = images[0].coverType === 'poster' ? MoviePoster : ScenePoster;
+
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
@@ -66,14 +69,13 @@ class AddNewMovieModalContent extends Component {
           <div className={styles.container}>
             {
               !isSmallScreen &&
-                <div className={styles.poster}>
-                  <MoviePoster
-                    blur={safeForWorkMode}
-                    className={styles.poster}
-                    images={images}
-                    size={250}
-                  />
-                </div>
+                <ImageComponent
+                  blur={safeForWorkMode}
+                  className={images[0].coverType === 'poster' ? styles.poster : styles.screenShot}
+                  images={images}
+                  size={250}
+                  lazy={false}
+                />
             }
 
             <div className={styles.info}>

diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewPerformer/AddNewPerformerModalContent.css b/frontend/src/AddMovie/AddNewMovie/AddNewPerformer/AddNewPerformerModalContent.css
@@ -10,7 +10,9 @@
 .poster {
   flex: 0 0 170px;
   margin-right: 20px;
+  width: 170px;
   height: 250px;
+  object-fit: cover;
 }
 
 .info {

diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewPerformer/AddNewPerformerModalContent.js b/frontend/src/AddMovie/AddNewMovie/AddNewPerformer/AddNewPerformerModalContent.js
@@ -11,7 +11,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
-import MoviePoster from 'Movie/MoviePoster';
+import MovieHeadshot from 'Movie/MovieHeadshot';
 import translate from 'Utilities/String/translate';
 import styles from './AddNewPerformerModalContent.css';
 
@@ -59,11 +59,12 @@ class AddNewPerformerModalContent extends Component {
             {
               !isSmallScreen &&
                 <div className={styles.poster}>
-                  <MoviePoster
+                  <MovieHeadshot
                     blur={safeForWorkMode}
                     className={styles.poster}
                     images={images}
                     size={250}
+                    overflow={true}
                   />
                 </div>
             }

diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewPerformer/AddNewPerformerSearchResult.css b/frontend/src/AddMovie/AddNewMovie/AddNewPerformer/AddNewPerformerSearchResult.css
@@ -29,10 +29,11 @@
 }
 
 .poster {
-  position: relative;
-  display: block;
+  flex: 0 0 170px;
   margin-right: 20px;
+  width: 170px;
   height: 250px;
+  object-fit: cover;
 }
 
 .content {

diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewPerformer/AddNewPerformerSearchResult.js b/frontend/src/AddMovie/AddNewMovie/AddNewPerformer/AddNewPerformerSearchResult.js
@@ -67,14 +67,6 @@ class AddNewPerformerSearchResult extends Component {
 
     const linkProps = isExistingPerformer ? { to: `/performer/${foreignId}` } : { onPress: this.onPress };
 
-    const posterWidth = 167;
-    const posterHeight = 250;
-
-    const elementStyle = {
-      width: `${posterWidth}px`,
-      height: `${posterHeight}px`
-    };
-
     return (
       <div className={styles.searchResult}>
         <Link
@@ -91,11 +83,9 @@ class AddNewPerformerSearchResult extends Component {
                   <MovieHeadshot
                     blur={safeForWorkMode}
                     className={styles.poster}
-                    style={elementStyle}
                     images={images}
                     size={250}
                     overflow={true}
-                    lazy={false}
                   />
                 </div>
               </div>