Shared: MediaViewer: Lock MediaViewer in LTR except details block

packages/shared/components/media-viewer/MediaViewer.styled.ts

@@ -62,6 +62,7 @@ export const ControlBtn = styled.div`
 ControlBtn.defaultProps = { theme: Base };
 
 export const StyledDropDown = styled(DropDown)`
+  direction: ${({ theme }) => theme.interfaceDirection};
   background: #333;
 `;
 
@@ -88,6 +89,7 @@ export const StyledButtonScroll = styled.div<StyledButtonScrollProps>`
 `;
 
 export const StyledMobileDetails = styled.div`
+  direction: ${({ theme }) => theme.interfaceDirection};
   z-index: 307;
   position: fixed;
   top: 0;
@@ -111,13 +113,15 @@ export const StyledMobileDetails = styled.div`
 
   .mobile-close {
     position: fixed;
-    left: 21px;
+    inset-inline-start: 21px;
     top: 22px;
+    ${({ theme }) =>
+      theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"};
   }
 
   .mobile-context {
     position: fixed;
-    right: 22px;
+    inset-inline-end: 22px;
     top: 22px;
   }
 
@@ -226,14 +230,7 @@ export const StyledViewerContainer = styled.div<StyledViewerContainerProps>`
   .mediaPlayerClose {
     position: fixed;
     top: 13px;
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            left: 12px;
-          `
-        : css`
-            right: 12px;
-          `}
+    inset-inline-end: 12px;
     height: 17px;
     &:hover {
       background-color: transparent;

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%;

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}