fix: set default height when failed to load video (#139)

src/pages/home/previews/aliyun_video.tsx

@@ -1,5 +1,5 @@
-import { Box } from "@hope-ui/solid"
-import { createSignal, onCleanup, onMount } from "solid-js"
+import { Box, Center } from "@hope-ui/solid"
+import { Show, createSignal, onCleanup, onMount } from "solid-js"
 import { useRouter, useLink, useFetch } from "~/hooks"
 import { getSettingBool, objStore, password } from "~/store"
 import { ObjType, PResp } from "~/types"
@@ -12,9 +12,10 @@ import artplayerPluginDanmuku from "artplayer-plugin-danmuku"
 import artplayerPluginAss from "~/components/artplayer-plugin-ass"
 import Hls from "hls.js"
 import { currentLang } from "~/app/i18n"
-import { VideoBox } from "./video_box"
+import { AutoHeightPlugin, VideoBox } from "./video_box"
 import { ArtPlayerIconsSubtitle } from "~/components/icons"
 import { useNavigate } from "@solidjs/router"
+import { TiWarning } from "solid-icons/ti"
 
 export interface Data {
   drive_id: string
@@ -117,7 +118,7 @@ const Preview = () => {
     miniProgressBar: false,
     playsInline: true,
     quality: [],
-    plugins: [],
+    plugins: [AutoHeightPlugin],
     whitelist: [],
     settings: [],
     moreVideoAttr: {
@@ -310,6 +311,7 @@ const Preview = () => {
   )
   onMount(async () => {
     const resp = await post()
+    setWarnVisible(resp.code !== 200)
     handleResp(resp, (data) => {
       const list =
         data.video_preview_play_info.live_transcoding_task_list.filter(
@@ -339,10 +341,6 @@ const Preview = () => {
       }
       player.on("ready", () => {
         player.fullscreen = auto_fullscreen
-        player.autoHeight()
-      })
-      player.on("resize", () => {
-        player.autoHeight()
       })
       player.on("video:ended", () => {
         if (!autoNext()) return
@@ -385,9 +383,15 @@ const Preview = () => {
     window.clearInterval(interval)
   })
   const [autoNext, setAutoNext] = createSignal()
+  const [warnVisible, setWarnVisible] = createSignal(false)
   return (
     <VideoBox onAutoNextChange={setAutoNext}>
       <Box w="$full" id="video-player" />
+      <Show when={warnVisible()}>
+        <Center w="100%" h="60vh" bgColor="black">
+          <TiWarning size="4rem" />
+        </Center>
+      </Show>
     </VideoBox>
   )
 }

src/pages/home/previews/video.tsx

@@ -13,7 +13,7 @@ import artplayerPluginAss from "~/components/artplayer-plugin-ass"
 import flvjs from "flv.js"
 import Hls from "hls.js"
 import { currentLang } from "~/app/i18n"
-import { VideoBox } from "./video_box"
+import { AutoHeightPlugin, VideoBox } from "./video_box"
 import { ArtPlayerIconsSubtitle } from "~/components/icons"
 import { useNavigate } from "@solidjs/router"
 
@@ -95,7 +95,7 @@ const Preview = () => {
     ],
     quality: [],
     // highlight: [],
-    plugins: [],
+    plugins: [AutoHeightPlugin],
     whitelist: [],
     settings: [],
     // subtitle:{}
@@ -302,10 +302,6 @@ const Preview = () => {
     }
     player.on("ready", () => {
       player.fullscreen = auto_fullscreen
-      player.autoHeight()
-    })
-    player.on("resize", () => {
-      player.autoHeight()
     })
     player.on("video:ended", () => {
       if (!autoNext()) return

src/pages/home/previews/video_box.tsx

@@ -7,7 +7,7 @@ import {
   HStack,
   Switch,
 } from "@hope-ui/solid"
-import { For, JSXElement, onCleanup, onMount } from "solid-js"
+import { For, JSXElement } from "solid-js"
 import { useRouter, useLink, useT } from "~/hooks"
 import { objStore } from "~/store"
 import { ObjType } from "~/types"
@@ -51,6 +51,26 @@ export const players: { icon: string; name: string; scheme: string }[] = [
   },
 ]
 
+export const AutoHeightPlugin = (player: Artplayer) => {
+  const { $container, $video } = player.template
+  const $videoBox = $container.parentElement!
+
+  player.on("ready", () => {
+    const offsetBottom = "1.75rem" // position bottom of "More" button + padding
+    $videoBox.style.maxHeight = `calc(100vh - ${$videoBox.offsetTop}px - ${offsetBottom})`
+    $videoBox.style.minHeight = "320px" // min width of mobie phone
+    player.autoHeight()
+  })
+  player.on("resize", () => {
+    player.autoHeight()
+  })
+  player.on("error", () => {
+    if ($video.style.height) return
+    $container.style.height = "60vh"
+    $video.style.height = "100%"
+  })
+}
+
 export const VideoBox = (props: {
   children: JSXElement
   onAutoNextChange: (v: boolean) => void
@@ -67,32 +87,8 @@ export const VideoBox = (props: {
     autoNext = "true"
   }
   props.onAutoNextChange(autoNext === "true")
-  const useVideoLayoutRef = () => {
-    return (ref: HTMLDivElement) => {
-      const observer = new MutationObserver((mutationList) => {
-        for (const mutation of mutationList) {
-          const target = mutation.target as Element
-          if (target.id !== "video-player") continue
-          // ArtPlayer has been rendered here
-          ref.style.minHeight = "320px" // min width of mobie phone
-        }
-      })
-
-      onMount(() => {
-        const offsetBottom = "1.75rem" // position bottom of "More" button + padding
-        ref.style.maxHeight = `calc(100vh - ${ref.offsetTop}px - ${offsetBottom})`
-        observer.observe(ref, {
-          attributes: true,
-          attributeFilter: ["style"],
-          subtree: true,
-        })
-      })
-
-      onCleanup(() => observer.disconnect())
-    }
-  }
   return (
-    <VStack ref={useVideoLayoutRef()} w="$full" spacing="$2">
+    <VStack w="$full" spacing="$2">
       {props.children}
       <HStack spacing="$2" w="$full">
         <SelectWrapper