diff --git a/package.json b/package.json
index b911778bc2..32ae3a2c01 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,8 @@
           "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
           "src/components/mediaLibraryCreator/mediaLibraryCreator.js",
           "src/components/mediaLibraryEditor/mediaLibraryEditor.js",
+          "src/components/metadataEditor/metadataEditor.js",
+          "src/components/metadataEditor/personEditor.js",
           "src/components/listview/listview.js",
           "src/components/playback/brightnessosd.js",
           "src/components/playback/mediasession.js",
diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index 584b25f0e4..68fbbb74c5 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -554,7 +554,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                 });
             } else {
                 require(['metadataEditor'], function (metadataEditor) {
-                    metadataEditor.show(item.Id, serverId).then(resolve, reject);
+                    metadataEditor.default.show(item.Id, serverId).then(resolve, reject);
                 });
             }
         });
diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js
index 61a4ba7f24..9977ae1ead 100644
--- a/src/components/metadataEditor/metadataEditor.js
+++ b/src/components/metadataEditor/metadataEditor.js
@@ -1,9 +1,30 @@
-define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loading', 'focusManager', 'connectionManager', 'globalize', 'require', 'shell', 'emby-checkbox', 'emby-input', 'emby-select', 'listViewStyle', 'emby-textarea', 'emby-button', 'paper-icon-button-light', 'css!./../formdialog', 'clearButtonStyle', 'flexStyles'], function (itemHelper, dom, layoutManager, dialogHelper, datetime, loading, focusManager, connectionManager, globalize, require, shell) {
-    'use strict';
+import itemHelper from 'itemHelper';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import dialogHelper from 'dialogHelper';
+import datetime from 'datetime';
+import loading from 'loading';
+import focusManager from 'focusManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import require from 'require';
+import shell from 'shell';
+import 'emby-checkbox';
+import 'emby-input';
+import 'emby-select';
+import 'listViewStyle';
+import 'emby-textarea';
+import 'emby-button';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'clearButtonStyle';
+import 'flexStyles';
 
-    var currentContext;
-    var metadataEditorInfo;
-    var currentItem;
+/* eslint-disable indent */
+
+    let currentContext;
+    let metadataEditorInfo;
+    let currentItem;
 
     function isDialog() {
         return currentContext.classList.contains('dialog');
@@ -28,11 +49,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             closeDialog(true);
         }
 
