qjkankan_shibadongcun/packages/qjkankan-view/src/components/UIGather/mobile/control.vue

<template>
  <div class="controlcon">
    <Pano v-if="currentScene.type == 'pano'" />
    <Fdkk v-else />
  </div>
</template>

<script setup>
import Pano from "./control.pano";
import Fdkk from "./control.fdkk";
import {
  ref,
  watch,
  computed,
  onMounted,
  watchEffect,
  nextTick,
  unref,
} from "vue";
import { useStore } from "vuex";
import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";

//背景音乐
const musicPlayer = useMusicPlayer();

//解说音乐
const soundPlayer = useSoundPlayer();

const store = useStore();
const currentScene = computed(() => store.getters["scene/currentScene"]);
const metadata = computed(() => store.getters["scene/metadata"]);
const isDoneforCover = computed(() => store.getters["scene/isDoneforCover"]);
const isShowCover = computed(
  () => metadata.value.coverInfo?.isShowCover || false
);

const setExplanation = (from) => {
  if (
    "explanation" in currentScene.value &&
    "audioUrl" in currentScene.value.explanation
  ) {
    console.log("设置解说", from);
    let { audioUrl, openByDefault, repeat } = currentScene.value.explanation;
    // showCommentaryPlaying.value = false;
    store.commit("functions/setCommentaryUrl", {
      src: audioUrl,
      loop: repeat,
      openByDefault: openByDefault,
    });
    useSoundPlayer.player.isLock = false;
    useSoundPlayer.player.watchPlay();
  }
};
const stopExplanation = (from) => {
  console.log("stop解说", from);
  useSoundPlayer.player.isLock = true;
  soundPlayer.paused();
  setTimeout(() => soundPlayer.paused(), 100);
};
const resumeExplanation = () => {
  console.log("resume解说");
  useSoundPlayer.player.isLock = false;
  useSoundPlayer.player.watchPlay();
};
const resetExplanation = (from) => {
  console.log("清空解说", from);
  store.commit("functions/setCommentaryUrl", "");
  useSoundPlayer.player.isLock = true;
  soundPlayer.paused();
};
watch([isShowCover, isDoneforCover], (val) => {
  if (val[0] && val[1]) {
    resumeExplanation(2);
  }
  if (val[0] && !val[1]) {
    stopExplanation(2);
  }
});

watchEffect(() => {
  if (currentScene.value.explanation) {
    let { audioUrl } = currentScene.value.explanation;

    if (audioUrl) {
      //解说有变，初始化按钮状态
      setExplanation(1);
      if (unref(isShowCover)) {
        stopExplanation(1);
      }
    } else {
      resetExplanation(1);
    }
  } else {
    resetExplanation(2);
  }
});
</script>

<style lang="scss" scoped>
.controlcon {
  height: 36px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 18px;
  backdrop-filter: blur(1px);
  max-width: calc(90vw - 100px);
  overflow-x: auto;
  overflow-y: hidden;
}
</style>