diff --git a/package.json b/package.json
index ba249644ff..27508faa1b 100644
--- a/package.json
+++ b/package.json
@@ -194,7 +194,9 @@
           "src/components/tvproviders/schedulesdirect.js",
           "src/components/tvproviders/xmltv.js",
           "src/components/toast/toast.js",
+          "src/components/tunerPicker.js",
           "src/components/upnextdialog/upnextdialog.js",
+          "src/components/userdatabuttons/userdatabuttons.js",
           "src/components/viewContainer.js",
           "src/components/viewSettings/viewSettings.js",
           "src/components/castSenderApi.js",
diff --git a/src/components/tunerPicker.js b/src/components/tunerPicker.js
index 6b2b1c00e6..13625ddb67 100644
--- a/src/components/tunerPicker.js
+++ b/src/components/tunerPicker.js
@@ -1,183 +1,185 @@
-define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize', 'loading', 'browser', 'focusManager', 'scrollHelper', 'material-icons', 'formDialogStyle', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser, focusManager, scrollHelper) {
-    'use strict';
+import dialogHelper from 'dialogHelper';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import loading from 'loading';
+import browser from 'browser';
+import focusManager from 'focusManager';
+import scrollHelper from 'scrollHelper';
+import 'material-icons';
+import 'formDialogStyle';
+import 'emby-button';
+import 'emby-itemscontainer';
+import 'cardStyle';
 
-    browser = browser.default || browser;
-    loading = loading.default || loading;
-    layoutManager = layoutManager.default || layoutManager;
-    focusManager = focusManager.default || focusManager;
-    scrollHelper = scrollHelper.default || scrollHelper;
+const enableFocusTransform = !browser.slow && !browser.edge;
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+function getEditorHtml() {
+    let html = '';
+    html += '<div class="formDialogContent scrollY">';
+    html += '<div class="dialogContentInner dialog-content-centered">';
+    html += '<div class="loadingContent hide">';
+    html += '<h1>' + globalize.translate('DetectingDevices') + '...</h1>';
+    html += '<p>' + globalize.translate('MessagePleaseWait') + '</p>';
+    html += '</div>';
+    html += '<h1 style="margin-bottom:.25em;" class="devicesHeader hide">' + globalize.translate('HeaderNewDevices') + '</h1>';
+    html += '<div is="emby-itemscontainer" class="results vertical-wrap">';
+    html += '</div>';
+    html += '</div>';
+    return html += '</div>';
+}
 
