mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-14 21:06:34 +00:00
Update Media Browser to styling from Mockup (#11424)
Co-authored-by: Paulus Schoutsen <balloob@gmail.com> Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
a92100bb0a
commit
7c194d8910
@ -1,9 +1,13 @@
|
|||||||
|
import "../ha-header-bar";
|
||||||
|
import { mdiArrowLeft, mdiClose } from "@mdi/js";
|
||||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
|
import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
|
||||||
|
import { computeRTLDirection } from "../../common/util/compute_rtl";
|
||||||
import type {
|
import type {
|
||||||
MediaPickedEvent,
|
MediaPickedEvent,
|
||||||
MediaPlayerBrowseAction,
|
MediaPlayerBrowseAction,
|
||||||
|
MediaPlayerItem,
|
||||||
} from "../../data/media-player";
|
} from "../../data/media-player";
|
||||||
import { haStyleDialog } from "../../resources/styles";
|
import { haStyleDialog } from "../../resources/styles";
|
||||||
import type { HomeAssistant } from "../../types";
|
import type { HomeAssistant } from "../../types";
|
||||||
@ -16,6 +20,8 @@ import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
|
|||||||
class DialogMediaPlayerBrowse extends LitElement {
|
class DialogMediaPlayerBrowse extends LitElement {
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
|
@state() private _currentItem?: MediaPlayerItem;
|
||||||
|
|
||||||
@state() private _navigateIds?: MediaPlayerItemId[];
|
@state() private _navigateIds?: MediaPlayerItemId[];
|
||||||
|
|
||||||
@state() private _params?: MediaPlayerBrowseDialogParams;
|
@state() private _params?: MediaPlayerBrowseDialogParams;
|
||||||
@ -33,11 +39,12 @@ class DialogMediaPlayerBrowse extends LitElement {
|
|||||||
public closeDialog() {
|
public closeDialog() {
|
||||||
this._params = undefined;
|
this._params = undefined;
|
||||||
this._navigateIds = undefined;
|
this._navigateIds = undefined;
|
||||||
|
this._currentItem = undefined;
|
||||||
fireEvent(this, "dialog-closed", { dialog: this.localName });
|
fireEvent(this, "dialog-closed", { dialog: this.localName });
|
||||||
}
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
if (!this._params) {
|
if (!this._params || !this._navigateIds) {
|
||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -48,8 +55,36 @@ class DialogMediaPlayerBrowse extends LitElement {
|
|||||||
escapeKeyAction
|
escapeKeyAction
|
||||||
hideActions
|
hideActions
|
||||||
flexContent
|
flexContent
|
||||||
|
.heading=${true}
|
||||||
@closed=${this.closeDialog}
|
@closed=${this.closeDialog}
|
||||||
>
|
>
|
||||||
|
<ha-header-bar slot="heading">
|
||||||
|
${this._navigateIds.length > 1
|
||||||
|
? html`
|
||||||
|
<ha-icon-button
|
||||||
|
slot="navigationIcon"
|
||||||
|
.path=${mdiArrowLeft}
|
||||||
|
@click=${this._goBack}
|
||||||
|
></ha-icon-button>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
<span slot="title">
|
||||||
|
${!this._currentItem
|
||||||
|
? this.hass.localize(
|
||||||
|
"ui.components.media-browser.media-player-browser"
|
||||||
|
)
|
||||||
|
: this._currentItem.title}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<ha-icon-button
|
||||||
|
.label=${this.hass.localize("ui.dialogs.generic.close")}
|
||||||
|
.path=${mdiClose}
|
||||||
|
dialogAction="close"
|
||||||
|
slot="actionItems"
|
||||||
|
class="header_button"
|
||||||
|
dir=${computeRTLDirection(this.hass)}
|
||||||
|
></ha-icon-button>
|
||||||
|
</ha-header-bar>
|
||||||
<ha-media-player-browse
|
<ha-media-player-browse
|
||||||
dialog
|
dialog
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
@ -64,8 +99,14 @@ class DialogMediaPlayerBrowse extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _mediaBrowsed(ev) {
|
private _goBack() {
|
||||||
|
this._navigateIds = this._navigateIds?.slice(0, -1);
|
||||||
|
this._currentItem = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _mediaBrowsed(ev: { detail: HASSDomEvents["media-browsed"] }) {
|
||||||
this._navigateIds = ev.detail.ids;
|
this._navigateIds = ev.detail.ids;
|
||||||
|
this._currentItem = ev.detail.current;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _mediaPicked(ev: HASSDomEvent<MediaPickedEvent>): void {
|
private _mediaPicked(ev: HASSDomEvent<MediaPickedEvent>): void {
|
||||||
@ -89,7 +130,7 @@ class DialogMediaPlayerBrowse extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
ha-media-player-browse {
|
ha-media-player-browse {
|
||||||
--media-browser-max-height: 100vh;
|
--media-browser-max-height: calc(100vh - 65px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
@ -101,10 +142,17 @@ class DialogMediaPlayerBrowse extends LitElement {
|
|||||||
}
|
}
|
||||||
ha-media-player-browse {
|
ha-media-player-browse {
|
||||||
position: initial;
|
position: initial;
|
||||||
--media-browser-max-height: 100vh - 72px;
|
--media-browser-max-height: 100vh - 137px;
|
||||||
width: 700px;
|
width: 700px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ha-header-bar {
|
||||||
|
--mdc-theme-on-primary: var(--primary-text-color);
|
||||||
|
--mdc-theme-primary: var(--mdc-theme-surface);
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
import "@material/mwc-list/mwc-list";
|
import "@material/mwc-list/mwc-list";
|
||||||
import "@material/mwc-list/mwc-list-item";
|
import "@material/mwc-list/mwc-list-item";
|
||||||
import { mdiArrowLeft, mdiClose, mdiPlay, mdiPlus } from "@mdi/js";
|
import { mdiPlay, mdiPlus } from "@mdi/js";
|
||||||
import "@polymer/paper-item/paper-item";
|
import "@polymer/paper-item/paper-item";
|
||||||
import "@polymer/paper-listbox/paper-listbox";
|
import "@polymer/paper-listbox/paper-listbox";
|
||||||
import "@polymer/paper-tooltip/paper-tooltip";
|
import "@polymer/paper-tooltip/paper-tooltip";
|
||||||
@ -44,16 +44,17 @@ import type { HomeAssistant } from "../../types";
|
|||||||
import { documentationUrl } from "../../util/documentation-url";
|
import { documentationUrl } from "../../util/documentation-url";
|
||||||
import "../entity/ha-entity-picker";
|
import "../entity/ha-entity-picker";
|
||||||
import "../ha-button-menu";
|
import "../ha-button-menu";
|
||||||
|
import "../ha-card";
|
||||||
import type { HaCard } from "../ha-card";
|
import type { HaCard } from "../ha-card";
|
||||||
import "../ha-circular-progress";
|
import "../ha-circular-progress";
|
||||||
import "../ha-fab";
|
|
||||||
import "../ha-icon-button";
|
import "../ha-icon-button";
|
||||||
import "../ha-svg-icon";
|
import "../ha-svg-icon";
|
||||||
|
import "../ha-fab";
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HASSDomEvents {
|
interface HASSDomEvents {
|
||||||
"media-picked": MediaPickedEvent;
|
"media-picked": MediaPickedEvent;
|
||||||
"media-browsed": { ids: MediaPlayerItemId[]; back?: boolean };
|
"media-browsed": { ids: MediaPlayerItemId[]; current?: MediaPlayerItem };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -72,14 +73,15 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
|
|
||||||
@property({ type: Boolean }) public dialog = false;
|
@property({ type: Boolean }) public dialog = false;
|
||||||
|
|
||||||
|
@property() public navigateIds!: MediaPlayerItemId[];
|
||||||
|
|
||||||
@property({ type: Boolean, attribute: "narrow", reflect: true })
|
@property({ type: Boolean, attribute: "narrow", reflect: true })
|
||||||
|
// @ts-ignore
|
||||||
private _narrow = false;
|
private _narrow = false;
|
||||||
|
|
||||||
@property({ type: Boolean, attribute: "scroll", reflect: true })
|
@property({ type: Boolean, attribute: "scroll", reflect: true })
|
||||||
private _scrolled = false;
|
private _scrolled = false;
|
||||||
|
|
||||||
@property() public navigateIds!: MediaPlayerItemId[];
|
|
||||||
|
|
||||||
@state() private _error?: { message: string; code: string };
|
@state() private _error?: { message: string; code: string };
|
||||||
|
|
||||||
@state() private _parentItem?: MediaPlayerItem;
|
@state() private _parentItem?: MediaPlayerItem;
|
||||||
@ -113,6 +115,12 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public play(): void {
|
||||||
|
if (this._currentItem?.can_play) {
|
||||||
|
this._runAction(this._currentItem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
if (this._error) {
|
if (this._error) {
|
||||||
return html`
|
return html`
|
||||||
@ -129,12 +137,15 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
const subtitle = this.hass.localize(
|
const subtitle = this.hass.localize(
|
||||||
`ui.components.media-browser.class.${currentItem.media_class}`
|
`ui.components.media-browser.class.${currentItem.media_class}`
|
||||||
);
|
);
|
||||||
|
|
||||||
const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
|
const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
|
||||||
const childrenMediaClass =
|
const childrenMediaClass =
|
||||||
MediaClassBrowserSettings[currentItem.children_media_class];
|
MediaClassBrowserSettings[currentItem.children_media_class];
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div
|
${
|
||||||
|
currentItem.can_play
|
||||||
|
? html` <div
|
||||||
class="header ${classMap({
|
class="header ${classMap({
|
||||||
"no-img": !currentItem.thumbnail,
|
"no-img": !currentItem.thumbnail,
|
||||||
"no-dialog": !this.dialog,
|
"no-dialog": !this.dialog,
|
||||||
@ -164,7 +175,9 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
.label=${this.hass.localize(
|
.label=${this.hass.localize(
|
||||||
`ui.components.media-browser.${this.action}-media`
|
`ui.components.media-browser.${this.action}-media`
|
||||||
)}
|
)}
|
||||||
.path=${this.action === "play" ? mdiPlay : mdiPlus}
|
.path=${this.action === "play"
|
||||||
|
? mdiPlay
|
||||||
|
: mdiPlus}
|
||||||
></ha-svg-icon>
|
></ha-svg-icon>
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
`ui.components.media-browser.${this.action}`
|
`ui.components.media-browser.${this.action}`
|
||||||
@ -177,18 +190,13 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
: html``}
|
: html``}
|
||||||
<div class="header-info">
|
<div class="header-info">
|
||||||
<div class="breadcrumb">
|
<div class="breadcrumb">
|
||||||
${this.navigateIds.length > 1
|
|
||||||
? html`
|
|
||||||
<div class="previous-title" @click=${this.navigateBack}>
|
|
||||||
<ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
|
|
||||||
${this._parentItem ? this._parentItem.title : ""}
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
<h1 class="title">${currentItem.title}</h1>
|
<h1 class="title">${currentItem.title}</h1>
|
||||||
${subtitle ? html` <h2 class="subtitle">${subtitle}</h2> ` : ""}
|
${subtitle
|
||||||
|
? html` <h2 class="subtitle">${subtitle}</h2> `
|
||||||
|
: ""}
|
||||||
</div>
|
</div>
|
||||||
${currentItem.can_play && (!currentItem.thumbnail || !this._narrow)
|
${currentItem.can_play &&
|
||||||
|
(!currentItem.thumbnail || !this._narrow)
|
||||||
? html`
|
? html`
|
||||||
<mwc-button
|
<mwc-button
|
||||||
raised
|
raised
|
||||||
@ -199,7 +207,9 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
.label=${this.hass.localize(
|
.label=${this.hass.localize(
|
||||||
`ui.components.media-browser.${this.action}-media`
|
`ui.components.media-browser.${this.action}-media`
|
||||||
)}
|
)}
|
||||||
.path=${this.action === "play" ? mdiPlay : mdiPlus}
|
.path=${this.action === "play"
|
||||||
|
? mdiPlay
|
||||||
|
: mdiPlus}
|
||||||
></ha-svg-icon>
|
></ha-svg-icon>
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
`ui.components.media-browser.${this.action}`
|
`ui.components.media-browser.${this.action}`
|
||||||
@ -209,29 +219,28 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
: ""}
|
: ""}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
${this.dialog
|
</div>`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
<div
|
||||||
|
class="content"
|
||||||
|
@scroll=${this._scroll}
|
||||||
|
@touchmove=${this._scroll}
|
||||||
|
>
|
||||||
|
${
|
||||||
|
this._error
|
||||||
? html`
|
? html`
|
||||||
<ha-icon-button
|
<div class="container">
|
||||||
.label=${this.hass.localize("ui.dialogs.generic.close")}
|
${this._renderError(this._error)}
|
||||||
.path=${mdiClose}
|
|
||||||
@click=${this._closeDialogAction}
|
|
||||||
class="header_button"
|
|
||||||
dir=${computeRTLDirection(this.hass)}
|
|
||||||
></ha-icon-button>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="content" @scroll=${this._scroll} @touchmove=${this._scroll}>
|
|
||||||
${this._error
|
|
||||||
? html`
|
|
||||||
<div class="container">${this._renderError(this._error)}</div>
|
|
||||||
`
|
`
|
||||||
: currentItem.children?.length
|
: currentItem.children?.length
|
||||||
? childrenMediaClass.layout === "grid"
|
? childrenMediaClass.layout === "grid"
|
||||||
? html`
|
? html`
|
||||||
<div
|
<div
|
||||||
class="children ${classMap({
|
class="children ${classMap({
|
||||||
portrait: childrenMediaClass.thumbnail_ratio === "portrait",
|
portrait:
|
||||||
|
childrenMediaClass.thumbnail_ratio === "portrait",
|
||||||
})}"
|
})}"
|
||||||
>
|
>
|
||||||
${currentItem.children.map(
|
${currentItem.children.map(
|
||||||
@ -241,14 +250,20 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
.item=${child}
|
.item=${child}
|
||||||
@click=${this._childClicked}
|
@click=${this._childClicked}
|
||||||
>
|
>
|
||||||
<div class="ha-card-parent">
|
<ha-card outlined>
|
||||||
<ha-card
|
<div class="thumbnail">
|
||||||
outlined
|
${child.thumbnail
|
||||||
class=${child.thumbnail ? "lazythumbnail" : ""}
|
|
||||||
data-src=${ifDefined(child.thumbnail)}
|
|
||||||
>
|
|
||||||
${!child.thumbnail
|
|
||||||
? html`
|
? html`
|
||||||
|
<div
|
||||||
|
class="${child.media_class ===
|
||||||
|
"directory"
|
||||||
|
? "centered-image"
|
||||||
|
: ""} image lazythumbnail"
|
||||||
|
data-src=${child.thumbnail}
|
||||||
|
></div>
|
||||||
|
`
|
||||||
|
: html`
|
||||||
|
<div class="icon-holder image">
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
class="folder"
|
class="folder"
|
||||||
.path=${MediaClassBrowserSettings[
|
.path=${MediaClassBrowserSettings[
|
||||||
@ -258,9 +273,8 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
: child.media_class
|
: child.media_class
|
||||||
].icon}
|
].icon}
|
||||||
></ha-svg-icon>
|
></ha-svg-icon>
|
||||||
`
|
</div>
|
||||||
: ""}
|
`}
|
||||||
</ha-card>
|
|
||||||
${child.can_play
|
${child.can_play
|
||||||
? html`
|
? html`
|
||||||
<ha-icon-button
|
<ha-icon-button
|
||||||
@ -288,11 +302,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
>${child.title}</paper-tooltip
|
>${child.title}</paper-tooltip
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="type">
|
</ha-card>
|
||||||
${this.hass.localize(
|
|
||||||
`ui.components.media-browser.content-type.${child.media_content_type}`
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
@ -305,15 +315,20 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
<mwc-list-item
|
<mwc-list-item
|
||||||
@click=${this._childClicked}
|
@click=${this._childClicked}
|
||||||
.item=${child}
|
.item=${child}
|
||||||
graphic="avatar"
|
.graphic=${mediaClass.show_list_images
|
||||||
hasMeta
|
? "medium"
|
||||||
|
: "avatar"}
|
||||||
dir=${computeRTLDirection(this.hass)}
|
dir=${computeRTLDirection(this.hass)}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="graphic"
|
class=${classMap({
|
||||||
style=${ifDefined(
|
graphic: true,
|
||||||
|
lazythumbnail:
|
||||||
|
mediaClass.show_list_images === true,
|
||||||
|
})}
|
||||||
|
data-src=${ifDefined(
|
||||||
mediaClass.show_list_images && child.thumbnail
|
mediaClass.show_list_images && child.thumbnail
|
||||||
? `background-image: url(${child.thumbnail})`
|
? child.thumbnail
|
||||||
: undefined
|
: undefined
|
||||||
)}
|
)}
|
||||||
slot="graphic"
|
slot="graphic"
|
||||||
@ -328,7 +343,9 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
.label=${this.hass.localize(
|
.label=${this.hass.localize(
|
||||||
`ui.components.media-browser.${this.action}-media`
|
`ui.components.media-browser.${this.action}-media`
|
||||||
)}
|
)}
|
||||||
.path=${this.action === "play" ? mdiPlay : mdiPlus}
|
.path=${this.action === "play"
|
||||||
|
? mdiPlay
|
||||||
|
: mdiPlus}
|
||||||
@click=${this._actionClicked}
|
@click=${this._actionClicked}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
</div>
|
</div>
|
||||||
@ -341,7 +358,9 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<div class="container no-items">
|
<div class="container no-items">
|
||||||
${this.hass.localize("ui.components.media-browser.no_items")}
|
${this.hass.localize(
|
||||||
|
"ui.components.media-browser.no_items"
|
||||||
|
)}
|
||||||
<br />
|
<br />
|
||||||
${currentItem.media_content_id ===
|
${currentItem.media_content_id ===
|
||||||
"media-source://media_source/local/."
|
"media-source://media_source/local/."
|
||||||
@ -366,7 +385,10 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
)}`
|
)}`
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
</div>
|
||||||
`}
|
`
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -453,6 +475,10 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
currentProm.then(
|
currentProm.then(
|
||||||
(item) => {
|
(item) => {
|
||||||
this._currentItem = item;
|
this._currentItem = item;
|
||||||
|
fireEvent(this, "media-browsed", {
|
||||||
|
ids: this.navigateIds,
|
||||||
|
current: item,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
(err) => this._setError(err)
|
(err) => this._setError(err)
|
||||||
);
|
);
|
||||||
@ -482,40 +508,6 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private navigateBack() {
|
|
||||||
fireEvent(this, "media-browsed", {
|
|
||||||
ids: this.navigateIds.slice(0, -1),
|
|
||||||
back: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private async _setHeaderHeight() {
|
|
||||||
await this.updateComplete;
|
|
||||||
const header = this._header;
|
|
||||||
const content = this._content;
|
|
||||||
if (!header || !content) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this._headerOffsetHeight = header.offsetHeight;
|
|
||||||
content.style.marginTop = `${this._headerOffsetHeight}px`;
|
|
||||||
content.style.maxHeight = `calc(var(--media-browser-max-height, 100%) - ${this._headerOffsetHeight}px)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
private _animateHeaderHeight() {
|
|
||||||
let start;
|
|
||||||
const animate = (time) => {
|
|
||||||
if (start === undefined) {
|
|
||||||
start = time;
|
|
||||||
}
|
|
||||||
const elapsed = time - start;
|
|
||||||
this._setHeaderHeight();
|
|
||||||
if (elapsed < 400) {
|
|
||||||
requestAnimationFrame(animate);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
requestAnimationFrame(animate);
|
|
||||||
}
|
|
||||||
|
|
||||||
private _actionClicked(ev: MouseEvent): void {
|
private _actionClicked(ev: MouseEvent): void {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
const item = (ev.currentTarget as any).item;
|
const item = (ev.currentTarget as any).item;
|
||||||
@ -559,16 +551,6 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
this._narrow = (this.dialog ? window.innerWidth : this.offsetWidth) < 450;
|
this._narrow = (this.dialog ? window.innerWidth : this.offsetWidth) < 450;
|
||||||
}
|
}
|
||||||
|
|
||||||
@eventOptions({ passive: true })
|
|
||||||
private _scroll(ev: Event): void {
|
|
||||||
const content = ev.currentTarget as HTMLDivElement;
|
|
||||||
if (!this._scrolled && content.scrollTop > this._headerOffsetHeight) {
|
|
||||||
this._scrolled = true;
|
|
||||||
} else if (this._scrolled && content.scrollTop < this._headerOffsetHeight) {
|
|
||||||
this._scrolled = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async _attachResizeObserver(): Promise<void> {
|
private async _attachResizeObserver(): Promise<void> {
|
||||||
if (!this._resizeObserver) {
|
if (!this._resizeObserver) {
|
||||||
await installResizeObserver();
|
await installResizeObserver();
|
||||||
@ -595,7 +577,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
if (!entry.isIntersecting) {
|
if (!entry.isIntersecting) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const thumbnailCard = entry.target as HaCard;
|
const thumbnailCard = entry.target as HTMLElement;
|
||||||
let thumbnailUrl = thumbnailCard.dataset.src;
|
let thumbnailUrl = thumbnailCard.dataset.src;
|
||||||
if (!thumbnailUrl) {
|
if (!thumbnailUrl) {
|
||||||
return;
|
return;
|
||||||
@ -675,6 +657,43 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
return html`<span class="error">${err.message}</span>`;
|
return html`<span class="error">${err.message}</span>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private async _setHeaderHeight() {
|
||||||
|
await this.updateComplete;
|
||||||
|
const header = this._header;
|
||||||
|
const content = this._content;
|
||||||
|
if (!header || !content) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._headerOffsetHeight = header.offsetHeight;
|
||||||
|
content.style.marginTop = `${this._headerOffsetHeight}px`;
|
||||||
|
content.style.maxHeight = `calc(var(--media-browser-max-height, 100%) - ${this._headerOffsetHeight}px)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _animateHeaderHeight() {
|
||||||
|
let start;
|
||||||
|
const animate = (time) => {
|
||||||
|
if (start === undefined) {
|
||||||
|
start = time;
|
||||||
|
}
|
||||||
|
const elapsed = time - start;
|
||||||
|
this._setHeaderHeight();
|
||||||
|
if (elapsed < 400) {
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
@eventOptions({ passive: true })
|
||||||
|
private _scroll(ev: Event): void {
|
||||||
|
const content = ev.currentTarget as HTMLDivElement;
|
||||||
|
if (!this._scrolled && content.scrollTop > this._headerOffsetHeight) {
|
||||||
|
this._scrolled = true;
|
||||||
|
} else if (this._scrolled && content.scrollTop < this._headerOffsetHeight) {
|
||||||
|
this._scrolled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return [
|
return [
|
||||||
haStyle,
|
haStyle,
|
||||||
@ -702,10 +721,11 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
|
|
||||||
.content {
|
.content {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-bottom: 20px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* HEADER */
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -716,30 +736,26 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
padding: 20px 24px 10px 32px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header_button {
|
.header_button {
|
||||||
position: relative;
|
position: relative;
|
||||||
right: -8px;
|
right: -8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-content {
|
.header-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-content .img {
|
.header-content .img {
|
||||||
height: 200px;
|
height: 175px;
|
||||||
width: 200px;
|
width: 175px;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border-radius: 4px;
|
border-radius: 2px;
|
||||||
transition: width 0.4s, height 0.4s;
|
transition: width 0.4s, height 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-info {
|
.header-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -748,19 +764,18 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-info mwc-button {
|
.header-info mwc-button {
|
||||||
display: block;
|
display: block;
|
||||||
--mdc-theme-primary: var(--primary-color);
|
--mdc-theme-primary: var(--primary-color);
|
||||||
|
padding-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
padding-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb .title {
|
.breadcrumb .title {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
@ -772,7 +787,6 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb .previous-title {
|
.breadcrumb .previous-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
@ -782,7 +796,6 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
--mdc-icon-size: 14px;
|
--mdc-icon-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb .subtitle {
|
.breadcrumb .subtitle {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -815,7 +828,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
minmax(var(--media-browse-item-size, 175px), 0.1fr)
|
minmax(var(--media-browse-item-size, 175px), 0.1fr)
|
||||||
);
|
);
|
||||||
grid-gap: 16px;
|
grid-gap: 16px;
|
||||||
padding: 8px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([dialog]) .children {
|
:host([dialog]) .children {
|
||||||
@ -831,42 +844,60 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ha-card-parent {
|
ha-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.children ha-card {
|
.children ha-card .thumbnail {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 100%;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
transition: padding-bottom 0.1s ease-out;
|
transition: padding-bottom 0.1s ease-out;
|
||||||
|
padding-bottom: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portrait.children ha-card {
|
.portrait.children ha-card .thumbnail {
|
||||||
padding-bottom: 150%;
|
padding-bottom: 150%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.child .folder,
|
ha-card .image {
|
||||||
.child .play {
|
border-radius: 3px 3px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered-image {
|
||||||
|
margin: 0 8px;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.children ha-card .icon-holder {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.child .folder {
|
.child .folder {
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
top: calc(50% - (var(--mdc-icon-size) / 2));
|
|
||||||
left: calc(50% - (var(--mdc-icon-size) / 2));
|
|
||||||
--mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
|
--mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.child .play {
|
.child .play {
|
||||||
|
position: absolute;
|
||||||
transition: color 0.5s;
|
transition: color 0.5s;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
bottom: calc(50% - 35px);
|
top: calc(50% - 50px);
|
||||||
right: calc(50% - 35px);
|
right: calc(50% - 35px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.1s ease-out;
|
transition: opacity 0.1s ease-out;
|
||||||
@ -877,45 +908,57 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
--mdc-icon-size: 48px;
|
--mdc-icon-size: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ha-card-parent:hover .play:not(.can_expand) {
|
ha-card:hover .play {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
ha-card:hover .play:not(.can_expand) {
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ha-card:hover .play.can_expand {
|
||||||
|
bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.child .play.can_expand {
|
.child .play.can_expand {
|
||||||
opacity: 1;
|
|
||||||
background-color: rgba(var(--rgb-card-background-color), 0.5);
|
background-color: rgba(var(--rgb-card-background-color), 0.5);
|
||||||
bottom: 4px;
|
top: auto;
|
||||||
right: 4px;
|
bottom: 0px;
|
||||||
|
right: 8px;
|
||||||
|
transition: bottom 0.1s ease-out, opacity 0.1s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.child .play:hover {
|
.child .play:hover {
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ha-card-parent:hover ha-card {
|
ha-card:hover .lazythumbnail {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.child .title {
|
.child .title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding-top: 8px;
|
padding-top: 16px;
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 1;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.child .type {
|
.child ha-card .title {
|
||||||
font-size: 12px;
|
margin-bottom: 16px;
|
||||||
color: var(--secondary-text-color);
|
padding-left: 16px;
|
||||||
padding-left: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
mwc-list-item .graphic {
|
mwc-list-item .graphic {
|
||||||
background-size: cover;
|
background-size: contain;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
line-height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
mwc-list-item .graphic .play {
|
mwc-list-item .graphic .play {
|
||||||
@ -928,7 +971,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
|
|
||||||
mwc-list-item:hover .graphic .play {
|
mwc-list-item:hover .graphic .play {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--primary-color);
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
mwc-list-item .graphic .play.show {
|
mwc-list-item .graphic .play.show {
|
||||||
@ -950,29 +993,32 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host([narrow]) .media-source {
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([narrow]) .children {
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
|
||||||
|
}
|
||||||
|
|
||||||
:host([narrow]) .breadcrumb .title {
|
:host([narrow]) .breadcrumb .title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([narrow]) .header {
|
:host([narrow]) .header {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([narrow]) .header.no-dialog {
|
:host([narrow]) .header.no-dialog {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([narrow]) .header_button {
|
:host([narrow]) .header_button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 14px;
|
top: 14px;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([narrow]) .header-content {
|
:host([narrow]) .header-content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([narrow]) .header-content .img {
|
:host([narrow]) .header-content .img {
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -984,94 +1030,75 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
transition: width 0.4s, height 0.4s, padding-bottom 0.4s;
|
transition: width 0.4s, height 0.4s, padding-bottom 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
ha-fab {
|
ha-fab {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
--mdc-theme-secondary: var(--primary-color);
|
--mdc-theme-secondary: var(--primary-color);
|
||||||
bottom: -20px;
|
bottom: -20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([narrow]) .header-info mwc-button {
|
:host([narrow]) .header-info mwc-button {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([narrow]) .header-info {
|
:host([narrow]) .header-info {
|
||||||
padding: 20px 24px 10px;
|
padding: 0 16px 8px;
|
||||||
}
|
|
||||||
|
|
||||||
:host([narrow]) .media-source {
|
|
||||||
padding: 0 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([narrow]) .children {
|
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============= Scroll ============= */
|
/* ============= Scroll ============= */
|
||||||
|
|
||||||
:host([scroll]) .breadcrumb .subtitle {
|
:host([scroll]) .breadcrumb .subtitle {
|
||||||
height: 0;
|
height: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([scroll]) .breadcrumb .title {
|
:host([scroll]) .breadcrumb .title {
|
||||||
-webkit-line-clamp: 1;
|
-webkit-line-clamp: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(:not([narrow])[scroll]) .header:not(.no-img) ha-icon-button {
|
:host(:not([narrow])[scroll]) .header:not(.no-img) ha-icon-button {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([scroll]) .header-info mwc-button,
|
:host([scroll]) .header-info mwc-button,
|
||||||
.no-img .header-info mwc-button {
|
.no-img .header-info mwc-button {
|
||||||
padding-right: 4px;
|
padding-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([scroll][narrow]) .no-img .header-info mwc-button {
|
:host([scroll][narrow]) .no-img .header-info mwc-button {
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([scroll]) .header-info {
|
:host([scroll]) .header-info {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([scroll]) .header-info mwc-button {
|
:host([scroll]) .header-info mwc-button {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([scroll][narrow]) .no-img .header-info {
|
:host([scroll][narrow]) .no-img .header-info {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([scroll][narrow]) .header-info {
|
:host([scroll][narrow]) .header-info {
|
||||||
padding: 20px 24px 10px 24px;
|
padding: 20px 24px 10px 24px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([scroll]) .header-content {
|
:host([scroll]) .header-content {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([scroll]) .header-content .img {
|
:host([scroll]) .header-content .img {
|
||||||
height: 75px;
|
height: 75px;
|
||||||
width: 75px;
|
width: 75px;
|
||||||
}
|
}
|
||||||
|
:host([scroll]) .breadcrumb {
|
||||||
|
padding-top: 0;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
:host([scroll][narrow]) .header-content .img {
|
:host([scroll][narrow]) .header-content .img {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
padding-bottom: initial;
|
padding-bottom: initial;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([scroll]) ha-fab {
|
:host([scroll]) ha-fab {
|
||||||
bottom: 4px;
|
bottom: 0px;
|
||||||
right: 4px;
|
right: -24px;
|
||||||
--mdc-fab-box-shadow: none;
|
--mdc-fab-box-shadow: none;
|
||||||
--mdc-theme-secondary: rgba(var(--rgb-primary-color), 0.5);
|
--mdc-theme-secondary: rgba(var(--rgb-primary-color), 0.5);
|
||||||
}
|
}
|
||||||
|
@ -88,7 +88,7 @@ export const BROWSER_PLAYER = "browser";
|
|||||||
export type MediaClassBrowserSetting = {
|
export type MediaClassBrowserSetting = {
|
||||||
icon: string;
|
icon: string;
|
||||||
thumbnail_ratio?: string;
|
thumbnail_ratio?: string;
|
||||||
layout?: string;
|
layout?: "grid";
|
||||||
show_list_images?: boolean;
|
show_list_images?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -19,6 +19,7 @@ import {
|
|||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit";
|
} from "lit";
|
||||||
import { customElement, property, query, state } from "lit/decorators";
|
import { customElement, property, query, state } from "lit/decorators";
|
||||||
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
import { computeDomain } from "../../common/entity/compute_domain";
|
import { computeDomain } from "../../common/entity/compute_domain";
|
||||||
import { computeStateDomain } from "../../common/entity/compute_state_domain";
|
import { computeStateDomain } from "../../common/entity/compute_state_domain";
|
||||||
import { computeStateName } from "../../common/entity/compute_state_name";
|
import { computeStateName } from "../../common/entity/compute_state_name";
|
||||||
@ -152,7 +153,10 @@ class BarMediaPlayer extends LitElement {
|
|||||||
stateObj.attributes.entity_picture;
|
stateObj.attributes.entity_picture;
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="info">
|
<div
|
||||||
|
class="info ${!isBrowser ? "pointer" : ""}"
|
||||||
|
@click=${this._openMoreInfo}
|
||||||
|
>
|
||||||
${mediaArt ? html`<img src=${this.hass.hassUrl(mediaArt)} />` : ""}
|
${mediaArt ? html`<img src=${this.hass.hassUrl(mediaArt)} />` : ""}
|
||||||
<div class="media-info">
|
<div class="media-info">
|
||||||
<hui-marquee
|
<hui-marquee
|
||||||
@ -309,6 +313,13 @@ class BarMediaPlayer extends LitElement {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _openMoreInfo() {
|
||||||
|
if (this._browserPlayer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
fireEvent(this, "hass-more-info", { entityId: this.entityId });
|
||||||
|
}
|
||||||
|
|
||||||
private get _showProgressBar() {
|
private get _showProgressBar() {
|
||||||
if (!this.hass) {
|
if (!this.hass) {
|
||||||
return false;
|
return false;
|
||||||
@ -418,6 +429,10 @@ class BarMediaPlayer extends LitElement {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.secondary,
|
.secondary,
|
||||||
.progress {
|
.progress {
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { mdiArrowLeft } from "@mdi/js";
|
||||||
import "@polymer/app-layout/app-header/app-header";
|
import "@polymer/app-layout/app-header/app-header";
|
||||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||||
import {
|
import {
|
||||||
@ -13,9 +14,14 @@ import { LocalStorage } from "../../common/decorators/local-storage";
|
|||||||
import { HASSDomEvent } from "../../common/dom/fire_event";
|
import { HASSDomEvent } from "../../common/dom/fire_event";
|
||||||
import { navigate } from "../../common/navigate";
|
import { navigate } from "../../common/navigate";
|
||||||
import "../../components/ha-menu-button";
|
import "../../components/ha-menu-button";
|
||||||
|
import "../../components/ha-icon-button";
|
||||||
import "../../components/media-player/ha-media-player-browse";
|
import "../../components/media-player/ha-media-player-browse";
|
||||||
import type { MediaPlayerItemId } from "../../components/media-player/ha-media-player-browse";
|
import type { MediaPlayerItemId } from "../../components/media-player/ha-media-player-browse";
|
||||||
import { BROWSER_PLAYER, MediaPickedEvent } from "../../data/media-player";
|
import {
|
||||||
|
BROWSER_PLAYER,
|
||||||
|
MediaPickedEvent,
|
||||||
|
MediaPlayerItem,
|
||||||
|
} from "../../data/media-player";
|
||||||
import { resolveMediaSource } from "../../data/media_source";
|
import { resolveMediaSource } from "../../data/media_source";
|
||||||
import "../../layouts/ha-app-layout";
|
import "../../layouts/ha-app-layout";
|
||||||
import { haStyle } from "../../resources/styles";
|
import { haStyle } from "../../resources/styles";
|
||||||
@ -32,6 +38,8 @@ class PanelMediaBrowser extends LitElement {
|
|||||||
|
|
||||||
@property() public route!: Route;
|
@property() public route!: Route;
|
||||||
|
|
||||||
|
@property() _currentItem?: MediaPlayerItem;
|
||||||
|
|
||||||
private _navigateIds: MediaPlayerItemId[] = [
|
private _navigateIds: MediaPlayerItemId[] = [
|
||||||
{
|
{
|
||||||
media_content_id: undefined,
|
media_content_id: undefined,
|
||||||
@ -47,15 +55,26 @@ class PanelMediaBrowser extends LitElement {
|
|||||||
<ha-app-layout>
|
<ha-app-layout>
|
||||||
<app-header fixed slot="header">
|
<app-header fixed slot="header">
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
|
${this._navigateIds.length > 1
|
||||||
|
? html`
|
||||||
|
<ha-icon-button
|
||||||
|
.path=${mdiArrowLeft}
|
||||||
|
@click=${this._goBack}
|
||||||
|
></ha-icon-button>
|
||||||
|
`
|
||||||
|
: html`
|
||||||
<ha-menu-button
|
<ha-menu-button
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.narrow=${this.narrow}
|
.narrow=${this.narrow}
|
||||||
></ha-menu-button>
|
></ha-menu-button>
|
||||||
|
`}
|
||||||
<div main-title class="heading">
|
<div main-title class="heading">
|
||||||
<div>
|
<div>
|
||||||
${this.hass.localize(
|
${!this._currentItem
|
||||||
|
? this.hass.localize(
|
||||||
"ui.components.media-browser.media-player-browser"
|
"ui.components.media-browser.media-player-browser"
|
||||||
)}
|
)
|
||||||
|
: this._currentItem.title}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</app-toolbar>
|
</app-toolbar>
|
||||||
@ -110,13 +129,19 @@ class PanelMediaBrowser extends LitElement {
|
|||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
];
|
];
|
||||||
|
this._currentItem = undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _mediaBrowsed(ev) {
|
private _goBack() {
|
||||||
if (ev.detail.back) {
|
|
||||||
history.back();
|
history.back();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _mediaBrowsed(ev: { detail: HASSDomEvents["media-browsed"] }) {
|
||||||
|
if (ev.detail.ids === this._navigateIds) {
|
||||||
|
this._currentItem = ev.detail.current;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let path = "";
|
let path = "";
|
||||||
for (const item of ev.detail.ids.slice(1)) {
|
for (const item of ev.detail.ids.slice(1)) {
|
||||||
path +=
|
path +=
|
||||||
@ -152,6 +177,7 @@ class PanelMediaBrowser extends LitElement {
|
|||||||
sourceUrl: resolvedUrl.url,
|
sourceUrl: resolvedUrl.url,
|
||||||
sourceType: resolvedUrl.mime_type,
|
sourceType: resolvedUrl.mime_type,
|
||||||
title: item.title,
|
title: item.title,
|
||||||
|
can_play: item.can_play,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4,6 +4,7 @@ export interface WebBrowserPlayMediaDialogParams {
|
|||||||
sourceUrl: string;
|
sourceUrl: string;
|
||||||
sourceType: string;
|
sourceType: string;
|
||||||
title?: string;
|
title?: string;
|
||||||
|
can_play?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const showWebBrowserPlayMediaDialog = (
|
export const showWebBrowserPlayMediaDialog = (
|
||||||
|
Loading…
x
Reference in New Issue
Block a user