@realsee/vreo 0.2.0-alpha.4 → 0.2.0-alpha.7

package/resources/Player/modules/keyframes/InfoPanel/index.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react'
 import { ReactNode } from 'react'
-import { InfoPanelData, InfoPanelTypeEnum, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import {
+  InfoPanelData,
+  InfoPanelStyleEnum,
+  InfoPanelTypeEnum,
+  VreoKeyframe,
+  VreoKeyframeEnum,
+} from '../../../../typings/VreoUnit'
 import { useController } from '../../../hooks'
 
 function InfoPanelImg({ url, children }: { url: string; children?: ReactNode }) {
@@ -16,7 +22,9 @@ function InfoPanelVideo({ url, children }: { url: string; children?: ReactNode }
   return (
     <div className="vreo-infoPanel vreo-infoPanel--video">
       {children}
-      <div className="vreo-infoPanelWrapper"><video playsInline autoPlay className="vreo-infoPanelVideo" src={url} /></div>
+      <div className="vreo-infoPanelWrapper">
+        <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
+      </div>
     </div>
   )
 }
@@ -47,49 +55,86 @@ export function InfoPanel() {
     if (controller.configs?.keyframeMap.InfoPanel === false) {
       return
     }
+
     const callback = (keyframe: VreoKeyframe) => {
       const { start, end, data } = keyframe
 
       const infoPanelData = data as InfoPanelData
 
-      const { title, subTitle } = infoPanelData
-      if (infoPanelData.type === InfoPanelTypeEnum.Image) {
-        controller.openDrawer({
-          content: (
-            <InfoPanelImg url={infoPanelData.url}>
-              <Title title={title} subTitle={subTitle} />
-            </InfoPanelImg>
-          ),
-          height: '60vh',
-        })
-      } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
-        controller.openDrawer({
-          content: (
-            <InfoPanelVideo url={infoPanelData.url}>
-              <Title title={title} subTitle={subTitle} />
-            </InfoPanelVideo>
-          ),
-          height: '60vh',
-        })
-      }
-      timeoutRef.current = setTimeout(() => controller.openDrawer(false), end - start)
+      const { title, subTitle, style } = infoPanelData
+      do {
+        if (style === InfoPanelStyleEnum.PopUp) {
+          if (infoPanelData.type === InfoPanelTypeEnum.Image) {
+            controller.openPopUp(
+              <InfoPanelImg url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelImg>
+            )
+          } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
+            controller.openPopUp(
+              <InfoPanelVideo url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelVideo>
+            )
+          }
+          break
+        }
+        if (infoPanelData.type === InfoPanelTypeEnum.Image) {
+          controller.openDrawer({
+            content: (
+              <InfoPanelImg url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelImg>
+            ),
+            height: '60vh',
+          })
+        } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
+          controller.openDrawer({
+            content: (
+              <InfoPanelVideo url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelVideo>
+            ),
+            height: '60vh',
+          })
+        }
+      } while (false)
+
+      timeoutRef.current = setTimeout(() => {
+        controller.openDrawer(false)
+        controller.openPopUp(false)
+      }, end - start)
     }
     controller.on(VreoKeyframeEnum.InfoPanel, callback)
 
     // Object.assign(window, {
     //   $setInfoPanel: () => {
-    //     controller.openDrawer({
-    //       content: (
-    //         // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif'>
-    //         // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
-    //         //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
-    //         // </InfoPanelImg>
-    //         <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //     controller.openPopUp(
+    //       // <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
     //         <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
-    //       </InfoPanelVideo>
-    //       ),
-    //       height: '60vh',
-    //     })
+    //       </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
+    //   },
+    //   $setInfoPanel2: () => {
+    //     controller.openPopUp(
+    //       <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
     //   },
     // })
 

package/resources/typings/VreoUnit.ts

@@ -235,11 +235,17 @@ export enum InfoPanelTypeEnum {
   Video = 'Video',
 }
 
+export enum InfoPanelStyleEnum {
+  Drawer = 'Drawer',
+  PopUp = 'PopUp',
+}
+
 /**
  * 信息面板
  */
 export type InfoPanelData = {
   type: InfoPanelTypeEnum
+  style?: InfoPanelStyleEnum
   url: string
   // 标题
   title?: string

package/stylesheets/custom/SpatialScenePanel.css

@@ -77,9 +77,15 @@
   background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/panel-min.7d9ba2b7.png");
   background-size: 340rem 13.4375rem;
   background-repeat: no-repeat;
-  animation: SpatialScenePanel-panel-sprites-animation 1.375s 0s steps(33) infinite normal
+  z-index: -1;
 }
 
+.SpatialScenePanel-bg--animation {
+  /* animation: SpatialScenePanel-panel-sprites-animation 1.375s 0s steps(33) infinite normal; */
+  animation: SpatialScenePanel-panel-sprites-animation 1.375s 0.5s steps(33) normal;
+}
+
+
 .SpatialScenePanel-show-area .SpatialScenePanel-header {
   width: 7.5rem;
   height: 1.375rem;
@@ -89,7 +95,9 @@
   background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/title-bg.377af865.png");
   background-size: 100%;
   margin: 1.875rem auto 1.25rem auto;
-  padding-bottom: .25rem
+  background-image: linear-gradient(to left, rgba(234, 208, 154, 0), rgb(255 229 176 / 21%) 47%, rgba(234, 208, 154, 0));
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 2px;
 }
 
 .SpatialScenePanel-show-area .SpatialScenePanel-header .SpatialScenePanel-title {
@@ -97,7 +105,7 @@
   font-size: 1.0625rem;
   color: #ffe5b0;
   letter-spacing: 0;
-  line-height: 1.0625rem;
+  line-height: 1.125;
   text-shadow: 0 0 1.25rem rgba(0,0,0,0.15)
 }
 
@@ -106,7 +114,7 @@
   font-size: .625rem;
   color: rgba(255,229,176,0.6);
   letter-spacing: 0;
-  line-height: .625rem;
+  line-height: 1.25rem;
   text-shadow: 0 0 .625rem rgba(255,255,255,0.03);
   align-self: flex-end
 }
@@ -270,9 +278,7 @@
 
 .SpatialScenePanel.hide .SpatialScenePanel-show-area {
   transform: scale3d(0,1,1);
-  transition: -webkit-transform 500ms linear;
-  transition: transform 500ms linear;
-  transition: transform 500ms linear, -webkit-transform 500ms linear
+  transition: transform 150ms linear;
 }
 
 .SpatialScenePanel.hide .SpatialScenePanel-disappear-area {
@@ -298,6 +304,6 @@
   background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/line.4ac1c0bb.png");
   background-size: 10rem 11.666666666666666rem;
   background-repeat: no-repeat;
-  animation: SpatialScenePanel-line-sprites-animation 500ms 500ms steps(23) 1 normal
+  animation: SpatialScenePanel-line-sprites-animation 500ms 100ms steps(23) 1 normal
 }
 

package/stylesheets/default.css

@@ -547,3 +547,69 @@
   opacity: 0;
   transition: opacity 0.45s;
 }
+
+.vreo-PopUp {
+  position: absolute;
+  left: 0;
+  top: 0;
+  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;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vreo-PopUp.vreo-PopUp-visible {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.vreo-PopUp-inner {
+  width: 339px;
+  height: 425px;
+  position: relative;
+}
+
+@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;
+  bottom: 32px;
+  left: 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-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t2 {
+  padding: 0 0 24px 0;
+  font-size: 14px;
+  opacity: 0.85;
+}