From cb9011389d3ab79d3332359106bbc70eb4a79179 Mon Sep 17 00:00:00 2001
From: mistic100 <contact@git.strangeplanet.fr>
Date: Tue, 3 Sep 2024 13:35:17 +0200
Subject: [PATCH] doc: playground

---
 .gitignore                                    |    1 +
 docs/.vitepress/components/CropPlayground.vue |   81 +-
 docs/.vitepress/components/HomeBackground.vue |   12 +-
 docs/.vitepress/components/Playground.vue     | 1479 ++---------------
 docs/.vitepress/components/SliderInput.vue    |   26 +
 docs/.vitepress/components/constants.ts       |    4 +
 .../components/playground/Container.vue       |   14 +
 .../playground/TabConfiguration.vue           |  165 ++
 .../components/playground/TabPanorama.vue     |  218 +++
 .../.vitepress/plugins/code-demo/CodeDemo.vue |   64 +-
 .../plugins/code-demo/extendMarkdown.ts       |    4 +-
 docs/.vitepress/theme/index.ts                |   52 +-
 docs/.vitepress/theme/style.scss              |   41 +-
 docs/playground.md                            |   13 +-
 packages/core/src/model.ts                    |    2 +-
 15 files changed, 734 insertions(+), 1442 deletions(-)
 create mode 100644 docs/.vitepress/components/SliderInput.vue
 create mode 100644 docs/.vitepress/components/constants.ts
 create mode 100644 docs/.vitepress/components/playground/Container.vue
 create mode 100644 docs/.vitepress/components/playground/TabConfiguration.vue
 create mode 100644 docs/.vitepress/components/playground/TabPanorama.vue

diff --git a/.gitignore b/.gitignore
index a0be620f3..f2c200510 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@ node_modules
 yarn-error.log
 .turbo
 docs/.vitepress/cache
+docs/.vitepress/.temp
 .typedoc
 !docs/.typedoc
 dist
diff --git a/docs/.vitepress/components/CropPlayground.vue b/docs/.vitepress/components/CropPlayground.vue
index c075aa88b..db12c4756 100644
--- a/docs/.vitepress/components/CropPlayground.vue
+++ b/docs/.vitepress/components/CropPlayground.vue
@@ -1,56 +1,44 @@
 <template>
     <v-card>
         <v-card-text>
-            <v-row>
-                <v-col cols="12">
-                    <v-file-input label="Panorama image" v-model="file" accept="image/*"
-                        :clearable="false"></v-file-input>
-                </v-col>
+            <v-file-input label="Panorama image" v-model="file" accept="image/*" />
+
+            <v-row class="no-v-gutters">
                 <v-col cols="4">
-                    <v-number-input label="Full width" v-model.number="panoData.fullWidth" :min="0"
-                        density="compact" :disabled="loading"></v-number-input>
+                    <v-number-input label="Full width" v-model="panoData.fullWidth" :min="0" :disabled="loading" />
                 </v-col>
                 <v-col cols="4">
-                    <v-number-input label="Cropped width" v-model.number="panoData.croppedWidth" :min="0"
-                        density="compact" :disabled="loading"></v-number-input>
+                    <v-number-input label="Cropped width" v-model="panoData.croppedWidth" :min="0"
+                        :disabled="loading" />
                 </v-col>
                 <v-col cols="4">
-                    <v-number-input label="Cropped X" v-model.number="panoData.croppedX" :min="0" density="compact"
-                        :disabled="loading"></v-number-input>
+                    <v-number-input label="Cropped X" v-model="panoData.croppedX" :min="0" :disabled="loading" />
                 </v-col>
                 <v-col cols="4">
-                    <v-number-input label="Full height" v-model.number="panoData.fullHeight" :min="0"
-                        density="compact" :disabled="loading"></v-number-input>
+                    <v-number-input label="Full height" v-model="panoData.fullHeight" :min="0" :disabled="loading" />
                 </v-col>
                 <v-col cols="4">
-                    <v-number-input label="Cropped height" v-model.number="panoData.croppedHeight" :min="0"
-                        density="compact" :disabled="loading"></v-number-input>
+                    <v-number-input label="Cropped height" v-model="panoData.croppedHeight" :min="0"
+                        :disabled="loading" />
                 </v-col>
                 <v-col cols="4">
-                    <v-number-input label="Cropped Y" v-model.number="panoData.croppedY" :min="0" density="compact"
-                        :disabled="loading"></v-number-input>
+                    <v-number-input label="Cropped Y" v-model="panoData.croppedY" :min="0" :disabled="loading" />
                 </v-col>
                 <v-col cols="4">
-                    <div class="text-caption">Pose heading</div>
-                    <v-slider v-model="panoData.poseHeading" :min="0" :max="360" :step="1"
-                        :ticks="[0, 90, 180, 270, 360]" thumb-label show-ticks="always"
-                        :disabled="loading"></v-slider>
+                    <SliderInput label="Pose heading" v-model="panoData.poseHeading" :min="0" :max="360" :step="1"
+                        :ticks="[0, 90, 180, 270, 360]" :disabled="loading" />
                 </v-col>
                 <v-col cols="4">
-                    <div class="text-caption">Pose pitch</div>
-                    <v-slider v-model="panoData.posePitch" :min="-90" :max="90" :step="1"
-                        :ticks="[-90, -45, 0, 45, 90]" thumb-label show-ticks="always"
-                        :disabled="loading"></v-slider>
+                    <SliderInput label="Pose pitch" v-model="panoData.posePitch" :min="-90" :max="90" :step="1"
+                        :ticks="[-90, -45, 0, 45, 90]" :disabled="loading" />
                 </v-col>
                 <v-col cols="4">
-                    <div class="text-caption">Pose roll</div>
-                    <v-slider v-model="panoData.poseRoll" :min="-180" :max="180" :step="1"
-                        :ticks="[-180, -90, 0, 90, 180]" thumb-label show-ticks="always"
-                        :disabled="loading"></v-slider>
+                    <SliderInput label="Pose roll" v-model="panoData.poseRoll" :min="-180" :max="180" :step="1"
+                        :ticks="[-180, -90, 0, 90, 180]" :disabled="loading" />
                 </v-col>
             </v-row>
 
-            <v-btn style="margin-top: 20px;" color="primary" @click="apply">Apply</v-btn>
+            <v-btn color="primary" @click="apply">Apply</v-btn>
 
             <div v-if="error" class="custom-block danger">
                 <p class="custom-block-title">This image cannot be loaded</p>
@@ -64,17 +52,17 @@
 
     <v-card v-show="!loading" style="margin-top: 20px;">
         <v-tabs v-model="currentTab" bg-color="primary">
-            <v-tab value="Preview">Preview</v-tab>
-            <v-tab value="XMP Data">XMP Data</v-tab>
+            <v-tab value="preview">Preview</v-tab>
+            <v-tab value="data">XMP Data</v-tab>
         </v-tabs>
 
         <v-card-text>
             <v-tabs-window v-model="currentTab">
-                <v-tabs-window-item value="Preview">
+                <v-tabs-window-item value="preview">
                     <div id="viewer"></div>
                 </v-tabs-window-item>
 
-                <v-tabs-window-item value="XMP Data">
+                <v-tabs-window-item value="data">
                     <div class="language-xml">
                         <pre class="language-xml"><code>{{ xmpData }}</code></pre>
                     </div>
@@ -85,19 +73,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
 import type { PanoData, Viewer } from '../../../packages/core';
+import { LOADER } from './constants';
+import SliderInput from './SliderInput.vue';
 
 const file = ref<File | null>(null);
 const loading = ref(true);
 const error = ref(false);
