wip(webp)

README.md

@@ -44,3 +44,7 @@ yarn release
 
 SQLite is recommended for local development. To fix bug in production, it is better to use PostgreSQL
 https://www.postgresql.org/download/
+
+# Webp
+
+cwebp -q 75 img5.jpg -o maeh-75.webp

back/src/infrastructure/external_services/dropbox-client.js

@@ -1,93 +1,122 @@
-import { flatten } from 'lodash'
-import Dropbox from 'dropbox'
-import env from '../env/env'
+import { flatten } from 'lodash';
+import Dropbox from 'dropbox';
+import env from '../env/env';
 
-const DropboxApi = new Dropbox({ accessToken: env('DROPBOX_CLIENT_ID') })
+const DropboxApi = new Dropbox({ accessToken: env('DROPBOX_CLIENT_ID') });
 
 const DropboxClient = {
 
   async getFilesListContinue(dropboxAnswer) {
     if (dropboxAnswer.has_more) {
-      const filesListFolderContinue = await DropboxApi.filesListFolderContinue({ cursor: dropboxAnswer.cursor })
+      const filesListFolderContinue = await DropboxApi.filesListFolderContinue({ cursor: dropboxAnswer.cursor });
       return this.getFilesListContinue({
         has_more: filesListFolderContinue.has_more,
         entries: flatten([dropboxAnswer.entries, filesListFolderContinue.entries]),
         cursor: filesListFolderContinue.cursor,
-      })
+      });
     }
-    return dropboxAnswer
+    return dropboxAnswer;
   },
 
   getAllDropboxFoldersMetadatas() {
     return DropboxApi.filesListFolder({ path: '', recursive: true })
       .then(dropboxAnswer => this.getFilesListContinue(dropboxAnswer))
       .then(response => response.entries)
       .catch(err => {
-        console.error('Erreur lors de la récupération de tous les fichiers Dropbox : ')
-        console.error(err)
-        throw err
-      })
+        console.error('Erreur lors de la récupération de tous les fichiers Dropbox : ');
+        console.error(err);
+        throw err;
+      });
   },
 
   getFilesFolderPaths(id) {
     return DropboxApi.filesListFolder({ path: `/${id}/`, recursive: true })
       .then(response => response.entries.map(entry => entry.path_display))
       .catch(err => {
-        console.error(`Erreur lors de la récupération de toutes les photos de l’article Dropbox : ${id}`)
-        console.error(err)
-        throw err
-      })
+        console.error(`Erreur lors de la récupération de toutes les photos de l’article Dropbox : ${id}`);
+        console.error(err);
+        throw err;
+      });
   },
 
   getFrTextFileStream(id) {
-    const extension = id < 64 ? 'php' : 'txt'
+    const extension = id < 64 ? 'php' : 'txt';
     return DropboxApi.filesGetTemporaryLink({ path: `/${id}/fr.${extension}` })
       .then(result => result.link)
       .catch(err => {
-        console.error('Erreur lors de la récupération du fichier texte de : ', `/${id}/fr.${extension}`)
-        console.error(err)
-        throw err
-      })
+        console.error('Erreur lors de la récupération du fichier texte de : ', `/${id}/fr.${extension}`);
+        console.error(err);
+        throw err;
+      });
   },
 
   getEnTextFileStream(id) {
-    const extension = id < 64 ? 'php' : 'txt'
+    const extension = id < 64 ? 'php' : 'txt';
     return DropboxApi.filesGetTemporaryLink({ path: `/${id}/en.${extension}` })
       .then(result => result.link)
       .catch(err => {
-        console.error('Erreur lors de la récupération du fichier texte de : ', `/${id}/en.${extension}`)
-        console.error(err)
-        throw err
-      })
+        console.error('Erreur lors de la récupération du fichier texte de : ', `/${id}/en.${extension}`);
+        console.error(err);
+        throw err;
+      });
   },
 
   createSharedLink(path) {
-    const options = { path, short_url: false }
+    const options = { path, short_url: false };
     return DropboxApi.sharingCreateSharedLink(options)
       .catch(err => {
         if (err.error && err.error.code === 'ECONNRESET') {
           setTimeout(() => DropboxApi.sharingCreateSharedLink(options)
             .then(response => {
-              console.info('Erreur ECONNRESET fixed after Timeout')
-              return response
+              console.info('Erreur ECONNRESET fixed after Timeout');
+              return response;
             })
             .catch(err2 => {
               if (err2.error.code === 'ECONNRESET') {
-                console.error('Erreur ECONNRESET lors de la création du lien de : ', path)
-                console.error('Dropbox TCP error ECNNRESET', err2)
-                return Promise.resolve({})
+                console.error('Erreur ECONNRESET lors de la création du lien de : ', path);
+                console.error('Dropbox TCP error ECNNRESET', err2);
+                return Promise.resolve({});
               }
-              console.error('Erreur étrange (ECONNRESET puis autre) lors de la création du lien de : ', path)
-              console.error(err2)
-              return Promise.resolve({})
-            }), 1000)
+              console.error('Erreur étrange (ECONNRESET puis autre) lors de la création du lien de : ', path);
+              console.error(err2);
+              return Promise.resolve({});
+            }), 1000);
         }
