@qispace/vue3-player 0.0.5

package/src/components/virtualTourV2/ManualSlideShow.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="virtual-tour-v2-wrapper">
+    <div class="player-and-components-wrapper">
+      <div>
+        <manual-slide-show-player :isFullScreen="fullScreen.isActive">
+          <template v-slot:slideshow-image>
+            <single-image :image="currentImage" />
+          </template>
+          <template v-slot:top-left></template>
+          <template v-slot:top-center>
+            <disclaimer :return-url="websiteUrl" />
+          </template>
+          <template v-slot:top-right></template>
+          <template v-slot:center-left>
+            <transition name="slide-x-transition">
+              <v-btn elevation="1" rounded plain icon @click="previousImage">
+                <v-icon color="black darken-1">mdi-chevron-left</v-icon>
+              </v-btn>
+            </transition>
+          </template>
+          <template v-slot:center-center></template>
+          <template v-slot:center-right>
+            <transition name="slide-x-reverse-transition">
+              <v-btn elevation="1" rounded plain icon @click="nextImage">
+                <v-icon color="black darken-1">mdi-chevron-right</v-icon>
+              </v-btn>
+            </transition>
+          </template>
+          <template v-slot:bottom-left>
+            <full-screen-button
+              v-if="showFullScreen"
+              :isFullScreen="fullScreen.isActive"
+              class="btn-fullscreen"
+              @toggle-fullscreen="toggleFullscreen"
+            />
+            <div v-if="showShare" class="btn-placeholder">
+              <social-share />
+            </div>
+          </template>
+          <template v-slot:bottom-center>
+            <div>
+              <waypoint-carousel
+                v-if="fullScreen.isActive"
+                :class="[fullScreen.isActive ? 'full-screen' : '']"
+                :thumbnails="imagesWithThumbnails"
+                :active="currentIndex"
+                @next="nextImage"
+                @previous="previousImage"
+                @goto="goToImage"
+              />
+            </div>
+          </template>
+          <template v-slot:bottom-right></template>
+        </manual-slide-show-player>
+        <waypoint-carousel
+          :thumbnails="imagesWithThumbnails"
+          :active="currentIndex"
+          @next="nextImage"
+          @previous="previousImage"
+          @goto="goToImage"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import WaypointCarousel from './WaypointCarousel.vue'
+import SocialShare from './SocialShare.vue'
+import { I18N } from '@/lib/shared/I18N'
+import { FullscreenModel } from '@/lib/virtualTour/FullscreenModel'
+import FullScreenButton from './FullScreenButton.vue'
+import Disclaimer from './Disclaimer.vue'
+import ManualSlideShowPlayer from './ManualSlideShowPlayer.vue'
+import SingleImage from './SingleImage.vue'
+
+export default {
+  name: 'ManualSlideShow',
+  components: {
+    WaypointCarousel,
+    SingleImage,
+    SocialShare,
+    FullScreenButton,
+    Disclaimer,
+    ManualSlideShowPlayer,
+  },
+  provide() {
+    const localizer = this.i18n
+      ? new I18N(this.i18n.labels, this.i18n.language)
+      : new I18N()
+    return {
+      i18n: localizer,
+    }
+  },
+  props: {
+    images: { type: Array, required: true },
+    websiteUrl: { type: String, default: () => undefined },
+    i18n: { type: Object, default: undefined },
+    showFullScreen: { type: Boolean, default: () => true },
+    showShare: { type: Boolean, default: () => true },
+    defaultWaypointIndex: { type: Number, default: () => 0 },
+  },
+  data() {
+    return {
+      loading: true,
+      error: false,
+      currentIndex: 0,
+      currentImageId: undefined,
+      fullScreen: new FullscreenModel(document, 'player-wrapper'),
+    }
+  },
+  computed: {
+    imagesWithThumbnails() {
+      return this.images.map((item) => {
+        return { ...item, thumbnailUrl: item.url }
+      })
+    },
+    currentImage() {
+      return this.images[this.currentIndex].url
+    },
+  },
+  mounted() {
+    this.fullScreen.setup()
+  },
+  methods: {
+    toggleFullscreen() {
+      this.fullScreen.toggle()
+      window.scrollTo({ top: 150, behavior: 'smooth' })
+    },
+    nextImage() {
+      let newIndex = this.currentIndex + 1
+      if (newIndex >= this.images.length) newIndex = 0
+      this.currentIndex = newIndex
+    },
+    previousImage() {
+      let newIndex = this.currentIndex - 1
+      if (newIndex < 0) newIndex = this.images.length - 1
+      this.currentIndex = newIndex
+    },
+    goToImage(imageId, updatePlayerImage = true) {
+      let newIndex = this.images.findIndex((item) => item.id === imageId)
+
+      if (newIndex != -1) {
+        this.currentIndex = newIndex
+      }
+    },
+  },
+}
+</script>
+<style scoped>
+.compass-wrapper {
+  width: 50px;
+}
+
+.player-and-components-wrapper {
+  position: relative;
+}
+
+.static-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+}
+
+button.v-btn {
+  background: #fff;
+}
+
+.waypoint-carousel.full-screen {
+  scale: 0.5;
+}
+
+div#controls-bottom-center > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.player-error {
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background: #ededed;
+}
+
+@media only screen and (max-width: 600px) {
+  #btn-fullscreen {
+    display: none;
+  }
+}
+@media all and (orientation: landscape) and (max-height: 499px) {
+  #btn-fullscreen {
+    display: none;
+  }
+}
+</style>

