chenzhou/src/store/settings.js

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