From 7866d9c5316effbfbf1c032d44ee9e2b4646252c Mon Sep 17 00:00:00 2001 From: jliddev Date: Fri, 7 Jan 2022 10:08:03 -0600 Subject: [PATCH] Webview changed to a normal component, not directive --- .../common/webview/webview.component.html | 1 + .../common/webview/webview.component.scss | 4 + .../common/webview/webview.component.ts | 121 ++++++++++++++++++ .../src/app/directives/webview.component.ts | 104 --------------- .../src/app/modules/common-ui.module.ts | 3 + .../src/app/modules/directive.module.ts | 5 +- 6 files changed, 131 insertions(+), 107 deletions(-) delete mode 100644 wowup-electron/src/app/directives/webview.component.ts diff --git a/wowup-electron/src/app/components/common/webview/webview.component.html b/wowup-electron/src/app/components/common/webview/webview.component.html index e69de29b..a5c4a941 100644 --- a/wowup-electron/src/app/components/common/webview/webview.component.html +++ b/wowup-electron/src/app/components/common/webview/webview.component.html @@ -0,0 +1 @@ +
diff --git a/wowup-electron/src/app/components/common/webview/webview.component.scss b/wowup-electron/src/app/components/common/webview/webview.component.scss index e69de29b..3c4c10f5 100644 --- a/wowup-electron/src/app/components/common/webview/webview.component.scss +++ b/wowup-electron/src/app/components/common/webview/webview.component.scss @@ -0,0 +1,4 @@ +.webview-container { + width: 100%; + height: 100%; +} diff --git a/wowup-electron/src/app/components/common/webview/webview.component.ts b/wowup-electron/src/app/components/common/webview/webview.component.ts index e69de29b..b1c0fe79 100644 --- a/wowup-electron/src/app/components/common/webview/webview.component.ts +++ b/wowup-electron/src/app/components/common/webview/webview.component.ts @@ -0,0 +1,121 @@ +import { + AfterViewInit, + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + NgZone, + OnDestroy, + OnInit, + ViewChild, +} from "@angular/core"; +import { nanoid } from "nanoid"; +import { Subject, takeUntil } from "rxjs"; +import { AdPageOptions } from "../../../../common/wowup/models"; +import { ElectronService } from "../../../services/electron/electron.service"; +import { FileService } from "../../../services/files/file.service"; +import { LinkService } from "../../../services/links/link.service"; +import { SessionService } from "../../../services/session/session.service"; + +@Component({ + selector: "app-webview", + templateUrl: "./webview.component.html", + styleUrls: ["./webview.component.scss"], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class WebViewComponent implements OnInit, OnDestroy, AfterViewInit { + @Input("options") public options: AdPageOptions; + + @ViewChild("webviewContainer", { read: ElementRef }) public webviewContainer!: ElementRef; + + private readonly destroy$: Subject = new Subject(); + + private _tag: Electron.WebviewTag; + private _id: string = nanoid(); + + public constructor( + private _electronService: ElectronService, + private _fileService: FileService, + private _linkService: LinkService, + private _sessionService: SessionService, + private _ngZone: NgZone + ) {} + + ngAfterViewInit(): void { + this.initWebview(this.webviewContainer).catch((e) => console.error(e)); + this._electronService.on("webview-new-window", this.onWebviewNewWindow); + } + + ngOnInit(): void {} + + ngOnDestroy(): void { + this.destroy$.next(true); + this.destroy$.unsubscribe(); + + this._electronService.off("webview-new-window", this.onWebviewNewWindow); + + // Clean up the webview element + if (this._tag) { + if (this._tag.isDevToolsOpened()) { + this._tag.closeDevTools(); + } + this._tag = undefined; + } + + // this._element.nativeElement.innerHTML = 0; + } + + private async initWebview(element: ElementRef) { + const pageReferrer = this.options.referrer ? `httpreferrer="${this.options.referrer}"` : ""; + const userAgent = this.options.userAgent ?? ""; + const preload = this.options.preloadFilePath + ? `preload="${await this._fileService.getAssetFilePath(this.options.preloadFilePath)}"` + : ""; + const partition = this.options.partition ?? "memcache"; + + console.debug("initWebview", this.options); + + const placeholder = document.createElement("div"); + + /* eslint-disable no-irregular-whitespace */ + placeholder.innerHTML = ` + + `; + /* eslint-enable no-irregular-whitespace */ + + this._tag = placeholder.firstElementChild as Electron.WebviewTag; + + element.nativeElement.appendChild(this._tag); + this._tag.addEventListener("dom-ready", this.onWebviewReady); + } + + private onWebviewReady = () => { + console.debug("onWebviewReady", this._tag); + + this._sessionService.debugAdFrame$.pipe(takeUntil(this.destroy$)).subscribe(() => { + if (!this._tag.isDevToolsOpened()) { + this._tag?.openDevTools(); + } + }); + + this._tag.removeEventListener("dom-ready", this.onWebviewReady); + // this._tag.openDevTools(); + }; + + private onWebviewNewWindow = (evt, details: Electron.HandlerDetails) => { + console.debug(`webview-new-window`, details); + this._ngZone.run(() => { + this._linkService.confirmLinkNavigation(details.url).subscribe(); + }); + }; +} diff --git a/wowup-electron/src/app/directives/webview.component.ts b/wowup-electron/src/app/directives/webview.component.ts deleted file mode 100644 index a968eae3..00000000 --- a/wowup-electron/src/app/directives/webview.component.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { Directive, ElementRef, Input, OnDestroy, OnInit } from "@angular/core"; -import { nanoid } from "nanoid"; -import { Subject, takeUntil } from "rxjs"; -import { AdPageOptions } from "../../common/wowup/models"; -import { ElectronService } from "../services"; -import { FileService } from "../services/files/file.service"; -import { LinkService } from "../services/links/link.service"; -import { SessionService } from "../services/session/session.service"; - -@Directive({ - selector: "app-webview", -}) -export class WebviewComponent implements OnInit, OnDestroy { - @Input("options") public options: AdPageOptions; - - private readonly destroy$: Subject = new Subject(); - private _tag: Electron.WebviewTag; - private _id: string = nanoid(); - private _element: ElementRef; - - public constructor( - el: ElementRef, - private _fileService: FileService, - private _linkService: LinkService, - private _sessionService: SessionService, - private _electronService: ElectronService - ) { - this._element = el; - } - - public ngOnInit(): void { - this.initWebview(this._element).catch((e) => console.error(e)); - this._electronService.on("webview-new-window", this.onWebviewNewWindow); - } - - public ngOnDestroy(): void { - this.destroy$.next(true); - this.destroy$.unsubscribe(); - - this._electronService.off("webview-new-window", this.onWebviewNewWindow); - - // Clean up the webview element - if (this._tag) { - if (this._tag.isDevToolsOpened()) { - this._tag.closeDevTools(); - } - this._tag = undefined; - } - - this._element.nativeElement.innerHTML = 0; - } - - private async initWebview(element: ElementRef) { - const pageReferrer = this.options.referrer ? `httpreferrer="${this.options.referrer}"` : ""; - const userAgent = this.options.userAgent ?? ""; - const preload = this.options.preloadFilePath - ? `preload="${await this._fileService.getAssetFilePath(this.options.preloadFilePath)}"` - : ""; - const partition = this.options.partition ?? "memcache"; - - console.debug("initWebview", this.options); - - const placeholder = document.createElement("div"); - - /* eslint-disable no-irregular-whitespace */ - placeholder.innerHTML = ` - - `; - /* eslint-enable no-irregular-whitespace */ - - this._tag = placeholder.firstElementChild as Electron.WebviewTag; - - element.nativeElement.appendChild(this._tag); - this._tag.addEventListener("dom-ready", this.onWebviewReady); - } - - private onWebviewReady = () => { - console.debug("onWebviewReady", this._tag); - - this._sessionService.debugAdFrame$.pipe(takeUntil(this.destroy$)).subscribe(() => { - if (!this._tag.isDevToolsOpened()) { - this._tag?.openDevTools(); - } - }); - - this._tag.removeEventListener("dom-ready", this.onWebviewReady); - // this._tag.openDevTools(); - }; - - private onWebviewNewWindow = (evt, details: Electron.HandlerDetails) => { - console.debug(`webview-new-window`, details); - this._linkService.confirmLinkNavigation(details.url).subscribe(); - }; -} diff --git a/wowup-electron/src/app/modules/common-ui.module.ts b/wowup-electron/src/app/modules/common-ui.module.ts index d6358fd2..99844a7d 100644 --- a/wowup-electron/src/app/modules/common-ui.module.ts +++ b/wowup-electron/src/app/modules/common-ui.module.ts @@ -14,6 +14,7 @@ import { ExternalUrlConfirmationDialogComponent } from "../components/common/ext import { PatchNotesDialogComponent } from "../components/common/patch-notes-dialog/patch-notes-dialog.component"; import { ProgressButtonComponent } from "../components/common/progress-button/progress-button.component"; import { TelemetryDialogComponent } from "../components/common/telemetry-dialog/telemetry-dialog.component"; +import { WebViewComponent } from "../components/common/webview/webview.component"; import { ProgressSpinnerComponent } from "../components/progress-spinner/progress-spinner.component"; import { MatModule } from "./mat-module"; import { PipesModule } from "./pipes.module"; @@ -33,6 +34,7 @@ import { PipesModule } from "./pipes.module"; CellWrapTextComponent, CenteredSnackbarComponent, ClientSelectorComponent, + WebViewComponent, ], imports: [CommonModule, FormsModule, TranslateModule, MatModule, PipesModule, ReactiveFormsModule], exports: [ @@ -49,6 +51,7 @@ import { PipesModule } from "./pipes.module"; CellWrapTextComponent, CenteredSnackbarComponent, ClientSelectorComponent, + WebViewComponent, ], }) export class CommonUiModule {} diff --git a/wowup-electron/src/app/modules/directive.module.ts b/wowup-electron/src/app/modules/directive.module.ts index 1f92aafb..ca7ffe60 100644 --- a/wowup-electron/src/app/modules/directive.module.ts +++ b/wowup-electron/src/app/modules/directive.module.ts @@ -1,10 +1,9 @@ import { NgModule } from "@angular/core"; -import { WebviewComponent } from "../directives/webview.component"; import { ExternalLinkDirective } from "../directives/external-link.directive"; @NgModule({ - declarations: [ExternalLinkDirective, WebviewComponent], - exports: [ExternalLinkDirective, WebviewComponent], + declarations: [ExternalLinkDirective], + exports: [ExternalLinkDirective], }) export class DirectiveModule {}