diff --git a/package.json b/package.json
index 13d7fcb5d3..bd40bf5eee 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
           "src/components/images/imageLoader.js",
           "src/components/indicators/indicators.js",
           "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
+          "src/components/listview/listview.js",
           "src/components/playback/brightnessosd.js",
           "src/components/playback/mediasession.js",
           "src/components/playback/nowplayinghelper.js",
diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index 42f32ba794..692d74d38b 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -1,5 +1,20 @@
-define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'datetime', 'apphost', 'css!./listview', 'emby-ratingbutton', 'emby-playstatebutton'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, datetime, appHost) {
-    'use strict';
+/* eslint-disable indent */
+
+/**
+ * Module for display list view.
+ * @module components/listview/listview
+ */
+
+import itemHelper from 'itemHelper';
+import mediaInfo from 'mediaInfo';
+import indicators from 'indicators';
+import connectionManager from 'connectionManager';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import datetime from 'datetime';
+import 'css!./listview';
+import 'emby-ratingbutton';
+import 'emby-playstatebutton';
 
     function getIndex(item, options) {
 
@@ -8,9 +23,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             return item.ParentIndexNumber == null ? '' : globalize.translate('ValueDiscNumber', item.ParentIndexNumber);
         }
 
-        var sortBy = (options.sortBy || '').toLowerCase();
-        var code;
-        var name;
+        const sortBy = (options.sortBy || '').toLowerCase();
+        let code;
+        let name;
 
         if (sortBy.indexOf('sortname') === 0) {
 
@@ -69,10 +84,10 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
     function getImageUrl(item, width) {
 
-        var apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = connectionManager.getApiClient(item.ServerId);
         let itemId;
 
-        var options = {
+        const options = {
             maxWidth: width * 2,
             type: 'Primary'
         };
@@ -102,8 +117,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
     function getChannelImageUrl(item, width) {
 
-        var apiClient = connectionManager.getApiClient(item.ServerId);
-        var options = {
+        const apiClient = connectionManager.getApiClient(item.ServerId);
+        const options = {
             maxWidth: width * 2,
             type: 'Primary'
         };
@@ -121,13 +136,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
     function getTextLinesHtml(textlines, isLargeStyle) {
 
-        var html = '';
+        let html = '';
 
-        var largeTitleTagName = layoutManager.tv ? 'h2' : 'div';
+        const largeTitleTagName = layoutManager.tv ? 'h2' : 'div';
 
-        for (var i = 0, length = textlines.length; i < length; i++) {
+        for (let i = 0, length = textlines.length; i < length; i++) {
 
-            var text = textlines[i];
+            const text = textlines[i];
 
             if (!text) {
                 continue;
@@ -135,7 +150,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             if (i === 0) {
                 if (isLargeStyle) {
-                    html += '<' + largeTitleTagName + ' class="listItemBodyText">';
+                    html += `<${largeTitleTagName} class="listItemBodyText">`;
                 } else {
                     html += '<div class="listItemBodyText">';
                 }
@@ -144,7 +159,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             }
             html += (textlines[i] || '&nbsp;');
             if (i === 0 && isLargeStyle) {
-                html += '</' + largeTitleTagName + '>';
+                html += `</${largeTitleTagName}>`;
             } else {
                 html += '</div>';
             }
@@ -155,13 +170,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
     function getRightButtonsHtml(options) {
 
-        var html = '';
+        let html = '';
 
-        for (var i = 0, length = options.rightButtons.length; i < length; i++) {
+        for (let i = 0, length = options.rightButtons.length; i < length; i++) {
 
-            var button = options.rightButtons[i];
+            const button = options.rightButtons[i];
 
-            html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><span class="material-icons ' + button.icon + '"></span></button>';
+            html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="${button.id}" title="${button.title}"><span class="material-icons ${button.icon}"></span></button>`;
         }
 
         return html;
@@ -171,34 +186,34 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
         return item.Id;
     }
 
-    function getListViewHtml(options) {
+    export function getListViewHtml(options) {
 
-        var items = options.items;
+        const items = options.items;
 
-        var groupTitle = '';
-        var action = options.action || 'link';
+        let groupTitle = '';
+        const action = options.action || 'link';
 
-        var isLargeStyle = options.imageSize === 'large';
-        var enableOverview = options.enableOverview;
+        const isLargeStyle = options.imageSize === 'large';
+        const enableOverview = options.enableOverview;
 
-        var clickEntireItem = layoutManager.tv ? true : false;
-        var outerTagName = clickEntireItem ? 'button' : 'div';
-        var enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true;
+        const clickEntireItem = layoutManager.tv ? true : false;
+        const outerTagName = clickEntireItem ? 'button' : 'div';
+        const enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true;
 
-        var outerHtml = '';
+        let outerHtml = '';
 
-        var enableContentWrapper = options.enableOverview && !layoutManager.tv;
-        var containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId);
+        const enableContentWrapper = options.enableOverview && !layoutManager.tv;
+        const containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId);
 
-        for (var i = 0, length = items.length; i < length; i++) {
+        for (let i = 0, length = items.length; i < length; i++) {
 
-            var item = items[i];
+            const item = items[i];
 
-            var html = '';
+            let html = '';
 
             if (options.showIndex) {
 
-                var itemGroupTitle = getIndex(item, options);
+                const itemGroupTitle = getIndex(item, options);
 
                 if (itemGroupTitle !== groupTitle) {
 
@@ -220,7 +235,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             }
 
-            var cssClass = 'listItem';
+            let cssClass = 'listItem';
 
             if (options.border || (options.highlight !== false && !layoutManager.tv)) {
                 cssClass += ' listItem-border';
@@ -234,28 +249,28 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 cssClass += ' listItem-focusscale';
             }
 
-            var downloadWidth = 80;
+            let downloadWidth = 80;
 
             if (isLargeStyle) {
                 cssClass += ' listItem-largeImage';
                 downloadWidth = 500;
             }
 
-            var playlistItemId = item.PlaylistItemId ? (' data-playlistitemid="' + item.PlaylistItemId + '"') : '';
+            const playlistItemId = item.PlaylistItemId ? (` data-playlistitemid="${item.PlaylistItemId}"`) : '';
 
-            var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
-            var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
-            var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
-            var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';
-            var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : '';
-            var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
+            const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (` data-positionticks="${item.UserData.PlaybackPositionTicks}"`) : '';
+            const collectionIdData = options.collectionId ? (` data-collectionid="${options.collectionId}"`) : '';
+            const playlistIdData = options.playlistId ? (` data-playlistid="${options.playlistId}"`) : '';
+            const mediaTypeData = item.MediaType ? (` data-mediatype="${item.MediaType}"`) : '';
+            const collectionTypeData = item.CollectionType ? (` data-collectiontype="${item.CollectionType}"`) : '';
+            const channelIdData = item.ChannelId ? (` data-channelid="${item.ChannelId}"`) : '';
 
             if (enableContentWrapper) {
 
                 cssClass += ' listItem-withContentWrapper';
             }
 
-            html += '<' + outerTagName + ' class="' + cssClass + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + '>';
+            html += `<${outerTagName} class="${cssClass}"${playlistItemId} data-action="${action}" data-isfolder="${item.IsFolder}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-type="${item.Type}"${mediaTypeData}${collectionTypeData}${channelIdData}${positionTicksData}${collectionIdData}${playlistIdData}>`;
 
             if (enableContentWrapper) {
 
@@ -278,37 +293,37 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                     imageClass += ' listItemImage-large-tv';
                 }
 
-                var playOnImageClick = options.imagePlayButton && !layoutManager.tv;
+                const playOnImageClick = options.imagePlayButton && !layoutManager.tv;
 
                 if (!clickEntireItem) {
                     imageClass += ' itemAction';
                 }
 
-                var imageAction = playOnImageClick ? 'resume' : action;
+                const imageAction = playOnImageClick ? 'resume' : action;
 
                 let blurhashAttrib = '';
                 if (blurhash && blurhash.length > 0) {
-                    blurhashAttrib = 'data-blurhash="' + blurhash + '"';
+                    blurhashAttrib = `data-blurhash="${blurhash}"`;
                 }
 
                 if (imgUrl) {
-                    html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + ' item-icon>';
+                    html += `<div data-action="${imageAction}" class="${imageClass} lazy" data-src="${imgUrl}" ${blurhashAttrib} item-icon>`;
                 } else {
-                    html += '<div class="' + imageClass + '">';
+                    html += `<div class="${imageClass}">`;
                 }
 
-                var indicatorsHtml = '';
+                let indicatorsHtml = '';
                 indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
 
                 if (indicatorsHtml) {
-                    html += '<div class="indicators listItemIndicators">' + indicatorsHtml + '</div>';
+                    html += `<div class="indicators listItemIndicators">${indicatorsHtml}</div>`;
                 }
 
                 if (playOnImageClick) {
                     html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>';
                 }
 
-                var progressHtml = indicators.getProgressBarHtml(item, {
+                const progressHtml = indicators.getProgressBarHtml(item, {
                     containerClass: 'listItemProgressBar'
                 });
 
@@ -325,7 +340,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 html += '</div>';
             }
 
-            var textlines = [];
+            const textlines = [];
 
             if (options.showProgramDateTime) {
                 textlines.push(datetime.toLocaleString(datetime.parseISO8601Date(item.StartDate), {
@@ -348,7 +363,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             }
 
-            var parentTitle = null;
+            let parentTitle = null;
 
             if (options.showParentTitle) {
                 if (item.Type === 'Episode') {
@@ -358,12 +373,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             }
 
-            var displayName = itemHelper.getDisplayName(item, {
+            let displayName = itemHelper.getDisplayName(item, {
                 includeParentInfo: options.includeParentInfoInTitle
             });
 
             if (options.showIndexNumber && item.IndexNumber != null) {
-                displayName = item.IndexNumber + '. ' + displayName;
+                displayName = `${item.IndexNumber}. ${displayName}`;
             }
 
             if (options.showParentTitle && options.parentTitleWithTitle) {
@@ -394,14 +409,14 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             } else {
 
-                var showArtist = options.artist === true;
-                var artistItems = item.ArtistItems;
+                let showArtist = options.artist === true;
+                const artistItems = item.ArtistItems;
 
                 if (!showArtist && options.artist !== false) {
 
                     if (!artistItems || !artistItems.length) {
                         showArtist = true;
-                    } else if (artistItems.length > 1 || containerAlbumArtistIds.indexOf(artistItems[0].Id) === -1) {
+                    } else if (artistItems.length > 1 || !containerAlbumArtistIds.includes(artistItems[0].Id)) {
                         showArtist = true;
                     }
                 }
@@ -409,7 +424,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 if (showArtist) {
 
                     if (artistItems && item.Type !== 'MusicAlbum') {
-                        textlines.push(artistItems.map(function (a) {
+                        textlines.push(artistItems.map(a => {
                             return a.Name;
                         }).join(', '));
                     }
@@ -432,7 +447,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 cssClass += ' listItemBody-noleftpadding';
             }
 
-            html += '<div class="' + cssClass + '">';
+            html += `<div class="${cssClass}">`;
 
             const moreIcon = 'more_vert';
 
@@ -441,14 +456,16 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             if (options.mediaInfo !== false) {
                 if (!enableSideMediaInfo) {
 
-                    var mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText';
+                    const mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText';
 
-                    html += '<div class="' + mediaInfoClass + '">' + mediaInfo.getPrimaryMediaInfoHtml(item, {
+                    html += `<div class="${mediaInfoClass}">`;
+                    html += mediaInfo.getPrimaryMediaInfoHtml(item, {
                         episodeTitle: false,
                         originalAirDate: false,
                         subtitles: false
 
-                    }) + '</div>';
+                    });
+                    html += '</div>';
                 }
             }
 
@@ -462,7 +479,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             if (options.mediaInfo !== false) {
                 if (enableSideMediaInfo) {
-                    html += '<div class="secondary listItemMediaInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item, {
+                    html += '<div class="secondary listItemMediaInfo">';
+                    html += mediaInfo.getPrimaryMediaInfoHtml(item, {
 
                         year: false,
                         container: false,
@@ -470,7 +488,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                         criticRating: false,
                         endsAt: false
 
-                    }) + '</div>';
+                    });
+                    html += '</div>';
                 }
             }
 
@@ -487,7 +506,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (options.moreButton !== false) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><span class="material-icons ' + moreIcon + '"></span></button>';
+                    html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><span class="material-icons ${moreIcon}"></span></button>`;
                 }
 
                 if (options.infoButton) {
@@ -500,15 +519,15 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
                 if (options.enableUserDataButtons !== false) {
 
-                    var userData = item.UserData || {};
-                    var likes = userData.Likes == null ? '' : userData.Likes;
+                    const userData = item.UserData || {};
+                    const likes = userData.Likes == null ? '' : userData.Likes;
 
                     if (itemHelper.canMarkPlayed(item)) {
-                        html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons check"></span></button>';
+                        html += `<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="${item.Id}" data-serverid="${item.ServerId}" data-itemtype="${item.Type}" data-played="${userData.Played}"><span class="material-icons check"></span></button>`;
                     }
 
                     if (itemHelper.canRate(item)) {
-                        html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>';
+                        html += `<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="${item.Id}" data-serverid="${item.ServerId}" data-itemtype="${item.Type}" data-likes="${likes}" data-isfavorite="${userData.IsFavorite}"><span class="material-icons favorite"></span></button>`;
                     }
                 }
             }
@@ -524,7 +543,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             }
 
-            html += '</' + outerTagName + '>';
+            html += `</${outerTagName}>`;
 
             outerHtml += html;
         }
@@ -532,7 +551,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
         return outerHtml;
     }
 
-    return {
-        getListViewHtml: getListViewHtml
-    };
-});
+/* eslint-enable indent */
+export default {
+    getListViewHtml: getListViewHtml
+};