cozy-viewer 1.1.0

package/src/components/ViewerByFile.spec.jsx

@@ -0,0 +1,100 @@
+import { isMobile as isMobileDevice } from 'cozy-device-helper'
+
+import { getViewerComponentName } from './ViewerByFile'
+
+jest.mock('cozy-device-helper', () => ({
+  ...jest.requireActual('cozy-device-helper'),
+  isMobile: jest.fn()
+}))
+jest.mock('../ViewersByFile/ShortcutViewer', () => 'ShortcutViewer')
+jest.mock('../ViewersByFile/ImageViewer', () => 'ImageViewer')
+jest.mock('../ViewersByFile/AudioViewer', () => 'AudioViewer')
+jest.mock('../ViewersByFile/AudioViewer', () => 'AudioViewer')
+jest.mock('../ViewersByFile/VideoViewer', () => 'VideoViewer')
+jest.mock('../ViewersByFile/PdfJsViewer', () => 'PdfJsViewer')
+jest.mock('../ViewersByFile/PdfMobileViewer', () => 'PdfMobileViewer')
+jest.mock('../ViewersByFile/TextViewer', () => 'TextViewer')
+jest.mock('../ViewersByFile/OnlyOfficeViewer', () => 'OnlyOfficeViewer')
+jest.mock('../NoViewer', () => 'NoViewer')
+
+describe('getViewerComponentName', () => {
+  beforeEach(() => {
+    isMobileDevice.mockReturnValue(false)
+  })
+
+  it('should return the correct component', () => {
+    expect(getViewerComponentName({ file: { class: 'shortcut' } })).toBe(
+      'ShortcutViewer'
+    )
+    expect(getViewerComponentName({ file: { class: 'image' } })).toBe(
+      'ImageViewer'
+    )
+    expect(getViewerComponentName({ file: { class: 'audio' } })).toBe(
+      'AudioViewer'
+    )
+    expect(getViewerComponentName({ file: { class: 'video' } })).toBe(
+      'VideoViewer'
+    )
+    isMobileDevice.mockReturnValue(true)
+    expect(getViewerComponentName({ file: { class: 'video' } })).toBe(
+      'NoViewer'
+    )
+    isMobileDevice.mockReturnValue(false)
+    expect(
+      getViewerComponentName({ file: { class: 'pdf' }, isDesktop: false })
+    ).toBe('PdfMobileViewer')
+    expect(
+      getViewerComponentName({ file: { class: 'pdf' }, isDesktop: true })
+    ).toBe('PdfJsViewer')
+    expect(
+      getViewerComponentName({
+        file: {
+          class: 'text',
+          mime: 'text/plain',
+          name: 'test.txt'
+        }
+      })
+    ).toBe('TextViewer')
+    expect(
+      getViewerComponentName({
+        file: { class: 'text', name: 'test.docx' },
+        isOnlyOfficeEnabled: true
+      })
+    ).toBe('OnlyOfficeViewer')
+    expect(
+      getViewerComponentName({
+        file: { class: 'text', name: 'test.docx' },
+        isOnlyOfficeEnabled: false
+      })
+    ).toBe('NoViewer')
+    expect(
+      getViewerComponentName({
+        file: { class: 'slide' },
+        isOnlyOfficeEnabled: true
+      })
+    ).toBe('OnlyOfficeViewer')
+    expect(
+      getViewerComponentName({
+        file: { class: 'slide' },
+        isOnlyOfficeEnabled: false
+      })
+    ).toBe('NoViewer')
+    expect(
+      getViewerComponentName({
+        file: { class: 'spreadsheet' },
+        isOnlyOfficeEnabled: true
+      })
+    ).toBe('OnlyOfficeViewer')
+    expect(
+      getViewerComponentName({
+        file: { class: 'spreadsheet' },
+        isOnlyOfficeEnabled: false
+      })
+    ).toBe('NoViewer')
+    expect(
+      getViewerComponentName({
+        file: { class: 'notSupportedClass' }
+      })
+    ).toBe('NoViewer')
+  })
+})

package/src/components/ViewerControls.jsx

