Files
fnx_web/res/template/file_viewer.html

178 lines
7.3 KiB
HTML
Raw Normal View History

2017-11-10 12:39:55 +01:00
{{define "file_viewer"}}
<!DOCTYPE html>
2020-01-17 20:32:21 +01:00
<html lang="en">
2017-11-10 12:39:55 +01:00
<head>
2017-12-12 23:33:41 +01:00
<title>{{.Title}}</title>
2017-11-10 12:39:55 +01:00
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
2019-02-18 13:41:50 +01:00
{{template "user_style" .}}
2017-11-10 12:39:55 +01:00
<link rel="shortcut icon" href="/res/img/tray32.png"/>
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
2019-07-06 19:58:47 +02:00
<meta name="theme-color" content="#75AD38"/>
2018-07-09 23:19:16 +02:00
2019-12-23 23:56:57 +01:00
<style>
{{template `viewer.css`}}
{{template `layout.css`}}
</style>
2018-09-11 21:35:44 +02:00
2019-12-23 23:56:57 +01:00
{{.OGData}}
2017-11-10 12:39:55 +01:00
</head>
<body>
2019-07-17 23:19:57 +02:00
<div id="file_viewer" class="file_viewer">
2019-11-21 20:25:06 +01:00
<div id="file_viewer_headerbar" class="highlight_1 file_viewer_headerbar">
2020-01-20 19:55:51 +01:00
<button id="btn_toggle_toolbar" class="button_toggle_toolbar"></button>
2019-07-17 23:19:57 +02:00
<a href="/" id="button_home" class="button button_home">
2020-01-27 16:56:16 +01:00
{{template `pixeldrain.svg` .}}
2019-07-17 23:19:57 +02:00
</a>
2019-09-18 22:23:12 +02:00
<div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
<div id="file_viewer_list_title"></div>
<div id="file_viewer_file_title">{{.Title}}</div>
</div>
2020-01-20 19:55:51 +01:00
<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onclick="window.close();">{{template `close.svg` .}}</button>
2019-07-17 23:19:57 +02:00
</div>
2019-07-18 19:53:09 +02:00
<div id="list_navigator" class="list_navigator"></div>
2019-07-17 23:19:57 +02:00
<div id="file_viewer_window" class="file_viewer_window">
2020-01-14 17:10:03 +01:00
<div id="toolbar" class="file_viewer_toolbar"><div><div>
<div id="stat_views_label" class="toolbar_label">Views</div>
<div id="stat_views" style="text-align: center;">N/A</div>
<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
<div id="stat_downloads" style="text-align: center;">N/A</div>
2020-01-21 17:01:26 +01:00
<div id="stat_size_label" class="toolbar_label">Size</div>
<div id="stat_size" style="text-align: center;">N/A</div>
2019-07-17 23:19:57 +02:00
2020-01-20 19:55:51 +01:00
<button id="btn_download" class="toolbar_button button_full_width">
2020-01-14 17:10:03 +01:00
{{template `save.svg` .}}
<span>Download</span>
</button>
2020-01-20 19:55:51 +01:00
<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none">
2020-01-14 17:10:03 +01:00
{{template `save.svg` .}}
<span>DL all files</span>
</button>
2020-01-20 19:55:51 +01:00
<button id="btn_copy" class="toolbar_button button_full_width">
2020-01-14 17:10:03 +01:00
{{template `copy.svg` .}}
<span><u>C</u>opy Link</span>
</button>
2020-01-20 19:55:51 +01:00
<button id="btn_share" class="toolbar_button button_full_width">
2020-01-14 17:10:03 +01:00
{{template `share.svg` .}}
<span>Share</span>
</button>
2020-01-20 19:55:51 +01:00
<button id="btn_shuffle" class="toolbar_button button_full_width" style="display: none">
2020-01-14 17:10:03 +01:00
{{template `shuffle.svg` .}}
<span>Shuffle &#x2610;</span>
</button>
2020-01-20 19:55:51 +01:00
<button id="btn_details" class="toolbar_button button_full_width">
2020-01-14 17:10:03 +01:00
{{template `help.svg` .}}
<span>Deta<u>i</u>ls</span>
</button>
{{template "advertisement" .}}
2019-07-17 23:19:57 +02:00
2020-02-13 22:00:21 +01:00
<a href="https://twitter.com/SiaTechHQ/status/1228050383685201921">
<img src="/res/img/misc/terminator.png" style="width: 100%; margin-top: 1000px; display: block;" />
</a>
2020-01-14 17:10:03 +01:00
<!-- This frame will load the download URL when a download button is pressed -->
<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
</div></div></div>
2017-11-10 12:39:55 +01:00
2019-07-17 23:19:57 +02:00
<div id="sharebar" class="file_viewer_sharebar">
Share on:<br/>
2020-01-17 20:32:21 +01:00
<button class="sharebar-button button_full_width" onclick="window.open('mailto:please@set.address?subject=File%20on%20pixeldrain&body=' + window.location.href);">
2020-01-14 17:10:03 +01:00
{{template `email.svg` .}}<br/>E-Mail
2017-11-10 12:39:55 +01:00
</button>
2019-07-17 23:19:57 +02:00
<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
2020-01-14 17:10:03 +01:00
{{template `reddit.svg` .}}<br/>Reddit
2017-11-10 12:39:55 +01:00
</button>
2020-01-14 17:10:03 +01:00
<button class="sharebar-button button_full_width" onclick="window.open('https://twitter.com/share?url=' + window.location.href);">
{{template `twitter.svg` .}}<br/>Twitter
2017-11-10 12:39:55 +01:00
</button>
2020-01-14 17:10:03 +01:00
<button class="sharebar-button button_full_width" onclick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
{{template `facebook.svg` .}}<br/>Facebook
2019-07-17 23:19:57 +02:00
</button>
2020-01-14 17:10:03 +01:00
<button class="sharebar-button button_full_width" onclick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
{{template `tumblr.svg` .}}<br/>Tumblr
2019-07-17 23:19:57 +02:00
</button>
</div>
2017-11-10 12:39:55 +01:00
2019-07-17 23:19:57 +02:00
<div id="filepreview" class="file_viewer_file_preview">
2020-01-21 15:33:09 +01:00
<div class="center" style="width: 100px; height: 100px;">{{template "spinner.svg" .}}</div>
2017-11-10 12:39:55 +01:00
</div>
</div>
2018-07-09 23:19:16 +02:00
2020-01-23 09:42:28 +01:00
<!-- Popup windows, hidden by default -->
<div id="details_popup" class="popup details_popup">
<div id="details_popup_title" class="highlight_1">
File Info
<button id="btn_close_details" style="position: absolute; top: 3px; right: 3px;" class="button_red">{{template `close.svg` .}}</button>
</div>
<div class="content_area">
<div id="info_file_details"></div>
<div id="info_about">
<h3>Downloads and views</h3>
<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: auto;">
<canvas id="bandwidth_chart"></canvas>
</div>
<p style="text-align: center">
Chart rendered by the amazing <a href="https://www.chartjs.org/" target="_blank">Chart.js</a>.
</p>
2019-07-07 12:18:26 +02:00
2020-01-23 09:42:28 +01:00
<h3>About</h3>
Pixeldrain is a file sharing platform.
<a href="/" target="_blank">Visit the home page for more information.</a>
2018-09-11 21:35:44 +02:00
2020-01-23 09:42:28 +01:00
<h3>Keyboard Controls</h3>
<table>
<tr><td colspan="2">File Shortcuts</td></tr>
<tr><td>c</td><td> = Copy URL of this page</td></tr>
<tr><td>i</td><td> = Toggle details window (this window) (<b><u>i</u></b>nfo)</td></tr>
<tr><td>s</td><td> = Download the file you are currently viewing (<b><u>s</u></b>ave)</td></tr>
<tr><td>q</td><td> = Close the window (<b><u>q</u></b>uit)</td></tr>
<tr><td colspan="2">List Shortcuts</td></tr>
<tr><td>a or &#8592;</td><td> = View previous item in list</td></tr>
<tr><td>d or &#8594;</td><td> = View next item in list</td></tr>
<tr><td>r</td><td> = Toggle shuffle (<b><u>r</u></b>andom)</td></tr>
<tr><td>SHIFT + s</td><td> = Download all the files in the list as a zip archive</td></tr>
</table>
</div>
2020-01-17 20:32:21 +01:00
</div>
2019-07-07 22:34:20 +02:00
</div>
2020-01-23 09:42:28 +01:00
<div id="captcha_popup" class="popup captcha_popup">
<div id="captcha_popup_title" class="highlight_1"></div>
<div id="captcha_popup_content" class="content_area"></div>
<br/>
<div id="captcha_popup_captcha" style="text-align: center;"></div>
</div>
2019-03-28 10:47:27 +01:00
</div>
2018-07-09 23:19:16 +02:00
2019-12-23 23:56:57 +01:00
<script src="/res/script/Chart.min.js"></script>
2020-01-17 20:32:21 +01:00
<script>
2020-01-27 16:56:16 +01:00
'use strict';
let apiEndpoint = '{{.APIEndpoint}}';
let captchaKey = '{{.Other.CaptchaKey}}';
2019-12-23 23:56:57 +01:00
2020-01-20 19:55:51 +01:00
{{template `util.js`}}
2019-12-23 23:56:57 +01:00
{{template `Toolbar.js`}}
2020-01-20 19:55:51 +01:00
{{template `DetailsWindow.js`}}
2019-12-23 23:56:57 +01:00
{{template `ListNavigator.js`}}
2020-01-20 19:55:51 +01:00
{{template `Viewer.js`}}
{{template `ImageViewer.js`}}
{{template `VideoViewer.js`}}
{{template `AudioViewer.js`}}
2020-01-21 15:33:09 +01:00
{{template `PDFViewer.js`}}
{{template `TextViewer.js`}}
{{template `FileViewer.js`}}
2019-12-23 23:56:57 +01:00
2017-11-10 12:39:55 +01:00
// This info gets filled in on the server side to prevent having to make an API call right after the page loads.
// Just to slice another few milliseconds from the load time :)
2019-08-10 14:15:54 +02:00
window.addEventListener("load", function(){
2020-01-21 15:33:09 +01:00
new Viewer('{{.Other.Type}}', '{{.Other.ViewToken}}', {{.Other.APIResponse}});
2019-08-10 14:15:54 +02:00
});
2017-11-10 12:39:55 +01:00
</script>
{{template "analytics"}}
</body>
</html>
2018-07-09 23:19:16 +02:00
{{end}}