mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 21:03:19 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add error boundary to player. For #2811

Browse source
This commit is contained in:
Gabe Kangas 2023-03-12 22:52:04 -07:00
parent 868893340e
commit 11a11e64ad
No known key found for this signature in database
GPG key ID: 4345B2060657F330
1 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
web/components/video/OwncastPlayer/OwncastPlayer.tsx
View file

@ -3,6 +3,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { VideoJsPlayerOptions } from 'video.js'; import { VideoJsPlayerOptions } from 'video.js';
import classNames from 'classnames'; import classNames from 'classnames';
import { ErrorBoundary } from 'react-error-boundary';
import { VideoJS } from '../VideoJS/VideoJS'; import { VideoJS } from '../VideoJS/VideoJS';
import ViewerPing from '../viewer-ping'; import ViewerPing from '../viewer-ping';
import { VideoPoster } from '../VideoPoster/VideoPoster'; import { VideoPoster } from '../VideoPoster/VideoPoster';
@ -13,6 +14,7 @@ import createVideoSettingsMenuButton from '../settings-menu';
import LatencyCompensator from '../latencyCompensator'; import LatencyCompensator from '../latencyCompensator';
import styles from './OwncastPlayer.module.scss'; import styles from './OwncastPlayer.module.scss';
import { VideoSettingsServiceContext } from '../../../services/video-settings-service'; import { VideoSettingsServiceContext } from '../../../services/video-settings-service';
import { ComponentError } from '../../ui/ComponentError/ComponentError';
const PLAYER_VOLUME = 'owncast_volume'; const PLAYER_VOLUME = 'owncast_volume';
const LATENCY_COMPENSATION_ENABLED = 'latencyCompensatorEnabled'; const LATENCY_COMPENSATION_ENABLED = 'latencyCompensatorEnabled';
@ -300,18 +302,29 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
); );
return ( return (
<div className={classNames(styles.container, className)} id="player"> <ErrorBoundary
{online && ( // eslint-disable-next-line react/no-unstable-nested-components
<div className={styles.player}> fallbackRender={({ error, resetErrorBoundary }) => (
<VideoJS options={videoJsOptions} onReady={handlePlayerReady} aria-label={title} /> <ComponentError
</div> componentName="OwncastPlayer"
message={error.message}
retryFunction={resetErrorBoundary}
/>
)} )}
<div className={styles.poster}> >
{!videoPlaying && ( <div className={classNames(styles.container, className)} id="player">
<VideoPoster online={online} initialSrc="/thumbnail.jpg" src="/thumbnail.jpg" /> {online && (
<div className={styles.player}>
<VideoJS options={videoJsOptions} onReady={handlePlayerReady} aria-label={title} />
</div>
)} )}
<div className={styles.poster}>
{!videoPlaying && (
<VideoPoster online={online} initialSrc="/thumbnail.jpg" src="/thumbnail.jpg" />
)}
</div>
</div> </div>
</div> </ErrorBoundary>
); );
}; };
export default OwncastPlayer; export default OwncastPlayer;