Add livephotos support

.drone.yml

@@ -5,7 +5,7 @@ clone:
 
 pipeline:
   signed-off-check:
-    image: nextcloudci/php7.0:php7.0-2
+    image: nextcloudci/php7.1:php7.1-16
     environment:
       - APP_NAME=gallery
       - CORE_BRANCH=master

.travis.yml

@@ -1,7 +1,6 @@
 sudo: false
 language: php
 php:
-  - 7.0
   - 7.1
   - 7.2
   - 7.3

appinfo/info.xml

@@ -55,4 +55,3 @@
 		<developer>https://github.com/nextcloud/gallery/wiki</developer>
 	</documentation>
 </info>
-

js/merged.json

@@ -1,6 +1,7 @@
 [
   "upload-helper.js",
   "vendor/bigshot/bigshot-compressed.js",
+  "vendor/livephotoskit/livephotoskit.js",
   "vendor/jquery-touch-events/src/1.0.8/jquery.mobile-events.min.js",
   "vendor/jquery.ui.touch-punch-custom.js",
   "vendor/modified-eventsource-polyfill/eventsource-polyfill.js",
@@ -22,6 +23,7 @@
   "slideshow.js",
   "slideshowcontrols.js",
   "slideshowzoomablepreview.js",
+  "slideshowlivephotos.js",
   "vendor/nextcloud/newfilemenu.js",
   "newfilemenuplugins.js",
   "app.js"

js/slideshow.js

@@ -20,6 +20,20 @@
 	var SlideShow = function () {
 	};
 
+	var LivePreview = function() {
+	};
+
+	LivePreview.prototype = {
+		reset: function() {},
+                startLivePreview: function() {
+                	var defer = $.Deferred();
+                        defer.reject();
+                        return defer.promise();
+                }
+	};
+
+	SlideShow.LivePreview = LivePreview;
+
 	SlideShow.prototype = {
 		slideshowTemplate: null,
 		container: null,
@@ -55,6 +69,7 @@
 				this.container = $('#slideshow');
 				this.zoomablePreviewContainer = this.container.find('.bigshotContainer');
 				this.zoomablePreview = new SlideShow.ZoomablePreview(this.container);
+				this.livePhotoPreview = new SlideShow.LivePreview(this.container);
 				this.controls =
 					new SlideShow.Controls(
 						this,
@@ -137,6 +152,8 @@
 		show: function (index) {
 			this.hideErrorNotification();
 			this.active = true;
+			// Clean any live photo container
+			this.livePhotoPreview.reset();
 			this.container.show();
 			this.hideContent();
 			this.container.css('background-position', 'center');
@@ -148,21 +165,24 @@
 
 				// check if we moved along while we were loading
 				if (currentImageId === index) {
+					this.zoomablePreviewContainer.css('display', 'none');
 					var image = this.images[index];
 					var transparent = this._isTransparent(image.mimeType);
 					this.controls.showActionButtons(transparent, Gallery.token, image.permissions);
 					this.errorLoadingImage = false;
 					this.currentImage = img;
-					img.setAttribute('alt', image.name);
-					$(img).css('position', 'absolute');
-					$(img).css('background-color', image.backgroundColour);
-					if (transparent && this.backgroundToggle === true) {
-						var $border = 30 / window.devicePixelRatio;
-						$(img).css('outline', $border + 'px solid ' + image.backgroundColour);
-					}
-
-					this.zoomablePreview.startBigshot(img, this.currentImage, image.mimeType);
+					$.when(this.livePhotoPreview.startLivePreview(image, this.currentImage)).fail(function() {
+						this.zoomablePreviewContainer.css('display', 'block');
+						img.setAttribute('alt', image.name);
+						$(img).css('position', 'absolute');
+						$(img).css('background-color', image.backgroundColour);
+						if (transparent && this.backgroundToggle === true) {
+							var $border = 30 / window.devicePixelRatio;
+							$(img).css('outline', $border + 'px solid ' + image.backgroundColour);
+						}
 
+						this.zoomablePreview.startBigshot(img, this.currentImage, image.mimeType);
+					}.bind(this));
 					this._setUrl(image.path);
 					this.controls.show(currentImageId);
 					this.container.find('.icon-loading-dark').hide();

js/slideshowlivephotos.js

@@ -0,0 +1,208 @@
+/**
+ * Nextcloud - Gallery
+ *
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author François Sylvestre <[email protected]>
+ *
+ * @copyright François Sylvestre 2017
+ */
+/* global SlideShow, LivePhotosKit*/
+(function ($, SlideShow, LivePhotosKit, OC) {
+	"use strict";
+	/**
+	 * Creates a zoomable preview
+	 *
+	 * @param {*} container
+	 * @constructor
+	 */
+	var LivePreview = function (container) {
+		this.container = container;
+		this.element = this.container.get(0);
+		this.livePhotoContainer = container.find('.livePhotoContainer');
+		this.livePhotoContainer.css({display: 'block', width: '1px', height: '1px'});
+		this.player = LivePhotosKit.createPlayer();
+
+		this.livePhotoContainer.append(this.player);
+		// this.livePhotoContainer.css('display', 'none');
+
+		this._detectFullscreen();
+		this._setupControls();
+
+		// Reset image position and size on orientation change
+		var self = this;
+		$(window).bind('orientationchange resize', function () {
+			self._resetView();
+		});
+	};
+
+	LivePreview.prototype = {
+		container: null,
+		element: null,
+		fullScreen: null,
+		currentImage: null,
+		mimeType: null,
+		smallImageDimension: 200 / window.devicePixelRatio,
+		smallImageScale: 2,
+
+		/**
+		 * Launches the Bigshot zoomable preview
+		 *
+		 * @param {*} image
+		 * @param {number} currentImage
+		 * @param {string} mimeType
+		 */
+		startLivePreview: function (image, currentImage) {
+			var defer = $.Deferred();
+			if (image.mimeType === "image/jpeg" && image.name.toLowerCase().indexOf('.jpg') === image.name.length - 4) {
+				var videoExt = '.mov';
+				if (image.name.substr(-4) === '.JPG') {
+					videoExt = '.MOV';
+				}
+				var videoUrl = OC.generateUrl(['../remote.php/webdav/', 
+							       encodeURI(image.path.substr(0, image.path.length - 4) + videoExt)
+							      ].join('')
+							     );
+				$.ajax({
+					url: videoUrl,
+					type: 'HEAD',
+					success: function() {
+						this.livePhotoContainer.css({display: 'block'});
+						this.currentImage = currentImage;
+						this.mimeType = image.mimeType;
+
+						this._resetView();
+
+						this.player.photoSrc = this.currentImage.src;
+						this.player.videoSrc = videoUrl;
+						defer.resolve();
+					}.bind(this),
+					error: function() {
+						this.livePhotoContainer.css('display', 'none');
+						defer.reject();
+					}.bind(this)
+				});
+			} else {
+				defer.reject();
+			}
+			return defer.promise();
+		},
+
+		/**
+		 * Resets the element for the next image to be displayed
+		 */
+		reset: function () {
+			this.livePhotoContainer.css('display', 'none');
+			this.player.photoSrc = null;
+			this.player.videoSrc = null;
+		},
+
+		/**
+		 * Throws away the zoomable preview
+		 */
+		stop: function () {
+			if (this.fullScreen !== null) {
+				this._fullScreenExit();
+			}
+		},
+
+		/**
+		 * Launches fullscreen mode if the browser supports it
+		 */
+		fullScreenToggle: function () {
+			if (this.zoomable === null) {
+				return;
+			}
+			if (this.fullScreen !== null) {
+				this._fullScreenExit();
+			} else {
+				this._fullScreenStart();
+			}
+		},
+
+		/**
+		 * Detect fullscreen capability
+		 * @private
+		 */
+		_detectFullscreen: function () {
+			this.canFullScreen = this.element.requestFullscreen !== undefined ||
+				this.element.mozRequestFullScreen !== undefined ||
+				this.element.webkitRequestFullscreen !== undefined ||
+				this.element.msRequestFullscreen !== undefined;
+		},
+
+		/**
+		 * Makes UI controls work on touchscreens. Pinch only works on iOS
+		 * @private
+		 */
+		_setupControls: function () {
+			this.player.playbackStyle = LivePhotosKit.PlaybackStyle.FULL;
+		},
+
+		/**
+		 * Resets the image to its original zoomed size
+		 *
+		 * @private
+		 */
+		_resetView: function () {
+			var imgWidth = this.currentImage.naturalWidth / window.devicePixelRatio;
+			var imgHeight = this.currentImage.naturalHeight / window.devicePixelRatio;
+
+			var origSizeW = imgWidth;
+			var origSizeH = imgHeight;
+			var ratioVt=(origSizeW/origSizeH);
+			var ratioHz=(origSizeH/origSizeW);
+			var winW = $(window).width();
+			var winH = $(window).height();
+			var screenSizeW=Math.round(winW);
+			var screenSizeH=Math.round(winH);
+			var wantedWidth, wantedHeight, wantedLeft, wantedTop;
+
+			if (origSizeW>=origSizeH) {
+				var newHeight = Math.round(screenSizeW*ratioHz);
+				if (newHeight <= screenSizeH){
+					wantedHeight = newHeight;
+					wantedWidth = screenSizeW;
+				} else{
+					wantedHeight = screenSizeH;
+					wantedWidth = Math.round(screenSizeH*ratioVt);
+				}
+			} else{
+				wantedHeight = screenSizeH;
+				wantedWidth = Math.round(screenSizeH*ratioVt);
+			}
+			wantedLeft = Math.round((screenSizeW - wantedWidth) / 2);
+			wantedTop = Math.round((screenSizeH - wantedHeight) / 2);
+
+			$(this.livePhotoContainer.children().get(0))
+				.css({
+					'width': wantedWidth + 'px', 
+					'height': wantedHeight + 'px', 
+					'top': wantedTop + 'px', 
+					'left': wantedLeft + 'px'
+				});
+		},
+
+		/**
+		 * Starts the fullscreen previews
+		 *
+		 * @private
+		 */
+		_fullScreenStart: function () {
+			this._resetView();
+		},
+
+		/**
+		 * Stops the fullscreen previews
+		 *
+		 * @private
+		 */
+		_fullScreenExit: function () {
+			this._resetView();
+		}
+	};
+
+	SlideShow.LivePreview = LivePreview;
+})(jQuery, SlideShow, LivePhotosKit, OC);

js/vendor/livephotoskit/CHANGELOG.md

@@ -0,0 +1,58 @@
+# Change Log
+
+## v1.5.4 (2018-03-29)
+
+- Included better accessibility support for LivePhotosKit JS via a number of `aria-label` and `role` attributes.
+- Added a `caption` API which gives developers the ability to add accessibile descriptions to their images.
+
+## v1.5.2 (2017-10-19)
+
+- Fixed a rare unhandled exception in Safari.
+- Added a `LivePhotosKit.MASTERING_NUMBER` property which indicates precisely which build version is being used.
+
+## v1.5.1 (2017-09-12)
+
+- Bugfixes for badge re-drawing.
+
+## v1.5.0 (2017-09-12)
+
+- New `createPlayer` and `augmentElementAsPlayer` methods.
+- Added support for new iOS 11 Live Photo Effects: Loop, Bounce, and Long Exposure.
+- Added support for graceful HTML `img` tag fallback with NoScript clients.
+
+## v1.4.11 (2017-07-20)
+
+- Laid groundwork for localizing badge strings.
+- No longer check for `photoTime` unless playing back a Live Photo `hint`.
+- Improved a number of type checks.
+
+## v1.4.10 (2017-06-05)
+
+- Fixed intermittent playback issues in Mozilla Firefox and Internet Explorer 11.
+- Updated Live Photo playback to match new playback style introduced in iOS 10.3.1.
+
+## v1.4.9 (2017-05-01)
+
+- Live Photo player is no longer selectable. This addresses the issue where a selection
+  bubble would appear on iOS Safari during a long press.
+- Fixed an intermittent memory exhaustion crash.
+
+## v1.4.8 (2017-04-22)
+
+- When a `Player` has a zero width, height or both, a warning is emitted to the console.
+- Corrected `Player.updateSize()` function declaration.
+- Reduced size of `livephotoskit.js` distributable.
+- Moved documentation links to be more prominent in `README.md`.
+
+## v1.4.6 (2017-04-20)
+
+- Changed home page URL.
+- Added reference to home page in `README.md`.
+
+## v1.4.5 (2017-04-20)
+
+- Fixed mangled copyright symbol.
+
+## v1.4.4 (2017-04-20)
+
+- Initial release.