ZhongMianShowMacao/src/components/Controls/Control.Mobile.vue

<template>
  <FloorSwitch />
  <transition mode="out-in">
      <component class="limitwidth" :is="panelPage"></component>
  </transition>
</template>

<script setup>
import { useStore } from "vuex";
import { onMounted, watch, computed, ref, shallowRef, nextTick } from "vue";
import { useApp, getApp } from "@/app";
import FloorSwitch from "./FloorSwitch";

import vMain from "./Panel/Main";
import Guide from "./Panel/Guide";

import { Scrollbar, Dialog } from "@/global_components/";
const store = useStore();
import common from "@/utils/common";
import { useMusicPlayer } from "@/utils/sound";
const musicPlayer = useMusicPlayer();
const metadata = computed(() => store.getters["scene/metadata"]);
const flying = computed(() => store.getters["flying"]);
const controls = computed(() => {
  return metadata.value.controls;
});
const player = computed(() => store.getters["player"]);
const mode = computed(() => store.getters["mode"]);
let timer = null;

const panelPage = computed(() => {
  let status = store.getters["tour/isPlay"] ? Guide :  vMain;
  return status;
});



const modeTips = ref("");
const isCollapse = ref(false);
const progressNum = ref(0);
const isInit = ref(false);
const tours = computed(() => store.getters["tour/tours"]);

const isSelect = ref(false);
const labelTimer = ref(null);
const showTours = computed(() => store.getters["tour/showTours"]);
const partId = computed(() => {
  let id = store.getters["tour/partId"];
  return id;
});

const frameId = computed(() => {
  let id = store.getters["tour/frameId"];
  return id;
});
const isPlay = computed(() => {
  let status = store.getters["tour/isPlay"];
  let map = document.querySelector(".kankan-app div[xui_min_map]");
  if (map) {
    if (status) {
      map.classList.add("disabled");
    } else {
      map.classList.remove("disabled");
    }
  }
  return status;
});
const onModeSwitch = (mode) => {
  if (labelTimer.value) {
    modeTips.value = "";
    clearTimeout(labelTimer.value);
  }
  modeTips.value = mode;
  labelTimer.value = setTimeout(() => {
    modeTips.value = "";
  }, 2000);
  console.log(mode);
  // flyToNewMode(mode)
  store.commit("setMode", mode);
};

const onCollapse = () => {
  if (player.value.showToolbar == false) {
    isCollapse.value = false;
    let show = !player.value.showToolbar;
    store.commit("SetPlayerOptions", {
      showMore: false,
      showMap: show == false,
      showToolbar: show,
      showDescription: false,
    });
  } else {
    isCollapse.value = !isCollapse.value;
    store.commit("tour/setData", { showTours: false });
  }
};


const hanlderTourPartPlay = (time) => {
  if (!timer) {
    timer = KanKan.Animate.transitions.start((progress) => {
      progressNum.value = progress * 100;
    }, time);
  }
};
const cancelTimer = () => {
  if (timer) {
    KanKan.Animate.transitions.cancel(timer);
    timer = null;
  }
};

