@realsee/vreo 0.2.0-alpha.9 → 1.0.0-alpha.2

package/stylesheets/default.css

@@ -1,9 +1,29 @@
+* {
+  -webkit-tap-highlight-color: transparent;
+  font-family: PingFangSC-Regular;
+}
+
+.resizeObserver-element {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  background: none;
+  overflow: hidden;
+  pointer-events: none;
+}
+
 .vreo-drawer {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
 }
 
@@ -31,8 +51,7 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  width: 100vw;
-  height: 150px;
+  width: 100%;
   color: white;
   transition: transform 0.5s;
   pointer-events: none;
@@ -41,6 +60,17 @@
   align-items: center;
 }
 
+.vreo-app .vreo-panel,
+.vreo-app[data-size="S"] .vreo-panel,
+.vreo-app[data-size="M"][data-orientation="landscape"] .vreo-panel {
+  height: 130px;
+}
+.vreo-app[data-size="M"][data-orientation="portrait"] .vreo-panel,
+.vreo-app[data-size="L"] .vreo-panel,
+.vreo-app[data-size="XL"] .vreo-panel {
+  height: 160px;
+}
+
 .vreo-panel::before {
   content: '';
   position: absolute;
@@ -57,44 +87,149 @@
 }
 
 .vreo-panel-inner {
-  max-width: 375px;
   height: 100%;
   width: 100%;
   position: relative;
 }
 
