@qispace/vue3-player 0.0.15 → 0.1.1

package/src/components/virtualTourV2/ScrollHelper.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="scroll-helper-wrapper" @click="scroll">
-    <div>See Details</div>
-    <span id="moving-arrow"></span>
-  </div>
-</template>
-<script>
-export default {
-  name: 'ScrollHelper',
-  props: {
-    scrollTo: {
-      type: String,
-      default: () => {
-        return 'content'
-      },
-    },
-  },
-  methods: {
-    scroll() {
-      const scrollTo = document.getElementById(this.scrollTo).offsetTop
-      window.scrollTo({ top: scrollTo, behavior: 'smooth' })
-    },
-  },
-}
-</script>
-<style scoped>
-span#moving-arrow {
-  display: block;
-  animation-name: tween;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  background-image: url('data:image/svg+xml,\00003csvg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\00003cpath fill="%2370757a" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z">\00003c/path>\00003c/svg>');
-  display: inline-block;
-  height: 24px;
-  width: 24px;
-}
-
-@keyframes tween {
-  from {
-    background-position: 0px 0px;
-  }
-  to {
-    background-position: 0px 4px;
-  }
-}
-
-.scroll-helper-wrapper {
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-  color: #fff;
-  background: rgb(0, 0, 0);
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 10%,
-    rgba(0, 0, 0, 1) 50%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  text-align: center;
-  visibility: hidden;
-  bottom: 0;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-}
-
-@media only screen and (max-width: 600px) {
-  .scroll-helper-wrapper {
-    visibility: visible;
-  }
-}
-</style>

package/src/components/virtualTourV2/SettingsUI.vue