-    function getEditorHtml() {
-        var html = '';
-        html += '<div class="formDialogContent scrollY">';
-        html += '<div class="dialogContentInner dialog-content-centered">';
-        html += '<div class="loadingContent hide">';
-        html += '<h1>' + globalize.translate('DetectingDevices') + '...</h1>';
-        html += '<p>' + globalize.translate('MessagePleaseWait') + '</p>';
-        html += '</div>';
-        html += '<h1 style="margin-bottom:.25em;" class="devicesHeader hide">' + globalize.translate('HeaderNewDevices') + '</h1>';
-        html += '<div is="emby-itemscontainer" class="results vertical-wrap">';
-        html += '</div>';
-        html += '</div>';
-        return html += '</div>';
-    }
+function getDeviceHtml(device) {
+    let html = '';
+    let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
+    const cardBoxCssClass = 'cardBox visualCardBox';
+    const padderClass = 'cardPadder-backdrop';
 
-    function getDeviceHtml(device) {
-        var padderClass;
-        var html = '';
-        var cssClass = 'card scalableCard';
-        var cardBoxCssClass = 'cardBox visualCardBox';
-        cssClass += ' backdropCard backdropCard-scalable';
-        padderClass = 'cardPadder-backdrop';
+    // TODO move card creation code to Card component
 
-        // TODO move card creation code to Card component
+    if (layoutManager.tv) {
+        cssClass += ' show-focus';
 
-        if (layoutManager.tv) {
-            cssClass += ' show-focus';
-
-            if (enableFocusTransform) {
-                cssClass += ' show-animation';
-            }
-        }
-
-        html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
-        html += '<div class="' + cardBoxCssClass + '">';
-        html += '<div class="cardScalable visualCardBox-cardScalable">';
-        html += '<div class="' + padderClass + '"></div>';
-        html += '<div class="cardContent searchImage">';
-        html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
-        html += '</div>';
-        html += '</div>';
-        html += '<div class="cardFooter visualCardBox-cardFooter">';
-        html += '<div class="cardText cardTextCentered">' + getTunerName(device.Type) + '</div>';
-        html += '<div class="cardText cardTextCentered cardText-secondary">' + device.FriendlyName + '</div>';
-        html += '<div class="cardText cardText-secondary cardTextCentered">';
-        html += device.Url || '&nbsp;';
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        return html += '</button>';
-    }
-
-    function getTunerName(providerId) {
-        switch (providerId = providerId.toLowerCase()) {
-            case 'm3u':
-                return 'M3U';
-
-            case 'hdhomerun':
-                return 'HDHomerun';
-
-            case 'hauppauge':
-                return 'Hauppauge';
-
-            case 'satip':
-                return 'DVB';
-
-            default:
-                return 'Unknown';
+        if (enableFocusTransform) {
+            cssClass += ' show-animation';
         }
     }
 
-    function renderDevices(view, devices) {
-        var i;
-        var length;
-        var html = '';
+    html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
+    html += '<div class="' + cardBoxCssClass + '">';
+    html += '<div class="cardScalable visualCardBox-cardScalable">';
+    html += '<div class="' + padderClass + '"></div>';
+    html += '<div class="cardContent searchImage">';
+    html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
+    html += '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter visualCardBox-cardFooter">';
+    html += '<div class="cardText cardTextCentered">' + getTunerName(device.Type) + '</div>';
+    html += '<div class="cardText cardTextCentered cardText-secondary">' + device.FriendlyName + '</div>';
+    html += '<div class="cardText cardText-secondary cardTextCentered">';
+    html += device.Url || '&nbsp;';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html += '</button>';
+}
 
-        for (i = 0, length = devices.length; i < length; i++) {
-            html += getDeviceHtml(devices[i]);
-        }
+function getTunerName(providerId) {
+    switch (providerId = providerId.toLowerCase()) {
+        case 'm3u':
+            return 'M3U';
 
-        if (devices.length) {
-            view.querySelector('.devicesHeader').classList.remove('hide');
-        } else {
-            html = '<p><br/>' + globalize.translate('NoNewDevicesFound') + '</p>';
-            view.querySelector('.devicesHeader').classList.add('hide');
-        }
+        case 'hdhomerun':
+            return 'HDHomerun';
 
-        var elem = view.querySelector('.results');
-        elem.innerHTML = html;
+        case 'hauppauge':
+            return 'Hauppauge';
 
-        if (layoutManager.tv) {
-            focusManager.autoFocus(elem);
-        }
+        case 'satip':
+            return 'DVB';
+
+        default:
+            return 'Unknown';
+    }
+}
+
+function renderDevices(view, devices) {
+    let html = '';
+
+    for (let i = 0, length = devices.length; i < length; i++) {
+        html += getDeviceHtml(devices[i]);
     }
 
-    function discoverDevices(view, apiClient) {
-        loading.show();
-        view.querySelector('.loadingContent').classList.remove('hide');
-        return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', {
-            NewDevicesOnly: true
-        })).then(function (devices) {
-            currentDevices = devices;
-            renderDevices(view, devices);
-            view.querySelector('.loadingContent').classList.add('hide');
-            loading.hide();
-        });
+    if (devices.length) {
+        view.querySelector('.devicesHeader').classList.remove('hide');
+    } else {
+        html = '<p><br/>' + globalize.translate('NoNewDevicesFound') + '</p>';
+        view.querySelector('.devicesHeader').classList.add('hide');
     }
 
-    function tunerPicker() {
-        this.show = function (options) {
-            var dialogOptions = {
-                removeOnClose: true,
-                scrollY: false
-            };
+    const elem = view.querySelector('.results');
+    elem.innerHTML = html;
 
-            if (layoutManager.tv) {
-                dialogOptions.size = 'fullscreen';
-            } else {
-                dialogOptions.size = 'small';
-            }
+    if (layoutManager.tv) {
+        focusManager.autoFocus(elem);
+    }
+}
 
-            var dlg = dialogHelper.createDialog(dialogOptions);
-            dlg.classList.add('formDialog');
-            var html = '';
-            html += '<div class="formDialogHeader">';
-            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
-            html += '<h3 class="formDialogHeaderTitle">';
-            html += globalize.translate('HeaderLiveTvTunerSetup');
-            html += '</h3>';
-            html += '</div>';
-            html += getEditorHtml();
-            dlg.innerHTML = html;
-            dlg.querySelector('.btnCancel').addEventListener('click', function () {
-                dialogHelper.close(dlg);
-            });
-            var deviceResult;
-            dlg.querySelector('.results').addEventListener('click', function (e) {
-                var tunerCard = dom.parentWithClass(e.target, 'card');
+function discoverDevices(view, apiClient) {
+    loading.show();
+    view.querySelector('.loadingContent').classList.remove('hide');
+    return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', {
+        NewDevicesOnly: true
+    })).then(function (devices) {
+        currentDevices = devices;
+        renderDevices(view, devices);
+        view.querySelector('.loadingContent').classList.add('hide');
+        loading.hide();
+    });
+}
 
-                if (tunerCard) {
-                    var deviceId = tunerCard.getAttribute('data-id');
-                    deviceResult = currentDevices.filter(function (d) {
-                        return d.DeviceId === deviceId;
-                    })[0];
-                    dialogHelper.close(dlg);
-                }
-            });
-
-            if (layoutManager.tv) {
-                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
-            }
-
-            var apiClient = connectionManager.getApiClient(options.serverId);
-            discoverDevices(dlg, apiClient);
-
-            if (layoutManager.tv) {
-                scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
-            }
-
-            return dialogHelper.open(dlg).then(function () {
-                if (deviceResult) {
-                    return Promise.resolve(deviceResult);
-                }
-
-                return Promise.reject();
-            });
+function tunerPicker() {
+    this.show = function (options) {
+        const dialogOptions = {
+            removeOnClose: true,
+            scrollY: false
         };
-    }
 
-    var currentDevices = [];
-    return tunerPicker;
-});
+        if (layoutManager.tv) {
+            dialogOptions.size = 'fullscreen';
+        } else {
+            dialogOptions.size = 'small';
+        }
+
+        const dlg = dialogHelper.createDialog(dialogOptions);
+        dlg.classList.add('formDialog');
+        let html = '';
+        html += '<div class="formDialogHeader">';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
+        html += '<h3 class="formDialogHeaderTitle">';
+        html += globalize.translate('HeaderLiveTvTunerSetup');
+        html += '</h3>';
+        html += '</div>';
+        html += getEditorHtml();
+        dlg.innerHTML = html;
+        dlg.querySelector('.btnCancel').addEventListener('click', function () {
+            dialogHelper.close(dlg);
+        });
+        let deviceResult;
+        dlg.querySelector('.results').addEventListener('click', function (e) {
+            const tunerCard = dom.parentWithClass(e.target, 'card');
+
+            if (tunerCard) {
+                const deviceId = tunerCard.getAttribute('data-id');
+                deviceResult = currentDevices.filter(function (d) {
+                    return d.DeviceId === deviceId;
+                })[0];
+                dialogHelper.close(dlg);
+            }
+        });
+
+        if (layoutManager.tv) {
+            scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+        }
+
+        const apiClient = connectionManager.getApiClient(options.serverId);
+        discoverDevices(dlg, apiClient);
+
+        if (layoutManager.tv) {
+            scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
+        }
+
+        return dialogHelper.open(dlg).then(function () {
+            if (deviceResult) {
+                return Promise.resolve(deviceResult);
+            }
+
+            return Promise.reject();
+        });
+    };
+}
+
+let currentDevices = [];
+
+export default tunerPicker;
diff --git a/src/components/userdatabuttons/userdatabuttons.js b/src/components/userdatabuttons/userdatabuttons.js
index e3a7b9e06b..2b09095574 100644
--- a/src/components/userdatabuttons/userdatabuttons.js
+++ b/src/components/userdatabuttons/userdatabuttons.js
@@ -1,214 +1,219 @@
-define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-button-light', 'material-icons', 'emby-button', 'css!./userdatabuttons'], function (connectionManager, globalize, dom, itemHelper) {
-    'use strict';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import dom from 'dom';
+import itemHelper from 'itemHelper';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'emby-button';
+import 'css!./userdatabuttons';
 
