MediaViewer: Removed dependence on store

packages/client/src/pages/Home/MediaViewer/index.js

@@ -64,6 +64,7 @@ const FilesMediaViewer = (props) => {
     pluginContextMenuItems,
     isOpenMediaViewer,
     someDialogIsOpen,
+    currentDeviceType,
   } = props;
 
   const navigate = useNavigate();
@@ -235,38 +236,39 @@ const FilesMediaViewer = (props) => {
     visible && (
       <MediaViewer
         t={t}
-        userAccess={userAccess}
-        currentFileId={currentMediaFileId}
+        files={files}
+        getIcon={getIcon}
         visible={visible}
         playlist={playlist}
-        playlistPos={currentPostionIndex}
-        onDelete={onDeleteMediaFile}
-        onDownload={onDownloadMediaFile}
-        setBufferSelection={setBufferSelection}
-        archiveRoomsId={archiveRoomsId}
-        files={files}
-        onClickDownload={onClickDownload}
-        onShowInfoPanel={onShowInfoPanel}
-        onClickDelete={onClickDelete}
-        onClickRename={onClickRename}
+        prevMedia={prevMedia}
+        nextMedia={nextMedia}
+        onCopyLink={onCopyLink}
+        userAccess={userAccess}
+        onChangeUrl={onChangeUrl}
+        isPreviewFile={firstLoad}
+        onDuplicate={onDuplicate}
         onMoveAction={onMoveAction}
         onCopyAction={onCopyAction}
-        onDuplicate={onDuplicate}
-        onClickLinkEdit={onClickLinkEdit}
-        onPreviewClick={onPreviewClick}
-        onCopyLink={onCopyLink}
-        onClickDownloadAs={onClickDownloadAs}
         onClose={onMediaViewerClose}
-        getIcon={getIcon}
+        onDelete={onDeleteMediaFile}
+        onClickRename={onClickRename}
+        onClickDelete={onClickDelete}
+        setActiveFiles={setActiveFiles}
+        archiveRoomsId={archiveRoomsId}
+        onPreviewClick={onPreviewClick}
+        onDownload={onDownloadMediaFile}
+        onClickLinkEdit={onClickLinkEdit}
+        onClickDownload={onClickDownload}
+        onShowInfoPanel={onShowInfoPanel}
+        playlistPos={currentPostionIndex}
+        currentFileId={currentMediaFileId}
+        onClickDownloadAs={onClickDownloadAs}
+        currentDeviceType={currentDeviceType}
+        extsImagePreviewed={extsImagePreviewed}
+        setBufferSelection={setBufferSelection}
         onEmptyPlaylistError={onMediaViewerClose}
         deleteDialogVisible={deleteDialogVisible}
-        extsImagePreviewed={extsImagePreviewed}
-        isPreviewFile={firstLoad}
-        onChangeUrl={onChangeUrl}
-        nextMedia={nextMedia}
-        prevMedia={prevMedia}
         pluginContextMenuItems={pluginContextMenuItems}
-        setActiveFiles={setActiveFiles}
       />
     )
   );
@@ -283,7 +285,9 @@ export default inject(
     contextOptionsStore,
     clientLoadingStore,
     pluginStore,
+    auth,
   }) => {
+    const { currentDeviceType } = auth.settingsStore;
     const {
       firstLoad,
 
@@ -414,6 +418,7 @@ export default inject(
       activeFolders,
       setActiveFiles,
       pluginContextMenuItems,
+      currentDeviceType,
     };
   }
 )(withTranslation(["Files", "Translations"])(observer(FilesMediaViewer)));

packages/shared/components/MediaViewer/MediaViewer.types.ts

@@ -1,4 +1,5 @@
 import type { TFile } from "@docspace/shared/api/files/types";
+import type { DeviceType } from "@docspace/shared/enums";
 
 export type ContextMenuAction = (file: TFile, t: TranslationType) => void;
 
