Initial support for RTL layouts

src/elements/emby-scrollbuttons/emby-scrollbuttons.scss

@@ -10,6 +10,11 @@
     z-index: 1;
     color: #fff;
     display: flex;
+
+    [dir='rtl'] & {
+        left: 0;
+        right: unset;
+    }
 }
 
 .emby-scrollbuttons-button > .material-icons {

src/elements/emby-select/emby-select.scss

@@ -18,6 +18,10 @@
     outline: none !important;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     width: 100%;
+
+    [dir="rtl"] & {
+        padding: 0.5em 0.5em 0.5em 1.9em;
+    }
 }
 
 .emby-select[disabled] {
@@ -36,6 +40,10 @@
 .selectContainer-inline > .emby-select {
     padding: 0.3em 1.9em 0.3em 0.5em;
     font-size: inherit;
+
+    [dir="rtl"] & {
+        padding: 0.3em 0.5em 0.3em 1.9em;
+    }
 }
 
 .selectContainer-inline > .emby-select[disabled] {
@@ -96,6 +104,11 @@
     top: 0.2em;
     color: inherit;
     pointer-events: none;
+
+    [dir="rtl"] & {
+        right: unset;
+        left: 0.3em;
+    }
 }
 
 .selectContainer-inline > .selectArrowContainer {

src/elements/emby-slider/emby-slider.js

@@ -5,6 +5,7 @@ import keyboardnavigation from '../../scripts/keyboardNavigation';
 import './emby-slider.scss';
 import 'webcomponents.js/webcomponents-lite';
 import '../emby-input/emby-input';
+import { getIsRTL } from '../../scripts/globalize';
 
 /* eslint-disable indent */
 
@@ -32,6 +33,10 @@ import '../emby-input/emby-input';
 
         let fraction = (clientX - rect.left) / rect.width;
 
+        if (getIsRTL()) {
+            fraction = (rect.width - (clientX - rect.left)) / rect.width;
+        }
+
         // Snap to step
         const valueRange = range.max - range.min;
         if (range.step !== 'any' && valueRange !== 0) {
@@ -111,6 +116,9 @@ import '../emby-input/emby-input';
             const bubbleRect = bubble.getBoundingClientRect();
 
             let bubblePos = bubbleTrackRect.width * value / 100;
+            if (getIsRTL()) {
+                bubblePos = bubbleTrackRect.width - bubblePos;
+            }
             bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
 
             bubble.style.left = bubblePos + 'px';
@@ -411,7 +419,11 @@ import '../emby-input/emby-input';
 
     function setRange(elem, startPercent, endPercent) {
         const style = elem.style;
-        style.left = Math.max(startPercent, 0) + '%';
+        if (getIsRTL()) {
+            style.right = Math.max(startPercent, 0) + '%';
+        } else {
+            style.left = Math.max(startPercent, 0) + '%';
+        }
 
         const widthPercent = endPercent - startPercent;
         style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';

src/elements/emby-slider/emby-slider.scss

@@ -154,6 +154,12 @@
     left: 0;
     position: absolute;
     padding: 0 0.54em; /* half of slider thumb size */
+
+    [dir="rtl"] & {
+        left: unset;
+        right: 0;
+        padding: 0 0 0 0.54em;
+    }
 }
 
 .mdl-slider-background-flex {
@@ -167,6 +173,11 @@
     overflow: hidden;
     border: 0;
     padding: 0;
+
+    [dir="rtl"] & {
+        left: unset;
+        right: 0;
+    }
 }
 
 .mdl-slider-background-flex-inner {
@@ -182,6 +193,11 @@
     top: 0;
     bottom: 0;
     background-color: #00a4dc;
+
+    [dir="rtl"] & {
+        left: unset;
+        right: 0;
+    }
 }
 
 .mdl-slider-background-lower-clear {
@@ -212,6 +228,10 @@
     left: 0;
     right: 0;
     margin: 0 0.54em; /* half of slider thumb size */
+
+    [dir="rtl"] & {
+        margin: 0 0 0 0.54em;
+    }
 }
 
 .sliderBubble {