@qispace/vue3-player 0.0.5 → 0.0.7

package/src/lib/virtualTour__/MinimapConfig.ts

@@ -1,46 +0,0 @@
-import { ProjectFiles, ProjectFile } from './ApartmentFiles'
-
-
-export interface Coordinate3D{
-  x: number,
-  y: number,
-  z: number
-}
-
-export interface MinimapStorey {
-  sunsimFilesTimeStamps: string[],
-  sunsimFiles: string[],
-  fovY: number,
-  rotation: Coordinate3D,
-  position: Coordinate3D,
-}
-export interface MinimapMetadata {
-  storeys: MinimapStorey[]
-}
-
-export class MinimapConfig {
-  constructor(private readonly apartmentFiles: ProjectFiles) {}
-
-  async getMinimapData(): Promise<Object | undefined> {
-    const metadata = await this.readMinimapMetadata()
-    if (!metadata) return undefined
-
-    const fileNames = metadata.storeys[0].sunsimFiles
-    const files = fileNames.map((name) => this.constructMinimapFile(name).toPath())
-
-    // TODO: for DUPLEX this will be different 
-    const minimapData = metadata.storeys[0]
-    
-    return {...minimapData, sunsimFiles: files }
-  }
-
-  private async readMinimapMetadata(): Promise<MinimapMetadata | undefined> {
-    const metadataFile = this.constructMinimapFile('minimap.json')
-    const metadata = await metadataFile.readJson<MinimapMetadata>()
-    return metadata
-  }
-
-  private constructMinimapFile(filename: string): ProjectFile {
-    return this.apartmentFiles.makeFile('minimap', filename)
-  }
-}

package/src/lib/virtualTour__/PlayerViewModel.js