@@ -67,6 +68,7 @@ export interface MediaViewerProps {
   playlist: PlaylistType[];
   playlistPos: number;
 
+  currentDeviceType?: DeviceType;
   deleteDialogVisible?: boolean;
   isPreviewFile: boolean;
   archiveRoomsId?: number;

packages/shared/components/MediaViewer/index.tsx

@@ -37,6 +37,7 @@ function MediaViewer(props: MediaViewerProps): JSX.Element | undefined {
     extsImagePreviewed,
     deleteDialogVisible,
     pluginContextMenuItems,
+    currentDeviceType,
 
     t,
     getIcon,
@@ -420,6 +421,7 @@ function MediaViewer(props: MediaViewerProps): JSX.Element | undefined {
       userAccess={userAccess}
       playlistPos={playlistPos}
       isPreviewFile={isPreviewFile}
+      currentDeviceType={currentDeviceType}
       onClose={onClose}
       onPrevClick={prevMedia}
       onNextClick={nextMedia}

packages/shared/components/MediaViewer/sub-components/Viewer/Viewer.props.ts

@@ -1,6 +1,6 @@
 import type { TFile } from "@docspace/shared/api/files/types";
 import type { ContextMenuModel } from "@docspace/shared/components/context-menu";
-
+import type { DeviceType } from "@docspace/shared/enums";
 import { getCustomToolbar } from "../../helpers/getCustomToolbar";
 import type { PlaylistType } from "../../MediaViewer.types";
 
@@ -22,6 +22,9 @@ interface ViewerProps {
   toolbar: ReturnType<typeof getCustomToolbar>;
   playlistPos: number;
   isPreviewFile: boolean;
+
+  currentDeviceType?: DeviceType;
+
   onMaskClick?: VoidFunction;
   onNextClick?: VoidFunction;
   onPrevClick?: VoidFunction;
@@ -33,8 +36,6 @@ interface ViewerProps {
     bottom?: string,
   ) => JSX.Element;
   onSetSelectionFile: VoidFunction;
-
-  currentDeviceType?: string;
 }
 
 export default ViewerProps;

packages/shared/components/MediaViewer/sub-components/Viewer/index.tsx

@@ -1,4 +1,3 @@
-import { inject, observer } from "mobx-react";
 import React, {
   useRef,
   useState,
@@ -311,10 +310,4 @@ function Viewer(props: ViewerProps) {
   );
 }
 
-// TODO: add type
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default inject<any>(({ auth }) => {
-  const { currentDeviceType } = auth.settingsStore;
-
-  return { currentDeviceType };
-})(observer(Viewer));
+export default Viewer;

packages/shared/components/MediaViewer/sub-components/ViewerWrapper/ViewerWrapper.props.ts

@@ -1,4 +1,5 @@
 import type { TFile } from "@docspace/shared/api/files/types";
+import type { DeviceType } from "@docspace/shared/enums";
 import type { ContextMenuModel } from "@docspace/shared/components/context-menu";
 import type { PlaylistType } from "../../MediaViewer.types";
 
@@ -10,6 +11,7 @@ interface ViewerWrapperProps {
   playlistPos: number;
   userAccess: boolean;
   playlist: PlaylistType[];
+  currentDeviceType?: DeviceType;
 
   isPdf: boolean;
   isImage: boolean;

packages/shared/components/MediaViewer/sub-components/ViewerWrapper/index.tsx

@@ -32,6 +32,7 @@ function ViewerWrapper(props: ViewerWrapperProps) {
     headerIcon,
     playlistPos,
     isPreviewFile,
+    currentDeviceType,
 
     onClose,
     onNextClick,
@@ -149,6 +150,7 @@ function ViewerWrapper(props: ViewerWrapperProps) {
       targetFile={targetFile}
       playlistPos={playlistPos}
       isPreviewFile={isPreviewFile}
+      currentDeviceType={currentDeviceType}
       onMaskClick={onClose}
       onNextClick={onNextClick}
       onPrevClick={onPrevClick}