cozy-viewer 1.1.0

package/src/ViewersByFile/ImageViewer.spec.jsx

@@ -0,0 +1,73 @@
+import { render, waitFor } from '@testing-library/react'
+import React from 'react'
+
+import { checkImageSource } from 'cozy-ui/transpiled/react/FileImageLoader/checkImageSource'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import ImageViewer from './ImageViewer'
+import DemoProvider from '../docs/DemoProvider'
+import EncryptedProvider from '../providers/EncryptedProvider'
+
+jest.mock('cozy-ui/transpiled/react/FileImageLoader/checkImageSource', () => ({
+  ...jest.requireActual(
+    'cozy-ui/transpiled/react/FileImageLoader/checkImageSource'
+  ),
+  checkImageSource: jest.fn()
+}))
+
+const file = {
+  _id: 'image',
+  class: 'image',
+  mime: 'image/jpg',
+  name: 'sample.jpg',
+  links: {
+    large: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
+  }
+}
+
+const gestures = {
+  on: jest.fn(),
+  off: jest.fn(),
+  get: jest.fn()
+}
+
+const setup = () => {
+  const root = render(
+    <DemoProvider>
+      <BreakpointsProvider>
+        <EncryptedProvider>
+          <ImageViewer
+            file={file}
+            gestures={gestures}
+            gesturesRef={{}}
+            onSwipe={jest.fn()}
+          />
+        </EncryptedProvider>
+      </BreakpointsProvider>
+    </DemoProvider>
+  )
+
+  return { root }
+}
+
+describe('ImageViewer', () => {
+  afterEach(() => {
+    jest.restoreAllMocks
+  })
+
+  it('should render a spinner then the image viewer', async () => {
+    const { root } = setup()
+    const { container, queryByRole } = root
+
+    expect(queryByRole('progressbar')).toBeTruthy()
+
+    // simulate a successfull image loading
+    checkImageSource.mockResolvedValue('ok')
+
+    await waitFor(() => container.querySelector('img'))
+
+    const img = container.querySelector('img')
+    expect(img.getAttribute('alt')).toBe(file.name)
+    expect(img.getAttribute('src')).toBe(file.links.large)
+  })
+})

package/src/ViewersByFile/NoNetworkViewer.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CloudBrokenIcon from 'cozy-ui/transpiled/react/Icons/CloudBroken'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+
+import styles from './styles.styl'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+const NoNetworkViewer = ({ t, onReload }) => (
+  <div className={styles['viewer-canceled']}>
+    <Icon icon={CloudBrokenIcon} width={160} height={140} />
+    <h2>{t('Viewer.error.network')}</h2>
+    <Button onClick={onReload} label={t('Viewer.retry')} />
+  </div>
+)
+
+export default withViewerLocales(NoNetworkViewer)

package/src/ViewersByFile/OnlyOfficeViewer.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+import { FileDoctype } from 'cozy-ui/transpiled/react/proptypes'
+
+import NoViewer from '../NoViewer'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+const OnlyOfficeViewer = ({ file, onlyOfficeOpener, t }) => {
+  return (
+    <NoViewer
+      file={file}
+      renderFallbackExtraContent={() => (
+        <Button
+          label={t('Viewer.openInOnlyOffice')}
+          onClick={() => onlyOfficeOpener(file)}
+        />
+      )}
+    />
+  )
+}
+
+OnlyOfficeViewer.propTypes = {
+  file: FileDoctype,
+  onlyOfficeOpener: PropTypes.func.isRequired
+}
+
+export default withViewerLocales(OnlyOfficeViewer)

package/src/ViewersByFile/PdfJsViewer.jsx