@@ -1,423 +0,0 @@
-import Vue from 'vue'
-import axios from 'axios'
-import PlayerConfig from './config/PlayerConfig'
-import { CameraNavigator } from './CameraNavigator'
-
-export const ViewModeVirtualTour = 'virtualTour'
-export const ViewModeSlideShow = 'slideShow'
-export const ViewModeManualSlideShow = 'manualSlideShow'
-
-function parseTimeOfDay(floatValue) {
-  if (floatValue === undefined) return null
-
-  const hours = Math.floor(floatValue)
-  const minutes = Math.floor((hours - floatValue) * 60)
-  return { hours, minutes }
-}
-
-function getFirstCameraId(cameras) {
-  const camera = cameras && cameras[0]
-  return camera ? camera.id : undefined
-}
-
-function getAvailableViewModesFromUnitViewMode(unitViewMode) {
-  switch (unitViewMode) {
-    case 'slideShowOnly':
-      return [ViewModeSlideShow]
-    case 'virtualTourOnly':
-      return [ViewModeVirtualTour]
-    case 'virtualTourAndSlideShowDefaultVirtualTour':
-    case 'virtualTourAndSlideShowDefaultSlideShow':
-      return [ViewModeVirtualTour, ViewModeSlideShow]
-    case 'manualSlideShow':
-      return [ViewModeManualSlideShow]
-    default:
-      console.error('cannot initialize player without viewModes')
-  }
-}
-
-function getInitialViewModeFromUnitViewMode(unitViewMode) {
-  switch (unitViewMode) {
-    case 'slideShowOnly':
-    case 'virtualTourAndSlideShowDefaultSlideShow':
-      return ViewModeSlideShow
-    case 'virtualTourAndSlideShowDefaultVirtualTour':
-    case 'virtualTourOnly':
-      return ViewModeVirtualTour
-    case 'manualSlideShow':
-      return ViewModeManualSlideShow
-    default:
-      console.error('cannot initialize player without viewModes')
-  }
-}
-
-export default class PlayerViewModel {
-  static makeCdnModel(modelParams) {
-    return new CdnPlayerViewModel(modelParams)
-  }
-
-  constructor(initData) {
-    this._state = Vue.observable({
-      _initialized: false,
-      _viewMode: getInitialViewModeFromUnitViewMode(initData.unitViewMode),
-      _availableViewModes: getAvailableViewModesFromUnitViewMode(
-        initData.unitViewMode
-      ),
-      _selectedArchetypeIndex: initData.selectedArchetypeIndex || 0,
-      _cameras: [],
-      _timeOfDay: initData.timeOfDay,
-      _archetypes: initData.archetypes || [],
-      _cameraSnapshot: {
-        requested: null,
-        latest: null,
-      },
-      _panoramaOrientation: { lat: 0.0, lon: 0.0 },
-      adminMode: initData.adminMode || false,
-    })
-    this._navigator = new CameraNavigator()
-
-    this._cdnFileResolver =
-      typeof initData.cdnFileResolver === 'string'
-        ? (name) => initData.cdnFileResolver + name
-        : initData.cdnFileResolver
-    this._apartmentId = initData.apartmentId
-    this._websiteUrl = initData.websiteUrl
-    this._unitViewMode = initData.unitViewMode
-
-    this._manualSlideshowImages = initData.manualSlideshowImages
-
-    this._addBuildVersionToUrls = initData.addBuildVersionToUrls
-    this._showCompass = !!initData.showCompass
-    this._showMiniMap = initData.showMiniMap
-    this._onInformationButtonPress = initData.onInformationButtonPress
-    this._mouseSensitivityFactor = initData.mouseSensitivity ? initData.mouseSensitivity : 1
-
-    this._initData = undefined
-  }
-
-  takeCameraSnapshot() {
-    this._state._cameraSnapshot.requested = new Date()
-  }
-
-  async initializeData({ initialArchetypeId, initialWaypointIndex } = {}) {
-    if (this._state._viewMode === ViewModeManualSlideShow) {
-      this._initData = this._manualSlideshowImages
-      this._state._timeOfDay = undefined
-      this._state._cameras = this._manualSlideshowImages
-
-      this._navigator.initialize(
-        this._manualSlideshowImages,
-        getFirstCameraId(this._manualSlideshowImages),
-        0
-      )
-    } else {
-      if (this.archetypes.length === 0) {
-        await this._loadArchetypesFromConfig(initialArchetypeId)
-      } else if (initialArchetypeId) {
-        let index = this.archetypes.findIndex(
-          ({ id }) => id === initialArchetypeId
-        )
-        if (index < 0) {
-          index = 0
-        }
-        this.selectArchetypeByIndex(index)
-      }
-
-      this._state._archetypes = await this._loadMinimaps()
-
-      // TODO: With Ulven project, apartment.json is an empty stub file
-      // The code needs to be ready for such a situation
-      const apartments = (
-        await axios.get(this.resolveApartmentFile('apartment.json'))
-      ).data
-      const thumbs = (await axios.get(this.resolveApartmentFile('thumbs.json')))
-        .data
-
-      this._initData = apartments
-      this._state._timeOfDay = parseTimeOfDay(apartments.timeInHours)
-      this._state._cameras = apartments.cameras
-
-      this._navigator.initialize(
-        thumbs.cameras,
-        getFirstCameraId(apartments.cameras),
-        initialWaypointIndex
-      )
-    }
-
-    this._state._initialized = true
-  }
-
-  async _loadArchetypesFromConfig(initialArchetypeId) {
-    const projectConfig = (await axios.get(this.getFilename('/config.json')))
-      .data
-
-    this._state._archetypes = projectConfig.archetypes.map(
-      ({ description, archetypeID, title, enabled }) => {
-        return {
-          id: archetypeID,
-          description,
-          label: title || archetypeID,
-          enabled,
-        }
-      }
-    )
-
-    let index = this.archetypes.findIndex(
-      ({ id }) =>
-        id ===
-        (initialArchetypeId
-          ? initialArchetypeId
-          : projectConfig.defaultArchetypeID)
-    )
-    if (index < 0) {
-      index = 0
-    }
-    this.selectArchetypeByIndex(index)
-  }
-
-  async _loadMinimaps() {
-    return Promise.all(
-      this.archetypes.map(async (a) => {
-        try {
-          const metadata = (
-            await axios.get(this.resolveApartmentFile('/minimap/minimap.json'))
-          ).data
-
-
-          let sunsimFilesByStorey = metadata.storeys.map((item) => { return item.sunsimFiles })
-
-          let sunsimFiles = []
-
-          for (let index = 0; index < sunsimFilesByStorey.length; index++) {
-            const element = sunsimFilesByStorey[index];
-            const fileUrls = element.map(name => this.resolveApartmentFile(`/minimap/${name}`))
-            sunsimFiles = [...sunsimFiles, fileUrls]
-          }
-
-          const minimapData = { data: metadata.storeys, sunsimFiles }
-          return { ...a, minimapData }
-        } catch {
-          return a
-        }
-      })
-    )
-  }
-
-  startPlayer(domElement, onStartedCb) {
-    const player = new PlayerConfig({
-      target: domElement,
-      addBuildVersionToUrls: this._addBuildVersionToUrls,
-      fileResolver: (name) => this.resolveApartmentFile(name),
-      onPlayerCameraChanged: (cameraID) => this.playerCameraChangedTo(cameraID),
-      panoramaOrientation: this._state._panoramaOrientation,
-      mouseSensitivityFactor: this._mouseSensitivityFactor
-    })
-
-    player.start(this._initData, this.getStartCameraId(), onStartedCb)
-    return player
-  }
-
-  playerCameraChangedTo(cameraId) {
-    this._navigator.selectedCameraId = cameraId
-  }
-
-  selectArchetypeByIndex(index) {
-    this._state._selectedArchetypeIndex = index
-  }
-
-  get isInitialized() {
-    return this._state._initialized
-  }
-
-  get viewMode() {
-    return this._state._viewMode
-  }
-
-  get availableViewModes() {
-    return this._state._availableViewModes
-  }
-
-  get isViewModeVirtualTour() {
-    return this._state._viewMode === ViewModeVirtualTour
-  }
-
-  get isViewModeSlideShow() {
-    return this._state._viewMode === ViewModeSlideShow
-  }
-
-  nextViewMode() {
-    if (this._state._availableViewModes.length > 1) {
-      const currentIndex = this._state._availableViewModes.findIndex(
-        (m) => m === this._state._viewMode
-      )
-      if (currentIndex === this._state._availableViewModes.length - 1) {
-        this._state._viewMode = this._state._availableViewModes[0]
-      } else {
-        this._state._viewMode =
-          this._state._availableViewModes[currentIndex + 1]
-      }
-    }
-  }
-
-  getStartCameraId() {
-    if (this._navigator.selectedCameraId)
-      return this._navigator.selectedCameraId
-    else throw new Error('Unable to detect a starting camera for virtual tour')
-  }
-
-  resolveCdnApartment() {
-    return `/${this.archetypeId}/${this.apartmentId}`
-  }
-
-  getFilename(name) {
-
-    if (this._state.adminMode) {
-      return this._cdnFileResolver(name) + `?v=${Date.now()}`
-    }
-
-    return this._cdnFileResolver(name)
-
-
-  }
-
-  resolveApartmentFile(name) {
-    if (!name.startsWith('/')) {
-      name = '/' + name
-    }
-    return this.getFilename(this.resolveCdnApartment() + name)
-  }
-
-  get apartmentId() {
-    return this._apartmentId
-  }
-
-  get archetype() {
-    const archetype = this.archetypes
-      ? this.archetypes[this._state._selectedArchetypeIndex]
-      : undefined
-    return archetype
-  }
-
-  get minimapData() {
-    return this.archetype && this.archetype.minimapData
-  }
-
-  get archetypeId() {
-    const archetype = this.archetypes
-      ? this.archetypes[this._state._selectedArchetypeIndex]
-      : undefined
-    return archetype && archetype.id
-  }
-
-  get selectedArchetypeIndex() {
-    return this._state._selectedArchetypeIndex
-  }
-
-  get websiteUrl() {
-    return this._websiteUrl
-  }
-
-  get archetypes() {
-    return this._state._archetypes
-  }
-
-  get thumbnails() {
-    if (this._state._viewMode === ViewModeManualSlideShow) {
-      return this._manualSlideshowImages
-    }
-
-    return this._navigator.waypoints.map((thumb) => ({
-      id: thumb.id,
-      url: this.getWaypointThumbnailUrl(this.archetypeId, thumb.id),
-    }))
-  }
-
-  getWaypointThumbnailUrl(interiorId, cameraId) {
-    return this.getFilename(
-      `/${interiorId}/${this.apartmentId}/thumbs/200/${cameraId}.jpg`
-    )
-  }
-
-  get selectedWaypointImageUrl() {
-    const selectedWaypoint = this._navigator.selectedWaypoint
-
-    if (this._state._viewMode === ViewModeManualSlideShow && selectedWaypoint) {
-      return selectedWaypoint.url
-    }
-
-    return selectedWaypoint
-      ? this.getFilename(
-        `/${this.archetypeId}/${this.apartmentId}/images/1280/${selectedWaypoint.id}.jpg`
-      )
-      : undefined
-  }
-
-  get panoramaOrientation() {
-    return this._state._panoramaOrientation
-  }
-
-  get cameraSnapshot() {
-    return this._state._cameraSnapshot.latest
-  }
-
-  set cameraSnapshot(value) {
-    this._state._cameraSnapshot.latest = value
-  }
-
-  get cameraSnapshotRequested() {
-    return this._state._cameraSnapshot.requested
-  }
-
-  get allCameras() {
-    return this._state._cameras
-  }
-
-  get showCompass() {
-    return this._showCompass
-  }
-
-  get showMiniMap() {
-    return this._showMiniMap
-  }
-
-  get waypointNavigator() {
-    return this._navigator
-  }
-
-  get timeOfDay() {
-    return this._state._timeOfDay
-  }
-
-  get hasInformationButtonCallback() {
-    return !!this._onInformationButtonPress
-  }
-
-  get onInformationButtonPress() {
-    return this._onInformationButtonPress
-  }
-}
-
-class CdnPlayerViewModel extends PlayerViewModel {
-  constructor(modelParams) {
-    super({
-      ...modelParams,
-      cdnFileResolver: (name) => modelParams.cdnRoot + name,
-    })
-    this._cdnRoot = modelParams.cdnRoot
-  }
-
-  dehydrate() {
-    return {
-      cdnRoot: this._cdnRoot,
-      apartmentId: this._apartmentId,
-      archetypes: this._state._archetypes,
-      selectedArchetypeIndex: this._state._selectedArchetypeIndex,
-      websiteUrl: this._websiteUrl,
-      unitViewMode: this._unitViewMode,
-      showCompass: this._showCompass,
-      showMiniMap: this._showMiniMap,
-      timeOfDay: this._timeOfDay,
-      onInformationButtonPress: this._onInformationButtonPress,
-    }
-  }
-}

