Merge pull request #1215 from nextcloud/issue-1083-update-live-relative-timestamps

Update relative timestamps for a better "live" feeling

apps/comments/js/commentstabview.js

@@ -51,7 +51,7 @@
 		'{{#if isUserAuthor}}' +
 		'        <a href="#" class="action edit icon icon-rename has-tooltip" title="{{editTooltip}}"></a>' +
 		'{{/if}}' +
-		'        <div class="date has-tooltip" title="{{altDate}}">{{date}}</div>' +
+		'        <div class="date has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>' +
 		'    </div>' +
 		'    <div class="message">{{{formattedMessage}}}</div>' +
 		'{{#if isLong}}' +
@@ -179,6 +179,7 @@
 		_formatItem: function(commentModel) {
 			var timestamp = new Date(commentModel.get('creationDateTime')).getTime();
 			var data = _.extend({
+				timestamp: timestamp,
 				date: OC.Util.relativeModifiedDate(timestamp),
 				altDate: OC.Util.formatDate(timestamp),
 				formattedMessage: this._formatMessage(commentModel.get('message'))

apps/files/js/filelist.js

@@ -1202,8 +1202,9 @@
 			}
 			td = $('<td></td>').attr({ "class": "date" });
 			td.append($('<span></span>').attr({
-				"class": "modified",
+				"class": "modified live-relative-timestamp",
 				"title": formatted,
+				"data-timestamp": mtime,
 				"style": 'color:rgb('+modifiedColor+','+modifiedColor+','+modifiedColor+')'
 			}).text(text)
 			  .tooltip({placement: 'top'})

apps/files/js/mainfileinfodetailview.js

@@ -24,7 +24,7 @@
 		'		class="action action-favorite favorite">' +
 		'			<img class="svg" alt="{{starAltText}}" src="{{starIcon}}" />' +
 		'		</a>' +
-		'		{{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' +
+		'		{{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</span>' +
 		'	</div>' +
 		'</div>' +
 		'<div class="hidden permalink-field">' +
@@ -152,6 +152,7 @@
 					altSize: n('files', '%n byte', '%n bytes', this.model.get('size')),
 					dateLabel: t('files', 'Modified'),
 					altDate: OC.Util.formatDate(this.model.get('mtime')),
+					timestamp: this.model.get('mtime'),
 					date: OC.Util.relativeModifiedDate(this.model.get('mtime')),
 					starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
 					starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star'),

apps/files_versions/js/versionstabview.js

@@ -15,7 +15,7 @@
 		'<li data-revision="{{timestamp}}">' +
 		'<img class="preview" src="{{previewUrl}}"/>' +
 		'<a href="{{downloadUrl}}" class="downloadVersion"><img src="{{downloadIconUrl}}" />' +
-		'<span class="versiondate has-tooltip" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>' +
+		'<span class="versiondate has-tooltip live-relative-timestamp" data-timestamp="{{millisecondsTimestamp}}" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>' +
 		'</a>' +
 		'{{#canRevert}}' +
 		'<a href="#" class="revertVersion" title="{{revertLabel}}"><img src="{{revertIconUrl}}" /></a>' +
@@ -183,6 +183,7 @@
 		_formatItem: function(version) {
 			var timestamp = version.get('timestamp') * 1000;
 			return _.extend({
+				millisecondsTimestamp: timestamp,
 				formattedTimestamp: OC.Util.formatDate(timestamp),
 				relativeTimestamp: OC.Util.relativeModifiedDate(timestamp),
 				downloadUrl: version.getDownloadUrl(),

core/js/js.js

@@ -1660,6 +1660,13 @@ function initCore() {
 		$('body').delegate('#app-content', 'apprendered appresized', adjustControlsWidth);
 
 	}
+
+	// Update live timestamps every 30 seconds
+	setInterval(function() {
+		$('.live-relative-timestamp').each(function() {
+			$(this).text(OC.Util.relativeModifiedDate(parseInt($(this).attr('data-timestamp'), 10)));
+		});
+	}, 30 * 1000);
 }
 
 $(document).ready(initCore);