fix captcha popup

res/include/script/file_viewer/Toolbar.js

@@ -81,16 +81,31 @@ class Toolbar {
 	}
 
 	download() {let t = this;
-		let triggerDL = function(){
+		let triggerDL = (captchaResp = "") => {
-			t.downloadFrame.src = apiEndpoint+"/file/"+t.viewer.currentFile+"?download";
+			if (captchaResp === "") {
+				t.downloadFrame.src = apiEndpoint+"/file/"+
+					t.viewer.currentFile+"?download";
+			} else {
+				t.downloadFrame.src = apiEndpoint+"/file/"+
+					t.viewer.currentFile+"?download&recaptcha_response="+captchaResp;
+			}
 		}
 
-		if (captchaKey === "a"){
+		if (captchaKey === "none"){
 			// If the server doesn't support captcha there's no use in checking
 			// availability
 			triggerDL();
 			return;
 		}
+		if (recaptchaResponse !== "") {
+			// Captcha already filled in. Use the saved captcha responsse to
+			// download the file
+			triggerDL(recaptchaResponse);
+
+			// Reset the key
+			recaptchaResponse = "";
+			return;
+		}
 
 		fetch(apiEndpoint+"/file/"+t.viewer.currentFile+"/availability").then(resp => {
 			return resp.json();
@@ -99,12 +114,13 @@ class Toolbar {
 			let popupTitle = document.getElementById("captcha_popup_title");
 			let popupContent = document.getElementById("captcha_popup_content");
 
-			let showCaptcha = function() {
+			let showCaptcha = () => {
 				// Load the recaptcha script with a load function
-				var script = document.createElement("script");
+				let script = document.createElement("script");
 				script.src = "https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit";
-				document.appendChild(script);
+				document.body.appendChild(script);
-				// $.getScript("https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit");
+
+				// Show the popup
 				popupDiv.style.opacity = "1";
 				popupDiv.style.visibility = "visible";
 			}
@@ -125,9 +141,11 @@ class Toolbar {
 					"human first.";
 				showCaptcha();
 			} else {
+				console.warn("resp.value not valid: "+resp.value);
 				triggerDL();
 			}
 		}).catch(e => {
+			console.warn("fetch availability failed: "+e);
 			triggerDL();
 		});
 	}
@@ -144,7 +162,7 @@ class Toolbar {
 		}
 
 		// Return to normal
-		setTimeout(function(){
+		setTimeout(() => {
 			t.spanCopyLink.innerText = "Copy";
 			t.btnCopyLink.classList.remove("button_highlight")
 		}, 60000);
@@ -158,15 +176,17 @@ class Toolbar {
 }
 
 // Called by the google recaptcha script
+let recaptchaResponse = "";
 function loadCaptcha(){
 	grecaptcha.render("captcha_popup_captcha", {
 		sitekey: captchaKey,
 		theme: "dark",
-		callback: function(token){
+		callback: token => {
-			document.getElementById("download_frame").src = "/api/file/" + Viewer.currentFile +
+			recaptchaResponse = token;
-				"?download&recaptcha_response="+token;
+			document.getElementById("btn_download").click();
 
-			setTimeout(function(){
+			// Hide the popup
+			setTimeout(() => {
 				let popupDiv = document.getElementById("captcha_popup");
 				popupDiv.style.opacity = "0";
 				popupDiv.style.visibility = "hidden";

res/include/style/viewer.css

@@ -266,12 +266,12 @@
 	text-align: left;
 	box-shadow: var(--shadow_color) 0px 0px 50px;
 }
-.popup > .highlight_light {
+.popup > .highlight_1 {
 	font-size: 1.2em;
 }
 .popup > .content_area {
 	flex: 1;
-	overflow-y: scroll;
+	overflow: auto;
 	padding: 10px;
 }
 
@@ -291,19 +291,6 @@
 
 table {width: auto !important;}
 
-.corner-popup{
-	position: fixed;
-	background-color: var(--background_color);
-	right: 20px;
-	bottom: 20px;
-	width: fit-content;
-	height: fit-content;
-	overflow: hidden;
-	padding: 5px;
-
-	box-shadow: var(--shadow_color) 0px 0px 50px;
-	z-index: 200;
-}
 
 /* ====================
    || LIST NAVIGATOR ||

res/static/viewer-scripts/audio.js

@@ -1,5 +0,0 @@
-/* global ListNavigator */
-
-$("#audioPlayer").bind("ended", function(){
-	ListNavigator.nextItem();
-});

res/static/viewer-scripts/image.js

@@ -1,61 +0,0 @@
-// Image zoom-in script
-
-var zoomed = false;
-// When a user clicks the image
-$("#displayImg").on("dblclick doubletap", function (event) {
-	if (zoomed) {
-		$("#displayImg").css("max-width", "100%");
-		$("#displayImg").css("max-height", "100%");
-		$("#displayImg").css("top", "50%");
-		$("#displayImg").css("left", "auto");
-		$("#displayImg").css("transform", "translateY(-50%)");
-		$(".image-container").css("overflow", "hidden");
-		zoomed = false;
-	} else {
-		$("#displayImg").css("max-width", "none");
-		$("#displayImg").css("max-height", "none");
-		$("#displayImg").css("transform", "none");
-		$(".pannable").css("top", "0");
-		$(".image-container").css("overflow", "scroll");
-		zoomed = true;
-	}
-	
-	
-	return false;
-});
-
-// Image dragging around the screen
-
-var drag = {
-	x: 0,
-	y: 0,
-	state: false
-};
-
-$(".pannable").on("mousedown", function (e) {
-	if (!drag.state && e.which === 1 && zoomed) {
-		drag.x = e.pageX;
-		drag.y = e.pageY;
-		drag.state = true;
-
-		return false;
-	}
-});
-
-var img = $(".image-container");
-
-$(document).on("mousemove", function (e) {
-	if (drag.state) {
-		img.scrollLeft(img.scrollLeft() - (e.pageX - drag.x));
-		img.scrollTop(img.scrollTop() - (e.pageY - drag.y));
-
-		drag.x = e.pageX;
-		drag.y = e.pageY;
-	}
-});
-
-$(document).on("mouseup", function () {
-	if (drag.state) {
-		drag.state = false;
-	}
-});

res/static/viewer-scripts/video.js

@@ -1,5 +0,0 @@
-/* global ListNavigator */
-
-$("#videoPlayer").bind("ended", function(){
-	ListNavigator.nextItem();
-});

res/template/file_viewer.html

@@ -145,7 +145,7 @@
 			</div>
 		</div>
 		<div id="captcha_popup" class="popup captcha_popup">
-			<div id="captcha_popup_title" class="highlight_headerbar"></div>
+			<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>