diff --git a/package.json b/package.json
index 6e95065f4..6324ffd33 100644
--- a/package.json
+++ b/package.json
@@ -224,6 +224,8 @@
           "src/plugins/bookPlayer/plugin.js",
           "src/plugins/bookPlayer/tableOfContents.js",
           "src/plugins/photoPlayer/plugin.js",
+          "src/scripts/alphanumericshortcuts.js",
+          "src/scripts/autoBackdrops.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",
           "src/scripts/settings/webSettings.js",
@@ -236,6 +238,7 @@
           "src/scripts/imagehelper.js",
           "src/scripts/inputManager.js",
           "src/plugins/backdropScreensaver/plugin.js",
+          "src/plugins/youtubePlayer/plugin.js",
           "src/components/filterdialog/filterdialog.js",
           "src/components/fetchhelper.js",
           "src/scripts/editorsidebar.js",
diff --git a/src/components/tabbedview/itemstab.js b/src/components/tabbedview/itemstab.js
index 4aac2f747..d40faef5d 100644
--- a/src/components/tabbedview/itemstab.js
+++ b/src/components/tabbedview/itemstab.js
@@ -331,7 +331,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
         }
 
         if (this.enableAlphaNumericShortcuts !== false) {
-            this.alphaNumericShortcuts = new AlphaNumericShortcuts({
+            this.alphaNumericShortcuts = new AlphaNumericShortcuts.default({
                 itemsContainer: this.itemsContainer
             });
         }
@@ -561,7 +561,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
 
         var alphaNumericShortcuts = this.alphaNumericShortcuts;
         if (alphaNumericShortcuts) {
-            alphaNumericShortcuts.destroy();
+            alphaNumericShortcuts.default.destroy();
             this.alphaNumericShortcuts = null;
         }
     };
diff --git a/src/controllers/list.js b/src/controllers/list.js
index 73ca93c71..a98869578 100644
--- a/src/controllers/list.js
+++ b/src/controllers/list.js
@@ -803,7 +803,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 bindAll(view.querySelectorAll('.btnShuffle'), 'click', shuffle);
             }
 
-            this.alphaNumericShortcuts = new AlphaNumericShortcuts({
+            this.alphaNumericShortcuts = new AlphaNumericShortcuts.default({
                 itemsContainer: self.itemsContainer
             });
         });
@@ -817,7 +817,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             var alphaNumericShortcuts = self.alphaNumericShortcuts;
 
             if (alphaNumericShortcuts) {
-                alphaNumericShortcuts.destroy();
+                alphaNumericShortcuts.default.destroy();
                 self.alphaNumericShortcuts = null;
             }
         });
