Added basic information to post view

TODO

@@ -4,14 +4,9 @@ first major release.
 everything related to posts:
     - single post view
         - basic information
-            - safety
-            - source
-            - image dimensions
             - time of last edit
             - time of last feature
             - how many times the post was featured
-        - download
-            - permalink
         - delete
         - feature
         - fav

public_html/css/post.css

@@ -55,11 +55,18 @@
 }
 
 
-#post-view-wrapper #sidebar ul {
+#sidebar ul {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
 }
+#sidebar .tags li,
+#sidebar .other-info li {
+	display: block;
+	word-break: break-all;
+	padding-left: 1em;
+	text-indent: -1em;
+}
 
 #sidebar .tags .tag-wrapper {
 	max-width: 100%;
@@ -68,9 +75,6 @@
 }
 #sidebar .tags li a {
 	display: block;
-	padding-left: 1em;
-	word-break: break-all;
-	text-indent: -1em;
 }
 #sidebar .tags li .usages {
 	color: silver;
@@ -84,3 +88,27 @@
 #sidebar .author-box .author-name {
 	font-weight: bold;
 }
+
+#sidebar .other-info {
+	margin-top: 1em;
+	line-height: 150%;
+}
+
+#sidebar .essential {
+	display: flex;
+	justify-content: space-around;
+	margin-bottom: 2em;
+}
+#sidebar .essential li {
+	display: block;
+	margin: 0 0.25em;
+	vertical-align: top;
+}
+#sidebar .essential li i.fa {
+	font-size: 30px;
+}
+#sidebar .essential li a {
+	display: block;
+	text-align: center;
+	font-size: 12px;
+}

public_html/js/Presenters/PostPresenter.js

@@ -48,6 +48,7 @@ App.Presenters.PostPresenter = function(
 		$el.html(postTemplate({
 			post: post,
 			formatRelativeTime: util.formatRelativeTime,
+			formatFileSize: util.formatFileSize,
 			postContentTemplate: postContentTemplate,
 		}));
 	}

public_html/js/Util.js

@@ -152,11 +152,44 @@ App.Util = function(_, jQuery, promise) {
 		return future ? 'in ' + text : text + ' ago';
 	}
 
+	function formatUnits(number, base, suffixes, callback) {
+		if (!number) {
+			return NaN;
+		}
+		number *= 1.0;
+
+		var suffix = suffixes.shift();
+		while (number >= base && suffixes.length > 0) {
+			suffix = suffixes.shift();
+			number /= base;
+		}
+
+		if (typeof(callback) === 'undefined') {
+			callback = function(number, suffix) {
+				return suffix ? number.toFixed(1) + suffix : number;
+			};
+		}
+
+		return callback(number, suffix);
+	}
+
+	function formatFileSize(fileSize) {
+		return formatUnits(
+			fileSize,
+			1024,
+			['B', 'K', 'M', 'G'],
+			function(number, suffix) {
+				var decimalPlaces = number < 20 && suffix !== 'B' ? 1 : 0;
+				return number.toFixed(decimalPlaces) + suffix;
+			});
+	}
+
 	return {
 		promiseTemplate: promiseTemplate,
 		parseComplexRouteArgs: parseComplexRouteArgs,
 		compileComplexRouteArgs: compileComplexRouteArgs,
 		formatRelativeTime: formatRelativeTime,
+		formatFileSize: formatFileSize,
 		enableExitConfirmation: enableExitConfirmation,
 		disableExitConfirmation: disableExitConfirmation,
 		isExitConfirmationEnabled: isExitConfirmationEnabled,

public_html/templates/post.tpl

@@ -1,5 +1,15 @@
 <div id="post-view-wrapper">
 	<div id="sidebar">
+		<ul class="essential">
+			<li>
+				<a class="download" href="/data/posts/<%= post.name %>">
+					<i class="fa fa-download"></i>
+					<br/>
+					<%= post.contentExtension + ', ' + formatFileSize(post.originalFileSize) %>
+				</a>
+			</li>
+		</ul>
+
 		<h1>Tags (<%= _.size(post.tags) %>)</h1>
 		<ul class="tags">
 			<% _.each(post.tags, function(tag) { %>
@@ -35,6 +45,40 @@
 
 			<span class="date"><%= formatRelativeTime(post.uploadTime) %></span>
 		</div>
+
+		<ul class="other-info">
+
+			<li>
+				Rating:
+				<span class="safety-<%= post.safety %>">
+					<%= post.safety %>
+				</span>
+			</li>
+
+			<% if (post.originalFileSize) { %>
+				<li>
+					File size:
+					<%= formatFileSize(post.originalFileSize) %>
+				</li>
+			<% } %>
+
+			<% if (post.contentType == 'image') { %>
+				<li>
+					Image size:
+					<%= post.imageWidth + 'x' + post.imageHeight %>
+				</li>
+			<% } %>
+
+			<% if (post.source) { %>
+				<li>
+					Source:&nbsp;<!--
+					--><a href="<%= post.source %>"><!--
+						--><%= post.source.trim() %>
+					</a>
+				</li>
+			<% } %>
+
+		</ul>
 	</div>
 
 	<div id="post-view">

src/Controllers/ViewProxies/PostViewProxy.php

@@ -27,6 +27,7 @@ class PostViewProxy extends AbstractViewProxy
 			$result->contentType = \Szurubooru\Helpers\EnumHelper::postTypeToString($post->getContentType());
 			$result->contentChecksum = $post->getContentChecksum();
 			$result->contentMimeType = $post->getContentMimeType();
+			$result->contentExtension = \Szurubooru\Helpers\MimeHelper::getExtension($post->getContentMimeType());
 			$result->source = $post->getSource();
 			$result->imageWidth = $post->getImageWidth();
 			$result->imageHeight = $post->getImageHeight();

src/Helpers/MimeHelper.php

@@ -30,6 +30,42 @@ class MimeHelper
 		return in_array(strtolower($mime), ['image/jpeg', 'image/png', 'image/gif']);
 	}
 
+	public static function getExtension($mime)
+	{
+		$map =
+		[
+			'application/x-shockwave-flash' => 'SWF',
+			'image/jpeg' => 'JPG',
+			'image/png' => 'PNG',
+			'image/gif' => 'GIF',
+			'video/3gpp' => '3GP',
+			'video/annodex' => 'AXV',
+			'video/dl' => 'DL',
+			'video/dv' => 'dif DV',
+			'video/fli' => 'FLI',
+			'video/gl' => 'GL',
+			'video/mpeg' => 'mpeg mpg MPE',
+			'video/MP2T' => 'TS',
+			'video/mp4' => 'MP4',
+			'video/quicktime' => 'qt MOV',
+			'video/ogg' => 'OGV',
+			'video/webm' => 'WEBM',
+			'video/vnd.mpegurl' => 'MXU',
+			'video/x-flv' => 'FLV',
+			'video/x-mng' => 'MNG',
+			'video/x-ms-asf' => 'asf ASX',
+			'video/x-ms-wm' => 'WM',
+			'video/x-ms-wmv' => 'WMV',
+			'video/x-ms-wmx' => 'WMX',
+			'video/x-ms-wvx' => 'WVX',
+			'video/x-msvideo' => 'AVI',
+			'video/x-matroska' => 'MKV',
+			'text/plain' => 'TXT',
+		];
+		$key = strtolower(trim($mime));
+		return isset($map[$key]) ? $map[$key] : null;
+	}
+
 	private static function stripCharset($mime)
 	{
 		return preg_replace('/;\s*charset.*$/', '', $mime);