Tags:
- {#each profile.settings.tags as tagName}
+ {#each sortedTagsList as tagName}
{tagName}
{/each}
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 @@
+
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 @@
+
+
+
+
+
+
+ Enable fullscreen viewer button
+
+
+
diff --git a/src/routes/settings/maintenance/+page.svelte b/src/routes/settings/maintenance/+page.svelte
index 838ef86..c6d599e 100644
--- a/src/routes/settings/maintenance/+page.svelte
+++ b/src/routes/settings/maintenance/+page.svelte
@@ -7,7 +7,7 @@
/** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
let profiles = [];
- $: profiles = $maintenanceProfilesStore.sort((a, b) => b.settings.name.localeCompare(a.settings.name));
+ $: profiles = $maintenanceProfilesStore.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
function resetActiveProfile() {
$activeProfileStore = null;
diff --git a/src/routes/settings/maintenance/[id]/edit/+page.svelte b/src/routes/settings/maintenance/[id]/edit/+page.svelte
index 2214cb3..296f4ce 100644
--- a/src/routes/settings/maintenance/[id]/edit/+page.svelte
+++ b/src/routes/settings/maintenance/[id]/edit/+page.svelte
@@ -28,7 +28,7 @@
if (maybeExistingProfile) {
targetProfile = maybeExistingProfile;
profileName = targetProfile.settings.name;
- tagsList = [...targetProfile.settings.tags];
+ tagsList = [...targetProfile.settings.tags].sort((a, b) => a.localeCompare(b));
} else {
goto('/settings/maintenance');
}
diff --git a/src/stores/maintenance-profiles-store.js b/src/stores/maintenance-profiles-store.js
index ffc0db1..792d212 100644
--- a/src/stores/maintenance-profiles-store.js
+++ b/src/stores/maintenance-profiles-store.js
@@ -9,14 +9,6 @@ import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js"
*/
export const maintenanceProfilesStore = writable([]);
-MaintenanceProfile.readAll().then(profiles => {
- maintenanceProfilesStore.set(profiles);
-});
-
-MaintenanceProfile.subscribe(profiles => {
- maintenanceProfilesStore.set(profiles);
-});
-
/**
* Store for the active maintenance profile ID.
*
@@ -26,29 +18,40 @@ export const activeProfileStore = writable(null);
const maintenanceSettings = new MaintenanceSettings();
-maintenanceSettings.resolveActiveProfileId().then(activeProfileId => {
- activeProfileStore.set(activeProfileId);
-});
-
-maintenanceSettings.subscribe(settings => {
- activeProfileStore.set(settings.activeProfile || null);
-});
-
/**
* Active profile ID stored locally. Used to reset active profile once the existing profile was removed.
* @type {string|null}
*/
let lastActiveProfileId = null;
-activeProfileStore.subscribe(profileId => {
- lastActiveProfileId = profileId;
+Promise.allSettled([
+ // Read the initial values from the storages first
+ MaintenanceProfile.readAll().then(profiles => {
+ maintenanceProfilesStore.set(profiles);
+ }),
+ maintenanceSettings.resolveActiveProfileId().then(activeProfileId => {
+ activeProfileStore.set(activeProfileId);
+ })
+]).then(() => {
+ // And only after initial values are loaded, start watching for changes from storage and from user's interaction
+ MaintenanceProfile.subscribe(profiles => {
+ maintenanceProfilesStore.set(profiles);
+ });
- void maintenanceSettings.setActiveProfileId(profileId);
-});
+ maintenanceSettings.subscribe(settings => {
+ activeProfileStore.set(settings.activeProfile || null);
+ });
-// Watch the existence of the active profile on every change.
-MaintenanceProfile.subscribe(profiles => {
- if (!profiles.find(profile => profile.id === lastActiveProfileId)) {
- activeProfileStore.set(null);
- }
+ activeProfileStore.subscribe(profileId => {
+ lastActiveProfileId = profileId;
+
+ void maintenanceSettings.setActiveProfileId(profileId);
+ });
+
+ // Watch the existence of the active profile on every change.
+ MaintenanceProfile.subscribe(profiles => {
+ if (!profiles.find(profile => profile.id === lastActiveProfileId)) {
+ activeProfileStore.set(null);
+ }
+ });
});
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;
}
}