jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-08 18:06:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve hls stream view error handling (#10714)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Allen Porter 2021-11-29 23:48:24 -08:00 committed by GitHub
parent 67f06112c6
commit 02644b923f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/ha-hls-player.ts
View File

@ -7,10 +7,11 @@ import {
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, query } from "lit/decorators";
import { customElement, property, query, state } from "lit/decorators";
import { nextRender } from "../common/util/render-status";
import { getExternalConfig } from "../external_app/external_config";
import type { HomeAssistant } from "../types";
import "./ha-alert";
type HlsLite = Omit<
HlsType,
@ -41,6 +42,8 @@ class HaHLSPlayer extends LitElement {
// don't cache this, as we remove it on disconnects
@query("video") private _videoEl!: HTMLVideoElement;
@state() private _error?: string;
private _hlsPolyfillInstance?: HlsLite;
private _exoPlayer = false;
@ -58,6 +61,9 @@ class HaHLSPlayer extends LitElement {
}
protected render(): TemplateResult {
if (this._error) {
return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
}
return html`
<video
?autoplay=${this.autoPlay}
@ -90,6 +96,8 @@ class HaHLSPlayer extends LitElement {
}
private async _startHls(): Promise<void> {
this._error = undefined;
const videoEl = this._videoEl;
const useExoPlayerPromise = this._getUseExoPlayer();
const masterPlaylistPromise = fetch(this.url);
@ -109,7 +117,7 @@ class HaHLSPlayer extends LitElement {
}
if (!hlsSupported) {
videoEl.innerHTML = this.hass.localize(
this._error = this.hass.localize(
"ui.components.media-browser.video_not_supported"
);
return;
@ -196,6 +204,44 @@ class HaHLSPlayer extends LitElement {
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
hls.loadSource(url);
});
hls.on(Hls.Events.ERROR, (_, data: any) => {
if (!data.fatal) {
return;
}
if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
switch (data.details) {
case Hls.ErrorDetails.MANIFEST_LOAD_ERROR: {
let error = "Error starting stream, see logs for details";
if (
data.response !== undefined &&
data.response.code !== undefined
) {
if (data.response.code >= 500) {
error += " (Server failure)";
} else if (data.response.code >= 400) {
error += " (Stream never started)";
} else {
error += " (" + data.response.code + ")";
}
}
this._error = error;
return;
}
case Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
this._error = "Timeout while starting stream";
return;
default:
this._error = "Unknown stream network error (" + data.details + ")";
return;
}
this._error = "Error with media stream contents (" + data.details + ")";
} else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
this._error = "Error with media stream contents (" + data.details + ")";
} else {
this._error =
"Unknown error with stream (" + data.type + ", " + data.details + ")";
}
});
}
private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) {
@ -231,6 +277,11 @@ class HaHLSPlayer extends LitElement {
width: 100%;
max-height: var(--video-max-height, calc(100vh - 97px));
}
ha-alert {
display: block;
padding: 100px 16px;
}
`;
}
}