@@ -0,0 +1,210 @@
+import cx from 'classnames'
+import flow from 'lodash/flow'
+import throttle from 'lodash/throttle'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { Document, Page } from 'react-pdf'
+
+import styles from './styles.styl'
+import NoViewer from '../NoViewer'
+import ToolbarButton from '../components/PdfToolbarButton'
+import ViewerSpinner from '../components/ViewerSpinner'
+import withFileUrl from '../hoc/withFileUrl'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+export const MIN_SCALE = 0.25
+export const MAX_SCALE = 3
+export const MAX_PAGES = 3
+const KEY_CODE_UP = 38
+const KEY_CODE_DOWN = 40
+
+export class PdfJsViewer extends Component {
+  state = {
+    totalPages: 1,
+    scale: 1,
+    currentPage: 1,
+    loaded: false,
+    errored: false,
+    width: null,
+    renderAllPages: false
+  }
+
+  componentDidMount() {
+    this.setWrapperSize()
+    this.resizeListener = throttle(this.setWrapperSize, 500)
+    window.addEventListener('resize', this.resizeListener)
+    document.addEventListener('keyup', this.onKeyUp, false)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeListener)
+    document.removeEventListener('keyup', this.onKeyUp, false)
+  }
+
+  onKeyUp = e => {
+    if (e.keyCode === KEY_CODE_UP) this.previousPage()
+    else if (e.keyCode === KEY_CODE_DOWN) this.nextPage()
+  }
+
+  toggleGestures(enable) {
+    if (!this.props.gestures) return
+    this.props.gestures.get('swipe').set({ enable })
+    this.props.gestures.get('pan').set({ enable })
+  }
+
+  setWrapperSize = () => {
+    const width = this.wrapper
+      ? this.wrapper.getBoundingClientRect().width
+      : null
+    this.setState({ width })
+  }
+
+  onLoadSuccess = ({ numPages }) => {
+    this.setState({
+      totalPages: numPages,
+      renderAllPages: numPages <= MAX_PAGES,
+      loaded: true
+    })
+  }
+
+  onLoadError = error => {
+    // eslint-disable-next-line no-console
+    console.warn(error)
+    this.setState({
+      errored: true
+    })
+  }
+
+  nextPage = () => {
+    this.setState(state => ({
+      currentPage: Math.min(state.currentPage + 1, state.totalPages)
+    }))
+  }
+
+  previousPage = () => {
+    this.setState(state => ({
+      currentPage: Math.max(state.currentPage - 1, 1)
+    }))
+  }
+
+  scaleUp = () => {
+    this.setState(state => {
+      const previousScale = state.scale
+      const scale = Math.min(previousScale + 0.25, MAX_SCALE)
+      if (scale > 1 && previousScale <= 1) this.toggleGestures(false)
+      return {
+        scale
+      }
+    })
+  }
+
+  scaleDown = () => {
+    this.setState(state => {
+      const previousScale = state.scale
+      const scale = Math.max(previousScale - 0.25, MIN_SCALE)
+      if (scale <= 1 && previousScale > 1) this.toggleGestures(true)
+      return {
+        scale
+      }
+    })
+  }
+
+  render() {
+    const { url, file, renderFallbackExtraContent, t } = this.props
+    const {
+      loaded,
+      errored,
+      totalPages,
+      currentPage,
+      scale,
+      width,
+      renderAllPages
+    } = this.state
+    if (errored)
+      return (
+        <NoViewer
+          file={file}
+          renderFallbackExtraContent={renderFallbackExtraContent}
+        />
+      )
+    const pageWidth = width ? width * scale : null // newer versions of react-pdf do that automatically
+
+    return (
+      <div
+        className={styles['viewer-pdfviewer']}
+        ref={ref => (this.wrapper = ref)}
+      >
+        <Document
+          file={url}
+          onLoadSuccess={this.onLoadSuccess}
+          onLoadError={this.onLoadError}
+          className={styles['viewer-pdfviewer-pdf']}
+          loading={<ViewerSpinner />}
+        >
+          {renderAllPages ? (
+            [...Array(totalPages)].map((_, page) => (
+              <Page
+                key={page}
+                pageNumber={page + 1}
+                width={pageWidth}
+                renderAnnotations={false}
+                className={cx('u-mv-1', styles['viewer-pdfviewer-page'])}
+              />
+            ))
+          ) : (
+            <Page
+              pageNumber={currentPage}
+              width={pageWidth}
+              renderAnnotations={false}
+              className={styles['viewer-pdfviewer-page']}
+            />
+          )}
+        </Document>
+        {loaded && (
+          <div className={cx(styles['viewer-pdfviewer-toolbar'], 'u-p-half')}>
+            {!renderAllPages && (
+              <span className="u-mh-half">
+                <ToolbarButton
+                  icon="top"
+                  onClick={this.previousPage}
+                  disabled={currentPage === 1}
+                  label={t('Viewer.previous')}
+                />
+                {currentPage}/{totalPages}
+                <ToolbarButton
+                  icon="bottom"
+                  onClick={this.nextPage}
+                  disabled={currentPage === totalPages}
+                  label={t('Viewer.next')}
+                />
+              </span>
+            )}
+
+            <span className="u-mh-half">
+              <ToolbarButton
+                icon="dash"
+                onClick={this.scaleDown}
+                disabled={scale === MIN_SCALE}
+                label={t('Viewer.scaledown')}
+              />
+              <ToolbarButton
+                icon="plus"
+                onClick={this.scaleUp}
+                disabled={scale === MAX_SCALE}
+                label={t('Viewer.scaleup')}
+              />
+            </span>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+PdfJsViewer.propTypes = {
+  url: PropTypes.string.isRequired,
+  gestures: PropTypes.object,
+  renderFallbackExtraContent: PropTypes.func
+}
+
+export default flow(withFileUrl, withViewerLocales)(PdfJsViewer)

package/src/ViewersByFile/PdfJsViewer.spec.jsx

@@ -0,0 +1,161 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+
+import { PdfJsViewer, MIN_SCALE, MAX_SCALE, MAX_PAGES } from './PdfJsViewer'
+
+describe('PDFViewer', () => {
+  let component
+  const panGestureMock = jest.fn()
+  const swipeGestureMock = jest.fn()
+  const gesturesMock = {
+    get: jest.fn(type => ({
+      set: type === 'pan' ? panGestureMock : swipeGestureMock
+    }))
+  }
+  beforeEach(() => {
+    component = shallow(
+      <PdfJsViewer url="test" file={{}} gestures={gesturesMock} t={x => x} />
+    )
+  })
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('desture integration', () => {
+    let instance
+    beforeEach(() => {
+      instance = component.instance()
+    })
+
+    it('should disable gestures when zooming in', () => {
+      instance.scaleUp()
+      expect(component.state('scale')).toBeGreaterThan(1)
+      expect(panGestureMock).toHaveBeenCalledWith({ enable: false })
+      expect(swipeGestureMock).toHaveBeenCalledWith({ enable: false })
+      instance.scaleUp()
+      expect(panGestureMock).toHaveBeenCalledTimes(1)
+      expect(swipeGestureMock).toHaveBeenCalledTimes(1)
+    })
+
+    it('should leave gestures alone when zooming out', () => {
+      instance.scaleDown()
+      expect(component.state('scale')).toBeLessThan(1)
+      expect(panGestureMock).not.toHaveBeenCalled()
+      expect(swipeGestureMock).not.toHaveBeenCalled()
+    })
+
+    it('should re-enable gestures when zooming back out', () => {
+      instance.scaleUp()
+      expect(component.state('scale')).toBeGreaterThan(1)
+      expect(panGestureMock).toHaveBeenCalledWith({ enable: false })
+      expect(swipeGestureMock).toHaveBeenCalledWith({ enable: false })
+      instance.scaleDown()
+      expect(component.state('scale')).toBe(1)
+      expect(panGestureMock).toHaveBeenCalledWith({ enable: true })
+      expect(swipeGestureMock).toHaveBeenCalledWith({ enable: true })
+    })
+  })
+
+  describe('with a valid PDF', () => {
+    let instance
+    beforeEach(() => {
+      instance = component.instance()
+      instance.onLoadSuccess({ numPages: 3 })
+    })
+
+    it('should start with default options', () => {
+      expect(component.state('loaded')).toBe(true)
+      expect(component.state('totalPages')).toBe(3)
+      expect(component.state('currentPage')).toBe(1)
+      expect(component.state('scale')).toBe(1)
+    })
+
+    it('should flip to the next page while possible', () => {
+      instance.nextPage()
+      expect(component.state('currentPage')).toBe(2)
+      instance.nextPage()
+      expect(component.state('currentPage')).toBe(3)
+      instance.nextPage()
+      expect(component.state('currentPage')).toBe(3)
+    })
+
+    it('should flip to the previous page while possible', () => {
+      instance.nextPage()
+      expect(component.state('currentPage')).toBe(2)
+      instance.previousPage()
+      expect(component.state('currentPage')).toBe(1)
+      instance.previousPage()
+      expect(component.state('currentPage')).toBe(1)
+    })
+
+    it('should scale up to a certain point', () => {
+      const initialScale = component.state('scale')
+      instance.scaleUp()
+      expect(component.state('scale')).toBeGreaterThan(initialScale)
+
+      for (let i = 0; i < 10; i++) instance.scaleUp()
+      expect(component.state('scale')).toEqual(MAX_SCALE)
+    })
+
+    it('should scale down to a certain point', () => {
+      const initialScale = component.state('scale')
+      instance.scaleDown()
+      expect(component.state('scale')).toBeLessThan(initialScale)
+
+      for (let i = 0; i < 10; i++) instance.scaleDown()
+      expect(component.state('scale')).toEqual(MIN_SCALE)
+    })
+  })
+
+  describe('a PDF with few pages', () => {
+    beforeEach(() => {
+      component.instance().onLoadSuccess({ numPages: MAX_PAGES })
+    })
+
+    it('should render all the pages', () => {
+      const pages = component.find('ForwardRef(Page)')
+      expect(pages.length).toEqual(MAX_PAGES)
+    })
+
+    it('should not show pagination controls', () => {
+      const pageUp = component.find({ icon: 'top' })
+      const pageDown = component.find({ icon: 'bottom' })
+      expect(pageUp.length).toEqual(0)
+      expect(pageDown.length).toEqual(0)
+    })
+  })
+
+  describe('a PDF with many pages', () => {
+    beforeEach(() => {
+      component.instance().onLoadSuccess({ numPages: MAX_PAGES + 1 })
+    })
+
+    it('should render only the current page', () => {
+      const pages = component.find('ForwardRef(Page)')
+      expect(pages.length).toEqual(1)
+    })
+
+    it('should show pagination controls', () => {
+      const pageUp = component.find({ icon: 'top' })
+      const pageDown = component.find({ icon: 'bottom' })
+      expect(pageUp.length).toEqual(1)
+      expect(pageDown.length).toEqual(1)
+    })
+  })
+
+  describe('with a pdf that does not load', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'warn').mockImplementation(() => {})
+    })
+    afterEach(() => {
+      // eslint-disable-next-line no-console
+      console.warn.mockRestore()
+    })
+    it('should show a fallback', () => {
+      component.instance().onLoadError('pdfviewer test error')
+      expect(component.state('errored')).toBe(true)
+      const noViewer = component.find('NoViewer')
+      expect(noViewer.length).toBe(1)
+    })
+  })
+})

