@qispace/vue3-player 0.0.11 → 0.0.13

package/src/components/virtualTourV2/Player.vue

@@ -39,18 +39,18 @@
   </div>
 </template>
 <script>
-import { PlayerV2 } from "@qispace/player-core";
-import { isBrowser } from "browser-or-node";
+import { PlayerV2 } from '@qispace/player-core'
+import { isBrowser } from 'browser-or-node'
 
 export default {
-  name: "Player",
+  name: 'Player',
   emits: [
-    "new-camera-callback",
-    "new-rotation-callback",
-    "new-floor-callback",
-    "new-fov-callback",
-    "playerApi-callback",
-    "new-size-callback",
+    'new-camera-callback',
+    'new-rotation-callback',
+    'new-floor-callback',
+    'new-fov-callback',
+    'playerApi-callback',
+    'new-size-callback',
   ],
   props: {
     fileLoader: {
@@ -72,141 +72,141 @@ export default {
       playerFoV: 0,
       playerWidth: 0,
       playerHeight: 0,
-    };
+    }
   },
   watch: {
     async rootUrl(newValue) {
       if (this.playerAPI) {
-        await this.playerAPI.loadInterior(newValue, this.playerCamera, false);
-        this.setPlayerSize();
+        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();
+          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);
+        this.playerCamera = newCameraId
+        this.playerAPI.goToCamera(newCameraId, true)
       }
     },
     playerAPI(playerAPI) {
-      this.$emit("playerApi-callback", playerAPI);
-      const firstCamera = playerAPI.getCurrentCamera();
+      this.$emit('playerApi-callback', playerAPI)
+      const firstCamera = playerAPI.getCurrentCamera()
       if (firstCamera) {
-        this.playerCamera = firstCamera.id;
+        this.playerCamera = firstCamera.id
       }
     },
   },
   async mounted() {
-    window.addEventListener("resize", this.setPlayerSize);
-    this.setPlayerSize();
+    window.addEventListener('resize', this.setPlayerSize)
+    this.setPlayerSize()
 
     const newRotation = (newRotation) => {
-      const rot = newRotation + 0;
+      const rot = newRotation + 0
 
-      this.$emit("new-rotation-callback", rot);
-      this.playerRotation = rot;
-    };
+      this.$emit('new-rotation-callback', rot)
+      this.playerRotation = rot
+    }
 
     const newFOV = (newFov) => {
-      this.$emit("new-fov-callback", newFov);
-      this.playerFoV = 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);
+      this.$emit('new-camera-callback', newCamera.id)
+      this.$emit('new-floor-callback', newCamera.floorLevel)
 
       if (this.playerAPI) {
-        this.playerAPI.resetMarkerBehaviour(0);
+        this.playerAPI.resetMarkerBehaviour(0)
       }
 
-      this.playerCamera = newCamera.id;
-    };
+      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);
+        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;
+    if (!isBrowser) return
 
     const mainScene = await new PlayerV2.Main(
       this.rootUrl,
-      "qpc",
+      'qpc',
       callbacks,
       undefined,
       this.currentCameraId,
       this.fileLoader
-    );
+    )
 
     if (mainScene) {
-      mainScene.handleWindowResize();
+      mainScene.handleWindowResize()
       window.addEventListener(
-        "resize",
+        'resize',
         mainScene.handleWindowResize.bind(mainScene)
-      );
-      mainScene.animate();
+      )
+      mainScene.animate()
 
-      this.playerAPI = PlayerV2.Main.getPlayerAPI();
+      this.playerAPI = PlayerV2.Main.getPlayerAPI()
 
       if (this.playerAPI)
