File "word-document-file-preview.tsx"
Full Path: /home/markqprx/iniasli.pro/client/uploads/preview/file-preview/word-document-file-preview.tsx
File size: 2.66 KB
MIME-type: text/html
Charset: utf-8
import clsx from 'clsx';
import {useEffect, useRef, useState} from 'react';
import {FilePreviewProps} from './file-preview-props';
import {DefaultFilePreview} from './default-file-preview';
import {ProgressCircle} from '../../../ui/progress/progress-circle';
import {FileEntry} from '../../file-entry';
import {useFileEntryUrls} from '../../hooks/file-entry-urls';
import {useTrans} from '../../../i18n/use-trans';
import {apiClient} from '../../../http/query-client';
export function WordDocumentFilePreview(props: FilePreviewProps) {
const {entry, className} = props;
const {trans} = useTrans();
const ref = useRef<HTMLIFrameElement>(null);
const [showDefault, setShowDefault] = useState(false);
const timeoutId = useRef<any>();
const [isLoading, setIsLoading] = useState(false);
const {previewUrl} = useFileEntryUrls(entry);
useEffect(() => {
// Google Docs viewer only supports files up to 25MB
if (!previewUrl) {
setShowDefault(true);
} else if (entry.file_size && entry.file_size > 25000000) {
setShowDefault(true);
} else if (ref.current) {
ref.current.onload = () => {
clearTimeout(timeoutId.current);
setIsLoading(false);
};
buildPreviewUrl(previewUrl, entry).then(url => {
if (ref.current) {
ref.current.src = url;
}
});
// if preview iframe is not loaded
// after 5 seconds, bail and show default preview
timeoutId.current = setTimeout(() => {
setShowDefault(true);
}, 5000);
}
}, [entry, previewUrl]);
if (showDefault) {
return <DefaultFilePreview {...props} />;
}
return (
<div className={clsx(className, 'w-full h-full')}>
{isLoading && <ProgressCircle />}
<iframe
ref={ref}
title={trans({
message: 'Preview for :name',
values: {name: entry.name},
})}
className={clsx('w-full h-full', isLoading && 'hidden')}
/>
</div>
);
}
async function buildPreviewUrl(
urlString: string,
entry: FileEntry
): Promise<string> {
const url = new URL(urlString);
// if we're not trying to preview shareable link we will need to generate
// preview token, otherwise it won't be publicly accessible
if (!url.searchParams.has('shareable_link')) {
const {data} = await apiClient.post(
`file-entries/${entry.id}/add-preview-token`
);
url.searchParams.append('preview_token', data.preview_token);
}
return buildOfficeLivePreviewUrl(url);
}
function buildOfficeLivePreviewUrl(url: URL) {
// https://docs.google.com/gview?embedded=true&url=
return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
url.toString()
)}`;
}