package/src/ViewersByFile/PdfMobileViewer.jsx

@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+
+import { useClient } from 'cozy-client'
+import FileImageLoader from 'cozy-ui/transpiled/react/FileImageLoader'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import { FileDoctype } from 'cozy-ui/transpiled/react/proptypes'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+
+import styles from './styles.styl'
+import NoViewer from '../NoViewer'
+import DownloadButton from '../NoViewer/DownloadButton'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+export const PdfMobileViewer = ({ file, url, t, gestures }) => {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+  const imgRef = useRef(null)
+  const { showAlert } = useAlert()
+
+  const client = useClient()
+
+  const onImageError = () => {
+    setLoading(false)
+    setError(true)
+  }
+
+  const onImageLoad = () => {
+    setLoading(false)
+  }
+
+  const handleOnClick = useCallback(
+    async file => {
+      try {
+        await client.collection('io.cozy.files').download(file)
+      } catch (error) {
+        showAlert({
+          message: t('Viewer.error.generic'),
+          severity: 'error',
+          variant: 'filled',
+          icon: false
+        })
+      }
+    },
+    [client, showAlert, t]
+  )
+
+  useEffect(() => {
+    if (gestures) {
+      gestures.get('pinch').set({ enable: true })
+      gestures.on('pinchend tap', evt => {
+        if (
+          (evt.type === 'pinchend' || evt.tapCount === 1) &&
+          evt.target === imgRef.current
+        ) {
+          handleOnClick(file)
+        }
+      })
+
+      return () => {
+        gestures.off('pinchend tap')
+      }
+    }
+  }, [client, gestures, file, handleOnClick])
+
+  if (error) {
+    return (
+      <NoViewer
+        file={file}
+        renderFallbackExtraContent={file => <DownloadButton file={file} />}
+      />
+    )
+  }
+
+  return (
+    <div className={styles['viewer-pdfMobile']}>
+      {loading && <Spinner size="xxlarge" middle noMargin />}
+      {file && (
+        <FileImageLoader
+          file={file}
+          url={url}
+          linkType="medium"
+          onError={onImageError}
+          key={file.id}
+          render={src => (
+            <img
+              ref={imgRef}
+              className={styles['viewer-pdfMobile--image']}
+              alt={file.name}
+              src={src}
+              onLoad={onImageLoad}
+            />
+          )}
+        />
+      )}
+    </div>
+  )
+}
+
+PdfMobileViewer.prototype = {
+  file: FileDoctype.isRequired,
+  url: PropTypes.string,
+  gestures: PropTypes.object
+}
+
+export default withViewerLocales(PdfMobileViewer)

