diff --git a/src/@fuse/components/fullscreen/fullscreen.component.ts b/src/@fuse/components/fullscreen/fullscreen.component.ts index 258267b7..b78e0424 100644 --- a/src/@fuse/components/fullscreen/fullscreen.component.ts +++ b/src/@fuse/components/fullscreen/fullscreen.component.ts @@ -1,46 +1,27 @@ import { DOCUMENT, NgTemplateOutlet } from '@angular/common'; -import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Inject, Input, TemplateRef, ViewEncapsulation } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatTooltipModule } from '@angular/material/tooltip'; -import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types'; @Component({ - selector : 'fuse-fullscreen', - templateUrl : './fullscreen.component.html', - encapsulation : ViewEncapsulation.None, + selector: 'fuse-fullscreen', + templateUrl: './fullscreen.component.html', + encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, - exportAs : 'fuseFullscreen', - standalone : true, - imports : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule], + exportAs: 'fuseFullscreen', + standalone: true, + imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule], }) -export class FuseFullscreenComponent implements OnInit +export class FuseFullscreenComponent { @Input() iconTpl: TemplateRef; @Input() tooltip: string; - private _fsDoc: FSDocument; - private _fsDocEl: FSDocumentElement; - private _isFullscreen: boolean = false; /** * Constructor */ - constructor(@Inject(DOCUMENT) private _document: Document) - { - this._fsDoc = _document as FSDocument; - } - - // ----------------------------------------------------------------------------------------------------- - // @ Lifecycle hooks - // ----------------------------------------------------------------------------------------------------- - - /** - * On init - */ - ngOnInit(): void - { - this._fsDocEl = document.documentElement as FSDocumentElement; - } + constructor(@Inject(DOCUMENT) private _document: Document) { } // ----------------------------------------------------------------------------------------------------- // @ Public methods @@ -51,121 +32,27 @@ export class FuseFullscreenComponent implements OnInit */ toggleFullscreen(): void { - // Check if the fullscreen is open - this._isFullscreen = this._getBrowserFullscreenElement() !== null; + if (!this._document.fullscreenEnabled) + { + console.log('Fullscreen is not available in this browser.'); + return; + } + + // Check if the fullscreen is already open + const fullScreen = this._document.fullscreenElement; // Toggle the fullscreen - if ( this._isFullscreen ) + if (fullScreen) { - this._closeFullscreen(); + this._document.exitFullscreen(); } else { - this._openFullscreen(); - } - } - - // ----------------------------------------------------------------------------------------------------- - // @ Private methods - // ----------------------------------------------------------------------------------------------------- - - /** - * Get browser's fullscreen element - * - * @private - */ - private _getBrowserFullscreenElement(): Element - { - if ( typeof this._fsDoc.fullscreenElement !== 'undefined' ) - { - return this._fsDoc.fullscreenElement; - } - - if ( typeof this._fsDoc.mozFullScreenElement !== 'undefined' ) - { - return this._fsDoc.mozFullScreenElement; - } - - if ( typeof this._fsDoc.msFullscreenElement !== 'undefined' ) - { - return this._fsDoc.msFullscreenElement; - } - - if ( typeof this._fsDoc.webkitFullscreenElement !== 'undefined' ) - { - return this._fsDoc.webkitFullscreenElement; - } - - throw new Error('Fullscreen mode is not supported by this browser'); - } - - /** - * Open the fullscreen - * - * @private - */ - private _openFullscreen(): void - { - if ( this._fsDocEl.requestFullscreen ) - { - this._fsDocEl.requestFullscreen(); - return; - } - - // Firefox - if ( this._fsDocEl.mozRequestFullScreen ) - { - this._fsDocEl.mozRequestFullScreen(); - return; - } - - // Chrome, Safari and Opera - if ( this._fsDocEl.webkitRequestFullscreen ) - { - this._fsDocEl.webkitRequestFullscreen(); - return; - } - - // IE/Edge - if ( this._fsDocEl.msRequestFullscreen ) - { - this._fsDocEl.msRequestFullscreen(); - return; - } - } - - /** - * Close the fullscreen - * - * @private - */ - private _closeFullscreen(): void - { - if ( this._fsDoc.exitFullscreen ) - { - this._fsDoc.exitFullscreen(); - return; - } - - // Firefox - if ( this._fsDoc.mozCancelFullScreen ) - { - this._fsDoc.mozCancelFullScreen(); - return; - } - - // Chrome, Safari and Opera - if ( this._fsDoc.webkitExitFullscreen ) - { - this._fsDoc.webkitExitFullscreen(); - return; - } - - // IE/Edge - else if ( this._fsDoc.msExitFullscreen ) - { - this._fsDoc.msExitFullscreen(); - return; + this._document.documentElement.requestFullscreen() + .catch(() => + { + console.error('Entering fullscreen mode failed.'); + }); } } } diff --git a/src/@fuse/components/fullscreen/fullscreen.types.ts b/src/@fuse/components/fullscreen/fullscreen.types.ts deleted file mode 100644 index 0477a1d4..00000000 --- a/src/@fuse/components/fullscreen/fullscreen.types.ts +++ /dev/null @@ -1,16 +0,0 @@ -export interface FSDocument extends HTMLDocument -{ - mozFullScreenElement?: Element; - mozCancelFullScreen?: () => void; - msFullscreenElement?: Element; - msExitFullscreen?: () => void; - webkitFullscreenElement?: Element; - webkitExitFullscreen?: () => void; -} - -export interface FSDocumentElement extends HTMLElement -{ - mozRequestFullScreen?: () => void; - msRequestFullscreen?: () => void; - webkitRequestFullscreen?: () => void; -} diff --git a/src/@fuse/components/fullscreen/public-api.ts b/src/@fuse/components/fullscreen/public-api.ts index 03aee0fc..3db68687 100644 --- a/src/@fuse/components/fullscreen/public-api.ts +++ b/src/@fuse/components/fullscreen/public-api.ts @@ -1,2 +1 @@ export * from '@fuse/components/fullscreen/fullscreen.component'; -export * from '@fuse/components/fullscreen/fullscreen.types';