From b80f8c5ab6ab6ccca85b968ffd85607b7cb65cbe Mon Sep 17 00:00:00 2001
From: matiasperz <matiasperezpc@hotmail.com>
Date: Mon, 4 Apr 2022 20:45:35 -0300
Subject: [PATCH 1/7] Adding enhansed components

---
 src/components/primitives/mux-video.tsx | 76 ++++++++++++++++++-------
 src/hooks/use-intersection-observer.ts  | 50 ++++++++++------
 2 files changed, 89 insertions(+), 37 deletions(-)

diff --git a/src/components/primitives/mux-video.tsx b/src/components/primitives/mux-video.tsx
index 8f647ff..74d4622 100644
--- a/src/components/primitives/mux-video.tsx
+++ b/src/components/primitives/mux-video.tsx
@@ -1,47 +1,81 @@
-import Hls, { Events } from 'hls.js'
+import type THls from 'hls.js'
 import * as React from 'react'
 import mergeRefs from 'react-merge-refs'
 
+import { createObserver } from '~/hooks/use-intersection-observer'
+
 export type MuxVideoProps = {
   muxSrc: string
+  lazy?: boolean
 } & Omit<JSX.IntrinsicElements['video'], 'src'>
 
+const supportsHls = (videoElm: HTMLVideoElement) =>
+  videoElm.canPlayType('application/vnd.apple.mpegurl')
+
 export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
