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

<template>
  <ul class="control" v-show="fdkkCurrentVersion == 'v4'">
    <!-- 自定义链接 -->
    <li
      @click="onLink"
      v-tooltip="customLink.name"
      v-if="customLink && customLink.isShow"
    >
      <img :src="require(`@/assets/images/icon/link@2x.png`)" alt="" />
    </li>

    <!-- 联系电话 -->
    <li
      @click="onTelephone"
      v-tooltip="customTelephone.name"
      v-if="customTelephone && customTelephone.isShow"
    >
      <img :src="require(`@/assets/images/icon/telephone@2x.png`)" alt="" />
    </li>

    <!-- 简介 -->
    <li
      @click="onIntroduce"
      v-tooltip="$t('menu.introduce')"
      v-if="metadata.description"
    >
      <img :src="require(`@/assets/images/icon/text@2x.png`)" alt="" />
    </li>

    <!-- 背景音乐 -->
    <li
      @click="onIsBGM"
      v-tooltip="$t('menu.music')"
      v-if="
        (metadata.backgroundMusic && metadata.backgroundMusic.id) || fdkkBGM
      "
    >
      <img
        :src="
          require(`@/assets/images/icon/${
            showMusicPlaying ? 'music@2x.png' : 'music_disabled@2x.png'
          }`)
        "
        alt=""
      />
    </li>

    <!-- 解说音频 -->
    <li
      @click="onIsCommentary"
      v-tooltip="$t('menu.commentary')"
      v-if="currentScene.explanation && currentScene.explanation.audioUrl"
    >
      <img
        :src="
          require(`@/assets/images/icon/${
            showCommentaryPlaying
              ? 'commentary@2x.png'
              : 'commentary_disabled@2x.png'
          }`)
        "
        alt=""
      />
    </li>

    <li
      @click="onIsAutoRotate"
      v-tooltip="$t('menu.autoRotate')"
      v-if="currentScene.type != '4dkk'"
    >
      <img
        :src="
          require(`@/assets/images/icon/${
            isAutoRotate ? 'rotation@2x.png' : 'rotation_disabled@2x.png'
          }`)
        "
        alt=""
      />
    </li>

    <li @click="onVR" v-tooltip="'VR'" v-if="currentScene.type != '4dkk'">
      <img :src="require(`@/assets/images/icon/vr@2x.png`)" alt="" />
    </li>

    <li @click="onShare" v-tooltip="$t('menu.share')">
      <img :src="require(`@/assets/images/icon/share@2x.png`)" alt="" />
    </li>

    <li @click="onFullScreen" v-tooltip="$t('menu.fullScreen')">
      <img
        :src="require(`@/assets/images/icon/${'fullscreen@2x.png'}`)"
        alt=""
      />
    </li>
  </ul>

  <teleport to="body">
    <introduce v-if="showIntroduce" />
    <telephone v-if="showTelephone" />
    <clink v-if="showLink" />
  </teleport>
</template>

<script setup>
import {
  ref,
  watch,
  computed,
  onMounted,
  watchEffect,
  nextTick,
  unref,
} from "vue";
import { useStore } from "vuex";
import { useApp } from "@/app";

import introduce from "./control/text";
import telephone from "./control/telephone";
import clink from "./control/link";
import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";

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

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

const store = useStore();

const metadata = computed(() => store.getters["scene/metadata"]);

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

const fdkkCurrentVersion = computed(
  () => store.getters["scene/fdkkCurrentVersion"]
);

const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);

const showMusicPlaying = ref(false);
const showCommentaryPlaying = ref(false);

// const isCommentary = computed(() => store.getters["functions/isCommentary"]);

const currentScene = computed(() => store.getters["scene/currentScene"]);

const customTelephone = computed(() => store.getters["scene/customTelephone"]);

const customLink = computed(() => store.getters["scene/customLink"]);

