Add grab file button

res/include/script/file_viewer/Viewer.js

@@ -78,6 +78,12 @@ function Viewer(type, viewToken, data) {
 
 	this.embedWindow = new EmbedWindow(this)
 
+	if (userAuthenticated && !this.file.can_edit) {
+		let btnGrab = document.getElementById("btn_grab")
+		btnGrab.style.display = ""
+		btnGrab.addEventListener("click", () => { this.grabFile() })
+	}
+
 	this.renderSponsors()
 	window.addEventListener("resize", e => { this.renderSponsors() })
 
@@ -245,6 +251,9 @@ Viewer.prototype.keyboardEvent = function (evt) {
 		case 77: // M to open the embed window
 			this.embedWindow.toggle()
 			break
+		case 71: // G to grab this file
+			this.grabFile()
+			break
 		case 81: // Q to close the window
 			window.close()
 			break
@@ -263,6 +272,28 @@ Viewer.prototype.toggleFullscreen = function () {
 	}
 }
 
+Viewer.prototype.grabFile = async function () {
+	if (!userAuthenticated || this.file.can_edit) {
+		return
+	}
+
+	const form = new FormData()
+	form.append("grab_file", this.file.id)
+	console.log(this.file.id)
+
+	try {
+		const resp = await fetch(apiEndpoint + "/file", { method: "POST", body: form });
+		if (resp.status >= 400) {
+			throw (await resp.json()).message
+		}
+
+		window.open(domainURL() + "/u/" + (await resp.json()).id, "_blank")
+	} catch (err) {
+		alert("Failed to grab file: " + err)
+		return
+	}
+}
+
 
 // Against XSS attacks
 function escapeHTML(str) {

res/include/style/layout.css

@@ -27,8 +27,6 @@
 	font-display: block;
 	src: local('Material Icons'),
 		local('MaterialIcons-Regular'),
-		url(/res/misc/MaterialIcons-Regular.woff2) format('woff2'),
-		url(/res/misc/MaterialIcons-Regular.woff) format('woff'),
 		url(/res/misc/MaterialIcons-Regular.ttf) format('truetype');
 }
 .icon {

res/template/file_viewer.html

@@ -63,13 +63,13 @@
 					</button>
 					<button id="btn_copy" class="toolbar_button button_full_width">
 						<i class="icon">content_copy</i>
-						<span><u>C</u>opy Link</span>
+						<span><u>C</u>opy link</span>
 					</button>
 					<button id="btn_share" class="toolbar_button button_full_width">
 						<i class="icon">share</i>
 						<span>Share</span>
 					</button>
-					<button id="btn_shuffle" class="toolbar_button button_full_width" style="display: none;">
+					<button id="btn_shuffle" class="toolbar_button button_full_width" style="display: none;" title="Randomize the order of the files in this list">
 						<i class="icon">shuffle</i>
 						<span>Shuffle &#x2610;</span>
 					</button>
@@ -77,14 +77,19 @@
 						<i class="icon">help</i>
 						<span>Deta<u>i</u>ls</span>
 					</button>
-					<button id="btn_embed" class="toolbar_button button_full_width">
+					<hr/>
-						<i class="icon">code</i>
-						<span>E<u>m</u>bed</span>
-					</button>
 					<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>
+					<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>
 					<br/>
 
 					{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }}
@@ -279,27 +284,26 @@
 			<br/>
 			<div class="captcha_popup_captcha" style="text-align: center;"></div>
 		</template>
-	</template>
 
-	<template id="tpl_embed_popup">
+		<template id="tpl_embed_popup">
-		<p>
+			<p>
-			You can embed pixeldrain's file viewer in your own web pages. We
+				You can embed pixeldrain's file viewer in your own web pages. We
-			have created a special HTML code which renders a minimalistic
+				have created a special HTML code which renders a minimalistic
-			version of the file viewer where the title bar is a bit thinner and
+				version of the file viewer where the title bar is a bit thinner and
-			the toolbar is collapsed by default.
+				the toolbar is collapsed by default.
-		</p>
+			</p>
-		<p>
+			<p>
-			Unless it was uploaded using a pixeldrain Pro account the embedded
+				Unless it was uploaded using a pixeldrain Pro account the embedded
-			file will also show advertisements.
+				file will also show advertisements.
-		</p>
+			</p>
-		<h3>Code</h3>
+			<h3>Code</h3>
-		<textarea class="embed_html_code" style="width: 100%; height: 4em; margin: 0;"></textarea>
+			<textarea class="embed_html_code" style="width: 100%; height: 4em; margin: 0;"></textarea>
-		<br/>
+			<br/>
-		<button class="embed_copy_html"><i class="icon">content_copy</i> Copy HTML</button>
+			<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>
+			<button class="embed_show_preview"><i class="icon">visibility</i> Show example</button>
-		<h3>Example</h3>
+			<h3>Example</h3>
-		<div class="embed_preview_area" style="text-align: center;"></div>
+			<div class="embed_preview_area" style="text-align: center;"></div>
-	</template>
+		</template>
 
 		<script src="/res/script/Chart.min.js"></script>
 		<script>
@@ -307,6 +311,7 @@
 			let apiEndpoint = '{{.APIEndpoint}}';
 			let captchaKey = '{{.Other.CaptchaKey}}';
 			let embeddedViewer = {{.Other.Embedded}};
+			let userAuthenticated = {{.Authenticated}};
 			let highlightColor = '#{{.Style.HighlightColor.RGB}}';
 			{{template `util.js`}}
 			{{template `drawGraph.js`}}