-  ({ muxSrc, className, ...rest }, ref) => {
+  ({ muxSrc, lazy = true, className, ...rest }, ref) => {
+    const hls = React.useRef<THls | null>(null)
     const videoRef = React.useRef<HTMLVideoElement>(null)
 
-    React.useEffect(() => {
-      let hls: Hls
+    const loadVideo = React.useCallback(
+      (videoElm: HTMLVideoElement) => {
+        if (hls.current) {
+          hls.current?.loadSource(muxSrc)
+        } else if (videoElm && supportsHls(videoElm)) {
+          videoElm.src = muxSrc
+        } else {
+          console.error('Unable to reproduce video')
+        }
+      },
+      [muxSrc]
+    )
 
-      if (videoRef.current) {
-        const video = videoRef.current
+    const importHls = React.useCallback(
+      async (videoElm: HTMLVideoElement) => {
+        const Hls = (await import('hls.js')).default
 
-        if (video.canPlayType('application/vnd.apple.mpegurl')) {
-          // Some browers (safari and ie edge) support HLS natively
-          video.src = muxSrc
-          video.defaultMuted = true
-        } else if (Hls.isSupported()) {
+        if (Hls.isSupported() && videoElm) {
           // This will run in all other modern browsers
-          hls = new Hls()
-          hls.attachMedia(video)
-          hls.on(Events.MEDIA_ATTACHED, () => {
-            hls?.loadSource(muxSrc)
-            hls?.on(Events.MANIFEST_PARSED, (_event, data) => {
+          hls.current = new Hls()
+          hls.current.attachMedia(videoElm)
+          hls.current.on(Hls.Events.MEDIA_ATTACHED, () => {
+            !lazy && loadVideo(videoElm)
+
+            hls.current?.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
               // Maximum quality available
-              hls.nextLevel ??= data.levels.length - 1
+              hls.current!.nextLevel ??= data.levels.length - 1
             })
           })
         } else {
           console.error("This is a legacy browser that doesn't support MSE")
         }
+      },
+      [lazy, loadVideo]
+    )
+
+    React.useEffect(() => {
+      if (!videoRef.current) return
+
+      const video = videoRef.current
+
+      if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        // Some browers (safari and ie edge) support HLS natively
+        video.defaultMuted = true
+        !lazy && loadVideo(video)
+      } else {
+        importHls(videoRef.current)
+      }
+
+      if (lazy) {
+        createObserver(videoRef.current, { triggerOnce: true }, () =>
+          loadVideo(video)
+        )
       }
 
       return () => {
-        if (hls) {
-          hls.destroy()
-        }
+        hls.current?.destroy?.()
       }
-    }, [videoRef, muxSrc])
+    }, [videoRef, muxSrc, lazy, importHls, loadVideo])
 
     return (
       <video ref={mergeRefs([videoRef, ref])} className={className} {...rest} />
diff --git a/src/hooks/use-intersection-observer.ts b/src/hooks/use-intersection-observer.ts
index cee3e5e..e476945 100644
--- a/src/hooks/use-intersection-observer.ts
+++ b/src/hooks/use-intersection-observer.ts
@@ -1,27 +1,45 @@
 import * as React from 'react'
 
-export const useIntersectionObserver = (
-  options: IntersectionObserverInit & { triggerOnce?: boolean }
-): [React.RefObject<HTMLDivElement>, { inView: boolean }] => {
-  const ref = React.useRef<HTMLDivElement>(null)
+type IntersectionObserverOptions = IntersectionObserverInit & {
+  triggerOnce?: boolean
+}
+
+export const createObserver = <T = HTMLElement>(
+  elm: T,
+  options: IntersectionObserverOptions,
+  cb: (entry: IntersectionObserverEntry) => void
+) => {
+  const handleObserve: IntersectionObserverCallback = ([element], observer) => {
+    if (element?.isIntersecting) {
+      if (options.triggerOnce) {
+        observer.unobserve(elm as unknown as Element)
+      }
+      cb(element)
+    }
+  }
+
+  const observer = new IntersectionObserver(handleObserve, options)
+
+  observer.observe(elm as unknown as Element)
+
+  return observer
+}
+
+export const useIntersectionObserver = <T = HTMLElement>(
+  options: IntersectionObserverOptions
+): [React.RefObject<T>, { inView: boolean }] => {
+  const ref = React.useRef<T>(null)
   const [inView, setInView] = React.useState(false)
 
   React.useEffect(() => {
     const elementToObserve = ref.current
     if (!elementToObserve) return
-    const handleObserve: IntersectionObserverCallback = ([element]) => {
-      if (element) {
-        setInView((p) => {
-          // trigger once?
-          if (options.triggerOnce && p === true) return p
-          else return element.isIntersecting
-        })
-      }
-    }
-
-    const observer = new IntersectionObserver(handleObserve, options)
 
-    observer.observe(elementToObserve)
+    const observer = createObserver(elementToObserve, options, (element) => {
+      setInView(() => {
+        return element.isIntersecting
+      })
+    })
 
     return () => {
       observer.disconnect()

From e8e545dd8511da955949300dd5423b7f4887ca91 Mon Sep 17 00:00:00 2001
From: matiasperz <matiasperezpc@hotmail.com>
Date: Mon, 4 Apr 2022 20:55:34 -0300
Subject: [PATCH 2/7] Adding lazyObserverOptions

---
 src/components/primitives/mux-video.tsx | 11 +++++++----
 src/hooks/use-intersection-observer.ts  |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/primitives/mux-video.tsx b/src/components/primitives/mux-video.tsx
index 74d4622..b8dfef4 100644
--- a/src/components/primitives/mux-video.tsx
+++ b/src/components/primitives/mux-video.tsx
@@ -7,13 +7,14 @@ import { createObserver } from '~/hooks/use-intersection-observer'
 export type MuxVideoProps = {
   muxSrc: string
   lazy?: boolean
+  lazyObserverOptions?: IntersectionObserverInit
 } & Omit<JSX.IntrinsicElements['video'], 'src'>
 
 const supportsHls = (videoElm: HTMLVideoElement) =>
   videoElm.canPlayType('application/vnd.apple.mpegurl')
 
 export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
-  ({ muxSrc, lazy = true, className, ...rest }, ref) => {
+  ({ muxSrc, lazy = true, lazyObserverOptions, className, ...rest }, ref) => {
     const hls = React.useRef<THls | null>(null)
     const videoRef = React.useRef<HTMLVideoElement>(null)
 
@@ -67,15 +68,17 @@ export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
       }
 
       if (lazy) {
-        createObserver(videoRef.current, { triggerOnce: true }, () =>
-          loadVideo(video)
+        createObserver(
+          videoRef.current,
+          { ...lazyObserverOptions, triggerOnce: true },
+          () => loadVideo(video)
         )
       }
 
       return () => {
         hls.current?.destroy?.()
       }
-    }, [videoRef, muxSrc, lazy, importHls, loadVideo])
+    }, [videoRef, muxSrc, lazy, importHls, loadVideo, lazyObserverOptions])
 
     return (
       <video ref={mergeRefs([videoRef, ref])} className={className} {...rest} />
diff --git a/src/hooks/use-intersection-observer.ts b/src/hooks/use-intersection-observer.ts
index e476945..f95c568 100644
--- a/src/hooks/use-intersection-observer.ts
+++ b/src/hooks/use-intersection-observer.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-type IntersectionObserverOptions = IntersectionObserverInit & {
+export type IntersectionObserverOptions = IntersectionObserverInit & {
   triggerOnce?: boolean
 }
 

From a616886a07a9b5e2e7a263e5c1e4257fb7c8f273 Mon Sep 17 00:00:00 2001
From: matiasperz <matiasperezpc@hotmail.com>
Date: Tue, 5 Apr 2022 01:20:33 -0300
Subject: [PATCH 3/7] Clean intersection observer

---
 src/components/primitives/mux-video.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/primitives/mux-video.tsx b/src/components/primitives/mux-video.tsx
index b8dfef4..dbd5a6b 100644
--- a/src/components/primitives/mux-video.tsx
+++ b/src/components/primitives/mux-video.tsx
@@ -58,18 +58,19 @@ export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
       if (!videoRef.current) return
 
       const video = videoRef.current
+      let intersectionObserver: IntersectionObserver
 
       if (video.canPlayType('application/vnd.apple.mpegurl')) {
         // Some browers (safari and ie edge) support HLS natively
         video.defaultMuted = true
         !lazy && loadVideo(video)
       } else {
-        importHls(videoRef.current)
+        importHls(video)
       }
 
       if (lazy) {
-        createObserver(
-          videoRef.current,
+        intersectionObserver = createObserver(
+          video,
           { ...lazyObserverOptions, triggerOnce: true },
           () => loadVideo(video)
         )
@@ -77,8 +78,9 @@ export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
 
       return () => {
         hls.current?.destroy?.()
+        intersectionObserver?.disconnect?.()
       }
-    }, [videoRef, muxSrc, lazy, importHls, loadVideo, lazyObserverOptions])
+    }, [lazy, importHls, loadVideo, lazyObserverOptions])
 
     return (
       <video ref={mergeRefs([videoRef, ref])} className={className} {...rest} />

From 47ac9534e41c6e0711aae8acc63fc956134670e7 Mon Sep 17 00:00:00 2001
From: Matias Perez <matiasperezpc@hotmail.com>
Date: Fri, 12 May 2023 03:28:36 -0300
Subject: [PATCH 4/7] fix issues

---
 .../primitives/mux-video/helpers.ts           | 52 +++++++++++++++++++
 .../{mux-video.tsx => mux-video/index.tsx}    | 23 +++++---
 2 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 src/components/primitives/mux-video/helpers.ts
 rename src/components/primitives/{mux-video.tsx => mux-video/index.tsx} (89%)

diff --git a/src/components/primitives/mux-video/helpers.ts b/src/components/primitives/mux-video/helpers.ts
new file mode 100644
index 0000000..721c7e2
--- /dev/null
+++ b/src/components/primitives/mux-video/helpers.ts
@@ -0,0 +1,52 @@
+import type THls from 'hls.js'
+
+export const supportsHls = (videoElm: HTMLVideoElement) =>
+  videoElm.canPlayType('application/vnd.apple.mpegurl')
+
+/* 
+  This func only works if the levels array is ordered
+  by resolution from lowest to highest.
+*/
+export const getMostSuitableResolution = (
+  videoHeight: number,
+  levels: THls['levels'],
+  allowVideoStretching = true
+) => {
+  const mostSuitableResolution = levels.reduce(
+    ({ level: prevLevel, idx: prevIdx }, level, idx) => {
+      if (idx === null || prevLevel === null) return { level, idx }
+
+      const newdiff = level.height - videoHeight
+      const prevDiff = prevLevel.height - videoHeight
+
+      /* 
+        This is true if the prev video res is lower than the
+        video height and stretching is not allowed.
+      */
+      const prioritizeTheHighestValue = !allowVideoStretching && prevDiff < 0
+      /*
+        This is not valid when the videoStretching is disabled
+        and the video height is lower than the video elm height.
+      */
+      const isDiffValid = allowVideoStretching || newdiff >= 0
+
+      if (
+        isDiffValid &&
+        (prioritizeTheHighestValue || Math.abs(newdiff) < Math.abs(prevDiff))
+      ) {
+        return { level, idx }
+      }
+
+      return {
+        level: prevLevel,
+        idx: prevIdx
+      }
+    },
+    { level: null, idx: null } as {
+      level: THls['levels'][number] | null
+      idx: number | null
+    }
+  )
+
+  return mostSuitableResolution.idx!
+}
diff --git a/src/components/primitives/mux-video.tsx b/src/components/primitives/mux-video/index.tsx
similarity index 89%
rename from src/components/primitives/mux-video.tsx
rename to src/components/primitives/mux-video/index.tsx
index dbd5a6b..fe93fb5 100644
--- a/src/components/primitives/mux-video.tsx
+++ b/src/components/primitives/mux-video/index.tsx
@@ -4,17 +4,26 @@ import mergeRefs from 'react-merge-refs'
 
 import { createObserver } from '~/hooks/use-intersection-observer'
 
+import { supportsHls } from './helpers'
+
 export type MuxVideoProps = {
   muxSrc: string
   lazy?: boolean
   lazyObserverOptions?: IntersectionObserverInit
 } & Omit<JSX.IntrinsicElements['video'], 'src'>
 
-const supportsHls = (videoElm: HTMLVideoElement) =>
-  videoElm.canPlayType('application/vnd.apple.mpegurl')
-
 export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
-  ({ muxSrc, lazy = true, lazyObserverOptions, className, ...rest }, ref) => {
+  (
+    {
+      muxSrc,
+      lazy = true,
+
+      lazyObserverOptions,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
     const hls = React.useRef<THls | null>(null)
     const videoRef = React.useRef<HTMLVideoElement>(null)
 
@@ -43,8 +52,10 @@ export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
             !lazy && loadVideo(videoElm)
 
             hls.current?.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
+              const _hls = hls?.current as THls
+
               // Maximum quality available
-              hls.current!.nextLevel ??= data.levels.length - 1
+              _hls.nextLevel ??= data.levels.length - 1
             })
           })
         } else {
@@ -60,7 +71,7 @@ export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
       const video = videoRef.current
       let intersectionObserver: IntersectionObserver
 
-      if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      if (supportsHls(video)) {
         // Some browers (safari and ie edge) support HLS natively
         video.defaultMuted = true
         !lazy && loadVideo(video)

From 090d78cb7e195e7ce0759817c0a7c01a8a8bed4e Mon Sep 17 00:00:00 2001
From: Matias Perez <matiasperezpc@hotmail.com>
Date: Fri, 12 May 2023 04:56:23 -0300
Subject: [PATCH 5/7] update

---
 src/components/primitives/mux-video.tsx       |  86 ++++++++++++++
 .../primitives/mux-video/helpers.ts           |  52 ---------
 src/components/primitives/mux-video/index.tsx | 105 ------------------
 3 files changed, 86 insertions(+), 157 deletions(-)
 create mode 100644 src/components/primitives/mux-video.tsx
 delete mode 100644 src/components/primitives/mux-video/helpers.ts
 delete mode 100644 src/components/primitives/mux-video/index.tsx

diff --git a/src/components/primitives/mux-video.tsx b/src/components/primitives/mux-video.tsx
new file mode 100644
index 0000000..2de34a9
--- /dev/null
+++ b/src/components/primitives/mux-video.tsx
@@ -0,0 +1,86 @@
+import type THls from 'hls.js'
+import * as React from 'react'
+import mergeRefs from 'react-merge-refs'
+
+export const supportsHls = (videoElm: HTMLVideoElement) =>
+  Boolean(videoElm.canPlayType('application/vnd.apple.mpegurl'))
+
+export type MuxVideoProps = {
+  muxSrc: string
+  lazy?: boolean
+  lazyObserverOptions?: IntersectionObserverInit
+} & Omit<JSX.IntrinsicElements['video'], 'src'>
+
+let hls: THls
+
+export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
+  ({ muxSrc, lazy = true, lazyObserverOptions, ...rest }, ref) => {
+    const videoRef = React.useRef<HTMLVideoElement>(null)
+
+    React.useEffect(() => {
+      if (!videoRef.current) return
+
+      // Dynamic import to prevent bundling hls.js in the client bundle if it's not needed
+      const importHls = () => import('hls.js').then((module) => module.default)
+
+      const video = videoRef.current
+      const hasNativeHlsSupport = supportsHls(video)
+
+      const loadVideo = (videoElm: HTMLVideoElement) => {
+        if (hasNativeHlsSupport) {
+          videoElm.src = muxSrc
+        } else {
+          importHls().then((Hls) => {
+            if (Hls.isSupported() && videoElm) {
+              if (!hls) {
+                hls = new Hls()
+              }
+
+              hls.attachMedia(videoElm)
+
+              hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+                hls.loadSource(muxSrc)
+
+                hls?.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
+                  // Maximum quality available
+                  hls.nextLevel ??= data.levels.length - 1
+                })
+              })
+            } else {
+              console.error("This is a legacy browser that doesn't support MSE")
+            }
+          })
+        }
+      }
+
+      let intersectionObserver: IntersectionObserver
+
+      if (lazy) {
+        intersectionObserver = new IntersectionObserver(
+          ([element], observer) => {
+            if (element?.isIntersecting) {
+              loadVideo(video)
+              observer?.disconnect?.()
+            }
+          },
+          lazyObserverOptions
+        )
+
+        intersectionObserver.observe(video)
+      } else {
+        loadVideo(video)
+      }
+
+      return () => {
+        intersectionObserver?.disconnect?.()
+      }
+    }, [muxSrc, lazy, lazyObserverOptions])
+
+    return <video ref={mergeRefs([videoRef, ref])} {...rest} />
+  }
+)
+
+export const getMuxSrc = (playbackId: string) => {
+  if (playbackId.startsWith('https://stream.mux.com')) return playbackId
+  return `https://stream.mux.com/${playbackId}.m3u8`
+}
diff --git a/src/components/primitives/mux-video/helpers.ts b/src/components/primitives/mux-video/helpers.ts
deleted file mode 100644
index 721c7e2..0000000
--- a/src/components/primitives/mux-video/helpers.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type THls from 'hls.js'
-
-export const supportsHls = (videoElm: HTMLVideoElement) =>
-  videoElm.canPlayType('application/vnd.apple.mpegurl')
-
-/* 
-  This func only works if the levels array is ordered
-  by resolution from lowest to highest.
-*/
-export const getMostSuitableResolution = (
-  videoHeight: number,
-  levels: THls['levels'],
-  allowVideoStretching = true
-) => {
-  const mostSuitableResolution = levels.reduce(
-    ({ level: prevLevel, idx: prevIdx }, level, idx) => {
-      if (idx === null || prevLevel === null) return { level, idx }
-
-      const newdiff = level.height - videoHeight
-      const prevDiff = prevLevel.height - videoHeight
-
-      /* 
-        This is true if the prev video res is lower than the
-        video height and stretching is not allowed.
-      */
-      const prioritizeTheHighestValue = !allowVideoStretching && prevDiff < 0
-      /*
-        This is not valid when the videoStretching is disabled
-        and the video height is lower than the video elm height.
-      */
-      const isDiffValid = allowVideoStretching || newdiff >= 0
-
-      if (
-        isDiffValid &&
-        (prioritizeTheHighestValue || Math.abs(newdiff) < Math.abs(prevDiff))
-      ) {
-        return { level, idx }
-      }
-
-      return {
-        level: prevLevel,
-        idx: prevIdx
-      }
-    },
-    { level: null, idx: null } as {
-      level: THls['levels'][number] | null
-      idx: number | null
-    }
-  )
-
-  return mostSuitableResolution.idx!
-}
diff --git a/src/components/primitives/mux-video/index.tsx b/src/components/primitives/mux-video/index.tsx
deleted file mode 100644
index fe93fb5..0000000
--- a/src/components/primitives/mux-video/index.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import type THls from 'hls.js'
-import * as React from 'react'
-import mergeRefs from 'react-merge-refs'
-
-import { createObserver } from '~/hooks/use-intersection-observer'
-
-import { supportsHls } from './helpers'
-
-export type MuxVideoProps = {
-  muxSrc: string
-  lazy?: boolean
-  lazyObserverOptions?: IntersectionObserverInit
-} & Omit<JSX.IntrinsicElements['video'], 'src'>
-
-export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
-  (
-    {
-      muxSrc,
-      lazy = true,
-
-      lazyObserverOptions,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    const hls = React.useRef<THls | null>(null)
-    const videoRef = React.useRef<HTMLVideoElement>(null)
-
-    const loadVideo = React.useCallback(
-      (videoElm: HTMLVideoElement) => {
-        if (hls.current) {
-          hls.current?.loadSource(muxSrc)
-        } else if (videoElm && supportsHls(videoElm)) {
-          videoElm.src = muxSrc
-        } else {
-          console.error('Unable to reproduce video')
-        }
-      },
-      [muxSrc]
-    )
-
-    const importHls = React.useCallback(
-      async (videoElm: HTMLVideoElement) => {
-        const Hls = (await import('hls.js')).default
-
-        if (Hls.isSupported() && videoElm) {
-          // This will run in all other modern browsers
-          hls.current = new Hls()
-          hls.current.attachMedia(videoElm)
-          hls.current.on(Hls.Events.MEDIA_ATTACHED, () => {
-            !lazy && loadVideo(videoElm)
-
-            hls.current?.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
-              const _hls = hls?.current as THls
-
-              // Maximum quality available
-              _hls.nextLevel ??= data.levels.length - 1
-            })
-          })
-        } else {
-          console.error("This is a legacy browser that doesn't support MSE")
-        }
-      },
-      [lazy, loadVideo]
-    )
-
-    React.useEffect(() => {
-      if (!videoRef.current) return
-
-      const video = videoRef.current
-      let intersectionObserver: IntersectionObserver
-
-      if (supportsHls(video)) {
-        // Some browers (safari and ie edge) support HLS natively
-        video.defaultMuted = true
-        !lazy && loadVideo(video)
-      } else {
-        importHls(video)
-      }
-
-      if (lazy) {
-        intersectionObserver = createObserver(
-          video,
-          { ...lazyObserverOptions, triggerOnce: true },
-          () => loadVideo(video)
-        )
-      }
-
-      return () => {
-        hls.current?.destroy?.()
-        intersectionObserver?.disconnect?.()
-      }
-    }, [lazy, importHls, loadVideo, lazyObserverOptions])
-
-    return (
-      <video ref={mergeRefs([videoRef, ref])} className={className} {...rest} />
-    )
-  }
-)
-
-export const getMuxSrc = (playbackId: string) => {
-  if (playbackId.startsWith('https://stream.mux.com')) return playbackId
-  return `https://stream.mux.com/${playbackId}.m3u8`
-}

From 774034f123488d9fae94f9df3ce04683782fe1cb Mon Sep 17 00:00:00 2001
From: Matias Perez <matiasperezpc@hotmail.com>
Date: Fri, 12 May 2023 05:24:30 -0300
Subject: [PATCH 6/7] add thumbnail utility

---
 src/components/primitives/mux-video.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/primitives/mux-video.tsx b/src/components/primitives/mux-video.tsx
index 2de34a9..13d7989 100644
--- a/src/components/primitives/mux-video.tsx
+++ b/src/components/primitives/mux-video.tsx
@@ -80,6 +80,11 @@ export const MuxVideo = React.forwardRef<HTMLVideoElement, MuxVideoProps>(
   }
 )
 
+export const getMuxThumbnailSrc = (playbackId: string) => {
+  if (playbackId.startsWith('https://image.mux.com')) return playbackId
+  return `https://image.mux.com/${playbackId}/thumbnail.png`
+}
+
 export const getMuxSrc = (playbackId: string) => {
   if (playbackId.startsWith('https://stream.mux.com')) return playbackId
   return `https://stream.mux.com/${playbackId}.m3u8`

From a49a8a07ec0616e657ea35b36cf9ee9b67e397dd Mon Sep 17 00:00:00 2001
From: Matias Perez <matiasperezpc@hotmail.com>
Date: Fri, 12 May 2023 11:21:01 -0300
Subject: [PATCH 7/7] revert changes on observer hook

---
 src/hooks/use-intersection-observer.ts | 23 +++++------------------
 1 file changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/hooks/use-intersection-observer.ts b/src/hooks/use-intersection-observer.ts
index f575a4b..94d9cde 100644
--- a/src/hooks/use-intersection-observer.ts
+++ b/src/hooks/use-intersection-observer.ts
@@ -1,23 +1,7 @@
 import * as React from 'react'
 
-export type UseIntersectionObserverOptions = IntersectionObserverInit & {
-  triggerOnce?: boolean
-}
-
-export const createObserver = <T = HTMLElement>(
-  elm: T,
-  options: UseIntersectionObserverOptions,
-  handler: IntersectionObserverCallback
-) => {
-  const observer = new IntersectionObserver(handler, options)
-
-  observer.observe(elm as unknown as Element)
-
-  return observer
-}
-
 export const useIntersectionObserver = <T extends Element>(
-  options: UseIntersectionObserverOptions
+  options: IntersectionObserverInit & { triggerOnce?: boolean }
 ) => {
   const ref = React.useRef<T>(null)
   const [inView, setInView] = React.useState(false)
@@ -28,13 +12,16 @@ export const useIntersectionObserver = <T extends Element>(
     const handleObserve: IntersectionObserverCallback = ([element]) => {
       if (element) {
         setInView((p) => {
+          // trigger once?
           if (options && options.triggerOnce && p === true) return p
           else return element.isIntersecting
         })
       }
     }
 
-    const observer = createObserver(elementToObserve, options, handleObserve)
+    const observer = new IntersectionObserver(handleObserve, options)
+
+    observer.observe(elementToObserve)
 
     return () => {
       observer.disconnect()