diff --git a/src/plugins/youtubePlayer/plugin.js b/src/plugins/youtubePlayer/plugin.js
index 5b5e1b1a3..fc7c33f87 100644
--- a/src/plugins/youtubePlayer/plugin.js
+++ b/src/plugins/youtubePlayer/plugin.js
@@ -1,199 +1,204 @@
-define(['require', 'events', 'browser', 'appRouter', 'loading'], function (require, events, browser, appRouter, loading) {
-    'use strict';
-    /* globals YT */
+import require from 'require';
+import events from 'events';
+import browser from 'browser';
+import appRouter from 'appRouter';
+import loading from 'loading';
 
-    function zoomIn(elem, iterations) {
-        var keyframes = [
-            { transform: 'scale3d(.2, .2, .2)  ', opacity: '.6', offset: 0 },
-            { transform: 'none', opacity: '1', offset: 1 }
-        ];
+/* globals YT */
 
-        var timing = { duration: 240, iterations: iterations };
-        return elem.animate(keyframes, timing);
-    }
+function zoomIn(elem, iterations) {
+    const keyframes = [
+        { transform: 'scale3d(.2, .2, .2)  ', opacity: '.6', offset: 0 },
+        { transform: 'none', opacity: '1', offset: 1 }
+    ];
 
-    function createMediaElement(instance, options) {
+    const timing = { duration: 240, iterations: iterations };
+    return elem.animate(keyframes, timing);
+}
 
-        return new Promise(function (resolve, reject) {
+function createMediaElement(instance, options) {
 
-            var dlg = document.querySelector('.youtubePlayerContainer');
+    return new Promise(function (resolve, reject) {
 
-            if (!dlg) {
+        const dlg = document.querySelector('.youtubePlayerContainer');
 
-                require(['css!./style'], function () {
+        if (!dlg) {
 
-                    loading.show();
+            import('css!./style').then(() => {
 
-                    var dlg = document.createElement('div');
+                loading.show();
 
-                    dlg.classList.add('youtubePlayerContainer');
+                const dlg = document.createElement('div');
 
-                    if (options.fullscreen) {
-                        dlg.classList.add('onTop');
-                    }
+                dlg.classList.add('youtubePlayerContainer');
 
-                    dlg.innerHTML = '<div id="player"></div>';
-                    var videoElement = dlg.querySelector('#player');
-
-                    document.body.insertBefore(dlg, document.body.firstChild);
-                    instance.videoDialog = dlg;
-
-                    if (options.fullscreen && dlg.animate && !browser.slow) {
-                        zoomIn(dlg, 1).onfinish = function () {
-                            resolve(videoElement);
-                        };
-                    } else {
-                        resolve(videoElement);
-                    }
-
-                });
-
-            } else {
-                resolve(dlg.querySelector('#player'));
-            }
-        });
-    }
-
-    function onVideoResize() {
-        var instance = this;
-        var player = instance.currentYoutubePlayer;
-        var dlg = instance.videoDialog;
-        if (player && dlg) {
-            player.setSize(dlg.offsetWidth, dlg.offsetHeight);
-        }
-    }
-
-    function clearTimeUpdateInterval(instance) {
-        if (instance.timeUpdateInterval) {
-            clearInterval(instance.timeUpdateInterval);
-        }
-        instance.timeUpdateInterval = null;
-    }
-
-    function onEndedInternal(instance) {
-
-        clearTimeUpdateInterval(instance);
-        var resizeListener = instance.resizeListener;
-        if (resizeListener) {
-            window.removeEventListener('resize', resizeListener);
-            window.removeEventListener('orientationChange', resizeListener);
-            instance.resizeListener = null;
-        }
-
-        var stopInfo = {
-            src: instance._currentSrc
-        };
-
-        events.trigger(instance, 'stopped', [stopInfo]);
-
-        instance._currentSrc = null;
-        if (instance.currentYoutubePlayer) {
-            instance.currentYoutubePlayer.destroy();
-        }
-        instance.currentYoutubePlayer = null;
-    }
-
-    // 4. The API will call this function when the video player is ready.
-    function onPlayerReady(event) {
-        event.target.playVideo();
-    }
-
-    function onTimeUpdate(e) {
-
-        events.trigger(this, 'timeupdate');
-    }
-
-    function onPlaying(instance, playOptions, resolve) {
-
-        if (!instance.started) {
-
-            instance.started = true;
-            resolve();
-            clearTimeUpdateInterval(instance);
-            instance.timeUpdateInterval = setInterval(onTimeUpdate.bind(instance), 500);
-
-            if (playOptions.fullscreen) {
-
-                appRouter.showVideoOsd().then(function () {
-                    instance.videoDialog.classList.remove('onTop');
-                });
-
-            } else {
-                appRouter.setTransparency('backdrop');
-                instance.videoDialog.classList.remove('onTop');
-            }
-
-            require(['loading'], function (loading) {
-
-                loading.hide();
-            });
-        }
-    }
-
-    function setCurrentSrc(instance, elem, options) {
-
-        return new Promise(function (resolve, reject) {
-
-            require(['queryString'], function (queryString) {
-
-                instance._currentSrc = options.url;
-                var params = queryString.parse(options.url.split('?')[1]);
-                // 3. This function creates an <iframe> (and YouTube player)
-                //    after the API code downloads.
-                window.onYouTubeIframeAPIReady = function () {
-                    instance.currentYoutubePlayer = new YT.Player('player', {
-                        height: instance.videoDialog.offsetHeight,
-                        width: instance.videoDialog.offsetWidth,
-                        videoId: params.v,
-                        events: {
-                            'onReady': onPlayerReady,
-                            'onStateChange': function (event) {
-                                if (event.data === YT.PlayerState.PLAYING) {
-                                    onPlaying(instance, options, resolve);
-                                } else if (event.data === YT.PlayerState.ENDED) {
-                                    onEndedInternal(instance);
-                                } else if (event.data === YT.PlayerState.PAUSED) {
-                                    events.trigger(instance, 'pause');
-                                }
-                            }
-                        },
-                        playerVars: {
-                            controls: 0,
-                            enablejsapi: 1,
-                            modestbranding: 1,
-                            rel: 0,
-                            showinfo: 0,
-                            fs: 0,
-                            playsinline: 1
-                        }
-                    });
-
-                    var resizeListener = instance.resizeListener;
-                    if (resizeListener) {
-                        window.removeEventListener('resize', resizeListener);
-                        window.addEventListener('resize', resizeListener);
-                    } else {
-                        resizeListener = instance.resizeListener = onVideoResize.bind(instance);
-                        window.addEventListener('resize', resizeListener);
-                    }
-                    window.removeEventListener('orientationChange', resizeListener);
-                    window.addEventListener('orientationChange', resizeListener);
-                };
-
-                if (!window.YT) {
-                    var tag = document.createElement('script');
-                    tag.src = 'https://www.youtube.com/iframe_api';
-                    var firstScriptTag = document.getElementsByTagName('script')[0];
-                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-                } else {
-                    window.onYouTubeIframeAPIReady();
+                if (options.fullscreen) {
+                    dlg.classList.add('onTop');
                 }
+
+                dlg.innerHTML = '<div id="player"></div>';
+                const videoElement = dlg.querySelector('#player');
+
+                document.body.insertBefore(dlg, document.body.firstChild);
+                instance.videoDialog = dlg;
+
+                if (options.fullscreen && dlg.animate && !browser.slow) {
+                    zoomIn(dlg, 1).onfinish = function () {
+                        resolve(videoElement);
+                    };
+                } else {
+                    resolve(videoElement);
+                }
+
             });
 
-        });
+        } else {
+            resolve(dlg.querySelector('#player'));
+        }
+    });
+}
+
+function onVideoResize() {
+    const instance = this;
+    const player = instance.currentYoutubePlayer;
+    const dlg = instance.videoDialog;
+    if (player && dlg) {
+        player.setSize(dlg.offsetWidth, dlg.offsetHeight);
+    }
+}
+
+function clearTimeUpdateInterval(instance) {
+    if (instance.timeUpdateInterval) {
+        clearInterval(instance.timeUpdateInterval);
+    }
+    instance.timeUpdateInterval = null;
+}
+
+function onEndedInternal(instance) {
+
+    clearTimeUpdateInterval(instance);
+    const resizeListener = instance.resizeListener;
+    if (resizeListener) {
+        window.removeEventListener('resize', resizeListener);
+        window.removeEventListener('orientationChange', resizeListener);
+        instance.resizeListener = null;
     }
 
-    function YoutubePlayer() {
+    const stopInfo = {
+        src: instance._currentSrc
+    };
+
+    events.trigger(instance, 'stopped', [stopInfo]);
+
+    instance._currentSrc = null;
+    if (instance.currentYoutubePlayer) {
+        instance.currentYoutubePlayer.destroy();
+    }
+    instance.currentYoutubePlayer = null;
+}
+
+// 4. The API will call this function when the video player is ready.
+function onPlayerReady(event) {
+    event.target.playVideo();
+}
+
+function onTimeUpdate(e) {
+
+    events.trigger(this, 'timeupdate');
+}
+
+function onPlaying(instance, playOptions, resolve) {
+
+    if (!instance.started) {
+
+        instance.started = true;
+        resolve();
+        clearTimeUpdateInterval(instance);
+        instance.timeUpdateInterval = setInterval(onTimeUpdate.bind(instance), 500);
+
+        if (playOptions.fullscreen) {
+
+            appRouter.showVideoOsd().then(function () {
+                instance.videoDialog.classList.remove('onTop');
+            });
+
+        } else {
+            appRouter.setTransparency('backdrop');
+            instance.videoDialog.classList.remove('onTop');
+        }
+
+        import('loading').then(({default: loading}) => {
+
+            loading.hide();
+        });
+    }
+}
+
+function setCurrentSrc(instance, elem, options) {
+
+    return new Promise(function (resolve, reject) {
+
+        import('queryString').then(({default: queryString}) => {
+
+            instance._currentSrc = options.url;
+            const params = queryString.parse(options.url.split('?')[1]);
+            // 3. This function creates an <iframe> (and YouTube player)
+            //    after the API code downloads.
+            window.onYouTubeIframeAPIReady = function () {
+                instance.currentYoutubePlayer = new YT.Player('player', {
+                    height: instance.videoDialog.offsetHeight,
+                    width: instance.videoDialog.offsetWidth,
+                    videoId: params.v,
+                    events: {
+                        'onReady': onPlayerReady,
+                        'onStateChange': function (event) {
+                            if (event.data === YT.PlayerState.PLAYING) {
+                                onPlaying(instance, options, resolve);
+                            } else if (event.data === YT.PlayerState.ENDED) {
+                                onEndedInternal(instance);
+                            } else if (event.data === YT.PlayerState.PAUSED) {
+                                events.trigger(instance, 'pause');
+                            }
+                        }
+                    },
+                    playerVars: {
+                        controls: 0,
+                        enablejsapi: 1,
+                        modestbranding: 1,
+                        rel: 0,
+                        showinfo: 0,
+                        fs: 0,
+                        playsinline: 1
+                    }
+                });
+
+                let resizeListener = instance.resizeListener;
+                if (resizeListener) {
+                    window.removeEventListener('resize', resizeListener);
+                    window.addEventListener('resize', resizeListener);
+                } else {
+                    resizeListener = instance.resizeListener = onVideoResize.bind(instance);
+                    window.addEventListener('resize', resizeListener);
+                }
+                window.removeEventListener('orientationChange', resizeListener);
+                window.addEventListener('orientationChange', resizeListener);
+            };
+
+            if (!window.YT) {
+                const tag = document.createElement('script');
+                tag.src = 'https://www.youtube.com/iframe_api';
+                const firstScriptTag = document.getElementsByTagName('script')[0];
+                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+            } else {
+                window.onYouTubeIframeAPIReady();
+            }
+        });
+
+    });
+}
+
+class YoutubePlayer {
+    constructor() {
 
         this.name = 'Youtube Player';
         this.type = 'mediaplayer';
@@ -202,21 +207,19 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
         // Let any players created by plugins take priority
         this.priority = 1;
     }
-
-    YoutubePlayer.prototype.play = function (options) {
+    play(options) {
 
         this.started = false;
-        var instance = this;
+        const instance = this;
 
         return createMediaElement(this, options).then(function (elem) {
 
             return setCurrentSrc(instance, elem, options);
         });
-    };
+    }
+    stop(destroyPlayer) {
 
-    YoutubePlayer.prototype.stop = function (destroyPlayer) {
-
-        var src = this._currentSrc;
+        const src = this._currentSrc;
 
         if (src) {
 
@@ -231,63 +234,52 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
         }
 
         return Promise.resolve();
-    };
-
-    YoutubePlayer.prototype.destroy = function () {
+    }
+    destroy() {
 
         appRouter.setTransparency('none');
 
-        var dlg = this.videoDialog;
+        const dlg = this.videoDialog;
         if (dlg) {
 
             this.videoDialog = null;
 
             dlg.parentNode.removeChild(dlg);
         }
-    };
-
-    YoutubePlayer.prototype.canPlayMediaType = function (mediaType) {
+    }
+    canPlayMediaType(mediaType) {
 
         mediaType = (mediaType || '').toLowerCase();
 
         return mediaType === 'audio' || mediaType === 'video';
-    };
-
-    YoutubePlayer.prototype.canPlayItem = function (item) {
+    }
+    canPlayItem(item) {
 
         // Does not play server items
         return false;
-    };
-
-    YoutubePlayer.prototype.canPlayUrl = function (url) {
+    }
+    canPlayUrl(url) {
 
         return url.toLowerCase().indexOf('youtube.com') !== -1;
-    };
-
-    YoutubePlayer.prototype.getDeviceProfile = function () {
+    }
+    getDeviceProfile() {
 
         return Promise.resolve({});
-    };
-
-    YoutubePlayer.prototype.currentSrc = function () {
+    }
+    currentSrc() {
         return this._currentSrc;
-    };
-
-    YoutubePlayer.prototype.setSubtitleStreamIndex = function (index) {
-    };
-
-    YoutubePlayer.prototype.canSetAudioStreamIndex = function () {
+    }
+    setSubtitleStreamIndex(index) {
+    }
+    canSetAudioStreamIndex() {
         return false;
-    };
-
-    YoutubePlayer.prototype.setAudioStreamIndex = function (index) {
-
-    };
-
+    }
+    setAudioStreamIndex(index) {
+    }
     // Save this for when playback stops, because querying the time at that point might return 0
-    YoutubePlayer.prototype.currentTime = function (val) {
+    currentTime(val) {
 
-        var currentYoutubePlayer = this.currentYoutubePlayer;
+        const currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             if (val != null) {
@@ -297,92 +289,84 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
 
             return currentYoutubePlayer.getCurrentTime() * 1000;
         }
-    };
+    }
+    duration(val) {
 
-    YoutubePlayer.prototype.duration = function (val) {
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
+        const currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             return currentYoutubePlayer.getDuration() * 1000;
         }
         return null;
-    };
+    }
+    pause() {
 
-    YoutubePlayer.prototype.pause = function () {
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
+        const currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             currentYoutubePlayer.pauseVideo();
 
-            var instance = this;
+            const instance = this;
 
             // This needs a delay before the youtube player will report the correct player state
             setTimeout(function () {
                 events.trigger(instance, 'pause');
             }, 200);
         }
-    };
+    }
+    unpause() {
 
-    YoutubePlayer.prototype.unpause = function () {
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
+        const currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             currentYoutubePlayer.playVideo();
 
-            var instance = this;
+            const instance = this;
 
             // This needs a delay before the youtube player will report the correct player state
             setTimeout(function () {
                 events.trigger(instance, 'unpause');
             }, 200);
         }
-    };
+    }
+    paused() {
 
-    YoutubePlayer.prototype.paused = function () {
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
+        const currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             return currentYoutubePlayer.getPlayerState() === 2;
         }
 
         return false;
-    };
-
-    YoutubePlayer.prototype.volume = function (val) {
+    }
+    volume(val) {
         if (val != null) {
             return this.setVolume(val);
         }
 
         return this.getVolume();
-    };
+    }
+    setVolume(val) {
 
-    YoutubePlayer.prototype.setVolume = function (val) {
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
+        const currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             if (val != null) {
                 currentYoutubePlayer.setVolume(val);
             }
         }
-    };
+    }
+    getVolume() {
 
-    YoutubePlayer.prototype.getVolume = function () {
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
+        const currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             return currentYoutubePlayer.getVolume();
         }
-    };
+    }
+    setMute(mute) {
 
-    YoutubePlayer.prototype.setMute = function (mute) {
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
+        const currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (mute) {
             if (currentYoutubePlayer) {
@@ -394,16 +378,15 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
                 currentYoutubePlayer.unMute();
             }
         }
-    };
+    }
+    isMuted() {
 
-    YoutubePlayer.prototype.isMuted = function () {
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
+        const currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             return currentYoutubePlayer.isMuted();
         }
-    };
+    }
+}
 
