diff --git a/package.json b/package.json index 2e6156d782..678c280da8 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "commitlint": "7.6.1", "commitlint-config-cozy": "0.4.3", "copyfiles": "2.1.1", - "cozy-client": "^13.4.1", + "cozy-client": "^18.1.2", "cozy-device-helper": "1.10.0", "cozy-doctypes": "^1.69.0", "css-loader": "0.28.11", @@ -158,7 +158,7 @@ }, "peerDependencies": { "@material-ui/core": "4", - "cozy-client": "^13.4.0", + "cozy-client": "^18.1.2", "cozy-device-helper": "1.10.0", "cozy-doctypes": "^1.69.0", "piwik-react-router": "^0.8.2", diff --git a/react/Viewer/ImageLoader.jsx b/react/Viewer/ImageLoader.jsx index 1fa1d1d1da..8f0d0b2142 100644 --- a/react/Viewer/ImageLoader.jsx +++ b/react/Viewer/ImageLoader.jsx @@ -10,7 +10,7 @@ const LOADING_FALLBACK = 'LOADING_FALLBACK' const LOADED = 'LOADED' const FAILED = 'FAILED' -class ImageLoader extends React.Component { +export class ImageLoader extends React.Component { state = { status: PENDING, src: null @@ -82,13 +82,13 @@ class ImageLoader extends React.Component { async loadLink() { this.setState({ status: LOADING_LINK }) - const { file, size, client } = this.props + const { file, linkType, client } = this.props try { - const links = await this.getFileLinks(file, size) - const link = links[size] + const links = await this.getFileLinks(file, linkType) + const link = links[linkType] - if (!link) throw new Error(`${size} link is not available`) + if (!link) throw new Error(`${linkType} link is not available`) const src = client.getStackClient().uri + link await this.checkImageSource(src) @@ -141,13 +141,13 @@ class ImageLoader extends React.Component { ImageLoader.propTypes = { file: PropTypes.object.isRequired, render: PropTypes.func.isRequired, - size: PropTypes.oneOf(['small', 'medium', 'large']), + linkType: PropTypes.oneOf(['small', 'medium', 'large', 'preview']), onError: PropTypes.func, renderFallback: PropTypes.func } ImageLoader.defaultProps = { - size: 'small', + linkType: 'small', onError: () => {} } diff --git a/react/Viewer/ImageViewer.jsx b/react/Viewer/ImageViewer.jsx index 5e691aaabd..15549e12c6 100644 --- a/react/Viewer/ImageViewer.jsx +++ b/react/Viewer/ImageViewer.jsx @@ -224,7 +224,7 @@ class ImageViewer extends Component { {file && ( ( diff --git a/react/Viewer/NoNetworkViewer.jsx b/react/Viewer/NoNetworkViewer.jsx index 59d18bd843..da36cb61d1 100644 --- a/react/Viewer/NoNetworkViewer.jsx +++ b/react/Viewer/NoNetworkViewer.jsx @@ -10,7 +10,7 @@ import styles from './styles.styl' const NoNetworkViewer = ({ t, onReload }) => (
-

{t('Viewer.error')}

+

{t('Viewer.error.network')}

) diff --git a/react/Viewer/NoViewer/FileIcon.jsx b/react/Viewer/NoViewer/FileIcon.jsx index bd390c3285..706ff928b0 100644 --- a/react/Viewer/NoViewer/FileIcon.jsx +++ b/react/Viewer/NoViewer/FileIcon.jsx @@ -1,33 +1,42 @@ import React from 'react' + import Icon from '../../Icon' +import FileTypeBinIcon from '../../Icons/FileTypeBin' +import FileTypeCodeIcon from '../../Icons/FileTypeCode' +import FileTypeSheetIcon from '../../Icons/FileTypeSheet' +import FileTypeSlideIcon from '../../Icons/FileTypeSlide' +import FileTypeTextIcon from '../../Icons/FileTypeText' +import FileTypeZipIcon from '../../Icons/FileTypeZip' +import FileTypePdfIcon from '../../Icons/FileTypePdf' +import FileTypeFilesIcon from '../../Icons/FileTypeFiles' const FileIcon = ({ type }) => { let icon switch (type) { case 'bin': - icon = 'file-type-bin' + icon = FileTypeBinIcon break case 'code': - icon = 'file-type-code' + icon = FileTypeCodeIcon break case 'spreadsheet': - icon = 'file-type-spreadsheet' + icon = FileTypeSheetIcon break case 'slide': - icon = 'file-type-slide' + icon = FileTypeSlideIcon break case 'text': - icon = 'file-type-text' + icon = FileTypeTextIcon break case 'zip': - icon = 'file-type-zip' + icon = FileTypeZipIcon break case 'pdf': - icon = 'file-type-pdf' + icon = FileTypePdfIcon break default: - icon = 'file-type-files' + icon = FileTypeFilesIcon break } diff --git a/react/Viewer/PdfMobileViewer.jsx b/react/Viewer/PdfMobileViewer.jsx new file mode 100644 index 0000000000..2e6fc9d824 --- /dev/null +++ b/react/Viewer/PdfMobileViewer.jsx @@ -0,0 +1,116 @@ +import React, { useState, useEffect, useRef } from 'react' +import has from 'lodash/get' + +import { useClient } from 'cozy-client' +import { openFileWith } from 'cozy-client/dist/models/fsnative' +import { isMobileApp } from 'cozy-device-helper' + +import Alerter from '../Alerter' +import Spinner from '../Spinner' +import Button from '../Button' + +import { withViewerLocales } from './withViewerLocales' +import DownloadButton from './NoViewer/DownloadButton' +import ImageLoader from './ImageLoader' +import NoViewer from './NoViewer' +import NoNetworkViewer from './NoNetworkViewer' + +import styles from './styles.styl' + +export const PdfMobileViewer = ({ file, t, gestures }) => { + const [loading, setLoading] = useState(true) + const [error, setError] = useState(false) + const imgRef = useRef(null) + + const client = useClient() + + const reload = () => { + setLoading(true) + setError(false) + } + + const onImageError = () => { + setLoading(false) + setError(true) + } + + const onImageLoad = () => { + setLoading(false) + } + + const onFileOpen = async file => { + try { + await openFileWith(client, file) + } catch (error) { + Alerter.info(`Viewer.error.${error}`, { fileMime: file.mime }) + } + } + + const handleOnClick = file => { + !isMobileApp() && client.collection('io.cozy.files').download(file) + } + + useEffect(() => { + if (gestures && isMobileApp()) { + gestures.get('pinch').set({ enable: true }) + gestures.on('tap doubletap pinchend', e => { + if (e.target === imgRef.current) { + onFileOpen(file) + } + }) + + return () => { + gestures.off('tap doubletap pinchend') + } + } + }, [gestures]) + + if (error) { + return + } + + if (!has(file, 'links.preview')) { + return ( + ( +