From 4518c501b41ad051e64921eb3ed030c5149c2c45 Mon Sep 17 00:00:00 2001
From: Aleksandr Lushkin <aleksandr.lushkin@onlyoffice.com>
Date: Mon, 15 Jul 2024 16:40:18 +0200
Subject: [PATCH] Shared: MediaViewer: Lock viewer in LTR besides top panel

---
 packages/shared/components/media-viewer/MediaViewer.styled.ts | 4 ++++
 .../sub-components/DesktopDetails/DesktopDetails.styled.ts    | 1 +
 .../components/media-viewer/sub-components/Viewer/index.tsx   | 2 +-
 .../media-viewer/sub-components/ViewerWrapper/index.tsx       | 2 +-
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/shared/components/media-viewer/MediaViewer.styled.ts b/packages/shared/components/media-viewer/MediaViewer.styled.ts
index 361cf9a453..3a56274c36 100644
--- a/packages/shared/components/media-viewer/MediaViewer.styled.ts
+++ b/packages/shared/components/media-viewer/MediaViewer.styled.ts
@@ -88,6 +88,7 @@ export const StyledButtonScroll = styled.div<StyledButtonScrollProps>`
 `;
 
 export const StyledMobileDetails = styled.div`
+  direction: ${({ theme }) => theme.interfaceDirection};
   z-index: 307;
   position: fixed;
   top: 0;
@@ -112,6 +113,8 @@ export const StyledMobileDetails = styled.div`
     position: fixed;
     inset-inline-start: 21px;
     top: 22px;
+    ${({ theme }) =>
+      theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"};
   }
 
   .mobile-context {
@@ -205,6 +208,7 @@ export const StyledViewerContainer = styled.div<StyledViewerContainerProps>`
     position: fixed;
     top: 13px;
     inset-inline-end: 12px;
+    ${({ theme }) => (theme.interfaceDirection === "rtl" ? `left` : ``)}
     height: 17px;
     &:hover {
       background-color: transparent;
diff --git a/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts b/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts
index 72d398f580..124d0c9e42 100644
--- a/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts
@@ -27,6 +27,7 @@
 import styled from "styled-components";
 
 export const DesktopDetailsContainer = styled.div`
+  direction: ${({ theme }) => theme.interfaceDirection};
   padding-top: 21px;
   height: 64px;
   width: 100%;
diff --git a/packages/shared/components/media-viewer/sub-components/Viewer/index.tsx b/packages/shared/components/media-viewer/sub-components/Viewer/index.tsx
index f45dc6daee..39f7918417 100644
--- a/packages/shared/components/media-viewer/sub-components/Viewer/index.tsx
+++ b/packages/shared/components/media-viewer/sub-components/Viewer/index.tsx
@@ -229,7 +229,7 @@ export const Viewer = (props: ViewerProps) => {
     playlistFile.fileExst === ".tiff" || playlistFile.fileExst === ".tif";
 
   return (
-    <StyledViewerContainer visible={visible}>
+    <StyledViewerContainer dir="ltr" visible={visible}>
       {!isFullscreen && !isMobile && panelVisible && !isPdf && (
         <DesktopDetails
           title={title}
diff --git a/packages/shared/components/media-viewer/sub-components/ViewerWrapper/index.tsx b/packages/shared/components/media-viewer/sub-components/ViewerWrapper/index.tsx
index c45372f5aa..e4eae90df6 100644
--- a/packages/shared/components/media-viewer/sub-components/ViewerWrapper/index.tsx
+++ b/packages/shared/components/media-viewer/sub-components/ViewerWrapper/index.tsx
@@ -99,7 +99,7 @@ const ViewerWrapper = memo(
           directionY="top"
           withBackdrop={false}
           isDefaultMode={false}
-          directionX={isRtl ? "left" : "right"}
+          directionX="right"
           manualY={`${bottom ?? 63}px`}
           manualX={`${right ?? -31}px`}
         >