pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

support new thumbnail api

Browse Source
This commit is contained in:
Wim Brand
2019-12-10 14:47:11 +01:00
parent dc744b65e4
commit 4c33b0841e
12 changed files with 149 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/static/img/mime/empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
res/static/img/mime/office_15_icons_by_franmonzter-d55q27r.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 120 KiB

2
res/static/script/ListNavigator.js
View File

@@ -128,7 +128,7 @@ var ListNavigator = {
continue; // Thumbnail already loaded 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 name = this.data[i].name;
var itemHtml = "<img src=\"" + thumb + "\" " var itemHtml = "<img src=\"" + thumb + "\" "

14
res/static/script/history.js
View File

@@ -34,22 +34,12 @@ $(document).ready(function () {
}); });
function historyAddItem(json) { function historyAddItem(json) {
if(!json.success){ if(!json.success){return;}
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;
}
var date = new Date(json.date_upload); var date = new Date(json.date_upload);
var uploadItem = '<a href="/u/'+ json.id +'" target="_blank" class="file_button">' 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 + "\" />" + "alt=\"" + json.name + "\" />"
+ '<span style="color: var(--highlight_color);">'+json.name+'</span>' + '<span style="color: var(--highlight_color);">'+json.name+'</span>'
+ "<br/>" + "<br/>"

89
res/template/account/file_manager.html
View File

@@ -5,33 +5,46 @@
{{template "user_style" .}} {{template "user_style" .}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script> <script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
<style> <style>
#page_body {
height: 100%;
padding: 0;
}
.file_manager { .file_manager {
position: absolute; position: absolute;
padding: 0; padding: 0;
background-color: var(--body_color); background-color: var(--layer_1_color);
box-shadow: #000000 8px 8px 50px 5px; box-shadow: #000000 8px 8px 50px 5px;
left:100px; left:50px;
top:100px; top:50px;
right: 100px; right: 50px;
min-width: 600px; bottom: 50px;
max-width: 1000px; display: flex;
flex-direction: column;
} }
.file_manager > .nav_bar { .file_manager > .nav_bar {
flex-shrink: 0;
display: flex; display: flex;
flex-direction: row flex-direction: row
} }
.file_manager > .nav_bar :first-child {margin-left: 5px;} .file_manager > .nav_bar :first-child {margin-left: 5px;}
.file_manager > .nav_bar :last-child {margin-right: 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 > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;}
.file_manager > .status_bar {text-align: left;}
.file_manager > .directory_area { .file_manager > .directory_area {
flex-shrink: 1;
margin: 0; margin: 0;
padding: 5px; padding: 5px;
max-height: 500px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
text-align: left; text-align: left;
} }
.file_manager > .directory_area > .file_button {
margin: 5px;
}
.file_manager > .status_bar {
flex-shrink: 0;
text-align: left;
}
.file_button { .file_button {
height: 20px; height: 20px;
@@ -44,36 +57,42 @@
</head> </head>
<body> <body>
{{template "page_top" .}} {{template "page_menu" .}}
<br/>
<div class="file_manager"> <div id="page_body" class="page_body">
<div class="nav_bar highlight_light"> <div class="file_manager">
<button>⇐</button> <div class="nav_bar highlight_light">
<button>⇑</button> <button>⇐</button>
<button style="margin-right: 16px;">⇒</button> <button>⇑</button>
<button>🏠</button> <button style="margin-right: 16px;">⇒</button>
<input class="breadcrumbs" type="text" value="/{{.Username}}/Documents"/> <button>🏠</button>
<button>↻</button> <input class="breadcrumbs" type="text" value="/{{.Username}}/Documents"/>
<button>🔎</button> <button>↻</button>
<button style="margin-left: 16px;">_</button> <button>🔎</button>
<button>☐</button> <button style="margin-left: 16px;">_</button>
<button class="button_red">✕</button> <button>☐</button>
</div> <button class="button_red">✕</button>
<div class="directory_area"> </div>
{{$files := .PixelAPI.UserFiles 0 1000}} <div class="directory_area">
{{range $files.Files}} {{$size := 0}}
<a class="file_button" href="/u/{{.ID}}" target="_blank"> {{$count := 0}}
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
{{.Name}} {{$files := .PixelAPI.UserFiles 0 10000}}
</a> {{range $files.Files}}
{{end}} {{$size = add $size .Size}}
</div> {{$count = add $count 1}}
<div class="status_bar highlight_light"> <a class="file_button" href="/u/{{.ID}}" target="_blank">
13 items (5 directories, 7 files). Total size: 1.23 GB <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>
</div> </div>
{{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

2
res/template/account/user_files.html
View File

@@ -37,7 +37,7 @@
{{range $files.Files}}<!-- {{range $files.Files}}<!--
--><a class="file_button" href="/u/{{.ID}}" target="_blank"> --><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> <span style="color: var(--highlight_color);">{{.Name}}</span>
<br/> <br/>
{{.DateUpload.Format "2006-01-02 15:04:05"}} {{.DateUpload.Format "2006-01-02 15:04:05"}}

4
res/template/account/user_home.html
View File

@@ -23,7 +23,7 @@
{{$files := .PixelAPI.UserFiles 0 15}} {{$files := .PixelAPI.UserFiles 0 15}}
{{range $files.Files}}<!-- {{range $files.Files}}<!--
--><a class="file_button" href="/u/{{.ID}}" target="_blank"> --><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> <span style="color: var(--highlight_color);">{{.Name}}</span>
<br/> <br/>
{{.DateUpload.Format "2006-01-02 15:04:05"}} {{.DateUpload.Format "2006-01-02 15:04:05"}}
@@ -37,7 +37,7 @@
{{$lists := .PixelAPI.UserLists 0 15}} {{$lists := .PixelAPI.UserLists 0 15}}
{{range $lists.Lists}}<!-- {{range $lists.Lists}}<!--
--><a class="file_button" href="/l/{{.ID}}" target="_blank"> --><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> <span style="color: var(--highlight_color);">{{.Title}}</span>
({{.FileCount}} Files) ({{.FileCount}} Files)
<br/> <br/>

2
res/template/account/user_lists.html
View File

@@ -30,7 +30,7 @@
{{range $lists.Lists}}<!-- {{range $lists.Lists}}<!--
--><a class="file_button" href="/l/{{.ID}}" target="_blank"> --><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> <span style="color: var(--highlight_color);">{{.Title}}</span>
({{.FileCount}} Files) ({{.FileCount}} Files)
<br/> <br/>

29
res/template/fragments/api/file.html
View File

@@ -174,15 +174,16 @@
{{end}} {{end}}
{{define "api-file-id-thumbnail-get"}} {{define "api-file-id-thumbnail-get"}}
<details class="api_doc_details request_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> <div>
<h3>Description</h3> <h3>Description</h3>
<p> <p>
Returns a PNG thumbnail image representing the file. Returns a PNG thumbnail image representing the file. The thumbnail
The thumbnail is always 100*100 px. If the source file image will be 128x128 px by default. You can specify the width and
is parsable by imagemagick the thumbnail will be height with parameters in the URL. The width and height parameters
generated from the file, if not it will be a generic need to be a multiple of 16. So the allowed values are 16, 32, 48,
mime type icon. 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> </p>
<h3>Parameters</h3> <h3>Parameters</h3>
<table> <table>
@@ -198,10 +199,24 @@
<td>URL</td> <td>URL</td>
<td>ID of the file to get a thumbnail for</td> <td>ID of the file to get a thumbnail for</td>
</tr> </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> </table>
<h3>Returns</h3> <h3>Returns</h3>
<p> <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> </p>
</div> </div>
</details> </details>

35
res/template/fragments/page_wrap.html
View File

@@ -1,5 +1,4 @@
{{define "page_top"}} {{define "page_menu"}}
<!-- <div id="page_wrapper"> -->
<button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button> <button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
<div id="page_navigation" class="page_navigation"> <div id="page_navigation" class="page_navigation">
<a href="/">Home</a> <a href="/">Home</a>
@@ -19,23 +18,10 @@
<a href="/api">API</a> <a href="/api">API</a>
<a href="/appearance">Appearance</a> <a href="/appearance">Appearance</a>
</div> </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> <script>
var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body");
function toggleMenu() { function toggleMenu() {
var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body");
if (nav.offsetLeft === 0) { if (nav.offsetLeft === 0) {
// Menu is visible // Menu is visible
@@ -50,3 +36,18 @@
} }
</script> </script>
{{end}} {{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}}

10
webcontroller/opengraph.go
View File

@@ -86,12 +86,14 @@ func metadataFromList(l pixelapi.List) (meta template.HTML) {
meta += ogRule{"og:description", "View '" + l.Title + "' on pixeldrain"}.HTML() meta += ogRule{"og:description", "View '" + l.Title + "' on pixeldrain"}.HTML()
meta += ogRule{"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: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:title", l.Title}.HTML()
meta += twitterRule{"twitter:site", "@Fornax96"}.HTML() meta += twitterRule{"twitter:site", "@Fornax96"}.HTML()
meta += twitterRule{"twitter:domain", "pixeldrain.com"}.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 return meta
} }

53
webcontroller/template_manager.go
View File

@@ -9,6 +9,7 @@ import (
"strings" "strings"
"time" "time"
"fornaxian.com/pixeldrain-api/util"
"github.com/Fornaxian/log" "github.com/Fornaxian/log"
) )
@@ -75,13 +76,14 @@ func (tm *TemplateManager) Get() *template.Template {
func (tm *TemplateManager) funcMap() template.FuncMap { func (tm *TemplateManager) funcMap() template.FuncMap {
return template.FuncMap{ return template.FuncMap{
"bgPattern": tm.bgPattern, "bgPattern": tm.bgPattern,
"isBrave": tm.isBrave, "isBrave": tm.isBrave,
"debugMode": tm.debugMode, "debugMode": tm.debugMode,
"apiUrl": tm.apiURL, "apiUrl": tm.apiURL,
"pageNr": tm.pageNr, "pageNr": tm.pageNr,
"add": tm.add, "add": tm.add,
"sub": tm.sub, "sub": tm.sub,
"formatData": tm.formatData,
} }
} }
@@ -108,9 +110,38 @@ func (tm *TemplateManager) pageNr(s string) (nr int) {
} }
return nr return nr
} }
func (tm *TemplateManager) add(a, b int) int { func (tm *TemplateManager) add(a, b interface{}) int {
return a + b return detectInt(a) + detectInt(b)
} }
func (tm *TemplateManager) sub(a, b int) int { func (tm *TemplateManager) sub(a, b interface{}) int {
return a - b 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))
} }