cozy-viewer 1.1.0

package/src/ViewersByFile/ShortcutViewer.jsx

@@ -0,0 +1,38 @@
+import get from 'lodash/get'
+import React from 'react'
+
+import { useClient, useFetchShortcut } from 'cozy-client'
+import OpenwithIcon from 'cozy-ui/transpiled/react/Icons/Openwith'
+import { ButtonLink } 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 ShortcutViewer = ({ t, file }) => {
+  const client = useClient()
+  const { shortcutInfos } = useFetchShortcut(client, file.id)
+  let url = ''
+  if (shortcutInfos) {
+    url = new URL(get(shortcutInfos, 'data.attributes.url'))
+  }
+  return (
+    <NoViewer
+      file={file}
+      renderFallbackExtraContent={() => (
+        <ButtonLink
+          label={`${t('Viewer.goto', { url: get(url, 'origin', '') })}`}
+          icon={OpenwithIcon}
+          href={`${get(url, 'origin', '')}`}
+          target="_blank"
+        />
+      )}
+    />
+  )
+}
+
+ShortcutViewer.propTypes = {
+  file: FileDoctype.isRequired
+}
+
+export default withViewerLocales(ShortcutViewer)

package/src/ViewersByFile/ShortcutViewer.spec.jsx

@@ -0,0 +1,32 @@
+import { render, waitFor } from '@testing-library/react'
+import React from 'react'
+
+import CozyClient, { CozyProvider } from 'cozy-client'
+import I18n from 'cozy-ui/transpiled/react/providers/I18n'
+
+import ShortcutViewer from './ShortcutViewer'
+import en from '../locales/en.json'
+
+export const locales = {
+  en
+}
+
+const setup = () => {
+  const client = new CozyClient({})
+  return (
+    <CozyProvider client={client}>
+      <I18n lang="en" dictRequire={() => locales['en']}>
+        <ShortcutViewer file={{ id: '1' }} />
+      </I18n>
+    </CozyProvider>
+  )
+}
+
+describe('Shortcutviewer', () => {
+  it('renders the component', async () => {
+    const { container } = render(setup())
+    await waitFor(() => {
+      expect(container).toMatchSnapshot()
+    })
+  })
+})

package/src/ViewersByFile/TextViewer.jsx

