import { defineStore } from "pinia"; import { ref, watch } from "vue"; export const useSettings = defineStore("settings", () => { const settings = ref({ resolution: { width: 1920, height: 1080, }, carousel: false, carouselTime: 10000, // s fullscreen: false, eqStatus: true, }); function changeScale(width, height) { const xScale = width / 1920; const yScale = height / 1080; const style = { transform: `scale(${xScale}, ${yScale})`, transformOrigin: "top left", }; document.documentElement.style.transform = style.transform; document.documentElement.style.transformOrigin = style.transformOrigin; } function resetScale() { document.documentElement.style.transform = "initial"; document.documentElement.style.transformOrigin = "initial"; } watch( () => settings.value.fullscreen, (val) => { if (val) { document.documentElement.requestFullscreen().then(() => { document.documentElement.style.width = "100vw"; document.documentElement.style.height = "100vh"; changeScale( document.documentElement.clientWidth, document.documentElement.clientHeight ); }); return; } document.exitFullscreen().then(resetScale); } ); 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 }; });