@zenvor/view360 4.0.0-beta.7-fork.1

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2023-present NAVER Corp.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,88 @@
+<div align="center" style="padding: 60px 0 0;">
+
+![](https://user-images.githubusercontent.com/3903575/38671092-6a4494a0-3e85-11e8-9eca-9619a2545801.gif)
+
+<div style="max-width: 100%; font-size: 64px;">
+  <a href="https://naver.github.io/egjs-view360/">View360</a>
+</div>
+
+<h3 align="center" style="max-width: 100%;">
+360° panorama image / video viewer built with Typescript
+</h3>
+
+<div style="display: inline-block; max-width: 400px; padding: 20px 0">
+
+```shell
+npm install @egjs/view360@next
+```
+
+</div>
+</div>
+
+<p align="center" style="max-width: 100%;">
+  <a href="https://www.npmjs.com/package/@egjs/view360" target="_blank" rel="noopener noreferrer">
+    <img alt="npm" src="https://img.shields.io/npm/v/@egjs/view360/next?logo=npm"></img>
+  </a>
+  <a href="https://www.npmjs.com/package/@egjs/view360" target="_blank" rel="noopener noreferrer">
+    <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@egjs/view360?label=%F0%9F%92%BE%20minzipped"></img>
+  </a>
+  <a href="https://github.com/naver/egjs-view360/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">
+    <img alt="License" src="https://img.shields.io/github/license/naver/egjs-view360?label=%F0%9F%93%9C%20license" />
+  </a>
+  <a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">
+    <img alt="Typescript" src="https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80&style=flat-square&logo=typescript" />
+  </a>
+</p>
+
+<p align="center" style="line-height: 2;">
+  <img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&logo=Angular&color=dd0031" />
+  <img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&logo=React&logoColor=white&color=61dafb" />
+  <img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&logo=Vue.js&logoColor=white&color=42b883" />
+  <img alt="Svelte" src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&logo=svelte&logoColor=white&color=FF3E00" />
+</p>
+
+<h3 align="center">
+  <a href="https://naver.github.io/egjs-view360/">Demo</a> / <a href="https://naver.github.io/egjs-view360/docs/api/Class/View360">API</a> / <a href="https://naver.github.io/egjs/"><img height="20" src="https://naver.github.io/egjs/img/logo.svg"/> Other components</a>
+</h3>
+
+## Supported Browsers
+> With Promise polyfill
+
+|<img width="20" src="https://simpleicons.org/icons/internetexplorer.svg" alt="IE" />|<img width="20" src="https://simpleicons.org/icons/googlechrome.svg" alt="Chrome" />|<img width="20" src="https://simpleicons.org/icons/firefoxbrowser.svg" alt="Firefox" />|<img width="20" src="https://simpleicons.org/icons/safari.svg" alt="Safari" />|<img width="20" src="https://simpleicons.org/icons/apple.svg" alt="iOS" />|<img width="20" src="https://simpleicons.org/icons/android.svg" alt="Android" />|
+|---|---|---|---|---|---|
+|11+|latest|latest|latest|9+|5.0+|
+
+## 📦 Packages
+|Package|Version|Description|
+|:-----:|:-----:|:-----:|
+|[**@egjs/ngx-view360**](https://github.com/naver/egjs-view360/blob/master/packages/ngx-view360/README.md)|<a href="https://www.npmjs.com/package/@egjs/ngx-view360/next" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/ngx-view360/next?style=flat-square&color=dd0031&label=%F0%9F%94%96" alt="version" /></a>|[Angular](https://angular.io/) port of @egjs/view360|
+|[**@egjs/react-view360**](https://github.com/naver/egjs-view360/blob/master/packages/react-view360/README.md)|<a href="https://www.npmjs.com/package/@egjs/react-view360" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/react-view360/next?style=flat-square&color=00d8ff&label=%F0%9F%94%96" alt="version" /></a>|[React](https://reactjs.org/) port of @egjs/view360|
+|[**@egjs/vue-view360**](https://github.com/naver/egjs-view360/blob/master/packages/vue-view360/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue-view360" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue-view360/next?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|[Vue.js@2](https://vuejs.org/v2/guide/index.html) port of @egjs/view360|
+|[**@egjs/vue3-view360**](https://github.com/naver/egjs-view360/blob/master/packages/vue3-view360/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue3-view360" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue3-view360/next?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|[Vue.js@3](https://v3.vuejs.org/) port of @egjs/view360|
+|[**@egjs/svelte-view360**](https://github.com/naver/egjs-view360/blob/master/packages/svelte-view360/README.md)|<a href="https://www.npmjs.com/package/@egjs/svelte-view360" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/svelte-view360/next?style=flat-square&color=FF3E00&label=%F0%9F%94%96" alt="version" /></a>|[Svelte](https://svelte.dev/) port of @egjs/view360|
+
+## License
+egjs-view360 is released under the [MIT license](https://github.com/naver/egjs-view360/blob/master/LICENSE).
+
+
+```
+Copyright (c) 2023-present NAVER Corp.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```

package/css/base.css

@@ -0,0 +1,19 @@
+.view360-container {
+  position: relative;
+  touch-action: pan-y;
+  overflow: hidden;
+}
+
+.view360-canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  -ms-user-select: none;
+      user-select: none;
+  -webkit-user-drag: none;
+}
+.view360-canvas.ctx-lost {
+  text-indent: 0.001px;
+}

package/css/base.min.css

@@ -0,0 +1 @@
+.view360-container{position:relative;touch-action:pan-y;overflow:hidden}.view360-canvas{position:absolute;left:0;top:0;width:100%;height:100%;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.view360-canvas.ctx-lost{text-indent:.001px}

package/css/control-bar.css

@@ -0,0 +1,329 @@
+.view360-controls {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  pointer-events: none;
+  -ms-user-select: none;
+      user-select: none;
+  -webkit-user-drag: none;
+  z-index: 1;
+}
+
+.view360-main.view360-vr-presenting .view360-controls {
+  display: none;
+}
+
+.view360-controls-float-left,
+.view360-controls-float-right {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+}
+
+.view360-controls-float-left {
+  left: 0px;
+  top: 0px;
+}
+
+.view360-controls-float-right {
+  right: 0px;
+  top: 0px;
+}
+
+.view360-controls-main {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  opacity: 1;
+  transition: none;
+}
+.view360-controls-main.view360-controls-hidden {
+  opacity: 0;
+  transition: opacity 500ms;
+}
+.view360-controls-main.view360-controls-hidden * {
+  pointer-events: none;
+}
+.view360-controls-main.view360-controls-fixed {
+  opacity: 1;
+}
+
+.view360-controls-background {
+  width: 100%;
+  height: calc(100% + 32px);
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background-image: linear-gradient(0deg, rgb(50, 50, 50), rgba(50, 50, 50, 0));
+}
+.view360-controls-background.view360-controls-hidden {
+  display: none;
+}
+
+.view360-controls-mid {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+}
+
+.view360-controls-left {
+  display: flex;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+}
+
+.view360-controls-right {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.view360-controls-bottom {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.view360-controls-button {
+  display: inline-block;
+  background-color: transparent;
+  cursor: pointer;
+  border: 0;
+  position: relative;
+  background-size: 24px 24px;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+  pointer-events: all;
+  border-radius: 20px;
+  transition: opacity 250ms;
+  width: 40px;
+  height: 40px;
+  margin: 6px;
+  padding: 8px;
+  opacity: 0.8;
+}
+.view360-controls-button:hover {
+  opacity: 1;
+}
+.view360-controls-button.view360-controls-vr {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48' viewBox='0 0 100 100'%3E%3Cg%3E%3Cpath d='M5,30 L95,30 L95,80 L55,80 L50,70 L45,80 L5,80 L5,30' fill='transparent' stroke='%23fff' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M5,30 L15,10 L85,10 L95,30' fill='transparent' stroke='%23fff' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='55' r='10' stroke='%23fff' stroke-width='8' fill='transparent' /%3E%3Ccircle cx='70' cy='55' r='10' stroke='%23fff' stroke-width='8' fill='transparent' /%3E%3C/g%3E%3C/svg%3E");
+}
+.view360-controls-button {
+  /* * Following background-image svgs are from tabler icons
+  * * https://github.com/tabler/tabler-icons
+  * *
+  * * tabler icons is licensed under the MIT license
+  * * https://github.com/tabler/tabler-icons/blob/master/LICENSE
+  * */
+}
+.view360-controls-button.view360-controls-play {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 4v16l13 -8z'%3E%3C/path%3E%3C/svg%3E");
+}
+.view360-controls-button.view360-controls-pause {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Crect x='6' y='5' width='4' height='14' rx='1'%3E%3C/rect%3E%3Crect x='14' y='5' width='4' height='14' rx='1'%3E%3C/rect%3E%3C/svg%3E");
+}
+.view360-controls-button.view360-controls-unmuted {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M15 8a5 5 0 0 1 0 8'%3E%3C/path%3E%3Cpath d='M17.7 5a9 9 0 0 1 0 14'%3E%3C/path%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5'%3E%3C/path%3E%3C/svg%3E");
+}
+.view360-controls-button.view360-controls-muted {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5'%3E%3C/path%3E%3Cpath d='M16 10l4 4m0 -4l-4 4'%3E%3C/path%3E%3C/svg%3E");
+}
+.view360-controls-button.view360-controls-fullscreen {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 8v-2a2 2 0 0 1 2 -2h2'%3E%3C/path%3E%3Cpath d='M4 16v2a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cpath d='M16 20h2a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3C/svg%3E");
+}
+.view360-controls-button.view360-controls-fullscreen-exit {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M15 19v-2a2 2 0 0 1 2 -2h2'%3E%3C/path%3E%3Cpath d='M15 5v2a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3Cpath d='M5 15h2a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cpath d='M5 9h2a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3C/svg%3E");
+}
+.view360-controls-button {
+  /* * Following background-image svgs are from Google Material Icons
+  * * https://fonts.google.com/icons
+  * *
+  * * Material Design Icons is licensed under the Apache License 2.0
+  * * https://github.com/google/material-design-icons/blob/master/LICENSE
+  * */
+}
+.view360-controls-button.view360-controls-gyro-enabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23fff' d='M22.5 7.6v2.95q-1 .15-1.975.475-.975.325-1.875.825L16.5 9.7q1.35-.9 2.875-1.4 1.525-.5 3.125-.7Zm15.35 15.35q-.2 1.6-.7 3.125-.5 1.525-1.4 2.875L33.6 26.8q.5-.9.825-1.875.325-.975.475-1.975Zm3.8 20.45L1.3 3.05 3.45.9 43.8 41.25ZM7 41.4q-1.25 0-2.125-.875T4 38.4v-8.6h3v8.6h8.6v3ZM41 13V4.4h-8.6v-3H41q1.25 0 2.125.875T44 4.4V13ZM4 13V4.4q0-.55.2-1.1t.6-1l2.1 2.1V13Zm28.4 28.4v-3h8.5l2.1 2.1q-.4.45-.925.675-.525.225-1.075.225Zm-21.2-37-3-3h7.4v3ZM44 37.2l-3-3v-4.4h3ZM10.15 22.95h2.95q.5 3.7 3.1 6.3 2.6 2.6 6.3 3.1v2.95q-4.9-.55-8.35-4-3.45-3.45-4-8.35Zm4-11.35 2.1 2.05q-1.3 1.3-2.1 2.9-.8 1.6-1.05 3.4h-2.95q.25-2.4 1.275-4.525Q12.45 13.3 14.15 11.6ZM31.8 29.2l2.05 2.1q-1.7 1.7-3.825 2.725Q27.9 35.05 25.5 35.3v-2.95q1.8-.25 3.4-1.05 1.6-.8 2.9-2.1ZM25.5 7.6q4.9.55 8.35 4 3.45 3.45 4 8.35H34.9q-.5-3.7-3.1-6.3-2.6-2.6-6.3-3.1Z'/%3E%3C/svg%3E");
+}
+.view360-controls-button.view360-controls-gyro-disabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23fff' d='M7 44q-1.2 0-2.1-.9Q4 42.2 4 41v-8.6h3V41h8.6v3ZM4 15.6V7q0-1.2.9-2.1Q5.8 4 7 4h8.6v3H7v8.6Zm18.5 22.25q-4.9-.55-8.35-4-3.45-3.45-4-8.35h2.95q.5 3.7 3.125 6.3 2.625 2.6 6.275 3.1ZM10.15 22.5q.55-4.9 4-8.35 3.45-3.45 8.35-4v2.95q-3.7.5-6.3 3.1-2.6 2.6-3.1 6.3Zm13.85 5q-1.45 0-2.475-1.025Q20.5 25.45 20.5 24q0-1.45 1.025-2.475Q22.55 20.5 24 20.5q1.45 0 2.475 1.025Q27.5 22.55 27.5 24q0 1.45-1.025 2.475Q25.45 27.5 24 27.5Zm1.5 10.35V34.9q3.7-.5 6.3-3.125 2.6-2.625 3.1-6.275h2.95q-.55 4.9-4 8.35-3.45 3.45-8.35 4Zm9.4-15.35q-.5-3.7-3.1-6.3-2.6-2.6-6.3-3.1v-2.95q4.9.55 8.35 4 3.45 3.45 4 8.35ZM32.4 44v-3H41v-8.6h3V41q0 1.2-.9 2.1-.9.9-2.1.9ZM41 15.6V7h-8.6V4H41q1.2 0 2.1.9.9.9.9 2.1v8.6Z'/%3E%3C/svg%3E");
+}
+
+.view360-controls-time {
+  display: inline-block;
+  vertical-align: top;
+  white-space: nowrap;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-weight: normal;
+  font-size: 14px;
+  z-index: 1;
+}
+.view360-controls-time:first-child {
+  padding: 0 16px;
+}
+
+.view360-controls-progress {
+  flex: 1;
+  width: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+.view360-controls-progress:not(:first-child) {
+  padding-left: 0;
+}
+
+.view360-controls-bottom .view360-controls-progress {
+  padding-bottom: 20px;
+}
+
+.view360-controls-volume {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  transition: width 250ms, background-color 250ms;
+  overflow: hidden;
+}
+.view360-controls-volume:not(:disabled):hover, .view360-controls-volume:not(:disabled).view360-controls-fixed {
+  width: 112px;
+}
+.view360-controls-volume .view360-range {
+  flex: 1;
+  height: 100%;
+  padding: 0;
+}
+.view360-controls-volume .view360-range .view360-range-track {
+  width: calc(100% - 12px);
+  transform: translateX(-4px);
+}
+.view360-controls-volume .view360-controls-button {
+  margin: 0;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.view360-controls-volume:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.view360-controls-volume:disabled * {
+  pointer-events: none;
+}
+
+.view360-controls-pie {
+  width: 36px;
+  height: 36px;
+  margin: 6px;
+  padding: 0;
+  border-radius: 18px;
+  opacity: 0.8;
+  pointer-events: all;
+  cursor: pointer;
+  color: #fff;
+  position: relative;
+  transition: opacity 250ms;
+}
+.view360-controls-pie > svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.view360-controls-pie:hover {
+  opacity: 1;
+}
+
+.view360-range {
+  position: relative;
+  cursor: pointer;
+  pointer-events: all;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  touch-action: pan-y;
+}
+.view360-range:hover .view360-range-thumb {
+  opacity: 1;
+}
+
+.view360-range-track {
+  width: 100%;
+  height: 4px;
+  border-radius: 4px;
+  position: relative;
+  background-color: rgba(230, 230, 230, 0.4);
+}
+
+.view360-range-filler,
+.view360-range-load {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 100%;
+  border-radius: 4px;
+}
+
+.view360-range-filler {
+  background-color: #fff;
+}
+
+.view360-range-load {
+  background-color: #757575;
+}
+
+.view360-range-thumb {
+  width: 13px;
+  height: 13px;
+  position: absolute;
+  top: -5px;
+  left: -6.5px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-sizing: border-box;
+  transition: opacity 250ms;
+  opacity: 0;
+}
+.view360-range-thumb.view360-controls-fixed {
+  opacity: 1;
+}
+
+.view360-controls-unavailable {
+  display: none !important;
+}
+
+@media screen and (max-width: 768px) {
+  .view360-controls-button {
+    background-size: 18px 18px;
+    width: 30px;
+    height: 30px;
+    margin: 4.5px;
+    padding: 6px;
+    border-radius: 15px;
+  }
+  .view360-controls-volume .view360-controls-button {
+    width: 18px;
+    height: 18px;
+  }
+  .view360-controls-volume:not(:disabled):hover, .view360-controls-volume:not(:disabled).view360-controls-fixed {
+    width: 84px;
+  }
+  .view360-controls-pie {
+    width: 27px;
+    height: 27px;
+    margin: 4.5px;
+    padding: 0;
+    border-radius: 13.5px;
+  }
+}

package/css/control-bar.min.css

@@ -0,0 +1 @@
+.view360-controls{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;border:0;pointer-events:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;z-index:1}.view360-main.view360-vr-presenting .view360-controls{display:none}.view360-controls-float-left,.view360-controls-float-right{position:absolute;display:flex;flex-direction:column}.view360-controls-float-left{left:0;top:0}.view360-controls-float-right{right:0;top:0}.view360-controls-main{position:absolute;bottom:0;left:0;width:100%;opacity:1;transition:none}.view360-controls-main.view360-controls-hidden{opacity:0;transition:opacity .5s}.view360-controls-main.view360-controls-hidden *{pointer-events:none}.view360-controls-main.view360-controls-fixed{opacity:1}.view360-controls-background{width:100%;height:calc(100% + 32px);position:absolute;left:0;bottom:0;background-image:linear-gradient(0deg,#323232,rgba(50,50,50,0))}.view360-controls-background.view360-controls-hidden{display:none}.view360-controls-mid{display:flex;flex-direction:row;position:relative}.view360-controls-left{display:flex;flex:1;justify-content:flex-start;align-items:center;flex-direction:row}.view360-controls-right{display:flex;align-items:center;flex-direction:row}.view360-controls-bottom{display:flex;align-items:center;flex-direction:row}.view360-controls-button{display:inline-block;background-color:transparent;cursor:pointer;border:0;position:relative;background-size:24px 24px;background-origin:content-box;background-repeat:no-repeat;box-sizing:border-box;pointer-events:all;border-radius:20px;transition:opacity 250ms;width:40px;height:40px;margin:6px;padding:8px;opacity:.8}.view360-controls-button:hover{opacity:1}.view360-controls-button.view360-controls-vr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48' viewBox='0 0 100 100'%3E%3Cg%3E%3Cpath d='M5,30 L95,30 L95,80 L55,80 L50,70 L45,80 L5,80 L5,30' fill='transparent' stroke='%23fff' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M5,30 L15,10 L85,10 L95,30' fill='transparent' stroke='%23fff' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='55' r='10' stroke='%23fff' stroke-width='8' fill='transparent' /%3E%3Ccircle cx='70' cy='55' r='10' stroke='%23fff' stroke-width='8' fill='transparent' /%3E%3C/g%3E%3C/svg%3E")}.view360-controls-button.view360-controls-play{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 4v16l13 -8z'%3E%3C/path%3E%3C/svg%3E")}.view360-controls-button.view360-controls-pause{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Crect x='6' y='5' width='4' height='14' rx='1'%3E%3C/rect%3E%3Crect x='14' y='5' width='4' height='14' rx='1'%3E%3C/rect%3E%3C/svg%3E")}.view360-controls-button.view360-controls-unmuted{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M15 8a5 5 0 0 1 0 8'%3E%3C/path%3E%3Cpath d='M17.7 5a9 9 0 0 1 0 14'%3E%3C/path%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5'%3E%3C/path%3E%3C/svg%3E")}.view360-controls-button.view360-controls-muted{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5'%3E%3C/path%3E%3Cpath d='M16 10l4 4m0 -4l-4 4'%3E%3C/path%3E%3C/svg%3E")}.view360-controls-button.view360-controls-fullscreen{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 8v-2a2 2 0 0 1 2 -2h2'%3E%3C/path%3E%3Cpath d='M4 16v2a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cpath d='M16 20h2a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3C/svg%3E")}.view360-controls-button.view360-controls-fullscreen-exit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M15 19v-2a2 2 0 0 1 2 -2h2'%3E%3C/path%3E%3Cpath d='M15 5v2a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3Cpath d='M5 15h2a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cpath d='M5 9h2a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3C/svg%3E")}.view360-controls-button.view360-controls-gyro-enabled{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23fff' d='M22.5 7.6v2.95q-1 .15-1.975.475-.975.325-1.875.825L16.5 9.7q1.35-.9 2.875-1.4 1.525-.5 3.125-.7Zm15.35 15.35q-.2 1.6-.7 3.125-.5 1.525-1.4 2.875L33.6 26.8q.5-.9.825-1.875.325-.975.475-1.975Zm3.8 20.45L1.3 3.05 3.45.9 43.8 41.25ZM7 41.4q-1.25 0-2.125-.875T4 38.4v-8.6h3v8.6h8.6v3ZM41 13V4.4h-8.6v-3H41q1.25 0 2.125.875T44 4.4V13ZM4 13V4.4q0-.55.2-1.1t.6-1l2.1 2.1V13Zm28.4 28.4v-3h8.5l2.1 2.1q-.4.45-.925.675-.525.225-1.075.225Zm-21.2-37-3-3h7.4v3ZM44 37.2l-3-3v-4.4h3ZM10.15 22.95h2.95q.5 3.7 3.1 6.3 2.6 2.6 6.3 3.1v2.95q-4.9-.55-8.35-4-3.45-3.45-4-8.35Zm4-11.35 2.1 2.05q-1.3 1.3-2.1 2.9-.8 1.6-1.05 3.4h-2.95q.25-2.4 1.275-4.525Q12.45 13.3 14.15 11.6ZM31.8 29.2l2.05 2.1q-1.7 1.7-3.825 2.725Q27.9 35.05 25.5 35.3v-2.95q1.8-.25 3.4-1.05 1.6-.8 2.9-2.1ZM25.5 7.6q4.9.55 8.35 4 3.45 3.45 4 8.35H34.9q-.5-3.7-3.1-6.3-2.6-2.6-6.3-3.1Z'/%3E%3C/svg%3E")}.view360-controls-button.view360-controls-gyro-disabled{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23fff' d='M7 44q-1.2 0-2.1-.9Q4 42.2 4 41v-8.6h3V41h8.6v3ZM4 15.6V7q0-1.2.9-2.1Q5.8 4 7 4h8.6v3H7v8.6Zm18.5 22.25q-4.9-.55-8.35-4-3.45-3.45-4-8.35h2.95q.5 3.7 3.125 6.3 2.625 2.6 6.275 3.1ZM10.15 22.5q.55-4.9 4-8.35 3.45-3.45 8.35-4v2.95q-3.7.5-6.3 3.1-2.6 2.6-3.1 6.3Zm13.85 5q-1.45 0-2.475-1.025Q20.5 25.45 20.5 24q0-1.45 1.025-2.475Q22.55 20.5 24 20.5q1.45 0 2.475 1.025Q27.5 22.55 27.5 24q0 1.45-1.025 2.475Q25.45 27.5 24 27.5Zm1.5 10.35V34.9q3.7-.5 6.3-3.125 2.6-2.625 3.1-6.275h2.95q-.55 4.9-4 8.35-3.45 3.45-8.35 4Zm9.4-15.35q-.5-3.7-3.1-6.3-2.6-2.6-6.3-3.1v-2.95q4.9.55 8.35 4 3.45 3.45 4 8.35ZM32.4 44v-3H41v-8.6h3V41q0 1.2-.9 2.1-.9.9-2.1.9ZM41 15.6V7h-8.6V4H41q1.2 0 2.1.9.9.9.9 2.1v8.6Z'/%3E%3C/svg%3E")}.view360-controls-time{display:inline-block;vertical-align:top;white-space:nowrap;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;font-size:14px;z-index:1}.view360-controls-time:first-child{padding:0 16px}.view360-controls-progress{flex:1;width:100%;padding:0 16px;box-sizing:border-box}.view360-controls-progress:not(:first-child){padding-left:0}.view360-controls-bottom .view360-controls-progress{padding-bottom:20px}.view360-controls-volume{display:inline-flex;flex-direction:row;align-items:center;transition:width 250ms,background-color 250ms;overflow:hidden}.view360-controls-volume:not(:disabled).view360-controls-fixed,.view360-controls-volume:not(:disabled):hover{width:112px}.view360-controls-volume .view360-range{flex:1;height:100%;padding:0}.view360-controls-volume .view360-range .view360-range-track{width:calc(100% - 12px);transform:translateX(-4px)}.view360-controls-volume .view360-controls-button{margin:0;padding:0;width:24px;height:24px;flex-shrink:0}.view360-controls-volume:disabled{opacity:.5;pointer-events:none}.view360-controls-volume:disabled *{pointer-events:none}.view360-controls-pie{width:36px;height:36px;margin:6px;padding:0;border-radius:18px;opacity:.8;pointer-events:all;cursor:pointer;color:#fff;position:relative;transition:opacity 250ms}.view360-controls-pie>svg{position:absolute;top:0;left:0;width:100%;height:100%}.view360-controls-pie:hover{opacity:1}.view360-range{position:relative;cursor:pointer;pointer-events:all;display:flex;justify-content:center;align-items:center;touch-action:pan-y}.view360-range:hover .view360-range-thumb{opacity:1}.view360-range-track{width:100%;height:4px;border-radius:4px;position:relative;background-color:rgba(230,230,230,.4)}.view360-range-filler,.view360-range-load{position:absolute;left:0;top:0;width:0;height:100%;border-radius:4px}.view360-range-filler{background-color:#fff}.view360-range-load{background-color:#757575}.view360-range-thumb{width:13px;height:13px;position:absolute;top:-5px;left:-6.5px;border-radius:50%;background-color:#fff;box-sizing:border-box;transition:opacity 250ms;opacity:0}.view360-range-thumb.view360-controls-fixed{opacity:1}.view360-controls-unavailable{display:none!important}@media screen and (max-width:768px){.view360-controls-button{background-size:18px 18px;width:30px;height:30px;margin:4.5px;padding:6px;border-radius:15px}.view360-controls-volume .view360-controls-button{width:18px;height:18px}.view360-controls-volume:not(:disabled).view360-controls-fixed,.view360-controls-volume:not(:disabled):hover{width:84px}.view360-controls-pie{width:27px;height:27px;margin:4.5px;padding:0;border-radius:13.5px}}

package/css/helper.css

@@ -0,0 +1,51 @@
+.view360-container.is-square, .view360-container.is-1by1 {
+  padding-top: 100%;
+}
+.view360-container.is-5by4 {
+  padding-top: 80%;
+}
+.view360-container.is-4by3 {
+  padding-top: 75%;
+}
+.view360-container.is-3by2 {
+  padding-top: 66.6666%;
+}
+.view360-container.is-5by3 {
+  padding-top: 60%;
+}
+.view360-container.is-16by9 {
+  padding-top: 56.25%;
+}
+.view360-container.is-2by1 {
+  padding-top: 50%;
+}
+.view360-container.is-3by1 {
+  padding-top: 33.3333%;
+}
+.view360-container.is-4by5 {
+  padding-top: 125%;
+}
+.view360-container.is-3by4 {
+  padding-top: 133.3333%;
+}
+.view360-container.is-2by3 {
+  padding-top: 150%;
+}
+.view360-container.is-3by5 {
+  padding-top: 166.6666%;
+}
+.view360-container.is-9by16 {
+  padding-top: 177.7777%;
+}
+.view360-container.is-1by2 {
+  padding-top: 200%;
+}
+.view360-container.is-1by3 {
+  padding-top: 300%;
+}
+.view360-container:-ms-fullscreen {
+  padding-top: 0%;
+}
+.view360-container:fullscreen {
+  padding-top: 0%;
+}

package/css/helper.min.css

@@ -0,0 +1 @@
+.view360-container.is-1by1,.view360-container.is-square{padding-top:100%}.view360-container.is-5by4{padding-top:80%}.view360-container.is-4by3{padding-top:75%}.view360-container.is-3by2{padding-top:66.6666%}.view360-container.is-5by3{padding-top:60%}.view360-container.is-16by9{padding-top:56.25%}.view360-container.is-2by1{padding-top:50%}.view360-container.is-3by1{padding-top:33.3333%}.view360-container.is-4by5{padding-top:125%}.view360-container.is-3by4{padding-top:133.3333%}.view360-container.is-2by3{padding-top:150%}.view360-container.is-3by5{padding-top:166.6666%}.view360-container.is-9by16{padding-top:177.7777%}.view360-container.is-1by2{padding-top:200%}.view360-container.is-1by3{padding-top:300%}.view360-container:-ms-fullscreen{padding-top:0}.view360-container:fullscreen{padding-top:0}

package/css/hotspot.css

@@ -0,0 +1,21 @@
+.view360-hotspots {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.view360-hotspot {
+  pointer-events: none;
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.view360-hotspot-visible {
+  visibility: visible;
+  pointer-events: all;
+}

package/css/hotspot.min.css

@@ -0,0 +1 @@
+.view360-hotspots{width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none}.view360-hotspot{pointer-events:none;visibility:hidden;position:absolute;top:0;left:0}.view360-hotspot-visible{visibility:visible;pointer-events:all}

package/css/loading-spinner.css

@@ -0,0 +1,37 @@
+.view360-spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.view360-spinner-ring {
+  top: 0;
+  left: 0;
+  padding: 0;
+  margin: 0;
+  width: 64px;
+  height: 64px;
+  box-sizing: content-box;
+  background-color: transparent;
+  border-style: solid;
+  border-radius: 50%;
+  border-width: 10px;
+  border-color: #fff;
+  border-bottom-color: transparent;
+  animation: view360-spin-animation 1.2s linear infinite;
+}
+
+@keyframes view360-spin-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/css/loading-spinner.min.css

@@ -0,0 +1 @@
+.view360-spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.15)}.view360-spinner-ring{top:0;left:0;padding:0;margin:0;width:64px;height:64px;box-sizing:content-box;background-color:transparent;border-style:solid;border-radius:50%;border-width:10px;border-color:#fff;border-bottom-color:transparent;animation:view360-spin-animation 1.2s linear infinite}@keyframes view360-spin-animation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

package/css/variable.css

@@ -0,0 +1 @@
+