-const currentTab = ref('Preview');
+const currentTab = ref('preview');
 
 let viewer: Viewer;
 let imageData: string | null;
 
 const panoData = reactive<PanoData>({
-    isEquirectangular: true,
     fullWidth: 0,
     fullHeight: 0,
     croppedWidth: 0,
@@ -137,6 +126,7 @@ watch(() => panoData.fullHeight, (fullHeight) => {
 
 watch(file, () => {
     error.value = false;
+    loading.value = true;
 
     if (imageData) {
         URL.revokeObjectURL(imageData);
@@ -144,8 +134,6 @@ watch(file, () => {
     }
 
     if (file.value) {
-        loading.value = true;
-
         const reader = new FileReader();
 
         reader.onload = (event) => {
@@ -173,6 +161,10 @@ watch(file, () => {
     }
 });
 
+onBeforeUnmount(() => {
+    viewer?.destroy();
+});
+
 function computePanoData(width: number, height: number) {
     const fullWidth = Math.max(width, height * 2);
     const fullHeight = Math.round(fullWidth / 2);
@@ -203,7 +195,7 @@ async function apply() {
         viewer = new Viewer({
             panorama: imageData,
             container: 'viewer',
-            loadingImg: 'https://photo-sphere-viewer-data.netlify.app/assets/loader.gif',
+            loadingImg: LOADER,
             panoData: panoData,
             navbar: ['zoom', 'move', 'fullscreen'],
             size: {
@@ -216,11 +208,8 @@ async function apply() {
 </script>
 
 <style lang="scss" scoped>
-:deep(.v-input__details) {
-    display: none;
-}
-
-:deep(.v-slider-track__tick-label) {
-    font-size: 12px;
+#viewer {
+    border-radius: 5px;
+    overflow: hidden;
 }
 </style>
diff --git a/docs/.vitepress/components/HomeBackground.vue b/docs/.vitepress/components/HomeBackground.vue
index 0ffaf01c9..84c80e92f 100644
--- a/docs/.vitepress/components/HomeBackground.vue
+++ b/docs/.vitepress/components/HomeBackground.vue
@@ -5,6 +5,7 @@
 <script setup lang="ts">
 import { useData } from 'vitepress';
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { SPHERE, SPHERE_DARK } from './constants';
 import type { Viewer } from '../../../packages/core';
 
 let viewer: Viewer;
@@ -13,11 +14,8 @@ const { isDark } = useData();
 const loaded = ref(false);
 const container = ref<HTMLElement | null>(null);
 
-const urlLight = 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg';
-const urlDark = 'https://photo-sphere-viewer-data.netlify.app/assets/sphere-night.jpg';
-
 watch(isDark, () => {
-    viewer?.setPanorama(isDark.value ? urlDark : urlLight);
+    viewer?.setPanorama(isDark.value ? SPHERE_DARK : SPHERE);
 });
 
 onMounted(async () => {
@@ -29,7 +27,7 @@ onMounted(async () => {
         defaultPitch: 0.1,
         mousewheel: false,
         navbar: false,
-        panorama: isDark.value ? urlDark : urlLight,
+        panorama: isDark.value ? SPHERE_DARK : SPHERE,
     });
     viewer.addEventListener('ready', () => {
         loaded.value = true;
@@ -62,4 +60,8 @@ onBeforeUnmount(() => {
         display: none !important;
     }
 }
+
+.psv-container {
+    background: var(--vp-c-bg) !important;
+}
 </style>
diff --git a/docs/.vitepress/components/Playground.vue b/docs/.vitepress/components/Playground.vue
index 793db61b7..0bee56824 100644
--- a/docs/.vitepress/components/Playground.vue
+++ b/docs/.vitepress/components/Playground.vue
@@ -1,1366 +1,157 @@
-<style>
-.playground-container {
-    margin: 0 calc(-50vw + 940px / 2);
-    display: flex;
-    align-items: stretch;
-}
-
-#form {
-    flex: none;
-    width: 700px;
-    margin-top: 0;
-    margin-right: 10px;
-}
-
-#viewer {
-    width: 100%;
-    height: calc(100vh - 350px);
-    z-index: 1;
-}
-
-@media (max-width: 940px) {
-    .playground-container {
-        margin: 0;
-    }
-}
-
-@media (max-width: 1600px) {
-    .playground-container {
-        display: block;
-    }
-
-    #form {
-        width: 100%;
-        margin-right: 0;
-    }
-
-    #viewer {
-        margin-top: 10px;
-        height: 600px;
-    }
-}
-
-.playground-container .md-tabs {
-    align-items: stretch;
-}
-
-.playground-container .md-tabs-content {
-    overflow-y: visible;
-    height: 100% !important;
-    box-shadow: none;
-}
-
-.playground-container .md-title {
-    margin: 2em 0 0 0;
-}
-</style>
-
 <template>
     <div class="playground-container">
-        <div id="form" v-if="Viewer">
-            <md-card v-show="!editMarkers">
-                <md-card-area>
-                    <md-tabs md-elevation="1" class="md-primary">
-                        <md-tab md-label="Panorama">
-                            <div class="md-layout md-gutter">
-                                <md-button
-                                    class="md-dense md-raised"
-                                    style="margin: 20px 0 0 20px; width: 150px"
-                                    v-on:click="loadDefaultFile"
-                                >
-                                    Use demo file
-                                </md-button>
-                                <div class="md-layout-item">
-                                    <md-field>
-                                        <label>Panorama image</label>
-                                        <md-file v-model="file" accept="image/*" v-on:md-change="loadFile" />
-                                    </md-field>
-                                </div>
-                            </div>
-
-                            <div class="custom-block danger" v-if="error">
-                                <p class="custom-block-title">This image cannot be loaded</p>
-                                <p>
-                                    An undefined error occurred while loading the panorama. If your image is very big
-                                    and you are using Firefox please try with Chrome, as Firefox has trouble loading
-                                    large base64 images.
-                                </p>
-                            </div>
-
-                            <md-field md-clearable>
-                                <label>Caption</label>
-                                <md-input name="caption" v-model="options.caption" :disabled="!imageData" />
-                            </md-field>
-
-                            <md-field>
-                                <label>Description</label>
-                                <md-textarea v-model="options.description"></md-textarea>
-                            </md-field>
-                        </md-tab>
-
-                        <md-tab md-label="Standard options">
-                            <div class="md-layout md-gutter">
-                                <div class="md-layout-item md-size-33">
-                                    <md-field>
-                                        <label>Default yaw</label>
-                                        <md-input v-model="options.defaultYaw" :disabled="!imageData" />
-                                    </md-field>
-                                </div>
-                                <div class="md-layout-item md-size-33">
-                                    <md-field>
-                                        <label>Default pitch</label>
-                                        <md-input v-model="options.defaultPitch" :disabled="!imageData" />
-                                    </md-field>
-                                </div>
-                            </div>
-
-                            <div class="md-layout md-gutter">
-                                <div class="md-layout-item md-size-33">
-                                    <md-field>
-                                        <label>Default zoom level</label>
-                                        <md-input
-                                            type="number"
-                                            min="0"
-                                            max="100"
-                                            v-model="options.defaultZoomLvl"
-                                            :disabled="!imageData"
-                                        />
-                                    </md-field>
-                                </div>
-                                <div class="md-layout-item md-size-33">
-                                    <md-field>
-                                        <label>Min FOV</label>
-                                        <md-input
-                                            type="number"
-                                            min="1"
-                                            max="179"
-                                            v-model="options.minFov"
-                                            :disabled="!imageData"
-                                        />
-                                    </md-field>
-                                </div>
-                                <div class="md-layout-item md-size-33">
-                                    <md-field>
-                                        <label>Max FOV</label>
-                                        <md-input
-                                            type="number"
-                                            min="1"
-                                            max="179"
-                                            v-model="options.maxFov"
-                                            :disabled="!imageData"
-                                        />
-                                    </md-field>
-                                </div>
-                            </div>
-
-                            <div class="md-layout md-gutter">
-                                <div class="md-layout-item md-size-33 checkbox-field">
-                                    <md-checkbox class="md-primary" v-model="options.fisheye" :disabled="!imageData">
-                                        Fisheye
-                                    </md-checkbox>
-                                </div>
-                                <div class="md-layout-item md-size-33 checkbox-field">
-                                    <md-checkbox class="md-primary" v-model="options.mousewheel" :disabled="!imageData">
-                                        Mousewheel
-                                    </md-checkbox>
-                                </div>
-                                <div class="md-layout-item md-size-33 checkbox-field">
-                                    <md-checkbox
-                                        class="md-primary"
-                                        v-model="options.mousewheelCtrlKey"
-                                        :disabled="!imageData"
-                                    >
-                                        Hold Ctrl to zoom
-                                    </md-checkbox>
-                                </div>
-                                <div class="md-layout-item md-size-33 checkbox-field">
-                                    <md-checkbox class="md-primary" v-model="options.mousemove" :disabled="!imageData">
-                                        Mouse move
-                                    </md-checkbox>
-                                </div>
-                                <div class="md-layout-item md-size-33 checkbox-field">
-                                    <md-checkbox
-                                        class="md-primary"
-                                        v-model="options.touchmoveTwoFingers"
-                                        :disabled="!imageData"
-                                    >
-                                        Two fingers move
-                                    </md-checkbox>
-                                </div>
-                            </div>
-                        </md-tab>
-
-                        <md-tab md-label="Advanced options">
-                            <div class="md-layout md-gutter" style="margin-bottom: 40px">
-                                <div class="md-layout-item md-size-33">
-                                    <label class="md-caption">Correction, pan</label>
-                                    <vue-slider
-                                        v-model="sphereCorrection.pan"
-                                        :min="-180"
-                                        :max="180"
-                                        :marks="[-180, -90, 0, 90, 180]"
-                                        :drag-on-click="true"
-                                        :disabled="!imageData"
-                                    />
-                                </div>
-                                <div class="md-layout-item md-size-33">
-                                    <label class="md-caption">Correction, tilt</label>
-                                    <vue-slider
-                                        v-model="sphereCorrection.tilt"
-                                        :min="-90"
-                                        :max="90"
-                                        :marks="[-90, 0, 90]"
-                                        :drag-on-click="true"
-                                        :disabled="!imageData"
-                                    />
-                                </div>
-                                <div class="md-layout-item md-size-33">
-                                    <label class="md-caption">Correction, roll</label>
-                                    <vue-slider
-                                        v-model="sphereCorrection.roll"
-                                        :min="-180"
-                                        :max="180"
-                                        :marks="[-180, -90, 0, 90, 180]"
-                                        :drag-on-click="true"
-                                        :disabled="!imageData"
-                                    />
-                                </div>
-                            </div>
-
-                            <div class="md-layout md-gutter">
-                                <div class="md-layout-item md-size-33">
-                                    <md-field>
-                                        <label>Move speed</label>
-                                        <md-input
-                                            type="number"
-                                            min="0"
-                                            step="0.1"
-                                            v-model="options.moveSpeed"
-                                            :disabled="!imageData"
-                                        />
-                                    </md-field>
-                                </div>
-                                <div class="md-layout-item md-size-33">
-                                    <md-field>
-                                        <label>Zoom speed</label>
-                                        <md-input
-                                            type="number"
-                                            min="0"
-                                            step="0.1"
-                                            v-model="options.zoomSpeed"
-                                            :disabled="!imageData"
-                                        />
-                                    </md-field>
-                                </div>
-                            </div>
-
-                            <div class="md-layout md-gutter">
-                                <div class="md-layout-item md-size-33 checkbox-field">
-                                    <md-checkbox
-                                        class="md-primary"
-                                        v-model="options.moveInertia"
-                                        :disabled="!imageData"
-                                    >
-                                        Move inertia
-                                    </md-checkbox>
-                                </div>
-                                <md-field class="md-layout-item md-size-33">
-                                    <label>Canvas background</label>
-                                    <v-swatches
-                                        shapes="circles"
-                                        swatch-size="32"
-                                        row-length="8"
-                                        v-model="adapterOptions.backgroundColor"
-                                        :disabled="!imageData"
-                                    >
-                                        <md-input
-                                            slot="trigger"
-                                            :value="adapterOptions.backgroundColor"
-                                            :disabled="!imageData"
-                                        />
-                                    </v-swatches>
-                                </md-field>
-                                <div class="md-layout-item md-size-33">
-                                    <md-checkbox
-                                        class="md-primary"
-                                        v-model="adapterOptions.interpolateBackground"
-                                        :disabled="!imageData"
-                                    >
-                                        Interpolate background
-                                    </md-checkbox>
-                                </div>
-                            </div>
-                        </md-tab>
-
-                        <md-tab md-label="Navbar config">
-                            <div class="md-layout md-gutter">
-                                <div class="md-layout-item md-size-33" v-for="item in navbar">
-                                    <md-checkbox class="md-primary" v-model="item.enabled" :disabled="!imageData"
-                                        >{{ item.label }}
-                                    </md-checkbox>
-                                </div>
-                            </div>
-                        </md-tab>
-                    </md-tabs>
-                </md-card-area>
-
-                <md-card-actions md-alignment="space-between">
-                    <md-button class="md-accent" v-on:click="reset">Reset</md-button>
-                    <md-button class="md-primary md-raised" :disabled="!imageData" v-on:click="editMarkers = true">
-                        Add markers
-                    </md-button>
-                </md-card-actions>
-            </md-card>
-
-            <md-card v-show="editMarkers">
-                <md-card-header>
-                    <div class="md-title" v-if="!markerForm.type">Markers</div>
-                    <div class="md-title" v-if="markerForm.type">
-                        {{ markerForm.saved ? 'Edit' : 'New' }} <code>{{ markerForm.type }}</code> marker
-                    </div>
-                    <div class="md-subhead">
-                        <span
-                            v-if="
-                                markerForm.type === 'image' ||
-                                markerForm.type === 'imageLayer' ||
-                                markerForm.type === 'html'
-                            "
-                        >
-                            Click on the viewer the {{ markerForm.saved ? 'move' : 'place' }} the marker.
-                        </span>
-                        <span v-else-if="markerForm.type === 'imageLayer2'">
-                            {{
-                                markerForm.saved
-                                    ? 'The marker position cannot be edited.'
-                                    : 'Click on the viewer to place the four corners.'
-                            }}
-                        </span>
-                        <span v-else-if="markerForm.type === 'polygon' || markerForm.type === 'polyline'">
-                            {{
-                                markerForm.saved
-                                    ? 'The marker position cannot be edited.'
-                                    : 'Click on the viewer to add a point. Double-click to complete the marker.'
-                            }}
-                        </span>
-                        <span v-else-if="!markerForm.type && markersList.length > 0">
-                            Click on a marker to edit its properties.
-                        </span>
-                        <span v-else> No markers yet. </span>
-                    </div>
-                </md-card-header>
-
-                <md-card-area>
-                    <md-card-content v-if="markerForm.type">
-                        <div class="md-layout md-gutter">
-                            <div class="md-layout-item md-size-33">
-                                <md-field>
-                                    <label>Id</label>
-                                    <md-input type="text" v-model="markerForm.id" :disabled="markerForm.saved" />
-                                </md-field>
-                            </div>
-                            <div class="md-layout-item md-size-66">
-                                <md-field>
-                                    <label>Name</label>
-                                    <md-input type="text" v-model="markerForm.listContent" />
-                                </md-field>
-                            </div>
-                        </div>
-
-                        <div class="md-layout md-gutter" v-if="markerForm.type === 'html'">
-                            <div class="md-layout-item md-size-33">
-                                <md-field>
-                                    <label>Content</label>
-                                    <md-input type="text" v-model="markerForm.html" />
-                                </md-field>
-                            </div>
-                            <div class="md-layout-item md-size-33">
-                                <label class="md-caption">Font size</label>
-                                <vue-slider
-                                    v-model="markerForm.style.fontSize"
-                                    :data="FONT_SIZES"
-                                    :drag-on-click="true"
-                                    :marks="FONT_SIZES_2"
-                                />
-                            </div>
-                            <div class="md-layout-item md-size-33">
-                                <md-field>
-                                    <label>Text color</label>
-                                    <v-swatches shapes="circles" popover-x="left" v-model="markerForm.style.color">
-                                        <md-input slot="trigger" :value="markerForm.style.color" />
-                                    </v-swatches>
-                                </md-field>
-                            </div>
-                        </div>
-
-                        <div
-                            class="md-layout md-gutter"
-                            v-if="
-                                markerForm.type === 'image'
-                                || markerForm.type === 'imageLayer'
-                                || markerForm.type === 'imageLayer2'
-                            "
-                        >
-                            <md-button
-                                v-if="markerForm.type === 'image'"
-                                class="md-icon-button md-raised"
-                                style="margin: 15px 0 0 20px"
-                                v-bind:class="{ 'md-primary': markerForm.image === PIN_RED_URL }"
-                                v-on:click="markerForm.image = PIN_RED_URL"
-                            >
-                                <img v-bind:src="PIN_RED_URL" width="32px" />
-                            </md-button>
-                            <md-button
-                                v-if="markerForm.type === 'image'"
-                                class="md-icon-button md-raised"
-                                style="margin: 15px 0 0 15px"
-                                v-bind:class="{ 'md-primary': markerForm.image === PIN_BLUE_URL }"
-                                v-on:click="markerForm.image = PIN_BLUE_URL"
-                            >
-                                <img v-bind:src="PIN_BLUE_URL" width="32px" />
-                            </md-button>
-                            <md-button
-                                v-if="markerForm.type === 'imageLayer'"
-                                class="md-icon-button md-raised"
-                                style="margin: 15px 0 0 15px"
-                                v-bind:class="{ 'md-primary': markerForm.imageLayer === TARGET_URL }"
-                                v-on:click="markerForm.imageLayer = TARGET_URL"
-                            >
-                                <img v-bind:src="TARGET_URL" width="32px" />
-                            </md-button>
-                            <md-button
-                                v-if="markerForm.type === 'imageLayer2'"
-                                class="md-icon-button md-raised"
-                                style="margin: 15px 0 0 15px"
-                                v-bind:class="{ 'md-primary': markerForm.imageLayer2 === TENT_URL }"
-                                v-on:click="markerForm.imageLayer2 = TENT_URL"
-                            >
-                                <img v-bind:src="TENT_URL" width="32px" />
-                            </md-button>
-                            <div class="md-layout-item">
-                                <md-field>
-                                    <label>Image URL</label>
-                                    <md-input type="text" v-model="markerForm[markerForm.type]" />
-                                </md-field>
-                            </div>
-                        </div>
-
-                        <div
-                            class="md-layout md-gutter"
-                            v-if="markerForm.type === 'polygon' || markerForm.type === 'polyline'"
-                        >
-                            <div class="md-layout-item md-size-25" v-if="markerForm.type === 'polygon'">
-                                <md-field>
-                                    <label>Fill color</label>
-                                    <v-swatches shapes="circles" v-model="markerForm.svgStyle.fill">
-                                        <md-input slot="trigger" :value="markerForm.svgStyle.fill" />
-                                    </v-swatches>
-                                </md-field>
-                            </div>
-                            <div class="md-layout-item md-size-25" v-if="markerForm.type === 'polygon'">
-                                <label class="md-caption">Fill opacity</label>
-                                <vue-slider
-                                    v-model="markerForm.svgStyle.fillOpacity"
-                                    :min="0"
-                                    :max="1"
-                                    :interval="0.1"
-                                    :drag-on-click="true"
-                                    :marks="[0, 0.2, 0.4, 0.6, 0.8, 1]"
-                                />
-                            </div>
-                            <div class="md-layout-item md-size-25">
-                                <md-field>
-                                    <label>Stroke color</label>
-                                    <v-swatches shapes="circles" popover-x="left" v-model="markerForm.svgStyle.stroke">
-                                        <md-input slot="trigger" :value="markerForm.svgStyle.stroke" />
-                                    </v-swatches>
-                                </md-field>
-                            </div>
-                            <div class="md-layout-item md-size-25">
-                                <label class="md-caption">Stroke width</label>
-                                <vue-slider
-                                    v-model="markerForm.svgStyle.strokeWidth"
-                                    :min="markerForm.type === 'polygon' ? 0 : 1"
-                                    :max="10"
-                                    :drag-on-click="true"
-                                    :marks="true"
-                                />
-                            </div>
-                        </div>
-
-                        <div
-                            class="md-layout md-gutter"
-                            v-if="
-                                markerForm.type === 'image' ||
-                                markerForm.type === 'imageLayer' ||
-                                markerForm.type === 'html'
-                            "
-                        >
-                            <div class="md-layout-item md-size-25">
-                                <md-field>
-                                    <label>Width</label>
-                                    <md-input
-                                        type="number"
-                                        min="0"
-                                        step="1"
-                                        v-model="markerForm.size.width"
-                                        :required="markerForm.type === 'image' || markerForm.type === 'imageLayer'"
-                                    />
-                                </md-field>
-                            </div>
-                            <div class="md-layout-item md-size-25">
-                                <md-field>
-                                    <label>Height</label>
-                                    <md-input
-                                        type="number"
-                                        min="0"
-                                        step="1"
-                                        v-model="markerForm.size.height"
-                                        :required="markerForm.type === 'image' || markerForm.type === 'imageLayer'"
-                                    />
-                                </md-field>
-                            </div>
-
-                            <div class="md-layout-item md-size-25" v-if="markerForm.type === 'imageLayer'">
-                                <md-field>
-                                    <label>Orientation</label>
-                                    <md-select v-model="markerForm.orientation">
-                                        <md-option value="front">front</md-option>
-                                        <md-option value="horizontal">horizontal</md-option>
-                                        <md-option value="vertical-left">vertical-left</md-option>
-                                        <md-option value="vertical-right">vertical-tight</md-option>
-                                    </md-select>
-                                </md-field>
-                            </div>
-
-                            <div class="md-layout-item md-size-25">
-                                <md-field>
-                                    <label>Anchor</label>
-                                    <md-select v-model="markerForm.anchor">
-                                        <md-option value="top left">top left</md-option>
-                                        <md-option value="top center">top center</md-option>
-                                        <md-option value="top right">top right</md-option>
-                                        <md-option value="center left">center left</md-option>
-                                        <md-option value="center center">center center</md-option>
-                                        <md-option value="center right">center right</md-option>
-                                        <md-option value="bottom left">bottom left</md-option>
-                                        <md-option value="bottom center">bottom center</md-option>
-                                        <md-option value="bottom right">bottom right</md-option>
-                                    </md-select>
-                                </md-field>
-                            </div>
-                        </div>
-
-                        <div class="md-layout md-gutter">
-                            <div class="md-layout-item md-size-75">
-                                <md-field>
-                                    <label>Tooltip content</label>
-                                    <md-input type="text" v-model="markerForm.tooltip.content" />
-                                </md-field>
-                            </div>
-
-                            <div class="md-layout-item md-size-25">
-                                <md-field>
-                                    <label>Tooltip position</label>
-                                    <md-select v-model="markerForm.tooltip.position">
-                                        <md-option value="top left">top left</md-option>
-                                        <md-option value="top center">top center</md-option>
-                                        <md-option value="top right">top right</md-option>
-                                        <md-option value="center left">center left</md-option>
-                                        <md-option value="center right">center right</md-option>
-                                        <md-option value="bottom left">bottom left</md-option>
-                                        <md-option value="bottom center">bottom center</md-option>
-                                        <md-option value="bottom right">bottom right</md-option>
-                                    </md-select>
-                                </md-field>
-                            </div>
-                        </div>
-
-                        <md-field>
-                            <label>Panel content</label>
-                            <md-textarea v-model="markerForm.content"></md-textarea>
-                        </md-field>
-                    </md-card-content>
-
-                    <md-card-content v-if="!markerForm.type">
-                        <md-list class="md-dense">
-                            <md-list-item v-for="marker in markersList" v-on:click="onSelectMarker(marker)">
-                                <div class="md-list-item-text">
-                                    {{ marker.id }} <span class="md-caption">{{ marker.type }}</span>
-                                </div>
-
-                                <md-button class="md-icon-button md-list-action">
-                                    <i class="md-icon md-icon-image" v-html="EDIT_SVG"></i>
-                                </md-button>
-                            </md-list-item>
-                        </md-list>
-                    </md-card-content>
-                </md-card-area>
-
-                <md-card-actions md-alignment="space-between">
-                    <div>
-                        <md-button v-on:click="back"> Back </md-button>
-                    </div>
-
-                    <div>
-                        <md-button v-if="markersList.length && !markerForm.type" v-on:click="showMarkersDialog">
-                            Export
-                        </md-button>
-
-                        <md-menu md-direction="bottom-end" v-if="!markerForm.type">
-                            <md-button md-menu-trigger class="md-primary md-raised">New marker</md-button>
-
-                            <md-menu-content>
-                                <md-menu-item v-on:click="newMarker('image')">Image</md-menu-item>
-                                <md-menu-item v-on:click="newMarker('imageLayer')">Image layer (position)</md-menu-item>
-                                <md-menu-item v-on:click="newMarker('imageLayer2')">Image layer (corners)</md-menu-item>
-                                <md-menu-item v-on:click="newMarker('html')">Text</md-menu-item>
-                                <md-menu-item v-on:click="newMarker('polygon')">Polygon</md-menu-item>
-                                <md-menu-item v-on:click="newMarker('polyline')">Polyline</md-menu-item>
-                            </md-menu-content>
-                        </md-menu>
-
-                        <md-button
-                            class="md-primary"
-                            v-on:click="completeMarker"
-                            v-if="
-                                markerForm.type &&
-                                (markerForm.saved || markerForm.type === 'polygon' || markerForm.type === 'polyline')
-                            "
-                        >
-                            Done
-                        </md-button>
-
-                        <md-button
-                            class="md-accent"
-                            v-if="markerForm.type && markerForm.saved"
-                            v-on:click="deleteMarker"
-                        >
-                            Delete
-                        </md-button>
-                    </div>
-                </md-card-actions>
-            </md-card>
-        </div>
+        <v-card class="form">
+            <v-tabs v-model="currentTab" bg-color="primary">
+                <v-tab value="panorama">Panorama</v-tab>
+                <v-tab value="config" :disabled="loading">Configuration</v-tab>
+                <v-tab value="markers" :disabled="loading">Markers</v-tab>
+            </v-tabs>
+
+            <v-card-text>
+                <v-tabs-window v-model="currentTab">
+                    <v-tabs-window-item value="panorama" eager>
+                        <TabPanorama @updateFile="setPanorama" @updateConfig="applyConfig" :loading="loading" />
+                    </v-tabs-window-item>
+                    <v-tabs-window-item value="config" eager>
+                        <TabConfiguration @updateConfig="applyConfig" :loading="loading" />
+                    </v-tabs-window-item>
+                    <v-tabs-window-item value="markers">
+                        Coming soon™
+                    </v-tabs-window-item>
+                </v-tabs-window>
+            </v-card-text>
+        </v-card>
 
         <div id="viewer"></div>
-
-        <md-dialog :md-active.sync="markersDialog">
-            <md-dialog-content>
-                <pre class="language-json"><code>{{ markersDialogContent }}</code></pre>
-            </md-dialog-content>
-
-            <md-dialog-actions>
-                <md-button class="md-primary" v-if="CLIPBOARD_AVAILABLE" v-on:click="copyMarkersList">Copy</md-button>
-                <md-button class="md-primary" v-on:click="markersDialog = false">Close</md-button>
-            </md-dialog-actions>
-        </md-dialog>
     </div>
 </template>
 
-<script>
-const { cloneDeep, omit, debounce, isEqual, pickBy, range } = require('lodash');
-import EDIT_SVG from '!raw-loader!./edit.svg';
+<script setup lang="ts">
+import { cloneDeep, isEqual } from 'lodash-es';
+import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import type { Viewer } from '../../../packages/core';
+import TabConfiguration, { Config } from './playground/TabConfiguration.vue';
+import TabPanorama, { PanoConfig } from './playground/TabPanorama.vue';
 
 const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
-const DEFAULT_IMAGE = baseUrl + 'sphere.jpg';
-
-const TEMP_ID = 'marker-temp';
-
-export default {
-    data: () => ({
-        Viewer: null,
-        EquirectangularAdapter: null,
-        MarkersPlugin: null,
-        DEFAULT_OPTIONS: null,
-        DEFAULT_ADAPTER_OPTIONS: null,
-        DEFAULT_SPHERE_CORRECTION: null,
-        DEFAULT_NAVBAR: null,
-
-        viewer: null,
-        markers: null,
-        file: null,
-        imageData: null,
-        error: false,
-        sphereCorrection: {},
-        options: {},
-        navbar: [],
-        adapterOptions: {},
-        panoData: {
-            fullWidth: null,
-            fullHeight: null,
-            croppedWidth: null,
-            croppedHeight: null,
-            croppedX: null,
-            croppedY: null,
-        },
-        editMarkers: false,
-        markersDialog: null,
-        markersDialogContent: null,
-        markerForm: {
-            saved: false,
-            id: null,
-            type: null,
-            position: { yaw: null, pitch: null },
-            positions: null,
-            image: null,
-            imageLayer: null,
-            imageLayer2: null,
-            html: null,
-            polygon: null,
-            polyline: null,
-            size: { width: null, height: null },
-            orientation: null,
-            anchor: null,
-            listContent: null,
-            content: null,
-            tooltip: {
-                content: null,
-                position: null,
-            },
-            style: {
-                fontSize: null,
-                color: null,
-            },
-            svgStyle: {
-                fill: null,
-                fillOpacity: null,
-                stroke: null,
-                strokeWidth: null,
-            },
-        },
-        markersList: [],
-    }),
-
-    beforeDestroy() {
-        this.viewer?.destroy();
-    },
-
-    created() {
-        this.EDIT_SVG = EDIT_SVG;
-        this.CLIPBOARD_AVAILABLE = !!window.navigator.clipboard;
-        this.PIN_RED_URL = baseUrl + 'pictos/pin-red.png';
-        this.PIN_BLUE_URL = baseUrl + 'pictos/pin-blue.png';
-        this.TARGET_URL = baseUrl + 'pictos/target.png';
-        this.TENT_URL = baseUrl + 'pictos/tent.png';
-        this.FONT_SIZES = range(10, 31).map((i) => `${i}px`);
-        this.FONT_SIZES_2 = range(10, 31, 5).map((i) => `${i}px`);
-    },
-
-    mounted() {
-        // ugly hack to load PSV from jsdelivr as an ES module
-        window.__viewer = this;
-
-        window.__s = document.createElement('script');
-        __s.type = 'module';
-        __s.text = `
-import { Viewer, DEFAULTS, EquirectangularAdapter } from '@photo-sphere-viewer/core';
-import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
-__viewer.init({ Viewer, DEFAULTS, EquirectangularAdapter, MarkersPlugin });
-__s.remove();
-`;
-        document.body.appendChild(__s);
-    },
-
-    watch: {
-        options: {
-            deep: true,
-            handler() {
-                this._applyOptions();
-            },
-        },
-        adapterOptions: {
-            deep: true,
-            handler() {
-                this.applyAdapterOptions();
-            },
-        },
-        sphereCorrection: {
-            deep: true,
-            handler() {
-                this.applySphereCorrection();
-            },
-        },
-        navbar: {
-            deep: true,
-            handler() {
-                this.applyNavbar();
-            },
-        },
-        markerForm: {
-            deep: true,
-            handler() {
-                this.updateMarker();
-            },
-        },
-    },
-
-    methods: {
-        init({ Viewer, DEFAULTS, EquirectangularAdapter, MarkersPlugin }) {
-            this.Viewer = Viewer;
-            this.EquirectangularAdapter = EquirectangularAdapter;
-            this.MarkersPlugin = MarkersPlugin;
-
-            this.DEFAULT_OPTIONS = omit(DEFAULTS, [
-                'panorama',
-                'panoData',
-                'sphereCorrection',
-                'container',
-                'plugins',
-                'navbar',
-                'loadingImg',
-            ]);
-            this.DEFAULT_ADAPTER_OPTIONS = { backgroundColor: '#000', interpolateBackground: true };
-            this.DEFAULT_SPHERE_CORRECTION = { pan: 0, tilt: 0, roll: 0 };
-            this.DEFAULT_NAVBAR = [
-                {
-                    code: 'zoom',
-                    label: DEFAULTS.lang.zoom,
-                    enabled: true,
-                },
-                {
-                    code: 'move',
-                    label: 'Move',
-                    enabled: true,
-                },
-                {
-                    code: 'download',
-                    label: DEFAULTS.lang.download,
-                    enabled: true,
-                },
-                {
-                    code: 'caption',
-                    label: 'Caption',
-                    enabled: true,
-                },
-                {
-                    code: 'fullscreen',
-                    label: DEFAULTS.lang.fullscreen,
-                    enabled: true,
-                },
-            ];
-
-            this.sphereCorrection = cloneDeep(this.DEFAULT_SPHERE_CORRECTION);
-            this.options = cloneDeep(this.DEFAULT_OPTIONS);
-            this.adapterOptions = cloneDeep(this.DEFAULT_ADAPTER_OPTIONS);
-            this.navbar = cloneDeep(this.DEFAULT_NAVBAR);
-            this.oldOptions = cloneDeep(this.options);
-
-            this._applyOptions = debounce(() => this.applyOptions(), 200);
-
-            this.initViewer();
-        },
-        initViewer() {
-            this.viewer = new this.Viewer({
-                container: 'viewer',
-                loadingImg: baseUrl + 'loader.gif',
-                adapter: [this.EquirectangularAdapter, this.adapterOptions],
-                plugins: [this.MarkersPlugin],
-            });
-
-            this.applyNavbar();
 
-            this.markers = this.viewer.getPlugin(this.MarkersPlugin);
-
-            this.viewer.addEventListener('click', ({ data }) => this.onClick(data));
-            this.viewer.addEventListener('dblclick', ({ data }) => this.onDblClick(data));
-            this.markers.addEventListener('select-marker', ({ marker }) => this.onSelectMarker(marker));
-            this.markers.addEventListener('set-markers', ({ markers }) => {
-                this.markersList = cloneDeep(markers.filter((m) => m.id !== TEMP_ID));
-            });
-
-            this.setPanorama();
-        },
-
-        loadFile(files) {
-            this.error = false;
-
-            if (this.imageData === DEFAULT_IMAGE) {
-                this.options.caption = null;
-            } else if (this.imageData) {
-                URL.revokeObjectURL(this.imageData);
-            }
-            this.imageData = null;
-
-            if (files && files[0]) {
-                const reader = new FileReader();
-
-                reader.onload = (event) => {
-                    this.imageData = event.target.result;
-                    this.setPanorama();
-                };
-
-                reader.readAsDataURL(files[0]);
-            }
-        },
-
-        loadDefaultFile() {
-            this.error = false;
-
-            if (this.imageData && this.imageData !== DEFAULT_IMAGE) {
-                URL.revokeObjectURL(this.imageData);
-            }
-
-            this.imageData = DEFAULT_IMAGE;
-            this.file = null;
-            this.setPanorama();
-            this.options.caption = 'Parc national du Mercantour <b>&copy; Damien Sorel</b>';
-        },
-
-        setPanorama() {
-            if (this.imageData) {
-                this.viewer.overlay.hide();
-                this.viewer.setPanorama(this.imageData);
-            } else {
-                this.viewer.loader.hide();
-                this.viewer.overlay.show({
-                    title: 'Please select a panorama file',
-                    dissmisable: false,
-                });
-            }
-        },
+const currentTab = ref('panorama');
+const loading = ref(true);
+
+let viewer: Viewer;
+let config: PanoConfig & Config = reactive({} as any);
+
+onMounted(async () => {
+    const { Viewer, EquirectangularAdapter } = await import('@photo-sphere-viewer/core');
+
+    viewer = new Viewer({
+        container: 'viewer',
+        loadingImg: baseUrl + 'loader.gif',
+        adapter: [EquirectangularAdapter, { interpolateBackground: true }],
+    });
+
+    setPanorama(null);
+});
+
+onBeforeUnmount(() => {
+    viewer?.destroy();
+});
+
+function setPanorama(imageData: string | null) {
+    if (imageData) {
+        loading.value = false;
+        viewer.overlay.hide();
+        viewer.setPanorama(imageData);
+    } else {
+        loading.value = true;
+        viewer.loader.hide();
+        viewer.overlay.show({
+            title: 'Please select a panorama image',
+            dissmisable: false,
+        });
+    }
+}
 
-        applyOptions() {
-            if (this.viewer) {
-                try {
-                    if (this.options.defaultZoomLvl !== this.oldOptions.defaultZoomLvl) {
-                        this.viewer.zoom(this.options.defaultZoomLvl);
-                    } else if (
-                        this.options.defaultYaw !== this.oldOptions.defaultYaw ||
-                        this.options.defaultPitch !== this.oldOptions.defaultPitch
-                    ) {
-                        this.viewer.rotate({
-                            yaw: this.options.defaultYaw,
-                            pitch: this.options.defaultPitch,
-                        });
-                    } else {
-                        Object.keys(this.options).some((optName) => {
-                            if (!isEqual(this.options[optName], this.oldOptions[optName])) {
-                                this.viewer.setOption(optName, this.options[optName]);
-                                return true;
-                            }
-                        });
-                    }
-                } catch (e) {
-                    // ignore parsing errors
-                }
-            }
-            this.oldOptions = cloneDeep(this.options);
-        },
+function applyConfig(input: Config | PanoConfig) {
+    const previous = cloneDeep(config);
+    Object.assign(config, input);
 
-        applyAdapterOptions() {
-            if (this.viewer && this.imageData) {
-                Object.assign(this.viewer.adapter.config, this.adapterOptions);
-                this.viewer.setPanorama(this.imageData, { panoData: this.viewer.state.panoData });
+    if (viewer?.state.ready) {
+        const changes: Partial<Config & PanoConfig> = {};
+        Object.entries(config).forEach(([key, value]) => {
+            if (!isEqual(value, previous[key])) {
+                changes[key] = value;
+                console.log(key, value);
             }
-        },
+        });
 
-        applyNavbar() {
-            this.viewer?.setOption(
-                'navbar',
-                this.navbar.filter((i) => i.enabled).map((i) => i.code)
-            );
-        },
-
-        applySphereCorrection() {
-            this.viewer?.setOption('sphereCorrection', {
-                pan: (this.sphereCorrection.pan / 180) * Math.PI,
-                tilt: (this.sphereCorrection.tilt / 180) * Math.PI,
-                roll: (this.sphereCorrection.roll / 180) * Math.PI,
+        if (changes.adapterConfig) {
+            Object.assign((viewer.adapter as any).config, changes.adapterConfig);
+            viewer.setPanorama(viewer.config.panorama, {
+                panoData: viewer.state.textureData.panoData,
             });
-        },
-
-        reset() {
-            this.viewer?.destroy();
-            this.viewer = null;
-            this.markers = null;
-
-            this.file = null;
-            this.imageData = null;
-            this.markersList = [];
-            this.options = cloneDeep(this.DEFAULT_OPTIONS);
-            this.adapterOptions = cloneDeep(this.DEFAULT_ADAPTER_OPTIONS);
-            this.sphereCorrection = cloneDeep(this.DEFAULT_SPHERE_CORRECTION);
-            this.navbar = cloneDeep(this.DEFAULT_NAVBAR);
-            this.oldOptions = cloneDeep(this.options);
-
-            this.initViewer();
-        },
-
-        back() {
-            if (this.markerForm.type) {
-                this.cancelMarker();
-            } else {
-                this.editMarkers = false;
-            }
-        },
-
-        newMarker(type) {
-            this.cancelMarker();
-            this.markerForm.id = 'marker-' + Math.random().toString(36).slice(2);
-            this.markerForm.type = type;
-            this.markerForm.orientation = 'front';
-            this.markerForm.anchor = 'center center';
-            this.markerForm.tooltip.position = 'top center';
-
-            switch (type) {
-                case 'image':
-                    this.markerForm.image = this.PIN_RED_URL;
-                    this.markerForm.size = { width: 32, height: 32 };
-                    this.markerForm.anchor = 'bottom center';
-                    break;
-                case 'imageLayer':
-                    this.markerForm.imageLayer = this.TARGET_URL;
-                    this.markerForm.size = { width: 120, height: 120 };
-                    break;
-                case 'imageLayer2':
-                    this.markerForm.imageLayer2 = this.TENT_URL;
-                    this.markerForm.positions = [];
-                    break;
-                case 'html':
-                    this.markerForm.html = 'Test content';
-                    this.markerForm.style.fontSize = '15px';
-                    this.markerForm.style.color = '#222F3D';
-                    break;
-                case 'polygon':
-                    this.markerForm.polygon = [];
-                    this.markerForm.svgStyle.fill = '#E84B3C';
-                    this.markerForm.svgStyle.fillOpacity = 0.5;
-                    this.markerForm.svgStyle.strokeWidth = 2;
-                    this.markerForm.svgStyle.stroke = '#C0382B';
-                    break;
-                case 'polyline':
-                    this.markerForm.polyline = [];
-                    this.markerForm.svgStyle.strokeWidth = 5;
-                    this.markerForm.svgStyle.stroke = '#27AF60';
-                    break;
-            }
-        },
+            delete changes.adapterConfig;
+        }
 
-        cancelMarker() {
-            if (
-                !this.markerForm.saved &&
-                (this.markerForm.type === 'polygon' || this.markerForm.type === 'polyline') &&
-                this.markerForm[this.markerForm.type].length > 0
-            ) {
-                this.markers.removeMarker(TEMP_ID);
-            }
-            if (
-                !this.markerForm.saved &&
-                this.markerForm.type === 'imageLayer2' &&
-                this.markerForm.positions.length > 0
-            ) {
-                this.markers.removeMarker(TEMP_ID);
-            }
-
-            Object.keys(this.markerForm).forEach((key) => {
-                if (
-                    key === 'tooltip' ||
-                    key === 'style' ||
-                    key === 'svgStyle' ||
-                    key === 'position' ||
-                    key === 'size'
-                ) {
-                    Object.keys(this.markerForm[key]).forEach((key2) => (this.markerForm[key][key2] = null));
-                } else {
-                    this.markerForm[key] = null;
-                }
+        if (changes.panoData) {
+            viewer.setPanorama(viewer.config.panorama, {
+                panoData: changes.panoData,
             });
-            this.markerForm.saved = false;
-        },
-
-        deleteMarker() {
-            if (this.markerForm.saved) {
-                this.markers.removeMarker(this.markerForm.id);
-            }
-            this.cancelMarker();
-        },
-
-        completeMarker() {
-            if (
-                !this.markerForm.saved &&
-                (this.markerForm.type === 'polygon' || this.markerForm.type === 'polyline') &&
-                this.markerForm[this.markerForm.type].length >= (this.markerForm.type === 'polygon' ? 3 : 2)
-            ) {
-                this.markers.addMarker(this.getMarkerConfig());
-            }
-
-            if (
-                !this.markerForm.saved &&
-                this.markerForm.type === 'imageLayer2' &&
-                this.markerForm.positions.length === 4
-            ) {
-                this.markers.addMarker(this.getMarkerConfig());
-            }
-
-            this.cancelMarker();
-        },
-
-        getMarkerConfig() {
-            const config = cloneDeep(this.markerForm);
-            if (config.type === 'imageLayer2') {
-                config.imageLayer = config.imageLayer2;
-                config.position = config.positions.map(([yaw, pitch]) => ({ yaw, pitch }));
-                delete config.imageLayer2;
-                delete config.positions;
-            }
-            if (config.size.width === null && config.size.height === null) {
-                delete config.size;
-            }
-            return config;
-        },
-
-        onClick(data) {
-            if (!this.editMarkers || !this.markerForm.type) {
-                return;
-            }
-
-            const yaw = Math.round(data.yaw * 1000) / 1000;
-            const pitch = Math.round(data.pitch * 1000) / 1000;
-            this.markerForm.position = { yaw, pitch };
-
-            switch (this.markerForm.type) {
-                case 'image':
-                case 'imageLayer':
-                case 'html':
-                    if (!this.markerForm.saved) {
-                        this.markers.addMarker(this.getMarkerConfig());
-                        this.cancelMarker();
-                    } else {
-                        this.markers.updateMarker({
-                            id: this.markerForm.id,
-                            position: { yaw, pitch },
-                        });
-                    }
-                    break;
-
-                case 'imageLayer2':
-                    if (this.markerForm.saved) {
-                        return;
-                    }
-                    this.markerForm.positions.push([yaw, pitch]);
-                    switch (this.markerForm.positions.length) {
-                        case 1:
-                            this.markers.addMarker({
-                                id: TEMP_ID,
-                                hideList: true,
-                                position: { yaw, pitch },
-                                anchor: 'center center',
-                                circle: 2,
-                                svgStyle: {
-                                    fill: 'yellow',
-                                },
-                            });
-                            break;
-                        case 4:
-                            this.completeMarker();
-                            break;
-                        default:
-                            this.markers.removeMarker(TEMP_ID, false);
-                            this.markers.addMarker({
-                                id: TEMP_ID,
-                                hideList: true,
-                                polyline: this.markerForm.positions,
-                                svgStyle: {
-                                    strokeWidth: 2,
-                                    stroke: 'yellow',
-                                },
-                            });
-                            break;
-                    }
-                    break;
-
-                case 'polygon':
-                    if (this.markerForm.saved) {
-                        return;
-                    }
-                    this.markerForm.polygon.push([yaw, pitch]);
-                    switch (this.markerForm.polygon.length) {
-                        case 1:
-                            this.markers.addMarker({
-                                id: TEMP_ID,
-                                hideList: true,
-                                position: { yaw, pitch },
-                                anchor: 'center center',
-                                circle: Math.max(1, this.markerForm.svgStyle.strokeWidth / 2),
-                                svgStyle: {
-                                    fill: this.markerForm.svgStyle.strokeWidth
-                                        ? this.markerForm.svgStyle.stroke
-                                        : this.markerForm.svgStyle.fill,
-                                },
-                            });
-                            break;
-                        case 2:
-                            this.markers.removeMarker(TEMP_ID, false);
-                            this.markers.addMarker({
-                                id: TEMP_ID,
-                                hideList: true,
-                                polyline: this.markerForm.polygon,
-                                svgStyle: {
-                                    strokeWidth: Math.max(1, this.markerForm.svgStyle.strokeWidth),
-                                    stroke: this.markerForm.svgStyle.strokeWidth
-                                        ? this.markerForm.svgStyle.stroke
-                                        : this.markerForm.svgStyle.fill,
-                                },
-                            });
-                            break;
-                        default:
-                            this.markers.removeMarker(TEMP_ID, false);
-                            this.markers.addMarker({
-                                ...this.getMarkerConfig(),
-                                id: TEMP_ID,
-                                hideList: true,
-                            });
-                            break;
-                    }
-                    break;
-
-                case 'polyline':
-                    if (this.markerForm.saved) {
-                        return;
-                    }
-                    this.markerForm.polyline.push([yaw, pitch]);
-                    switch (this.markerForm.polyline.length) {
-                        case 1:
-                            this.markers.addMarker({
-                                id: TEMP_ID,
-                                hideList: true,
-                                position: { yaw, pitch },
-                                anchor: 'center center',
-                                circle: Math.max(1, this.markerForm.svgStyle.strokeWidth / 2),
-                                svgStyle: {
-                                    fill: this.markerForm.svgStyle.stroke,
-                                },
-                            });
-                            break;
-                        default:
-                            this.markers.removeMarker(TEMP_ID, false);
-                            this.markers.addMarker({
-                                ...this.getMarkerConfig(),
-                                id: TEMP_ID,
-                                hideList: true,
-                            });
-                            break;
-                    }
-                    break;
-            }
-        },
-
-        onDblClick() {
-            if (!this.editMarkers || !this.markerForm.type) {
-                return;
-            }
-
-            this.markerForm[this.markerForm.type].pop();
-            this.completeMarker();
-        },
-
-        onSelectMarker(marker) {
-            if (marker.id === this.markerForm.id) {
-                return;
-            }
-
-            this.cancelMarker();
-
-            const config = cloneDeep(marker.config);
-            if (Array.isArray(config.position)) {
-                config.type = 'imageLayer2';
-                config.imageLayer2 = config.imageLayer;
-                config.positions = config.position.map(({ yaw, pitch }) => [yaw, pitch]);
-                config.position = { yaw: null, pitch: null };
-            } else {
-                config.type = marker.type;
-            }
-            if (!config.size) {
-                config.size = { width: null, height: null };
-            }
+            delete changes.panoData;
+        }
+
+        if (changes.defaultZoomLvl !== undefined) {
+            viewer.animate({ speed: 500, zoom: changes.defaultZoomLvl });
+            delete changes.defaultZoomLvl;
+        }
+
+        if (changes.defaultYaw !== undefined || changes.defaultPitch !== undefined) {
+            viewer.animate({ speed: '10rpm', yaw: config.defaultYaw!, pitch: config.defaultPitch! });
+            delete changes.defaultYaw;
+            delete changes.defaultPitch;
+        }
+
+        if (Object.keys(changes).length) {
+            viewer.setOptions(changes);
+        }
+    }
+}
+</script>
 
-            Object.assign(this.markerForm, config);
-            this.markerForm.saved = true;
-        },
+<style lang="scss" scoped>
+.playground-container {
+    --playground-width: 700px;
+    --playground-padding: 30px;
+
+    position: fixed;
+    top: var(--vp-nav-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: var(--playground-padding);
+    display: flex;
+    background: var(--vp-c-bg);
+    z-index: 1;
 
-        updateMarker() {
-            if (this.markerForm.saved) {
-                this.markers.updateMarker(this.getMarkerConfig());
-            } else if (
-                (this.markerForm.type === 'polygon' || this.markerForm.type === 'polyline') &&
-                this.markerForm[this.markerForm.type].length >= (this.markerForm.type === 'polygon' ? 3 : 2)
-            ) {
-                this.markers.updateMarker({
-                    ...this.getMarkerConfig(),
-                    id: TEMP_ID,
-                    hideList: true,
-                });
-            }
-        },
+    @media (max-width: 1440px) {
+        --playground-width: 600px;
+        --playground-padding: 20px;
+    }
+}
 
-        showMarkersDialog() {
-            const content = this.markersList
-                .filter((marker) => marker.id !== TEMP_ID)
-                .map((marker) => {
-                    const m = {};
-                    m.id = marker.id;
-                    if (marker.type === 'imageLayer2') {
-                        m.imageLayer = marker.config.imageLayer;
-                    } else {
-                        m[marker.type] = marker.config[marker.type];
-                    }
-                    if (marker.type !== 'polygon' && marker.type !== 'polyline') {
-                        m.position = marker.config.position;
-                    }
-                    if (marker.config.size?.width) {
-                        m.size = marker.config.size;
-                    }
-                    if (marker.config.anchor !== 'center center') {
-                        m.anchor = marker.config.anchor;
-                    }
-                    if (marker.config.orientation !== 'front') {
-                        m.orientation = marker.config.orientation;
-                    }
-                    if (marker.config.tooltip.content) {
-                        m.tooltip = marker.config.tooltip;
-                    }
-                    m.style = pickBy(marker.config.style, (v) => !!v);
-                    if (!Object.entries(m.style).length) {
-                        delete m.style;
-                    }
-                    m.svgStyle = pickBy(marker.config.svgStyle, (v) => !!v);
-                    if (!m.svgStyle.strokeWidth) {
-                        delete m.svgStyle.stroke;
-                    }
-                    if (!m.svgStyle.fillOpacity) {
-                        delete m.svgStyle.fill;
-                    }
-                    if (!Object.entries(m.svgStyle).length) {
-                        delete m.svgStyle;
-                    }
-                    return m;
-                });
+.form {
+    flex: none;
+    width: var(--playground-width);
+    margin-right: calc(var(--playground-padding) / 2);
 
-            this.markersDialogContent =
-                'markers: ' +
-                JSON.stringify(
-                    content,
-                    (k, v) => {
-                        if (k === 'polyline' || k === 'polygon' || (k === 'position' && Array.isArray(v))) {
-                            return JSON.stringify(v);
-                        } else {
-                            return v;
-                        }
-                    },
-                    2
-                )
-                    .replace(/\"\[/g, '[')
-                    .replace(/\]\"/g, ']')
-                    .replace(/{\\"/g, '{"')
-                    .replace(/\\":/g, '":')
-                    .replace(/,\\"/g, ',"');
-            this.markersDialog = true;
-        },
+    &>.v-card-text {
+        overflow-y: auto;
+    }
+}
 
-        copyMarkersList() {
-            window.navigator.clipboard.writeText(this.markersDialog);
-            this.markersDialog = false;
-        },
-    },
-};
-</script>
+#viewer {
+    flex: 1;
+    border-radius: 5px;
+    overflow: hidden;
+}
+</style>
diff --git a/docs/.vitepress/components/SliderInput.vue b/docs/.vitepress/components/SliderInput.vue
new file mode 100644
index 000000000..b9f69aeae
--- /dev/null
+++ b/docs/.vitepress/components/SliderInput.vue
@@ -0,0 +1,26 @@
+<template>
+    <v-field :label="label" variant="plain" active :disabled="disabled">
+        <v-slider v-if="!range" v-model="model" :min="min" :max="max" :step="step" :ticks="ticks" />
+        <v-range-slider v-if="range" v-model="model" :min="min" :max="max" :step="step" :ticks="ticks" />
+    </v-field>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    label: string;
+    range?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    ticks?: number[];
+    disabled?: boolean;
+}>();
+
+const model = defineModel();
+</script>
+
+<style lang="scss" scoped>
+.v-field {
+    margin-top: 20px;
+}
+</style>
diff --git a/docs/.vitepress/components/constants.ts b/docs/.vitepress/components/constants.ts
new file mode 100644
index 000000000..2df33e29c
--- /dev/null
+++ b/docs/.vitepress/components/constants.ts
@@ -0,0 +1,4 @@
+export const BASE_URL = 'https://photo-sphere-viewer-data.netlify.app/assets/';
+export const SPHERE = BASE_URL + 'sphere.jpg';
+export const SPHERE_DARK = BASE_URL + 'sphere-night.jpg';
+export const LOADER = BASE_URL + 'loader.gif';
diff --git a/docs/.vitepress/components/playground/Container.vue b/docs/.vitepress/components/playground/Container.vue
new file mode 100644
index 000000000..9d10631cd
--- /dev/null
+++ b/docs/.vitepress/components/playground/Container.vue
@@ -0,0 +1,14 @@
+<template>
+    <v-card variant="tonal" style="margin-bottom: 20px;">
+        <v-card-title>{{ title }}</v-card-title>
+        <v-card-text style="margin-bottom: -20px;">
+            <slot></slot>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    title: string;
+}>();
+</script>
diff --git a/docs/.vitepress/components/playground/TabConfiguration.vue b/docs/.vitepress/components/playground/TabConfiguration.vue
new file mode 100644
index 000000000..1f89ad8d4
--- /dev/null
+++ b/docs/.vitepress/components/playground/TabConfiguration.vue
@@ -0,0 +1,165 @@
+<template>
+    <v-select label="Navbar buttons" :items="BUTTONS" multiple v-model="config.navbar" />
+
+    <Container title="Position">
+        <v-row class="no-v-gutters">
+            <v-col cols="4">
+                <v-text-field label="Default yaw" v-model="config.defaultYaw" />
+            </v-col>
+            <v-col cols="4">
+                <v-text-field label="Default pitch" v-model="config.defaultPitch" />
+            </v-col>
+            <v-col cols="4"></v-col>
+            <v-col cols="4">
+                <SliderInput label="Default zoom level" v-model="config.defaultZoomLvl" :min="0" :max="100" :step="1"
+                    :ticks="[0, 25, 50, 75, 100]" />
+            </v-col>
+            <v-col cols="8">
+                <SliderInput label="Min FOV/Max FOV" v-model="configFov" range :min="0" :max="180" :step="1"
+                    :ticks="[0, 20, 40, 60, 80, 100, 120, 140, 160, 180]" />
+            </v-col>
+            <v-col cols="4">
+                <v-number-input label="Move speed" v-model="config.moveSpeed" :min="0" :step="0.1" />
+            </v-col>
+            <v-col cols="4">
+                <v-number-input label="Zoom speed" v-model="config.zoomSpeed" :min="0" :step="0.1" />
+            </v-col>
+            <v-col cols="4">
+                <v-checkbox label="Move inertia" v-model="config.moveInertia" />
+            </v-col>
+        </v-row>
+    </Container>
+
+    <Container title="Options">
+        <v-row class="no-v-gutters">
+            <v-col cols="4">
+                <v-checkbox label="Mouse wheel" v-model="config.mousewheel" />
+            </v-col>
+            <v-col cols="4">
+                <v-checkbox label="Mouse move" v-model="config.mousemove" />
+            </v-col>
+            <v-col cols="4">
+                <v-checkbox label="Keyboard (fullscreen)" v-model="config.keyboard" />
+            </v-col>
+            <v-col cols="4">
+                <v-checkbox label="Fisheye" v-model="config.fisheye" />
+            </v-col>
+            <v-col cols="4">
+                <v-checkbox label="Hold Ctrl to zoom" v-model="config.mousewheelCtrlKey" />
+            </v-col>
+            <v-col cols="4">
+                <v-checkbox label="Two fingers move" v-model="config.touchmoveTwoFingers" />
+            </v-col>
+            <v-col cols="4">
+                <v-menu :close-on-content-click="false" @update:modelValue="persistBgColor">
+                    <template v-slot:activator="{ props }">
+                        <v-text-field label="Canvas background" v-bind="props" v-model="config.adapterConfig.backgroundColor">
+                            <template #append-inner>
+                                <div class="colorpicker-square" :style="{ backgroundColor: config.adapterConfig.backgroundColor }">
+                                </div>
+                            </template>
+                        </v-text-field>
+                    </template>
+                    <v-color-picker v-model="configBgColor" :hide-inputs="true" />
+                </v-menu>
+            </v-col>
+            <v-col cols="4">
+                <v-checkbox label="Interpolate background" v-model="config.adapterConfig.interpolateBackground" />
+            </v-col>
+        </v-row>
+    </Container>
+</template>
+
+<script setup lang="ts">
+import { watchDebounced } from '@vueuse/core';
+import { cloneDeep } from 'lodash-es';
+import { onMounted, reactive, ref, watch } from 'vue';
+import type { EquirectangularAdapterConfig, ViewerConfig } from '../../../../packages/core';
+import SliderInput from '../SliderInput.vue';
+import Container from './Container.vue';
+
+export type Config = Omit<ViewerConfig, 'container'>
+    & {
+        navbar: string[];
+        adapterConfig: EquirectangularAdapterConfig;
+    };
+
+const BUTTONS = [
+    { value: 'zoom', title: 'Zoom' },
+    { value: 'move', title: 'Move' },
+    { value: 'download', title: 'Download' },
+    { value: 'caption', title: 'Caption' },
+    { value: 'fullscreen', title: 'Fullscreen' },
+];
+
+const { loading } = defineProps<{ loading: boolean }>();
+
+const config = reactive<Config>({
+    navbar: BUTTONS.map(b => b.value),
+    defaultYaw: 0,
+    defaultPitch: 0,
+    defaultZoomLvl: 50,
+    minFov: 30,
+    maxFov: 90,
+    mousewheel: true,
+    mousemove: true,
+    keyboard: true,
+    fisheye: false,
+    mousewheelCtrlKey: false,
+    touchmoveTwoFingers: false,
+    moveSpeed: 1,
+    zoomSpeed: 1,
+    moveInertia: true,
+    adapterConfig: {
+        backgroundColor: '#000000',
+        interpolateBackground: true,
+    },
+});
+const configFov = ref([config.minFov, config.maxFov]);
+const configBgColor = ref(config.adapterConfig.backgroundColor);
+
+const emit = defineEmits<{
+    updateConfig: [config: Config],
+}>();
+
+watch(configFov, persisFov);
+
+watchDebounced(
+    config,
+    emitConfig,
+    { debounce: 300, maxWait: 9999, deep: true }
+);
+
+onMounted(() => {
+    emitConfig();
+});
+
+function persisFov() {
+    config.minFov = configFov.value[0];
+    config.maxFov = configFov.value[1];
+}
+
+function persistBgColor(menuOpen: boolean) {
+    if (!menuOpen) {
+        config.adapterConfig.backgroundColor = configBgColor.value;
+    }
+}
+
+function emitConfig() {
+    const c = cloneDeep(config) as Config;
+    c.navbar.sort((a, b) => {
+        return BUTTONS.findIndex(c => c.value === a) - BUTTONS.findIndex(c => c.value === b);
+    });
+    emit('updateConfig', c);
+}
+</script>
+
+<style lang="scss" scoped>
+.colorpicker-square {
+    border-radius: 4px;
+    margin: -0.25rem;
+    width: 1.5rem;
+    aspect-ratio: 1;
+    cursor: pointer;
+}
+</style>
diff --git a/docs/.vitepress/components/playground/TabPanorama.vue b/docs/.vitepress/components/playground/TabPanorama.vue
new file mode 100644
index 000000000..adffd31fa
--- /dev/null
+++ b/docs/.vitepress/components/playground/TabPanorama.vue
@@ -0,0 +1,218 @@
+<template>
+    <v-file-input label="Panorama image" v-model="file" accept="image/*">
+        <template #append>
+            <v-btn variant="tonal" @click="loadDefaultFile">Use demo file</v-btn>
+        </template>
+    </v-file-input>
+
+    <div v-if="error" class="custom-block danger">
+        <p class="custom-block-title">This image cannot be loaded</p>
+        <p>
+            An undefined error occurred while loading the panorama. If your image is very big and you are using
+            Firefox please try with Chrome, as Firefox has trouble loading large base64 images.
+        </p>
+    </div>
+
+    <v-text-field label="Caption" v-model="config.caption" clearable :disabled="loading" />
+
+    <v-textarea label="Description" v-model="config.description" clearable :rows="2" :disabled="loading" />
+
+    <Container title="Pano data">
+        <v-btn-toggle v-model="panoDataMode" :disabled="loading" style="margin-bottom: 20px;">
+            <v-btn value="xmp">Use embedded XMP data</v-btn>
+            <v-btn value="manual">Provide manual data</v-btn>
+        </v-btn-toggle>
+
+        <v-row class="no-v-gutters" v-if="panoDataMode === 'manual'">
+            <v-col cols="4">
+                <v-number-input label="Full width" v-model="config.panoData.fullWidth" :min="0" :disabled="loading" />
+            </v-col>
+            <v-col cols="4">
+                <v-number-input label="Cropped width" v-model="config.panoData.croppedWidth" :min="0" :disabled="loading" />
+            </v-col>
+            <v-col cols="4">
+                <v-number-input label="Cropped X" v-model="config.panoData.croppedX" :min="0" :disabled="loading" />
+            </v-col>
+            <v-col cols="4">
+                <v-number-input label="Full height" v-model="config.panoData.fullHeight" :min="0" :disabled="loading" />
+            </v-col>
+            <v-col cols="4">
+                <v-number-input label="Cropped height" v-model="config.panoData.croppedHeight" :min="0" :disabled="loading" />
+            </v-col>
+            <v-col cols="4">
+                <v-number-input label="Cropped Y" v-model="config.panoData.croppedY" :min="0" :disabled="loading" />
+            </v-col>
+        </v-row>
+    </Container>
+
+    <Container title="Sphere correction">
+        <v-row class="no-v-gutters">
+            <v-col cols="4">
+                <SliderInput label="Pan" v-model="config.sphereCorrection.pan" :min="-180" :max="180" :step="1"
+                    :ticks="[-180, -90, 0, 90, 180]" :disabled="loading" />
+            </v-col>
+            <v-col cols="4">
+                <SliderInput label="Tilt" v-model="config.sphereCorrection.tilt" :min="-90" :max="90" :step="1"
+                    :ticks="[-90, -45, 0, 45, 90]" :disabled="loading" />
+            </v-col>
+            <v-col cols="4">
+                <SliderInput label="Roll" v-model="config.sphereCorrection.roll" :min="-180" :max="180" :step="1"
+                    :ticks="[-180, -90, 0, 90, 180]" :disabled="loading" />
+            </v-col>
+        </v-row>
+    </Container>
+</template>
+
+<script setup lang="ts">
+import { watchDebounced, watchIgnorable } from '@vueuse/core';
+import { cloneDeep } from 'lodash-es';
+import { onMounted, reactive, ref, watch } from 'vue';
+import type { PanoData, SphereCorrection } from '../../../../packages/core';
+import { SPHERE } from '../constants';
+import SliderInput from '../SliderInput.vue';
+import Container from './Container.vue';
+
+export type PanoConfig = {
+    caption: string;
+    description: string;
+    panoData: PanoData;
+    sphereCorrection: SphereCorrection;
+};
+
+const { loading } = defineProps<{ loading: boolean }>();
+
+const file = ref<File | null>(null);
+const error = ref(false);
+
+const config = reactive<PanoConfig>({
+    caption: '',
+    description: '',
+    panoData: {
+        fullWidth: 0,
+        fullHeight: 0,
+        croppedWidth: 0,
+        croppedHeight: 0,
+        croppedX: 0,
+        croppedY: 0,
+    },
+    sphereCorrection: {
+        pan: 0,
+        tilt: 0,
+        roll: 0,
+    },
+});
+const panoDataMode = ref<'xmp' | 'manual'>('xmp');
+
+let imageData: string | null;
+
+const emit = defineEmits<{
+    updateConfig: [config: PanoConfig],
+    updateFile: [imageData: string | null],
+}>();
+
+const { ignoreUpdates: updateFileIgnore } = watchIgnorable(file, loadFile);
+
+watch(() => config.panoData.fullWidth, (fullWidth) => {
+    config.panoData.fullHeight = Math.round(fullWidth / 2);
+});
+watch(() => config.panoData.fullHeight, (fullHeight) => {
+    config.panoData.fullWidth = Math.round(fullHeight * 2);
+});
+
+watchDebounced(
+    [config, panoDataMode],
+    emitConfig,
+    { debounce: 300, maxWait: 9999, deep: true }
+);
+
+onMounted(() => {
+    emitConfig();
+});
+
+function loadFile() {
+    error.value = false;
+
+    if (imageData === SPHERE) {
+        config.caption = '';
+    } else if (imageData) {
+        URL.revokeObjectURL(imageData);
+    }
+
+    imageData = null;
+
+    if (file.value) {
+        const reader = new FileReader();
+
+        reader.onload = (event) => {
+            imageData = event.target!.result as string;
+
+            const image = new Image();
+
+            image.onload = () => {
+                computePanoData(image.width, image.height);
+                emitConfig();
+                emit('updateFile', imageData);
+            };
+
+            image.onerror = () => {
+                URL.revokeObjectURL(imageData!);
+                imageData = null;
+                error.value = true;
+                computePanoData(0, 0);
+                emit('updateFile', null);
+            };
+
+            image.src = imageData;
+        };
+
+        reader.readAsDataURL(file.value);
+    } else {
+        emit('updateFile', null);
+    }
+}
+
+function loadDefaultFile() {
+    error.value = false;
+    updateFileIgnore(() => file.value = null);
+
+    if (imageData && imageData !== SPHERE) {
+        URL.revokeObjectURL(imageData);
+    }
+
+    imageData = SPHERE;
+    config.caption = 'Parc national du Mercantour <b>&copy; Damien Sorel</b>';
+    computePanoData(6000, 3000);
+
+    emit('updateFile', imageData);
+}
+
+function computePanoData(width: number, height: number) {
+    const fullWidth = Math.max(width, height * 2);
+    const fullHeight = Math.round(fullWidth / 2);
+    const croppedX = Math.round((fullWidth - width) / 2);
+    const croppedY = Math.round((fullHeight - height) / 2);
+
+    config.panoData.fullWidth = fullWidth;
+    config.panoData.fullHeight = fullHeight;
+    config.panoData.croppedWidth = width;
+    config.panoData.croppedHeight = height;
+    config.panoData.croppedX = croppedX;
+    config.panoData.croppedY = croppedY;
+    config.sphereCorrection.pan = 0;
+    config.sphereCorrection.tilt = 0;
+    config.sphereCorrection.roll = 0;
+    panoDataMode.value = 'xmp';
+}
+
+function emitConfig() {
+    const temp = cloneDeep(config) as PanoConfig;
+    temp.sphereCorrection.pan = temp.sphereCorrection.pan + 'deg';
+    temp.sphereCorrection.tilt = temp.sphereCorrection.tilt + 'deg';
+    temp.sphereCorrection.roll = temp.sphereCorrection.roll + 'deg';
+    if (panoDataMode.value === 'xmp') {
+        // @ts-ignore
+        temp.panoData = null;
+    }
+    emit('updateConfig', temp);
+}
+</script>
diff --git a/docs/.vitepress/plugins/code-demo/CodeDemo.vue b/docs/.vitepress/plugins/code-demo/CodeDemo.vue
index 2d34ab49b..7c5084cc4 100644
--- a/docs/.vitepress/plugins/code-demo/CodeDemo.vue
+++ b/docs/.vitepress/plugins/code-demo/CodeDemo.vue
@@ -1,41 +1,39 @@
 <template>
-    <ClientOnly>
-        <v-card>
-            <v-tabs v-model="currentTab" bg-color="primary">
-                <v-tab value="Result">Result</v-tab>
-                <v-tab value="Source">Source</v-tab>
+    <v-card>
+        <v-tabs v-model="currentTab" bg-color="primary">
+            <v-tab value="result">Result</v-tab>
+            <v-tab value="source">Source</v-tab>
 
-                <span style="flex: 1"></span>
+            <span style="flex: 1"></span>
 
-                <v-tab v-for="(service, key) in SERVICES" :value="currentTab" v-tooltip="service.name" @click="open(key)">
-                    <v-icon size="large" v-html="service.icon"></v-icon>
-                </v-tab>
-            </v-tabs>
+            <v-tab v-for="(service, key) in SERVICES" :value="currentTab" v-tooltip="service.name" @click="open(key)">
+                <v-icon size="large" v-html="service.icon"></v-icon>
+            </v-tab>
+        </v-tabs>
 
-            <v-card-text>
-                <v-tabs-window v-model="currentTab">
-                    <v-tabs-window-item value="Result">
-                        <div v-if="!show" class="demo-loader">
-                            <v-btn @click="show = true" theme="light" color="primary" size="large">Load demo</v-btn>
-                        </div>
+        <v-card-text>
+            <v-tabs-window v-model="currentTab">
+                <v-tabs-window-item value="result">
+                    <div v-if="!show" class="demo-loader">
+                        <v-btn @click="show = true" theme="light" color="primary" size="large">Load demo</v-btn>
+                    </div>
 
-                        <iframe class="demo-runner"
-                                v-if="show && srcdoc"
-                                :srcdoc="srcdoc"
-                                allowfullscreen="allowfullscreen"
-                                frameborder="0">
-                        </iframe>
-                    </v-tabs-window-item>
+                    <iframe class="demo-runner"
+                            v-if="show && srcdoc"
+                            :srcdoc="srcdoc"
+                            allowfullscreen="allowfullscreen"
+                            frameborder="0">
+                    </iframe>
+                </v-tabs-window-item>
 
-                    <v-tabs-window-item value="Source">
-                        <div class="demo-source" ref="sourceContainer">
-                            <slot name="demo"></slot>
-                        </div>
-                    </v-tabs-window-item>
-                </v-tabs-window>
-            </v-card-text>
-        </v-card>
-    </ClientOnly>
+                <v-tabs-window-item value="source">
+                    <div class="demo-source" ref="sourceContainer">
+                        <slot name="demo"></slot>
+                    </div>
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-card-text>
+    </v-card>
 </template>
 
 <script setup lang="ts">
@@ -54,7 +52,7 @@ const props = defineProps<{
 }>();
 
 const show = ref(props.autoload === 'true');
-const currentTab = ref('Result');
+const currentTab = ref('result');
 
 const html = computed(() => decodeURIComponent(props.rawHtml));
 const js = computed(() => decodeURIComponent(props.rawJs));
diff --git a/docs/.vitepress/plugins/code-demo/extendMarkdown.ts b/docs/.vitepress/plugins/code-demo/extendMarkdown.ts
index bf051c341..1b50c64ae 100644
--- a/docs/.vitepress/plugins/code-demo/extendMarkdown.ts
+++ b/docs/.vitepress/plugins/code-demo/extendMarkdown.ts
@@ -38,7 +38,7 @@ export default function extendMarkdown(md: MarkdownIt) {
                     }
                 }
 
-                return `<CodeDemo autoload="${config.autoload}"
+                return `<ClientOnly><CodeDemo autoload="${config.autoload}"
                             title="${config.title}"
                             version="${config.version}"
                             rawHtml="${encodeURIComponent(config.html)}"
@@ -47,7 +47,7 @@ export default function extendMarkdown(md: MarkdownIt) {
                             rawPackages="${encodeURIComponent(JSON.stringify(config.packages))}"
                             ><template #demo>\n`;
             } else {
-                return `</template></CodeDemo>\n`;
+                return `</template></CodeDemo></ClientOnly>\n`;
             }
         },
     });
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 0779b890d..504deac99 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -4,21 +4,30 @@ import { h } from 'vue';
 import { createVuetify } from 'vuetify';
 import {
   VBtn,
+  VBtnToggle,
   VCard,
   VCardActions,
   VCardText,
+  VCardTitle,
+  VCheckbox,
   VCol,
+  VColorPicker,
   VDialog,
+  VField,
   VFileInput,
   VIcon,
+  VMenu,
+  VRangeSlider,
   VRow,
+  VSelect,
   VSlider,
   VTab,
   VTabs,
   VTabsWindow,
   VTabsWindowItem,
+  VTextarea,
   VTextField,
-  VThemeProvider,
+  VThemeProvider
 } from 'vuetify/components';
 import { Tooltip } from 'vuetify/directives';
 import { aliases, mdi } from 'vuetify/iconsets/mdi';
@@ -41,20 +50,29 @@ const vuetify = createVuetify({
   ssr: true,
   components: {
     VBtn,
+    VBtnToggle,
     VCard,
     VCardActions,
     VCardText,
+    VCardTitle,
+    VCheckbox,
     VCol,
+    VColorPicker,
     VDialog,
     VFileInput,
+    VField,
     VIcon,
+    VMenu,
     VNumberInput,
     VRow,
     VSlider,
+    VRangeSlider,
+    VSelect,
     VTab,
     VTabs,
     VTabsWindow,
     VTabsWindowItem,
+    VTextarea,
     VTextField,
     VThemeProvider,
   },
@@ -66,6 +84,38 @@ const vuetify = createVuetify({
     aliases,
     sets: { mdi },
   },
+  defaults: {
+    VBtnToggle: {
+      density: 'compact',
+      variant: 'outlined',
+    },
+    VTextField: {
+      density: 'compact',
+    },
+    VFileInput: {
+      density: 'compact',
+    },
+    VField: {
+      density: 'compact',
+    },
+    VCheckbox: {
+      density: 'compact',
+    },
+    VNumberInput: {
+      density: 'compact',
+    },
+    VSelect: {
+      density: 'compact',
+    },
+    VSlider: {
+      showTicks: 'always',
+      thumbLabel: true,
+    },
+    VRangeSlider: {
+      showTicks: 'always',
+      thumbLabel: true,
+    },
+  },
   theme: {
     themes: {
       light: {
diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss
index 2514ce279..d3441aff1 100644
--- a/docs/.vitepress/theme/style.scss
+++ b/docs/.vitepress/theme/style.scss
@@ -71,7 +71,7 @@
 }
 
 /**
- * Overrides
+ * Vitepress Overrides
  * -------------------------------------------------------------------------- */
 
 :root {
@@ -118,10 +118,45 @@
   margin-top: 2rem;
 }
 
+
+/**
+ * Vuetify Overrides
+ * -------------------------------------------------------------------------- */
+
 .v-icon svg {
   fill: currentColor;
 }
 
+.v-slider-track__tick-label {
+  font-size: 12px;
+}
+
+.v-row.no-v-gutters {
+  margin-top: 0;
+  margin-bottom: 0;
+
+  .v-col {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+.v-card {
+  display: flex;
+  flex-direction: column;
+
+  .v-tabs {
+    flex: none;
+  }
+}
+
+.v-file-input .v_field__input {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+  white-space: nowrap;
+}
+
 /**
  * Sponsors
  * -------------------------------------------------------------------------- */
@@ -139,10 +174,6 @@
   margin: 0 0.5em;
 }
 
-.psv-container {
-  background: var(--vp-c-bg) !important;
-}
-
 /**
  * Options properties
  * -------------------------------------------------------------------------- */
diff --git a/docs/playground.md b/docs/playground.md
index c82e5d768..04020b554 100644
--- a/docs/playground.md
+++ b/docs/playground.md
@@ -1,11 +1,14 @@
-# Playground
+---
+footer: false
+aside: false
+---
 
-Coming soon™
+# Playground
 
-<!--
-This page allows to test (almost) all options of Photo Sphere Viewer with your own panorama (equirectangular only). You can also add markers interractively and export them.
+<script setup>
+import Playground from './.vitepress/components/Playground.vue';
+</script>
 
 <ClientOnly>
   <Playground/>
 </ClientOnly>
--->
diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
index b346d1774..8f448031c 100644
--- a/packages/core/src/model.ts
+++ b/packages/core/src/model.ts
@@ -96,7 +96,7 @@ export type AnimateOptions = Partial<ExtendedPosition> & {
  * Crop information of an equirectangular panorama
  */
 export type PanoData = {
-    isEquirectangular: true;
+    isEquirectangular?: true;
     fullWidth: number;
     fullHeight: number;
     croppedWidth: number;