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/lib/extension/settings/MiscSettings.js b/src/lib/extension/settings/MiscSettings.js new file mode 100644 index 0000000..707ff5a --- /dev/null +++ b/src/lib/extension/settings/MiscSettings.js @@ -0,0 +1,32 @@ +import CacheableSettings from "$lib/extension/base/CacheableSettings.js"; + +export default class MiscSettings extends CacheableSettings { + constructor() { + super("misc"); + } + + async resolveFullscreenViewerEnabled() { + return this._resolveSetting("fullscreenViewer", true); + } + + async setFullscreenViewerEnabled(isEnabled) { + return this._writeSetting("fullscreenViewer", isEnabled); + } + + /** + * @param {function(MiscSettingsObject): void} callback + * @return {function(): void} + */ + subscribe(callback) { + return super.subscribe(settings => { + callback({ + fullscreenViewer: settings.fullscreenViewer ?? true, + }) + }); + } +} + +/** + * @typedef {Object} MiscSettingsObject + * @property {boolean} fullscreenViewer + */ diff --git a/src/routes/preferences/+page.svelte b/src/routes/preferences/+page.svelte index a50e255..c9f37fe 100644 --- a/src/routes/preferences/+page.svelte +++ b/src/routes/preferences/+page.svelte @@ -7,4 +7,5 @@