chenzhou/src/store/settings.js

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 };
});