Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

📁 added drive file preview support #2711

Merged
merged 1 commit into from
Feb 1, 2023
Merged

📁 added drive file preview support #2711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 54 additions & 2 deletions twake/frontend/src/app/features/viewer/api/viewer-api-client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { ChannelType } from 'app/features/channels/types/channel';
import { Thumbnail } from 'app/features/drive/types';
import { MessageFileType, MessageWithReplies } from 'app/features/messages/types/message';
import { UserType } from 'app/features/users/types/user';
import Api from '../../global/framework/api-service';
import { TwakeService } from '../../global/framework/registry-decorator-service';

const PREFIX = '/internal/services/messages/v1/companies';
const MESSAGES_PREFIX = '/internal/services/messages/v1/companies';
const FILES_PREFIX = '/internal/services/files/v1/companies';

export type MessageFileDetails = MessageFileType & {
user: UserType;
Expand All @@ -22,12 +24,62 @@ export type MessageFileDetails = MessageFileType & {
};
};

export type DrivePublicFile = {
company_id: string;
id: string;
user_id: string;
application_id: null | string;
updated_at: number;
created_at: number;
metadata: null | {
name?: string;
mime?: string;
thumbnails_status?: 'done' | 'error' | 'waiting';
external_id?: string;
size?: number;
};
thumbnails: Thumbnail[];
upload_data: null | {
size: number;
chunks: number;
};
};

export type DriveFileDetails = DrivePublicFile & {
navigation: {
previous: null | {
message_id: string;
id: string;
};
next: null | {
message_id: string;
id: string;
};
};
message?: null | any;
user?: null | any;
};

@TwakeService('ViewerAPIClientService')
class ViewerAPIClient {
async getMessageFile(companyId: string, messageId: string, msgFileId: string) {
const route = `${PREFIX}/${companyId}/messages/${messageId}/files/${msgFileId}`;
const route = `${MESSAGES_PREFIX}/${companyId}/messages/${messageId}/files/${msgFileId}`;
return await Api.get<{ resource: MessageFileDetails }>(route);
}

async getPublicFile(companyId: string, fileId: string): Promise<{ resource: DriveFileDetails }> {
return await Api.get<{ resource: DrivePublicFile }>(
`${FILES_PREFIX}/${companyId}/files/${fileId}`,
).then(({ resource }) => ({
resource: {
...resource,
navigation: {
next: null,
previous: null,
},
},
}));
}
}

export default new ViewerAPIClient();
54 changes: 39 additions & 15 deletions twake/frontend/src/app/features/viewer/hooks/use-viewer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
import { MessageFileType } from 'app/features/messages/types/message';
import ViewerAPIClient, { MessageFileDetails } from '../api/viewer-api-client';
import ViewerAPIClient, { DriveFileDetails, MessageFileDetails } from '../api/viewer-api-client';
import { atom, useRecoilState } from 'recoil';
import FileUploadApiClient from 'app/features/files/api/file-upload-api-client';
import FileUploadService from 'app/features/files/services/file-upload-service';
import { LoadingState } from 'app/features/global/state/atoms/Loading';
import UserAPIClient from 'app/features/users/api/user-api-client';

