Fixed video player

src/assets/css/videoosd.scss

@@ -146,10 +146,6 @@
     display: -webkit-flex;
     align-items: center;
     -webkit-box-align: center;
-
-    [dir="rtl"] & {
-        flex-direction: row-reverse;
-    }
 }
 
 .volumeButtons {

src/components/actionSheet/actionSheet.scss

@@ -64,8 +64,7 @@
     display: flex;
     justify-content: flex-end;
     flex-shrink: 0;
-    margin-left: 5em;
+    margin-inline: 5em 0.5em;
-    margin-right: 0.5em;
 }
 
 .actionSheetScroller {

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

@@ -5,8 +5,7 @@ import keyboardnavigation from '../../scripts/keyboardNavigation';
 import './emby-slider.scss';
 import 'webcomponents.js/webcomponents-lite';
 import '../emby-input/emby-input';
-import { getCurrentDateTimeLocale, getIsRTL } from '../../scripts/globalize';
+import globalize from '../../scripts/globalize';
-import datetime from '../../scripts/datetime';
 
 /* eslint-disable indent */
 
@@ -33,7 +32,7 @@ import datetime from '../../scripts/datetime';
         const rect = range.sliderBubbleTrack.getBoundingClientRect();
 
         let fraction = (clientX - rect.left) / rect.width;
-        if (getIsRTL())
+        if (globalize.getElementIsRTL(range))
             fraction = (rect.right - clientX) / rect.width;
 
         // Snap to step
@@ -115,7 +114,7 @@ import datetime from '../../scripts/datetime';
             const bubbleRect = bubble.getBoundingClientRect();
 
             let bubblePos = bubbleTrackRect.width * value / 100;
-            if (getIsRTL()) {
+            if (globalize.getElementIsRTL(range)) {
                 bubblePos = bubbleTrackRect.width - bubblePos;
             }
             bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);

src/scripts/globalize.js

@@ -43,6 +43,16 @@ import { currentSettings as userSettings } from './settings/userSettings';
         return isRTL;
     }
 
+    export function getElementIsRTL(element) {
+        let elementIsRTL = false;
+        if (window.getComputedStyle) { // all browsers
+            elementIsRTL = window.getComputedStyle(element, null).getPropertyValue('direction') == 'rtl';
+        } else {
+            elementIsRTL = element.currentStyle.direction == 'rtl'; // IE5-8
+        }
+        return elementIsRTL;
+    }
+
     export function updateCurrentCulture() {
         let culture;
         try {
@@ -271,7 +281,8 @@ export default {
     getCurrentDateTimeLocale,
     register,
     updateCurrentCulture,
-    getIsRTL
+    getIsRTL,
+    getElementIsRTL
 };
 
 /* eslint-enable indent */

src/styles/rtl.scss

@@ -12,6 +12,7 @@
 .shopping_cart,
 .vpn_key,
 .volume_up,
+.volume_off,
 .message {
     [dir='rtl'] & {
         transform: scale(-1, 1);