feature: sort by EXIF 'taken' date

'/files/list' response -> new 'exif' attribute (['taken_date' => <timestamp>]); new button for sorting by 'exif.taken_date'; new camera icons
nextcloud · Aug 30, 2017 · 58ca077 · 58ca077
1 parent 09bba63
commit 58ca077
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+gallery (15.0.1)
+* Sort files by EXIF 'taken' date (@denim2x)
+
 gallery (15.0.0)
 * Drag and drop files and folders owncloud/gallery#405 (@oparoz)
 * Upload straight from the app owncloud/gallery#25 (@oparoz)

diff --git a/css/gallerybutton.css b/css/gallerybutton.css
@@ -1,6 +1,9 @@
 /* Gallery buttons design */
 #controls .left {
  float: left;
+ padding-top: 1px;
+ padding-left: 4px;
+ margin-right: 4px;
 }
 
 #controls .button.view-switcher {
@@ -24,27 +27,46 @@
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
+ float: left;
+ position: relative;
+ z-index: 0;
+ border: none;
+ box-shadow: 0 0 0 1px #dbdbdb;
+ width: 38px;
+ height: 34px;
+ border-radius: 0;
+ margin-right: 1px;
 }
 
-#controls .button.left-switch-button,
-#controls .button.left-switch-button:hover {
- float: right;
- display: inline;
+#controls .button.sorting:first-child {
+ /* margin-left: 3px; */
  border-radius: 3px 0 0 3px;
- margin-left: 3px;
- margin-right: 0;
 }
 
-#controls .button.right-switch-button {
- float: right;
- display: inline;
+#controls .button.sorting:last-child {
  border-radius: 0 3px 3px 0;
- margin-left: -1px;
+ margin-right: 0;
+}
+
+#controls .button.sorting:hover,
+#controls .button.sorting.active {
+ border: none;
+ box-shadow: 0 0 0 1px #0082c9;
+ z-index: 1;
+}
+
+#controls #sort-date-taken-button {
+ padding: 8px 5px;
+}
+
+#controls #shared-button,
+#controls #album-info-button {
+ top: -3px;
+ position: relative;
 }
 
 #shared-button img,
-.button.left-switch-button img,
-.button.right-switch-button img {
+#controls .button.sorting img {
  vertical-align: -3px;
  opacity: 0.6;
 }

diff --git a/img/takenasc.svg b/img/takenasc.svg
diff --git a/img/takendes.svg b/img/takendes.svg
diff --git a/js/gallery.js b/js/gallery.js
@@ -128,10 +128,14 @@
  var sortOrder = 'asc';
  var albumSortType = 'name';
  var albumSortOrder = 'asc';
