Implement 'On this day'

appinfo/routes.php

@@ -27,6 +27,7 @@
 		['name' => 'api#serviceWorker', 'url' => '/service-worker.js', 'verb' => 'GET'],
 
 		['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
+		['name' => 'page#index', 'url' => '/thisday', 'verb' => 'GET', 'postfix' => 'thisday'],
 		['name' => 'page#index', 'url' => '/videos', 'verb' => 'GET', 'postfix' => 'videos'],
 		['name' => 'page#index', 'url' => '/favorites', 'verb' => 'GET', 'postfix' => 'favorites'],
 		['name' => 'page#index', 'url' => '/albums/{path}', 'verb' => 'GET', 'postfix' => 'albums',
@@ -53,7 +54,7 @@
 				'path' => '',
 			]
 		],
-		 
+
 		// apis
 		[
 			'name' => 'albums#myAlbums',

js/photos-node_modules_nextcloud_moment_node_modules_moment_locale_sync_recursive_-src_patchedRequest_j-3cb869.js.LICENSE.txt

@@ -1,3 +1,25 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <[email protected]>
  *

src/Photos.vue

@@ -31,6 +31,7 @@
 					exact />
 				<AppNavigationItem to="/videos" :title="t('photos', 'Your videos')" icon="icon-video" />
 				<AppNavigationItem to="/favorites" :title="t('photos', 'Favorites')" icon="icon-favorite" />
+				<AppNavigationItem :to="{name: 'thisday'}" :title="t('photos', 'On this day')" icon="icon-calendar-dark" />
 				<AppNavigationItem :to="{name: 'albums'}" :title="t('photos', 'Your folders')" icon="icon-files-dark" />
 				<AppNavigationItem :to="{name: 'shared'}" :title="t('photos', 'Shared with you')" icon="icon-share" />
 				<AppNavigationItem v-if="areTagsInstalled"

src/components/SeparatorVirtualGrid.vue

@@ -21,7 +21,10 @@
  -->
 
 <template>
-	<h2 class="grid-title" :style="{height: item.height + 'px'}">
+	<h2 v-if="item.injected.onThisDay" class="grid-title" :style="{height: item.height + 'px'}">
+		{{ n('photos', '{years} year ago', '{years} years ago', item.injected.onThisDay, {years: item.injected.onThisDay}) }}<span>  ·  {{ item.injected.month }} {{ item.injected.year }}</span>
+	</h2>
+	<h2 v-else class="grid-title" :style="{height: item.height + 'px'}">
 		{{ item.injected.month }}
 		<span>{{ item.injected.year }}</span>
 	</h2>

src/router/index.js

@@ -17,6 +17,7 @@
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
  */
 
 import { generateUrl } from '@nextcloud/router'
@@ -125,5 +126,14 @@ export default new Router({
 				window.open(mapsPath, '_blank')
 			},
 		},
+		{
+			path: '/thisday',
+			name: 'thisday',
+			component: Timeline,
+			props: route => ({
+				rootTitle: t('photos', 'On this day'),
+				onThisDay: true,
+			}),
+		},
 	],
 })

src/services/PhotoSearch.js

@@ -17,6 +17,7 @@
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
  */
 
 import { genFileInfo } from '../utils/fileUtils'
@@ -25,6 +26,7 @@ import { allMimes } from './AllowedMimes'
 import client from './DavClient'
 import { props } from './DavRequest'
 import { sizes } from '../assets/grid-sizes'
+import moment from '@nextcloud/moment'
 
 /**
  * List files from a folder and filter out unwanted mimes
@@ -34,6 +36,7 @@ import { sizes } from '../assets/grid-sizes'
  * @param {number} [options.page=0] which page to start (starts at 0)
  * @param {number} [options.perPage] how many to display per page default is 5 times the max number per line from the grid-sizes config file
  * @param {boolean} [options.full=false] get full data of the files
+ * @param {boolean} [options.onThisDay=false] get only items from this day of year
  * @return {Array} the file list
  */
 export default async function(onlyFavorites = false, options = {}) {
@@ -43,6 +46,7 @@ export default async function(onlyFavorites = false, options = {}) {
 		page: 0, // start at the first page
 		perPage: sizes.max.count * 10, // ten rows of the max width
 		mimesType: allMimes, // all mimes types
+		onThisDay: false,
 	}, options)
 
 	const prefixPath = `/files/${getCurrentUser().uid}`