const hanlderTour = async () => {
  let player = await getApp().TourManager.player;
  player.on("play", (data) => {
    musicPlayer.pause(true);
    // if (tours.value.length > 1) {
    //     let time = getPartTime(data.partId)
    //     hanlderTourPartPlay(time)
    // }
  });
  player.on("pause", (tours) => {
    console.log("pause", player);
    musicPlayer.resume();

    progressNum.value = 0;
    cancelTimer();
    store.commit("tour/setData", { isPlay: false });
  });
  player.on("end", (tours) => {
    musicPlayer.resume();
    progressNum.value = 100;
    store.commit("tour/setData", { isPlay: false });
    cancelTimer();
  });
  let currPartId = null;
  let currProgress = 0;
  let currFrames = 0;
  player.on("progress", (data) => {
    if (tours.value.length == 1) {
      progressNum.value = data.progress * 100;
    } else {
      // let time = getPartTime(data.partId)

      // hanlderTourPartPlay(time)

      if (currPartId != data.partId) {
        currPartId = data.partId;
        currFrames = tours.value[data.partId].list.length;
        currProgress = 0;
      } else {
        currProgress += data.progress / currFrames;
        if (currProgress >= 100) {
          currProgress = 100;
        }

        progressNum.value = currProgress;
      }
    }

    store.commit("tour/setData", { partId: data.partId, frameId: data.frameId, isPlay: true });
  });

  // nextTick(() => {
  //     editorMain.value = document.querySelector('.ui-editor-main')
  // })
};
const getPartTime = (partId) => {
  cancelTimer();
  let time = 0;
  // for (let i = 0; i < tours.value[partId].list.length - 1; i++) {
  //     time += tours.value[partId].list[i].time - 0
  // }
  // if (tours.value[partId].list[tours.value[partId].list.length - 1]._end) {
  //     if (tours.value[partId].list.length > 2) {
  //         time += (tours.value[partId].list.length - 1) * 1000
  //     }
  // } else {
  //     time += (tours.value[partId].list.length - 1) * 1000
  // }
  for (let i = 0; i < tours.value[partId].list.length; i++) {
    if (!tours.value[partId].list[i]._end) {
      time += tours.value[partId].list[i].time - 0;
      if (!tours.value[partId].list[i]._notrans) {
        time += 1000;
      }
    }
  }

  return time;
};

const openTours = () => {
  // showTours.value = !showTours.value

  store.commit("tour/setData", { showTours: !showTours.value });
 
};
const changeFrame = async (type, id) => {
  if (flying.value || isSelect.value) {
    return;
  }
  progressNum.value = 0;
  // recorder.selectFrame(id)
  let player = await getApp().TourManager.player;
  // player.selectFrame(id)
  isSelect.value = true;
  if (type == 1) {
    player.selectPart(id);
    let f_id = 0;
    if (tours.value[id].frameId) {
      f_id = tours.value[id].frameId;
    }
    player.selectFrame(f_id).then(() => {
      isSelect.value = false;
    });
    store.commit("tour/setData", {
      frameId: f_id,
      partId: id,
    });
  } else {
    player.selectFrame(id).then(() => {
      isSelect.value = false;
    });
    store.commit("tour/setData", {
      frameId: id,
    });
  }

};
const onClickHandler = async () => {
  if (isPlay.value) {
    let player = await getApp().TourManager.player;
    player.pause();
    musicPlayer.resume();
  }
};
onMounted(() => {
  useApp().then(async (sdk) => {
    hanlderTour();
  });

  nextTick(() => {
    let player = document.querySelector('.player[name="main"]');
    player.addEventListener("touchstart", onClickHandler);
  });
});
</script>

<style lang="scss" scoped>
.disable {
  opacity: 1;
}

.limitwidth{
  max-width: 500px;
  margin: 0 auto;
}

.switch {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  width: 1rem;
  height: 100%;
  align-items: center;
  i {
    margin-left: 0.2rem;
    font-size: 0.28rem;
  }
}
.guide {
  display: flex;
  height: 100%;
  width: calc(100vw - 2rem);
  flex-shrink: 0;
  &.flex {
    width: auto;
  }
  > div {
    height: 100%;
    width: 100%;
    &.play {
      display: none;
    }
    &.play {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 0.8rem;
      margin: 0 0.3rem;
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -0.3rem;
        width: 1px;
        height: 35%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.6);
        box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.2);
      }
    }

    &.rooms {
      flex: 1;
      width: 100%;
      overflow: hidden;
      padding: 4px 0;
      margin-left: 0.3rem;
    }
  }
}

@media (orientation: landscape) {
  .toolbar {
    padding-left: 0.5rem;
    bottom: 0.5rem;
    height: 0.8rem;
    font-size: 0.25rem;
    i {
      font-size: 0.25rem;
    }
  }
  .guide {
    width: calc(100vw - 4rem);
  }
  .ctrls {
    > div {
      height: 0.6rem;
      &.play {
        padding: 0.3rem 0;
        b,
        span {
          height: 0.8rem;
        }
      }
      &.rooms {
        left: 1rem;
        right: 1rem;
        bottom: 1.6rem;
        height: 0.8rem;
        transform-origin: 1.2rem 100%;
        &::after {
          left: 1.12rem;
        }
      }
    }
  }
  .switch {
    i {
      font-size: 0.2rem;
    }
  }
}
</style>