|
@@ -1,36 +1,81 @@
|
|
|
<template>
|
|
|
- <ul class="control" v-show="fdkkCurrentVersion == 'v4'">
|
|
|
-
|
|
|
+ <ul class="control" v-show="fdkkCurrentVersion == 'v4'">
|
|
|
<!-- 自定义链接 -->
|
|
|
- <li @click="onLink" v-tooltip="customLink.name" v-if="customLink && customLink.isShow">
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
+ <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
|
|
|
+ @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">
|
|
|
+ <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="" />
|
|
|
+ :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
|
|
|
+ @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'">
|
|
@@ -42,12 +87,14 @@
|
|
|
</li>
|
|
|
|
|
|
<li @click="onFullScreen" v-tooltip="$t('menu.fullScreen')">
|
|
|
- <img :src="require(`@/assets/images/icon/${'fullscreen@2x.png'}`)" alt="" />
|
|
|
+ <img
|
|
|
+ :src="require(`@/assets/images/icon/${'fullscreen@2x.png'}`)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</li>
|
|
|
-
|
|
|
</ul>
|
|
|
|
|
|
- <teleport to='body'>
|
|
|
+ <teleport to="body">
|
|
|
<introduce v-if="showIntroduce" />
|
|
|
<telephone v-if="showTelephone" />
|
|
|
<clink v-if="showLink" />
|
|
@@ -55,32 +102,46 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, watch, computed, onMounted, watchEffect, nextTick } from "vue";
|
|
|
+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'
|
|
|
-
|
|
|
+import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";
|
|
|
|
|
|
//背景音乐
|
|
|
-const musicPlayer = useMusicPlayer()
|
|
|
+const musicPlayer = useMusicPlayer();
|
|
|
|
|
|
//解说音乐
|
|
|
-const soundPlayer = useSoundPlayer()
|
|
|
+const soundPlayer = useSoundPlayer();
|
|
|
|
|
|
const store = useStore();
|
|
|
|
|
|
const metadata = computed(() => store.getters["scene/metadata"]);
|
|
|
-const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
|
|
|
|
|
|
+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 showMusicPlaying = ref(false);
|
|
|
+const showCommentaryPlaying = ref(false);
|
|
|
|
|
|
// const isCommentary = computed(() => store.getters["functions/isCommentary"]);
|
|
|
|
|
@@ -95,99 +156,103 @@ const fdkkBGM = computed(() => store.getters["fdkk/fdkkBGM"]);
|
|
|
|
|
|
|
|
|
|
|
|
+const setExplanation = () => {
|
|
|
+ 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 resetExplanation = () => {
|
|
|
+ store.commit("functions/setCommentaryUrl", "");
|
|
|
+ useSoundPlayer.player.isLock = true;
|
|
|
+ soundPlayer.pause();
|
|
|
+};
|
|
|
+watch([isShowCover, isDoneforCover], (val) => {
|
|
|
+ if (val[0] && val[1]) {
|
|
|
+ setExplanation();
|
|
|
+ }
|
|
|
+});
|
|
|
watchEffect(() => {
|
|
|
if (currentScene.value.explanation) {
|
|
|
- let { audioUrl, openByDefault, repeat } = currentScene.value.explanation
|
|
|
- if (audioUrl) {
|
|
|
- //解说有变,初始化按钮状态
|
|
|
- showCommentaryPlaying.value = false
|
|
|
- store.commit("functions/setCommentaryUrl", {
|
|
|
- src: audioUrl,
|
|
|
- loop: repeat,
|
|
|
- openByDefault: openByDefault
|
|
|
- });
|
|
|
+ let { audioUrl } = currentScene.value.explanation;
|
|
|
|
|
|
-
|
|
|
- useSoundPlayer.player.isLock = false
|
|
|
- useSoundPlayer.player.watchPlay()
|
|
|
+ if (audioUrl && !unref(isShowCover)) {
|
|
|
+ //解说有变,初始化按钮状态
|
|
|
+ setExplanation();
|
|
|
} else {
|
|
|
- store.commit("functions/setCommentaryUrl", '');
|
|
|
- useSoundPlayer.player.isLock = true
|
|
|
- soundPlayer.pause()
|
|
|
+ resetExplanation();
|
|
|
}
|
|
|
} else {
|
|
|
- store.commit("functions/setCommentaryUrl", '');
|
|
|
- useSoundPlayer.player.isLock = true
|
|
|
- soundPlayer.pause()
|
|
|
+ resetExplanation();
|
|
|
}
|
|
|
-})
|
|
|
-
|
|
|
+});
|
|
|
|
|
|
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 isFullscreen = ref(false);
|
|
|
|
|
|
const onIntroduce = () => {
|
|
|
store.commit("functions/setShowIntroduce", true);
|
|
|
-}
|
|
|
-
|
|
|
+};
|
|
|
|
|
|
const onTelephone = () => {
|
|
|
store.commit("functions/setShowTelephone", true);
|
|
|
-}
|
|
|
-
|
|
|
+};
|
|
|
|
|
|
const onLink = () => {
|
|
|
store.commit("functions/setShowLink", true);
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const onIsBGM = () => {
|
|
|
- showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
|
|
|
-}
|
|
|
+ showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play();
|
|
|
+};
|
|
|
|
|
|
const onIsAutoRotate = (data) => {
|
|
|
store.commit("functions/setAutoRotate", !isAutoRotate.value);
|
|
|
};
|
|
|
|
|
|
-
|
|
|
const onIsCommentary = (data) => {
|
|
|
- showCommentaryPlaying.value ? soundPlayer.pause() : soundPlayer.play()
|
|
|
+ showCommentaryPlaying.value ? soundPlayer.pause() : soundPlayer.play();
|
|
|
};
|
|
|
|
|
|
-
|
|
|
-
|
|
|
const onFullScreen = () => {
|
|
|
- let element = document.documentElement
|
|
|
+ let element = document.documentElement;
|
|
|
if (isFullscreen.value) {
|
|
|
if (document.exitFullscreen) {
|
|
|
- document.exitFullscreen()
|
|
|
+ document.exitFullscreen();
|
|
|
} else if (document.webkitCancelFullScreen) {
|
|
|
- document.webkitCancelFullScreen()
|
|
|
+ document.webkitCancelFullScreen();
|
|
|
} else if (document.mozCancelFullScreen) {
|
|
|
- document.mozCancelFullScreen()
|
|
|
+ document.mozCancelFullScreen();
|
|
|
} else if (document.msExitFullscreen) {
|
|
|
- document.msExitFullscreen()
|
|
|
+ document.msExitFullscreen();
|
|
|
}
|
|
|
} else {
|
|
|
if (element.requestFullscreen) {
|
|
|
- element.requestFullscreen()
|
|
|
+ element.requestFullscreen();
|
|
|
} else if (element.webkitRequestFullScreen) {
|
|
|
- element.webkitRequestFullScreen()
|
|
|
+ element.webkitRequestFullScreen();
|
|
|
} else if (element.mozRequestFullScreen) {
|
|
|
- element.mozRequestFullScreen()
|
|
|
+ element.mozRequestFullScreen();
|
|
|
} else if (element.msRequestFullscreen) {
|
|
|
- element.msRequestFullscreen()
|
|
|
+ element.msRequestFullscreen();
|
|
|
}
|
|
|
}
|
|
|
// 改变当前全屏状态
|
|
|
//this.isFullscreen = !this.isFullscreen;
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const onVR = (data) => {
|
|
|
useApp().then((app) => {
|
|
|
- app.krpanoDom.call("webvr.enterVR()")
|
|
|
+ app.krpanoDom.call("webvr.enterVR()");
|
|
|
});
|
|
|
};
|
|
|
|
|
@@ -220,50 +285,55 @@ const staticList = ref([
|
|
|
},
|
|
|
]);
|
|
|
|
|
|
-
|
|
|
onMounted(() => {
|
|
|
- let events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
|
|
|
+ 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');
|
|
|
+ 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
|
|
|
+);
|
|
|
+
|
|
|
+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
|
|
|
+ musicPlayer.pauseFromOther = true;
|
|
|
}
|
|
|
-
|
|
|
-})
|
|
|
-soundPlayer.on('pause', () => {
|
|
|
+});
|
|
|
+soundPlayer.on("pause", () => {
|
|
|
console.log(11111);
|
|
|
- showCommentaryPlaying.value = false
|
|
|
-})
|
|
|
-
|
|
|
+ showCommentaryPlaying.value = false;
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -274,17 +344,16 @@ soundPlayer.on('pause', () => {
|
|
|
display: flex;
|
|
|
z-index: 9;
|
|
|
|
|
|
- >li {
|
|
|
+ > li {
|
|
|
width: 26px;
|
|
|
height: 26px;
|
|
|
margin: 0 10px;
|
|
|
cursor: pointer;
|
|
|
|
|
|
- >img {
|
|
|
+ > img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
</style>
|