feat: add 360 video player (#184)

* feat: add video360 player

* move canvas and video

* Improved controlbar

* autoplay check

package.json

@@ -52,6 +52,7 @@
     "vite-plugin-solid": "^2.3.0"
   },
   "dependencies": {
+    "@egjs/view360": "4.0.0-beta.7",
     "@github/webauthn-json": "^2.1.1",
     "@hope-ui/solid": "0.6.7",
     "@monaco-editor/loader": "^1.4.0",

src/pages/home/previews/index.ts

@@ -84,6 +84,11 @@ const previews: Preview[] = [
     exts: ["cast"],
     component: lazy(() => import("./asciinema")),
   },
+  {
+    name: "Video360",
+    type: ObjType.VIDEO,
+    component: lazy(() => import("./video360")),
+  },
 ]
 
 export const getPreviews = (

src/pages/home/previews/video360.css

@@ -0,0 +1,9 @@
+.view360-controls-main,
+.view360-controls-float-left,
+.view360-controls-float-right {
+  pointer-events: all !important;
+}
+
+.view360-controls-top .view360-range {
+  height: 8px !important;
+}

src/pages/home/previews/video360.tsx

@@ -0,0 +1,68 @@
+import { Box } from "@hope-ui/solid"
+import { VideoBox } from "./video_box"
+import { createSignal, onCleanup, onMount } from "solid-js"
+import { getSettingBool, objStore } from "~/store"
+import { ObjType } from "~/types"
+import View360, { ControlBar, EquirectProjection } from "@egjs/view360"
+import "@egjs/view360/css/view360.min.css"
+import "./video360.css"
+
+const Preview = () => {
+  let videos = objStore.objs.filter((obj) => obj.type === ObjType.VIDEO)
+  if (videos.length === 0) {
+    videos = [objStore.obj]
+  }
+
+  let viewer: View360
+
+  onMount(() => {
+    const container = document.getElementById("view360-container")
+    const video = document.getElementById("view360-video")
+
+    if (container && video) {
+      viewer = new View360(container, {
+        projection: new EquirectProjection({
+          src: video,
+          video: {
+            autoplay: getSettingBool("video_autoplay"),
+          },
+        }),
+        plugins: [
+          new ControlBar({
+            pieView: { order: 0 },
+            gyroButton: { position: "top-right", order: 1 },
+            vrButton: { position: "top-right", order: 2 },
+          }),
+        ],
+      })
+    }
+  })
+
+  onCleanup(() => viewer?.destroy())
+
+  const [autoNext, setAutoNext] = createSignal(false)
+
+  return (
+    <VideoBox onAutoNextChange={setAutoNext}>
+      <Box w="$full" h="60vh" id="video360-player">
+        <Box
+          w={"100%"}
+          h={"100%"}
+          id="view360-container"
+          className="view360-container"
+        >
+          <canvas class="view360-canvas" />
+          <video
+            src={objStore.raw_url}
+            id="view360-video"
+            playsinline
+            crossOrigin="anonymous"
+            style="display: none;"
+          />
+        </Box>
+      </Box>
+    </VideoBox>
+  )
+}
+
+export default Preview