Fixed all reported issues

src/components/metadataEditor/metadataEditor.template.html

@@ -194,7 +194,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Genres}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginLeft" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginStart" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listGenres"></div>
@@ -203,7 +203,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${People}
                 </h2>
-                <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson marginLeft" title="${Add}">
+                <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson marginStart" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div id="peopleList" class="paperList">
@@ -213,7 +213,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Studios}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginLeft" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginStart" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listStudios"></div>
@@ -222,7 +222,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Tags}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginLeft" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginStart" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listTags"></div>

src/components/metadataEditor/style.scss

@@ -8,7 +8,7 @@
     }
 }
 
-.marginLeft {
+.metadataFormFields .marginStart {
     [dir="ltr"] & {
         margin-left: 1em;
     }

src/elements/emby-scrollbuttons/emby-scrollbuttons.js

@@ -40,13 +40,13 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
     }
 
     function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) {
-        // TODO: Check if hack is really needed
-        // hack alert add twenty for rounding errors
         let localeAwarePos = scrollPos;
-        if (globalize.getElementIsRTL(scrollButtons)) {
+        if (globalize.getIsElementRTL(scrollButtons)) {
             localeAwarePos *= -1;
         }
 
+        // TODO: Check if hack is really needed
+        // hack alert add twenty for rounding errors
         if (scrollWidth <= scrollSize + 20) {
             scrollButtons.scrollButtonsLeft.classList.add('hide');
             scrollButtons.scrollButtonsRight.classList.add('hide');

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

@@ -32,7 +32,7 @@ import globalize from '../../scripts/globalize';
         const rect = range.sliderBubbleTrack.getBoundingClientRect();
 
         let fraction = (clientX - rect.left) / rect.width;
-        if (globalize.getElementIsRTL(range))
+        if (globalize.getIsElementRTL(range))
             fraction = (rect.right - clientX) / rect.width;
 
         // Snap to step
@@ -121,7 +121,7 @@ import globalize from '../../scripts/globalize';
             const bubbleRect = bubble.getBoundingClientRect();
 
             let bubblePos = bubbleTrackRect.width * value / 100;
-            if (globalize.getElementIsRTL(range)) {
+            if (globalize.getIsElementRTL(range)) {
                 bubblePos = bubbleTrackRect.width - bubblePos;
             }
             bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);

src/libraries/navdrawer/navdrawer.js

@@ -206,7 +206,10 @@ class NavDrawer {
 
         options.target.classList.add('touch-menu-la');
         options.target.style.width = options.width + 'px';
-        options.target.style.insetInlineStart = -options.width + 'px';
+        if (globalize.getIsRTL())
+            options.target.style.right = -options.width + 'px';
+        else
+            options.target.style.left = -options.width + 'px';
 
         if (!options.disableMask) {
             this.mask = document.createElement('div');

src/scripts/globalize.js

@@ -3,6 +3,11 @@ import isEmpty from 'lodash-es/isEmpty';
 
 import { currentSettings as userSettings } from './settings/userSettings';
 
+const Direction = {
+    rtl: "rtl",
+    ltr: "ltr"
+};
+
 /* eslint-disable indent */
 
     const fallbackCulture = 'en-us';
@@ -46,6 +51,7 @@ import { currentSettings as userSettings } from './settings/userSettings';
 
     function checkAndProcessDir(culture) {
         isRTL = false;
+        console.log(culture);
         for (const lang of RTL_LANGS) {
             if (culture.includes(lang)) {
                 isRTL = true;
@@ -53,24 +59,17 @@ import { currentSettings as userSettings } from './settings/userSettings';
             }
         }
 
-        if (isRTL)
+        setDocumentDirection(isRTL ? Direction.rtl : Direction.ltr);
-            processIsRTL();
-        else
-            processIsLTR();
     }
 
-    function processIsRTL() {
+    function setDocumentDirection(direction) {
-        document.getElementsByTagName('body')[0].setAttribute('dir', 'rtl');
+        document.getElementsByTagName('body')[0].setAttribute('dir', direction);
-        document.getElementsByTagName('html')[0].setAttribute('dir', 'rtl');
+        document.getElementsByTagName('html')[0].setAttribute('dir', direction);
-        import('../styles/rtl.scss');
+        if (direction === Direction.rtl)
+            import('../styles/rtl.scss');
     }
 
-    function processIsLTR() {
+    export function getIsElementRTL(element) {
-        document.getElementsByTagName('body')[0].setAttribute('dir', 'ltr');
-        document.getElementsByTagName('html')[0].setAttribute('dir', 'ltr');
-    }
-
-    export function getElementIsRTL(element) {
         if (window.getComputedStyle) { // all browsers
             return window.getComputedStyle(element, null).getPropertyValue('direction') == 'rtl';
         }
@@ -299,7 +298,7 @@ export default {
     register,
     updateCurrentCulture,
     getIsRTL,
-    getElementIsRTL
+    getIsElementRTL
 };
 
 /* eslint-enable indent */