package/src/components/virtualTourV2/ManualSlideShowPlayer.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="player-wrapper">
+    <div id="player-sizer">
+      <slot name="slideshow-image"></slot>
+      <div class="player-control" id="controls-top-left">
+        <slot name="top-left"></slot>
+      </div>
+      <div class="player-control" id="controls-top-center">
+        <slot name="top-center"></slot>
+      </div>
+      <div class="player-control" id="controls-top-right">
+        <slot name="top-right"></slot>
+      </div>
+      <div class="player-control" id="controls-center-left">
+        <slot name="center-left"></slot>
+      </div>
+      <div class="player-control" id="controls-center-center">
+        <slot name="center-center"></slot>
+      </div>
+      <div class="player-control" id="controls-center-right">
+        <slot name="center-right"></slot>
+      </div>
+      <div class="player-control" id="controls-bottom-left">
+        <slot name="bottom-left"></slot>
+      </div>
+      <div class="player-control" id="controls-bottom-center">
+        <slot name="bottom-center"></slot>
+      </div>
+      <div class="player-control" id="controls-bottom-right">
+        <slot name="bottom-right"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ManualSlideShowImage',
+  props: {
+    isFullScreen: { type: Boolean, required: true },
+  },
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+    window.addEventListener('resize', this.setPlayerSize)
+    this.setPlayerSize()
+  },
+  methods: {
+    findClosestAncestor(element, className) {
+      let el = element
+      let returnElement = element
+      while ((el = el.parentNode) && el.className.indexOf(className) < 0);
+      returnElement = el
+
+      return returnElement
+    },
+    setPlayerSize() {
+      let AR = 16 / 9
+      let element = document.querySelector('#player-sizer')
+      if (!element) return
+
+      let width = element.offsetWidth
+      let height = width * (1 / AR)
+
+      if (window.innerWidth <= 600 || width <= 600) {
+        height = window.innerHeight * 0.75
+        width = height * (1 / AR)
+      }
+
+      element.style.height = height + 'px'
+      element.style.width = width + 'px'
+      this.$emit('new-size-callback', width, height)
+    },
+  },
+}
+</script>
+<style scoped>
+#player-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+#player-sizer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.player-control {
+  display: flex;
+  position: absolute;
+  z-index: 3;
+}
+
+#controls-top-left {
+  top: 10px;
+  left: 10px;
+}
+#controls-top-center {
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 4;
+}
+
+#controls-top-right {
+  top: 10px;
+  right: 10px;
+  justify-content: flex-end;
+  align-content: flex-end;
+}
+
+#controls-center-left {
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+#controls-center-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  align-items: center;
+  justify-content: space-around;
+  z-index: 20;
+}
+#controls-center-right {
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  justify-content: flex-end;
+  align-items: center;
+}
+
+#controls-bottom-left {
+  bottom: 10px;
+  left: 10px;
+  z-index: 5;
+}
+
+#controls-bottom-center {
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: flex-end;
+  justify-content: space-around;
+  z-index: 4;
+}
+
+#controls-bottom-right {
+  bottom: 10px;
+  right: 10px;
+  justify-content: flex-end;
+  align-content: flex-end;
+  align-items: flex-end;
+  z-index: 5;
+}
+</style>

