cozy-ui 111.5.0 → 111.7.0

package/react/Viewer/ViewerContainer.jsx

@@ -1,22 +1,21 @@
-import React, { createRef } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { createRef } from 'react'
 
-import useBreakpoints from '../providers/Breakpoints'
-import { FileDoctype } from '../proptypes'
-import { useExtendI18n } from '../providers/I18n'
-import { useCozyTheme } from '../providers/CozyTheme'
-import Modal from '../Modal'
-
-import { toolbarPropsPropType } from './proptypes'
-import { isValidForPanel } from './helpers'
 import Viewer from './Viewer'
 import ViewerInformationsWrapper from './ViewerInformationsWrapper'
-import EncryptedProvider from './providers/EncryptedProvider'
-import AlertProvider from '../providers/Alert'
-import { ActionMenuProvider } from './providers/ActionMenuProvider'
+import { isValidForPanel } from './helpers'
 import { locales } from './locales'
+import { toolbarPropsPropType } from './proptypes'
+import { ActionMenuProvider } from './providers/ActionMenuProvider'
+import EncryptedProvider from './providers/EncryptedProvider'
 import styles from './styles.styl'
+import Modal from '../Modal'
+import { FileDoctype } from '../proptypes'
+import AlertProvider from '../providers/Alert'
+import useBreakpoints from '../providers/Breakpoints'
+import { useCozyTheme } from '../providers/CozyTheme'
+import { useExtendI18n } from '../providers/I18n'
 
 const ViewerContainer = props => {
   const {

package/react/Viewer/ViewerInformationsWrapper.jsx

@@ -1,14 +1,13 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { useTheme } from '@material-ui/core'
+import PropTypes from 'prop-types'
+import React from 'react'
 
-import { FileDoctype } from '../proptypes'
-
-import InformationPanel from './components/InformationPanel'
-import Footer from './components/Footer'
-import PanelContent from './Panel/PanelContent'
 import FooterContent from './Footer/FooterContent'
+import PanelContent from './Panel/PanelContent'
+import Footer from './components/Footer'
+import InformationPanel from './components/InformationPanel'
 import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { FileDoctype } from '../proptypes'
 import { useCozyTheme } from '../providers/CozyTheme'
 
 const ViewerInformationsWrapper = ({

package/react/Viewer/ViewerInformationsWrapper.spec.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 
 import ViewerInformationsWrapper from './ViewerInformationsWrapper'
 

package/react/Viewer/ViewerWithCustomPanelAndFooter.jsx

@@ -1,13 +1,11 @@
-import React, { createRef } from 'react'
 import cx from 'classnames'
+import React, { createRef } from 'react'
 
-import useBreakpoints from '../providers/Breakpoints'
-
-import InformationPanel from './components/InformationPanel'
-import Footer from './components/Footer'
 import Viewer from './Viewer'
-
+import Footer from './components/Footer'
+import InformationPanel from './components/InformationPanel'
 import styles from './styles.styl'
+import useBreakpoints from '../providers/Breakpoints'
 
 const ViewerWithCustomPanelAndFooter = props => {
   console.warn(

package/react/Viewer/ViewersByFile/AudioViewer.jsx

@@ -1,13 +1,11 @@
 import React from 'react'
 
+import styles from './styles.styl'
 import Icon from '../../Icon'
 import FileTypeAudioIcon from '../../Icons/FileTypeAudio'
 import isTesting from '../../helpers/isTesting'
-
 import withFileUrl from '../hoc/withFileUrl'
 
-import styles from './styles.styl'
-
 const AudioViewer = ({ file, url }) => (
   <div className={styles['viewer-audioviewer']}>
     <Icon icon={FileTypeAudioIcon} width={160} height={140} />

package/react/Viewer/ViewersByFile/AudioViewer.spec.jsx

@@ -1,12 +1,10 @@
-import React from 'react'
 import { render, waitFor } from '@testing-library/react'
+import React from 'react'
 
+import AudioViewer from './AudioViewer'
 import { BreakpointsProvider } from '../../providers/Breakpoints'
-
 import DemoProvider from '../docs/DemoProvider'
 
-import AudioViewer from './AudioViewer'
-
 const file = {
   _id: 'audio',
   class: 'audio',

package/react/Viewer/ViewersByFile/BlankPaperViewer.jsx

@@ -1,15 +1,13 @@
 import React, { useState } from 'react'
 
+import styles from './styles.styl'
+import Backdrop from '../../Backdrop'
 import Button from '../../Buttons'
 import Empty from '../../Empty'
-import Backdrop from '../../Backdrop'
 import IntentDialogOpener from '../../IntentDialogOpener'
-
 import IlluGenericNewPage from '../assets/IlluGenericNewPage.svg'
 import { withViewerLocales } from '../hoc/withViewerLocales'
 
-import styles from './styles.styl'
-
 const BlankPaperViewer = ({ file, t }) => {
   const [isLoading, setIsLoading] = useState(true)
 

package/react/Viewer/ViewersByFile/ImageViewer.jsx

@@ -1,12 +1,10 @@
-import React, { Component } from 'react'
 import Hammer from 'hammerjs'
+import React, { Component } from 'react'
 
-import FileImageLoader from '../../FileImageLoader'
-
-import ViewerSpinner from '../components/ViewerSpinner'
 import NoNetworkViewer from './NoNetworkViewer'
-
 import styles from './styles.styl'
+import FileImageLoader from '../../FileImageLoader'
+import ViewerSpinner from '../components/ViewerSpinner'
 
 const MIN_SCALE = 1
 const MAX_SCALE = 6

package/react/Viewer/ViewersByFile/ImageViewer.spec.jsx

@@ -1,14 +1,12 @@
-import React from 'react'
 import { render, waitFor } from '@testing-library/react'
+import React from 'react'
 
-import { BreakpointsProvider } from '../../providers/Breakpoints'
+import ImageViewer from './ImageViewer'
 import { checkImageSource } from '../../FileImageLoader/checkImageSource'
-
+import { BreakpointsProvider } from '../../providers/Breakpoints'
 import DemoProvider from '../docs/DemoProvider'
 import EncryptedProvider from '../providers/EncryptedProvider'
 
-import ImageViewer from './ImageViewer'
-
 jest.mock('../../FileImageLoader/checkImageSource', () => ({
   ...jest.requireActual('../../FileImageLoader/checkImageSource'),
   checkImageSource: jest.fn()

package/react/Viewer/ViewersByFile/NoNetworkViewer.jsx

@@ -1,13 +1,11 @@
 import React from 'react'
 
+import styles from './styles.styl'
 import Icon from '../../Icon'
 import CloudBrokenIcon from '../../Icons/CloudBroken'
 import Button from '../../deprecated/Button'
-
 import { withViewerLocales } from '../hoc/withViewerLocales'
 
-import styles from './styles.styl'
-
 const NoNetworkViewer = ({ t, onReload }) => (
   <div className={styles['viewer-canceled']}>
     <Icon icon={CloudBrokenIcon} width={160} height={140} />

package/react/Viewer/ViewersByFile/OnlyOfficeViewer.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Button from '../../deprecated/Button'
 import { FileDoctype } from '../../proptypes'
-
-import { withViewerLocales } from '../hoc/withViewerLocales'
 import NoViewer from '../NoViewer'
+import { withViewerLocales } from '../hoc/withViewerLocales'
 
 const OnlyOfficeViewer = ({ file, onlyOfficeOpener, t }) => {
   return (

package/react/Viewer/ViewersByFile/PdfJsViewer.jsx

@@ -1,17 +1,16 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { Document, Page } from 'react-pdf'
 import cx from 'classnames'
-import throttle from 'lodash/throttle'
 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 { withViewerLocales } from '../hoc/withViewerLocales'
 import withFileUrl from '../hoc/withFileUrl'
-import ToolbarButton from '../components/PdfToolbarButton'
-import NoViewer from '../NoViewer'
-
-import styles from './styles.styl'
+import { withViewerLocales } from '../hoc/withViewerLocales'
 
 export const MIN_SCALE = 0.25
 export const MAX_SCALE = 3
@@ -208,7 +207,4 @@ PdfJsViewer.propTypes = {
   renderFallbackExtraContent: PropTypes.func
 }
 
-export default flow(
-  withFileUrl,
-  withViewerLocales
-)(PdfJsViewer)
+export default flow(withFileUrl, withViewerLocales)(PdfJsViewer)

package/react/Viewer/ViewersByFile/PdfJsViewer.spec.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { shallow } from 'enzyme'
+import React from 'react'
 
 import { PdfJsViewer, MIN_SCALE, MAX_SCALE, MAX_PAGES } from './PdfJsViewer'
 
@@ -14,7 +14,7 @@ describe('PDFViewer', () => {
   }
   beforeEach(() => {
     component = shallow(
-      <PdfJsViewer url={'test'} file={{}} gestures={gesturesMock} t={x => x} />
+      <PdfJsViewer url="test" file={{}} gestures={gesturesMock} t={x => x} />
     )
   })
   afterEach(() => {

package/react/Viewer/ViewersByFile/PdfMobileViewer.jsx

@@ -1,17 +1,15 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
 
 import { useClient } from 'cozy-client'
 
-import Spinner from '../../Spinner'
-import FileImageLoader from '../../FileImageLoader'
-
-import DownloadButton from '../NoViewer/DownloadButton'
-import NoViewer from '../NoViewer'
-
 import styles from './styles.styl'
+import FileImageLoader from '../../FileImageLoader'
+import Spinner from '../../Spinner'
 import { FileDoctype } from '../../proptypes'
 import { useAlert } from '../../providers/Alert'
+import NoViewer from '../NoViewer'
+import DownloadButton from '../NoViewer/DownloadButton'
 import { withViewerLocales } from '../hoc/withViewerLocales'
 
 export const PdfMobileViewer = ({ file, url, t, gestures }) => {

package/react/Viewer/ViewersByFile/PdfMobileViewer.spec.jsx

@@ -1,13 +1,12 @@
-import React from 'react'
 import { render, waitFor } from '@testing-library/react'
+import React from 'react'
 
 import { CozyProvider, createMockClient } from 'cozy-client'
 import logger from 'cozy-logger'
 
+import { PdfMobileViewer } from './PdfMobileViewer'
 import { I18n } from '../../providers/I18n'
-
 import EncryptedProvider from '../providers/EncryptedProvider'
-import { PdfMobileViewer } from './PdfMobileViewer'
 
 logger.error = logger.warn = jest.fn()
 

package/react/Viewer/ViewersByFile/ShortcutViewer.jsx

@@ -1,13 +1,13 @@
+import get from 'lodash/get'
 import React from 'react'
+
 import { useClient, useFetchShortcut } from 'cozy-client'
-import get from 'lodash/get'
 
-import { withViewerLocales } from '../hoc/withViewerLocales'
+import OpenwithIcon from '../../Icons/Openwith'
 import { ButtonLink } from '../../deprecated/Button'
 import { FileDoctype } from '../../proptypes'
-import OpenwithIcon from '../../Icons/Openwith'
-
 import NoViewer from '../NoViewer'
+import { withViewerLocales } from '../hoc/withViewerLocales'
 
 const ShortcutViewer = ({ t, file }) => {
   const client = useClient()

package/react/Viewer/ViewersByFile/ShortcutViewer.spec.jsx

@@ -1,12 +1,11 @@
+import { render, waitFor } from '@testing-library/react'
 import React from 'react'
 
 import CozyClient, { CozyProvider } from 'cozy-client'
-import { render, waitFor } from '@testing-library/react'
-import I18n from '../../providers/I18n'
-
-import en from '../locales/en.json'
 
 import ShortcutViewer from './ShortcutViewer'
+import I18n from '../../providers/I18n'
+import en from '../locales/en.json'
 
 export const locales = {
   en

package/react/Viewer/ViewersByFile/TextViewer.jsx

@@ -1,18 +1,16 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
 import React from 'react'
 import ReactMarkdown from 'react-markdown'
-import PropTypes from 'prop-types'
-import cx from 'classnames'
 
 import { withClient, models } from 'cozy-client'
 
+import styles from './styles.styl'
 import { FileDoctype } from '../../proptypes'
-
-import ViewerSpinner from '../components/ViewerSpinner'
-import withFileUrl from '../hoc/withFileUrl'
 import NoViewer from '../NoViewer'
+import ViewerSpinner from '../components/ViewerSpinner'
 import { isFileEncrypted } from '../helpers'
-
-import styles from './styles.styl'
+import withFileUrl from '../hoc/withFileUrl'
 
 const MarkdownRenderer = ({ text }) => (
   <ReactMarkdown

package/react/Viewer/ViewersByFile/TextViewer.spec.jsx

@@ -1,12 +1,11 @@
-import React from 'react'
 import { shallow } from 'enzyme'
+import React from 'react'
 import renderer from 'react-test-renderer'
 
 import { createMockClient } from 'cozy-client'
 
-import { BreakpointsProvider } from '../../providers/Breakpoints'
-
 import { TextViewer, isMarkdown } from './TextViewer'
+import { BreakpointsProvider } from '../../providers/Breakpoints'
 
 const client = createMockClient({})
 
@@ -94,8 +93,7 @@ describe('TextViewer Component', () => {
     inst.setState({
       loading: false,
       isMarkdown: true,
-      text:
-        "It's very easy to make some words **bold** and other words *italic* with Markdown"
+      text: "It's very easy to make some words **bold** and other words *italic* with Markdown"
     })
     expect(comp.toJSON()).toMatchSnapshot()
   })

package/react/Viewer/ViewersByFile/VideoViewer.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
 
-import withFileUrl from '../hoc/withFileUrl'
-
 import styles from './styles.styl'
+import withFileUrl from '../hoc/withFileUrl'
 
 const VideoViewer = ({ file, url }) => (
   <div className={styles['viewer-videoviewer']}>

package/react/Viewer/ViewersByFile/VideoViewer.spec.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import { render, waitFor } from '@testing-library/react'
+import React from 'react'
 
+import VideoViewer from './VideoViewer'
 import { BreakpointsProvider } from '../../providers/Breakpoints'
 import DemoProvider from '../docs/DemoProvider'
 
-import VideoViewer from './VideoViewer'
-
 const file = {
   _id: 'video',
   class: 'video',

package/react/Viewer/components/ExpirationAlert.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import {
@@ -13,8 +13,8 @@ import Alert from '../../Alert'
 import Button from '../../Buttons'
 import Link from '../../Link'
 import Typography from '../../Typography'
-import { withViewerLocales } from '../hoc/withViewerLocales'
 import { useI18n } from '../../providers/I18n'
+import { withViewerLocales } from '../hoc/withViewerLocales'
 
 const FILES_DOCTYPE = 'io.cozy.files'
 

package/react/Viewer/components/ExpirationAnnotation.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { models } from 'cozy-client'
 

package/react/Viewer/components/Footer.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
 
-import useBreakpoints from '../../providers/Breakpoints'
-
 import styles from './styles.styl'
+import useBreakpoints from '../../providers/Breakpoints'
 
 const Footer = ({ children }) => {
   const { isDesktop } = useBreakpoints()

package/react/Viewer/components/InformationPanel.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 export const infoWidth = '22rem'
 

package/react/Viewer/components/Navigation.jsx

@@ -1,12 +1,11 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
+import styles from './styles.styl'
 import Icon from '../../Icon'
 import { default as ArrowIcon } from '../../Icons/DropdownClose'
 
-import styles from './styles.styl'
-
 const Navigation = ({
   className,
   hidden,

package/react/Viewer/components/PdfToolbarButton.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Button from '../../deprecated/Button'
 

package/react/Viewer/components/PrintButton.jsx

@@ -1,16 +1,16 @@
-import React, { useState, useEffect, forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState, useEffect, forwardRef } from 'react'
 
 import { useWebviewIntent } from 'cozy-intent'
 
-import Button from '../../Buttons'
-import IconButton from '../../IconButton'
-import Icon from '../../Icon'
+import { makeActions } from '../../ActionsMenu/Actions/helpers'
+import { print } from '../../ActionsMenu/Actions/print'
 import ActionsItems, {
   actionsItemsComponentPropTypes
 } from '../../ActionsMenu/ActionsItems'
-import { print } from '../../ActionsMenu/Actions/print'
-import { makeActions } from '../../ActionsMenu/Actions/helpers'
+import Button from '../../Buttons'
+import Icon from '../../Icon'
+import IconButton from '../../IconButton'
 
 const ActionComponent = forwardRef(({ action, variant, onClick }, ref) => {
   const { label, icon } = action

package/react/Viewer/components/Toolbar.jsx

@@ -1,26 +1,24 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import { useClient } from 'cozy-client'
 
-import withBreakpoints from '../../helpers/withBreakpoints'
-import { makeStyles } from '../../styles'
-import IconButton from '../../IconButton'
+import PrintButton from './PrintButton'
+import { ToolbarFilePath } from './ToolbarFilePath'
+import styles from './styles.styl'
 import Icon from '../../Icon'
-import Typography from '../../Typography'
-import PreviousIcon from '../../Icons/Previous'
+import IconButton from '../../IconButton'
 import DownloadIcon from '../../Icons/Download'
-import { useI18n } from '../../providers/I18n'
+import PreviousIcon from '../../Icons/Previous'
 import MidEllipsis from '../../MidEllipsis'
-
+import Typography from '../../Typography'
+import withBreakpoints from '../../helpers/withBreakpoints'
+import { useI18n } from '../../providers/I18n'
+import { makeStyles } from '../../styles'
+import { extractChildrenCompByName } from '../Footer/helpers'
 import { downloadFile } from '../helpers'
 import { useEncrypted } from '../providers/EncryptedProvider'
-import { extractChildrenCompByName } from '../Footer/helpers'
-import { ToolbarFilePath } from './ToolbarFilePath'
-import PrintButton from './PrintButton'
-
-import styles from './styles.styl'
 
 const useClasses = makeStyles(theme => ({
   iconButton: {

package/react/Viewer/components/ToolbarFilePath.jsx

@@ -2,11 +2,10 @@ import React, { useMemo } from 'react'
 
 import { useClient, useQuery, models } from 'cozy-client'
 
-import Link from '../../Link'
 import AppLinker from '../../AppLinker'
 import FilePath from '../../FilePath'
+import Link from '../../Link'
 import useBreakpoints from '../../providers/Breakpoints'
-
 import {
   makeWebLink,
   normalizeAndSpreadAttributes,

package/react/Viewer/components/ViewerByFile.jsx

@@ -1,23 +1,21 @@
-import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
 
-import { isMobile as isMobileDevice } from 'cozy-device-helper'
 import { isPlainText } from 'cozy-client/dist/models/file'
+import { isMobile as isMobileDevice } from 'cozy-device-helper'
 
-import { FileDoctype } from '../../proptypes'
 import withBreakpoints from '../../helpers/withBreakpoints'
-
-import ImageViewer from '../ViewersByFile/ImageViewer'
+import { FileDoctype } from '../../proptypes'
+import NoViewer from '../NoViewer'
 import AudioViewer from '../ViewersByFile/AudioViewer'
-import VideoViewer from '../ViewersByFile/VideoViewer'
-import PdfJsViewer from '../ViewersByFile/PdfJsViewer'
 import BlankPaperViewer from '../ViewersByFile/BlankPaperViewer'
-import TextViewer from '../ViewersByFile/TextViewer'
+import ImageViewer from '../ViewersByFile/ImageViewer'
+import OnlyOfficeViewer from '../ViewersByFile/OnlyOfficeViewer'
+import PdfJsViewer from '../ViewersByFile/PdfJsViewer'
 import PdfMobileViewer from '../ViewersByFile/PdfMobileViewer'
-import NoViewer from '../NoViewer'
 import ShortcutViewer from '../ViewersByFile/ShortcutViewer'
-import OnlyOfficeViewer from '../ViewersByFile/OnlyOfficeViewer'
-
+import TextViewer from '../ViewersByFile/TextViewer'
+import VideoViewer from '../ViewersByFile/VideoViewer'
 import { useEncrypted } from '../providers/EncryptedProvider'
 
 const isBlankPaper = doc => doc.metadata?.paperProps?.isBlank

package/react/Viewer/components/ViewerControls.jsx

@@ -1,19 +1,17 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import flow from 'lodash/flow'
 import cx from 'classnames'
 import Hammer from 'hammerjs'
+import flow from 'lodash/flow'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
-import { withStyles } from '../../styles'
-import withBreakpoints from '../../helpers/withBreakpoints'
-
-import { isValidForPanel } from '../helpers'
-import { toolbarPropsPropType } from '..'
 import { infoWidth } from './InformationPanel'
-import Toolbar from './Toolbar'
 import Navigation from './Navigation'
-
+import Toolbar from './Toolbar'
 import styles from './styles.styl'
+import { toolbarPropsPropType } from '..'
+import withBreakpoints from '../../helpers/withBreakpoints'
+import { withStyles } from '../../styles'
+import { isValidForPanel } from '../helpers'
 
 const ACTIONS_HIDE_DELAY = 3000
 
@@ -132,9 +130,8 @@ class ViewerControls extends Component {
       <div
         className={cx(styles['viewer-controls'], {
           [styles['viewer-controls--expanded']]: expanded,
-          [styles[
-            'viewer-controls--display-content-top'
-          ]]: shouldDisplayContentTop,
+          [styles['viewer-controls--display-content-top']]:
+            shouldDisplayContentTop,
           [classes.viewerControlsWithInfo]: showInfoPanel
         })}
         ref={wrapped => {
@@ -190,7 +187,4 @@ ViewerControls.propTypes = {
   showInfoPanel: PropTypes.bool
 }
 
-export default flow(
-  withBreakpoints(),
-  withStyles(customStyles)
-)(ViewerControls)
+export default flow(withBreakpoints(), withStyles(customStyles))(ViewerControls)

package/react/Viewer/components/ViewerControls.spec.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { render, screen } from '@testing-library/react'
+import React from 'react'
 
-import ViewerControls from './ViewerControls'
 import ViewerByFile from './ViewerByFile'
+import ViewerControls from './ViewerControls'
 
 jest.mock('../ViewersByFile/AudioViewer', () => () => <div>AudioViewer</div>)
 jest.mock('../providers/EncryptedProvider', () => ({