From 4676eaccdf5e7753f74c07cdc009c3dc5214b5ce Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Mon, 1 Mar 2021 14:59:57 +0000
Subject: [PATCH 01/10] chore(release): 45.1.0 [skip ci]

# [45.1.0](https://github.com/cozy/cozy-ui/compare/v45.0.0...v45.1.0) (2021-03-01)

### Bug Fixes

* CozyDialog Title should have ellipsis with long text ([ed7022f](https://github.com/cozy/cozy-ui/commit/ed7022f))
* Revert travis and deploy modification ([4ca25a7](https://github.com/cozy/cozy-ui/commit/4ca25a7))
* Viewer isMobile based on breakpoint, not device ([b488a69](https://github.com/cozy/cozy-ui/commit/b488a69))
* Viewer spinners should not be white in mobile ([8deb594](https://github.com/cozy/cozy-ui/commit/8deb594))

### Features

* Ability to show maintenance ([29d3c2e](https://github.com/cozy/cozy-ui/commit/29d3c2e))
* Add filter grayscale utility class to styleguide ([043ae4f](https://github.com/cozy/cozy-ui/commit/043ae4f))
* Have the option of not having a layout ([f42d40c](https://github.com/cozy/cozy-ui/commit/f42d40c))
* IntentIframe can receive props to be tweaked ([54be890](https://github.com/cozy/cozy-ui/commit/54be890))
* Use semantic colors for wizard ([2423b5c](https://github.com/cozy/cozy-ui/commit/2423b5c))
---
 CHANGELOG.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0972d2abdb..ecbc970b78 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,22 @@
+# [45.1.0](https://github.com/cozy/cozy-ui/compare/v45.0.0...v45.1.0) (2021-03-01)
+
+
+### Bug Fixes
+
+* CozyDialog Title should have ellipsis with long text ([ed7022f](https://github.com/cozy/cozy-ui/commit/ed7022f))
+* Revert travis and deploy modification ([4ca25a7](https://github.com/cozy/cozy-ui/commit/4ca25a7))
+* Viewer isMobile based on breakpoint, not device ([b488a69](https://github.com/cozy/cozy-ui/commit/b488a69))
+* Viewer spinners should not be white in mobile ([8deb594](https://github.com/cozy/cozy-ui/commit/8deb594))
+
+
+### Features
+
+* Ability to show maintenance ([29d3c2e](https://github.com/cozy/cozy-ui/commit/29d3c2e))
+* Add filter grayscale utility class to styleguide ([043ae4f](https://github.com/cozy/cozy-ui/commit/043ae4f))
+* Have the option of not having a layout ([f42d40c](https://github.com/cozy/cozy-ui/commit/f42d40c))
+* IntentIframe can receive props to be tweaked ([54be890](https://github.com/cozy/cozy-ui/commit/54be890))
+* Use semantic colors for wizard ([2423b5c](https://github.com/cozy/cozy-ui/commit/2423b5c))
+
 # [45.0.0](https://github.com/cozy/cozy-ui/compare/v44.10.1...v45.0.0) (2021-02-17)
 
 ### Bug Fixes

From 1fbf93b6ad121910ecdd6bc62c5b416985eceaf2 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Wed, 24 Feb 2021 14:16:33 +0100
Subject: [PATCH 02/10] refactor: Viewer error key in local is now an object

To store multiple error type message
---
 react/Viewer/NoNetworkViewer.jsx | 2 +-
 react/Viewer/locales/en.json     | 4 +++-
 react/Viewer/locales/fr.json     | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

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 }) => (
   <div className={styles['viewer-canceled']}>
     <Icon icon={CloudBrokenIcon} width={160} height={140} />
-    <h2>{t('Viewer.error')}</h2>
+    <h2>{t('Viewer.error.network')}</h2>
     <Button onClick={onReload} label={t('Viewer.retry')} />
   </div>
 )
diff --git a/react/Viewer/locales/en.json b/react/Viewer/locales/en.json
index 5453e76b0b..5d363a070e 100644
--- a/react/Viewer/locales/en.json
+++ b/react/Viewer/locales/en.json
@@ -2,7 +2,9 @@
   "Viewer": {
     "download": "Download",
     "retry": "Retry",
-    "error": "This file could not be loaded. Do you have a working internet connection right now?",
+    "error": {
+      "network": "This file could not be loaded. Do you have a working internet connection right now?"
+    },
     "close": "close",
     "goto": "Go to %{url}",
     "next": "Next",
diff --git a/react/Viewer/locales/fr.json b/react/Viewer/locales/fr.json
index a04f0ef484..91432b8085 100644
--- a/react/Viewer/locales/fr.json
+++ b/react/Viewer/locales/fr.json
@@ -2,7 +2,9 @@
   "Viewer": {
     "download": "Télécharger",
     "retry": "Réessayer",
-    "error": "Ce fichier n'a pas pu être chargé. Avez-vous une connexion internet qui fonctionne actuellement ?",
+    "error": {
+      "network": "Ce fichier n'a pas pu être chargé. Avez-vous une connexion internet qui fonctionne actuellement ?"
+    },
     "close": "Fermer",
     "goto": "Ouvrir %{url}",
     "next": "Suivante",

From 8c26e2c54eaa5679c6bd92181823b4e2c72c2e26 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Wed, 24 Feb 2021 16:21:19 +0100
Subject: [PATCH 03/10] fix: Viewer FileIcon use now svgr icons

---
 react/Viewer/NoViewer/FileIcon.jsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

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
   }
 

From 45c0f376382d948b24ef77f83fd60309ca125bd0 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Tue, 2 Mar 2021 14:37:04 +0100
Subject: [PATCH 04/10] feat: Viewer ImageLoader can now deal with "preview"
 size

"preview" is not really a size but an attribute of `links` file prop
in the same way of  "small", "medium" and "large"
---
 react/Viewer/ImageLoader.jsx       | 2 +-
 react/Viewer/Readme.md             | 9 +++++++++
 react/Viewer/docs/DemoProvider.jsx | 3 ++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/react/Viewer/ImageLoader.jsx b/react/Viewer/ImageLoader.jsx
index 1fa1d1d1da..0f424d12a1 100644
--- a/react/Viewer/ImageLoader.jsx
+++ b/react/Viewer/ImageLoader.jsx
@@ -141,7 +141,7 @@ class ImageLoader extends React.Component {
 ImageLoader.propTypes = {
   file: PropTypes.object.isRequired,
   render: PropTypes.func.isRequired,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'preview']),
   onError: PropTypes.func,
   renderFallback: PropTypes.func
 }
diff --git a/react/Viewer/Readme.md b/react/Viewer/Readme.md
index c6a751e81d..ee839c09b8 100644
--- a/react/Viewer/Readme.md
+++ b/react/Viewer/Readme.md
@@ -31,6 +31,15 @@ const files = [
     name: 'Sample.mp3',
     mime: 'audio/mp3'
   },
+  {
+    _id: 'pdf',
+    class: 'pdf',
+    name: 'Demo.pdf',
+    mime: 'application/pdf',
+    links: {
+      preview: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
+    }
+  },
   {
     _id: 'pdf',
     class: 'pdf',
diff --git a/react/Viewer/docs/DemoProvider.jsx b/react/Viewer/docs/DemoProvider.jsx
index 2fdcf45bc7..523c1b87a1 100644
--- a/react/Viewer/docs/DemoProvider.jsx
+++ b/react/Viewer/docs/DemoProvider.jsx
@@ -29,7 +29,8 @@ const mockClient = {
         resolve({
           data: {
             links: {
-              large: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
+              large: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG',
+              preview: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
             }
           }
         })

From ef107b117d138d94c9e0656481cfec0ceb8e0f12 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Wed, 24 Feb 2021 16:29:38 +0100
Subject: [PATCH 05/10] refactor: Remove "viewer" role on Viewer Wrapper and
 use id instead

viewer role doesn't exist according to ARIA documentation
---
 react/Viewer/ViewerWrapper.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/Viewer/ViewerWrapper.jsx b/react/Viewer/ViewerWrapper.jsx
index c73e3b72f1..a0c04f07e0 100644
--- a/react/Viewer/ViewerWrapper.jsx
+++ b/react/Viewer/ViewerWrapper.jsx
@@ -5,7 +5,7 @@ import cx from 'classnames'
 import styles from './styles.styl'
 
 const ViewerWrapper = ({ className, children }) => (
-  <div className={cx(styles['viewer-wrapper'], className)} role="viewer">
+  <div id="viewer-wrapper" className={cx(styles['viewer-wrapper'], className)}>
     {children}
   </div>
 )

From edc3f51cc4e9661305f73f990ad27c2abf165124 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Mon, 1 Mar 2021 17:01:37 +0100
Subject: [PATCH 06/10] feat: Add tap/doubletap behavior management in Viewer

to prevent doubletap to trigger 3 taps : 2 singletaps and 1 doubletap
---
 react/Viewer/ViewerControls.jsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/react/Viewer/ViewerControls.jsx b/react/Viewer/ViewerControls.jsx
index 80eb8d9edb..59aa351129 100644
--- a/react/Viewer/ViewerControls.jsx
+++ b/react/Viewer/ViewerControls.jsx
@@ -65,14 +65,23 @@ class ViewerControls extends Component {
     else if (e.direction === Hammer.DIRECTION_RIGHT) this.props.onPrevious()
   }
 
+  initGestures = () => {
+    // eslint-disable-next-line react/no-find-dom-node
+    const gestures = new Hammer(ReactDOM.findDOMNode(this.wrapped))
+    gestures.on('swipe', this.onSwipe)
+    gestures.on('tap', this.onTap)
+    const tap = gestures.get('tap')
+    const doubleTap = gestures.get('doubletap')
+    doubleTap.recognizeWith(tap)
+    tap.requireFailure(doubleTap)
+    return gestures
+  }
+
   componentDidMount() {
     this._mounted = true
     clearTimeout(this.hideTimeout)
     this.hideAfterDelay()
-    //eslint-disable-next-line react/no-find-dom-node
-    const gestures = new Hammer(ReactDOM.findDOMNode(this.wrapped))
-    gestures.on('swipe', this.onSwipe)
-    gestures.on('tap', this.onTap)
+    const gestures = this.initGestures()
     this.setState({ gestures })
   }
 

From b9e033d2d1471a992cf48d50a4134913011564d1 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Tue, 2 Mar 2021 14:22:47 +0100
Subject: [PATCH 07/10] feat: Upgrade cozy-client to 18.1.2

---
 package.json |   4 +-
 yarn.lock    | 118 +++++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 98 insertions(+), 24 deletions(-)

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/yarn.lock b/yarn.lock
index fea61873ab..16704d9cc8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1636,6 +1636,13 @@
     eslint-config-cozy-app "^2.0.0"
     jscodeshift "^0.11.0"
 
+"@cozy/minilog@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@cozy/minilog/-/minilog-1.0.0.tgz#1acc1aad849261e931e255a5f181b638315f7b84"
+  integrity sha512-IkDHF9CLh0kQeSEVsou59ar/VehvenpbEUjLfwhckJyOUqZnKAWmXy8qrBgMT5Loxr8Xjs2wmMnj0D67wP00eQ==
+  dependencies:
+    microee "0.0.6"
+
 "@emotion/cache@^10.0.9":
   version "10.0.9"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.9.tgz#e0c7b7a289f7530edcfad4dcf3858bd2e5700a6f"
@@ -1873,6 +1880,17 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
+"@jest/types@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
+  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+
 "@marionebl/sander@^0.6.0":
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/@marionebl/sander/-/sander-0.6.1.tgz#1958965874f24bc51be48875feb50d642fc41f7b"
@@ -2452,6 +2470,21 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz#508b13aa344fa4976234e75dddcc34925737d821"
+  integrity sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@^26.0.20":
+  version "26.0.20"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.20.tgz#cd2f2702ecf69e86b586e1f5223a60e454056307"
+  integrity sha512-9zi2Y+5USJRxd0FsahERhBwlcvFh6D2GLQnY2FH2BzK8J9s9omvNHIbvABwIluXa0fD8XVKMLTO0aOEuUfACAA==
+  dependencies:
+    jest-diff "^26.0.0"
+    pretty-format "^26.0.0"
+
 "@types/json-schema@^7.0.4":
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
@@ -5309,23 +5342,24 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cozy-client@^13.4.1:
-  version "13.4.1"
-  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-13.4.1.tgz#bcb3620fdabe0c5e9d0de30901a99f7b6d21ac3d"
-  integrity sha512-Xn61nmIbRC+9WwS2X8MJN8/RLbbRQtgUNuO90u7qArBsI5FF2muaH28WGGvZqM0Ldv2LvoRqb8j+CNY7K1Vsmw==
+cozy-client@^18.1.2:
+  version "18.1.2"
+  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-18.1.2.tgz#cffb75a1e05fcd844b4d07735b61beb53d0ff960"
+  integrity sha512-68QE1kF26I8IJscH4UqZ2G8AAawfSiqaqFFOgQsXrwivaVTr+ztaswwJv13N44VGHhmFfBCAzKp5nVm50zB3uA==
   dependencies:
+    "@cozy/minilog" "1.0.0"
+    "@types/jest" "^26.0.20"
     btoa "^1.2.1"
     cozy-device-helper "^1.7.3"
     cozy-logger "^1.6.0"
-    cozy-stack-client "^13.3.0"
-    isomorphic-fetch "^2.2.1"
+    cozy-stack-client "^18.0.0"
     lodash "^4.17.13"
     microee "^0.0.6"
-    minilog "https://github.com/cozy/minilog.git#master"
+    node-fetch "^2.6.1"
     open "^7.0.2"
     prop-types "^15.6.2"
     react-redux "^7.2.0"
-    redux "^3.7.2"
+    redux "3 || 4"
     redux-thunk "^2.3.0"
     server-destroy "^1.0.1"
     sift "^6.0.0"
@@ -5357,6 +5391,13 @@ cozy-doctypes@^1.69.0:
     lodash "4.17.15"
     prop-types "^15.7.2"
 
+cozy-flags@^2.5.0:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/cozy-flags/-/cozy-flags-2.5.3.tgz#5f9748bc6b9d4b378b5cef1b801716f26c0f2cf3"
+  integrity sha512-ZZ2dSUbR+pUOh/vjTk0iJxJ7EKwBDxkSVDFgrQmSuyEw8q3QflqG/SxwElAlwz5IXz/h5hM4eix9ya18MsPMoQ==
+  dependencies:
+    microee "^0.0.6"
+
 cozy-interapp@0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/cozy-interapp/-/cozy-interapp-0.5.4.tgz#2573f1800f073c84c289267d04234954d88eae0c"
@@ -5370,11 +5411,12 @@ cozy-logger@^1.6.0:
     chalk "^2.4.2"
     json-stringify-safe "5.0.1"
 
-cozy-stack-client@^13.3.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-13.3.0.tgz#e77870048d286aad42db4b5b383840d2e4b754cc"
-  integrity sha512-fBblkKVR7N3eMq305GdOVxZrn2I1uDKRf5p84Do24ig2U14UPyUVVzYHdW1qxfF5T6VUXk7J0KG0z/lwbB3iBA==
+cozy-stack-client@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-18.0.0.tgz#283bf6938d31eabbea9e29cd43b0b0b20f9b6db7"
+  integrity sha512-IPSOgO2t6eHU+zxJ3fvtJ4UYh5ueIuyPcShp9RmxuIzLQLZCU6gO2shHcK1jMi+1dBD48EgO44sEh8g8gU54zg==
   dependencies:
+    cozy-flags "^2.5.0"
     detect-node "^2.0.4"
     mime "^2.4.0"
     qs "^6.7.0"
@@ -6127,6 +6169,11 @@ diff-sequences@^24.9.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
   integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
 
+diff-sequences@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
+  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -9719,7 +9766,7 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isomorphic-fetch@^2.1.1, isomorphic-fetch@^2.2.1:
+isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
   integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
@@ -9859,6 +9906,16 @@ jest-diff@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
+jest-diff@^26.0.0:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
+  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^26.6.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
+
 jest-docblock@^21.0.0:
   version "21.2.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
@@ -9910,6 +9967,11 @@ jest-get-type@^24.9.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
   integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
 
+jest-get-type@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
+  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
+
 jest-haste-map@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
@@ -11838,12 +11900,6 @@ mini-html-webpack-plugin@^0.2.3:
   dependencies:
     webpack-sources "^1.1.0"
 
-"minilog@https://github.com/cozy/minilog.git#master":
-  version "3.1.0"
-  resolved "https://github.com/cozy/minilog.git#f01f7d9dfe20981177dd34b9662c2f077d818f82"
-  dependencies:
-    microee "0.0.6"
-
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -14640,6 +14696,16 @@ pretty-format@^25.1.0:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
+pretty-format@^26.0.0, pretty-format@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
+  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^17.0.1"
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -15175,7 +15241,7 @@ react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
-"react-is@^16.8.0 || ^17.0.0":
+"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
@@ -15759,7 +15825,15 @@ redux-thunk@^2.3.0:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
 
-redux@3.7.2, redux@^3.7.2:
+"redux@3 || 4":
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
+  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
+redux@3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
   integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
@@ -17876,7 +17950,7 @@ svgstore@^2.0.2:
     cheerio "^0.22.0"
     object-assign "^4.1.0"
 
-symbol-observable@1.2.0, symbol-observable@^1.0.3, symbol-observable@^1.1.0:
+symbol-observable@1.2.0, symbol-observable@^1.0.3, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==

From 3608587ef4ddd7d3c2e8e71c05202ee02fcc4f11 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Tue, 2 Mar 2021 17:34:08 +0100
Subject: [PATCH 08/10] feat: Add pdf viewer on mobile for Viewer component

---
 react/Viewer/ImageLoader.jsx                  |   2 +-
 react/Viewer/PdfMobileViewer.jsx              | 116 ++++++++++++++++++
 react/Viewer/PdfMobileViewer.spec.jsx         | 105 ++++++++++++++++
 react/Viewer/ViewerControls.jsx               |   4 +-
 .../ShortcutViewer.spec.jsx.snap              |  17 ++-
 .../__snapshots__/TextViewer.spec.jsx.snap    |  17 ++-
 .../Viewer/__snapshots__/index.spec.jsx.snap  |   2 +-
 react/Viewer/index.jsx                        |  11 +-
 react/Viewer/locales/en.json                  |   6 +-
 react/Viewer/locales/fr.json                  |   6 +-
 react/Viewer/styles.styl                      |   8 ++
 11 files changed, 276 insertions(+), 18 deletions(-)
 create mode 100644 react/Viewer/PdfMobileViewer.jsx
 create mode 100644 react/Viewer/PdfMobileViewer.spec.jsx

diff --git a/react/Viewer/ImageLoader.jsx b/react/Viewer/ImageLoader.jsx
index 0f424d12a1..0c3a3270ce 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
diff --git a/react/Viewer/PdfMobileViewer.jsx b/react/Viewer/PdfMobileViewer.jsx
new file mode 100644
index 0000000000..757c29a318
--- /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 <NoNetworkViewer onReload={reload} />
+  }
+
+  if (!has(file, 'links.preview')) {
+    return (
+      <NoViewer
+        file={file}
+        renderFallbackExtraContent={
+          isMobileApp()
+            ? file => (
+                <Button
+                  className={styles['viewer-noviewer-download']}
+                  onClick={() => onFileOpen(file)}
+                  label={t('Viewer.openWith')}
+                />
+              )
+            : file => <DownloadButton file={file} />
+        }
+      />
+    )
+  }
+
+  return (
+    <div className={styles['viewer-pdfMobile']}>
+      {loading && <Spinner size="xxlarge" middle noMargin />}
+      {file && (
+        <ImageLoader
+          file={file}
+          size="preview"
+          onError={onImageError}
+          key={file.id}
+          render={src => (
+            <img
+              ref={imgRef}
+              className={styles['viewer-pdfMobile--image']}
+              alt={file.name}
+              src={src}
+              onLoad={onImageLoad}
+              onClick={() => handleOnClick(file)}
+            />
+          )}
+        />
+      )}
+    </div>
+  )
+}
+
+export default withViewerLocales(PdfMobileViewer)
diff --git a/react/Viewer/PdfMobileViewer.spec.jsx b/react/Viewer/PdfMobileViewer.spec.jsx
new file mode 100644
index 0000000000..2d77b82bd5
--- /dev/null
+++ b/react/Viewer/PdfMobileViewer.spec.jsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import { render, wait } from '@testing-library/react'
+
+import { CozyProvider, createMockClient } from 'cozy-client'
+import { isMobileApp } from 'cozy-device-helper'
+
+import { I18n } from '../I18n'
+
+import { PdfMobileViewer } from './PdfMobileViewer'
+import { ImageLoader } from './ImageLoader'
+
+jest.mock('cozy-device-helper', () => ({
+  ...jest.requireActual('cozy-device-helper'),
+  isMobileApp: jest.fn()
+}))
+
+const client = createMockClient({})
+client.collection = jest.fn(() => ({
+  getDownloadLinkById: jest.fn()
+}))
+
+const file = {
+  _id: 'pdf',
+  class: 'pdf',
+  name: 'Demo.pdf',
+  mime: 'application/pdf',
+  links: {
+    preview: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
+  }
+}
+
+const setup = ({ file }) => {
+  const root = render(
+    <CozyProvider client={client}>
+      <I18n lang="en" dictRequire={() => ''}>
+        <PdfMobileViewer file={file} t={x => x} />
+      </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('error when downloading file', () => {
+    it('should show network error message on native app and browser', async () => {
+      ImageLoader.prototype.checkImageSource = jest.fn().mockRejectedValue() // fail to load image
+
+      const { root } = setup({ file })
+      const { queryByRole, getByText } = root
+
+      const isMobileAppValues = [true, false]
+
+      for (const isMobileAppValue of isMobileAppValues) {
+        isMobileApp.mockReturnValue(isMobileAppValue)
+
+        await wait()
+
+        expect(queryByRole('progressbar')).toBeFalsy()
+        expect(
+          getByText(
+            'This file could not be loaded. Do you have a working internet connection right now?'
+          )
+        )
+      }
+    })
+  })
+
+  describe('error if file as no preview', () => {
+    let fileWithoutLinks = file
+
+    beforeAll(() => {
+      fileWithoutLinks.links = {}
+    })
+
+    it('should show "download" button on browser', () => {
+      isMobileApp.mockReturnValue(false)
+
+      const { root } = setup({ file: fileWithoutLinks })
+      const { getByText, queryByRole } = root
+
+      expect(queryByRole('progressbar')).toBeFalsy()
+      expect(getByText('Download'))
+      expect(getByText(file.name))
+    })
+
+    it('should show "open with" button on native app', () => {
+      isMobileApp.mockReturnValue(true)
+
+      const { root } = setup({ file: fileWithoutLinks })
+      const { getByText, queryByRole } = root
+
+      expect(queryByRole('progressbar')).toBeFalsy()
+      expect(getByText('Viewer.openWith'))
+      expect(getByText(file.name))
+    })
+  })
+})
diff --git a/react/Viewer/ViewerControls.jsx b/react/Viewer/ViewerControls.jsx
index 59aa351129..604fb4dba1 100644
--- a/react/Viewer/ViewerControls.jsx
+++ b/react/Viewer/ViewerControls.jsx
@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import ReactDOM from 'react-dom'
 import flow from 'lodash/flow'
 import cx from 'classnames'
 import Hammer from 'hammerjs'
@@ -66,8 +65,7 @@ class ViewerControls extends Component {
   }
 
   initGestures = () => {
-    // eslint-disable-next-line react/no-find-dom-node
-    const gestures = new Hammer(ReactDOM.findDOMNode(this.wrapped))
+    const gestures = new Hammer(this.wrapped)
     gestures.on('swipe', this.onSwipe)
     gestures.on('tap', this.onTap)
     const tap = gestures.get('tap')
diff --git a/react/Viewer/__snapshots__/ShortcutViewer.spec.jsx.snap b/react/Viewer/__snapshots__/ShortcutViewer.spec.jsx.snap
index 5f40867b66..63ac527187 100644
--- a/react/Viewer/__snapshots__/ShortcutViewer.spec.jsx.snap
+++ b/react/Viewer/__snapshots__/ShortcutViewer.spec.jsx.snap
@@ -8,11 +8,22 @@ exports[`Shortcutviewer renders the component 1`] = `
     <svg
       class="styles__icon___23x3R"
       height="140"
+      viewBox="0 0 32 32"
       width="160"
     >
-      <use
-        xlink:href="#file-type-files"
-      />
+      <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="styles__viewer-filename___36bWW"
diff --git a/react/Viewer/__snapshots__/TextViewer.spec.jsx.snap b/react/Viewer/__snapshots__/TextViewer.spec.jsx.snap
index 89dc719cd9..37b78d9b39 100644
--- a/react/Viewer/__snapshots__/TextViewer.spec.jsx.snap
+++ b/react/Viewer/__snapshots__/TextViewer.spec.jsx.snap
@@ -8,11 +8,22 @@ exports[`TextViewer Component should display the error component and render with
     className="styles__icon___23x3R"
     height={140}
     style={Object {}}
+    viewBox="0 0 32 32"
     width={160}
   >
-    <use
-      xlinkHref="#file-type-files"
-    />
+    <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="styles__viewer-filename___36bWW"
diff --git a/react/Viewer/__snapshots__/index.spec.jsx.snap b/react/Viewer/__snapshots__/index.spec.jsx.snap
index a950a5b2e1..5fae7a6f4a 100644
--- a/react/Viewer/__snapshots__/index.spec.jsx.snap
+++ b/react/Viewer/__snapshots__/index.spec.jsx.snap
@@ -60,7 +60,7 @@ exports[`Viewer should render the various viewers: noviewer 1`] = `
 `;
 
 exports[`Viewer should render the various viewers: pdfviewer 1`] = `
-<withI18n(withLocales(withFileUrlClass))
+<withI18n(withLocales(PdfMobileViewer))
   file={
     Object {
       "_id": "pdffileid",
diff --git a/react/Viewer/index.jsx b/react/Viewer/index.jsx
index 0bdf60aaf1..f3fff39dd0 100644
--- a/react/Viewer/index.jsx
+++ b/react/Viewer/index.jsx
@@ -13,6 +13,7 @@ import AudioViewer from './AudioViewer'
 import VideoViewer from './VideoViewer'
 import PdfJsViewer from './PdfJsViewer'
 import TextViewer from './TextViewer'
+import PdfMobileViewer from './PdfMobileViewer'
 import NoViewer from './NoViewer'
 import ShortcutViewer from './ShortcutViewer'
 import InformationPanel from './InformationPanel'
@@ -25,7 +26,7 @@ export const isPlainText = (mimeType = '', fileName = '') => {
   return mimeType ? /^text\//.test(mimeType) : /\.(txt|md)$/.test(fileName)
 }
 
-export const getViewerComponentName = file => {
+export const getViewerComponentName = (file, isDesktop) => {
   switch (file.class) {
     case 'shortcut':
       return ShortcutViewer
@@ -36,7 +37,7 @@ export const getViewerComponentName = file => {
     case 'video':
       return isMobileDevice() ? NoViewer : VideoViewer
     case 'pdf':
-      return PdfJsViewer
+      return isDesktop ? PdfJsViewer : PdfMobileViewer
     case 'text':
       return isPlainText(file.mime, file.name) ? TextViewer : NoViewer
     default:
@@ -91,10 +92,10 @@ export class Viewer extends Component {
     }
   }
 
-  renderViewer(file) {
+  renderViewer(file, isDesktop) {
     if (!file) return null
     const { renderFallbackExtraContent } = this.props
-    const ComponentName = getViewerComponentName(file)
+    const ComponentName = getViewerComponentName(file, isDesktop)
     return (
       <ComponentName
         file={file}
@@ -139,7 +140,7 @@ export class Viewer extends Component {
           showNavigation={showNavigation}
           showInfoPanel={showInfoPanel}
         >
-          {this.renderViewer(currentFile)}
+          {this.renderViewer(currentFile, isDesktop)}
         </ViewerControls>
         {showInfoPanel && (
           <InformationPanel>
diff --git a/react/Viewer/locales/en.json b/react/Viewer/locales/en.json
index 5d363a070e..6cff82b213 100644
--- a/react/Viewer/locales/en.json
+++ b/react/Viewer/locales/en.json
@@ -1,9 +1,13 @@
 {
   "Viewer": {
     "download": "Download",
+    "openWith": "Open with...",
     "retry": "Retry",
     "error": {
-      "network": "This file could not be loaded. Do you have a working internet connection right now?"
+      "network": "This file could not be loaded. Do you have a working internet connection right now?",
+      "noapp": "No application on your device can open this file with mime type: %{fileMime} ",
+      "missing": "This file is missing",
+      "offline": "You should be connected to open this file"
     },
     "close": "close",
     "goto": "Go to %{url}",
diff --git a/react/Viewer/locales/fr.json b/react/Viewer/locales/fr.json
index 91432b8085..cafa6b1cb4 100644
--- a/react/Viewer/locales/fr.json
+++ b/react/Viewer/locales/fr.json
@@ -1,9 +1,13 @@
 {
   "Viewer": {
     "download": "Télécharger",
+    "openWith": "Ouvrir avec...",
     "retry": "Réessayer",
     "error": {
-      "network": "Ce fichier n'a pas pu être chargé. Avez-vous une connexion internet qui fonctionne actuellement ?"
+      "network": "Ce fichier n'a pas pu être chargé. Avez-vous une connexion internet qui fonctionne actuellement ?",
+      "noapp": "Aucune application de votre appareil ne peut ouvrir ce fichier avec le type mime : %{fileMime} ",
+      "missing": "Le fichier est manquant",
+      "offline": "Vous devez être connecté pour ouvrir ce fichier"
     },
     "close": "Fermer",
     "goto": "Ouvrir %{url}",
diff --git a/react/Viewer/styles.styl b/react/Viewer/styles.styl
index 4d61daf6ff..c37d215743 100644
--- a/react/Viewer/styles.styl
+++ b/react/Viewer/styles.styl
@@ -93,3 +93,11 @@
         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)' % $toolbarHeightMedium
+    margin-top $toolbarHeightMedium
+
+    &--image
+        width 100%

From 395b5435b7c9630e1e9eda83a90082e93f56a5c7 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Tue, 2 Mar 2021 17:23:14 +0100
Subject: [PATCH 09/10] feat: Set Alerter z-index to alert-index even on mobile

---
 stylus/components/alerts.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stylus/components/alerts.styl b/stylus/components/alerts.styl
index 6c01237be5..c39bd42739 100644
--- a/stylus/components/alerts.styl
+++ b/stylus/components/alerts.styl
@@ -12,7 +12,7 @@ alert-width = rem(640)
 
 $alert
     position fixed
-    z-index $alert-index-mobile
+    z-index $alert-index
     right 0
     bottom calc(3rem + env(safe-area-inset-bottom))
     left 0

From e025386327aab5f2700741e11bebc160501acaab Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Tue, 2 Mar 2021 15:54:29 +0100
Subject: [PATCH 10/10] refactor: Rename size prop to type prop in Viewer
 ImageLoader

---
 react/Viewer/ImageLoader.jsx     | 12 ++++++------
 react/Viewer/ImageViewer.jsx     |  2 +-
 react/Viewer/PdfMobileViewer.jsx |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/react/Viewer/ImageLoader.jsx b/react/Viewer/ImageLoader.jsx
index 0c3a3270ce..8f0d0b2142 100644
--- a/react/Viewer/ImageLoader.jsx
+++ b/react/Viewer/ImageLoader.jsx
@@ -82,13 +82,13 @@ export 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 @@ export class ImageLoader extends React.Component {
 ImageLoader.propTypes = {
   file: PropTypes.object.isRequired,
   render: PropTypes.func.isRequired,
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'preview']),
+  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 && (
           <ImageLoader
             file={file}
-            size="large"
+            linkType="large"
             onError={this.onImageError}
             key={file.id}
             render={src => (
diff --git a/react/Viewer/PdfMobileViewer.jsx b/react/Viewer/PdfMobileViewer.jsx
index 757c29a318..2e6fc9d824 100644
--- a/react/Viewer/PdfMobileViewer.jsx
+++ b/react/Viewer/PdfMobileViewer.jsx
@@ -94,7 +94,7 @@ export const PdfMobileViewer = ({ file, t, gestures }) => {
       {file && (
         <ImageLoader
           file={file}
-          size="preview"
+          linkType="preview"
           onError={onImageError}
           key={file.id}
           render={src => (