cleanup: use hls.js esm build, save a few kb (#148)

package.json

@@ -87,7 +87,7 @@
     "@solidjs/router": "^0.15.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
-    "hls.js": "^1.5.18",
+    "hls.js": "^1.5.20",
     "leaflet": "^1.9.4",
     "qr-scanner": "^1.4.2",
     "solid-js": "^1.9.4"

src/components/RouteVideoPlayer.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
-import { createEffect, createResource, onCleanup, onMount } from 'solid-js'
-import type { VoidComponent } from 'solid-js'
+import { createEffect, createResource, onCleanup, onMount, type VoidComponent } from 'solid-js'
 import clsx from 'clsx'
-import Hls from 'hls.js/dist/hls.light.min.js'
+import Hls from 'hls.js/dist/hls.light.mjs'
+
 import { getQCameraStreamUrl } from '~/api/route'
 
 type RouteVideoPlayerProps = {
@@ -14,32 +13,28 @@ type RouteVideoPlayerProps = {
 
 const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
   const [streamUrl] = createResource(() => props.routeName, getQCameraStreamUrl)
-  let video: HTMLVideoElement
+  let video!: HTMLVideoElement
 
   onMount(() => {
     const timeUpdate = () => props.onProgress?.(video.currentTime)
     video.addEventListener('timeupdate', timeUpdate)
     onCleanup(() => video.removeEventListener('timeupdate', timeUpdate))
-    if (props.ref) {
-      props.ref(video)
-    }
+    props.ref?.(video)
   })
-  let hls = new Hls()
+
   createEffect(() => {
-    hls?.destroy()
-    if (streamUrl()) {
-      if (Hls.isSupported()) {
-        hls = new Hls()
-        hls.loadSource(streamUrl()!)
-        hls.attachMedia(video)
-      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = streamUrl()!
-      } else {
-        console.error('Browser does not support hls')
-      }
+    if (!streamUrl()) return
+    if (Hls.isSupported()) {
+      const hls = new Hls()
+      hls.loadSource(streamUrl()!)
+      hls.attachMedia(video)
+      onCleanup(() => hls.destroy())
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      video.src = streamUrl()!
+    } else {
+      console.error('Browser does not support hls')
     }
   })
-  onCleanup(() => hls?.destroy())
 
   return (
     <div
@@ -49,7 +44,7 @@ const RouteVideoPlayer: VoidComponent<RouteVideoPlayerProps> = (props) => {
       )}
     >
       <video
-        ref={video!}
+        ref={video}
         class="absolute inset-0 size-full object-cover"
         autoplay
         muted

src/hls-light-types.d.ts

@@ -1 +1,4 @@
-declare module 'hls.js/dist/hls.light.min.js'
+declare module 'hls.js/dist/hls.light.mjs' {
+  import hls from 'hls.js'
+  export default hls
+}