@@ -1,355 +0,0 @@
-<template>
-  <div class="player-settings-ui">
-    <form id="settings-ui-form">
-      <div class="form-inputs">
-        <div v-for="(value, name, index) in allSettings" :key="index" d-block>
-          <v-slider
-            v-if="value.type === 'slider'"
-            v-model="allSettings[name].value"
-            @change="updateSettings"
-            :max="value.max"
-            :min="value.min"
-            :step="value.step"
-          >
-            <template v-slot:prepend>
-              <div class="setting-label">
-                {{ value.label }}
-              </div>
-            </template>
-            <template v-slot:append>
-              <div>
-                <v-text-field
-                  v-model="allSettings[name].value"
-                  hide-details
-                  dense
-                  outlined
-                  type="number"
-                  :max="value.max"
-                  :min="value.min"
-                  :step="value.step"
-                  style="width: 90px"
-                  @change="updateSettings"
-                ></v-text-field>
-              </div>
-            </template>
-          </v-slider>
-
-          <v-checkbox
-            v-if="value.type === 'boolean'"
-            v-model="allSettings[name].value"
-            @change="updateSettings"
-          >
-            <template v-slot:prepend>
-              <div class="setting-label">
-                {{ value.label }}
-              </div>
-            </template>
-            <template v-slot:append>
-              <div>
-                {{ value.value }}
-              </div>
-            </template>
-          </v-checkbox>
-          <div
-            class="d-flex"
-            v-if="value.type === 'color'"
-            :max="value.max"
-            :min="value.min"
-            :step="value.step"
-          >
-            <div class="setting-label">
-              {{ value.label }}
-            </div>
-            <div class="flex-grow-1 flex-shrink-0">
-              <input
-                v-model="allSettings[name].value"
-                type="color"
-                @change="updateSettings"
-              />
-            </div>
-            <div>
-              <v-text-field
-                v-model="allSettings[name].value"
-                hide-details
-                dense
-                outlined
-                readonly
-                type="text"
-                style="width: 90px"
-                @change="updateSettings"
-              ></v-text-field>
-            </div>
-          </div>
-          <div v-if="value.type === 'lut'" d-block class="mt-3">
-            <div class="d-flex justify-space-between">
-              <div class="setting-label">
-                {{ value.label }}
-              </div>
-              <div>
-                <v-btn
-                  class="ml-2"
-                  x-small
-                  @click="allSettings[name].value = null"
-                >
-                  Clear Lut
-                </v-btn>
-              </div>
-            </div>
-            <div>
-              <div class="mt-5 d-block" style="width: 300px">
-                <div>
-                  <v-select
-                    v-model="allSettings[name].value"
-                    :items="value.items"
-                    item-title="title"
-                    item-value="value"
-                    dense
-                    label="Select Lut"
-                    @change="updateSettings"
-                  ></v-select>
-                </div>
-              </div>
-              <div>
-                <div class="setting-label">Enter Lut URL:</div>
-                <div class="d-block" style="width: 300px">
-                  <div>
-                    <v-text-field
-                      v-model="allSettings[name].value"
-                      hide-details
-                      dense
-                      type="url"
-                      @change="updateSettings"
-                    ></v-text-field>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="form-buttons">
-        <v-btn @click="resetForm()">Reset</v-btn>
-        <v-btn class="ml-2" @click="downloadSettings()">
-          Download Json
-          <v-icon color="black darken-1">mdi-download</v-icon>
-        </v-btn>
-        <v-btn class="ml-2" @click="saveSettings()">
-          Save Settings
-          <v-icon color="black darken-1">mdi-save</v-icon>
-        </v-btn>
-      </div>
-    </form>
-  </div>
-</template>
-
-<script>
-function Hex2Rgb(color) {
-  // Convert hex color to RGB and then normalize to 0-1 range
-  const r = parseInt(color.substr(1, 2), 16) / 255
-  const g = parseInt(color.substr(3, 2), 16) / 255
-  const b = parseInt(color.substr(5, 2), 16) / 255
-
-  return [r, g, b]
-}
-
-function ToHex(c) {
-  var hex = c.toString(16)
-  return hex.length == 1 ? '0' + hex : hex
-}
-
-function RGB2Hex([r, g, b]) {
-  return (
-    '#' +
-    ToHex(parseInt(r * 255)) +
-    ToHex(parseInt(g * 255)) +
-    ToHex(parseInt(b * 255))
-  )
-}
-
-function initialSettings(data) {
-  const PredefinedLuts = [
-    'Cool 5',
-    'Cool 10',
-    'Cool 15',
-    'Cool 20',
-    'Cool 25',
-    'Warm 20',
-    'Warm 25',
-    'Warm 10',
-    'Warm 15',
-    'Warm 5',
-    'bw',
-  ]
-
-  let initData = {
-    temperature: 6500,
-    targetLuminance: 1,
-    exposureFovScale: 0.6,
-    UNREAL_BLOOM_ENABLED: true,
-    sharpenFilter_amount: 0.6,
-    UNREAL_BLOOOM_STRENGTH: 0.3,
-    TRANSITION_MOVEMENT_SCALE: 1.3,
-    whitePoint: [1, 1, 1],
-    lut: '',
-    ...data,
-  }
-
-  return {
-    exposureFovScale: {
-      label: 'Exposure Fov Scale',
-      type: 'slider',
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: initData.exposureFovScale,
-    },
-    targetLuminance: {
-      label: 'Target Luminance',
-      type: 'slider',
-      min: 0,
-      max: 15,
-      step: 0.1,
-      value: initData.targetLuminance,
-    },
-    sharpenFilter_amount: {
-      label: 'Sharpen Filter Amount',
-      type: 'slider',
-      min: 0,
-      max: 100,
-      step: 0.1,
-      value: initData.sharpenFilter_amount,
-    },
-    UNREAL_BLOOM_ENABLED: {
-      label: 'Enable Bloom?',
-      type: 'boolean',
-      value: initData.UNREAL_BLOOM_ENABLED,
-    },
-    UNREAL_BLOOOM_STRENGTH: {
-      label: 'Bloom Strength',
-      type: 'slider',
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: initData.UNREAL_BLOOOM_STRENGTH,
-    },
-    TRANSITION_MOVEMENT_SCALE: {
-      label: 'Transition Movement Speed',
-      type: 'slider',
-      min: 0.2,
-      max: 25,
-      step: 0.1,
-      value: initData.TRANSITION_MOVEMENT_SCALE,
-    },
-    temperature: {
-      label: 'Temperature / White Balance',
-      type: 'slider',
-      min: 1000,
-      max: 12000,
-      step: 1,
-      value: initData.temperature,
-    },
-    whitePoint: {
-      label: 'White Point',
-      type: 'color',
-      min: null,
-      max: null,
-      step: null,
-      value: RGB2Hex(initData.whitePoint),
-    },
-    lut: {
-      label: 'Lut',
-      type: 'lut',
-      items: PredefinedLuts.map((item) => {
-        return {
-          text: item,
-          value: `https://cdn.visuado.com/luts/${item}.png`,
-        }
-      }),
-      value: initData.lut,
-    },
-  }
-}
-export default {
-  name: 'SettingsUI',
-  emits: ['update-settings', 'save-settings'],
-  props: {
-    projectSlug: { type: String, required: true },
-    initialSettings: { type: Object, default: () => undefined },
-  },
-  data() {
-    return {
-      allSettings: initialSettings(this.initialSettings),
-    }
-  },
-  watch: {
-    allSettings: {
-      handler() {
-        this.updateSettings()
-      },
-      deep: true,
-    },
-  },
-  computed: {
-    settingsToUpdate() {
-      let settingsToUpdate = {}
-
-      for (const [key, value] of Object.entries(this.allSettings)) {
-        if (key === 'whitePoint') {
-          settingsToUpdate[key] = Hex2Rgb(value.value)
-        } else {
-          settingsToUpdate[key] = value.value
-        }
-      }
-
-      return settingsToUpdate
-    },
-  },
-  methods: {
-    updateSettings() {
-      this.$emit('update-settings', this.settingsToUpdate)
-    },
-    downloadSettings() {
-      const element = document.createElement('a')
-      element.href = URL.createObjectURL(
-        new Blob([JSON.stringify(this.settingsToUpdate, null, 2)])
-      )
-
-      const filename = `player-settings-${this.projectSlug}-${Date.now()}.json`
-      element.download = filename
-      element.style.display = 'none'
-      document.body.appendChild(element)
-      element.click()
-      document.body.removeChild(element)
-    },
-    saveSettings() {
-      this.$emit('save-settings', this.settingsToUpdate)
-    },
-    resetForm() {
-      this.allSettings = initialSettings()
-      this.$emit('update-settings', this.settingsToUpdate)
-    },
-  },
-}
-</script>
-<style scoped>
-.settings-panel {
-  min-width: 500px;
-  height: 500px;
-  overflow-y: scroll;
-}
-
-form#settings-ui-form {
-  background: rgb(255, 255, 255, 0.6);
-  border-radius: 5px;
-  padding: 10px;
-}
-
-#settings-ui-form .form-inputs {
-  height: 60vh;
-  overflow-y: scroll;
-  padding-bottom: 50px;
-  scrollbar-color: #0c0e4a transparent;
-  scrollbar-width: thin;
-  padding-right: 20px;
-}
-</style>

