mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-08 18:06:36 +00:00
Improve hls stream view error handling (#10714)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
67f06112c6
commit
02644b923f
@ -7,10 +7,11 @@ import {
|
|||||||
PropertyValues,
|
PropertyValues,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit";
|
} 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 { nextRender } from "../common/util/render-status";
|
||||||
import { getExternalConfig } from "../external_app/external_config";
|
import { getExternalConfig } from "../external_app/external_config";
|
||||||
import type { HomeAssistant } from "../types";
|
import type { HomeAssistant } from "../types";
|
||||||
|
import "./ha-alert";
|
||||||
|
|
||||||
type HlsLite = Omit<
|
type HlsLite = Omit<
|
||||||
HlsType,
|
HlsType,
|
||||||
@ -41,6 +42,8 @@ class HaHLSPlayer extends LitElement {
|
|||||||
// don't cache this, as we remove it on disconnects
|
// don't cache this, as we remove it on disconnects
|
||||||
@query("video") private _videoEl!: HTMLVideoElement;
|
@query("video") private _videoEl!: HTMLVideoElement;
|
||||||
|
|
||||||
|
@state() private _error?: string;
|
||||||
|
|
||||||
private _hlsPolyfillInstance?: HlsLite;
|
private _hlsPolyfillInstance?: HlsLite;
|
||||||
|
|
||||||
private _exoPlayer = false;
|
private _exoPlayer = false;
|
||||||
@ -58,6 +61,9 @@ class HaHLSPlayer extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
|
if (this._error) {
|
||||||
|
return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
|
||||||
|
}
|
||||||
return html`
|
return html`
|
||||||
<video
|
<video
|
||||||
?autoplay=${this.autoPlay}
|
?autoplay=${this.autoPlay}
|
||||||
@ -90,6 +96,8 @@ class HaHLSPlayer extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private async _startHls(): Promise<void> {
|
private async _startHls(): Promise<void> {
|
||||||
|
this._error = undefined;
|
||||||
|
|
||||||
const videoEl = this._videoEl;
|
const videoEl = this._videoEl;
|
||||||
const useExoPlayerPromise = this._getUseExoPlayer();
|
const useExoPlayerPromise = this._getUseExoPlayer();
|
||||||
const masterPlaylistPromise = fetch(this.url);
|
const masterPlaylistPromise = fetch(this.url);
|
||||||
@ -109,7 +117,7 @@ class HaHLSPlayer extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!hlsSupported) {
|
if (!hlsSupported) {
|
||||||
videoEl.innerHTML = this.hass.localize(
|
this._error = this.hass.localize(
|
||||||
"ui.components.media-browser.video_not_supported"
|
"ui.components.media-browser.video_not_supported"
|
||||||
);
|
);
|
||||||
return;
|
return;
|
||||||
@ -196,6 +204,44 @@ class HaHLSPlayer extends LitElement {
|
|||||||
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
|
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
|
||||||
hls.loadSource(url);
|
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) {
|
private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) {
|
||||||
@ -231,6 +277,11 @@ class HaHLSPlayer extends LitElement {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: var(--video-max-height, calc(100vh - 97px));
|
max-height: var(--video-max-height, calc(100vh - 97px));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ha-alert {
|
||||||
|
display: block;
|
||||||
|
padding: 100px 16px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user