diff --git a/src/lib/components/ImageShowFullscreenButton.js b/src/lib/components/ImageShowFullscreenButton.js index ebf0df0..dd50015 100644 --- a/src/lib/components/ImageShowFullscreenButton.js +++ b/src/lib/components/ImageShowFullscreenButton.js @@ -1,15 +1,19 @@ import {BaseComponent} from "$lib/components/base/BaseComponent.js"; import {getComponent} from "$lib/components/base/ComponentUtils.js"; +import MiscSettings from "$lib/extension/settings/MiscSettings.js"; export class ImageShowFullscreenButton extends BaseComponent { /** * @type {MediaBoxTools} */ #mediaBoxTools; + #isFullscreenButtonEnabled = false; build() { this.container.innerText = '🔍'; ImageShowFullscreenButton.#resolveFullscreenViewer(); + + ImageShowFullscreenButton.#miscSettings ??= new MiscSettings(); } init() { @@ -20,6 +24,24 @@ export class ImageShowFullscreenButton extends BaseComponent { } this.on('click', this.#onButtonClicked.bind(this)); + + if (ImageShowFullscreenButton.#miscSettings) { + ImageShowFullscreenButton.#miscSettings.resolveFullscreenViewerEnabled() + .then(isEnabled => { + this.#isFullscreenButtonEnabled = isEnabled; + this.#updateFullscreenButtonVisibility(); + }) + .then(() => { + ImageShowFullscreenButton.#miscSettings.subscribe(settings => { + this.#isFullscreenButtonEnabled = settings.fullscreenViewer; + this.#updateFullscreenButtonVisibility(); + }) + }) + } + } + + #updateFullscreenButtonVisibility() { + this.container.classList.toggle('is-visible', this.#isFullscreenButtonEnabled); } #onButtonClicked() { @@ -113,6 +135,11 @@ export class ImageShowFullscreenButton extends BaseComponent { videoElement.remove(); }) } + + /** + * @type {MiscSettings|null} + */ + static #miscSettings = null; } export function createImageShowFullscreenButton() { diff --git a/src/styles/content/listing.scss b/src/styles/content/listing.scss index b9dce96..24e1b65 100644 --- a/src/styles/content/listing.scss +++ b/src/styles/content/listing.scss @@ -151,7 +151,7 @@ display: block; } - .media-box-show-fullscreen { + .media-box-show-fullscreen.is-visible { display: block; } }