support new thumbnail api

2019-12-10 14:47:11 +01:00
parent dc744b65e4
commit 4c33b0841e
12 changed files with 149 additions and 91 deletions
--- a/res/static/img/mime/empty.png
+++ b/res/static/img/mime/empty.png
--- a/res/static/img/mime/office_15_icons_by_franmonzter-d55q27r.png
+++ b/res/static/img/mime/office_15_icons_by_franmonzter-d55q27r.png
--- a/res/static/script/ListNavigator.js
+++ b/res/static/script/ListNavigator.js
@@ -128,7 +128,7 @@ var ListNavigator = {
 				continue; // Thumbnail already loaded
 			}

-			var thumb = "/api/file/" + this.data[i].id + "/thumbnail";
+			var thumb = "/api/file/" + this.data[i].id + "/thumbnail?width=48&height=48";
 			var name = this.data[i].name;

 			var itemHtml = "<img src=\"" + thumb + "\" "
--- a/res/static/script/history.js
+++ b/res/static/script/history.js
@@ -34,22 +34,12 @@ $(document).ready(function () {
 });

 function historyAddItem(json) {
-	if(!json.success){
-		var uploadItem = "<div class=\"file_button\" >"
-		+ "<img src=\"/res/img/cross.png\" "
-		+ "alt=\"File has expired\" />"
-		+ "File has expired"
-		+ "</div>";
-
-		$("#uploadedFiles").append($(uploadItem).hide().fadeIn(400));
-
-		return;
-	}
+	if(!json.success){return;}

 	var date = new Date(json.date_upload);

 	var uploadItem =  '<a href="/u/'+ json.id +'" target="_blank" class="file_button">'
-		+ '<img src="'+ apiEndpoint + json.thumbnail_href + '"'
+		+ '<img src="'+ apiEndpoint + json.thumbnail_href + '?width=80&height=80"'
 		+ "alt=\"" + json.name + "\" />"
 		+ '<span style="color: var(--highlight_color);">'+json.name+'</span>'
 		+ "<br/>"
--- a/res/template/account/file_manager.html
+++ b/res/template/account/file_manager.html
@@ -5,33 +5,46 @@
 		{{template "user_style" .}}
 		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
 		<style>
+			#page_body {
+				height: 100%;
+				padding: 0;
+			}
+
 			.file_manager {
 				position: absolute;
 				padding: 0;
-				background-color: var(--body_color);
+				background-color: var(--layer_1_color);
 				box-shadow: #000000 8px 8px 50px 5px;
-				left:100px;
-				top:100px;
-				right: 100px;
-				min-width: 600px;
-				max-width: 1000px;
+				left:50px;
+				top:50px;
+				right: 50px;
+				bottom: 50px;
+				display: flex;
+				flex-direction: column;
 			}
 			.file_manager > .nav_bar {
+				flex-shrink: 0;
 				display: flex;
 				flex-direction: row
 			}
 			.file_manager > .nav_bar :first-child   {margin-left:  5px;}
 			.file_manager > .nav_bar :last-child    {margin-right: 5px;}
 			.file_manager > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;}
-			.file_manager > .status_bar             {text-align: left;}
 			.file_manager > .directory_area {
+				flex-shrink: 1;
 				margin: 0;
 				padding: 5px;
-				max-height: 500px;
 				overflow-x: hidden;
 				overflow-y: scroll;
 				text-align: left;
 			}