@@ -67,6 +71,28 @@ export default async function(onlyFavorites = false, options = {}) {
 			</d:eq>`
 		: ''
 
+	const onThisDay = options.onThisDay
+		? `<d:or>${Array(20).fill(1)
+			.map((_, years) => {
+				const start = moment(Date.now()).startOf('day').subtract(3, 'd').subtract(years + 1, 'y')
+				const end = moment(Date.now()).endOf('day').add(3, 'd').subtract(years + 1, 'y')
+				return `<d:and>
+				<d:gt>
+					<d:prop>
+						<d:getlastmodified />
+					</d:prop>
+					<d:literal>${start.format(moment.defaultFormatUtc)}</d:literal>
+				</d:gt>
+				<d:lt>
+					<d:prop>
+						<d:getlastmodified />
+					</d:prop>
+					<d:literal>${end.format(moment.defaultFormatUtc)}</d:literal>
+				</d:lt>
+			</d:and>`
+			}).join('\n')}</d:or>`
+		: ''
+
 	options = Object.assign({
 		method: 'SEARCH',
 		headers: {
@@ -96,6 +122,13 @@ export default async function(onlyFavorites = false, options = {}) {
 								${orMime}
 							</d:or>
 							${eqFavorites}
+							${onThisDay}
+							<d:eq>
+								<d:prop>
+									<oc:owner-id/>
+								</d:prop>
+								<d:literal>${getCurrentUser().uid}</d:literal>
+							</d:eq>
 						</d:and>
 					</d:where>
 					<d:orderby>

src/store/systemtags.js

@@ -17,6 +17,7 @@
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
  */
 import Vue from 'vue'
 import { sortCompare } from '../utils/fileUtils'

src/views/Timeline.vue

@@ -102,6 +102,10 @@ export default {
 			type: String,
 			default: '',
 		},
+		onThisDay: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -110,7 +114,6 @@ export default {
 			done: false,
 			error: null,
 			page: 0,
-			lastSection: '',
 			loaderComponent: Loader,
 		}
 	},
@@ -138,22 +141,24 @@ export default {
 			 * In our case injected could be an image/video (aka file) or a title (year/month)
 			 * Note2: titles are rendered full width and images are rendered on 1 column and 256x256 ratio
 			 */
+			let lastSection = ''
 			return this.fileList.flatMap((file, index) => {
 				const finalArray = []
 				const currentSection = this.getFormatedDate(file.lastmod, 'YYYY MMMM')
-				if (this.lastSection !== currentSection) {
+				if (lastSection !== currentSection) {
 					finalArray.push({
 						id: `title-${index}`,
 						injected: {
 							year: this.getFormatedDate(file.lastmod, 'YYYY'),
 							month: this.getFormatedDate(file.lastmod, 'MMMM'),
+							onThisDay: this.onThisDay ? Math.round(moment(Date.now()).diff(moment(file.lastmod), 'years', true)) : false,
 						},
 						height: 90,
 						columnSpan: 0, // means full width
 						newRow: true,
 						renderComponent: SeparatorVirtualGrid,
 					})
-					this.lastSection = currentSection // we keep track of the last section for the next batch
+					lastSection = currentSection // we keep track of the last section for the next batch
 				}
 				finalArray.push({
 					id: `img-${file.fileid}`,
@@ -185,6 +190,11 @@ export default {
 			}
 			this.resetState()
 		},
+		async onThisDay() {
+			// reset component
+			this.resetState()
+			this.getContent()
+		},
 	},
 
 	beforeRouteLeave(from, to, next) {
@@ -237,6 +247,7 @@ export default {
 					page: this.page,
 					perPage: numberOfImagesPerBatch,
 					mimesType: this.mimesType,
+					onThisDay: this.onThisDay,
 				})
 
 				// If we get less files than requested that means we got to the end