package/src/components/virtualTourV2/PlayerV2.vue

@@ -0,0 +1,300 @@
+<template>
+  <div id="player-wrapper">
+    <div id="player-sizer">
+      <slot name="slideshow-image"></slot>
+      <div class="player-control" id="controls-top-left">
+        <slot name="top-left"></slot>
+      </div>
+      <div class="player-control" id="controls-top-center">
+        <slot name="top-center"></slot>
+      </div>
+      <div class="player-control" id="controls-top-right">
+        <slot name="top-right"></slot>
+      </div>
+      <div class="player-control" id="controls-center-left">
+        <slot name="center-left"></slot>
+      </div>
+      <div class="player-control" id="controls-center-center">
+        <slot name="center-center"></slot>
+      </div>
+      <div class="player-control" id="controls-center-right">
+        <slot name="center-right"></slot>
+      </div>
+      <div class="player-control" id="controls-bottom-left">
+        <slot name="bottom-left"></slot>
+      </div>
+      <div class="player-control" id="controls-bottom-center">
+        <slot name="bottom-center"></slot>
+      </div>
+      <div class="player-control" id="controls-bottom-right">
+        <slot name="bottom-right"></slot>
+      </div>
+      <div id="main-canvas">
+        <canvas
+          id="qpc"
+          :style="showStaticImage ? 'visibility:hidden' : 'visibility:visible'"
+        ></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { PlayerV2 } from "@qispace/player-core";
+import { isBrowser } from "browser-or-node";
+
+export default {
+  name: "PlayerV2",
+  emits: [
+    "new-camera-callback",
+    "new-rotation-callback",
+    "new-floor-callback",
+    "new-fov-callback",
+    "playerApi-callback",
+    "new-size-callback",
+  ],
+  props: {
+    fileLoader: {
+      type: Object,
+      default: undefined,
+    },
+    rootUrl: { type: String, required: true },
+    currentCameraId: { type: String, default: () => undefined },
+    showStaticImage: { type: Boolean, required: true },
+    isFullScreen: { type: Boolean, required: true },
+    mouseSensitivity: { type: Number, default: () => 1 },
+    isInIframe: { type: Boolean, default: () => false },
+  },
+  data() {
+    return {
+      playerAPI: undefined,
+      playerCamera: undefined,
+      playerRotation: 0,
+      playerFoV: 0,
+      playerWidth: 0,
+      playerHeight: 0,
+    };
+  },
+  watch: {
+    async rootUrl(newValue) {
+      if (this.playerAPI) {
+        await this.playerAPI.loadInterior(newValue, this.playerCamera, false);
+        this.setPlayerSize();
+      }
+    },
+    fileLoader: {
+      async handler(newValue) {
+        if (this.playerAPI) {
+          await this.playerAPI.loadInterior(this.rootUrl, undefined, false);
+          this.setPlayerSize();
+        }
+      },
+      deep: true,
+    },
+    currentCameraId(newCameraId) {
+      if (this.playerAPI) {
+        this.playerCamera = newCameraId;
+        this.playerAPI.goToCamera(newCameraId, true);
+      }
+    },
+    playerAPI(playerAPI) {
+      this.$emit("playerApi-callback", playerAPI);
+      const firstCamera = playerAPI.getCurrentCamera();
+      if (firstCamera) {
+        this.playerCamera = firstCamera.id;
+      }
+    },
+  },
+  async mounted() {
+    window.addEventListener("resize", this.setPlayerSize);
+    this.setPlayerSize();
+
+    const newRotation = (newRotation) => {
+      const rot = newRotation + 0;
+
+      this.$emit("new-rotation-callback", rot);
+      this.playerRotation = rot;
+    };
+
+    const newFOV = (newFov) => {
+      this.$emit("new-fov-callback", newFov);
+      this.playerFoV = newFov;
+    };
+
+    const newCamera = (newCamera) => {
+      this.$emit("new-camera-callback", newCamera.id);
+      this.$emit("new-floor-callback", newCamera.floorLevel);
+
+      if (this.playerAPI) {
+        this.playerAPI.resetMarkerBehaviour(0);
+      }
+
+      this.playerCamera = newCamera.id;
+    };
+
+    const callbacks = {
+      initialized: () => {
+        this.playerAPI = PlayerV2.Main.getPlayerAPI();
+        const firstCamera = this.playerAPI.getCurrentCamera();
+        if (firstCamera) this.playerCamera = firstCamera.id;
+        this.$emit("new-camera-callback", this.playerCamera);
+      },
+      newCamera,
+      newFOV,
+      newRotation,
+    };
+
+    // constructor(public rootUrl: string, public target:string = 'qiplayerCanvas', events:EventManager, apartmentJson: string = undefined, startCameraId:string=undefined, fileLoader: LocalFileLoader | undefined) {
+    if (!isBrowser) return;
+
+    const mainScene = await new PlayerV2.Main(
+      this.rootUrl,
+      "qpc",
+      callbacks,
+      undefined,
+      this.currentCameraId,
+      this.fileLoader
+    );
+
+    if (mainScene) {
+      mainScene.handleWindowResize();
+      window.addEventListener(
+        "resize",
+        mainScene.handleWindowResize.bind(mainScene)
+      );
+      mainScene.animate();
+
+      this.playerAPI = PlayerV2.Main.getPlayerAPI();
+
+      if (this.playerAPI)
+        this.playerAPI.setLookSensitivity(this.mouseSensitivity);
+    }
+  },
+  beforeUnmount() {
+    if (this.playerAPI) {
+      this.playerAPI.destroy();
+    }
+  },
+  methods: {
+    findClosestAncestor(element, className) {
+      let el = element;
+      let returnElement = element;
+      while ((el = el.parentNode) && el.className.indexOf(className) < 0);
+      returnElement = el;
+
+      return returnElement;
+    },
+    setPlayerSize() {
+      let AR = 16 / 9;
+      let element = document.querySelector("#player-sizer");
+      if (!element) return;
+
+      let width = element.offsetWidth;
+      let height = width * (1 / AR);
+
+      if (window.innerWidth <= 600 || width <= 600) {
+        height = window.innerHeight * 0.75;
+
+        if (this.isInIframe) {
+          height = screen.height * 0.65;
+        }
+
+        width = height * (1 / AR);
+      }
+
+      element.style.height = height + "px";
+      element.style.width = width + "px";
+      this.$emit("new-size-callback", width, height);
+    },
+  },
+};
+</script>
+<style scoped>
+#player-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+#player-sizer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+div#main-canvas {
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+
+.player-control {
+  display: flex;
+  position: absolute;
+  z-index: 3;
+}
+
+#controls-top-left {
+  top: 10px;
+  left: 10px;
+}
+#controls-top-center {
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 4;
+  flex-direction: column;
+}
+
+#controls-top-right {
+  top: 10px;
+  right: 10px;
+  justify-content: flex-end;
+  align-content: flex-end;
+}
+
+#controls-center-left {
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+#controls-center-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  align-items: center;
+  justify-content: space-around;
+  z-index: 20;
+}
+#controls-center-right {
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  justify-content: flex-end;
+  align-items: center;
+}
+
+#controls-bottom-left {
+  bottom: 10px;
+  left: 10px;
+  z-index: 5;
+}
+
+#controls-bottom-center {
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: flex-end;
+  justify-content: space-around;
+  z-index: 4;
+}
+
+#controls-bottom-right {
+  bottom: 10px;
+  right: 10px;
+  justify-content: flex-end;
+  align-content: flex-end;
+  align-items: flex-end;
+  z-index: 5;
+}
+</style>