@qispace/vue3-player 0.0.5

package/src/lib/virtualTour__/CameraNavigator.js_

@@ -0,0 +1,74 @@
+import Vue from 'vue'
+
+export class CameraNavigator {
+  constructor() {
+    this._state = Vue.observable({
+      waypoints: [],
+      selectedWaypointIndex: null,
+      selectedCameraId: null,
+    })
+  }
+
+  initialize(waypoints, cameraId, selectedWaypointIndex = 0) {
+    this._state.waypoints = waypoints
+    this.selectedWaypointIndex = selectedWaypointIndex % waypoints.length
+    if (!this._state.selectedCameraId) this._state.selectedCameraId = cameraId
+  }
+
+  selectNextWaypoint() {
+    if (this.selectedWaypointIndex === this.waypointCount - 1) {
+      this.selectedWaypointIndex = 0
+    } else {
+      this.selectedWaypointIndex += 1
+    }
+  }
+
+  selectPrevWaypoint() {
+    if (this.selectedWaypointIndex === 0) {
+      this.selectedWaypointIndex = this.waypointCount - 1
+    } else {
+      this.selectedWaypointIndex -= 1
+    }
+  }
+
+  get waypointCount() {
+    return this._state.waypoints.length
+  }
+
+  get waypoints() {
+    return this._state.waypoints
+  }
+
+  get selectedWaypointIndex() {
+    return this._state.selectedWaypointIndex
+  }
+
+  set selectedWaypointIndex(value) {
+    this._state.selectedWaypointIndex = value
+    if (this.selectedWaypoint) {
+      this._state.selectedCameraId = this.selectedWaypoint.id
+    }
+  }
+
+  get selectedWaypoint() {
+    return this._state.waypoints[this._state.selectedWaypointIndex]
+  }
+
+  get selectedCameraId() {
+    return this._state.selectedCameraId
+  }
+
+  set selectedCameraId(value) {
+    this._state.selectedCameraId = value
+    const waypointIndex = this._waypointIndexById(value)
+    if (waypointIndex > -1) {
+      this._state.selectedWaypointIndex = waypointIndex
+    }
+  }
+
+  _waypointIndexById(cameraId) {
+    return this._state.waypoints.findIndex(
+      (cam) => cam.id.toUpperCase() === cameraId.toUpperCase()
+    )
+  }
+}

package/src/lib/virtualTour__/CameraSnapshot.js

@@ -0,0 +1,42 @@
+function padded(num) {
+  return ('0' + num).slice(-2)
+}
+
+// Makes a string in the format of YYYYMMDD HHMMSS
+function makeTimestampString() {
+  const now = new Date()
+  return [
+    now.getFullYear().toString(),
+    padded(now.getMonth() + 1),
+    padded(now.getDate()),
+    ' ',
+    padded(now.getHours()),
+    padded(now.getMinutes()),
+    padded(now.getSeconds()),
+  ].join('')
+}
+
+function makeDefaultFilename() {
+  return 'Visuado-Snapshot-' + makeTimestampString()
+}
+
+export class CameraSnapshot {
+  constructor(data, cameraParams) {
+    this.data = data
+    this.cameraParams = cameraParams
+  }
+
+  download(filename = null) {
+    filename = filename || makeDefaultFilename()
+    const link = document.createElement('a')
+    if (typeof link.download === 'string') {
+      document.body.appendChild(link) //Firefox requires the link to be in the body
+      link.download = filename
+      link.href = this.data
+      link.click()
+      document.body.removeChild(link)
+    } else {
+      location.replace(uri)
+    }
+  }
+}

package/src/lib/virtualTour__/CoordConversions.js

@@ -0,0 +1,43 @@
+import * as THREE from 'three'
+
+function parseVectorString(str) {
+  return str.split(',', 3).map((c) => parseFloat(c))
+}
+
+export function clampAngle(angle) {
+  while (angle < -360) angle += 360
+  return angle % 360
+}
+
+export function toVector3([x, y, z]) {
+  return new THREE.Vector3(x, y, z)
+}
+
+export function positionFromUnity([x, y, z]) {
+  return [x, y, -z]
+}
+
+export function positionToUnity([x, y, z]) {
+  return [x, y, -z]
+}
+
+export function rotationFromUnity([rotX, rotY, rotZ]) {
+  if (rotX > 180) rotX = rotX - 360
+  return [-rotX, clampAngle(rotY + 270), rotZ]
+}
+
+export function rotationToUnity([rotX, rotY, rotZ]) {
+  rotX = -rotX
+  if (rotX < 0) rotX += 360
+  rotY = rotY - 270
+  if (rotY < 0) rotY += 360
+  return [rotX, rotY, rotZ]
+}
+
+export function stringToVector3ConvertPositionFromUnity(str) {
+  return toVector3(positionFromUnity(parseVectorString(str)))
+}
+
+export function stringToVector3ConvertRotationFromUnity(str) {
+  return toVector3(rotationFromUnity(parseVectorString(str)))
+}

package/src/lib/virtualTour__/FullscreenModel.js

@@ -0,0 +1,69 @@
+export class FullscreenModel {
+  constructor(document, elemId) {
+    this._doc = document
+    this._elemId = elemId
+    this._state = { isActive: false }
+  }
+
+  get isActive() {
+    return this._state.isActive
+  }
+
+  setup() {
+    const events = [
+      'fullscreenchange',
+      'webkitfullscreenchange',
+      'mozfullscreenchange',
+      'msfullscreenchange',
+    ]
+    const element = this._getElement()
+    events.forEach((event) => {
+      element.addEventListener(event, this._toggle.bind(this), false)
+    })
+  }
+
+  toggle() {
+    if (this.isActive) this._exit()
+    else this._enter()
+  }
+
+  _enter() {
+    
+    const elem = this._getElement()
+    const method =
+      elem.requestFullscreen ||
+      elem.webkitRequestFullscreen ||
+      elem.mozRequestFullscreen ||
+      elem.msRequestFullscreen
+
+    if (method) {
+      method.apply(elem)
+    }
+    
+  }
+
+  _exit() {
+    const method =
+      this._doc.exitFullscreen ||
+      this._doc.webkitExitFullscreen ||
+      this._doc.mozExitFullscreen ||
+      this._doc.document.msExitFullscreen
+    if (method) {
+      method.apply(document)
+    }
+  }
+
+  _getElement() {
+    return this._doc.getElementById(this._elemId)
+  }
+
+  _toggle() {
+    const activeState = !!(
+      this._doc.fullscreenElement ||
+      this._doc.webkitFullscreenElement ||
+      this._doc.mozFullscreenElement ||
+      this._doc.msFullscreenElement
+    )
+    this._state.isActive = activeState
+  }
+}

package/src/lib/virtualTour__/MinimapConfig.ts

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

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