@@ -0,0 +1,126 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+
+import { withClient, models } from 'cozy-client'
+import { FileDoctype } from 'cozy-ui/transpiled/react/proptypes'
+
+import styles from './styles.styl'
+import NoViewer from '../NoViewer'
+import ViewerSpinner from '../components/ViewerSpinner'
+import { isFileEncrypted } from '../helpers'
+import withFileUrl from '../hoc/withFileUrl'
+
+const MarkdownRenderer = ({ text }) => (
+  <ReactMarkdown
+    className={cx(styles['viewer-textviewer-content'], 'u-p-1')}
+    source={text}
+  />
+)
+
+const PlainTextRenderer = ({ text }) => (
+  <pre
+    className={cx(styles['viewer-textviewer-content'], 'u-mh-auto', 'u-mv-2')}
+  >
+    {text}
+  </pre>
+)
+
+const Loader = () => {
+  return (
+    <div className={styles['viewer-textviewer']}>
+      <ViewerSpinner />
+    </div>
+  )
+}
+
+export const isMarkdown = file =>
+  file.mime === 'text/markdown' ||
+  /.md$/.test(file.name) ||
+  models.file.isNote(file)
+export class TextViewer extends React.Component {
+  state = {
+    text: '',
+    isMarkdown: false,
+    loading: true,
+    error: null
+  }
+  _mounted = false
+
+  componentDidMount() {
+    this._mounted = true
+    this.loadFile()
+  }
+
+  componentWillUnmount() {
+    this._mounted = false
+  }
+
+  async loadFile() {
+    const { url, file } = this.props
+    try {
+      let response
+      if (isFileEncrypted(file)) {
+        response = await fetch(url)
+      } else {
+        const { pathname } = new URL(url)
+        const client = this.props.client.getStackClient()
+        response = await client.fetch('GET', pathname)
+      }
+      const text = await response.text()
+
+      if (this._mounted) {
+        this.setState({
+          text,
+          isMarkdown: isMarkdown(file),
+          loading: false
+        })
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn(error)
+      if (this._mounted) {
+        this.setState({
+          loading: false,
+          error
+        })
+      }
+    }
+  }
+
+  render() {
+    const { loading, error, text, isMarkdown } = this.state
+    const { file, renderFallbackExtraContent } = this.props
+    if (loading) return <Loader />
+    else if (error)
+      return (
+        <NoViewer
+          file={file}
+          renderFallbackExtraContent={renderFallbackExtraContent}
+        />
+      )
+    else
+      return (
+        <div className={styles['viewer-textviewer']}>
+          <h2 className={cx(styles['viewer-filename'], 'u-mt-3', 'u-mb-1')}>
+            {file.name}
+          </h2>
+          {isMarkdown ? (
+            <MarkdownRenderer text={text} />
+          ) : (
+            <PlainTextRenderer text={text} />
+          )}
+        </div>
+      )
+  }
+}
+
+TextViewer.propTypes = {
+  client: PropTypes.object.isRequired,
+  url: PropTypes.string.isRequired,
+  file: FileDoctype.isRequired,
+  renderFallbackExtraContent: PropTypes.func
+}
+
+export default withFileUrl(withClient(TextViewer))

package/src/ViewersByFile/TextViewer.spec.jsx

@@ -0,0 +1,118 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import renderer from 'react-test-renderer'
+
+import { createMockClient } from 'cozy-client'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import { TextViewer, isMarkdown } from './TextViewer'
+
+const client = createMockClient({})
+
+const mockText = jest.fn()
+const mockFetch = responseText => async () => ({
+  text: mockText.mockResolvedValue(responseText)
+})
+
+client.stackClient.fetch = mockFetch('Text')
+
+const props = {
+  client,
+  url: 'https://foo.mycozy.cloud',
+  file: {
+    _id: '1',
+    _type: 'io.cozy.files',
+    name: 'My File'
+  }
+}
+
+describe('isMarkdown function', () => {
+  it('test markdown function', () => {
+    const note = {
+      name: 'My Note.cozy-note',
+      type: 'file',
+      metadata: {
+        content: 'my prosemirror content',
+        schema: '1',
+        title: 'prosemirror title',
+        version: '3'
+      }
+    }
+    expect(isMarkdown({ mime: 'text/markdown' })).toBe(true)
+    expect(isMarkdown({ name: 'text.md' })).toBe(true)
+    expect(isMarkdown(note)).toBe(true)
+    expect(isMarkdown({ name: 'text.txt' })).toBe(false)
+  })
+})
+describe('TextViewer Component', () => {
+  it('should display the loader ', () => {
+    const comp = shallow(<TextViewer {...props} />)
+    expect(comp).toMatchSnapshot()
+  })
+
+  it('should display the error component and render with renderFallback', () => {
+    const comp = renderer.create(
+      <BreakpointsProvider>
+        <TextViewer
+          {...props}
+          renderFallbackExtraContent={file => <span>{file.name}</span>}
+        />
+      </BreakpointsProvider>
+    )
+
+    const inst = comp.root.children[0].instance
+    inst.setState({ error: true, loading: false })
+    expect(comp.toJSON()).toMatchSnapshot()
+  })
+
+  it('should display the text viewer', () => {
+    const comp = renderer.create(
+      <BreakpointsProvider>
+        <TextViewer {...props} />
+      </BreakpointsProvider>
+    )
+
+    const inst = comp.root.children[0].instance
+    inst.setState({
+      loading: false,
+      isMarkdown: false,
+      text: 'The content of my file'
+    })
+    expect(comp.toJSON()).toMatchSnapshot()
+    expect(mockText).toHaveBeenCalled()
+  })
+
+  it('should display the markdown viewer', () => {
+    const comp = renderer.create(
+      <BreakpointsProvider>
+        <TextViewer {...props} />
+      </BreakpointsProvider>
+    )
+
+    const inst = comp.root.children[0].instance
+    inst.setState({
+      loading: false,
+      isMarkdown: true,
+      text: "It's very easy to make some words **bold** and other words *italic* with Markdown"
+    })
+    expect(comp.toJSON()).toMatchSnapshot()
+  })
+
+  it('should display the text viewer when an URL is given', () => {
+    const url = 'blob:http://foo.mycozy.cloud'
+    const comp = renderer.create(
+      <BreakpointsProvider>
+        <TextViewer {...props} url={url} />
+      </BreakpointsProvider>
+    )
+
+    const inst = comp.root.children[0].instance
+    inst.setState({
+      loading: false,
+      isMarkdown: false,
+      text: 'The content of my file'
+    })
+    expect(comp.toJSON()).toMatchSnapshot()
+    expect(mockText).toHaveBeenCalled()
+  })
+})

package/src/ViewersByFile/VideoViewer.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import styles from './styles.styl'
+import withFileUrl from '../hoc/withFileUrl'
+
+const VideoViewer = ({ file, url }) => (
+  <div className={styles['viewer-videoviewer']}>
+    <video src={url} controls="controls" />
+    <p className={styles['viewer-filename']}>{file.name}</p>
+  </div>
+)
+
+export default withFileUrl(VideoViewer)

package/src/ViewersByFile/VideoViewer.spec.jsx

@@ -0,0 +1,40 @@
+import { render, waitFor } from '@testing-library/react'
+import React from 'react'
+
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import VideoViewer from './VideoViewer'
+import DemoProvider from '../docs/DemoProvider'
+
+const file = {
+  _id: 'video',
+  class: 'video',
+  mime: 'video/mp4',
+  name: 'sample.mp4'
+}
+
+const setup = () => {
+  const root = render(
+    <DemoProvider>
+      <BreakpointsProvider>
+        <VideoViewer file={file} />
+      </BreakpointsProvider>
+    </DemoProvider>
+  )
+
+  return { root }
+}
+
+describe('VideoViewer', () => {
+  it('should render a spinner then the video viewer', async () => {
+    const { root } = setup()
+    const { container, queryByRole } = root
+
+    expect(queryByRole('progressbar')).toBeTruthy()
+
+    await waitFor(() => {
+      expect(queryByRole('progressbar')).toBeFalsy()
+      expect(container).toMatchSnapshot()
+    })
+  })
+})

package/src/ViewersByFile/__snapshots__/AudioViewer.spec.jsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AudioViewer should render a spinner then the audio viewer 1`] = `
+<div>
+  <div
+    class="viewer-audioviewer"
+  >
+    <svg
+      class="styles__icon___23x3R"
+      height="140"
+      viewBox="0 0 32 32"
+      width="160"
+    >
+      <g
+        fill="none"
+        fill-rule="evenodd"
+        transform="translate(1 1)"
+      >
+        <rect
+          fill="#ACF6F7"
+          height="30"
+          rx="2"
+          width="30"
+        />
+        <path
+          d="M8 19.998a2 2 0 00-.002 4H9c1.657 0 3-1.35 3-2.997v-7.679a.63.63 0 01.492-.601l6.016-1.129c.272-.05.492.124.492.418v5.478c0 .282-.215.51-.49.51H17c-1.105 0-2 .904-2 1.997v-.179a2 2 0 001.998 1.997H18c1.657 0 3-1.349 3-2.993V7c0-.554-.445-.921-.976-.825L10.976 7.82C10.437 7.918 10 8.454 10 9v10.498c0 .276-.215.5-.49.5H8z"
+          fill="#0CCBD0"
+        />
+      </g>
+    </svg>
+    <p
+      class="viewer-filename"
+    >
+      sample.mp3
+    </p>
+    <audio
+      controls=""
+      preload="auto"
+      src="https://viewerdemo.cozycloud.cc/Z.mp3"
+    />
+  </div>
+</div>
+`;

package/src/ViewersByFile/__snapshots__/ShortcutViewer.spec.jsx.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shortcutviewer renders the component 1`] = `
+<div>
+  <div
+    class="viewer-noviewer"
+  >
+    <svg
+      class="styles__icon___23x3R"
+      height="140"
+      viewBox="0 0 32 32"
+      width="160"
+    >
+      <g
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <path
+          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
+          fill="#D1D5DB"
+        />
+        <path
+          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"
+          fill="#A3ACB8"
+        />
+      </g>
+    </svg>
+    <p
+      class="viewer-filename"
+    />
+    <a
+      class="styles__c-btn___3kXsk"
+      href=""
+      target="_blank"
+    >
+      <span>
+        <svg
+          aria-hidden="true"
+          class="styles__icon___23x3R"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z"
+            fill-rule="evenodd"
+          />
+        </svg>
+        <span>
+          Go to 
+        </span>
+      </span>
+    </a>
+  </div>
+</div>
+`;