export const FileViewerState = atom<{
file: null | { company_id?: string; message_id?: string; id?: string };
details?: MessageFileDetails;
details?: MessageFileDetails | DriveFileDetails;
loading: boolean;
}>({
key: 'FileViewerState',
Expand Down Expand Up @@ -43,16 +44,37 @@ export const useFileViewer = () => {
...status,
loading: true,
});
const details = await ViewerAPIClient.getMessageFile(
status.file.company_id || '',
status.file.message_id || '',
status.file.id || '',
);
setStatus({
...status,
details: details.resource || (details as unknown as MessageFileDetails),
loading: false,
});

if (status.file.message_id) {
const details = await ViewerAPIClient.getMessageFile(
status.file.company_id || '',
status.file.message_id || '',
status.file.id || '',
);

setStatus({
...status,
details: details.resource || (details as unknown as MessageFileDetails),
loading: false,
});
} else {
const details = await ViewerAPIClient.getPublicFile(
status.file.company_id || '',
status.file.id || '',
);

const user = (await UserAPIClient.list([details.resource.user_id])).pop();

setStatus({
...status,
details: {
...status.file,
...details.resource,
user
},
loading: false,
});
}
}
},
[status.file?.id],
Expand Down Expand Up @@ -103,13 +125,15 @@ export const useViewerDisplayData = () => {
const extension = name?.split('.').pop();

const download = FileUploadService.getDownloadRoute({
companyId: status?.details?.metadata?.external_id?.company_id,
fileId: status?.details?.metadata?.external_id?.id,
companyId:
(status?.details as MessageFileDetails)?.metadata?.external_id?.company_id ||
status.file?.company_id,
fileId: (status?.details as MessageFileDetails)?.metadata?.external_id?.id || status.file?.id,
});

const type = FileUploadApiClient.mimeToType(status?.details?.metadata?.mime || '', extension);

const id = status?.details?.metadata?.external_id?.id;
const id = (status?.details as MessageFileDetails)?.metadata?.external_id?.id || status.file?.id;

return { download, type, name, id };
};
2 changes: 2 additions & 0 deletions twake/frontend/src/app/views/applications/drive/item-row/document-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ export const DocumentRow = ({
const preview = () => {
open({
...item.last_version_cache,
company_id: item.company_id,
id: metadata.external_id,
metadata,
});
};
Expand Down
85 changes: 48 additions & 37 deletions twake/frontend/src/app/views/applications/viewer/viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { formatSize } from 'app/features/global/utils/format-file-size';
import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
import currentUserService from 'app/features/users/services/current-user-service';
import { UserType } from 'app/features/users/types/user';
import { DrivePublicFile } from 'app/features/viewer/api/viewer-api-client';
import {
useFileViewer,
useViewerDataLoading,
Expand Down Expand Up @@ -143,7 +144,7 @@ const Footer = () => {

return (
<>
{status.details?.message.text && (
{status.details?.message && status.details?.message?.text && (
<div className="z-10 p-5 pb-0 bg-black w-full flex text-white">
<Text.Base noColor className="block text-white">
{status.details?.message.text.substring(0, 500)}
Expand All @@ -163,8 +164,15 @@ const Footer = () => {
</Text.Base>
<Text.Info className="whitespace-nowrap">
{currentUserService.getFullName(user)} •{' '}
{formatDate(status.details?.message?.created_at)} • {extension?.toLocaleUpperCase()},{' '}
{formatSize(status.details?.metadata?.size)}
{formatDate(
(status.details as DrivePublicFile)?.created_at ||
status.details?.message?.created_at,
)}{' '}
• {extension?.toLocaleUpperCase()},{' '}
{formatSize(
status.details?.metadata?.size ||
(status.details as DrivePublicFile)?.upload_data?.size,
)}
</Text.Info>
</div>

Expand All @@ -182,42 +190,45 @@ const Footer = () => {
}}
/>

<Button
iconSize="lg"
className="ml-4 !rounded-full"
theme="dark"
size="lg"
icon={VerticalDotsIcon}
onClick={e => {
e.stopPropagation();

MenuManager.openMenu(
[
{
type: 'menu',
text: Languages.t('scenes.apps.messages.jump'),
onClick: () => {
close();
setChannelAttachmentState(false);
openMessage(status.details?.message as unknown as Message, workspaceId);
{
status.details?.message && status.details?.message.id &&
<Button
iconSize="lg"
className="ml-4 !rounded-full"
theme="dark"
size="lg"
icon={VerticalDotsIcon}
onClick={e => {
e.stopPropagation();

MenuManager.openMenu(
[
{
type: 'menu',
text: Languages.t('scenes.apps.messages.jump'),
onClick: () => {
close();
setChannelAttachmentState(false);
openMessage(status.details?.message as unknown as Message, workspaceId);
},
},
},
{
type: 'menu',
text: Languages.t('components.channel_attachement_list.open'),
onClick: () => {
close();
setChannelAttachmentState(true);
{
type: 'menu',
text: Languages.t('components.channel_attachement_list.open'),
onClick: () => {
close();
setChannelAttachmentState(true);
},
},
},
],
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(window as any).getBoundingClientRect(e.target),
'top',
{ margin: 0 },
);
}}
/>
],
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(window as any).getBoundingClientRect(e.target),
'top',
{ margin: 0 },
);
}}
/>
}
</div>
</div>
</>
Expand Down