Replace Photoswipe react library (#10144)

mozilla · Mar 3, 2021 · 0d752cc · 0d752cc
1 parent c66b913
commit 0d752cc
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 245 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -8,8 +8,6 @@ module.exports = {
   moduleDirectories: ['src', 'node_modules'],
   moduleFileExtensions: ['js', 'json', 'jsx'],
   moduleNameMapper: {
-    // Prevent un-transpiled react-photoswipe code being required.
-    '^photoswipe$': '<rootDir>/node_modules/photoswipe',
     // Alias tests for tests to be able to import helpers.
     '^tests/(.*)$': '<rootDir>/tests/$1',
     // Replaces the following formats with an empty module.

diff --git a/package.json b/package.json
@@ -186,6 +186,7 @@
     "nano-time": "1.0.0",
     "normalize.css": "8.0.1",
     "photon-colors": "3.3.2",
+    "photoswipe": "4.1.3",
     "pino": "6.11.1",
     "pino-mozlog": "2.2.0",
     "prop-types": "15.7.2",
@@ -203,7 +204,7 @@
     "react-keydown": "1.9.12",
     "react-nested-status": "0.2.1",
     "react-onclickoutside": "6.10.0",
-    "react-photoswipe": "1.3.0",
+    "react-photoswipe-gallery": "1.3.4",
     "react-redux": "5.1.2",
     "react-router": "4.3.1",
     "react-router-dom": "4.3.1",

diff --git a/src/amo/components/ScreenShots/index.js b/src/amo/components/ScreenShots/index.js
@@ -1,26 +1,13 @@
 /* @flow */
-/* global window */
 import invariant from 'invariant';
 import * as React from 'react';
-import { PhotoSwipeGallery } from 'react-photoswipe';
-import 'react-photoswipe/lib/photoswipe.css';
+import { Gallery, Item } from 'react-photoswipe-gallery';
+import 'photoswipe/dist/photoswipe.css';
+import 'photoswipe/dist/default-skin/default-skin.css';
 
 import type { PreviewType } from 'amo/types/addons';
 import './styles.scss';
 
-type ThumbBounds =
-  | false
-  | {|
-      w: number,
-      x: number,
-      y: number,
-    |};
-
-type GetThumbBoundsExtraParams = {|
-  _document: typeof document | null,
-  _window: typeof window | null,
-|};
-
 export const PHOTO_SWIPE_OPTIONS = {
   closeEl: true,
   captionEl: true,
@@ -30,67 +17,32 @@ export const PHOTO_SWIPE_OPTIONS = {
   counterEl: true,
   arrowEl: true,
   preloaderEl: true,
-  // Overload getThumbBoundsFn as workaround to
-  // https://github.com/minhtranite/react-photoswipe/issues/23
-  getThumbBoundsFn: (
-    index: number,
-    {
-      // $FlowFixMe: see https://github.com/facebook/flow/issues/183
-      _document = typeof document !== 'undefined' ? document : null,
-      _window = typeof window !== 'undefined' ? window : null,
-    }: GetThumbBoundsExtraParams = {},
-  ): ThumbBounds => {
-    if (!_document || !_window) {
-      return false;
-    }
-
-    const thumbnail = _document.querySelectorAll('.pswp-thumbnails')[index];
-
-    if (thumbnail && thumbnail.getElementsByTagName) {
-      const img = thumbnail.getElementsByTagName('img')[0];
-      const pageYScroll =
-        _window.pageYOffset ||
-        (_document.documentElement ? _document.documentElement.scrollTop : 0);
-      const rect = img.getBoundingClientRect();
-
-      return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
-    }
-
-    return false;
-  },
 };
 
-export const thumbnailContent = (item: PreviewType): React.Node => (
-  <img
-    alt={item.title}
-    className="ScreenShots-image"
-    height={item.thumbnail_h}
-    src={item.thumbnail_src}
-    title={item.title}
-    width={item.thumbnail_w}
-  />
-);
-
 type Props = {|
   previews: Array<PreviewType>,
 |};
 
 export default class ScreenShots extends React.Component<Props> {
-  onClose = (photoswipe: Object) => {
-    const index = photoswipe.getCurrentIndex();
+  viewport: HTMLElement | null;
 
+  onOpenPhotoswipe = (photoswipe: Object) => {
     invariant(this.viewport, 'viewport ref is required');
 
-    const list = this.viewport.querySelector('.pswp-thumbnails');
-
+    const list = this.viewport.querySelector('.ScreenShots-list');
     invariant(list, 'list is required');
 
-    const currentItem = list.children[index];
-    const offset = currentItem.getBoundingClientRect().left;
-    list.scrollLeft += offset - list.getBoundingClientRect().left;
-  };
+    // This is used to update the horizontal list of thumbnails in order to
+    // show the last image displayed in fullscreen mode when we close the
+    // carousel.
+    photoswipe.listen('close', () => {
+      const index = photoswipe.getCurrentIndex();
+      const currentItem = list.children[index];
+      const offset = currentItem.getBoundingClientRect().left;
 
-  viewport: HTMLElement | null;
+      list.scrollLeft += offset - list.getBoundingClientRect().left;
+    });
+  };
 
   render() {
     const { previews } = this.props;
@@ -103,13 +55,36 @@ export default class ScreenShots extends React.Component<Props> {
             this.viewport = el;
           }}
         >
-          <PhotoSwipeGallery
-            className="ScreenShots-list"
-            close={this.onClose}
-            items={previews}
-            options={PHOTO_SWIPE_OPTIONS}
-            thumbnailContent={thumbnailContent}
-          />
+          <div className="ScreenShots-list">
+            <Gallery
+              options={PHOTO_SWIPE_OPTIONS}
+              onOpen={this.onOpenPhotoswipe}
+            >
+              {previews.map((preview) => (
+                <Item
+                  key={preview.src}
+                  original={preview.src}
+                  thumbnail={preview.thumbnail_src}
+                  width={preview.w}
+                  height={preview.h}
+                  title={preview.title}
+                >
+                  {({ ref, open }) => (
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+                    <img
+                      alt={preview.title}
+                      className="ScreenShots-image"
+                      ref={ref}
+                      onClick={open}
+                      src={preview.thumbnail_src}
+                      width={preview.thumbnail_w}
+                      height={preview.thumbnail_h}
+                    />
+                  )}
+                </Item>
+              ))}
+            </Gallery>
+          </div>
         </div>
       </div>
     );

diff --git a/src/amo/components/ScreenShots/styles.scss b/src/amo/components/ScreenShots/styles.scss
@@ -7,10 +7,6 @@ $image-height: $screenshot-height - 20px;
 $screenshot-width: 320px;
 
 .ScreenShots {
-  .pswp-thumbnails {
-    line-height: 0;
-  }
-
   .pswp__caption__center {
     text-align: center;
   }
@@ -20,9 +16,10 @@ $screenshot-width: 320px;
   height: $screenshot-height;
 }
 
-.ScreenShots-list .pswp-thumbnails {
+.ScreenShots-list {
   display: flex;
   height: $screenshot-height;
+  line-height: 0;
   list-style-type: none;
   margin: 0;
   overflow-x: scroll;
@@ -31,22 +28,18 @@ $screenshot-width: 320px;
   width: auto;
 }
 
-.ScreenShots-list .pswp-thumbnail {
+.ScreenShots-image {
+  cursor: pointer;
   display: inline-block;
+  height: $image-height;
   margin: 0 10px;
+  width: $screenshot-width;
 
   &:first-of-type {
     @include margin-start(0);
   }
 }
 
-.ScreenShots-image {
-  cursor: pointer;
-  display: inline-block;
-  height: $image-height;
-  width: $screenshot-width;
-}
-
 // Don't stretch the images.
 .ScreenShots-image,
 .pswp__img {