package/src/ViewersByFile/__snapshots__/TextViewer.spec.jsx.snap

@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextViewer Component should display the error component and render with renderFallback 1`] = `
+<div
+  className="viewer-noviewer"
+>
+  <svg
+    className="styles__icon___23x3R"
+    height={140}
+    style={Object {}}
+    viewBox="0 0 32 32"
+    width={160}
+  >
+    <g
+      fill="none"
+      fillRule="evenodd"
+    >
+      <path
+        d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
+        fill="#D1D5DB"
+      />
+      <path
+        d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"
+        fill="#A3ACB8"
+      />
+    </g>
+  </svg>
+  <p
+    className="viewer-filename"
+  >
+    My File
+  </p>
+  <span>
+    My File
+  </span>
+</div>
+`;
+
+exports[`TextViewer Component should display the loader  1`] = `<Loader />`;
+
+exports[`TextViewer Component should display the markdown viewer 1`] = `
+<div
+  className="viewer-textviewer"
+>
+  <h2
+    className="viewer-filename u-mt-3 u-mb-1"
+  >
+    My File
+  </h2>
+  <div
+    className="viewer-textviewer-content u-p-1"
+  >
+    <p>
+      It's very easy to make some words 
+      <strong>
+        bold
+      </strong>
+       and other words 
+      <em>
+        italic
+      </em>
+       with Markdown
+    </p>
+  </div>
+</div>
+`;
+
+exports[`TextViewer Component should display the text viewer 1`] = `
+<div
+  className="viewer-textviewer"
+>
+  <h2
+    className="viewer-filename u-mt-3 u-mb-1"
+  >
+    My File
+  </h2>
+  <pre
+    className="viewer-textviewer-content u-mh-auto u-mv-2"
+  >
+    The content of my file
+  </pre>
+</div>
+`;
+
+exports[`TextViewer Component should display the text viewer when an URL is given 1`] = `
+<div
+  className="viewer-textviewer"
+>
+  <h2
+    className="viewer-filename u-mt-3 u-mb-1"
+  >
+    My File
+  </h2>
+  <pre
+    className="viewer-textviewer-content u-mh-auto u-mv-2"
+  >
+    The content of my file
+  </pre>
+</div>
+`;

package/src/ViewersByFile/__snapshots__/VideoViewer.spec.jsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VideoViewer should render a spinner then the video viewer 1`] = `
+<div>
+  <div
+    class="viewer-videoviewer"
+  >
+    <video
+      controls=""
+      src="https://viewerdemo.cozycloud.cc/Nextcloud.mp4"
+    />
+    <p
+      class="viewer-filename"
+    >
+      sample.mp4
+    </p>
+  </div>
+</div>
+`;