package/src/lib/virtualTour__/config/ApartmentConfig.js

@@ -1,92 +0,0 @@
-/* eslint-disable */
-
-import { CameraConfig } from './CameraConfig'
-
-class ApartmentConfig {
-  constructor(json, scene) {
-    this._cameras = {}
-    this._apartmentID = json.id
-    this._version = json.version
-    for (let i = 0; i < json.cameras.length; i++) {
-      const camera = json.cameras[i]
-      this._cameras[camera.id.toUpperCase()] = new CameraConfig(
-        camera.id,
-        camera,
-        scene
-      )
-    }
-  }
-
-  get apartmentID() {
-    return this._apartmentID
-  }
-
-  get cameras() {
-    return this._cameras
-  }
-
-  findClosestVisibleCamera(point, ignoreCamera) {
-    let closestCamera = null
-    let minDistance = 10000
-    for (const key in this._cameras) {
-      const c = this._cameras[key]
-      if (c.isVisible && c != ignoreCamera) {
-        const dx = c.position.x - point.x
-        const dz = c.position.z - point.z
-        const distance = Math.sqrt(dx * dx + dz * dz)
-        if (distance < minDistance) {
-          minDistance = distance
-          closestCamera = c
-        }
-      }
-    }
-    return closestCamera
-  }
-
-  findClosestVisibleCameraInDirection(dx, dz, v, currentPanorama) {
-    for (let dist = 0; dist < 10; dist += 0.1) {
-      v.x = currentPanorama.cameraConfig.position.x + dx * dist
-      v.y = currentPanorama.cameraConfig.position.y
-      v.z = currentPanorama.cameraConfig.position.z + dz * dist
-      const c = this.findClosestVisibleCamera(v, null)
-      if (c != currentPanorama.cameraConfig) return c
-    }
-    return null
-  }
-
-  updateVisible(panorama) {
-    for (const key in this._cameras) {
-      // Check if something is in front of the given camera (at camera level), in that case it is invisible
-      const c = this._cameras[key]
-      var dx = c.position.x - panorama.cameraConfig.position.x
-      var dy = c.position.y - panorama.cameraConfig.position.y
-      var dz = c.position.z - panorama.cameraConfig.position.z
-      var distance = Math.sqrt(dx * dx + dy * dy + dz * dz)
-      c.isVisible = panorama.getDepth(dx, dy, dz) > distance
-      c.mesh.visible = c.isVisible
-
-      // Check if the visible camera positions are obstructed at slightly above ground level
-      if (c.isVisible) {
-        var dx = c.position.x - panorama.cameraConfig.position.x
-        const floorOffset = c._floor_vertical_position + 0.2
-        var dy = floorOffset - panorama.cameraConfig.position.y
-        var dz = c.position.z - panorama.cameraConfig.position.z
-        var distance = Math.sqrt(dx * dx + dy * dy + dz * dz)
-        c.isObstructed = panorama.getDepth(dx, dy, dz) <= distance
-      }
-    }
-  }
-
-  animateMarkers(panorama, elapsedTime) {
-    if (!panorama) return false
-    for (const key in this._cameras) {
-      const c = this._cameras[key]
-      const dist = c.position.distanceTo(panorama.cameraConfig.position)
-      const baseOpacityModifier = c.isObstructed ? 0.1 : 0.2
-      c.mesh.material.opacity =
-        (Math.sin(-elapsedTime * 3 + dist * 0.5) + 1) *
-        baseOpacityModifier
-    }
-  }
-}
-export { ApartmentConfig }

