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

Enable http cache for local media-player-browse thumbnails (#13339)

Browse Source
This commit is contained in:
uvjustin 2022-12-14 18:38:20 +08:00 committed by GitHub
parent 5faf7cf0af
commit 872395bec5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/media-player/ha-media-player-browse.ts
View File

@ -27,7 +27,6 @@ import { until } from "lit/directives/until";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { computeRTLDirection } from "../../common/util/compute_rtl"; import { computeRTLDirection } from "../../common/util/compute_rtl";
import { debounce } from "../../common/util/debounce"; import { debounce } from "../../common/util/debounce";
import { getSignedPath } from "../../data/auth";
import { UNAVAILABLE_STATES } from "../../data/entity"; import { UNAVAILABLE_STATES } from "../../data/entity";
import type { MediaPlayerItem } from "../../data/media-player"; import type { MediaPlayerItem } from "../../data/media-player";
import { import {
@ -339,7 +338,7 @@ export class HaMediaPlayerBrowse extends LitElement {
: MediaClassBrowserSettings.directory; : MediaClassBrowserSettings.directory;
const backgroundImage = currentItem.thumbnail const backgroundImage = currentItem.thumbnail
? this._getSignedThumbnail(currentItem.thumbnail).then( ? this._getThumbnailURLorBase64(currentItem.thumbnail).then(
(value) => `url(${value})` (value) => `url(${value})`
) )
: "none"; : "none";
@ -550,7 +549,7 @@ export class HaMediaPlayerBrowse extends LitElement {
private _renderGridItem = (child: MediaPlayerItem): TemplateResult => { private _renderGridItem = (child: MediaPlayerItem): TemplateResult => {
const backgroundImage = child.thumbnail const backgroundImage = child.thumbnail
? this._getSignedThumbnail(child.thumbnail).then( ? this._getThumbnailURLorBase64(child.thumbnail).then(
(value) => `url(${value})` (value) => `url(${value})`
) )
: "none"; : "none";
@ -615,7 +614,7 @@ export class HaMediaPlayerBrowse extends LitElement {
const backgroundImage = const backgroundImage =
mediaClass.show_list_images && child.thumbnail mediaClass.show_list_images && child.thumbnail
? this._getSignedThumbnail(child.thumbnail).then( ? this._getThumbnailURLorBase64(child.thumbnail).then(
(value) => `url(${value})` (value) => `url(${value})`
) )
: "none"; : "none";
@ -652,7 +651,7 @@ export class HaMediaPlayerBrowse extends LitElement {
`; `;
}; };
private async _getSignedThumbnail( private async _getThumbnailURLorBase64(
thumbnailUrl: string | undefined thumbnailUrl: string | undefined
): Promise<string> { ): Promise<string> {
if (!thumbnailUrl) { if (!thumbnailUrl) {
@ -661,7 +660,24 @@ export class HaMediaPlayerBrowse extends LitElement {
if (thumbnailUrl.startsWith("/")) { if (thumbnailUrl.startsWith("/")) {
// Thumbnails served by local API require authentication // Thumbnails served by local API require authentication
return (await getSignedPath(this.hass, thumbnailUrl)).path; return new Promise((resolve, reject) => {
this.hass
.fetchWithAuth(thumbnailUrl!)
// Since we are fetching with an authorization header, we cannot just put the
// URL directly into the document; we need to embed the image. We could do this
// using blob URLs, but then we would need to keep track of them in order to
// release them properly. Instead, we embed the thumbnail using base64.
.then((response) => response.blob())
.then((blob) => {
const reader = new FileReader();
reader.onload = () => {
const result = reader.result;
resolve(typeof result === "string" ? result : "");
};
reader.onerror = (e) => reject(e);
reader.readAsDataURL(blob);
});
});
} }
if (isBrandUrl(thumbnailUrl)) { if (isBrandUrl(thumbnailUrl)) {