@qispace/vue3-player 0.0.5

package/src/components/virtualTourV2/ScrollHelper.vue

@@ -0,0 +1,74 @@
+<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

@@ -0,0 +1,355 @@
+<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

@@ -0,0 +1,36 @@
+<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

@@ -0,0 +1,163 @@
+<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

@@ -0,0 +1,50 @@
+<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>