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 @@ Back
Search + Misc & Tools diff --git a/src/routes/preferences/misc/+page.svelte b/src/routes/preferences/misc/+page.svelte new file mode 100644 index 0000000..d02981f --- /dev/null +++ b/src/routes/preferences/misc/+page.svelte @@ -0,0 +1,20 @@ + + + + Back +
+
+ + + + Enable fullscreen viewer button + + + diff --git a/src/stores/misc-preferences.js b/src/stores/misc-preferences.js new file mode 100644 index 0000000..c2dcb04 --- /dev/null +++ b/src/stores/misc-preferences.js @@ -0,0 +1,14 @@ +import {writable} from "svelte/store"; +import MiscSettings from "$lib/extension/settings/MiscSettings.js"; + +export const fullScreenViewerEnabled = writable(true); + +const miscSettings = new MiscSettings(); + +Promise.allSettled([ + miscSettings.resolveFullscreenViewerEnabled().then(v => fullScreenViewerEnabled.set(v)) +]).then(() => { + fullScreenViewerEnabled.subscribe(value => { + void miscSettings.setFullscreenViewerEnabled(value); + }) +}); 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; } }