Display long date tooltips for release dates

frontend/src/Movie/Details/MovieDetails.js

@@ -422,14 +422,15 @@ class MovieDetails extends Component {
                 <div className={styles.details}>
                   <div>
                     {
-                      !!certification &&
+                      certification ?
                         <span className={styles.certification}>
                           {certification}
-                        </span>
+                        </span> :
+                        null
                     }
 
                     {
-                      year > 0 &&
+                      year > 0 ?
                         <span className={styles.year}>
                           <Popover
                             anchor={
@@ -445,14 +446,16 @@ class MovieDetails extends Component {
                             }
                             position={tooltipPositions.BOTTOM}
                           />
-                        </span>
+                        </span> :
+                        null
                     }
 
                     {
-                      !!runtime &&
+                      runtime ?
                         <span className={styles.runtime}>
                           {formatRuntime(runtime, movieRuntimeFormat)}
-                        </span>
+                        </span> :
+                        null
                     }
 
                     {

frontend/src/Movie/Details/MovieReleaseDates.tsx

@@ -2,23 +2,25 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import Icon from 'Components/Icon';
 import { icons } from 'Helpers/Props';
+import Movie from 'Movie/Movie';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatDate from 'Utilities/Date/formatDate';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import translate from 'Utilities/String/translate';
 import styles from './MovieReleaseDates.css';
 
-interface MovieReleaseDatesProps {
-  inCinemas?: string;
-  digitalRelease?: string;
-  physicalRelease?: string;
-}
-
-function MovieReleaseDates(props: MovieReleaseDatesProps) {
-  const { inCinemas, digitalRelease, physicalRelease } = props;
+type MovieReleaseDatesProps = Pick<
+  Movie,
+  'inCinemas' | 'digitalRelease' | 'physicalRelease'
+>;
 
-  const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
-    createUISettingsSelector()
-  );
+function MovieReleaseDates({
+  inCinemas,
+  digitalRelease,
+  physicalRelease,
+}: MovieReleaseDatesProps) {
+  const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
+    useSelector(createUISettingsSelector());
 
   if (!inCinemas && !physicalRelease && !digitalRelease) {
     return (
@@ -34,10 +36,16 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
   return (
     <>
       {inCinemas ? (
-        <div title={translate('InCinemas')}>
+        <div
+          title={`${translate('InCinemas')}: ${formatDate(
+            inCinemas,
+            longDateFormat
+          )}`}
+        >
           <div className={styles.dateIcon}>
             <Icon name={icons.IN_CINEMAS} />
           </div>
+
           {getRelativeDate({
             date: inCinemas,
             shortDateFormat,
@@ -49,10 +57,16 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
       ) : null}
 
       {digitalRelease ? (
-        <div title={translate('DigitalRelease')}>
+        <div
+          title={`${translate('DigitalRelease')}: ${formatDate(
+            digitalRelease,
+            longDateFormat
+          )}`}
+        >
           <div className={styles.dateIcon}>
             <Icon name={icons.MOVIE_FILE} />
           </div>
+
           {getRelativeDate({
             date: digitalRelease,
             shortDateFormat,
@@ -64,10 +78,16 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
       ) : null}
 
       {physicalRelease ? (
-        <div title={translate('PhysicalRelease')}>
+        <div
+          title={`${translate('PhysicalRelease')}: ${formatDate(
+            physicalRelease,
+            longDateFormat
+          )}`}
+        >
           <div className={styles.dateIcon}>
             <Icon name={icons.DISC} />
           </div>
+
           {getRelativeDate({
             date: physicalRelease,
             shortDateFormat,

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -22,6 +22,7 @@ import { Statistics } from 'Movie/Movie';
 import MoviePoster from 'Movie/MoviePoster';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatDate from 'Utilities/Date/formatDate';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import translate from 'Utilities/String/translate';
 import createMovieIndexItemSelector from '../createMovieIndexItemSelector';
@@ -243,7 +244,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
       ) : null}
 
       {showCinemaRelease && inCinemas ? (
-        <div className={styles.title} title={translate('InCinemas')}>
+        <div
+          className={styles.title}
+          title={`${translate('InCinemas')}: ${formatDate(
+            inCinemas,
+            longDateFormat
+          )}`}
+        >
           <Icon name={icons.IN_CINEMAS} />{' '}
           {getRelativeDate({
             date: inCinemas,
@@ -256,7 +263,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
       ) : null}
 
       {showDigitalRelease && digitalRelease ? (
-        <div className={styles.title} title={translate('DigitalRelease')}>
+        <div
+          className={styles.title}
+          title={`${translate('DigitalRelease')}: ${formatDate(
+            digitalRelease,
+            longDateFormat
+          )}`}
+        >
           <Icon name={icons.MOVIE_FILE} />{' '}
           {getRelativeDate({
             date: digitalRelease,
@@ -269,7 +282,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
       ) : null}
 
       {showPhysicalRelease && physicalRelease ? (
-        <div className={styles.title} title={translate('PhysicalRelease')}>
+        <div
+          className={styles.title}
+          title={`${translate('PhysicalRelease')}: ${formatDate(
+            physicalRelease,
+            longDateFormat
+          )}`}
+        >
           <Icon name={icons.DISC} />{' '}
           {getRelativeDate({
             date: physicalRelease,
@@ -282,7 +301,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
       ) : null}
 
       {showReleaseDate && releaseDate ? (
-        <div className={styles.title} title={translate('ReleaseDate')}>
+        <div
+          className={styles.title}
+          title={`${translate('ReleaseDate')}: ${formatDate(
+            releaseDate,
+            longDateFormat
+          )}`}
+        >
           <Icon name={icons.CALENDAR} />{' '}
           {getRelativeDate({
             date: releaseDate,

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx

@@ -9,6 +9,7 @@ import { icons } from 'Helpers/Props';
 import Language from 'Language/Language';
 import { Ratings } from 'Movie/Movie';
 import QualityProfile from 'typings/QualityProfile';
+import formatDate from 'Utilities/Date/formatDate';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
@@ -139,7 +140,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     });
 
     return (
-      <div className={styles.info} title={translate('InCinemas')}>
+      <div
+        className={styles.info}
+        title={`${translate('InCinemas')}: ${formatDate(
+          inCinemas,
+          longDateFormat
+        )}`}
+      >
         <Icon name={icons.IN_CINEMAS} /> {inCinemasDate}
       </div>
     );
@@ -155,7 +162,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     });
 
     return (
-      <div className={styles.info} title={translate('DigitalRelease')}>
+      <div
+        className={styles.info}
+        title={`${translate('DigitalRelease')}: ${formatDate(
+          digitalRelease,
+          longDateFormat
+        )}`}
+      >
         <Icon name={icons.MOVIE_FILE} /> {digitalReleaseDate}
       </div>
     );
@@ -175,7 +188,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     });
 
     return (
-      <div className={styles.info} title={translate('PhysicalRelease')}>
+      <div
+        className={styles.info}
+        title={`${translate('PhysicalRelease')}: ${formatDate(
+          physicalRelease,
+          longDateFormat
+        )}`}
+      >
         <Icon name={icons.DISC} /> {physicalReleaseDate}
       </div>
     );
@@ -183,7 +202,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
 
   if (sortKey === 'releaseDate' && releaseDate && !showReleaseDate) {
     return (
-      <div className={styles.info} title={translate('ReleaseDate')}>
+      <div
+        className={styles.info}
+        title={`${translate('ReleaseDate')}: ${formatDate(
+          releaseDate,
+          longDateFormat
+        )}`}
+      >
         <Icon name={icons.CALENDAR} />{' '}
         {getRelativeDate({
           date: releaseDate,