feat: add support for selected image quality parameters (#147)

kommitters · Sep 6, 2024 · 46b3650 · 46b3650
1 parent 331cfaa
commit 46b3650
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 2 deletions.
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/src/controlPanel.js b/src/controlPanel.js
@@ -292,7 +292,7 @@ export default class ControlPanel {
     url, author, profileLink, downloadLocation,
   }) {
     this.onSelectImage({
-      url,
+      url: this.unsplashClient.dynamicImageResizing(url),
       unsplash: {
         author,
         profileLink,

diff --git a/src/unsplashClient.js b/src/unsplashClient.js
@@ -8,6 +8,7 @@ export default class UnsplashClient {
     // Remove trailing slashes from the URL
     this.apiUrl = config && config.apiUrl.replace(/\/+$/, '');
     this.perPage = config && config.maxResults ? config.maxResults : 30;
+    this.imageParamsModifier = config && config.imageParams ? config.imageParams : {};
   }
 
   /**
@@ -56,6 +57,22 @@ export default class UnsplashClient {
     };
   }
 
+  /**
+   * Applies image resize parameters on the given URL.
+   * https://unsplash.com/documentation#dynamically-resizable-images
+   * @param {String} imageUrl Url of the selected image
+   * @returns Url of the selected image with dynamic resizing parameters
+   */
+  dynamicImageResizing(imageUrl) {
+    const newParams = Object.entries(this.imageParamsModifier);
+    const [urlBase, queryString] = imageUrl.split('?');
+    const existingParams = new URLSearchParams(queryString);
+    newParams.forEach(([key, value]) => {
+      existingParams.set(key, value);
+    });
+    return `${urlBase}?${existingParams.toString()}`;
+  }
+
   /**
   * Download image from Unsplash
   * Required by Unsplash API Guideline for tracking purposes

diff --git a/test/fixtures/unsplashClient.js b/test/fixtures/unsplashClient.js
@@ -4,6 +4,11 @@ const unsplashConfig = {
   apiUrl: 'http://localhost',
   appName: 'DemoApp',
   maxResults: 30,
+  imageParams: {
+    q: 90,
+    w: 1500,
+    fit: 'max',
+  },
 };
 
 /**

diff --git a/test/unsplashClient.test.js b/test/unsplashClient.test.js
@@ -64,4 +64,26 @@ describe('UnsplashClient', () => {
       });
     });
   });
+  describe('modification of parameters of the selected image', () => {
+    beforeEach(() => {
+      unsplashClient = createUnsplashClient();
+    });
+    it('add new parameters to URL without existing parameters', () => {
+      const inputUrl = 'https://example.com/image.jpg?ixid=M3w2NTA0MjJ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzI1NTQzOTQ2fDA&ixlib=rb-4.0.3';
+      const result = unsplashClient.dynamicImageResizing(inputUrl);
+      expect(result).toBe(`${inputUrl}&q=90&w=1500&fit=max`);
+    });
+
+    it('modify existing parameters in URL', () => {
+      const inputUrl = 'https://example.com/image.jpg?ixid=M3w2NTA0MjJ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzI1NTQzOTQ2fDA&ixlib=rb-4.0.3&q=60&w=100&fit=min';
+      const result = unsplashClient.dynamicImageResizing(inputUrl);
+      expect(result).toBe('https://example.com/image.jpg?ixid=M3w2NTA0MjJ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzI1NTQzOTQ2fDA&ixlib=rb-4.0.3&q=90&w=1500&fit=max');
+    });
+
+    it('modify the existing and new parameters in the URL', () => {
+      const inputUrl = 'https://example.com/image.jpg?ixid=M3w2NTA0MjJ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzI1NTQzOTQ2fDA&ixlib=rb-4.0.3&w=100';
+      const result = unsplashClient.dynamicImageResizing(inputUrl);
+      expect(result).toBe('https://example.com/image.jpg?ixid=M3w2NTA0MjJ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzI1NTQzOTQ2fDA&ixlib=rb-4.0.3&w=1500&q=90&fit=max');
+    });
+  });
 });