@qispace/vue3-player 0.0.10 → 0.0.13

package/src/components/virtualTourV2/{PlayerV2.vue → 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: "PlayerV2",
+  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/VirtualTourV2.vue

@@ -22,7 +22,7 @@
         @set-background-image="setMinimapBackgroundImage"
       />
       <div v-if="interiorId && currentCameraId">
-        <player-v-2
+        <player
           ref="player"
           :file-loader="fileLoader"
           :style="{ zIndex: showStaticImage ? 1 : 2 }"
@@ -195,7 +195,7 @@
               @select-interior="updateSelectedInterior"
             />
           </template>
-        </player-v-2>
+        </player>
 
         <waypoint-carousel
           v-if="showCarousel && thumbsJSON"
@@ -210,9 +210,8 @@
   </div>
 </template>
 <script>
-import { defineComponent, ref } from "vue";
 import axios from "axios";
-import PlayerV2 from "./PlayerV2.vue";
+import Player from "./Player.vue";
 import WaypointCarousel from "./WaypointCarousel.vue";
 import FloorLevel from "./FloorLevel.vue";
 import SocialShare from "./SocialShare.vue";
@@ -241,7 +240,7 @@ const DEFAULT_PLAYER_SETTINGS = {
   whitePoint: [1, 1, 1],
 };
 
-export default defineComponent({
+export default {
   name: "VirtualTourV2",
   emits: [
     "on-snapshot",
@@ -250,7 +249,7 @@ export default defineComponent({
     "on-camera-update",
   ],
   components: {
-    PlayerV2,
+    Player,
     WaypointCarousel,
     InteriorSelector,
     Compass,
@@ -791,7 +790,7 @@ export default defineComponent({
       this.$emit("save-settings", settings);
     },
   },
-});
+};
 
 function parseTimeOfDay(floatValue) {
   if (floatValue === undefined) return null;

package/src/components/virtualTourV2/index.ts

@@ -0,0 +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 WaypointCarousel } from './WaypointCarousel.vue'
+
+export { default as VirtualTourV2 } from './VirtualTourV2.vue'
+// export {default as ManualSlideShow } from './ManualSlideShow.vue'

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

@@ -28,15 +28,15 @@
   </moveable>
 </template>
 <script>
-import MiniMapMap from './MiniMapMap.vue'
-import Moveable from './Moveable.vue'
-import MinimapCompass from './MinimapCompass.vue'
-import SunsimulationSlider from './SunsimulationSlider.vue'
+import MiniMapMap from "./MiniMapMap.vue";
+import Moveable from "./Moveable.vue";
+import MinimapCompass from "./MinimapCompass.vue";
+import SunsimulationSlider from "./SunsimulationSlider.vue";
 
 export default {
   components: { MiniMapMap, Moveable, MinimapCompass, SunsimulationSlider },
-  name: 'MiniMapV2',
-  emits: ['close', 'set-background-image'],
+  name: "MiniMapV2",
+  emits: ["close", "set-background-image"],
   props: {
     minimapJSON: {
       type: Array,
@@ -74,31 +74,31 @@ export default {
   data() {
     return {
       transformAngle: 0,
-    }
+    };
   },
   computed: {
     scale() {
-      let scale = 1
+      let scale = 1;
       if (this.transformAngle !== 0) {
         if (Math.abs(this.transformAngle) % 180 === 0) {
-          scale = 1
+          scale = 1;
         } else {
-          scale = -1
+          scale = -1;
         }
       }
 
-      return scale
+      return scale;
     },
   },
   methods: {
     setBackgroundImage(image) {
-      this.$emit('set-background-image', image)
+      this.$emit("set-background-image", image);
     },
     transform() {
-      this.transformAngle = this.transformAngle + 90
+      this.transformAngle = this.transformAngle + 90;
     },
   },
-}
+};
 </script>
 <style scoped>
 .minimap-compass {

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

@@ -0,0 +1 @@
+export { default as MiniMapV2 } from './MiniMapV2.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/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}}.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}.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}#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}}