js-cloudimage-360-view 3.0.4 → 3.1.0

package/dist/ci360.service.js

@@ -1,34 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _ci = require("./ci360.utils");
-
 var _constants = require("./constants/");
-
 require("./static/css/style.css");
-
 require("./static/css/hotspots.css");
-
 var _utils = require("./utils");
-
 var _togglePopupEvents = require("./utils/hotspots/toggle-popup-events");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var CI360Viewer = /*#__PURE__*/function () {
   function CI360Viewer(container, fullscreen, hotspotsConfigs) {
     (0, _classCallCheck2.default)(this, CI360Viewer);
@@ -71,18 +58,11 @@ var CI360Viewer = /*#__PURE__*/function () {
     this.isStartedLoadOriginalImages = false;
     this.init(container);
   }
-
   (0, _createClass2.default)(CI360Viewer, [{
     key: "isReady",
     value: function isReady() {
-      var loadedXImages = this.imagesX.filter(function (image) {
-        return image;
-      });
-      var loadedYImages = this.imagesY.filter(function (image) {
-        return image;
-      });
       var totalAmount = this.amountX + this.amountY;
-      return loadedXImages.length + loadedYImages.length === totalAmount;
+      return this.imagesX.length + this.imagesY.length === totalAmount;
     }
   }, {
     key: "mouseDown",
@@ -90,15 +70,13 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (!this.imagesLoaded) return;
       var isMouseOnHotspotElement = (0, _utils.isMouseOnHotspot)();
       var pageX = event.pageX,
-          pageY = event.pageY;
+        pageY = event.pageY;
       this.hideInitialIcons();
-
       if (this.autoplay || this.loopTimeoutId) {
         this.stop();
         this.autoplay = false;
         this.isZoomReady = true;
       }
-
       this.intialPositions = {
         x: pageX,
         y: pageY
@@ -109,15 +87,12 @@ var CI360Viewer = /*#__PURE__*/function () {
       };
       this.isClicked = true;
       this.isDragged = false;
-
       if (this.hotspotsConfigs) {
         (0, _togglePopupEvents.togglePopupEvents)(this.hotspotsConfigs, event, true);
       }
-
       if (isMouseOnHotspotElement) {
         this.isClicked = false;
       }
-
       if (this.hotspotsConfigs) {
         (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
       }
@@ -126,7 +101,6 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "mouseUp",
     value: function mouseUp() {
       var _this = this;
-
       if (!this.imagesLoaded || !this.isClicked) return;
       this.movementStart = {
         x: 0,
@@ -134,20 +108,16 @@ var CI360Viewer = /*#__PURE__*/function () {
       };
       this.isStartSpin = false;
       this.isClicked = false;
-
       if (this.bottomCircle && !this.mouseTracked) {
         this.show360ViewCircleIcon();
       }
-
       if (this.hotspotsConfigs) {
         (0, _togglePopupEvents.togglePopupEvents)(this.hotspotsConfigs);
       }
-
       if (this.pointerZoom && !this.fullscreenView) {
         setTimeout(function () {
           _this.isZoomReady = true;
         }, 50);
-
         if (this.mouseTracked) {
           this.container.style.cursor = 'zoom-out';
         } else {
@@ -163,15 +133,12 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (!this.pointerZoom || this.fullscreenView) return;
       this.setCursorPosition(event);
       this.hideInitialIcons();
-
       if (!this.isStartedLoadOriginalImages && !this.isDragged && this.isZoomReady) {
         this.prepareOriginalImages(event);
       }
-
       if (this.isAllOriginalImagesLoaded && !this.isDragged && this.isZoomReady) {
         this.togglePointerZoom(event);
       }
-
       ;
     }
   }, {
@@ -179,16 +146,13 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function mouseMove(event) {
       if (!this.imagesLoaded) return;
       var pageX = event.pageX,
-          pageY = event.pageY;
-
+        pageY = event.pageY;
       if (this.mouseTracked) {
         this.setCursorPosition(event);
-
         if (!this.isClicked) {
           this.update();
         }
       }
-
       if (this.isClicked) {
         var nextPositions = {
           x: pageX,
@@ -204,11 +168,9 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "mouseLeave",
     value: function mouseLeave() {
       if (!this.imagesLoaded) return;
-
       if (this.pointerZoom && this.mouseTracked) {
         this.togglePointerZoom();
       }
-
       if (this.isMagnifyOpen) {
         this.closeMagnifier();
       }
@@ -217,49 +179,37 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "togglePointerZoom",
     value: function togglePointerZoom() {
       var _this2 = this;
-
       if (this.autoplay || this.loopTimeoutId) {
         this.stop();
         this.autoplay = false;
       }
-
       if (this.mouseTracked) {
         var zoomSteps = (0, _utils.generateZoomOutSteps)(this.pointerZoom);
         this.container.style.cursor = 'zoom-in';
         zoomSteps.forEach(function (step, index) {
           setTimeout(function () {
             _this2.zoomIntensity = step;
-
             _this2.update();
-
             var isReachedIntialScale = index === zoomSteps.length - 1;
-
             if (isReachedIntialScale) {
               _this2.mouseTracked = false;
-
               _this2.update();
             }
-
             ;
           }, (_this2.pointerZoom - step) * 200);
         });
       } else {
         if (this.bottomCircle) this.hide360ViewCircleIcon();
-
         var _zoomSteps = (0, _utils.generateZoomInSteps)(this.pointerZoom);
-
         if (this.hotspotsConfigs) {
           (0, _utils.hideHotspotsIcons)();
         }
-
         _zoomSteps.forEach(function (step) {
           setTimeout(function () {
             _this2.zoomIntensity = step;
-
             _this2.update();
           }, step * 200);
         });
-
         this.mouseTracked = true;
         this.container.style.cursor = 'zoom-out';
       }
@@ -272,7 +222,6 @@ var CI360Viewer = /*#__PURE__*/function () {
       } else {
         this.originalImagesX[index] = image;
       }
-
       var loadedOriginalXImages = this.originalImagesX.filter(function (image) {
         return image;
       });
@@ -284,7 +233,6 @@ var CI360Viewer = /*#__PURE__*/function () {
       var isAllImagesLoaded = loadedOriginalXImages.length + loadedOriginalYImages.length === this.amountX + this.amountY;
       var percentage = Math.round(totalLoadedImages / totalAmount * 100);
       this.updatePercentageInLoader(percentage);
-
       if (isAllImagesLoaded) {
         this.removeLoader();
         this.togglePointerZoom(event);
@@ -300,7 +248,6 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.loader = (0, _utils.createLoader)(this.innerBox);
       this.container.style.cursor = 'wait';
       (0, _utils.preloadOriginalImages)(this.srcXConfig, srcX, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.X, event));
-
       if (this.allowSpinY) {
         var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
         (0, _utils.preloadOriginalImages)(this.srcYConfig, srcY, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.Y, event));
@@ -312,12 +259,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (!this.imagesLoaded) return;
       var isMouseOnHotspotElement = (0, _utils.isMouseOnHotspot)();
       this.hideInitialIcons();
-
       if (this.autoplay || this.loopTimeoutId) {
         this.stop();
         this.autoplay = false;
       }
-
       this.intialPositions = {
         x: event.touches[0].clientX,
         y: event.touches[0].clientY
@@ -327,7 +272,6 @@ var CI360Viewer = /*#__PURE__*/function () {
         y: event.touches[0].clientY
       };
       this.isClicked = true;
-
       if (isMouseOnHotspotElement) {
         this.isClicked = false;
       }
@@ -348,11 +292,9 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "touchMove",
     value: function touchMove(event) {
       if (!this.isClicked || !this.imagesLoaded) return;
-
-      if (event.cancelable) {
+      if (event.cancelable && this.allowSpinY) {
         event.preventDefault();
       }
-
       var nextPositions = {
         x: event.touches[0].clientX,
         y: event.touches[0].clientY
@@ -364,11 +306,9 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "keyDownGeneral",
     value: function keyDownGeneral(event) {
       if (!this.imagesLoaded) return;
-
       if (this.glass) {
         this.closeMagnifier();
       }
-
       if (event.keyCode === 27) {
         //ESC
         if (this.mouseTracked) {
@@ -382,7 +322,6 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.glass) {
         this.closeMagnifier();
       }
-
       if (this.view360Icon) {
         this.remove360ViewIcon();
       }
@@ -409,32 +348,26 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "keyDown",
     value: function keyDown(event) {
       if (!this.imagesLoaded) return;
-
       if (this.glass) {
         this.closeMagnifier();
       }
-
       if (event.keyCode === 37) {
         // left
         this.keysReverse ? this.left() : this.right();
         this.onSpin();
       }
-
       if (event.keyCode === 39) {
         // right
         this.keysReverse ? this.right() : this.left();
         this.onSpin();
       }
-
       if (this.allowSpinY) {
         event.preventDefault();
-
         if (event.keyCode === 38) {
           // up
           this.keysReverse ? this.top() : this.bottom();
           this.onSpin();
         }
-
         if (event.keyCode === 40) {
           // down
           this.keysReverse ? this.bottom() : this.top();
@@ -448,11 +381,9 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.bottomCircle) {
         this.hide360ViewCircleIcon();
       }
-
       if (this.view360Icon) {
         this.remove360ViewIcon();
       }
-
       if (this.autoplay || this.loopTimeoutId) {
         this.stop();
         this.autoplay = false;
@@ -462,7 +393,6 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "keyUp",
     value: function keyUp(event) {
       if (!this.imagesLoaded) return;
-
       if ([37, 39].indexOf(event.keyCode) !== -1) {
         this.onFinishSpin();
       }
@@ -476,13 +406,10 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "moveActiveIndexUp",
     value: function moveActiveIndexUp(itemsSkipped) {
       var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
-
       if (this.stopAtEdges) {
         var isReachedTheEdge = this.activeImageX + itemsSkipped >= this.amountX;
-
         if (isReachedTheEdge) {
           this.activeImageX = this.amountX;
-
           if (isReverse ? this.leftElem : this.rightElem) {
             (0, _utils.addClass)(isReverse ? this.leftElem : this.rightElem, 'not-active');
           }
@@ -500,13 +427,10 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "moveActiveIndexDown",
     value: function moveActiveIndexDown(itemsSkipped) {
       var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
-
       if (this.stopAtEdges) {
         var isReachedTheEdge = this.activeImageX - itemsSkipped <= 1;
-
         if (isReachedTheEdge) {
           this.activeImageX = 1;
-
           if (isReverse ? this.rightElem : this.leftElem) {
             (0, _utils.addClass)(isReverse ? this.rightElem : this.leftElem, 'not-active');
           }
@@ -528,13 +452,10 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "moveActiveYIndexUp",
     value: function moveActiveYIndexUp(itemsSkipped) {
       var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
-
       if (this.stopAtEdges) {
         var isReachedTheEdge = this.activeImageY + itemsSkipped >= this.amountY;
-
         if (isReachedTheEdge) {
           this.activeImageY = this.amountY;
-
           if (isReverse ? this.bottomElem : this.topElem) {
             (0, _utils.addClass)(isReverse ? this.bottomElem : this.topElem, 'not-active');
           }
@@ -552,13 +473,10 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "moveActiveYIndexDown",
     value: function moveActiveYIndexDown(itemsSkipped) {
       var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
-
       if (this.stopAtEdges) {
         var isReachedTheEdge = this.activeImageY - itemsSkipped <= 1;
-
         if (isReachedTheEdge) {
           this.activeImageY = 1;
-
           if (isReverse ? this.topElem : this.bottomElem) {
             (0, _utils.addClass)(isReverse ? this.topElem : this.bottomElem, 'not-active');
           }
@@ -622,7 +540,6 @@ var CI360Viewer = /*#__PURE__*/function () {
       var isMoveTop = this.movementStart.y - currentPositionY >= this.speedFactor;
       var isMoveBottom = currentPositionY - this.movementStart.y >= this.speedFactor;
       if (this.bottomCircle) this.hide360ViewCircleIcon();
-
       if (isMoveRight && this.movingDirection === _constants.ORIENTATIONS.X) {
         this.moveRight(currentPositionX);
         this.isStartSpin = true;
@@ -684,7 +601,6 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "updateContainerAndCanvasSize",
     value: function updateContainerAndCanvasSize(image) {
       var imageAspectRatio = (0, _utils.getImageAspectRatio)(image, this.ratio);
-
       if (this.fullscreenView) {
         this.container.width = window.innerWidth * this.devicePixelRatio;
         this.container.style.width = window.innerWidth + 'px';
@@ -697,7 +613,6 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.canvas.style.height = window.innerHeight + 'px';
         return;
       }
-
       this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
       this.canvas.style.width = this.container.offsetWidth + 'px';
       this.canvas.height = this.container.offsetWidth / imageAspectRatio * this.devicePixelRatio;
@@ -711,15 +626,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       } else {
         this.resizedImagesX[index] = image;
       }
-
-      var loadedResizedXImages = this.resizedImagesX.filter(function (image) {
-        return image;
-      });
-      var loadedResizedYImages = this.resizedImagesY.filter(function (image) {
-        return image;
-      });
-      var isAllImagesLoaded = loadedResizedXImages.length + loadedResizedYImages.length === this.amountX + this.amountY;
-
+      var isAllImagesLoaded = this.resizedImagesX.length + this.resizedImagesY.length === this.amountX + this.amountY;
       if (isAllImagesLoaded) {
         this.imagesX = this.resizedImagesX;
         this.imagesY = this.resizedImagesY;
@@ -745,11 +652,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       var responsive = this.ciParams.ciToken;
       var firstImage = this.imagesX[0];
       this.update();
-      if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
+      if (!responsive || !this.requestResponsiveImages || this.container.offsetWidth < firstImage.width * 1.5) return;
       this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
       var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
       (0, _utils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.X));
-
       if (this.allowSpinY) {
         var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
         (0, _utils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.Y));
@@ -759,23 +665,19 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "update",
     value: function update() {
       var image = this.imagesX[this.activeImageX - 1];
-
       if (this.movingDirection === _constants.ORIENTATIONS.Y) {
         image = this.imagesY[this.activeImageY - 1];
       }
-
       if (!image) return;
       var ctx = this.canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
       this.updateContainerAndCanvasSize(image);
-
       if (this.fullscreenView) {
         var _contain = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
-            width = _contain.width,
-            height = _contain.height,
-            offsetX = _contain.offsetX,
-            offsetY = _contain.offsetY;
-
+          width = _contain.width,
+          height = _contain.height,
+          offsetX = _contain.offsetX,
+          offsetY = _contain.offsetY;
         ctx.drawImage(image, offsetX, offsetY, width, height);
       } else {
         if (this.mouseTracked) {
@@ -784,11 +686,9 @@ var CI360Viewer = /*#__PURE__*/function () {
           if (this.hotspotsConfigs && !this.autoplay) {
             (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection, this.isClicked);
           }
-
           ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
         }
       }
-
       if (this.info) {
         this.showImageInfo(ctx);
       }
@@ -797,11 +697,9 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "updateImageScale",
     value: function updateImageScale(ctx) {
       var image = this.originalImagesX[this.activeImageX - 1];
-
       if (this.movingDirection === _constants.ORIENTATIONS.Y) {
         image = this.originalImagesY[this.activeImageY - 1];
       }
-
       var position = this.getCursorPositionInCanvas();
       var imageWidth = this.canvas.width;
       var imageHeight = this.canvas.height;
@@ -817,7 +715,6 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.loader) {
         this.loader.style.width = percentage + '%';
       }
-
       if (this.view360Icon) {
         this.view360Icon.innerText = percentage + '%';
       }
@@ -829,14 +726,12 @@ var CI360Viewer = /*#__PURE__*/function () {
       var ctx = this.canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
       this.updateContainerAndCanvasSize(image);
-
       if (this.fullscreenView) {
         var _contain2 = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
-            offsetX = _contain2.offsetX,
-            offsetY = _contain2.offsetY,
-            width = _contain2.width,
-            height = _contain2.height;
-
+          offsetX = _contain2.offsetX,
+          offsetY = _contain2.offsetY,
+          width = _contain2.width,
+          height = _contain2.height;
         this.offset = {
           x: offsetX,
           y: offsetY
@@ -846,23 +741,18 @@ var CI360Viewer = /*#__PURE__*/function () {
       } else {
         ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
       }
-
       if (this.info) {
         this.showImageInfo(ctx);
       }
-
       if (this.magnifier) {
         this.addMagnifier();
       }
-
       if (this.boxShadow && !this.fullscreenView) {
         this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
       }
-
       if (this.bottomCircle && !this.fullscreenView) {
         this.add360ViewCircleIcon();
       }
-
       if (this.fullscreen && !this.fullscreenView) {
         this.addFullscreenIcon();
       }
@@ -872,48 +762,39 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function onAllImagesLoaded() {
       this.removeLoader();
       this.imagesLoaded = true;
-
       if (this.autoplay && this.pointerZoom) {
         this.container.style.cursor = 'zoom-in';
       } else {
         this.container.style.cursor = 'grab';
       }
-
       this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
-
       if (this.autoplay) {
         this.play();
       }
-
       if (this.disableDrag) {
         this.container.style.cursor = 'default';
       }
-
       if (this.view360Icon) {
         if (this.hide360Logo) return this.remove360ViewIcon();
-        this.view360Icon.innerText = ''; //TODO [deprecated]: remove setView360Icon in the upcoming versions
-
+        this.view360Icon.innerText = '';
+        //TODO [deprecated]: remove setView360Icon in the upcoming versions
         if (this.logoSrc) (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
       }
-
       this.initControls();
     }
   }, {
     key: "magnify",
     value: function magnify(event) {
       var _this3 = this;
-
       event.stopPropagation();
       if (this.mouseTracked) this.togglePointerZoom();
       var currentOriginalImage = (0, _utils.getCurrentOriginalImage)(this.movingDirection, this.imagesX, this.imagesY, this.activeImageX, this.activeImageY);
       this.isMagnifyOpen = true;
-
       currentOriginalImage.onload = function () {
         if (_this3.glass) {
           _this3.glass.style.cursor = 'none';
         }
       };
-
       this.glass = document.createElement('div');
       this.container.style.overflow = 'hidden';
       (0, _utils.magnify)(this.container, this.offset, currentOriginalImage, this.glass, this.magnifier || 3);
@@ -939,7 +820,6 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "setFullscreenEvents",
     value: function setFullscreenEvents(_, event) {
       if (event.type === 'click') return this.closeFullscreenModal(event);
-
       if (event.key === 'Escape' && this.container.parentNode.parentNode === document.body) {
         this.closeFullscreenModalOnEsc(event);
       }
@@ -953,18 +833,14 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "play",
     value: function play() {
       var _this4 = this;
-
       if (this.bottomCircle) this.hide360ViewCircleIcon();
       this.remove360ViewIcon();
       this.loopTimeoutId = window.setInterval(function () {
         _this4.loop(_this4.reversed);
-
         var isPlayedOnce = (0, _utils.isCompletedOneCycle)(_this4.autoplayBehavior, _this4.activeImageX, _this4.activeImageY, _this4.amountX, _this4.amountY, _this4.reversed);
-
         if (_this4.playOnce && isPlayedOnce) {
           window.clearTimeout(_this4.loopTimeoutId);
           _this4.autoplay = false;
-
           if (_this4.hotspotsConfigs) {
             (0, _utils.updateHotspots)(_this4.container, _this4.hotspotsConfigs, _this4.activeImageX, _this4.activeImageY, _this4.movingDirection, _this4.isClicked);
           }
@@ -981,12 +857,10 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "updateView",
     value: function updateView(forceUpdate, viewers) {
       var _this5 = this;
-
       var container = this.container;
       var imageProps = (0, _ci.get360ViewProps)(container);
       var srcPropsChanged = (0, _utils.isPropsChangeRequireReload)(this, imageProps);
       var reInitView = srcPropsChanged || forceUpdate;
-
       if (reInitView) {
         var oldElement = this.container;
         var viewIndex = viewers.findIndex(function (view) {
@@ -998,7 +872,6 @@ var CI360Viewer = /*#__PURE__*/function () {
         oldElement.parentNode.replaceChild(container, oldElement);
         return viewers.splice(viewIndex, 1, new CI360Viewer(container));
       }
-
       container.style.position = 'relative';
       container.style.width = '100%';
       container.style.cursor = 'default';
@@ -1009,7 +882,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      stop();
+      this.stop();
       var oldElement = this.container;
       var newElement = oldElement.cloneNode(true);
       var innerBox = newElement.querySelector('.cloudimage-360-inner-box');
@@ -1121,7 +994,6 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "remove360ViewIcon",
     value: function remove360ViewIcon() {
       if (!this.view360Icon) return;
-
       try {
         this.innerBox.removeChild(this.view360Icon);
         this.view360Icon = null;
@@ -1131,53 +1003,34 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "initControls",
     value: function initControls() {
       var _this6 = this;
-
       var onLeftStart = function onLeftStart(event) {
         event.stopPropagation();
-
         _this6.onSpin();
-
         _this6.left();
-
         _this6.loopTimeoutId = window.setInterval(_this6.left.bind(_this6), _this6.autoplaySpeed);
       };
-
       var onRightStart = function onRightStart(event) {
         event.stopPropagation();
-
         _this6.onSpin();
-
         _this6.right();
-
         _this6.loopTimeoutId = window.setInterval(_this6.right.bind(_this6), _this6.autoplaySpeed);
       };
-
       var onTopStart = function onTopStart(event) {
         event.stopPropagation();
-
         _this6.onSpin();
-
         _this6.top();
-
         _this6.loopTimeoutId = window.setInterval(_this6.top.bind(_this6), _this6.autoplaySpeed);
       };
-
       var onBottomStart = function onBottomStart(event) {
         event.stopPropagation();
-
         _this6.onSpin();
-
         _this6.bottom();
-
         _this6.loopTimeoutId = window.setInterval(_this6.bottom.bind(_this6), _this6.autoplaySpeed);
       };
-
       var onEventEnd = function onEventEnd() {
         _this6.onFinishSpin();
-
         window.clearTimeout(_this6.loopTimeoutId);
       };
-
       var controlsConfig = {
         container: this.container,
         controlReverse: this.controlReverse,
@@ -1201,7 +1054,6 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "attachEvents",
     value: function attachEvents(draggable, swipeable, keys) {
       window.addEventListener('resize', this.requestResizedImages.bind(this));
-
       if (draggable && !this.disableDrag) {
         this.container.addEventListener('click', this.mouseClick.bind(this));
         this.container.addEventListener('mousedown', this.mouseDown.bind(this));
@@ -1209,7 +1061,6 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.container.addEventListener('mouseleave', this.mouseLeave.bind(this));
         document.addEventListener('mouseup', this.mouseUp.bind(this));
       }
-
       if (swipeable && !this.disableDrag) {
         this.container.addEventListener('touchstart', this.touchStart.bind(this), {
           passive: true
@@ -1217,65 +1068,61 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.container.addEventListener('touchend', this.touchEnd.bind(this));
         this.container.addEventListener('touchmove', this.touchMove.bind(this));
       }
-
       if (keys) {
         document.addEventListener('keydown', this.keyDown.bind(this));
         document.addEventListener('keyup', this.keyUp.bind(this));
       }
-
       document.addEventListener('keydown', this.keyDownGeneral.bind(this));
     }
   }, {
     key: "init",
     value: function init(container) {
       var _this7 = this;
-
       var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
       var _get360ViewProps = (0, _ci.get360ViewProps)(container),
-          folder = _get360ViewProps.folder,
-          apiVersion = _get360ViewProps.apiVersion,
-          filenameX = _get360ViewProps.filenameX,
-          filenameY = _get360ViewProps.filenameY,
-          imageListX = _get360ViewProps.imageListX,
-          imageListY = _get360ViewProps.imageListY,
-          indexZeroBase = _get360ViewProps.indexZeroBase,
-          amountX = _get360ViewProps.amountX,
-          amountY = _get360ViewProps.amountY,
-          _get360ViewProps$drag = _get360ViewProps.draggable,
-          draggable = _get360ViewProps$drag === void 0 ? true : _get360ViewProps$drag,
-          _get360ViewProps$swip = _get360ViewProps.swipeable,
-          swipeable = _get360ViewProps$swip === void 0 ? true : _get360ViewProps$swip,
-          keys = _get360ViewProps.keys,
-          keysReverse = _get360ViewProps.keysReverse,
-          bottomCircle = _get360ViewProps.bottomCircle,
-          bottomCircleOffset = _get360ViewProps.bottomCircleOffset,
-          boxShadow = _get360ViewProps.boxShadow,
-          autoplay = _get360ViewProps.autoplay,
-          autoplayBehavior = _get360ViewProps.autoplayBehavior,
-          playOnce = _get360ViewProps.playOnce,
-          speed = _get360ViewProps.speed,
-          autoplayReverse = _get360ViewProps.autoplayReverse,
-          _get360ViewProps$disa = _get360ViewProps.disableDrag,
-          disableDrag = _get360ViewProps$disa === void 0 ? true : _get360ViewProps$disa,
-          fullscreen = _get360ViewProps.fullscreen,
-          magnifier = _get360ViewProps.magnifier,
-          ciToken = _get360ViewProps.ciToken,
-          ciFilters = _get360ViewProps.ciFilters,
-          ciTransformation = _get360ViewProps.ciTransformation,
-          lazyload = _get360ViewProps.lazyload,
-          lazySelector = _get360ViewProps.lazySelector,
-          spinReverse = _get360ViewProps.spinReverse,
-          dragSpeed = _get360ViewProps.dragSpeed,
-          stopAtEdges = _get360ViewProps.stopAtEdges,
-          controlReverse = _get360ViewProps.controlReverse,
-          hide360Logo = _get360ViewProps.hide360Logo,
-          logoSrc = _get360ViewProps.logoSrc,
-          pointerZoom = _get360ViewProps.pointerZoom,
-          ratio = _get360ViewProps.ratio,
-          _get360ViewProps$imag = _get360ViewProps.imageInfo,
-          imageInfo = _get360ViewProps$imag === void 0 ? 'black' : _get360ViewProps$imag;
-
+        folder = _get360ViewProps.folder,
+        apiVersion = _get360ViewProps.apiVersion,
+        filenameX = _get360ViewProps.filenameX,
+        filenameY = _get360ViewProps.filenameY,
+        imageListX = _get360ViewProps.imageListX,
+        imageListY = _get360ViewProps.imageListY,
+        indexZeroBase = _get360ViewProps.indexZeroBase,
+        amountX = _get360ViewProps.amountX,
+        amountY = _get360ViewProps.amountY,
+        _get360ViewProps$drag = _get360ViewProps.draggable,
+        draggable = _get360ViewProps$drag === void 0 ? true : _get360ViewProps$drag,
+        _get360ViewProps$swip = _get360ViewProps.swipeable,
+        swipeable = _get360ViewProps$swip === void 0 ? true : _get360ViewProps$swip,
+        keys = _get360ViewProps.keys,
+        keysReverse = _get360ViewProps.keysReverse,
+        bottomCircle = _get360ViewProps.bottomCircle,
+        bottomCircleOffset = _get360ViewProps.bottomCircleOffset,
+        boxShadow = _get360ViewProps.boxShadow,
+        autoplay = _get360ViewProps.autoplay,
+        autoplayBehavior = _get360ViewProps.autoplayBehavior,
+        playOnce = _get360ViewProps.playOnce,
+        speed = _get360ViewProps.speed,
+        autoplayReverse = _get360ViewProps.autoplayReverse,
+        _get360ViewProps$disa = _get360ViewProps.disableDrag,
+        disableDrag = _get360ViewProps$disa === void 0 ? true : _get360ViewProps$disa,
+        fullscreen = _get360ViewProps.fullscreen,
+        magnifier = _get360ViewProps.magnifier,
+        ciToken = _get360ViewProps.ciToken,
+        ciFilters = _get360ViewProps.ciFilters,
+        ciTransformation = _get360ViewProps.ciTransformation,
+        lazyload = _get360ViewProps.lazyload,
+        lazySelector = _get360ViewProps.lazySelector,
+        spinReverse = _get360ViewProps.spinReverse,
+        dragSpeed = _get360ViewProps.dragSpeed,
+        stopAtEdges = _get360ViewProps.stopAtEdges,
+        controlReverse = _get360ViewProps.controlReverse,
+        hide360Logo = _get360ViewProps.hide360Logo,
+        logoSrc = _get360ViewProps.logoSrc,
+        pointerZoom = _get360ViewProps.pointerZoom,
+        ratio = _get360ViewProps.ratio,
+        _get360ViewProps$imag = _get360ViewProps.imageInfo,
+        imageInfo = _get360ViewProps$imag === void 0 ? 'black' : _get360ViewProps$imag,
+        requestResponsiveImages = _get360ViewProps.requestResponsiveImages;
       var ciParams = {
         ciToken: ciToken,
         ciFilters: ciFilters,
@@ -1320,47 +1167,38 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.info = imageInfo;
       this.keys = keys;
       this.ratio = ratio && JSON.parse(ratio);
-
+      this.requestResponsiveImages = requestResponsiveImages;
       if (update) {
         (0, _utils.removeChildFromParent)(this.innerBox, this.iconsContainer);
         (0, _utils.removeChildFromParent)(this.innerBox, this.boxShadowEl);
         (0, _utils.removeChildFromParent)(this.innerBox, this.view360Icon);
         this.remove360ViewCircleIcon();
         this.iconsContainer = (0, _utils.createIconsContainer)(this.innerBox);
-
         if (!this.hide360Logo && !this.lazyload && this.logoSrc) {
           this.add360ViewIcon();
           (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
         }
-
         if (this.magnifier) {
           this.addMagnifier();
         }
-
         if (this.bottomCircle && !this.fullscreenView) {
           this.add360ViewCircleIcon();
         }
-
         if (this.fullscreen && !this.fullscreenView) {
           this.addFullscreenIcon();
         }
-
         if (this.boxShadow && !this.fullscreenView) {
           this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
         }
-
         return this.onAllImagesLoaded();
       }
-
       this.innerBox = (0, _utils.createInnerBox)(this.container);
       this.iconsContainer = (0, _utils.createIconsContainer)(this.innerBox);
       this.canvas = (0, _utils.createCanvas)(this.innerBox);
       this.loader = (0, _utils.createLoader)(this.innerBox);
-
       if (this.hotspotsConfigs && !this.fullscreenView) {
         (0, _utils.createHotspots)(container, this.hotspotsConfigs);
       }
-
       (0, _utils.applyStylesToContainer)(this.container);
       this.srcXConfig = {
         folder: folder,
@@ -1382,64 +1220,46 @@ var CI360Viewer = /*#__PURE__*/function () {
         amount: this.amountY
       });
       var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
-
       var onImageLoad = function onImageLoad(orientation, image, index) {
-        if (orientation !== _constants.ORIENTATIONS.Y) {
+        if (orientation === _constants.ORIENTATIONS.X) {
           _this7.imagesX[index] = image;
         } else {
           _this7.imagesY[index] = image;
         }
-
-        var loadedXImages = _this7.imagesX.filter(function (image) {
-          return image;
-        });
-
-        var loadedYImages = _this7.imagesY.filter(function (image) {
-          return image;
-        });
-
         var totalAmount = _this7.amountX + _this7.amountY;
-        var totalLoadedImages = loadedXImages.length + loadedYImages.length;
+        var totalLoadedImages = _this7.imagesX.length + _this7.imagesY.length;
         var isFirstImageLoaded = !index && orientation !== _constants.ORIENTATIONS.Y;
         var percentage = Math.round(totalLoadedImages / totalAmount * 100);
-
         _this7.updatePercentageInLoader(percentage);
-
         if (isFirstImageLoaded) {
           _this7.onFirstImageLoaded(image);
+        } else if (_this7.autoplay) {
+          _this7.moveRight(index);
         }
-
         if (_this7.isReady()) {
           _this7.onAllImagesLoaded();
         }
       };
-
       var loadImages = function loadImages() {
         (0, _utils.preloadImages)(_this7.srcXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
-
         if (_this7.allowSpinY) {
           var srcY = (0, _utils.generateImagesPath)(_this7.srcYConfig);
           (0, _utils.preloadImages)(_this7.srcYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
         }
       };
-
       if (lazyload) {
         var onFirstImageLoad = function onFirstImageLoad(image) {
           _this7.innerBox.removeChild(image);
-
           loadImages();
         };
-
         (0, _utils.initLazyload)(srcX, this.srcXConfig, onFirstImageLoad);
       } else {
         loadImages();
       }
-
       this.attachEvents(draggable, swipeable, keys);
     }
   }]);
   return CI360Viewer;
 }();
-
 var _default = CI360Viewer;
 exports.default = _default;