@@ -0,0 +1,191 @@
+import cx from 'classnames'
+import Hammer from 'hammerjs'
+import flow from 'lodash/flow'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import withBreakpoints from 'cozy-ui/transpiled/react/helpers/withBreakpoints'
+import { withStyles } from 'cozy-ui/transpiled/react/styles'
+
+import { infoWidth } from './InformationPanel'
+import Navigation from './Navigation'
+import Toolbar from './Toolbar'
+import styles from './styles.styl'
+import { isValidForPanel } from '../helpers'
+import { toolbarPropsPropType } from '../proptypes'
+
+const ACTIONS_HIDE_DELAY = 3000
+
+const customStyles = () => ({
+  viewerControlsWithInfo: {
+    width: `calc(100% - ${infoWidth}) !important`
+  }
+})
+
+class ViewerControls extends Component {
+  state = {
+    hidden: false,
+    gestures: null
+  }
+
+  _mounted = false
+
+  showControls = () => {
+    if (this._mounted) {
+      this.setState({ hidden: false })
+      this.hideAfterDelay()
+      document.removeEventListener('mousemove', this.showControls)
+      document.addEventListener('mousemove', this.hideAfterDelay)
+    }
+  }
+
+  hideControls = () => {
+    if (this._mounted) {
+      this.setState({ hidden: true })
+      document.removeEventListener('mousemove', this.hideAfterDelay)
+      document.addEventListener('mousemove', this.showControls)
+    }
+  }
+
+  hideAfterDelay = () => {
+    clearTimeout(this.hideTimeout)
+    this.hideTimeout = setTimeout(() => {
+      this.hideControls()
+    }, ACTIONS_HIDE_DELAY)
+  }
+
+  onSwipe = e => {
+    if (e.direction === Hammer.DIRECTION_LEFT) this.props.onNext()
+    else if (e.direction === Hammer.DIRECTION_RIGHT) this.props.onPrevious()
+  }
+
+  initGestures = () => {
+    const gestures = new Hammer(
+      this.wrapped,
+      this.props.breakpoints.isDesktop
+        ? {
+            cssProps: {
+              userSelect: 'auto'
+            }
+          }
+        : {}
+    )
+    if (!this.props.breakpoints.isDesktop) gestures.on('swipe', this.onSwipe)
+
+    return gestures
+  }
+
+  componentDidMount() {
+    this._mounted = true
+    clearTimeout(this.hideTimeout)
+    this.hideAfterDelay()
+    const gestures = this.initGestures()
+    this.setState({ gestures })
+  }
+
+  componentWillUnmount() {
+    this._mounted = false
+    clearTimeout(this.hideTimeout)
+    if (this.state.gestures) this.state.gestures.destroy()
+  }
+
+  renderChildren(children) {
+    if (!children) return null
+
+    return React.Children.map(children, child => {
+      if (
+        child?.type?.name === 'ViewerByFile' ||
+        child?.type?.displayName === 'ViewerByFile'
+      ) {
+        return React.cloneElement(child, {
+          gestures: this.state.gestures,
+          gesturesRef: this.wrapped,
+          onSwipe: this.onSwipe
+        })
+      }
+    })
+  }
+
+  render() {
+    const {
+      file,
+      onClose,
+      hasPrevious,
+      hasNext,
+      onPrevious,
+      onNext,
+      expanded,
+      toolbarProps,
+      showNavigation,
+      showInfoPanel,
+      children,
+      classes,
+      breakpoints: { isDesktop }
+    } = this.props
+    const { showToolbar, showClose, toolbarRef, showFilePath } = toolbarProps
+    const { hidden } = this.state
+
+    const shouldDisplayContentTop = isValidForPanel({ file })
+
+    return (
+      <div
+        className={cx(styles['viewer-controls'], {
+          [styles['viewer-controls--expanded']]: expanded,
+          [styles['viewer-controls--display-content-top']]:
+            shouldDisplayContentTop,
+          [classes.viewerControlsWithInfo]: showInfoPanel
+        })}
+        ref={wrapped => {
+          this.wrapped = wrapped
+        }}
+      >
+        {showToolbar && (
+          <Toolbar
+            toolbarRef={toolbarRef}
+            file={file}
+            showFilePath={showFilePath}
+            onMouseEnter={this.showControls}
+            onMouseLeave={this.hideControls}
+            onClose={showClose && onClose}
+          >
+            {children}
+          </Toolbar>
+        )}
+        {showNavigation && isDesktop && hasPrevious && (
+          <Navigation
+            className={styles['viewer-nav--previous']}
+            hidden={hidden}
+            onMouseEnter={this.showControls}
+            onMouseLeave={this.hideControls}
+            onClick={onPrevious}
+          />
+        )}
+        {this.renderChildren(children)}
+        {showNavigation && isDesktop && hasNext && (
+          <Navigation
+            className={styles['viewer-nav--next']}
+            hidden={hidden}
+            onMouseEnter={this.showControls}
+            onMouseLeave={this.hideControls}
+            onClick={onNext}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+ViewerControls.propTypes = {
+  file: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired,
+  hasPrevious: PropTypes.bool.isRequired,
+  hasNext: PropTypes.bool.isRequired,
+  onPrevious: PropTypes.func.isRequired,
+  onNext: PropTypes.func.isRequired,
+  expanded: PropTypes.bool.isRequired,
+  toolbarProps: PropTypes.shape(toolbarPropsPropType),
+  showNavigation: PropTypes.bool.isRequired,
+  showInfoPanel: PropTypes.bool
+}
+
+export default flow(withBreakpoints(), withStyles(customStyles))(ViewerControls)

package/src/components/ViewerControls.spec.jsx

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import ViewerByFile from './ViewerByFile'
+import ViewerControls from './ViewerControls'
+
+jest.mock('../ViewersByFile/AudioViewer', () => () => <div>AudioViewer</div>)
+jest.mock('../providers/EncryptedProvider', () => ({
+  useEncrypted: () => ({ url: 'random' })
+}))
+
+describe('ViewerControls', () => {
+  const file = {
+    _id: 'audio',
+    class: 'audio',
+    mime: 'audio/mp3',
+    name: 'sample.mp3'
+  }
+
+  const setup = ({ children } = {}) => {
+    render(
+      <ViewerControls
+        file={file}
+        onClose={() => {}}
+        hasPrevious={false}
+        hasNext={false}
+        onPrevious={() => {}}
+        onNext={() => {}}
+        expanded={false}
+        toolbarProps={{
+          showToolbar: false,
+          showClose: false,
+          showFilePath: false,
+          toolbarRef: undefined
+        }}
+        showNavigation={false}
+      >
+        {children}
+      </ViewerControls>
+    )
+  }
+
+  it('should only render children if they are ViewerByFile', () => {
+    setup({
+      children: [
+        undefined,
+        <div key="notViewer">not ViewerByFile</div>,
+        <ViewerByFile key="viewer" file={file} onClose={() => {}} />
+      ]
+    })
+    expect(screen.queryByText('not ViewerByFile')).not.toBeInTheDocument()
+    expect(screen.getByText('AudioViewer')).toBeInTheDocument()
+  })
+})

package/src/components/ViewerSpinner.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import withBreakpoints from 'cozy-ui/transpiled/react/helpers/withBreakpoints'
+
+const ViewerSpinner = ({ breakpoints: { isDesktop } }) => {
+  return (
+    <Spinner
+      size="xxlarge"
+      middle
+      noMargin
+      {...(isDesktop && { color: 'white' })}
+    />
+  )
+}
+
+export default withBreakpoints()(ViewerSpinner)

package/src/components/styles.styl

@@ -0,0 +1,93 @@
+@require 'components/selectionbar.styl'
+@require 'settings/breakpoints.styl'
+
+@require '../vars.styl'
+
+.viewer-nav
+    position absolute
+    top $toolbarHeight
+    bottom 0
+    z-index var(--zIndex-modal-toolbar)
+    width 20%
+    cursor pointer
+    background-color transparent
+    transition .4s opacity ease-out
+    opacity 0
+    display flex
+    align-items center
+    justify-content center
+    flex-direction column
+
+    &--visible:hover
+        opacity 1
+        transition none
+
+    &--previous
+        left 0
+        .viewer-nav-arrow
+            align-self flex-start
+            margin-left 2.5rem
+            transform rotate(180deg)
+
+    &--next
+        right 0
+        .viewer-nav-arrow
+            align-self flex-end
+            margin-right 2.5rem
+
+    +medium-screen()
+        display none
+
+.viewer-nav-arrow
+    opacity .7
+
+.viewer-controls
+    position relative
+    display flex
+    flex-direction column
+    justify-content center
+    align-items center
+    width 100%
+    height 100%
+
+.viewer-controls.--expanded .viewer-nav
+    margin-top 0
+    width 40%
+
+.viewer-controls--display-content-top
+    +medium-screen()
+        justify-content flex-start
+        padding-top $toolbarHeightMedium - $viewerMarginTopMedium + 1rem
+
+.viewer-toolbar
+    position absolute
+    top 0
+    z-index var(--zIndex-modal-toolbar)
+    display flex
+    flex-shrink 0
+    width calc(100% - 1rem)
+    padding 0 0.5rem
+    height $toolbarHeight
+    transition .4s opacity ease-out
+    background linear-gradient(to bottom, var(--charcoalGrey), rgba(50, 54, 63, 0))
+    justify-content flex-start
+    align-items center
+
+    &--hidden
+        opacity 0
+
+    +medium-screen()
+        height $toolbarHeightMedium
+        width 100%
+        padding var(--flagship-top-height) 1rem 0 0
+        background var(--paperBackgroundColor)
+        border-bottom 1px solid var(--dividerColor)
+
+.viewer-footer
+    position fixed
+    bottom 0
+    z-index var(--zIndex-modal-footer)
+    width 100%
+    height $footerHeight
+    padding-bottom var(--flagship-bottom-height, env(safe-area-inset-bottom))
+    background var(--paperBackgroundColor)

package/src/docs/DemoProvider.jsx

@@ -0,0 +1,90 @@
+import React from 'react'
+
+import { CozyProvider } from 'cozy-client'
+import CloudWallpaper from 'cozy-ui/docs/cloud-wallpaper.jpg'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import I18n from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { locales } from '../locales/index'
+
+const demoTextFileResponse = {
+  text: () => new Promise(resolve => resolve('Hello World !'))
+}
+
+const demoFilesByClass = {
+  pdf: 'https://raw.githubusercontent.com/rospdf/pdf-php/2ccf7591fc2f18e63342ebfedad7997b08c34ed2/readme.pdf',
+  audio: 'https://viewerdemo.cozycloud.cc/Z.mp3',
+  video: 'https://viewerdemo.cozycloud.cc/Nextcloud.mp4',
+  text: 'https://viewerdemo.cozycloud.cc/notes.md'
+}
+
+const mockClient = {
+  plugins: {
+    realtime: {
+      subscribe: () => {},
+      unsubscribe: () => {},
+      unsubscribeAll: () => {}
+    }
+  },
+  on: () => {},
+  collection: () => ({
+    getDownloadLinkById: id =>
+      new Promise(resolve => resolve(demoFilesByClass[id])),
+    download: () =>
+      alert(
+        "This is a demo, there's no actual Cozy to download the file from ¯\\_(ツ)_/¯"
+      ),
+    get: () =>
+      new Promise(resolve =>
+        resolve({
+          data: {
+            links: {
+              large: CloudWallpaper
+            }
+          }
+        })
+      )
+  }),
+  getStackClient: () => ({
+    uri: '',
+    fetch: () => new Promise(resolve => resolve(demoTextFileResponse))
+  }),
+  getClient: () => mockClient,
+  store: {
+    getState: () => {},
+    subscribe: () => {},
+    unsubscribe: () => {}
+  },
+  getQueryFromState: queryName => {
+    if (queryName === 'io.cozy.files/parent_folder') {
+      return {
+        data: {
+          _id: 'parent_id',
+          path: '/Parent'
+        }
+      }
+    }
+  },
+  query: () => ({
+    data: [{ attributes: { slug: 'mespapiers' }, links: { related: '' } }]
+  }),
+  getInstanceOptions: () => ({ app: { slug: 'mespapiers' }, subdomain: 'flat' })
+}
+
+class Wrapper extends React.Component {
+  render() {
+    const lang = localStorage.getItem('lang') || 'en'
+
+    return (
+      <CozyProvider client={mockClient}>
+        <BreakpointsProvider>
+          <I18n dictRequire={lang => locales[lang]} lang={lang}>
+            {this.props.children}
+          </I18n>
+        </BreakpointsProvider>
+      </CozyProvider>
+    )
+  }
+}
+
+export default Wrapper

package/src/helpers.js

@@ -0,0 +1,131 @@
+import { generateWebLink } from 'cozy-client'
+import {
+  isEncrypted,
+  isFromKonnector,
+  hasQualifications,
+  hasCertifications,
+  normalize
+} from 'cozy-client/dist/models/file'
+import {
+  KNOWN_DATE_METADATA_NAMES,
+  KNOWN_INFORMATION_METADATA_NAMES,
+  KNOWN_BILLS_ATTRIBUTES_NAMES
+} from 'cozy-client/dist/models/paper'
+
+export const getCurrentModel = metadataName => {
+  if (
+    KNOWN_DATE_METADATA_NAMES.includes(metadataName) ||
+    KNOWN_INFORMATION_METADATA_NAMES.includes(metadataName) ||
+    KNOWN_BILLS_ATTRIBUTES_NAMES.includes(metadataName)
+  ) {
+    return 'information'
+  }
+  if (metadataName === 'contact') return 'contact'
+  if (metadataName === 'page') return 'page'
+}
+
+/**
+ * @typedef {object} Reference
+ * @property {string} id - id of the document
+ * @property {string} type - doctype of the document
+ */
+
+/**
+ * Checks if the file matches one of the following conditions:
+ * - Is certified
+ * - Is Qualified
+ * - From a Connector
+ *
+ * @param {object} param
+ * @param {IOCozyFile} param.file
+ * @returns {boolean}
+ */
+export const isValidForPanel = ({ file }) => {
+  return (
+    hasCertifications(file) || hasQualifications(file) || isFromKonnector(file)
+  )
+}
+
+export const downloadFile = async ({ client, file, url }) => {
+  if (isEncrypted(file)) {
+    return client.collection('io.cozy.files').forceFileDownload(url, file.name)
+  }
+  return client.collection('io.cozy.files').download(file)
+}
+
+export const isFileEncrypted = file => isEncrypted(file)
+
+export const formatDate = ({ f, lang, date }) => {
+  if (lang === 'en') {
+    return f(date, 'MM/DD/YYYY')
+  }
+  return f(date, 'DD/MM/YYYY')
+}
+
+/**
+ * @param {{ information: string, page: string }} editPathByModelProps
+ * @param {string} currentModel
+ * @param {string} name
+ * @returns {string}
+ */
+export const buildEditAttributePath = (
+  editPathByModelProps,
+  currentModel,
+  name
+) => {
+  const currentPath = editPathByModelProps[currentModel]
+  return currentPath?.replace(/__NAME__/, name) ?? ''
+}
+
+export const isEditableAttribute = (name, file) => {
+  const isNotEditableAttributes = ['datetime', 'qualification']
+
+  return (
+    !isNotEditableAttributes.includes(name) &&
+    ((name === 'issueDate' && !isFromKonnector(file)) || name !== 'issueDate')
+  )
+}
+
+export const normalizeAndSpreadAttributes = rawFile => {
+  const normalizedFile = normalize(rawFile)
+
+  return {
+    ...normalizedFile,
+    ...normalizedFile?.attributes
+  }
+}
+
+/**
+ * Return a web link to an application in the Cozy environment with the specified path
+ * @param {object} param
+ * @param {CozyClient} param.client - Instance of CozyClient
+ * @param {string} param.slug - Slug of the application
+ * @param {string} param.path - Path into the application
+ * @returns {string} web link
+ */
+export const makeWebLink = ({ client, slug, path }) => {
+  try {
+    const cozyURL = new URL(client.getStackClient().uri)
+    const { subdomain: subDomainType } = client.getInstanceOptions()
+
+    return generateWebLink({
+      pathname: '/',
+      cozyUrl: cozyURL.origin,
+      slug,
+      hash: path,
+      subDomainType
+    })
+  } catch (e) {
+    return null
+  }
+}
+
+/**
+ * Remove the file name at the end of a path
+ * @param {string} path
+ * @returns {string} new path
+ */
+export const removeFilenameFromPath = path => {
+  const newPath = path.substring(0, path.lastIndexOf('/'))
+  return newPath === '' ? '/' : newPath
+}