Fix date rendering for missing date values (#580)

* Fix date rendering when missing date value
* Move scene studio overlay within scene card

ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx

@@ -242,9 +242,7 @@ export const Movie: React.FC = () => {
             })}
             {TableUtils.renderInputGroup({
               title: `Date ${isEditing ? "(YYYY-MM-DD)" : ""}`,
-              value: isEditing
-                ? date
-                : intl.formatDate(date, { format: "long" }),
+              value: isEditing ? date : TextUtils.formatDate(intl, date),
               isEditing,
               onChange: setDate,
             })}

ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx

@@ -490,7 +490,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
             title: "Birthdate",
             value: isEditing
               ? birthdate
-              : intl.formatDate(birthdate, { format: "long" }),
+              : TextUtils.formatDate(intl, birthdate),
             isEditing: !!isEditing,
             onChange: setBirthdate,
           })}

ui/v2.5/src/components/Scenes/SceneCard.tsx

@@ -252,9 +252,10 @@ export const SceneCard: React.FC<ISceneCardProps> = (
           event.stopPropagation();
         }}
       />
-      {maybeRenderSceneStudioOverlay()}
+
       <Link to={`/scenes/${props.scene.id}`} className="scene-card-link">
         {maybeRenderRatingBanner()}
+        {maybeRenderSceneStudioOverlay()}
         {maybeRenderSceneSpecsOverlay()}
         <video
           loop

ui/v2.5/src/components/Scenes/SceneDetails/SceneDetailPanel.tsx

@@ -39,9 +39,11 @@ export const SceneDetailPanel: React.FC<ISceneDetailProps> = (props) => {
         {props.scene.title ?? TextUtils.fileNameFromPath(props.scene.path)}
       </h3>
       <div className="col-6 scene-details">
-        <h4>
-          <FormattedDate value={props.scene.date ?? ""} format="long" />
-        </h4>
+        {props.scene.date ? (
+          <h4>
+            <FormattedDate value={props.scene.date} format="long" />
+          </h4>
+        ) : undefined}
         {props.scene.rating ? <h6>Rating: {props.scene.rating}</h6> : ""}
         {props.scene.file.height && (
           <h6>Resolution: {TextUtils.resolution(props.scene.file.height)}</h6>

ui/v2.5/src/utils/text.ts

@@ -1,3 +1,5 @@
+import { IntlShape } from "react-intl";
+
 // Typescript currently does not implement the intl Unit interface
 type Unit =
   | "byte"
@@ -128,6 +130,14 @@ const sanitiseURL = (url?: string, siteURL?: URL) => {
   return `https://${url}`;
 };
 
+const formatDate = (intl: IntlShape, date?: string) => {
+  if (!date) {
+    return "";
+  }
+
+  return intl.formatDate(date, { format: "long" });
+};
+
 const TextUtils = {
   truncate,
   fileSize,
@@ -139,6 +149,7 @@ const TextUtils = {
   sanitiseURL,
   twitterURL,
   instagramURL,
+  formatDate,
 };
 
 export default TextUtils;