+			.file_manager > .directory_area > .file_button {
+				margin: 5px;
+			}
+			.file_manager > .status_bar {
+				flex-shrink: 0;
+				text-align: left;
+			}

 			.file_button {
 				height: 20px;
@@ -44,36 +57,42 @@
 	</head>

 	<body>
-		{{template "page_top" .}}
-		<br/>
-		<div class="file_manager">
-			<div class="nav_bar highlight_light">
-				<button>⇐</button>
-				<button>⇑</button>
-				<button style="margin-right: 16px;">⇒</button>
-				<button>🏠</button>
-				<input class="breadcrumbs" type="text" value="/{{.Username}}/Documents"/>
-				<button>↻</button>
-				<button>🔎</button>
-				<button style="margin-left: 16px;">_</button>
-				<button>☐</button>
-				<button class="button_red">✕</button>
-			</div>
-			<div class="directory_area">
-				{{$files := .PixelAPI.UserFiles 0 1000}}
-				{{range $files.Files}}
-				<a class="file_button" href="/u/{{.ID}}" target="_blank">
-					<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
-					{{.Name}}
-				</a>
-				{{end}}
-			</div>
-			<div class="status_bar highlight_light">
-				13 items (5 directories, 7 files). Total size: 1.23 GB
+		{{template "page_menu" .}}
+
+		<div id="page_body" class="page_body">
+			<div class="file_manager">
+				<div class="nav_bar highlight_light">
+					<button>⇐</button>
+					<button>⇑</button>
+					<button style="margin-right: 16px;">⇒</button>
+					<button>🏠</button>
+					<input class="breadcrumbs" type="text" value="/{{.Username}}/Documents"/>
+					<button>↻</button>
+					<button>🔎</button>
+					<button style="margin-left: 16px;">_</button>
+					<button>☐</button>
+					<button class="button_red">✕</button>
+				</div>
+				<div class="directory_area">
+					{{$size := 0}}
+					{{$count := 0}}
+
+					{{$files := .PixelAPI.UserFiles 0 10000}}
+					{{range $files.Files}}
+					{{$size = add $size .Size}}
+					{{$count = add $count 1}}
+					<a class="file_button" href="/u/{{.ID}}" target="_blank">
+						<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail?width=16&height=16" alt="{{.Name}}" />
+						{{.Name}}
+					</a>
+					{{end}}
+				</div>
+				<div class="status_bar highlight_light">
+					{{$count}} items (0 directories, {{$count}} files). Total size: {{formatData $size}}
+				</div>
 			</div>
 		</div>

-		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
 </html>
--- a/res/template/account/user_files.html
+++ b/res/template/account/user_files.html
@@ -37,7 +37,7 @@

 			{{range $files.Files}}<!--
 			--><a class="file_button" href="/u/{{.ID}}" target="_blank">
-				<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
+				<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail?width=80&height=80" alt="{{.Name}}" />
 				<span style="color: var(--highlight_color);">{{.Name}}</span>
 				<br/>
 				{{.DateUpload.Format "2006-01-02 15:04:05"}}
--- a/res/template/account/user_home.html
+++ b/res/template/account/user_home.html
@@ -23,7 +23,7 @@
 				{{$files := .PixelAPI.UserFiles 0 15}}
 				{{range $files.Files}}<!--
 					--><a class="file_button" href="/u/{{.ID}}" target="_blank">
-						<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
+						<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail?width=80&height=80" alt="{{.Name}}" />
 						<span style="color: var(--highlight_color);">{{.Name}}</span>
 						<br/>
 						{{.DateUpload.Format "2006-01-02 15:04:05"}}
@@ -37,7 +37,7 @@
 				{{$lists := .PixelAPI.UserLists 0 15}}
 				{{range $lists.Lists}}<!--
 					--><a class="file_button" href="/l/{{.ID}}" target="_blank">
-						<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
+						<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail?width=80&height=80" alt="{{.Title}}" />
 						<span style="color: var(--highlight_color);">{{.Title}}</span>
 						({{.FileCount}} Files)
 						<br/>
--- a/res/template/account/user_lists.html
+++ b/res/template/account/user_lists.html
@@ -30,7 +30,7 @@

 			{{range $lists.Lists}}<!--
 				--><a class="file_button" href="/l/{{.ID}}" target="_blank">
-					<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
+					<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail?width=80&height=80" alt="{{.Title}}" />
 					<span style="color: var(--highlight_color);">{{.Title}}</span>
 					({{.FileCount}} Files)
 					<br/>
--- a/res/template/fragments/api/file.html
+++ b/res/template/fragments/api/file.html
@@ -174,15 +174,16 @@
 {{end}}
 {{define "api-file-id-thumbnail-get"}}
 <details class="api_doc_details request_get">
-	<summary><span class="method">GET</span>/file/{id}/thumbnail</summary>
+	<summary><span class="method">GET</span>/file/{id}/thumbnail?width=xxx&height=xxx</summary>
 	<div>
 		<h3>Description</h3>
 		<p>
-			Returns a PNG thumbnail image representing the file.
-			The thumbnail is always 100*100 px. If the source file
-			is parsable by imagemagick the thumbnail will be
-			generated from the file, if not it will be a generic
-			mime type icon.
+			Returns a PNG thumbnail image representing the file. The thumbnail
+			image will be 128x128 px by default. You can specify the width and
+			height with parameters in the URL. The width and height parameters
+			need to be a multiple of 16. So the allowed values are 16, 32, 48,
+			64, 80, 96, 112 and 128. If a thumbnail cannot be generated for the
+			file you will be redirected to a mime type image of 128x128 px.
 		</p>
 		<h3>Parameters</h3>
 		<table>
@@ -198,10 +199,24 @@
 				<td>URL</td>
 				<td>ID of the file to get a thumbnail for</td>
 			</tr>
+			<tr>
+				<td>width</td>
+				<td>false</td>
+				<td>URL</td>
+				<td>Width of the thumbnail image</td>
+			</tr>
+			<tr>
+				<td>id</td>
+				<td>false</td>
+				<td>URL</td>
+				<td>Height of the thumbnail image</td>
+			</tr>
 		</table>
 		<h3>Returns</h3>
 		<p>
-			A PNG image of 100*100 px.
+			A PNG image if a thumbnail can be generated. If a thumbnail cannot
+			be generated you will get a 301 redirect to an image representing
+			the type of the file.
 		</p>
 	</div>
 </details>
--- a/res/template/fragments/page_wrap.html
+++ b/res/template/fragments/page_wrap.html
@@ -1,5 +1,4 @@
-{{define "page_top"}}
-<!-- <div id="page_wrapper"> -->
+{{define "page_menu"}}
 <button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
 <div id="page_navigation" class="page_navigation">
 	<a href="/">Home</a>
@@ -19,23 +18,10 @@
 	<a href="/api">API</a>
 	<a href="/appearance">Appearance</a>
 </div>
-<div id="page_body" class="page_body">
-{{end}}
-
-{{define "page_bottom"}}
-	<div class="highlight_dark">
-		Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
-		Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
-		Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
-		Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
-	</div>
-</div><!-- end page_body -->
-<!-- </div>end page_wrapper -->
 <script>
-	var nav = document.getElementById("page_navigation");
-	var body = document.getElementById("page_body");
-
 	function toggleMenu() {
+		var nav = document.getElementById("page_navigation");
+		var body = document.getElementById("page_body");
 		if (nav.offsetLeft === 0) {
 			// Menu is visible

@@ -50,3 +36,18 @@
 	}
 </script>
 {{end}}
+
+{{define "page_top"}}
+{{template "page_menu" .}}
+<div id="page_body" class="page_body">
+{{end}}
+
+{{define "page_bottom"}}
+	<div class="highlight_dark">
+		Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
+		Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
+		Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
+		Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
+	</div>
+</div><!-- end page_body -->
+{{end}}
--- a/webcontroller/opengraph.go
+++ b/webcontroller/opengraph.go
@@ -86,12 +86,14 @@ func metadataFromList(l pixelapi.List) (meta template.HTML) {
 	meta += ogRule{"og:description", "View '" + l.Title + "' on pixeldrain"}.HTML()
 	meta += ogRule{"description", "View '" + l.Title + "' on pixeldrain"}.HTML()
 	meta += ogRule{"og:url", "/l/" + l.ID}.HTML()
-	meta += ogRule{"og:image", "/api/file/" + l.Files[0].ID + "/thumbnail"}.HTML()
-	meta += ogRule{"og:image:url", "/api/file/" + l.Files[0].ID + "/thumbnail"}.HTML()
-	meta += twitterRule{"twitter:image", "/api/file/" + l.Files[0].ID + "/thumbnail"}.HTML()
 	meta += twitterRule{"twitter:title", l.Title}.HTML()
 	meta += twitterRule{"twitter:site", "@Fornax96"}.HTML()
 	meta += twitterRule{"twitter:domain", "pixeldrain.com"}.HTML()
-	meta += linkRule{"image_src", "/api/file/" + l.Files[0].ID + "/thumbnail"}.HTML()
+	if l.FileCount > 0 {
+		meta += ogRule{"og:image", "/api/file/" + l.Files[0].ID + "/thumbnail"}.HTML()
+		meta += ogRule{"og:image:url", "/api/file/" + l.Files[0].ID + "/thumbnail"}.HTML()
+		meta += twitterRule{"twitter:image", "/api/file/" + l.Files[0].ID + "/thumbnail"}.HTML()
+		meta += linkRule{"image_src", "/api/file/" + l.Files[0].ID + "/thumbnail"}.HTML()
+	}
 	return meta
 }
--- a/webcontroller/template_manager.go
+++ b/webcontroller/template_manager.go
@@ -9,6 +9,7 @@ import (
 	"strings"
 	"time"

+	"fornaxian.com/pixeldrain-api/util"
 	"github.com/Fornaxian/log"
 )

@@ -75,13 +76,14 @@ func (tm *TemplateManager) Get() *template.Template {

 func (tm *TemplateManager) funcMap() template.FuncMap {
 	return template.FuncMap{
-		"bgPattern": tm.bgPattern,
-		"isBrave":   tm.isBrave,
-		"debugMode": tm.debugMode,
-		"apiUrl":    tm.apiURL,
-		"pageNr":    tm.pageNr,
-		"add":       tm.add,
-		"sub":       tm.sub,
+		"bgPattern":  tm.bgPattern,
+		"isBrave":    tm.isBrave,
+		"debugMode":  tm.debugMode,
+		"apiUrl":     tm.apiURL,
+		"pageNr":     tm.pageNr,
+		"add":        tm.add,
+		"sub":        tm.sub,
+		"formatData": tm.formatData,
 	}
 }

@@ -108,9 +110,38 @@ func (tm *TemplateManager) pageNr(s string) (nr int) {
 	}
 	return nr
 }
-func (tm *TemplateManager) add(a, b int) int {
-	return a + b
+func (tm *TemplateManager) add(a, b interface{}) int {
+	return detectInt(a) + detectInt(b)
 }
-func (tm *TemplateManager) sub(a, b int) int {
-	return a - b
+func (tm *TemplateManager) sub(a, b interface{}) int {
+	return detectInt(a) - detectInt(b)
+}
+func (tm *TemplateManager) formatData(i int) string {
+	return util.FormatData(uint64(i))
+}
+
+func detectInt(i interface{}) int {
+	switch v := i.(type) {
+	case int:
+		return int(v)
+	case int8:
+		return int(v)
+	case int16:
+		return int(v)
+	case int32:
+		return int(v)
+	case int64:
+		return int(v)
+	case uint:
+		return int(v)
+	case uint8:
+		return int(v)
+	case uint16:
+		return int(v)
+	case uint32:
+		return int(v)
+	case uint64:
+		return int(v)
+	}
+	panic(fmt.Sprintf("%v is not an int", i))
 }