@qispace/vue3-player 0.0.15 → 0.1.1

package/src/components/virtualTourV2/VirtualTourV2.vue

@@ -1,875 +0,0 @@
-<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
-          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>
-
-        <waypoint-carousel
-          v-if="showCarousel && thumbsJSON"
-          :thumbnails="thumbnails"
-          :active="currentThumbnailIndex"
-          @next="nextCamera"
-          @previous="previousCamera"
-          @goto="goToCamera"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import axios from "axios";
-import Player from "./Player.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 {
-  name: "VirtualTourV2",
-  emits: [
-    "on-snapshot",
-    "save-settings",
-    "on-interior-update",
-    "on-camera-update",
-  ],
-  components: {
-    Player,
-    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>