Rotate functionality

appinfo/info.xml

@@ -34,7 +34,7 @@
 		files app and adds a gallery view to public links.
 		Compatible with Firefox, Chrome and Internet Explorer 11
 	</description>
-	<version>18.3.0</version>
+	<version>18.3.1</version>
 	<licence>agpl</licence>
 	<author>Olivier Paroz, Robin Appelman</author>
 	<namespace>Gallery</namespace>

appinfo/routes.php

@@ -96,6 +96,16 @@
 			'url'  => '/preview/{fileId}',
 			'verb' => 'GET'
 		],
+		[
+			'name' => 'preview#get_modifications',
+			'url'  => '/preview/modifications/{fileId}',
+			'verb' => 'GET'
+		],
+		[
+			'name' => 'preview#set_modifications',
+			'url'  => '/preview/modifications/{fileId}',
+			'verb' => 'POST'
+		],
 		/**
 		 * Public services
 		 */

js/slideshow.js

@@ -26,6 +26,7 @@
 		zoomablePreviewContainer: null,
 		controls: null,
 		imageCache: {},
+		imageModificationsCache: {},
 		/** {Image} */
 		currentImage: null,
 		errorLoadingImage: false,
@@ -36,6 +37,7 @@
 		// We need 6 hexas for comparison reasons
 		darkBackgroundColour: '#000000',
 		lightBackgroundColour: '#ffffff',
