From 670df9457db83d57ac7127ad84b89aba5778a84c Mon Sep 17 00:00:00 2001
From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com>
Date: Fri, 14 Apr 2023 16:51:39 +0200
Subject: [PATCH] Added fullscreen function

---
 .../plugins/core/qdn/browser/browser.src.js   | 109 ++++++++++++------
 1 file changed, 75 insertions(+), 34 deletions(-)

diff --git a/qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js b/qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js
index 6c1e02d7..8e69858b 100644
--- a/qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js
+++ b/qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js
@@ -244,42 +244,81 @@ class WebBrowser extends LitElement {
 
 	render() {
 		return html`
-    		<div id="websitesWrapper" style="width:auto; padding:10px; background: var(--white);">
-    			<div class="layout horizontal center">
-    				<div class="address-bar">
-    					<mwc-button @click=${() => this.goBack()} title="${translate(
-			'general.back'
-		)}" class="address-bar-button"><mwc-icon>arrow_back_ios</mwc-icon></mwc-button>
-    					<mwc-button @click=${() => this.goForward()} title="${translate(
-			'browserpage.bchange1'
-		)}" class="address-bar-button"><mwc-icon>arrow_forward_ios</mwc-icon></mwc-button>
-    					<mwc-button @click=${() => this.refresh()} title="${translate(
-			'browserpage.bchange2'
-		)}" class="address-bar-button"><mwc-icon>refresh</mwc-icon></mwc-button>
-    					<mwc-button @click=${() => this.goBackToList()} title="${translate(
-			'browserpage.bchange3'
-		)}" class="address-bar-button"><mwc-icon>home</mwc-icon></mwc-button>
-    					<input disabled style="width: 550px; color: var(--black);" id="address" type="text" value="${this.displayUrl
-			}"></input>
-    					<mwc-button @click=${() => this.delete()} title="${translate(
-				'browserpage.bchange4'
-			)} ${this.service} ${this.name} ${translate(
-				'browserpage.bchange5'
-			)}" class="address-bar-button float-right"><mwc-icon>delete</mwc-icon></mwc-button>
-    					${this.renderBlockUnblockButton()}
-    					${this.renderFollowUnfollowButton()}
-    				</div>
-    				<div class="iframe-container">
-    					<iframe id="browser-iframe" src="${this.url
-			}" sandbox="allow-scripts allow-forms allow-downloads allow-same-origin allow-modals" allow="fullscreen">
-    						<span style="color: var(--black);">${translate(
-				'browserpage.bchange6'
-			)}</span>
-    					</iframe>
+    			<div id="websitesWrapper" style="width:auto; padding:10px; background: var(--white);">
+    				<div class="layout horizontal center">
+    					<div class="address-bar">
+    						<mwc-button @click=${() => this.goBack()} title="${translate('general.back')}" class="address-bar-button"><mwc-icon>arrow_back_ios</mwc-icon></mwc-button>
+    						<mwc-button @click=${() => this.goForward()} title="${translate('browserpage.bchange1')}" class="address-bar-button"><mwc-icon>arrow_forward_ios</mwc-icon></mwc-button>
+    						<mwc-button @click=${() => this.refresh()} title="${translate('browserpage.bchange2')}" class="address-bar-button"><mwc-icon>refresh</mwc-icon></mwc-button>
+    						<mwc-button @click=${() => this.goBackToList()} title="${translate('browserpage.bchange3')}" class="address-bar-button"><mwc-icon>home</mwc-icon></mwc-button>
+    						<input disabled style="width: 550px; color: var(--black);" id="address" type="text" value="${this.displayUrl}"></input>
+    						${this.renderFullScreen()}
+    						<mwc-button @click=${() => this.delete()} title="${translate('browserpage.bchange4')} ${this.service} ${this.name} ${translate('browserpage.bchange5')}" class="address-bar-button float-right"><mwc-icon>delete</mwc-icon></mwc-button>
+    						${this.renderBlockUnblockButton()}
+    						${this.renderFollowUnfollowButton()}
+    					</div>
+    					<div class="iframe-container">
+    						<iframe id="browser-iframe" src="${this.url}" sandbox="allow-scripts allow-forms allow-downloads allow-modals" allow="fullscreen">
+    							<span style="color: var(--black);">${translate('browserpage.bchange6')}</span>
+    						</iframe>
+    					</div>
     				</div>
     			</div>
-    		</div>
-    	`;
+		`;
+	}
+
+      renderFullScreen() {
+		if (window.innerHeight == screen.height) {
+			return html`
+				<mwc-button
+					@click=${() => this.exitFullScreen()}
+					title="${translate('browserpage.bchange9')} ${this.name}"
+					class="address-bar-button float-right"
+				>
+					<mwc-icon>fullscreen_exit</mwc-icon>
+				</mwc-button>
+			`
+		} else {
+			return html`
+				<mwc-button
+					@click=${() => this.goFullScreen()}
+					title="${translate('browserpage.bchange9')} ${this.name}"
+					class="address-bar-button float-right"
+				>
+					<mwc-icon>fullscreen</mwc-icon>
+				</mwc-button>
+			`
+		}
+      }
+
+	goFullScreen() {
+		var elem = this.shadowRoot.getElementById('websitesWrapper')
+
+		if (elem.requestFullscreen) {
+			elem.requestFullscreen()
+		} else if (elem.mozRequestFullScreen) {
+			elem.mozRequestFullScreen()
+		} else if (elem.webkitRequestFullscreen) {
+			elem.webkitRequestFullscreen()
+		} else if (elem.msRequestFullscreen) {
+			elem.msRequestFullscreen()
+		}
+
+		this.renderFullScreen()
+	}
+
+	exitFullScreen() {
+		if(document.exitFullscreen) {
+			document.exitFullscreen()
+		} else if (document.mozCancelFullScreen) {
+			document.mozCancelFullScreen()
+		} else if (document.webkitExitFullscreen) {
+			document.webkitExitFullscreen()
+		} else if (document.msExitFullscreen) {
+			document.msExitFullscreen()
+		}
+
+		this.renderFullScreen()
 	}
 
 	async unitJoinFee() {
@@ -2168,9 +2207,11 @@ class WebBrowser extends LitElement {
 
 	goBackToList() {
 		if (this.service == "APP") {
+			this.exitFullScreen()
 			window.location = '../../q-app/index.html';
 		}
 		else { // Default to websites list
+			this.exitFullScreen()
 			window.location = '../index.html';
 		}
 	}