|
|
@@ -6,10 +6,15 @@
|
|
|
<span class="icon" @click="showScenes = !showScenes" v-if="sceneList.length > 1">
|
|
|
<Icon type="scene" />
|
|
|
</span>
|
|
|
+ <span class="icon" v-if="hasMusic" @click="handleMusic">
|
|
|
+ <Icon type="music_on" v-if="!isPlayMusic" />
|
|
|
+ <Icon type="music_off" v-else />
|
|
|
+ </span>
|
|
|
<span class="ctrl" :class="{ show }" @click="show = !show">
|
|
|
<Icon type="arrows" />
|
|
|
</span>
|
|
|
</div>
|
|
|
+ <audio id="music" loop :src="musicURL" v-if="musicURL?.length"> </audio>
|
|
|
<SceneList v-if="showScenes" @close="showScenes = false" @change-scene="changeScene" />
|
|
|
</template>
|
|
|
|
|
|
@@ -18,21 +23,33 @@
|
|
|
//import { useMusicPlayer } from "@/utils/sound";
|
|
|
// import { changeScene } from "@/store/room";
|
|
|
import Icon from '/@/components/basic/icon/index.vue';
|
|
|
- import { computed, onMounted, ref, unref } from 'vue';
|
|
|
+ import { computed, onMounted, ref, unref, watchEffect } from 'vue';
|
|
|
import { useRoom } from '/@/hooks/useRoom';
|
|
|
import { useTourPlayer } from '/@/hooks/userTourPlayer';
|
|
|
+ import { useSceneStore } from '/@/store/modules/scene';
|
|
|
|
|
|
const { initialRoom, changeScene, sceneList } = useRoom();
|
|
|
+ const sceneStore = useSceneStore();
|
|
|
+ const hasMusic = computed(
|
|
|
+ () => sceneStore.metadata.music?.length || sceneStore.metadata.musicFile?.length,
|
|
|
+ );
|
|
|
+ const musicURL = computed(() => sceneStore.musicURL);
|
|
|
|
|
|
const show = ref(false);
|
|
|
+ const isPlayMusic = ref(false);
|
|
|
|
|
|
+ watchEffect(() => {
|
|
|
+ console.log('hasMusic', hasMusic, musicURL);
|
|
|
+ });
|
|
|
onMounted(() => {
|
|
|
initialRoom();
|
|
|
});
|
|
|
|
|
|
const showScenes = ref(false);
|
|
|
const { hasTours } = useTourPlayer();
|
|
|
- const panelShow = computed(() => unref(hasTours) || unref(sceneList).length > 1);
|
|
|
+ const panelShow = computed(
|
|
|
+ () => unref(hasTours) || unref(sceneList).length > 1 || unref(hasMusic),
|
|
|
+ );
|
|
|
|
|
|
function handlePlayTours() {
|
|
|
const { player, playing } = useTourPlayer();
|
|
|
@@ -42,6 +59,18 @@
|
|
|
player.pause();
|
|
|
}
|
|
|
}
|
|
|
+ function handleMusic() {
|
|
|
+ const useMusicPlayer: HTMLAudioElement | null = document.getElementById(
|
|
|
+ 'music',
|
|
|
+ ) as HTMLAudioElement;
|
|
|
+ if (!unref(isPlayMusic)) {
|
|
|
+ useMusicPlayer && useMusicPlayer.play();
|
|
|
+ isPlayMusic.value = true;
|
|
|
+ } else {
|
|
|
+ useMusicPlayer && useMusicPlayer.pause();
|
|
|
+ isPlayMusic.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
gemercheung