package/src/lib/virtualTour__/config/CameraConfig.js

@@ -1,97 +0,0 @@
-/* eslint-disable */
-import * as THREE from 'three'
-import markerTexture from '../textures/marker.png'
-import { stringToVector3ConvertPositionFromUnity, stringToVector3ConvertRotationFromUnity } from '../CoordConversions'
-
-function stringToVector3(str) {
-  const split = str.split(',', 3)
-  const v = new THREE.Vector3(
-    parseFloat(split[0]),
-    parseFloat(split[1]),
-    parseFloat(split[2])
-  )
-  return v
-}
-
-function stringToVector3ConvertPositionFromBlender(str) {
-  const split = str.split(',', 3)
-  const v = new THREE.Vector3(
-    -parseFloat(split[0]),
-    parseFloat(split[2]),
-    parseFloat(split[1])
-  )
-  return v
-}
-
-class CameraConfig {
-  constructor(
-    cameraID,
-    camera,
-    scene
-  ) {
-    this._cameraID = cameraID //.toUpperCase()
-    this._floor_vertical_position = parseFloat(camera.floor_vertical_position)
-    if (camera.uposition && camera.urotation) {
-      this._position = stringToVector3ConvertPositionFromUnity(
-        camera.uposition
-      )
-      this._rotation = stringToVector3ConvertRotationFromUnity(
-        camera.urotation
-      )
-    } else {
-      this._position = stringToVector3ConvertPositionFromBlender(
-        camera.position
-      )
-      this._rotation = stringToVector3(camera.rotation) // "90.00,180.00,41.59"
-    }
-
-    this._isVisible = true
-
-    const geometry = new THREE.PlaneGeometry(0.35, 0.35, 1, 1)
-    const material = new THREE.MeshBasicMaterial({
-      map: new THREE.TextureLoader().load(markerTexture),
-      transparent: true,
-      opacity: 0.0,
-      color: 0xffffff,
-    })
-
-    this._mesh = new THREE.Mesh(geometry, material)
-    this._mesh.rotation.x = -Math.PI / 2
-    scene.add(this._mesh)
-
-    this._mesh.position.set(
-      this._position.x,
-      this._floor_vertical_position,
-      this._position.z
-    )
-  }
-
-  get cameraID() {
-    return this._cameraID
-  }
-
-  get floor_vertical_position() {
-    return this._floor_vertical_position
-  }
-
-  get position() {
-    return this._position
-  }
-
-  get mesh() {
-    return this._mesh
-  }
-
-  get rotation() {
-    return this._rotation
-  }
-
-  get isVisible() {
-    return this._isVisible
-  }
-
-  set isVisible(v) {
-    this._isVisible = v
-  }
-}
-export { CameraConfig }