import { defineStore } from "pinia"; import { ref, watch } from "vue"; export const useSettings = defineStore("settings", () => { const initialSettings = localStorage.getItem("settings"); const settings = ref( initialSettings ? JSON.parse(initialSettings) : { resolution: { width: 1920, height: 1080, }, carousel: false, carouselTime: 10, // s fullscreen: false, eqStatus: true, } ); const clearFullscreenFlag = (e) => { if (!document.fullscreenElement) { settings.value.fullscreen = false; } }; watch( () => settings.value.fullscreen, (val) => { const mainContainer = document.getElementById("main-container"); if (val) { mainContainer.requestFullscreen().then(() => { document.removeEventListener("fullscreenchange", clearFullscreenFlag); document.addEventListener("fullscreenchange", clearFullscreenFlag); }); return; } if (document.fullscreenElement) document.exitFullscreen(); } ); watch( () => settings.value, (val) => { localStorage.setItem("settings", JSON.stringify(val)); }, { immediate: true, deep: true, } ); function rewriteSettings(payload) { settings.value = payload; } function updateSettings({ type, value }) { switch (type) { case "carousel": settings.value.carousel = !settings.value.carousel; break; case "fullscreen": settings.value.fullscreen = !settings.value.fullscreen; break; case "eq": settings.value.eqStatus = !settings.value.eqStatus; break; case "resolution": settings.value.resolution.height = value.height; settings.value.resolution.width = value.width; break; } } return { settings, updateSettings, rewriteSettings, changeScale }; }); function changeScale(elm, width, height) { const xScale = width / 1920; const yScale = height / 1080; const style = { transform: `scale(${xScale}, ${yScale}) !important`, transformOrigin: "top left", }; elm.style.transform = style.transform; elm.style.transformOrigin = style.transformOrigin; } function resetScale(elm) { elm.style.transform = "initial"; elm.style.transformOrigin = "initial"; }