Deployed music player fixes

src/components/actionSheet/actionSheet.scss

@@ -100,7 +100,8 @@
 }
 
 .actionsheetMenuItemIcon {
-    margin: 0 0.85em 0 0.45em !important;
+    margin-block: 0 !important;
+    margin-inline: 0.45em 0.85em !important;
     padding: 0 !important;
 }
 
@@ -111,5 +112,5 @@
 .btnCloseActionSheet {
     position: fixed;
     top: 0.75em;
-    left: 0.5em;
+    inset-inline-start: 0.5em;
 }

src/components/listview/listview.scss

@@ -75,7 +75,7 @@
 }
 
 .listViewDragHandle {
-    margin-left: -0.25em !important;
+    margin-inline-start: -0.25em !important;
     touch-action: none;
 }
 

src/components/nowPlayingBar/nowPlayingBar.js

@@ -47,7 +47,7 @@ import { appRouter } from '../appRouter';
         html += '<div class="nowPlayingBar hide nowPlayingBar-hidden">';
 
         html += '<div class="nowPlayingBarTop">';
-        html += '<div class="nowPlayingBarPositionContainer sliderContainer">';
+        html += '<div class="nowPlayingBarPositionContainer sliderContainer" dir="ltr">';
         html += '<input type="range" is="emby-slider" pin step=".01" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarPositionSlider" data-slider-keep-progress="true"/>';
         html += '</div>';
 
@@ -57,7 +57,7 @@ import { appRouter } from '../appRouter';
         html += '</div>';
 
         // The onclicks are needed due to the return false above
-        html += '<div class="nowPlayingBarCenter">';
+        html += '<div class="nowPlayingBarCenter" dir="ltr">';
 
         html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><span class="material-icons skip_previous" aria-hidden="true"></span></button>';
 

src/components/nowPlayingBar/nowPlayingBar.scss

@@ -54,11 +54,10 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     vertical-align: middle;
-    text-align: left;
+    text-align: start;
     flex-grow: 1;
     font-size: 92%;
-    margin-right: 1em;
+    margin-inline: 0.5em 1em;
-    margin-left: 0.5em;
 }
 
 .nowPlayingBarCenter {
@@ -92,7 +91,8 @@
 
 .nowPlayingBarRight {
     position: relative;
-    margin: 0 0.5em 0 auto;
+    margin-block: 0;
+    margin-inline: auto 0.5em;
 
     /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
     z-index: 2;
@@ -110,7 +110,7 @@
 }
 
 .nowPlayingBarVolumeSliderContainer {
-    margin-right: 2em;
+    margin-inline-end: 2em;
 }
 
 .nowPlayingBarUserDataButtons {

src/components/remotecontrol/remotecontrol.scss

@@ -51,6 +51,10 @@
 
 .nowPlayingButtonsContainer {
     display: flex;
+
+    [dir="rtl"] & {
+        flex-direction: row-reverse;
+    }
 }
 
 .infoContainer,
@@ -94,7 +98,7 @@
 
 .nowPlayingPageImageContainer {
     width: 16%;
-    margin-right: 1em;
+    margin-inline-end: 1em;
     position: relative;
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
@@ -265,7 +269,7 @@
 
 @media all and (min-width: 80em) {
     .nowPlayingPageImageContainer {
-        margin-right: 0.75em;
+        margin-inline-end: 0.75em;
     }
 }
 
@@ -362,23 +366,23 @@
 
     .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
         padding-top: 0;
-        padding-right: 0;
+        padding-inline-end: 0;
-        margin-right: 0;
+        margin-inline-end: 0;
-        float: right;
+        float: inline-end;
         border-radius: 0;
     }
 
     .nowPlayingInfoButtons .btnRepeat,
     .nowPlayingInfoButtons .btnRewind {
-        margin-left: 0;
+        margin-inline-start: 0;
-        margin-right: auto;
+        margin-inline-end: auto;
         font-size: smaller;
     }
 
     .nowPlayingInfoButtons .btnShuffleQueue,
     .nowPlayingInfoButtons .btnFastForward {
-        margin-left: auto;
+        margin-inline-start: auto;
-        margin-right: 0;
+        margin-inline-end: 0;
         font-size: smaller;
     }
 
@@ -410,7 +414,7 @@
 
     .nowPlayingButtonsContainer {
         display: flex;
-        flex-direction: column;
+        flex-direction: column !important;
     }
 }
 

src/controllers/playback/queue/index.html

@@ -18,7 +18,7 @@
 
                 </div>
 
-                <div class="sliderContainer flex">
+                <div class="sliderContainer flex" dir="ltr">
                     <div class="positionTime"></div>
                         <div class="nowPlayingPositionSliderContainer">
                             <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
@@ -28,7 +28,7 @@
 
                 <div class="nowPlayingButtonsContainer focuscontainer-x justify-content-space-between">
 
-                    <div class="nowPlayingInfoButtons">
+                    <div class="nowPlayingInfoButtons" dir="ltr">
 
                         <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${Repeat}"
                             data-command="SetRepeatMode">