move remote control to folder and fix sortable dependency

src/components/remotecontrol/remotecontrol.css

@@ -0,0 +1,210 @@
+.nowPlayingInfoContainer {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
+    flex-direction: row
+}
+
+.nowPlayingPageTitle {
+    margin: 0 0 .5em .5em
+}
+
+.nowPlayingPositionSliderContainer {
+    margin: .7em 0 .7em 1em
+}
+
+.nowPlayingInfoButtons {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap
+}
+
+.nowPlayingInfoControls,
+.nowPlayingTime {
+    display: -webkit-box;
+    display: -webkit-flex
+}
+
+.nowPlayingPageImageContainer {
+    width: 20%;
+    margin-right: .25em;
+    position: relative;
+    -webkit-flex-shrink: 0;
+    flex-shrink: 0
+}
+
+@media all and (min-width:50em) {
+    .nowPlayingPageImageContainer {
+        width: 16%
+    }
+}
+
+.nowPlayingInfoControls {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center
+}
+
+.nowPlayingPageImage {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    -webkit-box-shadow: 0 0 1.9vh #000;
+    box-shadow: 0 0 1.9vh #000;
+    border: .1em solid #222;
+    user-drag: none;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none
+}
+
+@media all and (orientation:portrait) and (max-width:50em) {
+    .nowPlayingInfoContainer {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        -webkit-flex-direction: column !important;
+        flex-direction: column !important;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center
+    }
+
+    .nowPlayingPageTitle {
+        text-align: center;
+        margin: .5em 0 .75em
+    }
+
+    .nowPlayingPositionSliderContainer {
+        margin: .7em 1em
+    }
+
+    .nowPlayingInfoButtons {
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center
+    }
+
+    .nowPlayingPageImageContainer {
+        width: auto;
+        margin-right: 0
+    }
+
+    .nowPlayingInfoControls {
+        margin-top: 1em;
+        max-width: 100%
+    }
+
+    .nowPlayingPageImage {
+        width: auto;
+        height: 36vh
+    }
+}
+
+@media all and (orientation:portrait) and (max-width:40em) {
+    .nowPlayingPageImage {
+        height: 30vh
+    }
+}
+
+.nowPlayingTime {
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    margin: 0 1em
+}
+
+.nowPlayingSecondaryButtons {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center
+}
+
+@media all and (min-width:50em) {
+    .nowPlayingSecondaryButtons {
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end
+    }
+}
+
+@media all and (min-width:80em) {
+    .nowPlayingPageImageContainer {
+        margin-right: .75em
+    }
+}
+
+.nowPlayingNavButtonContainer {
+    width: 30em
+}
+
+.smallBackdropPosterItem .cardOverlayInner>div {
+    white-space: nowrap;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    overflow: hidden
+}
+
+.playlistIndexIndicatorImage {
+    -webkit-background-size: initial initial !important;
+    background-size: initial !important;
+    background-image: url(../../img/equalizer.gif) !important;
+}
+
+.hideVideoButtons .videoButton {
+    display: none
+}
+
+.nowPlayingVolumeSliderContainer {
+    width: 9em
+}
+
+@media all and (max-width:50em) {
+    .nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
+        display: none !important
+    }
+}
+
+@media all and (max-width:47em) {
+    .nowPlayingInfoButtons .repeatToggleButton {
+        display: none !important
+    }
+}
+
+@media all and (max-width:34em) {
+    .nowPlayingInfoButtons .btnNowPlayingFastForward,
+    .nowPlayingInfoButtons .btnNowPlayingRewind,
+    .nowPlayingInfoButtons .playlist .listItemMediaInfo {
+        display: none !important
+    }
+}

src/components/remotecontrol/remotecontrol.js

@@ -1,4 +1,4 @@
-define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageLoader", "playbackManager", "nowPlayingHelper", "events", "connectionManager", "apphost", "globalize", "cardStyle", "emby-itemscontainer", "css!css/nowplaying.css", "emby-ratingbutton"], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize) {
+define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageLoader", "playbackManager", "nowPlayingHelper", "events", "connectionManager", "apphost", "globalize", "cardStyle", "emby-itemscontainer", "css!./remotecontrol.css", "emby-ratingbutton"], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize) {
     "use strict";
 
     function showAudioMenu(context, player, button, item) {