Skip to content

Commit 49a243c

Browse files
BorghildSelleBorghildSelle
committed
🐛 properly unmount hls
1 parent b7210de commit 49a243c

5 files changed

Lines changed: 46 additions & 63 deletions

File tree

‎web/core/Backgrounds/BackgroundContainer.tsx‎

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { forwardRef, HTMLAttributes } from 'react'
2-
import type { BackgroundColours, BackgroundTypes, ImageBackground } from '../../types/index'
3-
import { BackgroundContainerType, BackgroundStyle, ColouredContainer } from './ColouredContainer'
4-
import { ColorKeyTokens } from '../../styles/colorKeyToUtilityMap'
1+
import { forwardRef, type HTMLAttributes } from 'react'
2+
import type { ColorKeyTokens } from '../../styles/colorKeyToUtilityMap'
53
import envisTwMerge from '../../twMerge'
4+
import type { BackgroundColours, BackgroundTypes, ImageBackground } from '../../types/index'
5+
import { type BackgroundContainerType, type BackgroundStyle, ColouredContainer } from './ColouredContainer'
66
import { ImageBackgroundContainer } from './ImageBackgroundContainer'
77

88
export type BackgroundContainerProps = {
@@ -43,7 +43,6 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
4343
dontSplit = false,
4444
as = 'div',
4545
backgroundStyle = 'regular',
46-
...rest
4746
},
4847
ref,
4948
) {
@@ -54,7 +53,6 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
5453
{type === 'backgroundImage' && backgroundImage && (
5554
<ImageBackgroundContainer
5655
as={as}
57-
{...rest}
5856
ref={ref}
5957
id={id}
6058
{...backgroundImage}
@@ -65,30 +63,26 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
6563
{children}
6664
</ImageBackgroundContainer>
6765
)}
68-
{(type === 'backgroundColor' || !type) && (
69-
<>
70-
{as == 'div' &&
71-
renderFragmentWhenPossible &&
72-
(restBackground?.backgroundColor === 'White' || restBackground?.backgroundUtility === 'white-100') &&
73-
className === '' &&
74-
!id ? (
75-
<>{children}</>
76-
) : (
77-
<ColouredContainer
78-
ref={ref}
79-
id={id}
80-
{...restBackground}
81-
style={style}
82-
as={as}
83-
backgroundStyle={backgroundStyle}
84-
className={envisTwMerge(`${id ? 'scroll-mt-topbar' : ''}`, className, twClassName)}
85-
{...rest}
86-
>
87-
{children}
88-
</ColouredContainer>
89-
)}
90-
</>
91-
)}
66+
{(type === 'backgroundColor' || !type) &&
67+
(as === 'div' &&
68+
renderFragmentWhenPossible &&
69+
(restBackground?.backgroundColor === 'White' || restBackground?.backgroundUtility === 'white-100') &&
70+
className === '' &&
71+
!id ? (
72+
children
73+
) : (
74+
<ColouredContainer
75+
ref={ref}
76+
id={id}
77+
{...restBackground}
78+
style={style}
79+
as={as}
80+
backgroundStyle={backgroundStyle}
81+
className={envisTwMerge(`${id ? 'scroll-mt-topbar' : ''}`, className, twClassName)}
82+
>
83+
{children}
84+
</ColouredContainer>
85+
))}
9286
</>
9387
)
9488
})

‎web/core/HlsVideoPlayer/HlsPlayer.tsx‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22
import Hls from 'hls.js'
3-
import { useEffect, useMemo, useRef, useState } from 'react'
3+
import { useEffect, useMemo, useRef } from 'react'
44
import envisTwMerge from '../../twMerge'
55

66
export const HlsPlayer = ({
@@ -14,8 +14,6 @@ export const HlsPlayer = ({
1414
}) => {
1515
const videoRef = useRef(null)
1616
const hlsRef = useRef<Hls | null>(null)
17-
const [error, setError] = useState<boolean>(false)
18-
const [errorText, setErrorText] = useState<string | null>(null)
1917

2018
const memoSrc = useMemo(() => {
2119
return src
@@ -29,39 +27,30 @@ export const HlsPlayer = ({
2927
// Load the live playlist
3028
hls.loadSource(memoSrc)
3129
hls.attachMedia(video)
32-
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
33-
console.log('autoplay with muted')
34-
/* if (autoPlay) {
35-
video.muted = true
36-
video.play()
37-
} */
38-
})
3930
// eslint-disable-next-line import/no-named-as-default-member
4031
hls.on(Hls.Events.ERROR, (_event, data) => {
4132
if (data.fatal) {
42-
setError(true)
4333
console.log(`Stream error: ${data.details}`)
4434
}
4535
})
46-
return () => {
47-
hls.destroy()
48-
}
49-
//@ts-ignore:todo
36+
37+
//@ts-expect-error:todo
5038
} else if (video?.canPlayType('application/vnd.apple.mpegurl')) {
5139
// Safari native HLS support
52-
//@ts-ignore:todo
40+
//@ts-expect-error:todo
5341
video.src = memoSrc
5442
} else {
55-
setError(true)
56-
setErrorText('Live streaming not supported in this browser')
43+
console.log('Live streaming not supported in this browser')
5744
}
58-
59-
// eslint-disable-next-line react-hooks/exhaustive-deps
60-
}, [])
45+
return () => {
46+
if (hlsRef.current) {
47+
hlsRef.current.destroy() // Crucial step to stop hls.js activity
48+
}
49+
}
50+
})
6151