-        this.playerAPI.setLookSensitivity(this.mouseSensitivity);
+        this.playerAPI.setLookSensitivity(this.mouseSensitivity)
     }
   },
   beforeUnmount() {
     if (this.playerAPI) {
-      this.playerAPI.destroy();
+      this.playerAPI.destroy()
     }
   },
   methods: {
     findClosestAncestor(element, className) {
-      let el = element;
-      let returnElement = element;
+      let el = element
+      let returnElement = element
       while ((el = el.parentNode) && el.className.indexOf(className) < 0);
-      returnElement = el;
+      returnElement = el
 
-      return returnElement;
+      return returnElement
     },
     setPlayerSize() {
-      let AR = 16 / 9;
-      let element = document.querySelector("#player-sizer");
-      if (!element) return;
+      let AR = 16 / 9
+      let element = document.querySelector('#player-sizer')
+      if (!element) return
 
-      let width = element.offsetWidth;
-      let height = width * (1 / AR);
+      let width = element.offsetWidth
+      let height = width * (1 / AR)
 
       if (window.innerWidth <= 600 || width <= 600) {
-        height = window.innerHeight * 0.75;
+        height = window.innerHeight * 0.75
 
         if (this.isInIframe) {
-          height = screen.height * 0.65;
+          height = screen.height * 0.65
         }
 
-        width = height * (1 / AR);
+        width = height * (1 / AR)
       }
 
-      element.style.height = height + "px";
-      element.style.width = width + "px";
-      this.$emit("new-size-callback", width, height);
+      element.style.height = height + 'px'
+      element.style.width = width + 'px'
+      this.$emit('new-size-callback', width, height)
     },
   },
-};
+}
 </script>
 <style scoped>
 #player-wrapper {

package/src/components/virtualTourV2/index.ts

@@ -1,17 +1,20 @@
-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 VirtualTourV2 } from './VirtualTourV2.vue'
-export {default as WaypointCarousel } from './WaypointCarousel.vue'
+// // 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/dist/components/virtualTourV2/ManualSlideShow.vue.d.ts

@@ -1,73 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    images: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    websiteUrl: {
-        type: StringConstructor;
-        default: () => undefined;
-    };
-    i18n: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    showFullScreen: {
-        type: BooleanConstructor;
-        default: () => boolean;
-    };
-    showShare: {
-        type: BooleanConstructor;
-        default: () => boolean;
-    };
-    defaultWaypointIndex: {
-        type: NumberConstructor;
-        default: () => number;
-    };
-}, any, {
-    loading: boolean;
-    error: boolean;
-    currentIndex: number;
-    currentImageId: undefined;
-    fullScreen: FullscreenModel;
-}, {
-    imagesWithThumbnails(): any;
-    currentImage(): any;
-}, {
-    toggleFullscreen(): void;
-    nextImage(): void;
-    previousImage(): void;
-    goToImage(imageId: any, updatePlayerImage?: boolean): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    images: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    websiteUrl: {
-        type: StringConstructor;
-        default: () => undefined;
-    };
-    i18n: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    showFullScreen: {
-        type: BooleanConstructor;
-        default: () => boolean;
-    };
-    showShare: {
-        type: BooleanConstructor;
-        default: () => boolean;
-    };
-    defaultWaypointIndex: {
-        type: NumberConstructor;
-        default: () => number;
-    };
-}>>, {
-    i18n: Record<string, any>;
-    websiteUrl: string;
-    showFullScreen: boolean;
-    showShare: boolean;
-    defaultWaypointIndex: number;
-}, {}>;
-export default _default;
-import { FullscreenModel } from '../../lib/virtualTour/FullscreenModel';

package/dist/components/virtualTourV2/ManualSlideShowPlayer.vue.d.ts