package/src/ViewersByFile/PdfMobileViewer.spec.jsx

@@ -0,0 +1,76 @@
+import { render, waitFor } from '@testing-library/react'
+import React from 'react'
+
+import { CozyProvider, createMockClient } from 'cozy-client'
+import logger from 'cozy-logger'
+import { I18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { PdfMobileViewer } from './PdfMobileViewer'
+import EncryptedProvider from '../providers/EncryptedProvider'
+
+logger.error = logger.warn = jest.fn()
+
+const client = createMockClient({})
+client.collection = jest.fn(() => ({
+  getDownloadLinkById: jest.fn()
+}))
+client.plugins.realtime = {
+  subscribe: jest.fn(),
+  unsubscribe: jest.fn(),
+  unsubscribeAll: jest.fn()
+}
+jest.mock('cozy-ui/transpiled/react/providers/Alert', () => ({
+  useAlert: jest.fn().mockReturnValue({ showAlert: jest.fn() })
+}))
+
+const file = {
+  _id: 'pdf',
+  class: 'pdf',
+  name: 'Demo.pdf',
+  mime: 'application/pdf',
+  links: {
+    medium: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
+  }
+}
+
+const setup = ({ file }) => {
+  const root = render(
+    <CozyProvider client={client}>
+      <I18n lang="en" dictRequire={() => ''}>
+        <EncryptedProvider>
+          <PdfMobileViewer file={file} t={x => x} />
+        </EncryptedProvider>
+      </I18n>
+    </CozyProvider>
+  )
+
+  return { root }
+}
+
+describe('PdfMobileViewer', () => {
+  it('should show a spinner if image is not loaded', () => {
+    const { root } = setup({ file })
+    const { getByRole } = root
+
+    expect(getByRole('progressbar'))
+  })
+
+  describe('errors if file as no medium or failed to download', () => {
+    let fileWithoutLinks = file
+
+    beforeAll(() => {
+      fileWithoutLinks.links = undefined
+    })
+
+    it('should show "download" button on browser', async () => {
+      const { root } = setup({ file: fileWithoutLinks })
+      const { getByText, queryByRole } = root
+
+      await waitFor(() => {
+        expect(queryByRole('progressbar')).toBeFalsy()
+        expect(getByText('Viewer.download'))
+        expect(getByText(file.name))
+      })
+    })
+  })
+})