-    var userDataMethods = {
-        markPlayed: markPlayed,
-        markDislike: markDislike,
-        markLike: markLike,
-        markFavorite: markFavorite
-    };
+const userDataMethods = {
+    markPlayed: markPlayed,
+    markDislike: markDislike,
+    markLike: markLike,
+    markFavorite: markFavorite
+};
 
-    function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCssClass, icon, tooltip, style) {
-        if (style === 'fab-mini') {
-            style = 'fab';
-            buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
-        }
-
-        var is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
-        var className = style === 'fab' ? 'autoSize fab' : 'autoSize';
-
-        if (buttonCssClass) {
-            className += ' ' + buttonCssClass;
-        }
-
-        if (iconCssClass) {
-            iconCssClass += ' ';
-        } else {
-            iconCssClass = '';
-        }
-
-        iconCssClass += 'material-icons';
-
-        return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>';
+function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCssClass, icon, tooltip, style) {
+    if (style === 'fab-mini') {
+        style = 'fab';
+        buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
     }
 
-    function onContainerClick(e) {
-        var btnUserData = dom.parentWithClass(e.target, 'btnUserData');
+    const is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
+    let className = style === 'fab' ? 'autoSize fab' : 'autoSize';
 
-        if (!btnUserData) {
-            return;
-        }
-
-        var method = btnUserData.getAttribute('data-method');
-        userDataMethods[method](btnUserData);
+    if (buttonCssClass) {
+        className += ' ' + buttonCssClass;
     }
 
-    function fill(options) {
-        var html = getIconsHtml(options);
-
-        if (options.fillMode === 'insertAdjacent') {
-            options.element.insertAdjacentHTML(options.insertLocation || 'beforeend', html);
-        } else {
-            options.element.innerHTML = html;
-        }
-
-        dom.removeEventListener(options.element, 'click', onContainerClick, {
-            passive: true
-        });
-
-        dom.addEventListener(options.element, 'click', onContainerClick, {
-            passive: true
-        });
+    if (iconCssClass) {
+        iconCssClass += ' ';
+    } else {
+        iconCssClass = '';
     }
 
-    function destroy(options) {
-        options.element.innerHTML = '';
+    iconCssClass += 'material-icons';
 
-        dom.removeEventListener(options.element, 'click', onContainerClick, {
-            passive: true
-        });
+    return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>';
+}
+
+function onContainerClick(e) {
+    const btnUserData = dom.parentWithClass(e.target, 'btnUserData');
+
+    if (!btnUserData) {
+        return;
     }
 
-    function getIconsHtml(options) {
-        var item = options.item;
-        var includePlayed = options.includePlayed;
-        var cssClass = options.cssClass;
-        var style = options.style;
+    const method = btnUserData.getAttribute('data-method');
+    userDataMethods[method](btnUserData);
+}
 
-        var html = '';
+function fill(options) {
+    const html = getIconsHtml(options);
 
-        var userData = item.UserData || {};
+    if (options.fillMode === 'insertAdjacent') {
+        options.element.insertAdjacentHTML(options.insertLocation || 'beforeend', html);
+    } else {
+        options.element.innerHTML = html;
+    }
 
-        var itemId = item.Id;
+    dom.removeEventListener(options.element, 'click', onContainerClick, {
+        passive: true
+    });
 
-        if (itemHelper.isLocalItem(item)) {
-            return html;
-        }
+    dom.addEventListener(options.element, 'click', onContainerClick, {
+        passive: true
+    });
+}
 
-        var btnCssClass = 'btnUserData';
+function destroy(options) {
+    options.element.innerHTML = '';
 
-        if (cssClass) {
-            btnCssClass += ' ' + cssClass;
-        }
+    dom.removeEventListener(options.element, 'click', onContainerClick, {
+        passive: true
+    });
+}
 
-        var iconCssClass = options.iconCssClass;
+function getIconsHtml(options) {
+    const item = options.item;
+    const includePlayed = options.includePlayed;
+    const cssClass = options.cssClass;
+    const style = options.style;
 
-        var serverId = item.ServerId;
+    let html = '';
 
-        if (includePlayed !== false) {
-            var tooltipPlayed = globalize.translate('MarkPlayed');
+    const userData = item.UserData || {};
 
-            if (itemHelper.canMarkPlayed(item)) {
-                if (userData.Played) {
-                    html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass + ' btnUserDataOn', iconCssClass, 'check', tooltipPlayed, style);
-                } else {
-                    html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass, iconCssClass, 'check', tooltipPlayed, style);
-                }
-            }
-        }
-
-        var tooltipFavorite = globalize.translate('Favorite');
-        if (userData.IsFavorite) {
-            html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
-        } else {
-            html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData', iconCssClass, 'favorite', tooltipFavorite, style);
-        }
+    const itemId = item.Id;
 
+    if (itemHelper.isLocalItem(item)) {
         return html;
     }
 
-    function markFavorite(link) {
-        var id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    let btnCssClass = 'btnUserData';
 
-        var markAsFavorite = !link.classList.contains('btnUserDataOn');
+    if (cssClass) {
+        btnCssClass += ' ' + cssClass;
+    }
 
-        favorite(id, serverId, markAsFavorite);
+    const iconCssClass = options.iconCssClass;
 
-        if (markAsFavorite) {
-            link.classList.add('btnUserDataOn');
-        } else {
-            link.classList.remove('btnUserDataOn');
+    const serverId = item.ServerId;
+
+    if (includePlayed !== false) {
+        const tooltipPlayed = globalize.translate('MarkPlayed');
+
+        if (itemHelper.canMarkPlayed(item)) {
+            if (userData.Played) {
+                html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass + ' btnUserDataOn', iconCssClass, 'check', tooltipPlayed, style);
+            } else {
+                html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass, iconCssClass, 'check', tooltipPlayed, style);
+            }
         }
     }
 
-    function markLike(link) {
-        var id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
-
-        if (!link.classList.contains('btnUserDataOn')) {
-            likes(id, serverId, true);
-
-            link.classList.add('btnUserDataOn');
-        } else {
-            clearLike(id, serverId);
-
-            link.classList.remove('btnUserDataOn');
-        }
-
-        link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn');
+    const tooltipFavorite = globalize.translate('Favorite');
+    if (userData.IsFavorite) {
+        html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
+    } else {
+        html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData', iconCssClass, 'favorite', tooltipFavorite, style);
     }
 
-    function markDislike(link) {
-        var id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    return html;
+}
 
-        if (!link.classList.contains('btnUserDataOn')) {
-            likes(id, serverId, false);
+function markFavorite(link) {
+    const id = link.getAttribute('data-itemid');
+    const serverId = link.getAttribute('data-serverid');
 
-            link.classList.add('btnUserDataOn');
-        } else {
-            clearLike(id, serverId);
+    const markAsFavorite = !link.classList.contains('btnUserDataOn');
 
-            link.classList.remove('btnUserDataOn');
-        }
+    favorite(id, serverId, markAsFavorite);
 
-        link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn');
+    if (markAsFavorite) {
+        link.classList.add('btnUserDataOn');
+    } else {
+        link.classList.remove('btnUserDataOn');
+    }
+}
+
+function markLike(link) {
+    const id = link.getAttribute('data-itemid');
+    const serverId = link.getAttribute('data-serverid');
+
+    if (!link.classList.contains('btnUserDataOn')) {
+        likes(id, serverId, true);
+
+        link.classList.add('btnUserDataOn');
+    } else {
+        clearLike(id, serverId);
+
+        link.classList.remove('btnUserDataOn');
     }
 
-    function markPlayed(link) {
-        var id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn');
+}
 
-        if (!link.classList.contains('btnUserDataOn')) {
-            played(id, serverId, true);
+function markDislike(link) {
+    const id = link.getAttribute('data-itemid');
+    const serverId = link.getAttribute('data-serverid');
 
-            link.classList.add('btnUserDataOn');
-        } else {
-            played(id, serverId, false);
+    if (!link.classList.contains('btnUserDataOn')) {
+        likes(id, serverId, false);
 
-            link.classList.remove('btnUserDataOn');
-        }
+        link.classList.add('btnUserDataOn');
+    } else {
+        clearLike(id, serverId);
+
+        link.classList.remove('btnUserDataOn');
     }
 
-    function likes(id, serverId, isLiked) {
-        var apiClient = connectionManager.getApiClient(serverId);
-        return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
+    link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn');
+}
+
+function markPlayed(link) {
+    const id = link.getAttribute('data-itemid');
+    const serverId = link.getAttribute('data-serverid');
+
+    if (!link.classList.contains('btnUserDataOn')) {
+        played(id, serverId, true);
+
+        link.classList.add('btnUserDataOn');
+    } else {
+        played(id, serverId, false);
+
+        link.classList.remove('btnUserDataOn');
     }
+}
 
-    function played(id, serverId, isPlayed) {
-        var apiClient = connectionManager.getApiClient(serverId);
+function likes(id, serverId, isLiked) {
+    const apiClient = connectionManager.getApiClient(serverId);
+    return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
+}
 
-        var method = isPlayed ? 'markPlayed' : 'markUnplayed';
+function played(id, serverId, isPlayed) {
+    const apiClient = connectionManager.getApiClient(serverId);
 
-        return apiClient[method](apiClient.getCurrentUserId(), id, new Date());
-    }
+    const method = isPlayed ? 'markPlayed' : 'markUnplayed';
 
-    function favorite(id, serverId, isFavorite) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    return apiClient[method](apiClient.getCurrentUserId(), id, new Date());
+}
 
-        return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
-    }
+function favorite(id, serverId, isFavorite) {
+    const apiClient = connectionManager.getApiClient(serverId);
 
-    function clearLike(id, serverId) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
+}
 
-        return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
-    }
+function clearLike(id, serverId) {
+    const apiClient = connectionManager.getApiClient(serverId);
 
-    return {
-        fill: fill,
-        destroy: destroy,
-        getIconsHtml: getIconsHtml
-    };
-});
+    return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
+}
+
+export default {
+    fill: fill,
+    destroy: destroy,
+    getIconsHtml: getIconsHtml
+};