From 8488f48f99027b2682735d236726e53f6816c023 Mon Sep 17 00:00:00 2001
From: Hadi Charara <hadi.charara@protonmail.com>
Date: Tue, 5 Jul 2022 19:58:02 -0400
Subject: [PATCH] Fixed video player

---
 src/assets/css/videoosd.scss                |  4 ----
 src/components/actionSheet/actionSheet.scss |  3 +--
 src/elements/emby-slider/emby-slider.js     |  7 +++----
 src/scripts/globalize.js                    | 13 ++++++++++++-
 src/styles/rtl.scss                         |  1 +
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/assets/css/videoosd.scss b/src/assets/css/videoosd.scss
index a37a11849d..d6b0090f79 100644
--- a/src/assets/css/videoosd.scss
+++ b/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 {
diff --git a/src/components/actionSheet/actionSheet.scss b/src/components/actionSheet/actionSheet.scss
index 7c1da7ad18..0b18ca3afa 100644
--- a/src/components/actionSheet/actionSheet.scss
+++ b/src/components/actionSheet/actionSheet.scss
@@ -64,8 +64,7 @@
     display: flex;
     justify-content: flex-end;
     flex-shrink: 0;
-    margin-left: 5em;
-    margin-right: 0.5em;
+    margin-inline: 5em 0.5em;
 }
 
 .actionSheetScroller {
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 63cf524d98..3dc1bc4968 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/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 datetime from '../../scripts/datetime';
+import globalize from '../../scripts/globalize';
 
 /* 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);
diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js
index 493257bfea..5e1122a9c5 100644
--- a/src/scripts/globalize.js
+++ b/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 */
diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss
index 68719e0ad2..4e691719ec 100644
--- a/src/styles/rtl.scss
+++ b/src/styles/rtl.scss
@@ -12,6 +12,7 @@
 .shopping_cart,
 .vpn_key,
 .volume_up,
+.volume_off,
 .message {
     [dir='rtl'] & {
         transform: scale(-1, 1);