Added fullscreen function

qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js

@@ -247,34 +247,19 @@ class WebBrowser extends LitElement {
     			<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>
+    						<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-same-origin allow-modals" allow="fullscreen">
-    						<span style="color: var(--black);">${translate(
-				'browserpage.bchange6'
-			)}</span>
+    						<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>
@@ -282,6 +267,60 @@ class WebBrowser extends LitElement {
 		`;
 	}
 
+      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() {
 		const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
 		const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
@@ -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';
 		}
 	}