@qispace/vue3-player 0.0.16 → 0.1.1

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

@@ -1,208 +0,0 @@
-<template>
-  <div
-    id="moveableDiv"
-    class="big d-flex justify-space-between flex-column align-center sizer"
-    :class="currentSize"
-  >
-    <v-btn
-      class="close-icon"
-      icon="mdi-window-close"
-      size="x-small"
-      @click="$emit('close')"
-    >
-    </v-btn>
-    <v-btn
-      class="resize-icon"
-      icon="mdi-image-size-select-small"
-      size="x-small"
-      @click="toggleSize"
-      title="Resize"
-    >
-    </v-btn>
-    <v-btn
-      class="rotate-icon"
-      size="x-small"
-      icon="mdi mdi-rotate-right"
-      @click="$emit('transform')"
-      title="Rotate"
-    >
-    </v-btn>
-
-    <!-- just a filler div to center elements  -->
-    <div id="filler-div"></div>
-
-    <div class="moveable-body" id="moveableDivheader">
-      <slot class="slot" name="body"></slot>
-    </div>
-
-    <div class="moveable-footer">
-      <slot name="footer"></slot>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "Moveable",
-  emits: ["close"],
-  data() {
-    return {
-      currentSize: "big",
-    };
-  },
-  mounted() {
-    configureDraggable(document.getElementById("moveableDiv"));
-  },
-  methods: {
-    toggleSize() {
-      if (this.currentSize === "big") {
-        this.currentSize = "small";
-      } else {
-        this.currentSize = "big";
-      }
-    },
-  },
-};
-
-function configureDraggable(box) {
-  const element = document.getElementById(box.id + "header");
-  if (!element) return;
-
-  var pos1 = 0,
-    pos2 = 0,
-    pos3 = 0,
-    pos4 = 0;
-
-  element.addEventListener("touchstart", dragStart, { passive: false });
-  element.addEventListener("touchend", dragEnd, { passive: false });
-  element.addEventListener("mousedown", dragStart, { passive: false });
-  element.addEventListener("mouseup", dragEnd, { passive: false });
-
-  function dragStart(e) {
-    e = e || window.event;
-    e.preventDefault();
-    let event = e;
-    if (e.type === "touchstart") {
-      event = e.touches[0];
-    }
-
-    pos3 = event.clientX;
-    pos4 = event.clientY;
-
-    document.addEventListener("mouseup", dragEnd, { passive: false });
-    document.addEventListener("touchend", dragEnd, { passive: false });
-
-    document.addEventListener("mousemove", drag, { passive: false });
-    document.addEventListener("touchmove", drag, { passive: false });
-  }
-
-  function drag(e) {
-    e = e || window.event;
-    e.preventDefault();
-
-    let event = e;
-    if (e.type === "touchmove") {
-      event = e.touches[0];
-    }
-
-    pos1 = pos3 - event.clientX;
-    pos2 = pos4 - event.clientY;
-    pos3 = event.clientX;
-    pos4 = event.clientY;
-
-    box.style.top = box.offsetTop - pos2 + "px";
-    box.style.left = box.offsetLeft - pos1 + "px";
-  }
-
-  function dragEnd() {
-    document.removeEventListener("mouseup", dragEnd, false);
-    document.removeEventListener("mousemove", drag, false);
-    document.removeEventListener("touchend", dragEnd, false);
-    document.removeEventListener("touchmove", drag, false);
-  }
-}
-</script>
-<style scoped>
-#moveableDiv {
-  position: fixed;
-  z-index: 15;
-  background-color: #ffffff;
-  border: 1px solid #d3d3d3;
-}
-
-#moveableDivheader {
-  cursor: move;
-  z-index: 10;
-}
-
-.big {
-  width: 512px;
-  height: 440px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.small {
-  width: 250px;
-  height: 300px;
-  bottom: 10px;
-  right: 10px;
-  transform: translate(0%, 0%);
-}
-
-.sizer {
-  /* resize: both; */
-  overflow: hidden;
-  min-width: 250px;
-  min-height: 300px;
-  max-width: 700px;
-  max-height: 531px;
-}
-
-.resize-icon {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 11;
-}
-
-.rotate-icon {
-  position: absolute;
-  top: 5px;
-  right: 45px;
-  z-index: 12;
-}
-
-.close-icon {
-  position: absolute;
-  top: 5px;
-  left: 5px;
-  z-index: 11;
-}
-
-.moveable-body {
-  z-index: 1;
-}
-
-.moveable-footer {
-  width: 100%;
-  height: 50px;
-  margin-bottom: 10px;
-  background: #fff;
-  z-index: 2;
-}
-
-.filler-div {
-  display: none;
-}
-
-@media only screen and (max-width: 600px) {
-  .sizer {
-    /* resize: both; */
-    overflow: hidden;
-
-    max-width: 90%;
-    max-height: 80vh;
-  }
-}
-</style>

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

@@ -1,79 +0,0 @@
-<template>
-  <svg
-    class="rotation-marker-svg"
-    viewBox="0 0 40 40"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <defs>
-      <radialGradient id="Gradient" cx="0" cy="0" r="0.9" fx="0" fy="0">
-        <stop offset="0%" class="stop1" />
-        <stop offset="60%" class="stop2" />
-        <stop offset="90%" class="stop3" />
-      </radialGradient>
-
-      <linearGradient id="LineGradient" gradientTransform="rotate(90)">
-        <stop offset="0%" class="stop1" />
-        <stop offset="75%" class="stop2" />
-        <stop offset="100%" class="stop3" />
-      </linearGradient>
-    </defs>
-    <g transform-origin="20 20" :transform="`rotate(${+45 + rotation})`">
-      <rect
-        id="field-of-view-gradient"
-        x="20"
-        y="20"
-        width="38"
-        height="38"
-        transform="rotate(0)"
-        transform-origin="20 20"
-        fill="url(#Gradient)"
-      />
-      <rect
-        class="field-of-view-border"
-        x="20"
-        y="20"
-        width="1"
-        height="25"
-        fill="url(#LineGradient)"
-        transform="rotate(0)"
-        transform-origin="20 20"
-      />
-      <rect
-        class="field-of-view-border"
-        x="19"
-        y="19"
-        width="1"
-        height="25"
-        fill="url(#LineGradient)"
-        transform="rotate(-90)"
-        transform-origin="20 20"
-      />
-
-      <circle cx="20" cy="20" r="5" fill="white" />
-      <circle cx="20" cy="20" r="3" fill="red" />
-    </g>
-  </svg>
-</template>
-
-<script>
-export default {
-  props: {
-    rotation: {
-      type: Number,
-      required: true,
-    },
-  },
-}
-</script>
-<style>
-.stop1 {
-  stop-color: white;
-}
-.stop2 {
-  stop-color: white;
-  stop-opacity: 0;
-}
-.stop3 {
-  stop-color: transparent;
-}
-</style>

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

@@ -1,203 +0,0 @@
-<template>
-  <div class="ss-wrapper">
-    <div class="slider">
-      <div class="minimap-sun-slider">
-        <v-progress-linear
-          v-if="imagesPreloading"
-          indeterminate
-          rounded
-          height="6"
-          color="grey lighten-1"
-          class="mr-2"
-        />
-        <v-slider
-          v-else
-          v-model="hourMark"
-          :min="0"
-          :max="23"
-          :step="1"
-          color="#373737"
-          track-color="#373737"
-          thumb-color="#373737"
-          :hide-details="true"
-        >
-          <template v-slot:prepend>
-            <v-icon color="#ffab02">mdi-white-balance-sunny</v-icon>
-          </template>
-        </v-slider>
-      </div>
-      <div v-if="!imagesPreloading" class="time-label">
-        {{ timeString }} {{ hourMarkString }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "SunsimulationSlider",
-  emits: ["set-background-image"],
-  props: {
-    minimapJSON: { type: Array, required: true },
-    level: { type: Number, required: true },
-    root: { type: String, required: true },
-  },
-  inject: ["localMode", "fileLoader"],
-  data() {
-    return {
-      imageUrl: "",
-      imageHeight: 0,
-      hourMark: new Date().getHours(),
-      imagesPreloading: true,
-      loading: true,
-      firstImage: "",
-      preloadedSunSimImages: new Map(),
-    };
-  },
-  computed: {
-    minimapData() {
-      return this.minimapJSON[this.level];
-    },
-    hourMarkString() {
-      const hour = Math.floor(this.hourMark).toString().padStart(2, "0");
-      return `${hour}:00`;
-    },
-    timeString() {
-      if (this.minimapData.sunsimFilesTimeStamps[this.hourMark]) {
-        const date =
-          this.minimapData.sunsimFilesTimeStamps[this.hourMark].split(" ");
-
-        return `${date[0]} ${date[1]}`;
-      }
-
-      return "";
-    },
-  },
-  async mounted() {
-    this.firstImage = await this.fetchAndConvertToBase64(
-      this.minimapData.sunsimFiles[this.hourMark]
-    );
-
-    this.loading = false;
-
-    const backgroundImages = await this.preloadImages(this.minimapJSON);
-    this.preloadedSunSimImages = backgroundImages;
-    this.imagesPreloading = false;
-    this.$emit(
-      "set-background-image",
-      this.getImageUrl(this.level, this.hourMark)
-    );
-  },
-  watch: {
-    hourMark() {
-      const newImage = this.getImageUrl(this.level, this.hourMark);
-
-      this.$emit("set-background-image", newImage);
-    },
-    level: {
-      handler() {
-        this.$emit(
-          "set-background-image",
-          this.getImageUrl(this.level, this.hourMark)
-        );
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    getImageUrl(level, hourMark) {
-      // if (this.imagesPreloading) return this.firstImage
-
-      if (this.preloadedSunSimImages.get(`sunsim${level}_${hourMark}`))
-        return this.preloadedSunSimImages.get(`sunsim${level}_${hourMark}`);
-      return "";
-    },
-    async preloadImages(minimapJSON) {
-      let images = new Map();
-
-      for (let i = 0; i < minimapJSON.length; i++) {
-        const sunsimFiles = minimapJSON[i].sunsimFiles;
-
-        for (let j = 0; j < sunsimFiles.length; j++) {
-          const element = sunsimFiles[j];
-
-          try {
-            const url = element;
-            const nameOnly = element.split(".");
-            const image = await this.fetchAndConvertToBase64(this.root + url);
-
-            images.set(nameOnly[0], image);
-          } catch (e) {
-            continue;
-            // ignore on fetch errors
-          }
-        }
-      }
-
-      return images;
-    },
-    async fetchAndConvertToBase64(url) {
-      let actualUrl = url;
-
-      if (this.localMode) {
-        actualUrl = `${this.fileLoader.getURL(url)}`;
-      }
-
-      const response = await fetch(actualUrl);
-      const blob = await response.blob();
-      const base64 = await this.convertToBase64(blob);
-      const base64Image = this.base64toImage(base64);
-      return base64Image;
-    },
-    base64toImage(base64) {
-      return "data:image/jpeg;base64," + base64;
-    },
-    async convertToBase64(blob) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-          const base64 = reader.result.split(",")[1];
-          resolve(base64);
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
-      });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.ss-wrapper {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin: 0 10px;
-  position: relative;
-  z-index: 100;
-}
-
-.sun-icon {
-  width: 10%;
-}
-
-.slider {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  padding: 3px 0;
-}
-
-i.v-icon.notranslate.mdi.mdi-white-balance-sunny.theme--light {
-  font-size: 40px;
-  color: #ffab02;
-  padding: 5px;
-}
-
-.time-label {
-  padding: 0;
-  display: inline-block;
-  margin-top: -10px;
-  margin-left: 50px;
-}
-</style>

package/src/components/virtualTourV2/minimapv2/index.ts

@@ -1 +0,0 @@
-export { default as MiniMapV2 } from './MiniMapV2.vue'