package/src/components/virtualTourV2/SingleImage.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="static-image-wrapper">
-    <div class="img-div" :class="[aspectRatio]" :style="style"></div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'StaticImage',
-  props: {
-    image: { type: String, required: true },
-    aspectRatio: { type: String, default: () => 'wide' },
-  },
-  computed: {
-    style() {
-      return { 'background-image': `url("${encodeURI(this.image)}")` }
-    },
-  },
-}
-</script>
-<style scoped>
-.img-div {
-  position: absolute;
-  display: block;
-  height: 100%;
-  width: 100%;
-  background-size: cover;
-  background-position: center center;
-  z-index: 2;
-  left: 0;
-  top: 0;
-}
-
-.static-image-wrapper {
-  background: #fff;
-}
-</style>

package/src/components/virtualTourV2/SocialShare.vue

@@ -1,163 +0,0 @@
-<template>
-  <div>
-    <v-tooltip elevation="2" top attach>
-      <template #activator="{ on: tooltip }">
-        <v-btn
-          density="comfortable"
-          elevation="1"
-          icon="mdi-share-variant"
-          @click="showSocialShare = !showSocialShare"
-          v-on="{ ...tooltip }"
-        >
-        </v-btn>
-      </template>
-      <span>{{ i18n.getLabel("share") }}</span>
-    </v-tooltip>
-    <v-dialog id="share-box" width="400" v-model="showSocialShare">
-      <v-card>
-        <v-toolbar elevation="0">
-          <v-btn
-            size="x-small"
-            icon="mdi-close"
-            @click="showSocialShare = false"
-          >
-          </v-btn>
-          <v-toolbar-title>
-            {{ i18n.getLabel("share") }}
-          </v-toolbar-title>
-          <v-spacer></v-spacer>
-        </v-toolbar>
-        <v-card-text class="mt-5">
-          <p id="share-btns-wrapper" class="text-center">
-            <v-tooltip location="top">
-              <template v-slot:activator="{ props }">
-                <v-btn
-                  depressed
-                  fab
-                  light
-                  icon="mdi-facebook"
-                  v-bind="props"
-                  @click="shareToFacebook"
-                >
-                </v-btn>
-              </template>
-              <span>{{ i18n.getLabel("share-to-facebook") }}</span>
-            </v-tooltip>
-            <v-tooltip location="top">
-              <template v-slot:activator="{ props }">
-                <v-btn
-                  depressed
-                  fab
-                  light
-                  icon="mdi-linkedin"
-                  v-bind="props"
-                  @click="shareToLinkedin"
-                >
-                </v-btn>
-              </template>
-              <span>{{ i18n.getLabel("share-to-linkedin") }}</span>
-            </v-tooltip>
-            <v-tooltip location="top">
-              <template v-slot:activator="{ props }">
-                <v-btn
-                  depressed
-                  fab
-                  light
-                  icon="mdi-twitter"
-                  v-bind="props"
-                  @click="shareToTwitter"
-                >
-                </v-btn>
-              </template>
-              <span>{{ i18n.getLabel("share-to-twitter") }}</span>
-            </v-tooltip>
-            <v-tooltip location="top">
-              <template v-slot:activator="{ props }">
-                <v-btn
-                  depressed
-                  fab
-                  light
-                  icon="mdi-email"
-                  link
-                  :href="`mailto:?body=${currentURL}`"
-                  v-bind="props"
-                >
-                </v-btn>
-              </template>
-              <span>{{ i18n.getLabel("share-via-email") }}</span>
-            </v-tooltip>
-            <v-tooltip location="top">
-              <template v-slot:activator="{ props }">
-                <v-btn
-                  depressed
-                  fab
-                  light
-                  icon="mdi-content-copy"
-                  @click="copyLink"
-                  v-bind="props"
-                >
-                </v-btn>
-              </template>
-              <span>{{ i18n.getLabel("copy-link") }}</span>
-            </v-tooltip>
-            <v-spacer></v-spacer>
-          </p>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "QiVirtualTourSocialShare",
-  inject: ["i18n"],
-  data() {
-    return {
-      showSocialShare: false,
-      currentURL: location.href,
-    };
-  },
-  methods: {
-    shareToFacebook() {
-      window.open(
-        "https://www.facebook.com/sharer/sharer.php?u=" +
-          encodeURIComponent(location.href),
-        "facebook-share-dialog",
-        "width=626,height=436"
-      );
-      return false;
-    },
-    shareToTwitter() {
-      window.open(
-        "https://twitter.com/intent/tweet?text=" +
-          encodeURIComponent(location.href),
-        "twiter-share-dialog",
-        "width=626,height=436"
-      );
-      return false;
-    },
-    shareToLinkedin() {
-      window.open(
-        "https://www.linkedin.com/sharing/share-offsite/?url=" +
-          encodeURIComponent(location.href),
-        "linkedin-share-dialog",
-        "width=626,height=736"
-      );
-      return false;
-    },
-    copyLink() {
-      navigator.clipboard.writeText(location.href);
-    },
-  },
-};
-</script>
-<style scoped>
-#share-btns-wrapper button {
-  margin: 0 8px;
-}
-.v-btn {
-  background-color: #fff;
-  pointer-events: all;
-}
-</style>

package/src/components/virtualTourV2/TimeOfDay.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="d-flex flex-column align-center justify-center clock-face">
-    <div class="clock-icon">
-      <v-img :src="sunIcon" aspect-ratio="1" />
-    </div>
-    <div class="clock-value grey--text text--darken-3">{{ displayValue }}</div>
-  </div>
-</template>
-
-<script>
-import sunIcon from '@/lib/virtualTour/textures/tod-sun.png'
-
-function padZeros(n) {
-  return ('0' + n).slice(-2)
-}
-
-export default {
-  name: 'TimeOfDay',
-  props: {
-    hours: { type: Number, default: 0 },
-    minutes: { type: Number, default: 0 },
-  },
-  data() {
-    return { sunIcon }
-  },
-  computed: {
-    displayValue() {
-      return [padZeros(this.hours), ':', padZeros(this.minutes)].join('')
-    },
-  },
-}
-</script>
-
-<style scoped>
-.clock-face {
-  margin-left: 10px;
-  height: 50px;
-  width: 50px;
-  background-color: white;
-  border-radius: 50%;
-}
-
-.clock-value {
-  font-size: 11px;
-}
-
-.clock-icon {
-  width: 18px;
-}
-</style>