-        console.error('Erreur lors de la création du lien de : ', path)
-        console.error(err)
-        return Promise.resolve({})
-      })
+        console.error('Erreur lors de la création du lien de : ', path);
+        console.error(err);
+        return Promise.resolve({});
+      });
+  },
+
+  filesDownload(path) {
+    // https://dropbox.github.io/dropbox-sdk-js/Dropbox.html
+    const arg = {
+      path,
+    };
+    return DropboxApi.filesDownload(arg); // https://www.dropbox.com/developers/documentation/http/documentation#files-upload
   },
 
-}
+  filesUpload({path, file}) {
+    const arg = {
+      path,
+      mode: {
+        '.tag': 'update',
+        update: 'a1c10ce0dd78',
+      },
+      autorename: false,
+      mute: false,
+      strict_conflict: false,
+      contents: file,
+    };
+    // https://dropbox.github.io/dropbox-sdk-js/Dropbox.html
+    return DropboxApi.filesUpload(arg)
+      .then(function (response) {
+        console.log(response);
+      })
+      .catch(error => {
+        console.error(error);
+      }); // https://www.dropbox.com/developers/documentation/http/documentation#files-upload
+  },
+};
 
-module.exports = DropboxClient
+module.exports = DropboxClient;

back/src/use_cases/convert-image.js

