bug fix

src/components/Interaction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="interaction animation--hack-browser-bug--stack-too-high" v-show="showHotspotPoint && isShowDialog && current.info.leftInfo[0]">
+  <div class="interaction animation--hack-browser-bug--stack-too-high" v-show="showHotspotPoint && isSpeaking && current.info.leftInfo.length">
     <SerialFrames
       class="people"
       :frame-total-num="72"

src/components/SerialFrames.vue

@@ -20,7 +20,15 @@
       @load="onFrameLoad(index - 1)"
       @error="onFrameError(index - 1)"
     >
-    <audio v-if="audioUrl" ref="audio" loop :src="audioUrl" controls @timeupdate="onAudioCurTimeChange" />
+    <audio
+      id="serial-frames-audio"
+      v-if="audioUrl"
+      ref="audio"
+      loop
+      :src="audioUrl"
+      controls
+      @timeupdate="onAudioCurTimeChange"
+    />
   </div>
 </template>
 <script>
@@ -98,7 +106,7 @@ export default {
       }
     },
     audioVolume() {
-      if (this.store.canPlayLongImageBgAudio) {
+      if (this.store.showHotspotPoint) {
         if (this.firstIn) {
           this.firstIn = false
           this.$refs.audio && (this.$refs.audio.currentTime = 0)
@@ -129,12 +137,12 @@ export default {
           return
         }
         if (vNew > 0) {
-          if (audioNode.paused && vOld <= 0 && !this.$isSafari) { // safari里只能在用户操作回调函数中成功调用play。
+          if (audioNode.paused && vOld <= 0 && this.store.showHotspotPoint) {
             audioNode.currentTime = 0
             audioNode.play()
           }
         } else {
-          if (!audioNode.paused && vOld > 0 && !this.$isSafari) {
+          if (!audioNode.paused && vOld > 0) {
             audioNode.pause()
           }
         }

src/components/directory.vue

@@ -170,14 +170,12 @@ const onTouchCancel = () => {
 
 
 const onWheel = (e) => {
-  if (store.canMoveCamera) {
-    translateLength.value += e.deltaY
-    if (translateLength.value < 0) {
-      translateLength.value = 0
-    } else if (translateLength.value > maxTranslateLength.value) {
-      translateLength.value = maxTranslateLength.value
-      moveSpeed.value = 0
-    }
+  translateLength.value += e.deltaY
+  if (translateLength.value < 0) {
+    translateLength.value = 0
+  } else if (translateLength.value > maxTranslateLength.value) {
+    translateLength.value = maxTranslateLength.value
+    moveSpeed.value = 0
   }
 }
 
@@ -206,14 +204,12 @@ const animationFrameTask = () => {
   }
 
   // 根据速度更新距离
-  if (store.canMoveCamera) {
-    translateLength.value += moveSpeed.value * timeElapsed
-    if (translateLength.value < 0) {
-      translateLength.value = 0
-    } else if (translateLength.value > maxTranslateLength.value) {
-      translateLength.value = maxTranslateLength.value
-      moveSpeed.value = 0
-    }
+  translateLength.value += moveSpeed.value * timeElapsed
+  if (translateLength.value < 0) {
+    translateLength.value = 0
+  } else if (translateLength.value > maxTranslateLength.value) {
+    translateLength.value = maxTranslateLength.value
+    moveSpeed.value = 0
   }
 
   lastAnimationTimeStamp.value = timeStamp

src/components/times/timecommon.vue

@@ -25,7 +25,7 @@
         </ul>
 
         <div class="hotspots">
-          <swiper :slides-per-view="5" :space-between="10" @swiper="onSwiper" @slideChange="onSlideChange">
+          <swiper :slides-per-view="5" :space-between="10" @swiper="onSwiper">
             <swiper-slide @click="onClickItem(item)" v-for="item in info.hotspots" :key="item"  v-show="showHotspotPoint">
               <div class="himg">
                 <img :src="getImgUrl(`hotspot/${item.img}`)" alt="">
@@ -88,9 +88,6 @@ const getImg = (index) => {
 const onSwiper = (swiper) => {
   mySwiper.value = swiper
 };
-const onSlideChange = () => {
-  console.log('slide change');
-};
 
 const showHotspotPoint = computed(() => {
   return store.getShowHotspotPoint

src/main.js

@@ -88,18 +88,8 @@ function onResize() {
 
   if (app.config.globalProperties.$isRotate) {
     app.config.globalProperties.$oneRemToPx = window.innerWidth * idealRootFontSize / idealWindowInnerHeight
-    app.config.globalProperties.$windowSizeX = window.innerHeight
-    app.config.globalProperties.$windowSizeY = window.innerWidth
-    if (app.config.globalProperties.$isMobile && app.config.globalProperties.$isSafari) {
-      appNode.classList.remove('homepage-need-handle')
-    }
   } else {
     app.config.globalProperties.$oneRemToPx = window.innerHeight * idealRootFontSize / idealWindowInnerHeight
-    app.config.globalProperties.$windowSizeX = window.innerWidth
-    app.config.globalProperties.$windowSizeY = window.innerHeight
-    if (app.config.globalProperties.$isMobile && app.config.globalProperties.$isSafari) {
-      appNode.classList.add('homepage-need-handle')
-    }
   }
   document.documentElement.style.fontSize = app.config.globalProperties.$oneRemToPx + 'px'
 }
@@ -108,6 +98,4 @@ onResize()
 
 window.addEventListener('resize', () => {
   onResize()
-})
-
-
+})

src/store/index.js

@@ -2,11 +2,8 @@ import { defineStore } from 'pinia';
 
 const appStore = defineStore('app', {
   state: () => ({
-    canMoveCamera: true,
-    canPlayLongImageBgAudio: false,
-    longImageTranslateLengthRecord: null,
     currentHotspot:'',
-    showHotspotPoint: false, // 因为傻逼safari微信里闪烁的热点层级贼高
+    showHotspotPoint: false, // 因为傻逼safari微信里闪烁的热点层级贼高。显示指引时、显示热点列表时、显示过渡视频时、显示热点详情时，为false。
   }),
   getters: {
     getShowHotspotPoint(state) {

src/views/LongImage.vue

@@ -159,7 +159,7 @@ const onCloseGuide = () => {
   if (firstIn) {
     firstIn = false
     interaction$.value.handleShow()
-    store.canPlayLongImageBgAudio = true
+    document.getElementById('serial-frames-audio').play()
   }
 }
 
@@ -241,14 +241,12 @@ const animationFrameTask = () => {
   }
 
   // 根据速度更新距离
-  if (store.canMoveCamera) {
-    translateLength.value += moveSpeed.value * timeElapsed
-    if (translateLength.value < 0) {
-      translateLength.value = 0
-    } else if (translateLength.value > maxTranslateLength.value) {
-      translateLength.value = maxTranslateLength.value
-      moveSpeed.value = 0
-    }
+  translateLength.value += moveSpeed.value * timeElapsed
+  if (translateLength.value < 0) {
+    translateLength.value = 0
+  } else if (translateLength.value > maxTranslateLength.value) {
+    translateLength.value = maxTranslateLength.value
+    moveSpeed.value = 0
   }
 
   lastAnimationTimeStamp.value = timeStamp
@@ -339,14 +337,12 @@ const onTouchCancel = () => {
 
 
 const onWheel = (e) => {
-  if (store.canMoveCamera) {
-    translateLength.value += e.deltaY
-    if (translateLength.value < 0) {
-      translateLength.value = 0
-    } else if (translateLength.value > maxTranslateLength.value) {
-      translateLength.value = maxTranslateLength.value
-      moveSpeed.value = 0
-    }
+  translateLength.value += e.deltaY
+  if (translateLength.value < 0) {
+    translateLength.value = 0
+  } else if (translateLength.value > maxTranslateLength.value) {
+    translateLength.value = maxTranslateLength.value
+    moveSpeed.value = 0
   }
 }
 
@@ -360,11 +356,6 @@ watch(translateLength, (vNew) => {
 
 onMounted(() => {
   animationFrameId.value = requestAnimationFrame(animationFrameTask)
-
-  if (store.longImageTranslateLengthRecord) {
-    translateLength.value = store.longImageTranslateLengthRecord
-    store.longImageTranslateLengthRecord = null
-  }
   calcTranslateLimit()
   window.addEventListener('resize', calcTranslateLimit)