[templates] Add JS-calculated hovertext for date ages

On torrent listing and torrent view, mouse over the times to see "X hours Y minutes Z seconds ago" etc

nyaa/models.py

@@ -1,5 +1,5 @@
 from enum import Enum, IntEnum
-from datetime import datetime
+from datetime import datetime, timezone
 from nyaa import app, db
 from nyaa.torrents import create_magnet
 from sqlalchemy import func, ForeignKeyConstraint, Index
@@ -24,6 +24,10 @@ else:
     COL_ASCII_GENERAL_CI = 'NOCASE'
 
 
+# For property timestamps
+UTC_EPOCH = datetime.utcfromtimestamp(0)
+
+
 class TorrentFlags(IntEnum):
     NONE = 0
     ANONYMOUS = 1
@@ -85,6 +89,11 @@ class Torrent(db.Model):
     def __repr__(self):
         return '<{0} #{1.id} \'{1.display_name}\' {1.filesize}b>'.format(type(self).__name__, self)
 
+    @property
+    def created_utc_timestamp(self):
+        ''' Returns a UTC POSIX timestamp, as seconds '''
+        return (self.created_time - UTC_EPOCH).total_seconds()
+
     @property
     def magnet_uri(self):
         return create_magnet(self)

nyaa/static/js/main.js

@@ -31,6 +31,51 @@ $(document).ready(function() {
 	});
 });
 
+function _format_time_difference(seconds) {
+	var units = [
+		["year", 365*24*60*60],
+		["month", 30*24*60*60],
+		["week", 7*24*60*60],
+		["day", 24*60*60],
+		["hour", 60*60],
+		["minute", 60],
+		["second", 1]
+	];
+	var suffix = " ago";
+	var prefix = "";
+	if (seconds < 0) {
+		suffix = "";
+		prefix = "After ";
+	}
+
+	var parts = [];
+	for (var i = 0; i < units.length; i++) {
+		var scale = units[i];
+
+		var m = (seconds / scale[1]) | 0;
+
+		if (m > 0) {
+			// N unit(s)
+			parts.push( m.toString() + " " + scale[0] + (m == 1 ? "" : "s") );
+			seconds -= m*scale[1];
+		}
+	}
+	return prefix + parts.join(" ") + suffix;
+}
+
+document.addEventListener("DOMContentLoaded", function(event) {
+	var now_timestamp = (Date.now() / 1000) | 0; // UTC timestamp in seconds
+
+	var timestamp_targets = document.querySelectorAll('[data-timestamp]');
+	for (var i = 0; i < timestamp_targets.length; i++) {
+		var target = timestamp_targets[i];
+		var torrent_timestamp = parseInt(target.getAttribute('data-timestamp'));
+		if (torrent_timestamp) {
+			var timedelta = now_timestamp - torrent_timestamp;
+			target.setAttribute('title', _format_time_difference(timedelta));
+		}
+	};
+});
 
 // 
 // This is the unminified version of the theme changer script in the layout.html @ line: 21

nyaa/templates/search_results.html

@@ -55,9 +55,12 @@
 					</a>
 				</td>
 				<td><a href="/view/{{ torrent.id }}">{{ torrent.display_name | escape }}</a></td>
-				<td style="white-space: nowrap;text-align: center;">{% if torrent.has_torrent %}<a href="/view/{{ torrent.id }}/torrent"><i class="fa fa-fw fa-download"></i></a> {% endif %}<a href="{{ torrent.magnet_uri }}"><i class="fa fa-fw fa-magnet"></i></a></td>
-				<td>{{ torrent.filesize | filesizeformat(True) }}</td>
-				<td>{{ torrent.created_time.strftime('%Y-%m-%d %H:%M') }}</td>
+				<td style="white-space: nowrap;text-align: center;">
+					{% if torrent.has_torrent %}<a href="/view/{{ torrent.id }}/torrent"><i class="fa fa-fw fa-download"></i></a>{% endif %}
+					<a href="{{ torrent.magnet_uri }}"><i class="fa fa-fw fa-magnet"></i></a>
+				</td>
+				<td class="text-center">{{ torrent.filesize | filesizeformat(True) }}</td>
+				<td class="text-center" data-timestamp="{{ torrent.created_utc_timestamp|int }}">{{ torrent.created_time.strftime('%Y-%m-%d %H:%M') }}</td>
 				{% if config.ENABLE_SHOW_STATS %}
 				<td class="text-center" style="color: green;">{{ torrent.stats.seed_count }}</td>
 				<td class="text-center" style="color: red;">{{ torrent.stats.leech_count }}</td>

nyaa/templates/view.html

@@ -16,7 +16,7 @@
 			<div class="col-md-5">{{ torrent.main_category.name }} - {{ torrent.sub_category.name }}</div>
 
 			<div class="col-md-1">Date:</div>
-			<div class="col-md-5">{{ torrent.created_time.strftime('%Y-%m-%d, %H:%M UTC') }}</div>
+			<div class="col-md-5" data-timestamp="{{ torrent.created_utc_timestamp|int }}">{{ torrent.created_time.strftime('%Y-%m-%d, %H:%M UTC') }}</div>
 		</div>
 
 		<div class="row">