open PDF viewer above the chat webview

src/documentViewer/ipc.ts

@@ -1,25 +1,29 @@
-import { BrowserWindow } from 'electron';
-
 import { handle } from '../ipc/main';
+import { SERVER_DOCUMENT_VIEWER_OPEN_URL } from '../servers/actions';
+import { dispatch, select } from '../store';
 
 export const startDocumentViewerHandler = (): void => {
-  handle('document-viewer/open-window', async (event, url, format, options) => {
-    const validUrl = new URL(url);
-    const allowedProtocols = ['http:', 'https:'];
-    if (!allowedProtocols.includes(validUrl.protocol)) {
-      return;
+  handle(
+    'document-viewer/open-window',
+    async (event, url, _format, _options) => {
+      const validUrl = new URL(url);
+      const allowedProtocols = ['http:', 'https:'];
+      if (!allowedProtocols.includes(validUrl.protocol)) {
+        return;
+      }
+      const server = select(({ servers }) =>
+        servers.find(
+          (s) => new URL(s.url).origin === new URL(event.getURL()).origin
+        )
+      );
+      if (!server) {
+        return;
+      }
+
+      dispatch({
+        type: SERVER_DOCUMENT_VIEWER_OPEN_URL,
+        payload: { server: server.url, documentUrl: url },
+      });
     }
-    const documentViewerWindow = new BrowserWindow({
-      width: 800,
-      height: 600,
-      webPreferences: {
-        session: event.session,
-        plugins: true,
-      },
-    });
-    documentViewerWindow.loadURL(url);
-    documentViewerWindow.on('ready-to-show', () => {
-      documentViewerWindow.show();
-    });
-  });
+  );
 };

src/servers/actions.ts

@@ -4,6 +4,8 @@ export const SERVERS_LOADED = 'servers/loaded';
 export const SERVER_URL_RESOLUTION_REQUESTED =
   'server/url-resolution-requested';
 export const SERVER_URL_RESOLVED = 'server/url-resolved';
+export const SERVER_DOCUMENT_VIEWER_OPEN_URL =
+  'server/document-viewer/open-url';
 
 export type ServersActionTypeToPayloadMap = {
   [SERVERS_LOADED]: {
@@ -12,4 +14,8 @@ export type ServersActionTypeToPayloadMap = {
   };
   [SERVER_URL_RESOLUTION_REQUESTED]: Server['url'];
   [SERVER_URL_RESOLVED]: ServerUrlResolutionResult;
+  [SERVER_DOCUMENT_VIEWER_OPEN_URL]: {
+    server: Server['url'];
+    documentUrl: string;
+  };
 };

src/servers/common.ts

@@ -25,6 +25,7 @@ export type Server = {
   supportedVersionsSource?: 'server' | 'cloud' | 'builtin';
   supportedVersions?: SupportedVersions;
   expirationMessageLastTimeShown?: Date;
+  documentViewerOpenUrl?: string;
 };
 
 export const enum ServerUrlResolutionStatus {

src/servers/preload/documentViewer.ts

@@ -5,6 +5,5 @@ export const openDocumentViewer = (
   format: string,
   options: any
 ): void => {
-  console.log('document-viewer/open-window', url, format, options);
   ipcRenderer.invoke('document-viewer/open-window', url, format, options);
 };

src/servers/reducers.ts

@@ -28,7 +28,7 @@ import {
   WEBVIEW_SIDEBAR_CUSTOM_THEME_CHANGED,
   WEBVIEW_SERVER_SUPPORTED_VERSIONS_SOURCE_UPDATED,
 } from '../ui/actions';
-import { SERVERS_LOADED } from './actions';
+import { SERVERS_LOADED, SERVER_DOCUMENT_VIEWER_OPEN_URL } from './actions';
 import type { Server } from './common';
 
 const ensureUrlFormat = (serverUrl: string | null): string => {
@@ -65,7 +65,8 @@ type ServersActionTypes =
   | ActionOf<typeof WEBVIEW_SERVER_IS_SUPPORTED_VERSION>
   | ActionOf<typeof WEBVIEW_SERVER_VERSION_UPDATED>
   | ActionOf<typeof SUPPORTED_VERSION_DIALOG_DISMISS>
-  | ActionOf<typeof WEBVIEW_SERVER_SUPPORTED_VERSIONS_SOURCE_UPDATED>;
+  | ActionOf<typeof WEBVIEW_SERVER_SUPPORTED_VERSIONS_SOURCE_UPDATED>
+  | ActionOf<typeof SERVER_DOCUMENT_VIEWER_OPEN_URL>;
 
 const upsert = (state: Server[], server: Server): Server[] => {
   const index = state.findIndex(({ url }) => url === server.url);
@@ -238,6 +239,11 @@ export const servers: Reducer<Server[], ServersActionTypes> = (
       return upsert(state, { url, outlookCredentials });
     }
 
+    case SERVER_DOCUMENT_VIEWER_OPEN_URL: {
+      const { server, documentUrl } = action.payload;
+      return upsert(state, { url: server, documentViewerOpenUrl: documentUrl });
+    }
+
     default:
       return state;
   }

src/ui/components/ServersView/DocumentViewer.tsx

@@ -0,0 +1,62 @@
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import React, { useState, useEffect } from 'react';
+
+const DynamicWebview = ({
+  url,
+  isActive,
+  partition,
+  closeDocumentViewer,
+}: {
+  url: string;
+  isActive: boolean;
+  partition: string;
+  closeDocumentViewer: () => void;
+}) => {
+  const [webView, setWebView] = useState<JSX.Element | null>(null);
+
+  useEffect(() => {
+    if (isActive && url) {
+      setWebView(
+        <webview
+          src={url}
+          style={{
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            left: 0,
+            top: 64,
+            right: 0,
+            bottom: 0,
+          }}
+          partition={partition}
+        />
+      );
+    } else {
+      setWebView(null);
+    }
+  }, [url, isActive, partition]);
+
+  return (
+    <>
+      {isActive && (
+        <Box
+          bg='light'
+          width='100%'
+          height='100%'
+          position='absolute'
+          content='center'
+          alignItems='center'
+        >
+          <Box padding={5} display='flex'>
+            <IconButton icon='arrow-back' onClick={closeDocumentViewer} />
+            <h2>PDF Viewer</h2>
+          </Box>
+
+          <div>{webView}</div>
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default DynamicWebview;

src/ui/components/ServersView/ServerPane.tsx

@@ -1,14 +1,16 @@
 import type { FC } from 'react';
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import type { Dispatch } from 'redux';
 
+import { SERVER_DOCUMENT_VIEWER_OPEN_URL } from '../../../servers/actions';
 import type { RootAction } from '../../../store/actions';
 import {
   LOADING_ERROR_VIEW_RELOAD_SERVER_CLICKED,
   WEBVIEW_ATTACHED,
   WEBVIEW_READY,
 } from '../../actions';
+import DocumentViewer from './DocumentViewer';
 import ErrorView from './ErrorView';
 import UnsupportedServer from './UnsupportedServer';
 import { StyledWebView, Wrapper } from './styles';
@@ -20,6 +22,7 @@ type ServerPaneProps = {
   isFailed: boolean;
   isSupported: boolean | undefined;
   title: string | undefined;
+  documentViewerOpenUrl: string | undefined;
 };
 
 export const ServerPane: FC<ServerPaneProps> = ({
@@ -28,9 +31,12 @@ export const ServerPane: FC<ServerPaneProps> = ({
   isSelected,
   isFailed,
   isSupported,
+  documentViewerOpenUrl,
 }) => {
   const dispatch = useDispatch<Dispatch<RootAction>>();
 
+  const [documentViewerActive, setDocumentViewerActive] = useState(false);
+
   const webviewRef =
     useRef<ReturnType<(typeof document)['createElement']>>(null);
 
@@ -137,6 +143,19 @@ export const ServerPane: FC<ServerPaneProps> = ({
     }
   }, [lastPath, serverUrl]);
 
+  useEffect(() => {
+    const webview = webviewRef.current;
+    if (!webview) {
+      return;
+    }
+
+    if (isSelected && documentViewerOpenUrl && documentViewerOpenUrl !== '') {
+      setDocumentViewerActive(true);
+    } else {
+      setDocumentViewerActive(false);
+    }
+  }, [documentViewerOpenUrl, isSelected]);
+
   const handleReload = (): void => {
     dispatch({
       type: LOADING_ERROR_VIEW_RELOAD_SERVER_CLICKED,
@@ -153,8 +172,17 @@ export const ServerPane: FC<ServerPaneProps> = ({
     } else {
       webview?.blur();
     }
+    // setdocumentViewerActive(true);
   }, [isSelected]);
 
+  const closeDocumentViewer = () => {
+    dispatch({
+      type: SERVER_DOCUMENT_VIEWER_OPEN_URL,
+      payload: { server: serverUrl, documentUrl: '' },
+    });
+    setDocumentViewerActive(false);
+  };
+
   return (
     <Wrapper isVisible={isSelected}>
       <StyledWebView
@@ -163,6 +191,12 @@ export const ServerPane: FC<ServerPaneProps> = ({
         partition={`persist:${serverUrl}`}
         {...({ allowpopups: 'allowpopups' } as any)}
       />{' '}
+      <DocumentViewer
+        url={documentViewerOpenUrl || ''}
+        isActive={documentViewerActive}
+        partition={`persist:${serverUrl}`}
+        closeDocumentViewer={closeDocumentViewer}
+      />
       <UnsupportedServer
         isSupported={isSupported}
         instanceDomain={new URL(serverUrl).hostname}

src/ui/components/ServersView/index.tsx

@@ -19,6 +19,7 @@ export const ServersView: FC = () => {
           isFailed={server.failed ?? false}
           isSupported={server.isSupportedVersion}
           title={server.title}
+          documentViewerOpenUrl={server.documentViewerOpenUrl}
         />
       ))}
     </ReparentingContainer>