feat(ui): added next airing date to TV Shows (#842)

src/components/TvDetails/index.tsx

@@ -42,6 +42,7 @@ import useSettings from '../../hooks/useSettings';
 
 const messages = defineMessages({
   firstAirDate: 'First Air Date',
+  nextAirDate: 'Next Air Date',
   userrating: 'User Rating',
   status: 'Status',
   originallanguage: 'Original Language',
@@ -661,6 +662,21 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 </span>
               </div>
             )}
+            {data.nextEpisodeToAir && (
+              <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
+                <span className="text-sm">
+                  <FormattedMessage {...messages.nextAirDate} />
+                </span>
+                <span className="flex-1 text-sm text-right text-gray-400">
+                  <FormattedDate
+                    value={new Date(data.nextEpisodeToAir?.airDate)}
+                    year="numeric"
+                    month="long"
+                    day="numeric"
+                  />
+                </span>
+              </div>
+            )}
             <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
               <span className="text-sm">
                 <FormattedMessage {...messages.status} />

src/i18n/locale/en.json

@@ -551,6 +551,7 @@
   "components.TvDetails.mark4kavailable": "Mark 4K as Available",
   "components.TvDetails.markavailable": "Mark as Available",
   "components.TvDetails.network": "Network",
+  "components.TvDetails.nextAirDate": "Next Air Date",
   "components.TvDetails.opensonarr": "Open Series in Sonarr",
   "components.TvDetails.opensonarr4k": "Open Series in 4K Sonarr",
   "components.TvDetails.originallanguage": "Original Language",