-        var apiClient = getApiClient();
+        const apiClient = getApiClient();
 
         apiClient.updateItem(item).then(function () {
 
-            var newContentType = form.querySelector('#selectContentType').value || '';
+            const newContentType = form.querySelector('#selectContentType').value || '';
 
             if ((metadataEditorInfo.ContentType || '') !== newContentType) {
 
@@ -56,7 +77,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function getSelectedAirDays(form) {
-        var checkedItems = form.querySelectorAll('.chkAirDay:checked') || [];
+        const checkedItems = form.querySelectorAll('.chkAirDay:checked') || [];
         return Array.prototype.map.call(checkedItems, function (c) {
             return c.getAttribute('data-day');
         });
@@ -92,7 +113,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function getDateValue(form, element, property) {
 
-        var val = form.querySelector(element).value;
+        let val = form.querySelector(element).value;
 
         if (!val) {
             return null;
@@ -100,14 +121,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         if (currentItem[property]) {
 
-            var date = datetime.parseISO8601Date(currentItem[property], true);
+            const date = datetime.parseISO8601Date(currentItem[property], true);
 
-            var parts = date.toISOString().split('T');
+            const parts = date.toISOString().split('T');
 
             // If the date is the same, preserve the time
             if (parts[0].indexOf(val) === 0) {
 
-                var iso = parts[1];
+                const iso = parts[1];
 
                 val += 'T' + iso;
             }
@@ -120,9 +141,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         loading.show();
 
-        var form = this;
+        const form = this;
 
-        var item = {
+        const item = {
             Id: currentItem.Id,
             Name: form.querySelector('#txtName').value,
             OriginalTitle: form.querySelector('#txtOriginalName').value,
@@ -168,9 +189,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         item.ProviderIds = Object.assign({}, currentItem.ProviderIds);
 
-        var idElements = form.querySelectorAll('.txtExternalId');
+        const idElements = form.querySelectorAll('.txtExternalId');
         Array.prototype.map.call(idElements, function (idElem) {
-            var providerKey = idElem.getAttribute('data-providerkey');
+            const providerKey = idElem.getAttribute('data-providerkey');
             item.ProviderIds[providerKey] = idElem.value;
         });
 
@@ -179,7 +200,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         if (currentItem.Type === 'Person') {
 
-            var placeOfBirth = form.querySelector('#txtPlaceOfBirth').value;
+            const placeOfBirth = form.querySelector('#txtPlaceOfBirth').value;
 
             item.ProductionLocations = placeOfBirth ? [placeOfBirth] : [];
         }
@@ -187,11 +208,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         if (currentItem.Type === 'Series') {
 
             // 600000000
-            var seriesRuntime = form.querySelector('#txtSeriesRuntime').value;
+            const seriesRuntime = form.querySelector('#txtSeriesRuntime').value;
             item.RunTimeTicks = seriesRuntime ? (seriesRuntime * 600000000) : null;
         }
 
-        var tagline = form.querySelector('#txtTagline').value;
+        const tagline = form.querySelector('#txtTagline').value;
         item.Taglines = tagline ? [tagline] : [];
 
         submitUpdatedItem(form, item);
@@ -215,8 +236,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             prompt({
                 label: 'Value:'
             }).then(function (text) {
-                var list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList');
-                var items = getListValues(list);
+                const list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList');
+                const items = getListValues(list);
                 items.push(text);
                 populateListView(list, items, sortCallback);
             });
@@ -224,7 +245,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function removeElementFromList(source) {
-        var el = dom.parentWithClass(source, 'listItem');
+        const el = dom.parentWithClass(source, 'listItem');
         el.parentNode.removeChild(el);
     }
 
@@ -234,7 +255,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
             personEditor.show(person).then(function (updatedPerson) {
 
-                var isNew = index === -1;
+                const isNew = index === -1;
 
                 if (isNew) {
                     currentItem.People.push(updatedPerson);
@@ -247,13 +268,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function onEditorClick(e) {
 
-        var btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList');
+        const btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList');
         if (btnRemoveFromEditorList) {
             removeElementFromList(btnRemoveFromEditorList);
             return;
         }
 
-        var btnAddTextItem = dom.parentWithClass(e.target, 'btnAddTextItem');
+        const btnAddTextItem = dom.parentWithClass(e.target, 'btnAddTextItem');
         if (btnAddTextItem) {
             addElementToList(btnAddTextItem);
         }
@@ -264,7 +285,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function bindAll(elems, eventName, fn) {
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
             elems[i].addEventListener(eventName, fn);
         }
     }
@@ -272,11 +293,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     function init(context, apiClient) {
 
         context.querySelector('.externalIds').addEventListener('click', function (e) {
-            var btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId');
+            const btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId');
             if (btnOpenExternalId) {
-                var field = context.querySelector('#' + btnOpenExternalId.getAttribute('data-fieldid'));
+                const field = context.querySelector('#' + btnOpenExternalId.getAttribute('data-fieldid'));
 
-                var formatString = field.getAttribute('data-formatstring');
+                const formatString = field.getAttribute('data-formatstring');
 
                 if (field.value) {
                     shell.openUrl(formatString.replace('{0}', field.value));
@@ -311,7 +332,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         context.removeEventListener('click', onEditorClick);
         context.addEventListener('click', onEditorClick);
 
-        var form = context.querySelector('form');
+        const form = context.querySelector('form');
         form.removeEventListener('submit', onSubmit);
         form.addEventListener('submit', onSubmit);
 
@@ -322,15 +343,15 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         context.querySelector('#peopleList').addEventListener('click', function (e) {
 
-            var index;
-            var btnDeletePerson = dom.parentWithClass(e.target, 'btnDeletePerson');
+            let index;
+            const btnDeletePerson = dom.parentWithClass(e.target, 'btnDeletePerson');
             if (btnDeletePerson) {
                 index = parseInt(btnDeletePerson.getAttribute('data-index'));
                 currentItem.People.splice(index, 1);
                 populatePeople(context, currentItem.People);
             }
 
-            var btnEditPerson = dom.parentWithClass(e.target, 'btnEditPerson');
+            const btnEditPerson = dom.parentWithClass(e.target, 'btnEditPerson');
             if (btnEditPerson) {
                 index = parseInt(btnEditPerson.getAttribute('data-index'));
                 editPerson(context, currentItem.People[index], index);
@@ -340,7 +361,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function getItem(itemId, serverId) {
 
-        var apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         if (itemId) {
             return apiClient.getItem(apiClient.getCurrentUserId(), itemId);
@@ -351,7 +372,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function getEditorConfig(itemId, serverId) {
 
-        var apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         if (itemId) {
             return apiClient.getJSON(apiClient.getUrl('Items/' + itemId + '/MetadataEditor'));
@@ -362,13 +383,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function populateCountries(select, allCountries) {
 
-        var html = '';
+        let html = '';
 
         html += "<option value=''></option>";
 
-        for (var i = 0, length = allCountries.length; i < length; i++) {
+        for (let i = 0, length = allCountries.length; i < length; i++) {
 
-            var culture = allCountries[i];
+            const culture = allCountries[i];
 
             html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>';
         }
@@ -378,13 +399,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function populateLanguages(select, languages) {
 
-        var html = '';
+        let html = '';
 
         html += "<option value=''></option>";
 
-        for (var i = 0, length = languages.length; i < length; i++) {
+        for (let i = 0, length = languages.length; i < length; i++) {
 
-            var culture = languages[i];
+            const culture = languages[i];
 
             html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
         }
@@ -400,41 +421,41 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             showElement('#fldContentType', context);
         }
 
-        var html = metadataInfo.ContentTypeOptions.map(function (i) {
+        const html = metadataInfo.ContentTypeOptions.map(function (i) {
 
             return '<option value="' + i.Value + '">' + i.Name + '</option>';
 
         }).join('');
 
-        var selectEl = context.querySelector('#selectContentType');
+        const selectEl = context.querySelector('#selectContentType');
         selectEl.innerHTML = html;
         selectEl.value = metadataInfo.ContentType || '';
     }
 
     function loadExternalIds(context, item, externalIds) {
 
-        var html = '';
+        let html = '';
 
-        var providerIds = item.ProviderIds || {};
+        const providerIds = item.ProviderIds || {};
 
-        for (var i = 0, length = externalIds.length; i < length; i++) {
+        for (let i = 0, length = externalIds.length; i < length; i++) {
 
-            var idInfo = externalIds[i];
+            const idInfo = externalIds[i];
 
-            var id = 'txt1' + idInfo.Key;
-            var formatString = idInfo.UrlFormatString || '';
+            const id = 'txt1' + idInfo.Key;
+            const formatString = idInfo.UrlFormatString || '';
 
-            var fullName = idInfo.Name;
+            let fullName = idInfo.Name;
             if (idInfo.Type) {
                 fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type);
             }
 
-            var labelText = globalize.translate('LabelDynamicExternalId', fullName);
+            const labelText = globalize.translate('LabelDynamicExternalId', fullName);
 
             html += '<div class="inputContainer">';
             html += '<div class="flex align-items-center">';
 
-            var value = providerIds[idInfo.Key] || '';
+            const value = providerIds[idInfo.Key] || '';
 
             html += '<div class="flex-grow">';
             html += '<input is="emby-input" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" id="' + id + '" label="' + labelText + '"/>';
@@ -448,7 +469,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             html += '</div>';
         }
 
-        var elem = context.querySelector('.externalIds', context);
+        const elem = context.querySelector('.externalIds', context);
         elem.innerHTML = html;
 
         if (externalIds.length) {
@@ -465,7 +486,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         context = context || document;
         if (typeof selector === 'string') {
 
-            var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
+            const elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
 
             Array.prototype.forEach.call(elements, function (el) {
                 if (el) {
@@ -484,7 +505,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         context = context || document;
         if (typeof selector === 'string') {
 
-            var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
+            const elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
 
             Array.prototype.forEach.call(elements, function (el) {
                 if (el) {
@@ -686,7 +707,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function fillItemInfo(context, item, parentalRatingOptions) {
 
-        var select = context.querySelector('#selectOfficialRating');
+        let select = context.querySelector('#selectOfficialRating');
 
         populateRatings(parentalRatingOptions, select, item.OfficialRating);
 
@@ -698,7 +719,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         select.value = item.CustomRating || '';
 
-        var selectStatus = context.querySelector('#selectStatus');
+        const selectStatus = context.querySelector('#selectStatus');
         populateStatus(selectStatus);
         selectStatus.value = item.Status || '';
 
@@ -717,8 +738,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         populateListView(context.querySelector('#listTags'), item.Tags);
 
-        var lockData = (item.LockData || false);
-        var chkLockData = context.querySelector('#chkLockData');
+        const lockData = (item.LockData || false);
+        const chkLockData = context.querySelector('#chkLockData');
         chkLockData.checked = lockData;
         if (chkLockData.checked) {
             hideElement('.providerSettingsContainer', context);
@@ -756,7 +777,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             return a.Name;
         }).join(';');
 
-        var date;
+        let date;
 
         if (item.DateCreated) {
             try {
@@ -798,7 +819,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         context.querySelector('#txtAirTime').value = item.AirTime || '';
 
-        var placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : '';
+        const placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : '';
         context.querySelector('#txtPlaceOfBirth').value = placeofBirth;
 
         context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || '';
@@ -808,7 +829,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         if (item.RunTimeTicks) {
 
-            var minutes = item.RunTimeTicks / 600000000;
+            const minutes = item.RunTimeTicks / 600000000;
 
             context.querySelector('#txtSeriesRuntime').value = Math.round(minutes);
         } else {
@@ -818,18 +839,16 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function populateRatings(allParentalRatings, select, currentValue) {
 
-        var html = '';
+        let html = '';
 
         html += "<option value=''></option>";
 
-        var ratings = [];
-        var i;
-        var length;
-        var rating;
+        const ratings = [];
+        let rating;
 
-        var currentValueFound = false;
+        let currentValueFound = false;
 
-        for (i = 0, length = allParentalRatings.length; i < length; i++) {
+        for (let i = 0, length = allParentalRatings.length; i < length; i++) {
 
             rating = allParentalRatings[i];
 
@@ -844,7 +863,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             ratings.push({ Name: currentValue, Value: currentValue });
         }
 
-        for (i = 0, length = ratings.length; i < length; i++) {
+        for (let i = 0, length = ratings.length; i < length; i++) {
 
             rating = ratings[i];
 
@@ -855,7 +874,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function populateStatus(select) {
-        var html = '';
+        let html = '';
 
         html += "<option value=''></option>";
         html += "<option value='Continuing'>" + globalize.translate('Continuing') + '</option>';
@@ -873,8 +892,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         } else {
             items = sortCallback(items);
         }
-        var html = '';
-        for (var i = 0; i < items.length; i++) {
+        let html = '';
+        for (let i = 0; i < items.length; i++) {
             html += '<div class="listItem">';
 
             html += '<span class="material-icons listItemIcon live_tv" style="background-color:#333;"></span>';
@@ -897,14 +916,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function populatePeople(context, people) {
 
-        var lastType = '';
-        var html = '';
+        let lastType = '';
+        let html = '';
 
-        var elem = context.querySelector('#peopleList');
+        const elem = context.querySelector('#peopleList');
 
-        for (var i = 0, length = people.length; i < length; i++) {
+        for (let i = 0, length = people.length; i < length; i++) {
 
-            var person = people[i];
+            const person = people[i];
 
             html += '<div class="listItem">';
 
@@ -934,13 +953,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function getLockedFieldsHtml(fields, currentFields) {
 
-        var html = '';
-        for (var i = 0; i < fields.length; i++) {
+        let html = '';
+        for (let i = 0; i < fields.length; i++) {
 
-            var field = fields[i];
-            var name = field.name;
-            var value = field.value || field.name;
-            var checkedHtml = currentFields.indexOf(value) === -1 ? ' checked' : '';
+            const field = fields[i];
+            const name = field.name;
+            const value = field.value || field.name;
+            const checkedHtml = currentFields.indexOf(value) === -1 ? ' checked' : '';
             html += '<label>';
             html += '<input type="checkbox" is="emby-checkbox" class="selectLockedField" data-value="' + value + '"' + checkedHtml + '/>';
             html += '<span>' + name + '</span>';
@@ -950,10 +969,10 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function fillMetadataSettings(context, item, lockedFields) {
-        var container = context.querySelector('.providerSettingsContainer');
+        const container = context.querySelector('.providerSettingsContainer');
         lockedFields = lockedFields || [];
 
-        var lockedFieldsList = [
+        const lockedFieldsList = [
             { name: globalize.translate('Name'), value: 'Name' },
             { name: globalize.translate('Overview'), value: 'Overview' },
             { name: globalize.translate('Genres'), value: 'Genres' },
@@ -974,7 +993,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         lockedFieldsList.push({ name: globalize.translate('Studios'), value: 'Studios' });
         lockedFieldsList.push({ name: globalize.translate('Tags'), value: 'Tags' });
 
-        var html = '';
+        let html = '';
 
         html += '<h2>' + globalize.translate('HeaderEnabledFields') + '</h2>';
         html += '<p>' + globalize.translate('HeaderEnabledFieldsHelp') + '</p>';
@@ -988,13 +1007,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         Promise.all([getItem(itemId, serverId), getEditorConfig(itemId, serverId)]).then(function (responses) {
 
-            var item = responses[0];
+            const item = responses[0];
             metadataEditorInfo = responses[1];
 
             currentItem = item;
 
-            var languages = metadataEditorInfo.Cultures;
-            var countries = metadataEditorInfo.Countries;
+            const languages = metadataEditorInfo.Cultures;
+            const countries = metadataEditorInfo.Countries;
 
             renderContentTypeOptions(context, metadataEditorInfo);
 
@@ -1018,7 +1037,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
-            var fn = on ? 'on' : 'off';
+            const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
     }
@@ -1028,7 +1047,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         require(['text!./metadataEditor.template.html'], function (template) {
 
-            var dialogOptions = {
+            const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
             };
@@ -1039,11 +1058,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
                 dialogOptions.size = 'small';
             }
 
-            var dlg = dialogHelper.createDialog(dialogOptions);
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
             dlg.classList.add('formDialog');
 
-            var html = '';
+            let html = '';
 
             html += globalize.translateDocument(template, 'core');
 
@@ -1071,7 +1090,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         });
     }
 
-    return {
+    export default {
         show: function (itemId, serverId) {
             return new Promise(function (resolve, reject) {
                 return show(itemId, serverId, resolve, reject);
@@ -1101,4 +1120,5 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             });
         }
     };
-});
+
+/* eslint-enable indent */
diff --git a/src/components/metadataEditor/personEditor.js b/src/components/metadataEditor/personEditor.js
index fc6a0595f2..8ab7d94702 100644
--- a/src/components/metadataEditor/personEditor.js
+++ b/src/components/metadataEditor/personEditor.js
@@ -1,9 +1,17 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-button-light', 'emby-input', 'emby-select', 'css!./../formdialog'], function (dialogHelper, layoutManager, globalize, require) {
-    'use strict';
+import dialogHelper from 'dialogHelper';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import require from 'require';
+import 'paper-icon-button-light';
+import 'emby-input';
+import 'emby-select';
+import 'css!./../formdialog';
+
+/* eslint-disable indent */
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
-            var fn = on ? 'on' : 'off';
+            const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
     }
@@ -13,7 +21,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
 
             require(['text!./personEditor.template.html'], function (template) {
 
-                var dialogOptions = {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -24,12 +32,12 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
                     dialogOptions.size = 'small';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
 
-                var html = '';
-                var submitted = false;
+                let html = '';
+                let submitted = false;
 
                 html += globalize.translateDocument(template, 'core');
 
@@ -93,7 +101,8 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
         });
     }
 
-    return {
-        show: show
-    };
-});
+export default {
+    show: show
+};
+
+/* eslint-enable indent */