@qispace/vue3-player 0.0.5

package/src/components/virtualTourV2/VirtualTourV2.vue

@@ -0,0 +1,876 @@
+<template>
+  <div class="virtual-tour-v2-wrapper">
+    <div v-if="error" class="player-error">Error loading the player!!</div>
+    <div class="player-and-components-wrapper">
+      <mini-map-v-2
+        v-if="
+          !fullScreen.isActive &&
+          minimapJSON &&
+          playerCamera &&
+          minimapCamera &&
+          displayMinimap
+        "
+        :allCameras="allCameras"
+        :rootUrl="rootUrl"
+        :level="storey"
+        :backgroundImage="refinedMinimapBackgroundImage"
+        :minimapJSON="minimapJSON.storeys"
+        :rotation="rotation"
+        :currentCamera="playerCamera"
+        :minimapCamera="minimapCamera"
+        @close="displayMinimap = false"
+        @set-background-image="setMinimapBackgroundImage"
+      />
+      <div v-if="interiorId && currentCameraId">
+        <player-v-2
+          ref="player"
+          :file-loader="fileLoader"
+          :style="{ zIndex: showStaticImage ? 1 : 2 }"
+          :showStaticImage="showStaticImage"
+          :isFullScreen="fullScreen.isActive"
+          :rootUrl="rootUrl"
+          :currentCameraId="currentCameraId"
+          :mouse-sensitivity="mouseSensitivity"
+          :is-in-iframe="isInIframe"
+          @new-camera-callback="newCameraCallback"
+          @new-rotation-callback="newRotationCallback"
+          @new-floor-callback="newfloorCallback"
+          @new-fov-callback="newFoVCallback"
+          @new-size-callback="newSizeCallback"
+          @playerApi-callback="playerApiCallback"
+        >
+          <template v-slot:slideshow-image>
+            <single-image v-if="showStaticImage" :image="staticImage" />
+          </template>
+          <template v-slot:top-left>
+            <v-btn
+              v-show="showUI"
+              v-if="adminMode"
+              density="comfortable"
+              icon="mdi-cog-outline"
+              elevation="3"
+              class="mr-2"
+              @click="showSettings = !showSettings"
+            >
+            </v-btn>
+            <v-btn
+              v-if="minimapJSON && currentCameraId && minimapCamera"
+              v-show="showUI"
+              density="comfortable"
+              elevation="3"
+              icon="mdi-floor-plan"
+              class="mr-2"
+              @click="displayMinimap = !displayMinimap"
+            >
+            </v-btn>
+
+            <floor-level
+              v-if="showUI && showFloorLevel && floorLevels.length > 1"
+              :level="floorLevel"
+              :floor-levels="floorLevels"
+            />
+
+            <div
+              v-if="showUI && adminMode && showSettings"
+              class="settings-panel"
+            >
+              <settings-u-i
+                :project-slug="projectSlug"
+                :initialSettings="playerSettings"
+                @update-settings="updateSetting"
+                @save-settings="saveSettings"
+              />
+            </div>
+          </template>
+          <template v-slot:top-center>
+            <disclaimer v-if="showUI" :return-url="websiteUrl" />
+          </template>
+          <template v-slot:top-right>
+            <div
+              v-if="apartmentJSON && showCompass"
+              v-show="showUI"
+              class="compass-wrapper"
+            >
+              <compass :rotation="rotation" />
+            </div>
+
+            <time-of-day
+              v-if="showUI && apartmentJSON && hasTimeofDay && showTimeOfDay"
+              :hours="timeOfDay.hours"
+              :minutes="timeOfDay.minutes"
+            />
+          </template>
+          <template v-slot:center-left>
+            <transition name="slide-x-transition">
+              <v-btn
+                v-if="showStaticImage"
+                density="comfortable"
+                elevation="3"
+                icon="mdi-chevron-left"
+                @click="previousCamera"
+              >
+              </v-btn>
+            </transition>
+          </template>
+          <template v-slot:center-center>
+            <tutorial :project="projectRoot" @closeTutorial="showUI = true" />
+            <mini-map-v-2
+              v-if="
+                fullScreen.isActive &&
+                minimapJSON &&
+                playerCamera &&
+                minimapCamera &&
+                displayMinimap
+              "
+              :allCameras="allCameras"
+              :rootUrl="rootUrl"
+              :minimapJSON="minimapJSON.storeys"
+              :backgroundImage="refinedMinimapBackgroundImage"
+              :rotation="rotation"
+              :currentCamera="playerCamera"
+              :minimapCamera="minimapCamera"
+              :level="storey"
+              @close="displayMinimap = false"
+              @set-background-image="setMinimapBackgroundImage"
+            />
+          </template>
+          <template v-slot:center-right>
+            <transition name="slide-x-reverse-transition">
+              <v-btn
+                v-if="showStaticImage"
+                density="comfortable"
+                elevation="3"
+                icon="mdi-chevron-right"
+                @click="nextCamera"
+              >
+              </v-btn>
+            </transition>
+          </template>
+          <template v-slot:bottom-left>
+            <full-screen-button
+              v-if="showUI && showFullScreen"
+              :isFullScreen="fullScreen.isActive"
+              class="btn-fullscreen"
+              @toggle-fullscreen="toggleFullscreen"
+            />
+            <div v-if="showUI && showSnapshot" class="btn-placeholder mr-2">
+              <v-btn
+                density="comfortable"
+                elevation="3"
+                icon="mdi-camera"
+                @click="takeSnapshot"
+              >
+              </v-btn>
+            </div>
+            <div
+              v-if="showUI && showShare && !fullScreen.isActive"
+              class="btn-placeholder"
+            >
+              <social-share />
+            </div>
+          </template>
+          <template v-slot:bottom-center>
+            <div v-if="showUI && showCarousel">
+              <view-mode-toggle
+                v-if="displayViewModeSwitch"
+                :show-static-image="showStaticImage"
+                @toggle="toggleViewMode"
+              />
+              <waypoint-carousel
+                v-if="showUI && fullScreen.isActive"
+                :class="[fullScreen.isActive ? 'full-screen' : '']"
+                :thumbnails="thumbnails"
+                :active="currentThumbnailIndex"
+                @next="nextCamera"
+                @previous="previousCamera"
+                @goto="goToCamera"
+              />
+            </div>
+          </template>
+          <template v-slot:bottom-right>
+            <interior-selector
+              v-if="showUI && showInteriorOptions && interiorsWithImage"
+              :availableArchetypes="interiorsWithImage"
+              :selectedIndex="selectedInteriorIndex"
+              @select-interior="updateSelectedInterior"
+            />
+          </template>
+        </player-v-2>
+
+        <waypoint-carousel
+          v-if="showCarousel && thumbsJSON"
+          :thumbnails="thumbnails"
+          :active="currentThumbnailIndex"
+          @next="nextCamera"
+          @previous="previousCamera"
+          @goto="goToCamera"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+import axios from "axios";
+import PlayerV2 from "./PlayerV2.vue";
+import WaypointCarousel from "./WaypointCarousel.vue";
+import FloorLevel from "./FloorLevel.vue";
+import SocialShare from "./SocialShare.vue";
+import InteriorSelector from "./InteriorSelector.vue";
+import { I18N } from "@/lib/shared/I18N";
+import Compass from "./Compass.vue";
+import SingleImage from "./SingleImage.vue";
+import TimeOfDay from "./TimeOfDay.vue";
+import { FullscreenModel } from "@/lib/virtualTour/FullscreenModel";
+import { CameraSnapshot } from "@/lib/virtualTour/CameraSnapshot";
+import FullScreenButton from "./FullScreenButton.vue";
+import ViewModeToggle from "./ViewModeToggle.vue";
+import Disclaimer from "./Disclaimer.vue";
+import Tutorial from "./Tutorial.vue";
+import SettingsUI from "./SettingsUI.vue";
+import MiniMapV2 from "./minimapv2/MiniMapV2.vue";
+
+const DEFAULT_PLAYER_SETTINGS = {
+  temperature: 6500,
+  targetLuminance: 1,
+  exposureFovScale: 0.3,
+  UNREAL_BLOOM_ENABLED: true,
+  sharpenFilter_amount: 0.6,
+  UNREAL_BLOOOM_STRENGTH: 0.3,
+  TRANSITION_MOVEMENT_SCALE: 1.3,
+  whitePoint: [1, 1, 1],
+};
+
+export default defineComponent({
+  name: "VirtualTourV2",
+  emits: [
+    "on-snapshot",
+    "save-settings",
+    "on-interior-update",
+    "on-camera-update",
+  ],
+  components: {
+    PlayerV2,
+    WaypointCarousel,
+    InteriorSelector,
+    Compass,
+    SingleImage,
+    TimeOfDay,
+    FloorLevel,
+    SocialShare,
+    FullScreenButton,
+    ViewModeToggle,
+    MiniMapV2,
+    Disclaimer,
+    Tutorial,
+    SettingsUI,
+  },
+  props: {
+    fileLoader: {
+      type: Object,
+      default: undefined,
+    },
+    cdnRoot: {
+      type: String,
+      required: true,
+    },
+    projectSlug: {
+      type: String,
+      required: true,
+    },
+    apartmentId: {
+      type: String,
+      required: true,
+    },
+    defaultInteriorId: {
+      type: String,
+      default: () => undefined,
+    },
+    validInteriorIds: { type: Array, default: () => [] },
+    viewModes: { type: Array, default: () => ["virtualTour", "slideShow"] },
+    displayViewModeSwitch: { type: Boolean, default: () => true },
+    websiteUrl: { type: String, default: () => undefined },
+    i18n: { type: Object, default: undefined },
+    showCarousel: { type: Boolean, default: () => true },
+    showTimeOfDay: { type: Boolean, default: () => true },
+    showCompass: { type: Boolean, default: () => true },
+    showFullScreen: { type: Boolean, default: () => true },
+    showSnapshot: { type: Boolean, default: () => true },
+    showShare: { type: Boolean, default: () => true },
+    showInteriorOptions: { type: Boolean, default: () => true },
+    showMiniMap: { type: Boolean, default: () => true },
+    showFloorLevel: { type: Boolean, default: () => true },
+    defaultWaypointIndex: { type: Number, default: () => 0 },
+    defaultViewMode: { type: String, default: () => "virtualTour" },
+    mouseSensitivity: { type: Number, default: () => 1 },
+    isInIframe: { type: Boolean, default: () => false },
+    adminMode: { type: Boolean, default: () => false },
+    playerSettings: {
+      type: Object,
+      default: () => {
+        return DEFAULT_PLAYER_SETTINGS;
+      },
+    },
+  },
+  data() {
+    return {
+      showSettings: false,
+      loading: true,
+      error: false,
+      configJSON: undefined,
+      apartmentJSON: undefined,
+      thumbsJSON: undefined,
+      minimapJSON: undefined,
+      playerApi: undefined,
+      currentThumbnailIndex: 0,
+      selectedInteriorId: undefined,
+      currentCameraId: undefined,
+      playerCamera: undefined,
+      rotation: 0,
+      floorLevel: 0,
+      fov: 0,
+      showStaticImage: false,
+      displayMinimap: false,
+      minimapBackgroundImage: undefined,
+      showUI: false,
+      fullScreen: new FullscreenModel(document, "player-wrapper"),
+    };
+  },
+  provide() {
+    const localizer = this.i18n
+      ? new I18N(this.i18n.labels, this.i18n.language)
+      : new I18N();
+
+    return {
+      localMode: this.localMode,
+      fileLoader: this.fileLoader,
+      i18n: localizer,
+    };
+  },
+  computed: {
+    localMode() {
+      return !!this.fileLoader;
+    },
+    projectRoot() {
+      let pRoot = `${this.cdnRoot}/${this.projectSlug}`;
+      if (this.fileLoader) {
+        pRoot = "";
+      }
+      return removeTrailingSlashes(pRoot);
+    },
+    rootUrl() {
+      return `${this.projectRoot}/${this.interiorId}/${this.apartmentId}`;
+    },
+    interiorId() {
+      return this.selectedInteriorId;
+    },
+    allCameras() {
+      if (this.apartmentJSON) return this.apartmentJSON.cameras;
+      return [];
+    },
+    currentCamera() {
+      if (this.apartmentJSON && this.currentCameraId) {
+        return this.apartmentJSON.cameras.find(
+          (item) => item.id === this.cameraId
+        );
+      }
+    },
+    floorLevels() {
+      if (this.apartmentJSON) {
+        const allFloorLevels = this.apartmentJSON.cameras.map(
+          (item) => item.floorLevel
+        );
+
+        let uniqueFloorLevels = [...new Set(allFloorLevels)];
+        uniqueFloorLevels = uniqueFloorLevels.sort();
+        return uniqueFloorLevels;
+      } else {
+        return [];
+      }
+    },
+    storey() {
+      let storey = 0;
+      if (this.apartmentJSON) {
+        const allFloorLevels = this.apartmentJSON.cameras.map(
+          (item) => item.floorLevel
+        );
+
+        let uniqueFloorLevels = [...new Set(allFloorLevels)];
+        uniqueFloorLevels = uniqueFloorLevels.sort();
+
+        const index = uniqueFloorLevels.findIndex(
+          (item) => item === this.floorLevel
+        );
+        if (index !== -1) {
+          storey = index;
+        }
+      }
+
+      return storey;
+    },
+    selectedInteriorIndex() {
+      return this.interiors.findIndex(
+        (item) => item.archetypeID === this.selectedInteriorId
+      );
+    },
+    thumbnails() {
+      if (!this.thumbsJSON) {
+        return [];
+      }
+
+      return this.thumbsJSON.cameras.map((item) => {
+        return {
+          ...item,
+          thumbnailUrl: this.getURL(
+            `${this.projectRoot}/${this.interiorId}/${this.apartmentId}/thumbs/200/${item.id}.jpg`
+          ),
+          imageUrl: this.getURL(
+            `${this.projectRoot}/${this.interiorId}/${this.apartmentId}/images/1600/${item.id}.jpg`
+          ),
+        };
+      });
+    },
+    staticImage() {
+      if (!this.thumbnails) return "";
+      if (!this.thumbnails[this.currentThumbnailIndex]) return "";
+
+      return this.thumbnails[this.currentThumbnailIndex].imageUrl;
+    },
+    interiors() {
+      let interiors = [];
+
+      if (this.configJSON) {
+        interiors = this.configJSON.archetypes;
+      }
+
+      if (this.validInteriorIds.length) {
+        return interiors.filter((item) =>
+          this.validInteriorIds.includes(item.archetypeID)
+        );
+      }
+
+      return interiors;
+    },
+    interiorIds() {
+      return this.interiors.map((item) => item.archetypeID);
+    },
+    interiorsWithImage() {
+      if (!this.thumbsJSON) {
+        return [];
+      }
+      return this.interiors.map((item) => {
+        return {
+          ...item,
+          url: `${this.projectRoot}/${item.archetypeID}/${
+            this.apartmentId
+          }/thumbs/200/${this.thumbnails[this.currentThumbnailIndex].id}.jpg`,
+        };
+      });
+    },
+    minimapCamera() {
+      if (this.minimapJSON) {
+        return this.minimapJSON.storeys[this.storey];
+      }
+      return undefined;
+    },
+    hasTimeofDay() {
+      return this.apartmentJSON && this.apartmentJSON.timeInHours;
+    },
+    timeOfDay() {
+      if (
+        this.apartmentJSON &&
+        this.apartmentJSON.timeInHours &&
+        this.showTimeOfDay
+      )
+        return parseTimeOfDay(this.apartmentJSON.timeInHours);
+    },
+    refinedMinimapBackgroundImage() {
+      return this.minimapBackgroundImage
+        ? this.minimapBackgroundImage
+        : `${this.projectRoot}/${this.interiorId}/${this.apartmentId}/minimap/sunsim0_13.jpg`;
+    },
+  },
+  watch: {
+    async cdnRoot() {
+      await this.loadProjectFiles();
+      this.selectInititalInterior();
+      await this.loadUnitFiles();
+    },
+    async projectSlug() {
+      await this.loadProjectFiles();
+      this.selectInititalInterior();
+      await this.loadUnitFiles();
+    },
+    defaultViewMode: {
+      handler(viewMode) {
+        if (viewMode === "virtualTour") {
+          this.showStaticImage = false;
+        }
+
+        if (viewMode === "slideShow") {
+          this.showStaticImage = true;
+          this.showUI = true;
+        }
+      },
+      immediate: true,
+    },
+    minimapJSON(newMinimapJSON) {
+      if (newMinimapJSON.storeys[this.storey]) {
+        const defaultBackgroundImage =
+          newMinimapJSON.storeys[this.storey].defaultSunsimFile;
+
+        this.minimapBackgroundImage = `${this.projectRoot}/${this.interiorId}/${this.apartmentId}/minimap/${defaultBackgroundImage}`;
+      }
+    },
+  },
+  async mounted() {
+    try {
+      await this.loadProjectFiles();
+      this.selectInititalInterior();
+      await this.loadUnitFiles();
+      this.fullScreen.setup();
+      this.setupScrollevents();
+    } catch (e) {
+      this.error = true;
+    }
+  },
+  methods: {
+    async loadProjectFiles() {
+      this.configJSON = await this.loadConfigJSON(this.projectRoot);
+    },
+    async loadUnitFiles() {
+      this.apartmentJSON = await this.loadApartmentJSON(
+        this.projectRoot,
+        this.interiorId,
+        this.apartmentId
+      );
+      if (this.apartmentJSON) {
+        this.currentCameraId = this.apartmentJSON.cameras.find(() => true).id;
+      }
+
+      this.thumbsJSON = await this.loadThumbsJSON(
+        this.projectRoot,
+        this.interiorId,
+        this.apartmentId
+      );
+
+      if (this.thumbsJSON) {
+        let defaultWaypointIndex =
+          this.defaultWaypointIndex !== null ? this.defaultWaypointIndex : 0;
+
+        this.currentThumbnailIndex = defaultWaypointIndex;
+        this.currentCameraId = this.thumbsJSON.cameras[defaultWaypointIndex].id;
+        this.playerCamera = this.thumbsJSON.cameras[defaultWaypointIndex].id;
+      }
+
+      if (this.showMiniMap) {
+        this.minimapJSON = await this.loadminimapJSON(
+          this.projectRoot,
+          this.interiorId,
+          this.apartmentId
+        );
+      }
+    },
+    selectInititalInterior() {
+      let initialInteriorId = this.defaultInteriorId;
+
+      if (!initialInteriorId) {
+        initialInteriorId = this.configJSON.defaultArchetypeID;
+      }
+
+      if (
+        this.validInteriorIds.length &&
+        !this.validInteriorIds.includes(initialInteriorId)
+      ) {
+        initialInteriorId = this.validInteriorIds[0];
+      }
+
+      if (!initialInteriorId) {
+        initialInteriorId = this.configJSON.archetypes[0].archetypeID;
+      }
+
+      this.selectedInteriorId = initialInteriorId;
+    },
+    setupScrollevents() {
+      const canvas = document.getElementById("main-canvas");
+
+      canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
+      function handleTouchMove(event) {
+        event.preventDefault();
+        window.scrollBy(0, 0);
+      }
+
+      canvas.addEventListener(
+        "mouseenter",
+        () => {
+          document.addEventListener("wheel", handleMouseWheel, {
+            passive: false,
+          });
+        },
+        { passive: false }
+      );
+
+      canvas.addEventListener(
+        "mouseleave",
+        () => {
+          document.removeEventListener("wheel", handleMouseWheel, {
+            passive: false,
+          });
+        },
+        { passive: false }
+      );
+
+      function handleMouseWheel(event) {
+        event.preventDefault();
+        window.scrollBy(0, 0);
+      }
+    },
+    async loadConfigJSON(projectRoot) {
+      try {
+        const config = await this.loadFile(`${projectRoot}/config.json`);
+        return config;
+      } catch (e) {
+        console.error(
+          "Error loading config.json - ",
+          `${projectRoot}/config.json`,
+          e
+        );
+        return undefined;
+      }
+    },
+    async loadApartmentJSON(projectRoot, interiorId, apartmentId) {
+      try {
+        const apartmentJSON = await this.loadFile(
+          `${projectRoot}/${interiorId}/${apartmentId}/apartment.json`
+        );
+        return apartmentJSON;
+      } catch (e) {
+        console.error(
+          "Error loading apartment.json - ",
+          `${projectRoot}/${interiorId}/${apartmentId}/apartment.json`,
+          e
+        );
+        return undefined;
+      }
+    },
+    async loadThumbsJSON(projectRoot, interiorId, apartmentId) {
+      try {
+        const thumbsJSON = await this.loadFile(
+          `${projectRoot}/${interiorId}/${apartmentId}/thumbs.json`
+        );
+        return thumbsJSON;
+      } catch (e) {
+        console.error(
+          "Error loading thumbs.json - ",
+          `${projectRoot}/${interiorId}/${apartmentId}/thumbs.json`
+        );
+        return undefined;
+      }
+    },
+    async loadminimapJSON(projectRoot, interiorId, apartmentId) {
+      try {
+        const minimapJSON = await this.loadFile(
+          `${projectRoot}/${interiorId}/${apartmentId}/minimap/minimap.json`
+        );
+        return minimapJSON;
+      } catch (e) {
+        console.error(
+          "Error loading minimap.json - ",
+          `${projectRoot}/${interiorId}/${apartmentId}/minimap/minimap.json`
+        );
+        return undefined;
+      }
+    },
+    selectInterior() {
+      if (this.defaultInteriorId) {
+        this.selectedInteriorId = this.defaultInteriorId;
+      } else {
+        this.selectedInteriorId = this.configJSON.defaultArchetypeID;
+      }
+    },
+    nextCamera() {
+      let newIndex = this.currentThumbnailIndex + 1;
+      if (newIndex >= this.thumbnails.length) newIndex = 0;
+      this.currentThumbnailIndex = newIndex;
+      this.setCurrentCamera(this.thumbnails[this.currentThumbnailIndex].id);
+    },
+    previousCamera() {
+      let newIndex = this.currentThumbnailIndex - 1;
+      if (newIndex < 0) newIndex = this.thumbnails.length - 1;
+      this.currentThumbnailIndex = newIndex;
+      this.setCurrentCamera(this.thumbnails[this.currentThumbnailIndex].id);
+    },
+    goToCamera(cameraId, updatePlayerCamera = true) {
+      let newIndex = this.thumbnails.findIndex((item) => item.id === cameraId);
+
+      if (newIndex != -1) {
+        this.currentThumbnailIndex = newIndex;
+        if (updatePlayerCamera) {
+          this.setCurrentCamera(cameraId);
+        }
+      }
+    },
+    setCurrentCamera(cameraId) {
+      this.currentCameraId = cameraId;
+    },
+    updateSelectedInterior(value) {
+      this.selectedInteriorId = value;
+      this.$emit("on-interior-update", value);
+      this.$emit("on-camera-update", this.playerCamera, this.apartmentJSON);
+    },
+    newCameraCallback(cameraId) {
+      this.goToCamera(cameraId, false);
+      this.playerCamera = cameraId;
+      this.$emit("on-camera-update", cameraId, this.apartmentJSON);
+    },
+    newRotationCallback(rotation) {
+      this.rotation = rotation;
+    },
+    newfloorCallback(floor) {
+      this.floorLevel = floor;
+    },
+    newFoVCallback(fov) {
+      this.fov = fov;
+    },
+    newSizeCallback(width, height) {
+      // console.log('new size - ', width, height)
+    },
+    playerApiCallback(api) {
+      this.playerApi = api;
+
+      if (this.playerSettings) {
+        this.playerApi.updateSettings(this.playerSettings);
+      }
+    },
+    toggleFullscreen() {
+      this.fullScreen.toggle();
+      window.scrollTo({ top: 150, behavior: "smooth" });
+    },
+    toggleViewMode() {
+      this.showStaticImage = !this.showStaticImage;
+    },
+    setMinimapBackgroundImage(image) {
+      this.minimapBackgroundImage = image;
+    },
+    async takeSnapshot() {
+      const radiansToDegrees = 180 / Math.PI;
+
+      const photo = await this.playerApi.takePhoto();
+      const rotationEuler = this.playerApi.getRotationEuler();
+      const currentCamera = this.playerApi.getCurrentCamera();
+      const snapshot = new CameraSnapshot(photo, currentCamera);
+      const rotation = [
+        rotationEuler.x * radiansToDegrees,
+        rotationEuler.y * radiansToDegrees,
+        rotationEuler.z * radiansToDegrees,
+      ];
+
+      this.$emit("on-snapshot", snapshot, rotation);
+      return snapshot;
+    },
+    getURL(url) {
+      let returnUrl = url;
+      if (this.localMode) {
+        returnUrl = `${this.fileLoader.getURL(url)}`;
+      } else {
+        if (this.adminMode) {
+          returnUrl = returnUrl + `?v=${Date.now()}`;
+        }
+      }
+
+      return returnUrl;
+    },
+    async loadFile(path) {
+      const url = this.getURL(path);
+      return await loadFile(url);
+    },
+    updateSetting(settings) {
+      this.playerApi.updateSettings(settings);
+    },
+    saveSettings(settings) {
+      this.$emit("save-settings", settings);
+    },
+  },
+});
+
+function parseTimeOfDay(floatValue) {
+  if (floatValue === undefined) return null;
+
+  const hours = Math.floor(floatValue);
+  const minutes = Math.floor((hours - floatValue) * 60);
+  return { hours, minutes };
+}
+
+async function loadFile(url) {
+  try {
+    const file = await axios.get(url);
+    return file.data;
+  } catch (e) {
+    console.error(e);
+    throw new Error(e);
+  }
+}
+
+function removeTrailingSlashes(site) {
+  return site.replace(/\/$/, "");
+}
+</script>
+<style scoped>
+.compass-wrapper {
+  width: 50px;
+}
+
+.player-and-components-wrapper {
+  position: relative;
+}
+
+.static-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+}
+
+button.v-btn {
+  background: #fff;
+}
+
+.waypoint-carousel.full-screen {
+  scale: 0.5;
+}
+
+div#controls-bottom-center > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.player-error {
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background: #ededed;
+}
+
+@media only screen and (max-width: 600px) {
+  #btn-fullscreen {
+    display: none;
+  }
+}
+@media all and (orientation: landscape) and (max-height: 499px) {
+  #btn-fullscreen {
+    display: none;
+  }
+}
+.settings-panel {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
+  width: 500px;
+  transform: scale(0.8);
+  transform-origin: left;
+}
+</style>