@@ -0,0 +1,21 @@
+import DropboxClient from '../infrastructure/external_services/dropbox-client'
+
+const convertJpgToWebp = async jpgFile => {
+  const webpFile = await jpgFile
+  return webpFile
+}
+
+const convertImage = async () => {
+  try {
+    const id = '85'
+    const jpgFile = await DropboxClient.filesDownload('/85/img0.jpg')
+    const file = await convertJpgToWebp(jpgFile)
+    await DropboxClient.filesUpload({ path: `/${id}/img0.webp`, file })
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+export default {
+  convertImage,
+}

back/test/infrastructure/features/images.spec.js

@@ -0,0 +1,18 @@
+import { expect, request } from '../../test-helper'
+import app from '../../../app'
+import ConvertImage from '../../../src/use_cases/convert-image';
+
+describe('Integration | Routes | index route', () => {
+  it('should be 404', done => {
+    request(app)
+      .get('/api/images')
+      .expect('Content-Type', /json/)
+      .expect('Content-Type', 'application/json; charset=utf-8')
+      .expect(200, (err, res) => {
+        // then
+        expect(ConvertImage.convertImage).to.have.been.calledWith()
+        // expect(res.body).to.deep.equal(persistedPositions)
+        done()
+      })
+  })
+})

back/test/infrastructure/features/positions.spec.js

@@ -20,7 +20,7 @@ describe('Integration | Routes | positions route', () => {
       // when
       request(app)
         .get('/api/positions/last')
-        .send()
+        .send() // DELETE ME?
         .expect('Content-Type', 'application/json; charset=utf-8')
         .expect(200, (err, res) => {
           // then

back/test/use_cases/add-comment.spec.js

@@ -1,4 +1,3 @@
-// import lolex from 'lolex'
 import { expect, sinon } from '../test-helper'
 import AddComment from '../../src/use_cases/add-comment'
 import CommentRepository from '../../src/domain/repositories/comment-repository'
@@ -24,14 +23,6 @@ describe('Unit | AddComment | addComment', () => {
     mailJet.sendEmail.restore()
   })
 
-  // beforeEach(() => {
-  //   clock = lolex.install({ now: new Date(now).valueOf() })
-  // })
-  //
-  // afterEach(() => {
-  //   clock.uninstall()
-  // })
-
   it('should call CommentRepository to create comment', () => {
     // when
     AddComment.addComment(comment, dropboxId)

back/test/use_cases/convert-image.spec.js

@@ -0,0 +1,58 @@
+import { expect, sinon } from '../test-helper'
+import DropboxClient from '../../src/infrastructure/external_services/dropbox-client'
+import ConvertImage from '../../src/use_cases/convert-image'
+
+describe.only('Unit | ConvertImage | convertImage', () => {
+  const jpgFile = {}
+
+  beforeEach(() => {
+    sinon.stub(DropboxClient, 'filesDownload').resolves(jpgFile)
+    sinon.stub(DropboxClient, 'filesUpload').resolves(true)
+  })
+  afterEach(() => {
+    DropboxClient.filesDownload.restore()
+    DropboxClient.filesUpload.restore()
+  })
+
+  it('should download image from dropbox', async () => {
+    // When
+    await ConvertImage.convertImage()
+
+    // Then
+    expect(DropboxClient.filesDownload).to.have.been.calledWith('/85/img0.jpg')
+  })
+
+  xit('should convert to webp', () => {
+    // Given
+
+    // When
+
+    // Then
+    expect().to
+  })
+
+  it('should upload to dropbox', async () => {
+    // When
+    await ConvertImage.convertImage()
+
+    // Then
+    expect(DropboxClient.filesUpload).to.have.been.calledWith({path: '/85/img0.webp', file: jpgFile})
+  })
+
+  it('should throw error', async () => {
+    // Given
+    DropboxClient.filesUpload.restore()
+    sinon.stub(DropboxClient, 'filesUpload').rejects('error')
+    sinon.stub(console, 'error')
+
+    // When
+    try {
+      await ConvertImage.convertImage()
+    } catch (error) {
+      expect(error.message).to.equal('error')
+    } finally {
+      console.error.restore()
+    }
+  })
+})
+

front/components/ArticleCard/ArticleCard.vue

@@ -24,12 +24,19 @@
             <div v-lazy:background-image="article.imgLink"/>
           </div>
         </template>
-        <img
-          v-else
-          :src="article.imgLink"
-          :alt="articleTitle"
-          class="article__image important"
-          width="200">
+        <picture v-else>
+          <source
+            type="image/webp"
+            :srcset="webpId(article)">
+          <source
+            type="image/jpeg"
+            :srcset="article.imgLink">
+          <img
+            :src="article.imgLink"
+            :alt="articleTitle"
+            class="article__image important"
+            width="200">
+        </picture>
       </div>
       <footer class="article__footer">
         <template v-if="adminMode">
@@ -94,6 +101,13 @@
       },
     },
     methods: {
+      webpId(article) {
+        if (article.dropboxId === '89') {return '/iran-10.webp'}
+        if (article.dropboxId === '88') {return '/iran-8.webp'}
+        if (article.dropboxId === '87') {return '/iran-5.webp'}
+        return '/iran-3.webp'
+      },
+
       viewArticle() {
         this.goToArticle()
       },

front/components/ChapterCard/ChapterCard.vue

@@ -10,12 +10,16 @@
         </p>
       </header>
       <div class="chapter__content">
-        <img
-          v-if="imgLink"
-          :src="imgLink"
-          :alt="chapterAlt"
-          rel="noreferrer"
-          class="chapter__image">
+        <picture v-if="imgLink">
+          <source
+            type="image/webp"
+            :srcset="webpId()">
+          <img
+            :src="imgLink"
+            :alt="chapterAlt"
+            rel="noreferrer"
+            class="chapter__image">
+        </picture>
         <span v-else>
           {{ $t("missingImage") }}
         </span>
@@ -79,6 +83,15 @@
           })
       },
     },
+    methods: {
+      webpId() {
+        if (this.imgLink === 'https://www.dropbox.com/s/c1by9r4x1go9533/img5.jpg?raw=1') {return '/maeh-50.webp'}
+        if (this.imgLink === 'https://www.dropbox.com/s/y9sgxzgck9ao197/img4.jpg?raw=1') {return '/maeh-60.webp'}
+        if (this.imgLink === 'https://www.dropbox.com/s/azin0467vwjg82s/img3.jpg?raw=1') {return '/maeh-70.webp'}
+        if (this.imgLink === 'https://www.dropbox.com/s/b8n3rf90m2i49zd/img2.jpg?raw=1') {return '/maeh-80.webp'}
+        return '/maeh-100.webp'
+      },
+    },
     i18n: {
       messages: {
         fr: {

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+