+		currentRotation: 0,
 
 		/**
 		 * Initialises the slideshow
@@ -135,6 +137,7 @@
 		 * @returns {*}
 		 */
 		show: function (index) {
+			this.currentImageIndex = index;
 			this.hideErrorNotification();
 			this.active = true;
 			this.container.show();
@@ -143,7 +146,9 @@
 			this._hideImage();
 			this.container.find('.icon-loading-dark').show();
 			var currentImageId = index;
-			return this.loadImage(this.images[index]).then(function (img) {
+			return this.loadImage(this.images[index]).then(function (results) {
+				var img = results[0];
+				var params = results[1];
 				this.container.css('background-position', '-10000px 0');
 
 				// check if we moved along while we were loading
@@ -162,6 +167,13 @@
 					}
 
 					this.zoomablePreview.startBigshot(img, this.currentImage, image.mimeType);
+					this.currentRotation = 0;
+					for (var i=0;i<params.length;i++) {
+						if (params[i].operation === 'rotate') {
+							this.currentRotation = params[i].value;
+						}
+					}
+					this.zoomablePreview.setRotation(this.currentRotation);
 
 					this._setUrl(image.path);
 					this.controls.show(currentImageId);
@@ -180,6 +192,19 @@
 			}.bind(this));
 		},
 
+		rotate: function(direction) {
+			this.currentRotation = (this.currentRotation + direction + 4) % 4;
+			this.zoomablePreview.setRotation(this.currentRotation);
+			$.ajax({
+				type: 'POST',
+				url: OC.generateUrl('apps/gallery/preview/modifications/' + this.images[this.currentImageIndex].fileId),
+				data: JSON.stringify([{operation: 'rotate', value: this.currentRotation}]),
+				success: function () {
+					this.imageModificationsCache[this.images[this.currentImageIndex].url] = null;
+				}.bind(this)
+			});
+		},
+
 		/**
 		 * Loads the image to show in the slideshow and preloads the next one
 		 *
@@ -212,7 +237,17 @@
 					image.src = url;
 				}
 			}
-			return this.imageCache[url];
+			if (!this.imageModificationsCache[url]) {
+				this.imageModificationsCache[url] = new $.Deferred();
+				$.ajax({
+					type: 'GET',
+					url: OC.generateUrl('apps/gallery/preview/modifications/' + preview.fileId),
+					success: function (response) {
+						this.imageModificationsCache[url].resolve(response);
+					}.bind(this)
+				});
+			}
+			return Promise.all([this.imageCache[url], this.imageModificationsCache[url]]);
 		},
 
 		/**

js/slideshowcontrols.js

@@ -151,6 +151,8 @@
 			if (!isPublic && canShare) {
 				this.showButton('.shareImage');
 			}
+			this.showButton('.rotateLeft');
+			this.showButton('.rotateRight');
 		},
 
 		/**
@@ -161,6 +163,8 @@
 			this.hideButton('.downloadImage');
 			this.hideButton('.deleteImage');
 			this.hideButton('.shareImage');
+			this.hideButton('.rotateLeft');
+			this.hideButton('.rotateRight');
 		},
 
 		/**
@@ -214,6 +218,8 @@
 		 * @private
 		 */
 		_specialButtonSetup: function (makeCallBack) {
+			this.container.find('.rotateLeft').click(makeCallBack(this._rotateLeft));
+			this.container.find('.rotateRight').click(makeCallBack(this._rotateRight));
 			this.container.find('.downloadImage').click(makeCallBack(this._getImageDownload));
 			this.container.find('.deleteImage').click(makeCallBack(this._deleteImage));
 			this.container.find('.shareImage').click(makeCallBack(this.share));
@@ -259,13 +265,11 @@
 		 */
 		_keyCodeSetup: function (makeCallBack) {
 			$(document).keyup(function (evt) {
-				if (evt.target.tagName.toLowerCase() === 'input') {
-					return;
-				}
-
 				var escKey = 27;
 				var leftKey = 37;
 				var rightKey = 39;
+				var lKey = 76;
+				var rKey = 82;
 				var spaceKey = 32;
 				var fKey = 70;
 				var zoomOutKeys = [48, 96, 79, 40]; // zeros, o or down key
@@ -276,6 +280,10 @@
 					makeCallBack(this._previous)(evt);
 				} else if (evt.keyCode === rightKey) {
 					makeCallBack(this._next)(evt);
+				} else if (evt.keyCode === rKey) {
+					makeCallBack(this._rotateRight)(evt);
+				} else if (evt.keyCode === lKey) {
+					makeCallBack(this._rotateLeft)(evt);
 				} else if (evt.keyCode === spaceKey) {
 					makeCallBack(this._playPauseToggle)(evt);
 				} else if (evt.keyCode === fKey) {
@@ -478,6 +486,14 @@
 			nameElement.text(imageName);
 		},
 
+		_rotateLeft: function () {
+			this.slideshow.rotate(-1);
+		},
+
+		_rotateRight: function () {
+			this.slideshow.rotate(1);
+		},
+
 		/**
 		 * Delete the image from the slideshow
 		 * @private

js/slideshowzoomablepreview.js

@@ -223,15 +223,32 @@
 				this.mimeType === 'image/svg+xml') {
 				// The image is larger than the window, or we are fullScreen,
 				// or this is an SVG. Set minimum zoom and call zoomToFit.
-				this.zoomable.setMinZoom(this.zoomable.getZoomToFitValue());
-				this.zoomable.zoomToFit();
+				var width = this.zoomable.width;
+				var height = this.zoomable.height;
+				// Image is rotated left or right
+				if (this.rotation % 2 == 1) {
+					width = this.zoomable.height;
+					height = this.zoomable.width;
+				}
+				var zoomValue = Math.min (
+					this.zoomable.fitZoom (width, this.zoomable.container.clientWidth),
+					this.zoomable.fitZoom (height, this.zoomable.container.clientHeight));
+				this.zoomable.setMinZoom(zoomValue);
+				this.zoomable.moveTo(null, null, zoomValue);
 			} else {
 				// Zoom to the image size.
 				this.zoomable.setMinZoom(0);
 				this.zoomable.setZoom(0, true);
 			}
 		},
 
+		rotation: 0,
+		setRotation: function(rotation) {
+			this.rotation = rotation;
+			this.container.find('.bigshotContainer').find('img').css('transform', 'rotate('+(this.rotation*90)+'deg)');
+			this._resetZoom();
+		},
+
 		/**
 		 * Starts the fullscreen previews
 		 *

lib/AppInfo/Application.php

@@ -39,13 +39,15 @@
 use OCA\Gallery\Controller\PreviewController;
 use OCA\Gallery\Controller\PreviewPublicController;
 use OCA\Gallery\Controller\PreviewApiController;
+use OCA\Gallery\Db\FilePropertiesMapper;
 use OCA\Gallery\Environment\Environment;
 use OCA\Gallery\Service\SearchFolderService;
 use OCA\Gallery\Service\ConfigService;
 use OCA\Gallery\Service\SearchMediaService;
 use OCA\Gallery\Service\ThumbnailService;
 use OCA\Gallery\Service\PreviewService;
 use OCA\Gallery\Service\DownloadService;
+use OCA\Gallery\Service\FilePropertiesService;
 use OCA\Gallery\Middleware\SharingCheckMiddleware;
 use OCA\Gallery\Middleware\EnvCheckMiddleware;
 use OCA\Gallery\Utility\EventSource;
@@ -74,6 +76,23 @@ public function __construct(array $urlParams = []) {
 		/**
 		 * Controllers
 		 */
+		$container->registerService(
+			'FilePropertiesService', function (IContainer $c) {
+			return new FilePropertiesService(
+				$c->query('AppName'),
+				$c->query('Environment'),
+				$c->query('Logger'),
+				$c->query('FilePropertiesMapper')
+			);
+		}
+		);
+		$container->registerService(
+			'FilePropertiesMapper', function (IContainer $c) {
+			return new FilePropertiesMapper(
+				$c->query('ServerContainer')->getDatabaseConnection()
+			);
+		}
+		);
 		$container->registerService(
 			'PageController', function (IContainer $c) {
 			return new PageController(
@@ -169,6 +188,7 @@ public function __construct(array $urlParams = []) {
 				$c->query('ThumbnailService'),
 				$c->query('PreviewService'),
 				$c->query('DownloadService'),
+				$c->query('FilePropertiesService'),
 				$c->query('EventSource'),
 				$c->query('Logger')
 			);

lib/Controller/Preview.php

@@ -83,7 +83,7 @@ private function getThumbnail($fileId, $square, $scale) {
 		/** @type File $file */
 		list($file, $preview, $status) =
 			$this->getData(
-				$fileId, $width, $height, $aspect, $animatedPreview, $base64Encode
+				$fileId, null, $width, $height, $aspect, $animatedPreview, $base64Encode
 			);
 		if ($preview === null) {
 			$preview = $this->prepareEmptyThumbnail($file, $status);
@@ -107,17 +107,19 @@ private function getThumbnail($fileId, $square, $scale) {
 	 * @throws NotFoundServiceException
 	 */
 	private function getData(
-		$fileId, $width, $height, $keepAspect = true, $animatedPreview = true, $base64Encode = false
+		$fileId, $etag, $width, $height, $keepAspect = true, $animatedPreview = true, $base64Encode = false
 	) {
 		/** @type File $file */
 		list($file, $status) = $this->getFile($fileId);
 		try {
-			if (!is_null($file)) {
+			if (is_null($file)) {
+				$data = $this->getErrorData($status);
+			} else if (!is_null($etag) && $etag === $file->getEtag()) {
+				$data = [null,  Http::STATUS_NOT_MODIFIED];
+			} else {
 				$data = $this->getPreviewData(
 					$file, $animatedPreview, $width, $height, $keepAspect, $base64Encode
 				);
-			} else {
-				$data = $this->getErrorData($status);
 			}
 		} catch (ServiceException $exception) {
 			$data = $this->getExceptionData($exception);

lib/Controller/PreviewApiController.php

@@ -123,7 +123,7 @@ public function getThumbnails($ids, $square, $scale) {
 	 */
 	public function getPreview($fileId, $width, $height, $nativesvg = false) {
 		/** @type File $file */
-		list($file, $preview, $status) = $this->getData($fileId, $width, $height);
+		list($file, $preview, $status) = $this->getData($fileId, null, $width, $height);
 
 		if (!$preview) {
 			return new JSONResponse(

lib/Controller/PreviewController.php

@@ -27,6 +27,7 @@
 use OCA\Gallery\Service\ThumbnailService;
 use OCA\Gallery\Service\PreviewService;
 use OCA\Gallery\Service\DownloadService;
+use OCA\Gallery\Service\FilePropertiesService;
 use OCA\Gallery\Utility\EventSource;
 
 /**
@@ -62,6 +63,7 @@ public function __construct(
 		ThumbnailService $thumbnailService,
 		PreviewService $previewService,
 		DownloadService $downloadService,
+		FilePropertiesService $filePropertiesService,
 		EventSource $eventSource,
 		ILogger $logger
 	) {
@@ -72,6 +74,7 @@ public function __construct(
 		$this->thumbnailService = $thumbnailService;
 		$this->previewService = $previewService;
 		$this->downloadService = $downloadService;
+		$this->filePropertiesService = $filePropertiesService;
 		$this->eventSource = $eventSource;
 		$this->logger = $logger;
 	}
@@ -127,13 +130,12 @@ public function getThumbnails($ids, $square, $scale) {
 	 */
 	public function getPreview($fileId, $width, $height) {
 		/** @type File $file */
-		list($file, $status) = $this->getFile($fileId);
-		if ($this->request->getHeader('If-None-Match') === $file->getEtag()) {
-			return new DataResponse([], Http::STATUS_NOT_MODIFIED);
-		}
-		list($file, $preview, $status) = $this->getData($fileId, $width, $height);
+		list($file, $preview, $status) = $this->getData($fileId, $this->request->getHeader('If-None-Match'), $width, $height);
 
 		if (!$preview) {
+			if ($status === Http::STATUS_NOT_MODIFIED) {
+				return new DataResponse([], Http::STATUS_NOT_MODIFIED);
+			}
 			return new JSONResponse(
 				[
 					'message' => "I'm truly sorry, but we were unable to generate a preview for this file",
@@ -152,4 +154,13 @@ public function getPreview($fileId, $width, $height) {
 		return $response;
 	}
 
+	public function setModifications($fileId) {
+		$requestBody = file_get_contents('php://input');
+		$this->filePropertiesService->setModifications($fileId, $requestBody);
+	}
+
+	public function getModifications($fileId) {
+		return new DataResponse(json_decode($this->filePropertiesService->getModifications($fileId)), 200);
+	}
+
 }

lib/Db/FileProperties.php

@@ -0,0 +1,8 @@
+<?php
+namespace OCA\Gallery\Db;
+
+use OCP\AppFramework\Db\Entity;
+
+class FileProperties extends Entity {
+    protected $modifications;
+}