react-image-gallery - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

build/image-gallery.js

@@ -179,5 +179,5 @@ 'use strict';
       this.removeResizeObserver();
-      if (this.intervalId) {
-        window.clearInterval(this.intervalId);
-        this.intervalId = null;
+      if (this.playPauseIntervalId) {
+        window.clearInterval(this.playPauseIntervalId);
+        this.playPauseIntervalId = null;
       }
@@ -550,3 +550,3 @@ if (this.transitionTimer) {
           {
-            key: 'slide-' + item.original,
+            key: 'slide-' + item.original + '-' + index,
             tabIndex: '-1',
@@ -582,3 +582,3 @@ className: 'image-gallery-slide ' + alignment + ' ' + originalClass,
             {
-              key: 'thumbnail-' + item.original,
+              key: 'thumbnail-' + item.original + '-' + index,
               type: 'button',
@@ -618,3 +618,3 @@ tabIndex: '0',
             type: 'button',
-            key: 'bullet-' + item.original,
+            key: 'bullet-' + item.original + '-' + index,
             className: igBulletClass,
@@ -894,9 +894,9 @@ onClick: bulletOnClick,
         case LEFT_ARROW:
-          if (this.canSlideLeft() && !this.intervalId) {
-            this.slideLeft();
+          if (this.canSlideLeft() && !this.playPauseIntervalId) {
+            this.slideLeft(event);
           }
           break;
         case RIGHT_ARROW:
-          if (this.canSlideRight() && !this.intervalId) {
-            this.slideRight();
+          if (this.canSlideRight() && !this.playPauseIntervalId) {
+            this.slideRight(event);
           }
@@ -984,3 +984,3 @@ break;
     value: function togglePlay() {
-      if (this.intervalId) {
+      if (this.playPauseIntervalId) {
         this.pause();
@@ -997,8 +997,12 @@ } else {
       */
-      var onScreenChange = this.props.onScreenChange;
+      var _props13 = this.props,
+          onScreenChange = _props13.onScreenChange,
+          useBrowserFullscreen = _props13.useBrowserFullscreen;
 
       var fullScreenElement = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
 
-      if (onScreenChange) onScreenChange(fullScreenElement);
-      this.setState({ isFullscreen: !!fullScreenElement });
+      // check if screenchange element is the gallery
+      var isFullscreen = this.imageGallery.current === fullScreenElement;
+      if (onScreenChange) onScreenChange(isFullscreen);
+      if (useBrowserFullscreen) this.setState({ isFullscreen: isFullscreen });
     }
@@ -1011,6 +1015,6 @@ }, {
           isTransitioning = _state12.isTransitioning;
-      var _props13 = this.props,
-          items = _props13.items,
-          slideDuration = _props13.slideDuration,
-          onBeforeSlide = _props13.onBeforeSlide;
+      var _props14 = this.props,
+          items = _props14.items,
+          slideDuration = _props14.slideDuration,
+          onBeforeSlide = _props14.onBeforeSlide;
 
@@ -1020,3 +1024,3 @@
         if (event) {
-          if (this.intervalId) {
+          if (this.playPauseIntervalId) {
             // user triggered event while ImageGallery is playing, reset interval
@@ -1051,9 +1055,9 @@ this.pause(false);
     key: 'slideLeft',
-    value: function slideLeft() {
+    value: function slideLeft(event) {
       var isRTL = this.props.isRTL;
 
       if (isRTL) {
-        this.slideNext();
+        this.slideNext(event);
       } else {
-        this.slidePrevious();
+        this.slidePrevious(event);
       }
@@ -1063,9 +1067,9 @@ }
     key: 'slideRight',
-    value: function slideRight() {
+    value: function slideRight(event) {
       var isRTL = this.props.isRTL;
 
       if (isRTL) {
-        this.slidePrevious();
+        this.slidePrevious(event);
       } else {
-        this.slideNext();
+        this.slideNext(event);
       }
@@ -1249,11 +1253,11 @@ }
       var shouldCallOnPlay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var _props14 = this.props,
-          onPlay = _props14.onPlay,
-          slideInterval = _props14.slideInterval,
-          slideDuration = _props14.slideDuration;
+      var _props15 = this.props,
+          onPlay = _props15.onPlay,
+          slideInterval = _props15.slideInterval,
+          slideDuration = _props15.slideDuration;
       var currentIndex = this.state.currentIndex;
 
-      if (!this.intervalId) {
+      if (!this.playPauseIntervalId) {
         this.setState({ isPlaying: true });
-        this.intervalId = window.setInterval(this.pauseOrPlay, Math.max(slideInterval, slideDuration));
+        this.playPauseIntervalId = window.setInterval(this.pauseOrPlay, Math.max(slideInterval, slideDuration));
         if (onPlay && shouldCallOnPlay) {
@@ -1271,5 +1275,5 @@ onPlay(currentIndex);
 
-      if (this.intervalId) {
-        window.clearInterval(this.intervalId);
-        this.intervalId = null;
+      if (this.playPauseIntervalId) {
+        window.clearInterval(this.playPauseIntervalId);
+        this.playPauseIntervalId = null;
         this.setState({ isPlaying: false });
@@ -1330,5 +1334,5 @@ if (onPause && shouldCallOnPause) {
           },
-          item.imageSet.map(function (source) {
+          item.imageSet.map(function (source, index) {
             return _react2.default.createElement('source', {
-              key: source.media,
+              key: 'media-' + source.srcSet + '-' + index,
               media: source.media,
@@ -1395,19 +1399,19 @@ srcSet: source.srcSet,
           isPlaying = _state15.isPlaying;
-      var _props15 = this.props,
-          additionalClass = _props15.additionalClass,
-          indexSeparator = _props15.indexSeparator,
-          isRTL = _props15.isRTL,
-          items = _props15.items,
-          thumbnailPosition = _props15.thumbnailPosition,
-          renderFullscreenButton = _props15.renderFullscreenButton,
-          renderCustomControls = _props15.renderCustomControls,
-          renderLeftNav = _props15.renderLeftNav,
-          renderRightNav = _props15.renderRightNav,
-          showBullets = _props15.showBullets,
-          showFullscreenButton = _props15.showFullscreenButton,
-          showIndex = _props15.showIndex,
-          showThumbnails = _props15.showThumbnails,
-          showNav = _props15.showNav,
-          showPlayButton = _props15.showPlayButton,
-          renderPlayPauseButton = _props15.renderPlayPauseButton;
+      var _props16 = this.props,
+          additionalClass = _props16.additionalClass,
+          indexSeparator = _props16.indexSeparator,
+          isRTL = _props16.isRTL,
+          items = _props16.items,
+          thumbnailPosition = _props16.thumbnailPosition,
+          renderFullscreenButton = _props16.renderFullscreenButton,
+          renderCustomControls = _props16.renderCustomControls,
+          renderLeftNav = _props16.renderLeftNav,
+          renderRightNav = _props16.renderRightNav,
+          showBullets = _props16.showBullets,
+          showFullscreenButton = _props16.showFullscreenButton,
+          showIndex = _props16.showIndex,
+          showThumbnails = _props16.showThumbnails,
+          showNav = _props16.showNav,
+          showPlayButton = _props16.showPlayButton,
+          renderPlayPauseButton = _props16.renderPlayPauseButton;
 
@@ -1414,0 +1418,0 @@

package.json

 {
   "name": "react-image-gallery",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React carousel image gallery component with thumbnail and mobile support",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery.js",

README.md

@@ -7,4 +7,4 @@ React Carousel Image Gallery
 
-## Live Demo (try it on mobile for swipe support)
-#### [`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
+### Live Demo (try it on mobile for swipe support)
+[`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
 
@@ -15,8 +15,10 @@ ![demo gif](https://github.com/xiaolin/react-image-gallery/raw/master/static/image_gallery_v1.0.2.gif)
 
-Features of `react-image-gallery`
-* Mobile Swipe Gestures
-* Thumbnail Navigation
-* Fullscreen Support
-* Custom Rendered Slides
-* Responsive Design
+## Features
+
+* Mobile swipe gestures
+* Thumbnail navigation
+* Fullscreen support
+* Custom rendered slides
+* RTL support
+* Responsive design
 * Tons of customization options (see props below)
@@ -23,0 +25,0 @@ * Lightweight ~7kb gzipped

src/ImageGallery.jsx

@@ -308,5 +308,5 @@ import clsx from 'clsx';
     this.removeResizeObserver();
-    if (this.intervalId) {
-      window.clearInterval(this.intervalId);
-      this.intervalId = null;
+    if (this.playPauseIntervalId) {
+      window.clearInterval(this.playPauseIntervalId);
+      this.playPauseIntervalId = null;
     }
@@ -626,3 +626,3 @@ if (this.transitionTimer) {
         <div
-          key={`slide-${item.original}`}
+          key={`slide-${item.original}-${index}`}
           tabIndex="-1"
@@ -662,3 +662,3 @@ className={`image-gallery-slide ${alignment} ${originalClass}`}
           <button
-            key={`thumbnail-${item.original}`}
+            key={`thumbnail-${item.original}-${index}`}
             type="button"
@@ -696,3 +696,3 @@ tabIndex="0"
             type="button"
-            key={`bullet-${item.original}`}
+            key={`bullet-${item.original}-${index}`}
             className={igBulletClass}
@@ -918,9 +918,9 @@ onClick={bulletOnClick}
       case LEFT_ARROW:
-        if (this.canSlideLeft() && !this.intervalId) {
-          this.slideLeft();
+        if (this.canSlideLeft() && !this.playPauseIntervalId) {
+          this.slideLeft(event);
         }
         break;
       case RIGHT_ARROW:
-        if (this.canSlideRight() && !this.intervalId) {
-          this.slideRight();
+        if (this.canSlideRight() && !this.playPauseIntervalId) {
+          this.slideRight(event);
         }
@@ -998,3 +998,3 @@ break;
   togglePlay() {
-    if (this.intervalId) {
+    if (this.playPauseIntervalId) {
       this.pause();
@@ -1011,3 +1011,3 @@ } else {
     */
-    const { onScreenChange } = this.props;
+    const { onScreenChange, useBrowserFullscreen } = this.props;
     const fullScreenElement = document.fullscreenElement
@@ -1018,4 +1018,6 @@ || document.msFullscreenElement
 
-    if (onScreenChange) onScreenChange(fullScreenElement);
-    this.setState({ isFullscreen: !!fullScreenElement });
+    // check if screenchange element is the gallery
+    const isFullscreen = this.imageGallery.current === fullScreenElement;
+    if (onScreenChange) onScreenChange(isFullscreen);
+    if (useBrowserFullscreen) this.setState({ isFullscreen });
   }
@@ -1029,3 +1031,3 @@
       if (event) {
-        if (this.intervalId) {
+        if (this.playPauseIntervalId) {
           // user triggered event while ImageGallery is playing, reset interval
@@ -1059,17 +1061,17 @@ this.pause(false);
 
-  slideLeft() {
+  slideLeft(event) {
     const { isRTL } = this.props;
     if (isRTL) {
-      this.slideNext();
+      this.slideNext(event);
     } else {
-      this.slidePrevious();
+      this.slidePrevious(event);
     }
   }
 
-  slideRight() {
+  slideRight(event) {
     const { isRTL } = this.props;
     if (isRTL) {
-      this.slidePrevious();
+      this.slidePrevious(event);
     } else {
-      this.slideNext();
+      this.slideNext(event);
     }
@@ -1220,5 +1222,5 @@ }
     const { currentIndex } = this.state;
-    if (!this.intervalId) {
+    if (!this.playPauseIntervalId) {
       this.setState({ isPlaying: true });
-      this.intervalId = window.setInterval(
+      this.playPauseIntervalId = window.setInterval(
         this.pauseOrPlay,
@@ -1236,5 +1238,5 @@ Math.max(slideInterval, slideDuration),
     const { currentIndex } = this.state;
-    if (this.intervalId) {
-      window.clearInterval(this.intervalId);
-      this.intervalId = null;
+    if (this.playPauseIntervalId) {
+      window.clearInterval(this.playPauseIntervalId);
+      this.playPauseIntervalId = null;
       this.setState({ isPlaying: false });
@@ -1286,5 +1288,5 @@ if (onPause && shouldCallOnPause) {
               {
-                item.imageSet.map(source => (
+                item.imageSet.map((source, index) => (
                   <source
-                    key={source.media}
+                    key={`media-${source.srcSet}-${index}`}
                     media={source.media}
@@ -1291,0 +1293,0 @@ srcSet={source.srcSet}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

138945

increased by0.58%

Lines of code

3370

increased by0.18%

Number of lines in readme file

261

increased by0.77%

No dependency changes