@qispace/vue3-player 0.0.15 → 0.1.1

package/src/components/virtualTourV2/WaypointCarousel.vue

@@ -1,162 +0,0 @@
-<template>
-  <div class="waypoint-carousel">
-    <v-slide-group
-      v-model="activeIndex"
-      active-class="active-apt"
-      selected-class="active-apt"
-      show-arrows
-      center-active
-      mandatory
-    >
-      <template #prev>
-        <v-hover v-slot="{ hover }">
-          <v-btn
-            elevation="0"
-            class="carousel-button"
-            :class="{ mobile: isMobile }"
-            @click="$emit('previous')"
-          >
-            <v-icon :color="hover ? '#999' : '#d2d2d2'" x-large>
-              mdi-chevron-left
-            </v-icon>
-          </v-btn>
-        </v-hover>
-      </template>
-      <template #next>
-        <v-hover v-slot="{ hover }">
-          <v-btn
-            elevation="0"
-            class="carousel-button"
-            :class="{ mobile: isMobile }"
-            @click="$emit('next')"
-          >
-            <v-icon :color="hover ? '#999' : '#d2d2d2'" x-large>
-              mdi-chevron-right
-            </v-icon>
-          </v-btn>
-        </v-hover>
-      </template>
-      <v-slide-group-item
-        v-for="thumb in thumbnails"
-        :key="thumb.id"
-        v-slot="{ toggle, selectedClass }"
-      >
-        <v-card
-          :class="['ma-2', selectedClass]"
-          align="center"
-          justify="center"
-          :height="isMobile ? 50 : 100"
-          :width="isMobile ? 80 : 160"
-          elevation="0"
-          style="overflow: hidden"
-          @click="goToCamera(thumb.id, toggle)"
-        >
-          <v-img max-height="100" max-width="160" :src="thumb.thumbnailUrl" />
-        </v-card>
-      </v-slide-group-item>
-    </v-slide-group>
-  </div>
-</template>
-
-<script>
-const KEY_ARROW_LEFT = 37;
-const KEY_ARROW_RIGHT = 39;
-
-export default {
-  name: "WaypointCarousel",
-  props: {
-    thumbnails: { type: Array, required: true },
-    active: { type: Number, required: true },
-  },
-  data() {
-    return {
-      activeThumb: 0,
-    };
-  },
-  computed: {
-    activeIndex: {
-      get() {
-        return this.active;
-      },
-      set(value) {
-        this.activeThumb = value;
-      },
-    },
-    isMobile() {
-      return /Android|webOS|iPhone|iPad|BlackBerry|Windows Phone|Opera Mini|IEMobile|Mobile/i.test(
-        window.navigator.userAgent
-      );
-    },
-  },
-  mounted() {
-    window.addEventListener("keydown", this.keyNavigate);
-  },
-  beforeUnmount() {
-    window.removeEventListener("keydown", this.keyNavigate);
-  },
-  methods: {
-    keyNavigate(e) {
-      switch (e.keyCode) {
-        case e.keyCode === KEY_ARROW_LEFT:
-          this.$emit("previous");
-        case e.keyCode === KEY_ARROW_RIGHT:
-          this.$emit("next");
-        default:
-          return;
-      }
-    },
-    goToCamera(cameraId, toggleEvent) {
-      toggleEvent();
-      this.$emit("goto", cameraId);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.v-card {
-  transition: box-shadow 0.3s ease-in-out;
-  border: 2px solid transparent;
-}
-:deep(.v-slide-group__content) {
-  justify-content: center;
-}
-:deep(.v-slide-group__next--disabled) {
-  pointer-events: all !important;
-}
-
-:deep(.v-slide-group__prev--disabled) {
-  pointer-events: all !important;
-}
-
-.carousel-button {
-  height: 108px !important;
-  min-width: 54px !important;
-  padding: 0 !important;
-  z-index: 2;
-  background-color: #fff !important;
-  border: 2px solid #d2d2d2;
-  color: #d2d2d2 !important;
-}
-.carousel-button.mobile {
-  height: 58px !important;
-  min-width: 38px !important;
-}
-.carousel-button:hover {
-  border: 2px solid #999 !important;
-  color: #999 !important;
-}
-.carousel-button:hover:before,
-.carousel-button:hover:after {
-  background-color: #fff !important;
-}
-.align-baseline {
-  align-items: baseline;
-}
-.active-apt {
-  border: 4px solid #4caf50 !important;
-}
-.v-image {
-  border-radius: 0 !important;
-}
-</style>

package/src/components/virtualTourV2/index.ts

@@ -1,20 +0,0 @@
-// // export {default as Compass } from './Compass.vue'
-// export {default as Disclaimer } from './Disclaimer.vue'
-// export {default as FloorLevel } from './FloorLevel.vue'
-// export {default as FullScreenButton } from './FullScreenButton.vue'
-// export {default as InteriorSelector } from './InteriorSelector.vue'
-// export {default as ManualSlideShow } from './ManualSlideShow.vue'
-// export {default as ManualSlideShowPlayer } from './ManualSlideShowPlayer.vue'
-// export {default as Player } from './Player.vue'
-// export {default as ScrollHelper } from './ScrollHelper.vue'
-// export {default as SettingsUI } from './SettingsUI.vue'
-// export {default as SingleImage } from './SingleImage.vue'
-// export {default as SocialShare } from './SocialShare.vue'
-// export {default as TimeOfDay } from './TimeOfDay.vue'
-// export {default as Tutorial } from './Tutorial.vue'
-// export {default as ViewModeToggle } from './ViewModeToggle.vue'
-
-// export {default as WaypointCarousel } from './WaypointCarousel.vue'
-
-export { default as VirtualTourV2 } from './VirtualTourV2.vue'
-// export {default as ManualSlideShow } from './ManualSlideShow.vue'

package/src/components/virtualTourV2/minimapv2/MiniMapMap.vue

@@ -1,262 +0,0 @@
-<template>
-  <div class="minimap-wrapper d-flex align-stretch justify-space-between">
-    <div class="minimap-container">
-      <div class="web-minimap" :style="transformStyle">
-        <div class="minimap-background-image" :style="backgroundStyle"></div>
-        <div class="center-pivot" :style="centerPivotStyle">
-          <div
-            v-for="oneCamera in camerasWithRelativePosition"
-            :key="oneCamera.id"
-          >
-            <div
-              v-if="currentCameraObject.floorLevel === oneCamera.floorLevel"
-              class="single-camera-marker"
-              :style="cameraPositionStyle(oneCamera)"
-            ></div>
-            <rotation-marker-v2
-              v-if="currentCameraObject.id === oneCamera.id"
-              class="rotation-marker-component"
-              :rotation="rotationAngle"
-              :style="{ ...cameraPositionStyle(oneCamera) }"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as THREE from "three";
-import RotationMarkerV2 from "./RotationMarkerV2.vue";
-
-function _rad(n) {
-  return THREE.MathUtils.degToRad(n);
-}
-
-export default {
-  name: "MiniMapMap",
-  components: { RotationMarkerV2 },
-  props: {
-    backgroundImage: {
-      type: String,
-      required: true,
-    },
-    allCameras: {
-      type: Array,
-      required: true,
-    },
-    minimapCamera: {
-      type: Object,
-      required: true,
-    },
-    currentCamera: {
-      type: String,
-      required: true,
-    },
-    rotation: {
-      type: Number,
-      required: true,
-    },
-    transformAngle: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      planeWidth: 512,
-      planeHeight: 384,
-      topLeftCorner: new THREE.Vector3(),
-      centerPivot: new THREE.Object3D(),
-      centerPivotStyle: {},
-      scale: 1,
-      resizeOverver: undefined,
-    };
-  },
-  computed: {
-    apartmentCameras() {
-      return this.allCameras;
-    },
-    currentCameraObject() {
-      return this.allCameras.find((item) => {
-        return item.id === this.currentCamera;
-      });
-    },
-    rotationAngle() {
-      return this.rotation;
-    },
-    minimapCameraPositionVector() {
-      return new THREE.Vector3(
-        this.minimapCamera.position.x,
-        this.minimapCamera.position.y,
-        this.minimapCamera.position.z
-      );
-    },
-    floorVerticalPosition() {
-      return parseFloat(this.currentCameraObject.floor_vertical_position);
-    },
-    camerasWithRelativePosition() {
-      return this.apartmentCameras.map((oneCamera) => {
-        const cameraPosition = oneCamera.uposition.split(",");
-
-        const position = new THREE.Vector3(
-          cameraPosition[0] - this.minimapCameraPositionVector.x,
-          0,
-          cameraPosition[2] - this.minimapCameraPositionVector.z
-        );
-
-        const toReturn = {
-          ...oneCamera,
-          ...this.relativePosition(this.topLeftCorner, position),
-        };
-
-        return toReturn;
-      });
-    },
-    backgroundStyle() {
-      return `background-image: url(${this.backgroundImage});`;
-    },
-    transformStyle() {
-      let actualScale = this.scale > 1 ? 1 : this.scale;
-      if (actualScale < 0.8) actualScale = 0.4;
-
-      return `scale: ${actualScale > 1 ? 1 : actualScale}; transform: rotate(${
-        this.transformAngle
-      }deg);`;
-    },
-  },
-  mounted() {
-    this.calculateRelativeValues();
-    this.upadteCenterPivot();
-    this.calcualteScale();
-
-    const element = document.getElementById("moveableDiv");
-    if (element)
-      this.resizeOverver = new ResizeObserver(this.calcualteScale).observe(
-        element
-      );
-  },
-  beforeUpdate() {
-    this.calculateRelativeValues();
-    this.upadteCenterPivot();
-  },
-  beforeUnmount() {
-    if (this.resizeOverver) {
-      this.resizeOverver.unobserve(document.getElementById("moveableDiv"));
-    }
-  },
-  methods: {
-    upadteCenterPivot() {
-      this.centerPivot.rotation.x = 180;
-      this.centerPivot.rotation.y = this.minimapCamera.rotation.y * -1;
-
-      this.centerPivotStyle = {
-        transform: `rotateZ(${this.centerPivot.rotation.y}deg) rotateX(${this.centerPivot.rotation.x}deg)`,
-      };
-    },
-    cameraPositionStyle(camera) {
-      return {
-        top: `${Math.abs(camera.top)}%`,
-        left: `${Math.abs(camera.left)}%`,
-      };
-    },
-    relativePosition(topLeftCorner, position) {
-      var direction = new THREE.Vector3();
-      const relativePosition = direction.subVectors(topLeftCorner, position);
-
-      return {
-        relativePosition,
-        left: (relativePosition.x / this.planeWidth) * 100,
-        top: (relativePosition.z / this.planeHeight) * 100,
-      };
-    },
-    calculateRelativeValues() {
-      const cameraHeight =
-        this.minimapCamera.position.y - this.floorVerticalPosition;
-      this.planeHeight =
-        2 * (cameraHeight * Math.tan(_rad(this.minimapCamera.fovY / 2)));
-      this.planeWidth = (512 / 384) * this.planeHeight;
-
-      const halfHeight = this.planeHeight / 2;
-      const halfWidth = this.planeWidth / 2;
-      const topLeftCorner = new THREE.Vector3(
-        halfWidth * -1,
-        0,
-        halfHeight * -1
-      );
-      this.topLeftCorner = topLeftCorner;
-    },
-    calcualteScale() {
-      const parentElement = document.getElementById("moveableDiv");
-
-      if (!parentElement) return;
-
-      const heightScale = (parentElement.offsetHeight / 384) * 0.8;
-      const widthScale = (parentElement.offsetWidth / 512) * 0.8;
-
-      if (parentElement.offsetHeight > parentElement.offsetWidth) {
-        this.scale = widthScale * 0.5;
-      } else {
-        this.scale = heightScale * 0.9;
-      }
-    },
-  },
-};
-</script>
-<style scoped>
-.minimap-container {
-  position: relative;
-}
-
-.web-minimap {
-  position: relative;
-  width: 512px;
-  height: 385px;
-  overflow: hidden;
-  transition: transform 0.5s ease-in;
-}
-
-@media (max-width: 650px) {
-  .web-minimap {
-    scale: 0.7;
-  }
-}
-
-@media (max-width: 480px) {
-  .web-minimap {
-    scale: 0.5;
-  }
-}
-
-.minimap-background-image {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-.single-camera-marker {
-  position: absolute;
-  width: 7px;
-  height: 7px;
-  background: #fff;
-  border-radius: 50%;
-  z-index: 2;
-  transform: translate(-50%, -50%);
-  border: 0px;
-}
-
-.rotation-marker-component {
-  z-index: 3;
-  position: absolute;
-  width: 80px;
-  height: 80px;
-  transform: translate(-50%, -50%);
-}
-
-.center-pivot {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-</style>

package/src/components/virtualTourV2/minimapv2/MiniMapV2.vue

@@ -1,110 +0,0 @@
-<template>
-  <moveable @close="$emit('close')" @transform="transform">
-    <template v-slot:body>
-      <minimap-compass
-        :scale="scale"
-        :minimapCamera="minimapCamera"
-        :transformAngle="transformAngle"
-      />
-      <div>
-        <mini-map-map
-          :transformAngle="transformAngle"
-          :allCameras="allCameras"
-          :backgroundImage="backgroundImage"
-          :rotation="rotation"
-          :currentCamera="currentCamera"
-          :minimapCamera="minimapCamera"
-        />
-      </div>
-    </template>
-    <template v-slot:footer>
-      <sunsimulation-slider
-        :minimapJSON="minimapJSON"
-        :root="`${rootUrl}/minimap/`"
-        :level="level"
-        @set-background-image="setBackgroundImage"
-      />
-    </template>
-  </moveable>
-</template>
-<script>
-import MiniMapMap from "./MiniMapMap.vue";
-import Moveable from "./Moveable.vue";
-import MinimapCompass from "./MinimapCompass.vue";
-import SunsimulationSlider from "./SunsimulationSlider.vue";
-
-export default {
-  components: { MiniMapMap, Moveable, MinimapCompass, SunsimulationSlider },
-  name: "MiniMapV2",
-  emits: ["close", "set-background-image"],
-  props: {
-    minimapJSON: {
-      type: Array,
-      required: true,
-    },
-    rootUrl: {
-      type: String,
-      required: true,
-    },
-    backgroundImage: {
-      type: String,
-      required: true,
-    },
-    allCameras: {
-      type: Array,
-      required: true,
-    },
-    minimapCamera: {
-      type: Object,
-      required: true,
-    },
-    currentCamera: {
-      type: String,
-      required: true,
-    },
-    level: {
-      type: Number,
-      required: true,
-    },
-    rotation: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      transformAngle: 0,
-    };
-  },
-  computed: {
-    scale() {
-      let scale = 1;
-      if (this.transformAngle !== 0) {
-        if (Math.abs(this.transformAngle) % 180 === 0) {
-          scale = 1;
-        } else {
-          scale = -1;
-        }
-      }
-
-      return scale;
-    },
-  },
-  methods: {
-    setBackgroundImage(image) {
-      this.$emit("set-background-image", image);
-    },
-    transform() {
-      this.transformAngle = this.transformAngle + 90;
-    },
-  },
-};
-</script>
-<style scoped>
-.minimap-compass {
-  position: absolute;
-  right: 5px;
-  top: 50px;
-  z-index: 11;
-}
-</style>

package/src/components/virtualTourV2/minimapv2/MinimapCompass.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="minimap-compass" :style="{ scale: scale }">
-    <qi-north-direction class="north-indicator" :longitude="northDirection" />
-  </div>
-</template>
-<script>
-import QiNorthDirection from '../../shared/QiNorthDirection.vue'
-
-export default {
-  name: 'MinimapCompass',
-  components: { QiNorthDirection },
-  props: {
-    scale: {
-      type: Number,
-      required: true,
-    },
-    minimapCamera: {
-      type: Object,
-      required: true,
-    },
-    transformAngle: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    northDirection() {
-      return this.minimapCamera.rotation
-        ? this.minimapCamera.rotation.y + this.transformAngle - 90
-        : 0
-    },
-  },
-}
-</script>
-<style scoped>
-.minimap-compass {
-  width: 50px;
-}
-</style>