- It looks like you have not yet created a media directory.
-
Create a directory with the name "media" in the
- configuration directory of Home Assistant
- (${this.hass.config.config_dir}).
Place your video, audio and
- image files in this directory to be able to browse and play them in
- the browser or on supported media players.
-
- Check the - documentation - for more info -
- `; - } - return err.message; - } - protected render(): TemplateResult { if (this._loading) { return html`
+ It looks like you have not yet created a media directory.
+
Create a directory with the name "media" in the
+ configuration directory of Home Assistant
+ (${this.hass.config.config_dir}).
Place your video, audio and
+ image files in this directory to be able to browse and play them in
+ the browser or on supported media players.
+
+ Check the + documentation + for more info +
+ `; + } + return html`err.message`; + } + static get styles(): CSSResultArray { return [ haStyle, @@ -529,12 +541,9 @@ export class HaMediaPlayerBrowse extends LitElement { } .header { - display: flex; + display: block; justify-content: space-between; border-bottom: 1px solid var(--divider-color); - } - - .header { background-color: var(--card-background-color); position: sticky; position: -webkit-sticky; @@ -543,6 +552,10 @@ export class HaMediaPlayerBrowse extends LitElement { padding: 20px 24px 10px; } + .header-wrapper { + display: flex; + } + .header-content { display: flex; flex-wrap: wrap; @@ -570,6 +583,7 @@ export class HaMediaPlayerBrowse extends LitElement { .header-info mwc-button { display: block; + --mdc-theme-primary: var(--primary-color); } .breadcrumb { @@ -655,7 +669,7 @@ export class HaMediaPlayerBrowse extends LitElement { width: 100%; } - ha-card { + .children ha-card { width: 100%; padding-bottom: 100%; position: relative; @@ -663,6 +677,11 @@ export class HaMediaPlayerBrowse extends LitElement { background-size: cover; background-repeat: no-repeat; background-position: center; + transition: padding-bottom 0.1s ease-out; + } + + .portrait.children ha-card { + padding-bottom: 150%; } .child .folder, @@ -678,18 +697,36 @@ export class HaMediaPlayerBrowse extends LitElement { } .child .play { + transition: color 0.5s; + border-radius: 50%; + bottom: calc(50% - 35px); + right: calc(50% - 35px); + opacity: 0; + transition: opacity 0.1s ease-out; + } + + .child .play:not(.can_expand) { + --mdc-icon-button-size: 70px; + --mdc-icon-size: 48px; + } + + .ha-card-parent:hover .play:not(.can_expand) { + opacity: 1; + color: var(--primary-color); + } + + .child .play.can_expand { + opacity: 1; + background-color: rgba(var(--rgb-card-background-color), 0.5); bottom: 4px; right: 4px; - transition: all 0.5s; - background-color: rgba(var(--rgb-card-background-color), 0.5); - border-radius: 50%; } .child .play:hover { color: var(--primary-color); } - ha-card:hover { + .ha-card-parent:hover ha-card { opacity: 0.5; } @@ -706,6 +743,7 @@ export class HaMediaPlayerBrowse extends LitElement { .child .type { font-size: 12px; color: var(--secondary-text-color); + padding-left: 2px; } mwc-list-item .graphic { diff --git a/src/data/media-player.ts b/src/data/media-player.ts index af11824211..70b29c2d63 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -1,5 +1,23 @@ import type { HassEntity } from "home-assistant-js-websocket"; import type { HomeAssistant } from "../types"; +import { + mdiFolder, + mdiPlaylistMusic, + mdiFileMusic, + mdiAlbum, + mdiMusic, + mdiTelevisionClassic, + mdiMovie, + mdiVideo, + mdiImage, + mdiWeb, + mdiGamepadVariant, + mdiAccountMusic, + mdiPodcast, + mdiApplication, + mdiAccountMusicOutline, + mdiDramaMasks, +} from "@mdi/js"; export const SUPPORT_PAUSE = 1; export const SUPPORT_SEEK = 2; @@ -22,6 +40,66 @@ export type MediaPlayerBrowseAction = "pick" | "play"; export const BROWSER_SOURCE = "browser"; +export type MediaClassBrowserSetting = { + icon: string; + thumbnail_ratio?: string; + layout?: string; + show_list_images?: boolean; +}; + +export const MediaClassBrowserSettings: { + [type: string]: MediaClassBrowserSetting; +} = { + album: { icon: mdiAlbum, layout: "grid" }, + app: { icon: mdiApplication, layout: "grid" }, + artist: { icon: mdiAccountMusic, layout: "grid", show_list_images: true }, + channel: { + icon: mdiTelevisionClassic, + thumbnail_ratio: "portrait", + layout: "grid", + }, + composer: { + icon: mdiAccountMusicOutline, + layout: "grid", + show_list_images: true, + }, + contributing_artist: { + icon: mdiAccountMusic, + layout: "grid", + show_list_images: true, + }, + directory: { icon: mdiFolder, layout: "grid", show_list_images: true }, + episode: { + icon: mdiTelevisionClassic, + layout: "grid", + thumbnail_ratio: "portrait", + }, + game: { + icon: mdiGamepadVariant, + layout: "grid", + thumbnail_ratio: "portrait", + }, + genre: { icon: mdiDramaMasks, layout: "grid", show_list_images: true }, + image: { icon: mdiImage, layout: "grid" }, + movie: { icon: mdiMovie, thumbnail_ratio: "portrait", layout: "grid" }, + music: { icon: mdiMusic }, + playlist: { icon: mdiPlaylistMusic, layout: "grid", show_list_images: true }, + podcast: { icon: mdiPodcast, layout: "grid" }, + season: { + icon: mdiTelevisionClassic, + layout: "grid", + thumbnail_ratio: "portrait", + }, + track: { icon: mdiFileMusic }, + tv_show: { + icon: mdiTelevisionClassic, + layout: "grid", + thumbnail_ratio: "portrait", + }, + url: { icon: mdiWeb }, + video: { icon: mdiVideo, layout: "grid" }, +}; + export interface MediaPickedEvent { item: MediaPlayerItem; } @@ -40,6 +118,8 @@ export interface MediaPlayerItem { title: string; media_content_type: string; media_content_id: string; + media_class: string; + children_media_class: string; can_play: boolean; can_expand: boolean; thumbnail?: string; diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts index a58243857e..63c71d2e92 100644 --- a/src/panels/media-browser/ha-panel-media-browser.ts +++ b/src/panels/media-browser/ha-panel-media-browser.ts @@ -1,5 +1,4 @@ import "@material/mwc-icon-button"; -import { mdiPlayNetwork } from "@mdi/js"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { @@ -46,9 +45,9 @@ class PanelMediaBrowser extends LitElement { const title = this._entityId === BROWSER_SOURCE - ? `${this.hass.localize("ui.components.media-browser.web-browser")} - ` + ? `${this.hass.localize("ui.components.media-browser.web-browser")}` : stateObj?.attributes.friendly_name - ? `${stateObj?.attributes.friendly_name} - ` + ? `${stateObj?.attributes.friendly_name}` : undefined; return html` @@ -59,17 +58,17 @@ class PanelMediaBrowser extends LitElement { .hass=${this.hass} .narrow=${this.narrow} > -