6252
return (
6353
<>
64-
{error && <div className="text-red-500">Error: {errorText}</div>}
6554
{/* eslint-disable-next-line jsx-a11y/media-has-caption*/}
6655
<video
6756
ref={videoRef}

‎web/core/HlsVideoPlayer/HlsVideoPlayer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
'use client'
2-
import { getPxLgSizes, getTwAspectRatioUtilityOnRatio, ImageRatioKeys } from '@core/SanityImage/SanityImage'
2+
import { getPxLgSizes, getTwAspectRatioUtilityOnRatio, type ImageRatioKeys } from '@core/SanityImage/SanityImage'
33
import type { PortableTextBlock } from '@portabletext/types'
44
import Img from 'next/image'
5-
import { useMemo, type HTMLProps } from 'react'
5+
import { type HTMLProps, useMemo } from 'react'
66
import envisTwMerge from '../../twMerge'
77
import { HlsPlayer } from './HlsPlayer'
88

@@ -61,8 +61,8 @@ export const HlsVideoPlayer = ({
6161
}: HlsVideoPlayerProps) => {
6262
const videoOptions = useMemo(() => {
6363
return {
64-
muted: muted ? 'muted' : false,
65-
playsinline: playsInline,
64+
muted: muted,
65+
playsInline: playsInline,
6666
loop: loop,
6767
autoPlay: autoPlay,
6868
preload: autoPlay ? 'auto' : 'none',

‎web/pageComponents/shared/VideoPlayer.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { BackgroundContainer } from '@core/Backgrounds'
44
import HlsVideoPlayer from '@core/HlsVideoPlayer/HlsVideoPlayer'
55
import { ResourceLink } from '@core/Link'
6-
import { getTwAspectRatioUtilityOnRatio, ImageRatioKeys } from '@core/SanityImage/SanityImage'
6+
import { getTwAspectRatioUtilityOnRatio, type ImageRatioKeys } from '@core/SanityImage/SanityImage'
77
import { Heading } from '@core/Typography'
88
/* import type { VideoJS } from '@core/VideoJsPlayer' */
99
import type { PortableTextBlock } from '@portabletext/types'
@@ -34,7 +34,7 @@ const getHeightWidth = (aspectRatio: string, height?: number | string) => {
3434
return 'w-full h-full'
3535
}
3636
}
37-
return `h-[${typeof height == 'string' ? height : `${height}px`}] w-full`
37+
return `h-[${typeof height === 'string' ? height : `${height}px`}] w-full`
3838
}
3939

4040
export const getThumbnailRatio = (aspectRatio: string, height?: number) => {
@@ -106,7 +106,7 @@ export const VideoComponentWithCaption = ({
106106
<HlsVideoPlayer
107107
variant="default"
108108
src={video.url}
109-
//@ts-ignore:todo
109+
//@ts-expect-error:todo
110110
aspectRatio={designOptions.aspectRatio}
111111
poster={urlFor(video.thumbnail?.asset).width(w).height(h).url()}
112112
title={video.title}
@@ -154,7 +154,7 @@ export const VideoComponent = ({ video, designOptions, useFillMode = false, clas
154154
<HlsVideoPlayer
155155
variant="default"
156156
src={video?.url}
157-
//@ts-ignore:todo
157+
//@ts-expect-error:todo
158158
aspectRatio={designOptions?.aspectRatio}
159159
poster={urlFor(video.thumbnail?.asset).width(w).height(h).url()}
160160
title={video.title}
@@ -180,7 +180,7 @@ const VideoPlayer = ({ anchor, data, className }: { data: VideoPlayerData; ancho
180180
<div className={`pb-6`}>
181181
{title && <Heading value={title} as="h2" variant="xl" className="mb-2 pb-2" />}
182182
{ingress && <IngressText value={ingress} className="mb-lg" />}
183-
{action && action?.label && actionUrl && (
183+
{action?.label && actionUrl && (
184184
<ResourceLink
185185
href={actionUrl || ''}
186186
file={{

‎web/sections/Hero/LoopingVideo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
2-
import { ImageWithAlt } from '../../types'
32
import HlsVideoPlayer, { getThumbnailRatio } from '@core/HlsVideoPlayer/HlsVideoPlayer'
43
import { urlFor } from '../../common/helpers'
4+
import type { ImageWithAlt } from '../../types'
55

66
export type LoopingVideoRatio = '1:2' | 'narrow'
77

@@ -21,7 +21,7 @@ export const LoopingVideo = ({ video }: { video: LoopingVideoData }) => {
2121
return (
2222
<div className={`relative ${ratio === 'narrow' ? 'pb-[75%] md:pb-[30%]' : 'pb-[50%]'}`}>
2323
<HlsVideoPlayer
24-
//@ts-ignore:todo
24+
//@ts-expect-error:todo
2525
aspectRatio={ratio}
2626
src={url}
2727
autoPlay

0 commit comments

Comments
 (0)