Files
fnx_web/res/template/file_viewer.html

369 lines
15 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"/>
2021-04-20 16:36:58 +02:00
{{ template "opengraph" .OGData }}
{{ template "user_style" . }}
2020-10-28 19:09:22 +01:00
<link rel="icon" sizes="32x32" href="/res/img/pixeldrain_32.png" />
<link rel="icon" sizes="128x128" href="/res/img/pixeldrain_128.png" />
<link rel="icon" sizes="152x152" href="/res/img/pixeldrain_152.png" />
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain_180.png" />
<link rel="icon" sizes="192x192" href="/res/img/pixeldrain_192.png" />
<link rel="icon" sizes="196x196" href="/res/img/pixeldrain_196.png" />
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_256.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/res/img/pixeldrain_152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/res/img/pixeldrain_180.png" />
<link rel="shortcut icon" sizes="196x196" href="/res/img/pixeldrain_196.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>
2021-04-20 16:36:58 +02:00
{{ template `viewer.css` }}
{{ template `modal.css` }}
2019-12-23 23:56:57 +01:00
</style>
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-10-19 18:10:54 +02:00
<button id="btn_toggle_toolbar" class="button_toggle_toolbar"><i class="icon">menu</i></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>
2020-10-20 10:48:52 +02:00
<div id="file_viewer_file_title">loading...</div>
2019-09-18 22:23:12 +02:00
</div>
2021-03-16 15:52:09 +01:00
<!-- fullscreen button becomes visible on embedded viewer -->
<button id="btn_fullscreen" class="btn_fullscreen" style="display: none;">
<i class="icon" id="btn_fullscreen_icon">fullscreen</i>
</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-02-18 14:57:27 +01:00
<i class="icon">save</i>
2020-01-14 17:10:03 +01:00
<span>Download</span>
</button>
2020-02-18 14:57:27 +01:00
<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
<i class="icon">save</i>
2020-01-14 17:10:03 +01:00
<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-02-18 14:57:27 +01:00
<i class="icon">content_copy</i>
2021-03-16 17:19:03 +01:00
<span><u>C</u>opy link</span>
2020-01-14 17:10:03 +01:00
</button>
2020-01-20 19:55:51 +01:00
<button id="btn_share" class="toolbar_button button_full_width">
2020-02-18 14:57:27 +01:00
<i class="icon">share</i>
2020-01-14 17:10:03 +01:00
<span>Share</span>
</button>
2021-03-16 17:19:03 +01:00
<button id="btn_shuffle" class="toolbar_button button_full_width" style="display: none;" title="Randomize the order of the files in this list">
2020-02-18 14:57:27 +01:00
<i class="icon">shuffle</i>
2020-01-14 17:10:03 +01:00
<span>Shuffle &#x2610;</span>
</button>
2020-01-20 19:55:51 +01:00
<button id="btn_details" class="toolbar_button button_full_width">
2020-02-18 14:57:27 +01:00
<i class="icon">help</i>
2020-01-14 17:10:03 +01:00
<span>Deta<u>i</u>ls</span>
</button>
2021-03-16 17:19:03 +01:00
<hr/>
2020-02-18 14:57:27 +01:00
<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
<i class="icon">edit</i>
<span><u>E</u>dit</span>
</button>
2021-03-16 17:19:03 +01:00
<button id="btn_grab" class="toolbar_button button_full_width" style="display: none;" title="Copy this file to your own pixeldrain account">
<i class="icon">save_alt</i>
<span><u>G</u>rab file</span>
</button>
<button id="btn_embed" class="toolbar_button button_full_width" title="Include this file in your own webpages">
<i class="icon">code</i>
<span>E<u>m</u>bed</span>
</button>
2021-05-11 16:14:16 +02:00
<button id="btn_report_abuse" class="toolbar_button button_full_width" title="Report abuse in this file">
<i class="icon">flag</i>
<span>Report</span>
</button>
2020-06-07 21:12:48 +02:00
<br/>
2020-10-27 11:26:41 +01:00
{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }}
2020-06-07 21:12:48 +02:00
<hr/>
2020-12-07 22:23:29 +01:00
Tired of ads?<br/>
Files expiring too soon?<br/>
2021-01-11 22:31:26 +01:00
<a class="button button_highlight" href="/click/7wy9gg2J?target=%2F%23pro">
2021-01-11 22:37:44 +01:00
<svg style="float: left; width: 2em; height: 2em; fill: currentColor; margin-right: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
2020-12-07 22:23:29 +01:00
<g fill-rule="evenodd">
<path d="M64.1102,0.1004 C44.259,0.1004 28.1086,16.2486 28.1086,36.0986 C28.1086,55.8884 44.259,71.989 64.1102,71.989 C83.9,71.989 100,55.8884 100,36.0986 C100,16.2486 83.9,0.1004 64.1102,0.1004"/>
<polygon points=".012 95.988 17.59 95.988 17.59 .1 .012 .1"/>
</g>
</svg>
2021-01-11 22:37:44 +01:00
Become a Patron!
2020-12-07 22:23:29 +01:00
</a>
2020-11-17 10:58:11 +01:00
{{ end }}
2019-07-17 23:19:57 +02:00
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>
2020-02-21 13:14:21 +01:00
<div id="sponsors" class="sponsors">
2020-10-27 11:26:41 +01:00
{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }}
2021-05-25 11:43:16 +02:00
{{ template "banner_ads" . }}
2020-10-27 11:26:41 +01:00
{{ else if not .Other.UserAdsEnabled }}
2021-06-14 14:56:04 +02:00
<div style="text-align: center; line-height: 1.3em; font-size: 13px;">
Thank you for supporting pixeldrain!
</div>
2020-10-27 11:26:41 +01:00
{{ else if not .Other.FileAdsEnabled }}
2021-06-14 14:56:04 +02:00
<div style="text-align: center; line-height: 1.3em; font-size: 13px;">
The uploader of this file disabled advertisements. You can do the same for <a href="/#pro">only €2 per month</a>!
</div>
2021-05-25 11:43:16 +02:00
{{ end }}
2020-02-21 13:14:21 +01:00
</div>
2021-06-21 10:50:19 +02:00
{{ if and (and .Other.FileAdsEnabled .Other.UserAdsEnabled) (ne .Other.AdPopupType 0) }}
<div class="popup_warn">
You are viewing a large file ( > 250 MB ). Pop-up ads have been
enabled to cover bandwidth cost.
</div>
{{ end }}
2020-02-18 14:57:27 +01:00
</div>
2018-07-09 23:19:16 +02:00
2020-02-18 14:57:27 +01:00
<template id="tpl_details_popup">
<table class="info_file_details" style="min-width: 100%;"></table>
<div class="info_about">
2020-08-11 19:52:03 +02:00
<h3>Downloads</h3>
2020-08-11 20:13:42 +02:00
<div class="chart-container" style="position: relative; width: 100%; height: 150px;">
2020-08-11 19:52:03 +02:00
<canvas id="downloads_chart"></canvas>
</div>
<h3>Views</h3>
2020-08-11 20:13:42 +02:00
<div class="chart-container" style="position: relative; width: 100%; height: 150px;">
2020-08-11 19:52:03 +02:00
<canvas id="views_chart"></canvas>
2020-01-17 20:32:21 +01:00
</div>
2020-02-18 14:57:27 +01:00
<p style="text-align: center">
2020-08-11 19:52:03 +02:00
Charts rendered by the amazing <a href="https://www.chartjs.org/" target="_blank">Chart.js</a>.
2020-02-18 14:57:27 +01:00
</p>
<h3>About</h3>
Pixeldrain is a file sharing platform.
<a href="/" target="_blank">Visit the home page for more information.</a>
<h3>Keyboard Controls</h3>
<table style="max-width: 100%;">
<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>
2019-07-07 22:34:20 +02:00
</div>
2020-02-18 14:57:27 +01:00
</template>
<template id="tpl_edit_file">
2021-02-23 16:50:13 +01:00
<div class="edit_file_notification" style="display: none;"></div>
<h3>Rename</h3>
<form class="edit_file_name_form" style="display: flex; width: 100%">
<input class="edit_file_name_field" type="text" style="flex: 1 1 auto"/>
<button class="edit_file_name_submit" role="submit" style="flex: 0 0 auto">
<i class="icon">save</i> Save
</button>
</form>
<h3>Delete</h3>
2020-02-18 14:57:27 +01:00
<p>
When you delete a file it cannot be recovered.
Nobody will be able to download it and the link will
stop working. The file will also disappear from any
lists it's contained in.
</p>
<div style="text-align: center;">
<button class="button_red btn_delete_file">
<i class="icon small">delete</i> Delete this file
</button>
2020-01-23 09:42:28 +01:00
</div>
2020-02-18 14:57:27 +01:00
</template>
<template id="tpl_captcha_popup">
<div class="captcha_text"></div>
<br/>
<div class="captcha_popup_captcha" style="text-align: center;"></div>
</template>
2021-03-16 15:52:09 +01:00
2021-03-16 17:19:03 +01:00
<template id="tpl_embed_popup">
<p>
You can embed pixeldrain's file viewer in your own web pages. We
have created a special HTML code which renders a minimalistic
version of the file viewer where the title bar is a bit thinner and
the toolbar is collapsed by default.
</p>
<p>
Unless it was uploaded using a pixeldrain Pro account the embedded
file will also show advertisements.
</p>
<h3>Code</h3>
<textarea class="embed_html_code" style="width: 100%; height: 4em; margin: 0;"></textarea>
<br/>
<button class="embed_copy_html"><i class="icon">content_copy</i> Copy HTML</button>
<button class="embed_show_preview"><i class="icon">visibility</i> Show example</button>
<h3>Example</h3>
<div class="embed_preview_area" style="text-align: center;"></div>
</template>
2018-07-09 23:19:16 +02:00
2021-05-11 16:14:16 +02:00
<template id="tpl_report_abuse_popup">
<p>
If you think this file violates pixeldrain's
<a href="/about#content-policy">content policy</a> you can
report it for moderation with this form. You cannot report
copyright abuse with this form, send a formal DMCA notification
to the
<a href="/about#content-policy">abuse e-mail address</a>
instead.
</p>
<form class="abuse_type_form" style="width: 100%">
<h3>Abuse type</h3>
<p>
Which type of abuse is shown in this file? Pick the most
appropriate one.
</p>
<label for="abuse_type_terrorism">
<input type="radio" id="abuse_type_terrorism" name="abuse_type" value="terrorism">
<b>Terrorism</b>: Videos, images or audio fragments showing
2021-05-18 23:48:09 +02:00
or promoting the use of intentional violence to achieve
political aims.
</label>
<label for="abuse_type_gore">
<input type="radio" id="abuse_type_gore" name="abuse_type" value="gore">
<b>Gore</b>: Graphic and shocking videos or images depicting
severe harm to humans (or animals).
</label>
<label for="abuse_type_child_abuse">
<input type="radio" id="abuse_type_child_abuse" name="abuse_type" value="child_abuse">
<b>Child abuse</b>: Videos or images depicting inappropriate
touching or nudity of minors.
</label>
<label for="abuse_type_malware">
<input type="radio" id="abuse_type_malware" name="abuse_type" value="malware">
<b>Malware</b>: Software programs designed to cause harm to
computer systems.
</label>
2021-05-11 16:14:16 +02:00
<!--
<h3>E-mail address</h3>
<p>
If you want to be notified when this file gets blocked you
can enter your e-mail address here. This is optional, you
can leave it empty if you want.
</p>
<input class="abuse_email_field" type="text" placeholder="e-mail address" style="width: 100%"/>
<br/>
-->
<h3>Send</h3>
<div class="abuse_report_notification" style="display: none;"></div>
<p>
Abuse reports are manually reviewed. Normally this shouldn't
take more than 24 hours. During busy periods it can take
2021-05-11 16:14:16 +02:00
longer.
</p>
<div style="text-align: right;">
<button class="button_highlight abuse_report_submit" role="submit">
<i class="icon">send</i> Send
</button>
</div>
</form>
</template>
2021-06-22 00:32:05 +02:00
<template id="intro_popup">
<h3>Upload your own files here!</h3>
<p>
On pixeldrain you can share your files with large or small
groups of people. The sky is the limit!
</p>
<button class="intro_popup_close button_highlight" style="float: right; margin: 0 10px 10px 0;">
<i class="icon">check</i> Got it!
</button>
</template>
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}}';
2021-03-10 20:13:32 +01:00
let embeddedViewer = {{.Other.Embedded}};
2021-03-16 17:19:03 +01:00
let userAuthenticated = {{.Authenticated}};
2020-08-11 19:52:03 +02:00
let highlightColor = '#{{.Style.HighlightColor.RGB}}';
2020-01-20 19:55:51 +01:00
{{template `util.js`}}
2020-08-11 19:52:03 +02:00
{{template `drawGraph.js`}}
2020-02-18 14:57:27 +01:00
{{template `Modal.js`}}
2019-12-23 23:56:57 +01:00
{{template `Toolbar.js`}}
2020-02-18 14:57:27 +01:00
{{template `EditWindow.js`}}
2021-03-16 15:52:09 +01:00
{{template `EmbedWindow.js`}}
2020-01-20 19:55:51 +01:00
{{template `DetailsWindow.js`}}
2021-05-11 16:14:16 +02:00
{{template `AbuseReportWindow.js`}}
2019-12-23 23:56:57 +01:00
{{template `ListNavigator.js`}}
2021-06-22 00:32:05 +02:00
{{template `IntroPopup.js`}}
2020-01-20 19:55:51 +01:00
{{template `Viewer.js`}}
2020-07-16 17:24:03 +02:00
{{template `AbuseViewer.js`}}
2020-01-20 19:55:51 +01:00
{{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
2021-02-14 10:06:48 +01:00
// DOMContentLoaded fires when the DOM tree has been parsed, but
// before the assets have loaded
window.addEventListener("DOMContentLoaded", () => {
// 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 :)
new Viewer('{{.Other.Type}}', '{{.Other.ViewToken}}', {{.Other.APIResponse}})
})
2017-11-10 12:39:55 +01:00
</script>
{{template "analytics"}}
2020-10-26 11:42:08 +01:00
2020-10-27 11:26:41 +01:00
{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }}
2021-05-25 11:43:16 +02:00
{{ template "floating_ads" . }}
2020-10-27 08:25:03 +01:00
{{ end }}
2017-11-10 12:39:55 +01:00
</body>
</html>
2018-07-09 23:19:16 +02:00
{{end}}