-    return YoutubePlayer;
-});
+export default YoutubePlayer;
diff --git a/src/scripts/alphanumericshortcuts.js b/src/scripts/alphanumericshortcuts.js
index 2bcf3712b..a69f3bcd4 100644
--- a/src/scripts/alphanumericshortcuts.js
+++ b/src/scripts/alphanumericshortcuts.js
@@ -1,110 +1,111 @@
-define(['dom', 'focusManager'], function (dom, focusManager) {
-    'use strict';
+import dom from 'dom';
+import focusManager from 'focusManager';
 
-    var inputDisplayElement;
-    var currentDisplayText = '';
-    var currentDisplayTextContainer;
+let inputDisplayElement;
+let currentDisplayText = '';
+let currentDisplayTextContainer;
 
-    function onKeyDown(e) {
+function onKeyDown(e) {
 
-        if (e.ctrlKey) {
-            return;
-        }
-        if (e.shiftKey) {
-            return;
-        }
-        if (e.altKey) {
-            return;
-        }
-
-        var key = e.key;
-        var chr = key ? alphanumeric(key) : null;
-
-        if (chr) {
-
-            chr = chr.toString().toUpperCase();
-
-            if (chr.length === 1) {
-                currentDisplayTextContainer = this.options.itemsContainer;
-                onAlphanumericKeyPress(e, chr);
-            }
-        }
+    if (e.ctrlKey) {
+        return;
+    }
+    if (e.shiftKey) {
+        return;
+    }
+    if (e.altKey) {
+        return;
     }
 
-    function alphanumeric(value) {
-        var letterNumber = /^[0-9a-zA-Z]+$/;
-        return value.match(letterNumber);
-    }
+    const key = e.key;
+    let chr = key ? alphanumeric(key) : null;
 
-    function ensureInputDisplayElement() {
-        if (!inputDisplayElement) {
-            inputDisplayElement = document.createElement('div');
-            inputDisplayElement.classList.add('alphanumeric-shortcut');
-            inputDisplayElement.classList.add('hide');
+    if (chr) {
 
-            document.body.appendChild(inputDisplayElement);
+        chr = chr.toString().toUpperCase();
+
+        if (chr.length === 1) {
+            currentDisplayTextContainer = this.options.itemsContainer;
+            onAlphanumericKeyPress(e, chr);
         }
     }
+}
 
-    var alpanumericShortcutTimeout;
-    function clearAlphaNumericShortcutTimeout() {
-        if (alpanumericShortcutTimeout) {
-            clearTimeout(alpanumericShortcutTimeout);
-            alpanumericShortcutTimeout = null;
-        }
-    }
-    function resetAlphaNumericShortcutTimeout() {
-        clearAlphaNumericShortcutTimeout();
-        alpanumericShortcutTimeout = setTimeout(onAlphanumericShortcutTimeout, 2000);
-    }
+function alphanumeric(value) {
+    const letterNumber = /^[0-9a-zA-Z]+$/;
+    return value.match(letterNumber);
+}
 
-    function onAlphanumericKeyPress(e, chr) {
-        if (currentDisplayText.length >= 3) {
-            return;
-        }
-        ensureInputDisplayElement();
-        currentDisplayText += chr;
-        inputDisplayElement.innerHTML = currentDisplayText;
-        inputDisplayElement.classList.remove('hide');
-        resetAlphaNumericShortcutTimeout();
-    }
-
-    function onAlphanumericShortcutTimeout() {
-        var value = currentDisplayText;
-        var container = currentDisplayTextContainer;
-
-        currentDisplayText = '';
-        currentDisplayTextContainer = null;
-        inputDisplayElement.innerHTML = '';
+function ensureInputDisplayElement() {
+    if (!inputDisplayElement) {
+        inputDisplayElement = document.createElement('div');
+        inputDisplayElement.classList.add('alphanumeric-shortcut');
         inputDisplayElement.classList.add('hide');
-        clearAlphaNumericShortcutTimeout();
-        selectByShortcutValue(container, value);
+
+        document.body.appendChild(inputDisplayElement);
+    }
+}
+
+let alpanumericShortcutTimeout;
+function clearAlphaNumericShortcutTimeout() {
+    if (alpanumericShortcutTimeout) {
+        clearTimeout(alpanumericShortcutTimeout);
+        alpanumericShortcutTimeout = null;
+    }
+}
+function resetAlphaNumericShortcutTimeout() {
+    clearAlphaNumericShortcutTimeout();
+    alpanumericShortcutTimeout = setTimeout(onAlphanumericShortcutTimeout, 2000);
+}
+
+function onAlphanumericKeyPress(e, chr) {
+    if (currentDisplayText.length >= 3) {
+        return;
+    }
+    ensureInputDisplayElement();
+    currentDisplayText += chr;
+    inputDisplayElement.innerHTML = currentDisplayText;
+    inputDisplayElement.classList.remove('hide');
+    resetAlphaNumericShortcutTimeout();
+}
+
+function onAlphanumericShortcutTimeout() {
+    const value = currentDisplayText;
+    const container = currentDisplayTextContainer;
+
+    currentDisplayText = '';
+    currentDisplayTextContainer = null;
+    inputDisplayElement.innerHTML = '';
+    inputDisplayElement.classList.add('hide');
+    clearAlphaNumericShortcutTimeout();
+    selectByShortcutValue(container, value);
+}
+
+function selectByShortcutValue(container, value) {
+
+    value = value.toUpperCase();
+
+    let focusElem;
+    if (value === '#') {
+
+        focusElem = container.querySelector('*[data-prefix]');
     }
 
-    function selectByShortcutValue(container, value) {
-
-        value = value.toUpperCase();
-
-        var focusElem;
-        if (value === '#') {
-
-            focusElem = container.querySelector('*[data-prefix]');
-        }
-
-        if (!focusElem) {
-            focusElem = container.querySelector('*[data-prefix^=\'' + value + '\']');
-        }
-
-        if (focusElem) {
-            focusManager.focus(focusElem);
-        }
+    if (!focusElem) {
+        focusElem = container.querySelector('*[data-prefix^=\'' + value + '\']');
     }
 
-    function AlphaNumericShortcuts(options) {
+    if (focusElem) {
+        focusManager.focus(focusElem);
+    }
+}
+
+class AlphaNumericShortcuts {
+    constructor(options) {
 
         this.options = options;
 
-        var keyDownHandler = onKeyDown.bind(this);
+        const keyDownHandler = onKeyDown.bind(this);
 
         dom.addEventListener(window, 'keydown', keyDownHandler, {
             passive: true
@@ -112,10 +113,9 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
 
         this.keyDownHandler = keyDownHandler;
     }
+    destroy() {
 
-    AlphaNumericShortcuts.prototype.destroy = function () {
-
-        var keyDownHandler = this.keyDownHandler;
+        const keyDownHandler = this.keyDownHandler;
 
         if (keyDownHandler) {
             dom.removeEventListener(window, 'keydown', keyDownHandler, {
@@ -124,7 +124,7 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
             this.keyDownHandler = null;
         }
         this.options = null;
-    };
+    }
+}
 
-    return AlphaNumericShortcuts;
-});
+export default AlphaNumericShortcuts;
diff --git a/src/scripts/autoBackdrops.js b/src/scripts/autoBackdrops.js
index 678aa4c33..051204ef1 100644
--- a/src/scripts/autoBackdrops.js
+++ b/src/scripts/autoBackdrops.js
@@ -1,77 +1,78 @@
-define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSettings, libraryMenu) {
-    'use strict';
+import backdrop from 'backdrop';
+import * as userSettings from 'userSettings';
+import libraryMenu from 'libraryMenu';
 
-    var cache = {};
+const cache = {};
 
-    function enabled() {
-        return userSettings.enableBackdrops();
+function enabled() {
+    return userSettings.enableBackdrops();
+}
+
+function getBackdropItemIds(apiClient, userId, types, parentId) {
+    const key = `backdrops2_${userId + (types || '') + (parentId || '')}`;
+    let data = cache[key];
+
+    if (data) {
+        console.debug(`Found backdrop id list in cache. Key: ${key}`);
+        data = JSON.parse(data);
+        return Promise.resolve(data);
     }
 
-    function getBackdropItemIds(apiClient, userId, types, parentId) {
-        var key = `backdrops2_${userId + (types || '') + (parentId || '')}`;
-        var data = cache[key];
-
-        if (data) {
-            console.debug(`Found backdrop id list in cache. Key: ${key}`);
-            data = JSON.parse(data);
-            return Promise.resolve(data);
-        }
-
-        var options = {
-            SortBy: 'IsFavoriteOrLiked,Random',
-            Limit: 20,
-            Recursive: true,
-            IncludeItemTypes: types,
-            ImageTypes: 'Backdrop',
-            ParentId: parentId,
-            EnableTotalRecordCount: false
-        };
-        return apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
-            var images = result.Items.map(function (i) {
-                return {
-                    Id: i.Id,
-                    tag: i.BackdropImageTags[0],
-                    ServerId: i.ServerId
-                };
-            });
-            cache[key] = JSON.stringify(images);
-            return images;
+    const options = {
+        SortBy: 'IsFavoriteOrLiked,Random',
+        Limit: 20,
+        Recursive: true,
+        IncludeItemTypes: types,
+        ImageTypes: 'Backdrop',
+        ParentId: parentId,
+        EnableTotalRecordCount: false
+    };
+    return apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
+        const images = result.Items.map(function (i) {
+            return {
+                Id: i.Id,
+                tag: i.BackdropImageTags[0],
+                ServerId: i.ServerId
+            };
         });
-    }
+        cache[key] = JSON.stringify(images);
+        return images;
+    });
+}
 
-    function showBackdrop(type, parentId) {
-        var apiClient = window.ApiClient;
+function showBackdrop(type, parentId) {
+    const apiClient = window.ApiClient;
 
-        if (apiClient) {
-            getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
-                if (images.length) {
-                    backdrop.setBackdrops(images.map(function (i) {
-                        i.BackdropImageTags = [i.tag];
-                        return i;
-                    }));
-                } else {
-                    backdrop.clearBackdrop();
-                }
-            });
-        }
-    }
-
-    pageClassOn('pageshow', 'page', function () {
-        var page = this;
-
-        if (!page.classList.contains('selfBackdropPage')) {
-            if (page.classList.contains('backdropPage')) {
-                if (enabled()) {
-                    var type = page.getAttribute('data-backdroptype');
-                    var parentId = page.classList.contains('globalBackdropPage') ? '' : libraryMenu.getTopParentId();
-                    showBackdrop(type, parentId);
-                } else {
-                    page.classList.remove('backdropPage');
-                    backdrop.clearBackdrop();
-                }
+    if (apiClient) {
+        getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
+            if (images.length) {
+                backdrop.setBackdrops(images.map(function (i) {
+                    i.BackdropImageTags = [i.tag];
+                    return i;
+                }));
             } else {
                 backdrop.clearBackdrop();
             }
+        });
+    }
+}
+
+pageClassOn('pageshow', 'page', function () {
+    const page = this;
+
+    if (!page.classList.contains('selfBackdropPage')) {
+        if (page.classList.contains('backdropPage')) {
+            if (enabled()) {
+                const type = page.getAttribute('data-backdroptype');
+                const parentId = page.classList.contains('globalBackdropPage') ? '' : libraryMenu.getTopParentId();
+                showBackdrop(type, parentId);
+            } else {
+                page.classList.remove('backdropPage');
+                backdrop.clearBackdrop();
+            }
+        } else {
+            backdrop.clearBackdrop();
         }
-    });
+    }
 });
+