@@ -1,15 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    isFullScreen: {
-        type: BooleanConstructor;
-        required: true;
-    };
-}, any, {}, {}, {
-    findClosestAncestor(element: any, className: any): any;
-    setPlayerSize(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    isFullScreen: {
-        type: BooleanConstructor;
-        required: true;
-    };
-}>>, {}, {}>;
-export default _default;

package/dist/components/virtualTourV2/ScrollHelper.vue.d.ts

@@ -1,16 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    scrollTo: {
-        type: StringConstructor;
-        default: () => string;
-    };
-}, any, any, {}, {
-    scroll(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    scrollTo: {
-        type: StringConstructor;
-        default: () => string;
-    };
-}>>, {
-    scrollTo: string;
-}, {}>;
-export default _default;

package/dist/entry.css

@@ -1 +0,0 @@
-@media (hover: hover){.hover-check[data-v-e4729353]{display:none}}#canvas[data-v-3bbbc77b]{position:absolute;top:0;width:100%;-webkit-user-select:none;user-select:none;touch-action:none;padding-top:56.25%}#canvas-mask[data-v-3bbbc77b]{position:absolute;top:0;max-width:100%;z-index:4;-webkit-user-select:none;user-select:none}@media only screen and (min-width: 1280px){#canvas[data-v-3bbbc77b]{border-radius:10px}}#container[data-v-82a61864]{position:absolute;top:0;width:100%;-webkit-user-select:none;user-select:none;touch-action:none;padding-top:56.25%}.svg-container[data-v-82a61864]{transition-property:opacity;transition-duration:.25s;transition-timing-function:ease-in-out}.svg-container[data-v-82a61864],svg[data-v-82a61864]{position:absolute;left:0;top:0;width:100%;height:100%;z-index:10000}svg g[data-v-82a61864] path{cursor:pointer;stroke-width:inherit!important;stroke-opacity:inherit!important;stroke:inherit!important;fill:inherit!important;fill-opacity:inherit!important;transition-property:fill-opacity,fill;transition-duration:.25s;transition-timing-function:ease-in-out}@media only screen and (min-width: 1280px){#canvas[data-v-82a61864]{border-radius:10px}}.v-btn[data-v-129ef905]{background-color:#fff}.frame-container[data-v-e6481f8e]{position:relative;max-width:100%;top:0;left:0;bottom:185px;padding-top:56%;z-index:1;overflow:hidden}.frame-image[data-v-e6481f8e]{position:absolute;top:0;width:100%;height:100%}.frame-image img[data-v-e6481f8e]{min-width:100%;max-width:100%;z-index:0}#image-stack picture[data-v-e6481f8e]{visibility:hidden}#image-stack picture.show[data-v-e6481f8e]{visibility:visible}.fill-parent[data-v-e6481f8e]{position:absolute;top:0;bottom:0;left:0;right:0}.floating-card[data-v-b74de171]{position:absolute;left:0;top:0;z-index:10;display:flex}.is-not-hoverable[data-v-b74de171]{position:relative;width:100%}.top-left[data-v-b74de171]{transform-origin:top left;transform:translate(8px) translateY(8px) scale(.9)}.top-right[data-v-b74de171]{transform-origin:top right;transform:translate(-100%) translate(-8px) translateY(8px) scale(.9)}.bottom-left[data-v-b74de171]{transform-origin:bottom left;transform:translateY(-100%) translate(8px) translateY(-8px) scale(.9)}.bottom-right[data-v-b74de171]{transform-origin:bottom right;transform:translateY(-100%) translate(-100%) translate(-8px) translateY(-8px) scale(.9)}.v-dialog__content[data-v-b74de171]{align-items:flex-start}.zoom-box-container[data-v-83bfd28a]{position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.zoom-box[data-v-83bfd28a]{width:100%;height:100%;-webkit-user-select:none;user-select:none;touch-action:none}.interactive-viewer[data-v-3a1121f3]{padding-top:56.65%;position:relative}.fill-parent[data-v-3a1121f3]{position:absolute;top:0;bottom:0;left:0;right:0}.navigation[data-v-3a1121f3]{position:absolute;width:100%;bottom:32px;z-index:99;padding:0 20px;display:flex;justify-content:center}@media only screen and (max-width: 600px){.navigation[data-v-3a1121f3]{bottom:12px}}.sunsim-time-label[data-v-1fba3edd]{color:#000;vertical-align:top}.sunsim-date[data-v-1fba3edd]{background:#fff;border-radius:30px;min-height:36px;min-width:170px;display:flex;align-content:center;white-space:nowrap}.day-selector[data-v-1fba3edd]{margin-top:0}.day-selector[data-v-1fba3edd] .v-field__outline{display:none}.day-selector[data-v-1fba3edd] .v-field__input{padding-top:2px}.day-selector[data-v-1fba3edd] .v-field__append-inner{padding-top:5px!important}.day-selector.v-text-field[data-v-1fba3edd] .v-input__control>.v-input__slot:before{border-style:none}.day-selector.v-text-field[data-v-1fba3edd] .v-input__control>.v-input__slot:after{border-style:none}.sunsim-slider[data-v-1fba3edd] .v-slider-track__background{background:linear-gradient(270deg,#8183c2,#ffb9b9 20.01%,#b2dfff 40.1%,#b2dfff 59.85%,#ffba96 79.96%,#8183c2)!important}.sunsim-bar-wrapper{display:flex;position:absolute;width:60%;min-width:400px;top:12px;left:0;z-index:3;touch-action:none;pointer-events:none}.sunsim-wrapper{width:100%;background:#fff;border-radius:30px;padding:5px;min-height:16px;z-index:3}.sunsim-bar-wrapper .sunsim-date{margin-right:12px;margin-left:12px}.sunsim-wrapper,.sunsim-date{touch-action:auto;pointer-events:all}.sunsim-wrapper .mdi-white-balance-sunny{color:#ffab02;vertical-align:baseline;font-size:20px}@media only screen and (max-width: 980px) and (min-width: 500px){.sunsim-bar-wrapper{top:101%;width:100%}.sunsim-bar-wrapper .sunsim-date{margin-left:0}}@media only screen and (max-width: 980px) and (min-width: 500px) and (orientation: landscape){.sunsim-bar-wrapper{top:calc(100% + 8px);width:100%}.sunsim-bar-wrapper .sunsim-date{margin-left:0}.sunsim-bar-wrapper .sunsim-date,.sunsim-bar-wrapper .sunsim-wrapper{box-shadow:0 0 7px 1px #aaa}}@media only screen and (max-width: 500px){.sunsim-bar-wrapper{height:calc(100% + 84px);top:0;width:100%;flex-direction:column;justify-content:space-between;margin:-42px 0 0;padding:0;left:0;z-index:0;min-width:100%}.sunsim-bar-wrapper .sunsim-date{margin-right:0;margin-left:0}.sunsim-bar-wrapper .sunsim-date,.sunsim-bar-wrapper .sunsim-wrapper{width:100%;border-radius:0;left:0;margin-left:0!important;box-shadow:0 0 7px 1px #aaa}}.image-instance[data-v-fad48118]{position:absolute;width:100%;opacity:0}.image-instance.active[data-v-fad48118]{opacity:1}.north-indicator[data-v-0a2cec1f]{position:absolute;right:0;top:0;height:42px;width:42px;margin-top:12px;margin-right:8px}.image-container[data-v-0a2cec1f]{position:relative}.image-instances[data-v-0a2cec1f]{position:relative;width:100%;height:100%}canvas[data-v-0a2cec1f]{position:absolute;left:0;top:0;z-index:2;opacity:0}.fill-parent[data-v-0a2cec1f]{position:absolute;top:0;bottom:0;left:0;right:0}.svg-container[data-v-0a2cec1f]{transition-property:opacity;transition-duration:.25s;transition-timing-function:ease-in-out}.svg-container[data-v-0a2cec1f],svg[data-v-0a2cec1f]{position:absolute;left:0;top:0;width:100%;height:100%;z-index:10000}svg g[data-v-0a2cec1f] path{cursor:pointer;stroke-width:inherit!important;stroke-opacity:inherit!important;stroke:inherit!important;fill:inherit!important;fill-opacity:inherit!important;transition-property:fill-opacity,fill;transition-duration:.25s;transition-timing-function:ease-in-out}svg g.restricted[data-v-0a2cec1f] path{cursor:default!important}@media only screen and (max-width: 980px) and (min-width: 500px) and (orientation: landscape){div.image-container[data-v-0a2cec1f]{margin-top:44px}}@media only screen and (max-width: 500px){div.image-container[data-v-0a2cec1f]{margin-top:44px;margin-bottom:44px}}.overlay[data-v-9a90fa2f]{z-index:1!important;opacity:1;transition-property:opacity;transition-duration:.25s;transition-timing-function:ease-in-out}.north-indicator[data-v-08f2ea1e]{position:absolute;right:0;top:0;height:42px;width:42px;margin-top:12px;margin-right:8px}.image-container[data-v-08f2ea1e]{position:relative}.image-instances[data-v-08f2ea1e]{position:relative;width:100%;height:100%}canvas[data-v-08f2ea1e]{position:absolute;left:0;top:0;z-index:2;opacity:0}.fill-parent[data-v-08f2ea1e]{position:absolute;top:0;bottom:0;left:0;right:0}@media only screen and (max-width: 980px) and (min-width: 500px) and (orientation: landscape){div.image-container[data-v-08f2ea1e]{margin-top:44px}}@media only screen and (max-width: 500px){div.image-container[data-v-08f2ea1e]{margin-top:44px;margin-bottom:44px}}.compass-needle{transition:transform .5s;transition-timing-function:ease-out}.disclaimer[data-v-6e4f02d6]{padding:4px 10px;text-align:center;background-color:#00000040;border-radius:5px;line-height:20px}.disclaimer span[data-v-6e4f02d6]{cursor:pointer;color:#fff;text-decoration:underline;pointer-events:all}.btn-placeholder[data-v-56a279a7]{width:36px;height:36px}.v-btn[data-v-56a279a7]{background-color:#fff;pointer-events:all;cursor:auto}.floor-level-label[data-v-56a279a7]{text-transform:capitalize}.v-image[data-v-fe12068f]{background-color:#aaa}.interior-selector-list[data-v-fe12068f]{box-shadow:none!important;padding:10px;background:transparent!important}.interior-selector-list-item[data-v-fe12068f]{padding:0;padding-inline-start:0!important;background-color:#fff;border:2px solid #fff;transition:transform .2s cubic-bezier(.17,.67,.83,.67);margin-top:10px}.interior-selector-list-item[data-v-fe12068f]:hover{transform:translate(-5px);border:2px solid #4caf50}.interior-selector-list-item .v-list-item-title[data-v-fe12068f]{word-break:break-word}.v-card[data-v-f4e6ce2e]{transition:box-shadow .3s ease-in-out;border:2px solid transparent}[data-v-f4e6ce2e] .v-slide-group__content{justify-content:center}[data-v-f4e6ce2e] .v-slide-group__next--disabled,[data-v-f4e6ce2e] .v-slide-group__prev--disabled{pointer-events:all!important}.carousel-button[data-v-f4e6ce2e]{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[data-v-f4e6ce2e]{height:58px!important;min-width:38px!important}.carousel-button[data-v-f4e6ce2e]:hover{border:2px solid #999!important;color:#999!important}.carousel-button[data-v-f4e6ce2e]:hover:before,.carousel-button[data-v-f4e6ce2e]:hover:after{background-color:#fff!important}.align-baseline[data-v-f4e6ce2e]{align-items:baseline}.active-apt[data-v-f4e6ce2e]{border:4px solid #4caf50!important}.v-image[data-v-f4e6ce2e]{border-radius:0!important}#share-btns-wrapper button[data-v-3560cd03]{margin:0 8px}.v-btn[data-v-3560cd03]{background-color:#fff;pointer-events:all}#player-wrapper[data-v-1dab1ac3]{position:relative;overflow:hidden}#player-sizer[data-v-1dab1ac3]{display:flex;justify-content:center;align-items:center;overflow:hidden}.player-control[data-v-1dab1ac3]{display:flex;position:absolute;z-index:3}#controls-top-left[data-v-1dab1ac3]{top:10px;left:10px}#controls-top-center[data-v-1dab1ac3]{top:10px;left:50%;transform:translate(-50%);z-index:4}#controls-top-right[data-v-1dab1ac3]{top:10px;right:10px;justify-content:flex-end;align-content:flex-end}#controls-center-left[data-v-1dab1ac3]{left:10px;top:50%;transform:translateY(-50%)}#controls-center-center[data-v-1dab1ac3]{top:50%;left:50%;transform:translate(-50%,-50%);align-items:center;justify-content:space-around;z-index:20}#controls-center-right[data-v-1dab1ac3]{top:50%;right:10px;transform:translateY(-50%);justify-content:flex-end;align-items:center}#controls-bottom-left[data-v-1dab1ac3]{bottom:10px;left:10px;z-index:5}#controls-bottom-center[data-v-1dab1ac3]{bottom:10px;left:50%;transform:translate(-50%);align-items:flex-end;justify-content:space-around;z-index:4}#controls-bottom-right[data-v-1dab1ac3]{bottom:10px;right:10px;justify-content:flex-end;align-content:flex-end;align-items:flex-end;z-index:5}.img-div[data-v-b418cf51]{position:absolute;display:block;height:100%;width:100%;background-size:cover;background-position:center center;z-index:2;left:0;top:0}.static-image-wrapper[data-v-b418cf51]{background:#fff}.compass-wrapper[data-v-e2117d1e]{width:50px}.player-and-components-wrapper[data-v-e2117d1e]{position:relative}.static-image[data-v-e2117d1e]{position:absolute;top:0;left:0;width:100%;height:auto}button.v-btn[data-v-e2117d1e]{background:#fff}.waypoint-carousel.full-screen[data-v-e2117d1e]{scale:.5}div#controls-bottom-center>div[data-v-e2117d1e]{display:flex;flex-direction:column;align-items:center}.player-error[data-v-e2117d1e]{min-height:400px;display:flex;align-items:center;justify-content:space-around;background:#ededed}@media only screen and (max-width: 600px){#btn-fullscreen[data-v-e2117d1e]{display:none}}@media all and (orientation: landscape) and (max-height: 499px){#btn-fullscreen[data-v-e2117d1e]{display:none}}#player-wrapper[data-v-d61b0474]{position:relative;overflow:hidden}#player-sizer[data-v-d61b0474]{display:flex;justify-content:center;align-items:center;overflow:hidden}div#main-canvas[data-v-d61b0474]{top:50%;left:50%;position:absolute;transform:translate(-50%,-50%)}.player-control[data-v-d61b0474]{display:flex;position:absolute;z-index:3}#controls-top-left[data-v-d61b0474]{top:10px;left:10px}#controls-top-center[data-v-d61b0474]{top:10px;left:50%;transform:translate(-50%);z-index:4;flex-direction:column}#controls-top-right[data-v-d61b0474]{top:10px;right:10px;justify-content:flex-end;align-content:flex-end}#controls-center-left[data-v-d61b0474]{left:10px;top:50%;transform:translateY(-50%)}#controls-center-center[data-v-d61b0474]{top:50%;left:50%;transform:translate(-50%,-50%);align-items:center;justify-content:space-around;z-index:20}#controls-center-right[data-v-d61b0474]{top:50%;right:10px;transform:translateY(-50%);justify-content:flex-end;align-items:center}#controls-bottom-left[data-v-d61b0474]{bottom:10px;left:10px;z-index:5}#controls-bottom-center[data-v-d61b0474]{bottom:10px;left:50%;transform:translate(-50%);align-items:flex-end;justify-content:space-around;z-index:4}#controls-bottom-right[data-v-d61b0474]{bottom:10px;right:10px;justify-content:flex-end;align-content:flex-end;align-items:flex-end;z-index:5}span#moving-arrow[data-v-68e88af1]{display:block;animation-name:tween-68e88af1;animation-duration:1s;animation-iteration-count:infinite;background-image:url('data:image/svg+xml,<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2370757a" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>');display:inline-block;height:24px;width:24px}@keyframes tween-68e88af1{0%{background-position:0px 0px}to{background-position:0px 4px}}.scroll-helper-wrapper[data-v-68e88af1]{padding:10px;display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#fff;background:#000;background:linear-gradient(180deg,#0000 10%,#000 50%,#0000);text-align:center;visibility:hidden;position:fixed;bottom:0;right:0}@media only screen and (max-width: 600px){.scroll-helper-wrapper[data-v-68e88af1]{visibility:visible}}.settings-panel[data-v-c04f3195]{min-width:500px;height:500px;overflow-y:scroll}form#settings-ui-form[data-v-c04f3195]{background:#fff9;border-radius:5px;padding:10px}#settings-ui-form .form-inputs[data-v-c04f3195]{height:60vh;overflow-y:scroll;padding-bottom:50px;scrollbar-color:#0c0e4a transparent;scrollbar-width:thin;padding-right:20px}.clock-face[data-v-e440b0c9]{margin-left:10px;height:50px;width:50px;background-color:#fff;border-radius:50%}.clock-value[data-v-e440b0c9]{font-size:11px}.clock-icon[data-v-e440b0c9]{width:18px}.tutorial[data-v-d87b088a]{color:#000;padding:10px;text-align:center;background-color:#fff;border-radius:5px;line-height:20px}.tutorial-icon[data-v-d87b088a]{border:1.5px solid #e0e0e0;border-radius:5px;width:140px;height:75px}.text[data-v-d87b088a]{font-size:.8em;line-height:1}.box.col[data-v-d87b088a]{max-width:180px!important}.tablet-mobile-content[data-v-d87b088a]{min-width:240px}.box.horizontal[data-v-d87b088a]{display:flex;align-items:center}.tablet-mobile-content .tutorial-icon[data-v-d87b088a]{width:100px;height:65px}.tablet-mobile-content .text[data-v-d87b088a]{text-align:left}.tutorial-buttons .v-messages{display:none!important}.stop1{stop-color:#fff}.stop2{stop-color:#fff;stop-opacity:0}.stop3{stop-color:transparent}.minimap-container[data-v-341837d7]{position:relative}.web-minimap[data-v-341837d7]{position:relative;width:512px;height:385px;overflow:hidden;transition:transform .5s ease-in}@media (max-width: 650px){.web-minimap[data-v-341837d7]{scale:.7}}@media (max-width: 480px){.web-minimap[data-v-341837d7]{scale:.5}}.minimap-background-image[data-v-341837d7]{position:absolute;width:100%;height:100%}.single-camera-marker[data-v-341837d7]{position:absolute;width:7px;height:7px;background:#fff;border-radius:50%;z-index:2;transform:translate(-50%,-50%);border:0px}.rotation-marker-component[data-v-341837d7]{z-index:3;position:absolute;width:80px;height:80px;transform:translate(-50%,-50%)}.center-pivot[data-v-341837d7]{position:absolute;width:100%;height:100%}#moveableDiv[data-v-243baf73]{position:fixed;z-index:15;background-color:#fff;border:1px solid #d3d3d3}#moveableDivheader[data-v-243baf73]{cursor:move;z-index:10}.big[data-v-243baf73]{width:512px;height:440px;top:50%;left:50%;transform:translate(-50%,-50%)}.small[data-v-243baf73]{width:250px;height:300px;bottom:10px;right:10px;transform:translate(0)}.sizer[data-v-243baf73]{overflow:hidden;min-width:250px;min-height:300px;max-width:700px;max-height:531px}.resize-icon[data-v-243baf73]{position:absolute;top:5px;right:5px;z-index:11}.rotate-icon[data-v-243baf73]{position:absolute;top:5px;right:45px;z-index:12}.close-icon[data-v-243baf73]{position:absolute;top:5px;left:5px;z-index:11}.moveable-body[data-v-243baf73]{z-index:1}.moveable-footer[data-v-243baf73]{width:100%;height:50px;margin-bottom:10px;background:#fff;z-index:2}.filler-div[data-v-243baf73]{display:none}@media only screen and (max-width: 600px){.sizer[data-v-243baf73]{overflow:hidden;max-width:90%;max-height:80vh}}.minimap-compass[data-v-01730a31]{width:50px}.ss-wrapper[data-v-86183299]{display:flex;flex-direction:row;justify-content:space-between;margin:0 10px;position:relative;z-index:100}.sun-icon[data-v-86183299]{width:10%}.slider[data-v-86183299]{display:flex;flex-direction:column;flex:1 1 auto;padding:3px 0}i.v-icon.notranslate.mdi.mdi-white-balance-sunny.theme--light[data-v-86183299]{font-size:40px;color:#ffab02;padding:5px}.time-label[data-v-86183299]{padding:0;display:inline-block;margin-top:-10px;margin-left:50px}.minimap-compass[data-v-547d8112]{position:absolute;right:5px;top:50px;z-index:11}.compass-wrapper[data-v-5e036d71]{width:50px}.player-and-components-wrapper[data-v-5e036d71]{position:relative}.static-image[data-v-5e036d71]{position:absolute;top:0;left:0;width:100%;height:auto}button.v-btn[data-v-5e036d71]{background:#fff}.waypoint-carousel.full-screen[data-v-5e036d71]{scale:.5}div#controls-bottom-center>div[data-v-5e036d71]{display:flex;flex-direction:column;align-items:center}.player-error[data-v-5e036d71]{min-height:400px;display:flex;align-items:center;justify-content:space-around;background:#ededed}@media only screen and (max-width: 600px){#btn-fullscreen[data-v-5e036d71]{display:none}}@media all and (orientation: landscape) and (max-height: 499px){#btn-fullscreen[data-v-5e036d71]{display:none}}.settings-panel[data-v-5e036d71]{position:absolute;top:0;left:0;z-index:10;width:500px;transform:scale(.8);transform-origin:left}