Merge pull request #2786 from MrTimscampi/person-improvements

Improve people pages and metadata editor

src/components/metadataEditor/metadataEditor.js

@@ -520,7 +520,7 @@ import template from './metadataEditor.template.html';
             hideElement('#fldPath', context);
         }
 
-        if (item.Type === 'Series' || item.Type === 'Movie' || item.Type === 'Trailer') {
+        if (item.Type === 'Series' || item.Type === 'Movie' || item.Type === 'Trailer' || item.Type === 'Person') {
             showElement('#fldOriginalName', context);
         } else {
             hideElement('#fldOriginalName', context);
@@ -637,7 +637,9 @@ import template from './metadataEditor.template.html';
         }
 
         if (item.Type === 'Person') {
-            //todo
+            context.querySelector('#txtName').label(globalize.translate('LabelName'));
+            context.querySelector('#txtSortName').label(globalize.translate('LabelSortName'));
+            context.querySelector('#txtOriginalName').label(globalize.translate('LabelOriginalName'));
             context.querySelector('#txtProductionYear').label(globalize.translate('LabelBirthYear'));
             context.querySelector('#txtPremiereDate').label(globalize.translate('LabelBirthDate'));
             context.querySelector('#txtEndDate').label(globalize.translate('LabelDeathDate'));

src/components/metadataEditor/metadataEditor.template.html

@@ -252,7 +252,7 @@
             <br />
             <div class="formDialogFooter">
                 <button is="emby-button" type="button" class="raised button-cancel block btnCancel formDialogFooterItem">
-                    <span>${Cancel}</span>
+                    <span>${ButtonCancel}</span>
                 </button>
                 <button is="emby-button" type="submit" class="raised button-submit block btnSave formDialogFooterItem">
                     <span>${SaveChanges}</span>

src/controllers/itemDetails/index.js

@@ -1,3 +1,4 @@
+import { intervalToDuration } from 'date-fns';
 import { appHost } from '../../components/apphost';
 import loading from '../../components/loading/loading';
 import { appRouter } from '../../components/appRouter';
@@ -668,10 +669,16 @@ function reloadFromItem(instance, page, params, item, user) {
 
     if (item.Type == 'Person' && item.PremiereDate) {
         try {
-            const birthday = datetime.parseISO8601Date(item.PremiereDate, true).toDateString();
+            const birthday = datetime.parseISO8601Date(item.PremiereDate, true);
+            const durationSinceBorn = intervalToDuration({ start: birthday, end: Date.now() });
             itemBirthday.classList.remove('hide');
-            itemBirthday.innerHTML = globalize.translate('BirthDateValue', birthday);
+            if (item.EndDate) {
+                itemBirthday.innerHTML = globalize.translate('BirthDateValue', birthday.toLocaleDateString());
+            } else {
+                itemBirthday.innerHTML = `${globalize.translate('BirthDateValue', birthday.toLocaleDateString())} ${globalize.translate('AgeValue', durationSinceBorn.years)}`;
+            }
         } catch (err) {
+            console.error(err);
             itemBirthday.classList.add('hide');
         }
     } else {
@@ -682,10 +689,18 @@ function reloadFromItem(instance, page, params, item, user) {
 
     if (item.Type == 'Person' && item.EndDate) {
         try {
-            const deathday = datetime.parseISO8601Date(item.EndDate, true).toDateString();
+            const deathday = datetime.parseISO8601Date(item.EndDate, true);
             itemDeathDate.classList.remove('hide');
-            itemDeathDate.innerHTML = globalize.translate('DeathDateValue', deathday);
+            if (item.PremiereDate) {
+                const birthday = datetime.parseISO8601Date(item.PremiereDate, true);
+                const durationSinceBorn = intervalToDuration({ start: birthday, end: deathday });
+
+                itemDeathDate.innerHTML = `${globalize.translate('DeathDateValue', deathday.toLocaleDateString())} ${globalize.translate('AgeValue', durationSinceBorn.years)}`;
+            } else {
+                itemDeathDate.innerHTML = globalize.translate('DeathDateValue', deathday.toLocaleDateString());
+            }
         } catch (err) {
+            console.error(err);
             itemDeathDate.classList.add('hide');
         }
     } else {

src/strings/en-us.json

@@ -8,6 +8,7 @@
     "AddToCollection": "Add to collection",
     "AddToPlaylist": "Add to playlist",
     "AddToPlayQueue": "Add to play queue",
+    "AgeValue": "({0} years old)",
     "AirDate": "Air date",
     "Aired": "Aired",
     "Album": "Album",
@@ -756,6 +757,7 @@
     "LabelOptionalNetworkPath": "Shared network folder:",
     "LabelOptionalNetworkPathHelp": "If this folder is shared on your network, supplying the network share path can allow clients on other devices to access media files directly. For example, {0} or {1}.",
     "LabelOriginalAspectRatio": "Original aspect ratio:",
+    "LabelOriginalName": "Original name:",
     "LabelOriginalTitle": "Original title:",
     "LabelOverview": "Overview:",
     "LabelParentalRating": "Parental rating:",
@@ -839,6 +841,7 @@
     "LabelSonyAggregationFlags": "Sony aggregation flags:",
     "LabelSonyAggregationFlagsHelp": "Determines the content of the aggregationFlags element in the urn:schemas-sonycom:av namespace.",
     "LabelSortBy": "Sort by:",
+    "LabelSortName": "Sort name:",
     "LabelSortOrder": "Sort order:",
     "LabelSortTitle": "Sort title:",
     "LabelSource": "Source:",