feat[docs]: VideoScene

packages/docs/.umirc.ts

@@ -131,6 +131,10 @@ export default defineConfig({
         path: "/krpano",
       },
       {
+        title: "VideoScene 全景视频",
+        path: "/krpano/video-scene",
+      },
+      {
         title: "Scene 场景",
         path: "/krpano/scene",
       },

packages/docs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/docs
 
+## 1.0.3
+
+### Patch Changes
+
+- - feat: VideoScene
+
 ## 1.0.2
 
 ### Patch Changes

packages/docs/docs/krpano/video-scene/index.less

@@ -0,0 +1,39 @@
+.demo {
+  position: relative;
+}
+
+.play-icon {
+  width: 48px;
+  height: 48px;
+  background: url("/krpano/1.21/skin/vtourskin.png") no-repeat;
+  background-position: 0px -480px;
+  background-size: 96px 576px;
+  cursor: pointer;
+  z-index: 1;
+
+  &.pause {
+    background-position: -48px -480px;
+  }
+}
+
+.transition {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 48px;
+  height: 48px;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+}
+.enter,
+.exit {
+  transition: opacity ease-in-out 0.2s;
+}
+.enter-active,
+.enter-done {
+  opacity: 1;
+}
+.exit-active,
+.exit-done {
+  opacity: 0;
+}

packages/docs/docs/krpano/video-scene/index.md

@@ -0,0 +1,130 @@
+## 全景视频
+
+### 示例
+
+```tsx
+import React, { useMemo, useRef, useState, useEffect } from "react";
+import { Krpano, VideoScene, Events, videoSceneModel } from "@dage/krpano";
+import { message } from "antd";
+import classNames from "classNames";
+import { observer } from "mobx-react";
+import { CSSTransition } from "react-transition-group";
+import "./index.less";
+
+export default observer(() => {
+  const timer = useRef(0);
+  const [playIconVisible, setPlayIconVisible] = useState(false);
+
+  const autoHidePlayIcon = () => {
+    timer.current && clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setPlayIconVisible(false);
+    }, 3000);
+  };
+
+  const togglePause = () => {
+    if (videoSceneModel.playing) {
+      videoSceneModel.pause();
+    } else {
+      videoSceneModel.play();
+    }
+
+    autoHidePlayIcon();
+  };
+
+  useEffect(() => {
+    if (
+      !window.ReactKrpanoActionProxy?.krpanoRenderer?.device.panovideosupport
+    ) {
+      // 可以通过 panovideosupport 判断浏览器是否支持全景视频
+      message.error(
+        "Sorry, but panoramic videos are not supported by your current browser!"
+      );
+    }
+
+    videoSceneModel.event.on("Event.videoScene.ready", () => {
+      message.success("视频准备就绪");
+    });
+  }, []);
+
+  return (
+    <div className="demo">
+      <Krpano
+        className="krpano"
+        currentScene="videoPano"
+        littlePlanetIntro={true}
+        passQueryParameters={true}
+      >
+        <Events
+          name="videoEvent"
+          onClick={() => {
+            setPlayIconVisible((pre) => !pre);
+            autoHidePlayIcon();
+          }}
+        />
+
+        <VideoScene
+          name="videoPano"
+          videointerfaceXmlUrl="./krpano/1.21/skin/videointerface.xml"
+          videoplayerUrl="./krpano/1.21/plugins/videoplayer.js"
+          sourceList={[
+            {
+              res: "1920x960",
+              url: "./krpano/video/video-1920x960.mp4",
+              poster: "./krpano/video/video-1920x960-poster.jpg",
+            },
+            {
+              res: "1024x512",
+              url: "./krpano/video/video-1024x512.mp4",
+              poster: "./krpano/video/video-1024x512-poster.jpg",
+            },
+          ]}
+          playRes="1920x960"
+          onVisibility={() => {
+            if (document.visibilityState === "visible") {
+              setPlayIconVisible(true);
+              autoHidePlayIcon();
+            }
+          }}
+        />
+      </Krpano>
+
+      <CSSTransition timeout={200} in={playIconVisible} unmountOnExit={true}>
+        {
+          <div className="transition">
+            <div
+              className={classNames("play-icon", {
+                pause: videoSceneModel.playing,
+              })}
+              onClick={togglePause}
+            />
+          </div>
+        }
+      </CSSTransition>
+    </div>
+  );
+});
+```
+
+### API
+
+<API hideTitle exports='["VideoScene"]' src='@dage/krpano/index.d.ts'></API>
+
+### VideoSceneModel
+
+| Name    | Description | Type                        | Default    |
+| ------- | ----------- | --------------------------- | ---------- |
+| event   | 事件        | [EventBus](/utils/eventbus) | `EventBus` |
+| playing | 播放中      | `Boolean`                   | `true`     |
+| play    | 播放视频    | `() => void`                | --         |
+| pause   | 暂停视频    | `() => void`                | --         |
+
+### EventMapper
+
+| Name                      | Description  | Type                      |
+| ------------------------- | ------------ | ------------------------- |
+| Event.videoScene.ready    | 视频准备就绪 | `() => void`              |
+| Event.videoScene.play     | 视频开始播放 | `() => void`              |
+| Event.videoScene.paused   | 视频暂停播放 | `() => void`              |
+| Event.videoScene.complete | 视频播放完成 | `() => void`              |
+| Event.videoScene.error    | 视频发生错误 | `(error: string) => void` |

packages/docs/docs/log/DOCS_CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/docs
 
+## 1.0.3
+
+### Patch Changes
+
+- - feat: VideoScene
+
 ## 1.0.2
 
 ### Patch Changes

packages/docs/docs/log/KRPANO_CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/krpano
 
+## 2.4.0
+
+### Minor Changes
+
+- - feat: VideoScene
+
 ## 2.3.0
 
 ### Minor Changes

packages/docs/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@dage/docs",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -17,6 +17,7 @@
   "dependencies": {
     "dumi": "1.1.52",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-transition-group": "^4.4.5"
   }
 }

packages/docs/public/krpano/1.21/skin/videointerface.xml

@@ -0,0 +1,33 @@
+<krpano>
+	<action name="skin_video_setup">
+		if(skin_video_setup_done !== true,
+			set(skin_video_setup_done, true);
+
+			<!-- use the video events for getting state updates -->
+			set(plugin[video].onvideoready, jscall(window.onVideoSceneReady()););
+			set(plugin[video].onvideoplay, jscall(window.onVideoScenePlay()););
+			set(plugin[video].onvideopaused, jscall(window.onVideoScenePaused()););
+			set(plugin[video].onvideocomplete, jscall(window.onVideoSceneComplete()););
+			set(plugin[video].onerror, jscall(calc('window.onVideoSceneError("' + videoerror + '")')));
+		  );
+	</action>
+
+	<!-- videointerface_addsource (name, videourl, posterurl)
+		%1 - name
+		%2 - videourl
+		%3 - posterurl
+	-->
+	<action name="videointerface_addsource">
+		<!-- init/setup the video interface skin -->
+		skin_video_setup();
+
+		set(videosources['v%1'].sourcename, '%1');
+		set(videosources['v%1'].videourl, '%2');
+		set(videosources['v%1'].posterurl, '%3');
+	</action>
+
+	<action name="videointerface_play">
+		copy(vs, videosources['v%1']);
+		plugin[video].playvideo(get(vs.videourl), get(vs.posterurl), get(plugin[video].pausedonstart), get(plugin[video].time));
+	</action>
+</krpano>