package/src/ViewersByFile/styles.styl

@@ -0,0 +1,87 @@
+@require 'settings/breakpoints.styl'
+@require '../vars.styl'
+
+.viewer-imageviewer
+.viewer-noviewer
+.viewer-audioviewer
+.viewer-videoviewer
+.viewer-pdfviewer
+.viewer-textviewer
+.viewer-canceled
+    position         relative
+    display          flex
+    width            60%
+    max-height       'calc(100% - %s)' % $toolbarHeight
+    justify-content  center
+    align-items      center
+    flex-direction   column
+    margin-top       $toolbarHeight
+
+    h2
+        max-width   90%
+
+    +medium-screen()
+        margin-left      0
+        width            100%
+        max-height       'calc(100% - %s)' % $viewerHeightMedium
+        margin-top       $viewerMarginTopMedium
+
+// rules for specific viewers below
+
+.viewer-videoviewer
+    video
+        width       100%
+        max-width   31.25rem
+        height      auto
+
+.viewer-textviewer
+    .viewer-textviewer-content
+        white-space pre-line
+        width 100%
+        max-height 70%
+        overflow auto
+
+    a
+        color var(--azure)
+
+    +medium-screen()
+        width 90%
+        margin-left 5%
+
+.viewer-filename
+    max-width     90%
+    text-overflow ellipsis
+    overflow hidden
+
+.viewer-pdfviewer-pdf
+    overflow auto
+    width 100%
+
+.viewer-pdfviewer-page > *
+    margin auto
+
+.viewer-pdfviewer-toolbar
+    position absolute
+    bottom 2rem
+    background var(--charcoalGrey)
+    color var(--white)
+    border-radius .5rem
+
+.viewer-imageviewer
+    flex             1 1 100%
+    width            auto
+    max-width        100%
+
+    img
+        display     block
+        max-width   100%
+        max-height  100%
+        box-shadow  0 .375rem 1.5rem 0 rgba(0, 0, 0, .5)
+
+.viewer-pdfMobile
+    width 100%
+    height 'calc(100% - %s - var(--flagship-top-height))' % $viewerHeightMedium
+    margin-top 'calc(var(--flagship-top-height, 0rem) + %s)' % $viewerMarginTopMedium
+
+    &--image
+        width 100%