-@keyframes panel-sprites-animation {
+.vreo-app .vreo-panel-inner,
+.vreo-app[data-size="S"] .vreo-panel-inner,
+.vreo-app[data-size="M"][data-orientation="landscape"] .vreo-panel-inner {
+  max-width: 375px;
+}
+.vreo-app[data-size="M"][data-orientation="portrait"] .vreo-panel-inner,
+.vreo-app[data-size="L"] .vreo-panel-inner {
+  max-width: 462px;
+}
+.vreo-app[data-size="XL"] .vreo-panel-inner {
+  max-width: 500px;
+}
+
+.vreo-wave {
+  position: absolute;
+  bottom: 0;
+}
+
+/* @keyframes panel-sprites-animation {
   0% {
     background-position: 0 0;
   }
   100% {
     background-position: -17625px 0;
   }
-}
+} */
 
-.vreo-panel-inner::before {
+/* .vreo-panel-inner::after {
   content: '';
   background-image: url('//vrlab-static.ljcdn.com/release/web/spritesheets/imgs/playing.d2312f22.png');
   height: 30px;
-  width: 375px;
+  width: 100%;
   background-size: 18000px 30px;
   background-repeat: no-repeat;
   animation: panel-sprites-animation 2.5s 0s steps(47) infinite normal;
   position: absolute;
   left: 0;
   bottom: 0;
+} */
+
+.VideoAgent,
+.Avatar {
+  position: absolute;
+  cursor: pointer;
 }
 
 .VideoAgent {
+  height: 100%;
+}
+
+.VideoAgent.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.vreo-app .Avatar,
+.vreo-app[data-size="S"] .Avatar,
+.vreo-app[data-size="M"][data-orientation="landscape"] .Avatar {
+  width: 48px;
+  left: 30px;
+  bottom: 36px;
+}
+.vreo-app[data-size="M"][data-orientation="portrait"] .Avatar,
+.vreo-app[data-size="L"] .Avatar {
+  width: 56px;
+  left: 31px;
+  bottom: 42px;
+}
+.vreo-app[data-size="XL"] .Avatar {
+  width: 60px;
+  left: 32px;
+  bottom: 46px;
+}
+
+.vreo-app .VideoAgent,
+.vreo-app[data-size="S"] .VideoAgent,
+.vreo-app[data-size="M"][data-orientation="landscape"] .VideoAgent {
+  width: 250px;
+}
+.vreo-app[data-size="M"][data-orientation="portrait"] .VideoAgent,
+.vreo-app[data-size="L"] .VideoAgent,
+.vreo-app[data-size="XL"] .VideoAgent {
+  width: 300px;
+}
+
+.VideoAgent-container {
   position: absolute;
-  left: -80px;
-  top: -30px;
-  width: 288px;
-  height: 162px;
-  cursor: pointer;
+  left: -28%;
+  width: 100%;
+  height: 100%;
+}
+
+.VideoAgent-wrapper {
+  bottom: 0px;
+}
+
+.Avatar-wrapper {
+  bottom: 0px;
+}
+
+.ratio-16-9 {
+  position: absolute;
+  width: 100%;
+  padding-top: 56.25%;
+}
+
+.ratio-4-5 {
+  position: absolute;
+  width: 100%;
+  padding-top: 125%;
+}
+
+.ratio-1-1 {
+  position: absolute;
+  width: 100%;
+  padding-top: 100%;
+}
+
+.VideoAgent-inner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.Avatar-img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 0.5px solid rgba(255, 255, 255, 0.4);
+  pointer-events: all;
 }
 
-.VideoAgent::after {
+/* .VideoAgent::after {
   content: '';
   position: absolute;
   left: 0;
@@ -104,7 +239,7 @@
   mask: linear-gradient(0deg, transparent 0%, #000 5%);
   -webkit-mask: linear-gradient(0deg, transparent 0%, #000 5%);
   pointer-events: none;
-}
+} */
 
 .VideoAgent-canvas {
   outline: none;
@@ -116,51 +251,119 @@
   position: absolute;
   top: 0;
   left: 50%;
+  transform: translate(-50%, 0);
   width: 50%;
   height: 100%;
   pointer-events: all;
   cursor: pointer;
   opacity: 0;
-  transform: translate(-50%, 0);
+}
+
+.VideoAgent.hide .VideoAgent-play {
+  opacity: 0;
+  pointer-events: none;
 }
 
 .vreo-prompter {
-  position: absolute;
-  top: 54px;
-  left: 120px;
-  width: 250px;
-  font-size: 14px;
+  top: 64px;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
   opacity: 1;
-  transition: opacity 0.5s;
+  transition: opacity 0.1s;
+}
+
+.vreo-app .vreo-prompter.vreo-prompter-left--video .vreo-prompter-text,
+.vreo-app[data-size="S"] .vreo-prompter.vreo-prompter-left--video .vreo-prompter-text,
+.vreo-app[data-size="M"][data-orientation="landscape"] .vreo-prompter.vreo-prompter-left--video .vreo-prompter-text {
+  left: 130px;
 }
-.vreo-prompter--audio {
-  top: 72px;
-  left: 64px;
+.vreo-app[data-size="M"][data-orientation="portrait"] .vreo-prompter.vreo-prompter-left--video .vreo-prompter-text,
+.vreo-app[data-size="L"] .vreo-prompter.vreo-prompter-left--video .vreo-prompter-text,
+.vreo-app[data-size="XL"] .vreo-prompter.vreo-prompter-left--video .vreo-prompter-text {
+  left: 160px;
 }
+
+.vreo-app .vreo-prompter.vreo-prompter-left--avatar .vreo-prompter-text 
+.vreo-app[data-size="S"] .vreo-prompter.vreo-prompter-left--avatar .vreo-prompter-text,
+.vreo-app[data-size="M"][data-orientation="landscape"] .vreo-prompter.vreo-prompter-left--avatar .vreo-prompter-text {
+  left: 102px;
+}
+.vreo-app[data-size="M"][data-orientation="portrait"] .vreo-prompter.vreo-prompter-left--avatar .vreo-prompter-text,
+.vreo-app[data-size="L"] .vreo-prompter.vreo-prompter-left--avatar .vreo-prompter-text {
+  left: 119px;
+}
+.vreo-app[data-size="XL"] .vreo-prompter.vreo-prompter-left--avatar .vreo-prompter-text {
+  left: 132px;
+}
+
+.vreo-prompter.vreo-prompter-left--none .vreo-prompter-text {
+  text-align: center;
+}
+
+.vreo-prompter-text {
+  position: absolute;
+  height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vreo-app .vreo-prompter-text,
+.vreo-app[data-size="S"] .vreo-prompter-text,
+.vreo-app[data-size="M"][data-orientation="landscape"] .vreo-prompter-text {
+  width: 194px;
+  bottom: 60px;
+}
+.vreo-app[data-size="M"][data-orientation="portrait"] .vreo-prompter-text,
+.vreo-app[data-size="L"] .vreo-prompter-text {
+  width: 253px;
+  bottom: 70px;
+}
+.vreo-app[data-size="XL"] .vreo-prompter-text {
+  width: 272px;
+  bottom: 76px;
+}
+
 .vreo-prompter-innerText {
   position: absolute;
-  left: 0;
-  top: 0;
-  padding-right: 10px;
+  font-weight: bold;
+  font-size: 14px;
+  word-break: break-all;
+}
+
+.vreo-app .vreo-prompter-innerText,
+.vreo-app[data-size="S"] .vreo-prompter-innerText,
+.vreo-app[data-size="M"][data-orientation="landscape"] .vreo-prompter-innerText {
+  font-size: 14px;
+}
+.vreo-app[data-size="M"][data-orientation="portrait"] .vreo-prompter-innerText,
+.vreo-app[data-size="L"] .vreo-prompter-innerText {
+  font-size: 16px;
+}
+.vreo-app[data-size="XL"] .vreo-prompter-innerText {
+  font-size: 18px;
 }
+
 .vreo-prompter--hidden {
   opacity: 0;
 }
 
-.vreo-prompter-text-transition-enter-active {
+/* .vreo-prompter-text-transition-enter-active {
   opacity: 0;
-}
+} */
 
-.vreo-prompter-text-transition-enter-done {
+/* .vreo-prompter-text-transition-enter-done {
   opacity: 1;
   transition: opacity 1000ms;
-}
-
+} */
+/*
 .vreo-prompter-text-transition-exit-active,
 .vreo-prompter-text-transition-exit-done {
   opacity: 0;
   transition: opacity 500ms;
-}
+} */
 
 .VideoEffect {
   position: absolute;
@@ -178,6 +381,7 @@
 .VideoEffect--visible {
   display: flex;
 }
+
 .VideoEffect-video {
   height: 100%;
 }
@@ -187,6 +391,27 @@
   opacity: 0;
 }
 
+.PanoTag--expand {
+  transform: translate(-50%, -50%);
+  color: white;
+  min-width: 150px;
+  max-width: 200px;
+  margin-top: 4px;
+}
+
+.PanoTag--expand .PanoTag-box.PanoTag-box--Text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 4px;
+}
+
+.PanoTag-guideline {
+  width: 100%;
+  background: linear-gradient(45deg, transparent 20% ,white, transparent 80%);
+  height: 3px;
+}
+
 .PanoTag--notHidden {
   opacity: 1;
 }
@@ -401,7 +626,11 @@
   transform-style: preserve-3d;
   pointer-events: none;
   z-index: 999999;
-  transform: translate(-50%, -50%);
+}
+.__Vreo-plugin--CSS3DRenderPlugin {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 @keyframes straightPopPTL {
@@ -485,35 +714,57 @@
   display: block;
 }
 
-.vreo-infoPanelWrapper {
-  flex: 1;
+.vreo-infoPanel-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 68px);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.vreo-infoPanel {
+.vreo-infoPanel-wrapper {
+  position: relative;
+}
+
+.vreo-infoPanel-inner {
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.75);
-  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 1);
 }
 
-.vreo-infoPanel::after {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 20px;
+.vreo-infoPanel {
+  position: relative;
+}
+
+.vreo-app .vreo-infoPanel,
+.vreo-app[data-size="S"] .vreo-infoPanel {
+  width: 327px;
+}
+.vreo-app[data-size="M"][data-orientation="landscape"] .vreo-infoPanel {
+  width: 192px;
+}
+.vreo-app[data-size="M"][data-orientation="portrait"] .vreo-infoPanel,
+.vreo-app[data-size="L"] .vreo-infoPanel {
+  width: 319px;
+}
+.vreo-app[data-size="XL"] .vreo-infoPanel {
+  width: 384px;
 }
 
 .vreo-infoPanel-title {
-  height: 64px;
   width: 100%;
   color: white;
   display: flex;
   align-items: center;
+  word-break: break-all;
 }
 
 .vreo-infoPanel-t1 {
@@ -523,6 +774,8 @@
 }
 
 .vreo-infoPanel-t2 {
+  position: absolute;
+  top: 100%;
   font-size: 12px;
   opacity: 0.6;
   padding-right: 26px;
@@ -532,17 +785,13 @@
 
 .vreo-infoPanelImg,
 .vreo-infoPanelVideo {
-  flex: 1;
-  background-size: contain;
+  position: absolute;
   width: 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
+  height: 100%;
+  object-position: center center;
+  object-fit: contain;
 }
 
-.vreo-infoPanelVideo {
-  max-width: 412px;
-} 
-
 .vreo-panel--hidden .vreo-panel-inner {
   opacity: 0;
   transition: opacity 0.45s;
@@ -555,9 +804,9 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 65%);
   opacity: 0;
-  transition: opacity .45s;
+  transform: translateY(10px);
+  transition: all .45s;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -565,51 +814,66 @@
 
 .vreo-PopUp.vreo-PopUp-visible {
   opacity: 1;
+  transform: translateY(0);
   pointer-events: all;
 }
 
 .vreo-PopUp-inner {
-  width: 339px;
-  height: 425px;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
 }
 
-@media only screen and (min-width: 960px) {
-  .vreo-PopUp-inner {
-    width: 678px;
-    height: 620px;
-    position: relative;
-  }
-  .vreo-infoPanelVideo {
-    max-width: 100%;
-  }
-}
-
-.vreo-PopUp-inner .vreo-infoPanel {
-  background-color: initial;
-  justify-content: center;
+.vreo-PopUp-inner .vreo-infoPanel-title {
+  position: absolute;
+  box-sizing: border-box;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-bottom: 16.5%;
+  bottom: 0;
+  z-index: 1;
+  flex-direction: column;
 }
 
-.vreo-PopUp-inner .vreo-infoPanel-title {
+.vreo-PopUp-inner .vreo-infoPanel-title-shadow {
   position: absolute;
-  bottom: 32px;
   left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 46%;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
   z-index: 1;
-  flex-direction: column;
-  justify-content: end;
-  height: 200px;
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
 }
 
 .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1 {
   padding-left: 0;
-  font-size: 20px;
   font-weight: 600;
-  padding-bottom: 14px;
+}
+
+.vreo-app .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1,
+.vreo-app[data-size="S"] .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1 {
+  font-size: 20px;
+  line-height: 28px;
+}
+.vreo-app[data-size="M"][data-orientation="landscape"] .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1 {
+  font-size: 14px;
+  line-height: 20px;
+}
+.vreo-app[data-size="M"][data-orientation="portrait"] .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1,
+.vreo-app[data-size="L"] .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1 {
+  font-size: 16px;
+  line-height: 22px;
+}
+.vreo-app[data-size="XL"] .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1 {
+  font-size: 20px;
+  line-height: 28px;
 }
 
 .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t2 {
   padding: 0 0 24px 0;
   font-size: 14px;
   opacity: 0.85;
-}
+}