+
+ sortType = /^sort-([-\w]+?)-button$/.exec(this.id)[1];
+ /*
  if (this.id === 'sort-date-button') {
  sortType = 'date';
 
  }
+ */
  var currentSort = Gallery.config.albumSorting;
  if (currentSort.type === sortType && currentSort.order === sortOrder) {
  sortOrder = 'des';
@@ -411,6 +415,7 @@
  var sharedWithUser = null;
  var owner = null;
  var permissions = 0;
+ var exif = null;
  var currentLocation = data.albumpath;
  // This adds a new node to the map for each parent album
  Gallery._mapStructure(currentLocation);
@@ -442,10 +447,11 @@
  sharedWithUser = files[i].sharedwithuser;
  owner = files[i].owner;
  permissions = files[i].permissions;
+ exif = files[i].exif;
 
  image =
  new GalleryImage(
- path, path, fileId, mimeType, mTime, etag, size, sharedWithUser, owner, permissions
+ path, path, fileId, mimeType, mTime, etag, size, sharedWithUser, owner, permissions, exif
  );
 
  // Determines the folder name for the image

diff --git a/js/galleryimage.js b/js/galleryimage.js
@@ -39,7 +39,7 @@
  * @constructor
  */
  var GalleryImage = function (src, path, fileId, mimeType, mTime, etag, size, sharedWithUser,
- owner, permissions) {
+ owner, permissions, exif) {
  this.src = src;
  this.path = path;
  this.fileId = fileId;
@@ -50,6 +50,7 @@
  this.sharedWithUser = sharedWithUser;
  this.owner = owner;
  this.permissions = permissions;
+ this.exif = exif || {};
  this.thumbnail = null;
  this.domDef = null;
  this.spinner = null;

diff --git a/js/galleryutility.js b/js/galleryutility.js
@@ -229,7 +229,9 @@ window.Gallery = window.Gallery || {};
  * @returns {Function}
  */
  sortBy: function (sortType, sortOrder) {
- if (sortType === 'name') {
+ switch (sortType) {
+ case 'name':
+ //if (sortType === 'name') {
  if (sortOrder === 'asc') {
  //sortByNameAsc
  return function (a, b) {
@@ -240,8 +242,9 @@ window.Gallery = window.Gallery || {};
  return function (a, b) {
  return -OC.Util.naturalSortCompare(a.path, b.path);
  };
- }
- if (sortType === 'date') {
+ //}
+ case 'date':
+ //if (sortType === 'date') {
  if (sortOrder === 'asc') {
  //sortByDateAsc
  return function (a, b) {
@@ -252,6 +255,15 @@ window.Gallery = window.Gallery || {};
  return function (a, b) {
  return a.mTime - b.mTime;
  };
+ //}
+ case 'date-taken': // EXIF 'DateTimeOriginal' field
+ return sortOrder === 'asc' ?
+ function (a, b) {
+ return b.exif.taken_date - a.exif.taken_date;
+ } :
+ function (a, b) {
+ return a.exif.taken_date - b.exif.taken_date;
+ };
  }
  },
 

diff --git a/js/galleryview.js b/js/galleryview.js
@@ -144,12 +144,15 @@
  * @param {string} sortOrder asc or des
  */
  sortControlsSetup: function (sortType, sortOrder) {
+ /*
  var reverseSortType = 'date';
  if (sortType === 'date') {
  reverseSortType = 'name';
  }
+ */
+ this._setSortButton(null, 'asc', false); // default icon
+ //this._setSortButton(reverseSortType, 'asc', false); // default icon
  this._setSortButton(sortType, sortOrder, true);
- this._setSortButton(reverseSortType, 'asc', false); // default icon
  },
 
  /**
@@ -373,8 +376,12 @@
  $('#shared-button').click(Gallery.share);
  Gallery.infoBox = new Gallery.InfoBox();
  $('#album-info-button').click(Gallery.showInfo);
+
+ $('#controls .button.sorting').click(Gallery.sorter);
+ /*
  $('#sort-name-button').click(Gallery.sorter);
  $('#sort-date-button').click(Gallery.sorter);
+ */
  $('#save #save-button').click(Gallery.showSaveForm);
  $('.save-form').submit(Gallery.saveForm);
  this._renderNewButton();
@@ -401,7 +408,13 @@
 
  var sum = album.images.length + album.subAlbums.length;
  //If sum of the number of images and subalbums exceeds 1 then show the buttons.
- if(sum > 1)
+ var btns = $('#controls .button.sorting');
+ if (sum > 1) {
+ btns.show();
+ } else {
+ btns.hide();
+ }
+ /*
  {
  $('#sort-name-button').show();
  $('#sort-date-button').show();
@@ -411,6 +424,7 @@
  $('#sort-name-button').hide();
  $('#sort-date-button').hide();
  }
+ */
  var currentSort = Gallery.config.albumSorting;
  this.sortControlsSetup(currentSort.type, currentSort.order);
  Gallery.albumMap[Gallery.currentAlbum].images.sort(
@@ -432,8 +446,11 @@
  _hideButtons: function (uploadAllowed) {
  $('#album-info-button').hide();
  $('#shared-button').hide();
+ $('#controls .button.sorting').hide();
+ /*
  $('#sort-name-button').hide();
  $('#sort-date-button').hide();
+ */
  $('#save-button').hide();
  $('#download').hide();
 
@@ -509,7 +526,10 @@
  * @private
  */
  _setSortButton: function (sortType, sortOrder, active) {
- var button = $('#sort-' + sortType + '-button');
+ var button = sortType ?
+ $('#sort-' + sortType + '-button'):
+ $('.button.sorting.active');
+ //var button = $('#sort-' + sortType + '-button');
  // Removing all the classes which control the image in the button
  button.removeClass('active');
  button.find('img').removeClass('front');

diff --git a/lib/Service/FilesService.php b/lib/Service/FilesService.php
@@ -109,14 +109,41 @@ protected function getNodeData($node) {
  $sharedWithUser = $node->isShared();
  $ownerData = $this->getOwnerData($node);
  $permissions = $node->getPermissions();
+ $exif = $this->getEXIF('data'.$node->getPath());
 
  //$this->logger->debug("Image path : {var1}", ['var1' => $imagePath]);
 
  return $this->formatNodeData(
- $imagePath, $nodeId, $mTime, $etag, $size, $sharedWithUser, $ownerData, $permissions
+ $imagePath, $nodeId, $mTime, $etag, $size, $sharedWithUser, $ownerData, $permissions, $exif
  );
  }
 
+ /**
+ * Returns specific EXIF data for given path (null if directory)
+ *
+ * @param string $path
+ *
+ * @return null|array<string,int|string>
+ */
+ protected function getEXIF($path) {
+ if (is_dir($path)) {
+ return null;
+ }
+ $taken = null;
+ $data = @exif_read_data($path, 'EXIF');
+ if ($data) {
+ $value = @$data['DateTimeOriginal']; // -> 'date taken' field
+ if ($value) {
+ $date = date_parse_from_format('Y:m:d H:i:s', $value);
+ $taken = mktime(
+ $date['hour'], $date['minute'], $date['second'],
+ $date['month'], $date['day'], $date['year']
+ );
+ }
+ }
+ return ['taken_date' => ($taken ? $taken : 0)];
+ }
+
  /**
  * Returns various information about a folder
  *
@@ -290,7 +317,7 @@ private function getOwnerData($node) {
  * @return array
  */
  private function formatNodeData(
- $imagePath, $nodeId, $mTime, $etag, $size, $sharedWithUser, $ownerData, $permissions
+ $imagePath, $nodeId, $mTime, $etag, $size, $sharedWithUser, $ownerData, $permissions, $exif
  ) {
  return [
  'path' => $imagePath,
@@ -300,7 +327,8 @@ private function formatNodeData(
  'size' => $size,
  'sharedwithuser' => $sharedWithUser,
  'owner' => $ownerData,
- 'permissions' => $permissions
+ 'permissions' => $permissions,
+ 'exif' => $exif
  ];
  }