const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
const fdkkBGM = computed(() => store.getters["fdkk/fdkkBGM"]);

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 = () => {
  useSoundPlayer.player.isLock = true;
  soundPlayer.paused();
};
const resumeExplanation = () => {
  useSoundPlayer.player.isLock = false;
  useSoundPlayer.player.watchPlay();
};
const resetExplanation = (from) => {
  console.log("清空解说", from);
  store.commit("functions/setCommentaryUrl", "");
  useSoundPlayer.player.isLock = true;
  soundPlayer.pause();
};
watch([isShowCover, isDoneforCover], (val) => {
  if (val[0] && val[1]) {
    resumeExplanation(2);
  }
});
watchEffect(() => {
  if (currentScene.value.explanation) {
    let { audioUrl } = currentScene.value.explanation;

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

const showIntroduce = computed(() => store.getters["functions/showIntroduce"]);
const showTelephone = computed(() => store.getters["functions/showTelephone"]);
const showLink = computed(() => store.getters["functions/showLink"]);

const isFullscreen = ref(false);

const onIntroduce = () => {
  store.commit("functions/setShowIntroduce", true);
};

const onTelephone = () => {
  store.commit("functions/setShowTelephone", true);
};

const onLink = () => {
  const { openMethod, value } = unref(customLink);
  if (openMethod == "_target") {
    window.open(value, "_blank");
  } else {
    store.commit("functions/setShowLink", true);
  }
};

const onIsBGM = () => {
  showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play();
};

const onIsAutoRotate = (data) => {
  store.commit("functions/setAutoRotate", !isAutoRotate.value);
};

const onIsCommentary = (data) => {
  showCommentaryPlaying.value ? soundPlayer.pause() : soundPlayer.play();
};

const onFullScreen = () => {
  let element = document.documentElement;
  if (isFullscreen.value) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
  // 改变当前全屏状态
  //this.isFullscreen = !this.isFullscreen;
};

const onVR = (data) => {
  useApp().then((app) => {
    app.krpanoDom.call("webvr.enterVR()");
  });
};

const onShare = () => {
  store.commit("functions/setShareUrl", true);
};

const staticList = ref([
  {
    id: "cruise",
    name: "巡游开关",
    icon: "rotation@2x.png",
    icondisabled: "rotation_disabled@2x.png",
  },
  {
    id: "vr",
    name: "VR",
    icon: "vr@2x.png",
  },
  {
    id: "share",
    name: "分享",
    icon: "share@2x.png",
  },
  {
    id: "full",
    name: "全屏",
    icon: "fullscreen@2x.png",
    icondisabled: "rotation_disabled@2x.png",
  },
]);

onMounted(() => {
  let events = [
    "fullscreenchange",
    "webkitfullscreenchange",
    "mozfullscreenchange",
    "MSFullscreenChange",
  ];
  events.forEach((item, index) => {
    window.addEventListener(item, () => {
      isFullscreen.value = !isFullscreen.value;
    });
  });
});

watch(
  () => [showCommentaryPlaying.value, showMusicPlaying.value],
  () => {
    if (!showCommentaryPlaying.value && !showMusicPlaying.value) {
      store.commit("functions/setCurrentPlaying", "");
    } else {
      if (showCommentaryPlaying.value) {
        store.commit("functions/setCurrentPlaying", "commentary");
      } else if (showMusicPlaying.value) {
        store.commit("functions/setCurrentPlaying", "bgm");
      }
    }
  }
);

musicPlayer.on("play", () => {
  soundPlayer.pause();
  showMusicPlaying.value = true;
});
musicPlayer.on("pause", () => {
  showMusicPlaying.value = false;
});

soundPlayer.on("play", () => {
  musicPlayer.pause();
  showCommentaryPlaying.value = true;
  //设置当前播放中音乐来源
  if (!musicPlayer.pauseFromOther) {
    musicPlayer.pauseFromOther = true;
  }
});
soundPlayer.on("pause", () => {
  console.log(11111);
  showCommentaryPlaying.value = false;
});
</script>

<style lang="scss" scoped>
.control {
  position: absolute;
  right: 20px;
  bottom: 8px;
  display: flex;
  z-index: 9;

  > li {
    width: 26px;
    height: 26px;
    margin: 0 10px;
    cursor: pointer;

    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>