@qispace/vue3-player 0.0.15 → 0.1.1

package/src/components/virtualTourV2/ManualSlideShow.vue

@@ -1,198 +0,0 @@
-<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

@@ -1,159 +0,0 @@
-<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/Player.vue

@@ -1,300 +0,0 @@
-<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: 'Player',
-  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>