9 |
14 | `;
15 | }
16 |
17 | static get styles(): CSSResult {
18 | return css`
19 | :host {
20 | position: relative;
21 | box-sizing: border-box;
22 | margin: 4px;
23 | min-width: 0;
24 | overflow: hidden;
25 | transition: background 0.5s;
26 | border-radius: 4px;
27 | font-weight: 500;
28 | }
29 | :host([raised]) {
30 | background: var(--mmp-button-color);
31 | min-height: calc(var(--mmp-unit) * 0.8);
32 | box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
33 | 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
34 | }
35 | :host([color]) {
36 | background: var(--mmp-active-color);
37 | transition: background 0.25s;
38 | opacity: 1;
39 | }
40 | :host([faded]) {
41 | opacity: 0.75;
42 | }
43 | :host([disabled]) {
44 | opacity: 0.25;
45 | pointer-events: none;
46 | }
47 | .container {
48 | height: 100%;
49 | width: 100%;
50 | }
51 | .slot-container {
52 | height: 100%;
53 | display: flex;
54 | align-items: center;
55 | justify-content: center;
56 | margin: 0 8px;
57 | width: auto;
58 | }
59 | paper-ripple {
60 | position: absolute;
61 | left: 0;
62 | right: 0;
63 | top: 0;
64 | bottom: 0;
65 | }
66 | `;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/config/config.ts:
--------------------------------------------------------------------------------
1 | import { DEFAULT_HIDE, LABEL_SHORTCUT } from '../const';
2 | import { MiniMediaPlayerActionEvent, MiniMediaPlayerBaseConfiguration, MiniMediaPlayerConfiguration } from './types';
3 |
4 | const validate = (config: MiniMediaPlayerBaseConfiguration): void => {
5 | if (typeof config.entity === 'undefined') {
6 | throw new Error('You need to specify the required entity option.');
7 | }
8 |
9 | if (config.entity.split('.')[0] !== 'media_player') {
10 | throw new Error('Specify an entity from within the media_player domain.');
11 | }
12 |
13 | if (typeof config.type === 'undefined') {
14 | throw new Error('You need to specify the required type option.');
15 | }
16 | };
17 |
18 | export const generateConfig = (config: MiniMediaPlayerBaseConfiguration): MiniMediaPlayerConfiguration => {
19 | validate(config);
20 |
21 | const conf: MiniMediaPlayerConfiguration = {
22 | artwork: 'default',
23 | info: 'default',
24 | group: false,
25 | volume_stateless: false,
26 | more_info: true,
27 | source: 'default',
28 | sound_mode: 'default',
29 | toggle_power: true,
30 | tap_action: {
31 | action: MiniMediaPlayerActionEvent.MORE_INFO,
32 | },
33 | jump_amount: 10,
34 | ...config,
35 | hide: { ...DEFAULT_HIDE, ...config.hide },
36 | speaker_group: {
37 | show_group_count: true,
38 | platform: 'sonos',
39 | supports_master: true,
40 | entities: [],
41 | ...config.sonos,
42 | ...config.speaker_group,
43 | },
44 | shortcuts: {
45 | label: LABEL_SHORTCUT,
46 | ...config.shortcuts,
47 | },
48 | max_volume: Number(config.max_volume) ?? 100,
49 | min_volume: Number(config.min_volume) || 0,
50 | };
51 |
52 | conf.collapse = conf.hide.controls || conf.hide.volume;
53 | conf.info = conf.collapse && conf.info !== 'scroll' ? 'short' : conf.info;
54 | conf.flow = conf.hide.icon && conf.hide.name && conf.hide.info;
55 |
56 | return conf;
57 | };
58 |
59 | export default generateConfig;
60 |
--------------------------------------------------------------------------------
/info.md:
--------------------------------------------------------------------------------
1 | [](https://github.com/kalkih/mini-media-player/releases/latest)
2 |
3 | A minimalistic yet customizable media player card for [Home Assistant](https://github.com/home-assistant/home-assistant) Lovelace UI.
4 |
5 | 
6 |
7 | ## Features
8 | * Minimalistic & compact design
9 | * Custom shortcuts (scripts, services, play media e.g.)
10 | * Multiroom management (Sonos, Soundtouch, Squeezebox, Bluesound, Musiccast, Linkplay)
11 | * Highly customizable, hide/display specific items
12 | * Playback & volume controls
13 | * Seek through playback
14 | * Source select
15 | * Sound mode select
16 | * Progress & time indicators
17 | * Text-to-speech input
18 | * Shuffle support
19 | * Custom idle view options
20 | * Custom background
21 | * Theme variables
22 | * Responsive design
23 | * Multiple artwork styles
24 | * more...
25 |
26 |
27 | ## Examples
28 |
29 | #### Basic card
30 |
10 |
12 | 
31 |
32 | #### Compact card
33 | 
34 |
35 | #### Card with media shortcuts
36 | 
37 |
38 | #### Grouped cards
39 | 
40 |
41 | #### Stacked cards
42 | 
43 |
44 | #### Speaker group management
45 | 
46 |
47 | **Check the repository for card options & example configurations**
--------------------------------------------------------------------------------
/src/utils/colorGenerator.js:
--------------------------------------------------------------------------------
1 | import Vibrant from 'node-vibrant/dist/vibrant';
2 |
3 | import { CONTRAST_RATIO, COLOR_SIMILARITY_THRESHOLD } from '../const';
4 |
5 | const luminance = (r, g, b) => {
6 | const a = [r, g, b].map((v) => {
7 | let w = v;
8 | w /= 255;
9 | return w <= 0.03928 ? w / 12.92 : ((w + 0.055) / 1.055) ** 2.4;
10 | });
11 | return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
12 | };
13 |
14 | const contrast = (rgb1, rgb2) => {
15 | const lum1 = luminance(...rgb1);
16 | const lum2 = luminance(...rgb2);
17 | const brightest = Math.max(lum1, lum2);
18 | const darkest = Math.min(lum1, lum2);
19 | return (brightest + 0.05) / (darkest + 0.05);
20 | };
21 |
22 | const getContrastRatio = (rgb1, rgb2) => Math.round((contrast(rgb1, rgb2) + Number.EPSILON) * 100) / 100;
23 |
24 | const colorGenerator = (colors) => {
25 | colors.sort((colorA, colorB) => colorB.population - colorA.population);
26 |
27 | const backgroundColor = colors[0];
28 | let foregroundColor;
29 |
30 | const contrastRatios = new Map();
31 | const approvedContrastRatio = (hex, rgb) => {
32 | if (!contrastRatios.has(hex)) {
33 | contrastRatios.set(hex, getContrastRatio(backgroundColor.rgb, rgb));
34 | }
35 |
36 | return contrastRatios.get(hex) > CONTRAST_RATIO;
37 | };
38 |
39 | // We take each next color and find one that has better contrast.
40 | for (let i = 1; i < colors.length && foregroundColor === undefined; i++) {
41 | // If this color matches, score, take it.
42 | if (approvedContrastRatio(colors[i].hex, colors[i].rgb)) {
43 | foregroundColor = colors[i].rgb;
44 | break;
45 | }
46 |
47 | // This color has the wrong contrast ratio, but it is the right color.
48 | // Let's find similar colors that might have the right contrast ratio
49 |
50 | const currentColor = colors[i];
51 |
52 | for (let j = i + 1; j < colors.length; j++) {
53 | const compareColor = colors[j];
54 |
55 | // difference. 0 is same, 765 max difference
56 | const diffScore =
57 | Math.abs(currentColor.rgb[0] - compareColor.rgb[0]) +
58 | Math.abs(currentColor.rgb[1] - compareColor.rgb[1]) +
59 | Math.abs(currentColor.rgb[2] - compareColor.rgb[2]);
60 |
61 | if (diffScore > COLOR_SIMILARITY_THRESHOLD) {
62 | continue;
63 | }
64 |
65 | if (approvedContrastRatio(compareColor.hex, compareColor.rgb)) {
66 | foregroundColor = compareColor.rgb;
67 | break;
68 | }
69 | }
70 | }
71 |
72 | if (foregroundColor === undefined) {
73 | foregroundColor = backgroundColor.getYiq() < 200 ? [255, 255, 255] : [0, 0, 0];
74 | }
75 |
76 | return [new backgroundColor.constructor(foregroundColor, 0).hex, backgroundColor.hex];
77 | };
78 |
79 | Vibrant._pipeline.generator.register('default', colorGenerator);
80 | export default async (picture) => new Vibrant(picture, { colorCount: 16 }).getPalette();
81 |
--------------------------------------------------------------------------------
/src/const.ts:
--------------------------------------------------------------------------------
1 | const DEFAULT_HIDE = {
2 | repeat: true,
3 | shuffle: true,
4 | power_state: true,
5 | artwork_border: true,
6 | icon_state: true,
7 | sound_mode: true,
8 | group_button: false,
9 | runtime: true,
10 | runtime_remaining: true,
11 | volume: false,
12 | volume_level: true,
13 | controls: false,
14 | play_pause: false,
15 | play_stop: true,
16 | prev: false,
17 | next: false,
18 | jump: true,
19 | state_label: false,
20 | progress: false,
21 | icon: false,
22 | name: false,
23 | info: false,
24 | };
25 |
26 | const REPEAT_STATE = {
27 | OFF: 'off',
28 | ALL: 'all',
29 | ONE: 'one',
30 | };
31 |
32 | const ICON = {
33 | DROPDOWN: 'mdi:chevron-down',
34 | GROUP: 'mdi:speaker-multiple',
35 | MENU: 'mdi:menu-down',
36 | MUTE: {
37 | true: 'mdi:volume-off',
38 | false: 'mdi:volume-high',
39 | },
40 | NEXT: 'mdi:skip-next',
41 | PLAY: {
42 | true: 'mdi:pause',
43 | false: 'mdi:play',
44 | },
45 | POWER: 'mdi:power',
46 | PREV: 'mdi:skip-previous',
47 | SEND: 'mdi:send',
48 | SHUFFLE: 'mdi:shuffle',
49 | REPEAT: {
50 | [REPEAT_STATE.OFF]: 'mdi:repeat-off',
51 | [REPEAT_STATE.ONE]: 'mdi:repeat-once',
52 | [REPEAT_STATE.ALL]: 'mdi:repeat',
53 | },
54 | STOP: {
55 | true: 'mdi:stop',
56 | false: 'mdi:play',
57 | },
58 | VOL_DOWN: 'mdi:volume-minus',
59 | VOL_UP: 'mdi:volume-plus',
60 | FAST_FORWARD: 'mdi:fast-forward',
61 | REWIND: 'mdi:rewind',
62 | };
63 |
64 | const UPDATE_PROPS = [
65 | 'entity',
66 | 'groupMgmtEntity',
67 | '_overflow',
68 | 'break',
69 | 'thumbnail',
70 | 'prevThumbnail',
71 | 'edit',
72 | 'idle',
73 | 'cardHeight',
74 | 'backgroundColor',
75 | 'foregroundColor',
76 | ];
77 |
78 | const MEDIA_DURATION_PROP = 'media_duration';
79 |
80 | const PROGRESS_PROPS = [MEDIA_DURATION_PROP, 'media_position', 'media_position_updated_at'];
81 |
82 | const BREAKPOINT = 390;
83 |
84 | const LABEL_SHORTCUT = 'Shortcuts...';
85 |
86 | const MEDIA_INFO = [
87 | { attr: 'media_title' },
88 | { attr: 'media_artist' },
89 | { attr: 'media_series_title' },
90 | { attr: 'media_season', prefix: 'S' },
91 | { attr: 'media_episode', prefix: 'E' },
92 | { attr: 'media_channel' },
93 | { attr: 'app_name' },
94 | ];
95 |
96 | const PLATFORM = {
97 | SONOS: 'sonos',
98 | SQUEEZEBOX: 'squeezebox',
99 | BLUESOUND: 'bluesound',
100 | SOUNDTOUCH: 'soundtouch',
101 | MEDIAPLAYER: 'media_player',
102 | HEOS: 'heos',
103 | };
104 |
105 | const CONTRAST_RATIO = 4.5;
106 |
107 | const COLOR_SIMILARITY_THRESHOLD = 150;
108 |
109 | export {
110 | DEFAULT_HIDE,
111 | ICON,
112 | UPDATE_PROPS,
113 | MEDIA_DURATION_PROP,
114 | PROGRESS_PROPS,
115 | BREAKPOINT,
116 | LABEL_SHORTCUT,
117 | MEDIA_INFO,
118 | PLATFORM,
119 | CONTRAST_RATIO,
120 | COLOR_SIMILARITY_THRESHOLD,
121 | REPEAT_STATE,
122 | };
123 |
--------------------------------------------------------------------------------
/src/components/tts.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html, css } from 'lit-element';
2 |
3 | import t from '../utils/translation';
4 |
5 | class MiniMediaPlayerTts extends LitElement {
6 | static get properties() {
7 | return {
8 | hass: {},
9 | config: {},
10 | player: {},
11 | };
12 | }
13 |
14 | get label() {
15 | return t(
16 | this.hass,
17 | 'placeholder.tts',
18 | 'ui.card.media_player.text_to_speak',
19 | 'Say',
20 | );
21 | }
22 |
23 | get input() {
24 | return this.shadowRoot.getElementById('tts-input');
25 | }
26 |
27 | get message() {
28 | return this.input.value;
29 | }
30 |
31 | render() {
32 | return html`
33 |
47 | ${t(this.hass, 'title.speaker_management')}
48 | ${this.entities.map((item) => this.renderItem(item, id))}
49 |
73 |
74 | `;
75 | }
76 |
77 | private renderItem(item: MiniMediaPlayerSpeakerGroupEntry, entityId: string): TemplateResult {
78 | const itemId = item.entity_id;
79 | return html`
52 | ${this.buttons.map(item => html`
53 | this.handleShortcut(e, item)}>
60 | `)}
66 |
67 | ` : '';
68 |
69 | return html`
70 | ${buttons}
71 | ${list}
72 | `;
73 | }
74 |
75 | handleShortcut(ev, item) {
76 | const { type, id, data } = item || ev.detail;
77 | if (type === 'source')
78 | return this.player.setSource(ev, id);
79 | if (type === 'service')
80 | return this.player.toggleService(ev, id, data);
81 | if (type === 'script')
82 | return this.player.toggleScript(ev, id, data);
83 | if (type === 'sound_mode')
84 | return this.player.setSoundMode(ev, id);
85 | const options = {
86 | media_content_type: type,
87 | media_content_id: id,
88 | };
89 | this.player.setMedia(ev, options);
90 | }
91 |
92 | shortcutStyle(item) {
93 | return {
94 | 'min-height': `${this.height}px`,
95 | ...(item.cover && { 'background-image': `url(${item.cover})` }),
96 | };
97 | }
98 |
99 | static get styles() {
100 | return [
101 | sharedStyle,
102 | css`
103 | .mmp-shortcuts__buttons {
104 | box-sizing: border-box;
105 | display: flex;
106 | flex-wrap: wrap;
107 | margin-top: 8px;
108 | }
109 | .mmp-shortcuts__button {
110 | min-width: calc(50% - 8px);
111 | flex: 1;
112 | background-size: cover;
113 | background-repeat: no-repeat;
114 | background-position: center center;
115 | }
116 | .mmp-shortcuts__button > div {
117 | display: flex;
118 | justify-content: center;
119 | align-items: center;
120 | width: 100%;
121 | padding: .2em 0;
122 | }
123 | .mmp-shortcuts__button > div[align='left'] {
124 | justify-content: flex-start;
125 | }
126 | .mmp-shortcuts__button > div[align='right'] {
127 | justify-content: flex-end;
128 | }
129 | .mmp-shortcuts__button[columns='1'] {
130 | min-width: calc(100% - 8px);
131 | }
132 | .mmp-shortcuts__button[columns='3'] {
133 | min-width: calc(33.33% - 8px);
134 | }
135 | .mmp-shortcuts__button[columns='4'] {
136 | min-width: calc(25% - 8px);
137 | }
138 | .mmp-shortcuts__button[columns='5'] {
139 | min-width: calc(20% - 8px);
140 | }
141 | .mmp-shortcuts__button[columns='6'] {
142 | min-width: calc(16.66% - 8px);
143 | }
144 | .mmp-shortcuts__button > div > span {
145 | line-height: calc(var(--mmp-unit) * .6);
146 | text-transform: initial;
147 | }
148 | .mmp-shortcuts__button > div > ha-icon {
149 | width: calc(var(--mmp-unit) * .6);
150 | height: calc(var(--mmp-unit) * .6);
151 | }
152 | .mmp-shortcuts__button > div > *:nth-child(2) {
153 | margin-left: 4px;
154 | }
155 | .mmp-shortcuts__button > div > img {
156 | height: 24px;
157 | }
158 | `,
159 | ];
160 | }
161 | }
162 |
163 | customElements.define('mmp-shortcuts', MiniMediaPlayerShortcuts);
164 |
--------------------------------------------------------------------------------
/src/components/dropdown.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html, css } from 'lit-element';
2 |
3 | import { ICON } from '../const';
4 | import sharedStyle from '../sharedStyle';
5 | import './button';
6 |
7 | class MiniMediaPlayerDropdown extends LitElement {
8 | static get properties() {
9 | return {
10 | items: [],
11 | label: String,
12 | selected: String,
13 | id: String,
14 | isOpen: Boolean,
15 | };
16 | }
17 |
18 | get selectedIndex() {
19 | return this.items.map(item => item.id).indexOf(this.selected);
20 | }
21 |
22 | firstUpdated() {
23 | const menu = this.shadowRoot.querySelector('#menu');
24 | const button = this.shadowRoot.querySelector('#button');
25 | menu.anchor = button;
26 | }
27 |
28 | render() {
29 | return html`
30 |
61 | ${item.icon ? html`
` : ''}
63 | ${item.name ? html`${item.name}` : ''}
64 |
65 | e.stopPropagation()}
33 | ?open=${this.isOpen}>
34 | ${this.icon ? html`
35 |
40 |
42 | ` : html`
43 |
45 |
52 | `}
53 |
60 | ${this.items.map(item => html`
61 |
62 | ${item.icon ? html` `)}
65 |
66 |
67 | `;
68 | }
69 |
70 | onChange(e) {
71 | const { index } = e.detail;
72 | if (index !== this.selectedIndex && this.items[index]) {
73 | this.dispatchEvent(new CustomEvent('change', {
74 | detail: this.items[index],
75 | }));
76 | }
77 | }
78 |
79 | handleClose(e) {
80 | e.stopPropagation();
81 | this.isOpen = false;
82 | }
83 |
84 | toggleMenu() {
85 | const menu = this.shadowRoot.querySelector('#menu');
86 | menu.open = !menu.open;
87 | this.isOpen = menu.open;
88 | }
89 |
90 | static get styles() {
91 | return [
92 | sharedStyle,
93 | css`
94 | :host {
95 | display: block;
96 | }
97 | :host([faded]) {
98 | opacity: .75;
99 | }
100 | :host[small] .mmp-dropdown__label {
101 | max-width: 60px;
102 | display: block;
103 | position: relative;
104 | width: auto;
105 | text-transform: initial;
106 | }
107 | :host[full] .mmp-dropdown__label {
108 | max-width: none;
109 | }
110 | .mmp-dropdown {
111 | padding: 0;
112 | display: block;
113 | position: relative;
114 | }
115 | .mmp-dropdown__button {
116 | display: flex;
117 | font-size: 1em;
118 | justify-content: space-between;
119 | align-items: center;
120 | height: calc(var(--mmp-unit) - 4px);
121 | margin: 2px 0;
122 | }
123 | .mmp-dropdown__button.icon {
124 | height: var(--mmp-unit);
125 | margin: 0;
126 | }
127 | .mmp-dropdown__button > div {
128 | display: flex;
129 | flex: 1;
130 | justify-content: space-between;
131 | align-items: center;
132 | height: calc(var(--mmp-unit) - 4px);
133 | max-width: 100%;
134 | }
135 | .mmp-dropdown__label {
136 | text-align: left;
137 | text-transform: none;
138 | }
139 | .mmp-dropdown__icon {
140 | height: auto;
141 | width: calc(var(--mmp-unit) * .6);
142 | min-width: calc(var(--mmp-unit) * .6);
143 | }
144 | mwc-list-item > *:nth-child(2) {
145 | margin-left: 4px;
146 | }
147 | .mmp-dropdown[open] mmp-button ha-icon {
148 | color: var(--mmp-accent-color);
149 | transform: rotate(180deg);
150 | }
151 | .mmp-dropdown[open] mmp-icon-button {
152 | color: var(--mmp-accent-color);
153 | transform: rotate(180deg);
154 | }
155 | .mmp-dropdown[open] mmp-icon-button[focused] {
156 | color: var(--mmp-text-color);
157 | transform: rotate(0deg);
158 | }
159 | `,
160 | ];
161 | }
162 | }
163 |
164 | customElements.define('mmp-dropdown', MiniMediaPlayerDropdown);
165 |
--------------------------------------------------------------------------------
/src/config/types.ts:
--------------------------------------------------------------------------------
1 | export interface MiniMediaPlayerBaseConfiguration {
2 | type?: string;
3 | entity: string;
4 | name?: string;
5 | icon?: string;
6 | icon_image?: string;
7 | tap_action?: MiniMediaPlayerAction;
8 | group?: boolean;
9 | hide?: MiniMediaPlayerHideConfiguration;
10 | artwork?: 'default' | 'none' | 'cover' | 'full-cover' | 'material' | 'full-cover-fit';
11 | tts?: MiniMediaPlayerTTSConfiguration;
12 | source?: 'default' | 'icon' | 'full';
13 | sound_mode?: 'default' | 'icon' | 'full';
14 | info?: 'default' | 'short' | 'scroll';
15 | volume_stateless?: boolean;
16 | volume_step?: number;
17 | max_volume?: number;
18 | min_volume?: number;
19 | replace_mute?: 'play_pause' | 'stop' | 'play_stop' | 'next';
20 | jump_amount?: number;
21 | toggle_power?: boolean;
22 | idle_view?: MiniMediaPlayerIdleViewConfiguration;
23 | background?: string;
24 | speaker_group?: MiniMediaPlayerSpeakerGroupBase;
25 | shortcuts?: MiniMediaPlayerShortcuts;
26 | scale?: number;
27 |
28 | /**
29 | * @internal Internal configuration options
30 | */
31 | collapse: boolean;
32 | flow: boolean;
33 |
34 | /**
35 | * @deprecated The method should not be used
36 | */
37 | sonos?: MiniMediaPlayerSpeakerGroupBase;
38 | }
39 |
40 | export interface MiniMediaPlayerConfiguration extends MiniMediaPlayerBaseConfiguration {
41 | entity: string;
42 | artwork: 'default' | 'none' | 'cover' | 'full-cover' | 'material' | 'full-cover-fit';
43 | info: 'default' | 'short' | 'scroll';
44 | group: boolean;
45 | volume_stateless: boolean;
46 | more_info: boolean;
47 | source: 'default' | 'icon' | 'full';
48 | sound_mode: 'default' | 'icon' | 'full';
49 | toggle_power: boolean;
50 | tap_action: MiniMediaPlayerAction;
51 | jump_amount: number;
52 | hide: MiniMediaPlayerHideConfiguration;
53 | speaker_group: MiniMediaPlayerSpeakerGroup;
54 | shortcuts: MiniMediaPlayerShortcuts;
55 | max_volume: number;
56 | min_volume: number;
57 |
58 | collapse: boolean;
59 | flow: boolean;
60 | }
61 |
62 | export interface MiniMediaPlayerShortcuts {
63 | list?: MiniMediaPlayerShortcutItem[];
64 | Buttons?: MiniMediaPlayerShortcutItem[];
65 | hide_when_off?: boolean;
66 | columns?: 1 | 2 | 3 | 4 | 5 | 6;
67 | column_height?: number;
68 | label?: string;
69 | attribute?: string;
70 | aling_text?: 'left' | 'right' | 'center';
71 | }
72 |
73 | export interface MiniMediaPlayerShortcutItem {
74 | type: string;
75 | id: string;
76 | name?: string;
77 | icon?: string;
78 | image?: string;
79 | cover?: string;
80 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
81 | data?: Record
46 |
47 | ${this.selected || this.label}
48 |
49 |
51 | e.stopPropagation()}
65 | ?paused=${!this.player.isPlaying}>
66 | ${this.showTime ? html`
67 |
81 | `;
82 | }
83 | progressBarStyle() {
84 | return styleMap({
85 | width: `${((this.seekProgress || this.progress) / this.duration) * 100}%`
86 | });
87 | }
88 |
89 | trackProgress() {
90 | this.progress = this.player.progress;
91 | if (!this.tracker)
92 | this.tracker = setInterval(() => this.trackProgress(), 1000);
93 | if (!this.player.isPlaying) {
94 | clearInterval(this.tracker);
95 | this.tracker = null;
96 | }
97 | }
98 |
99 | initSeek(e) {
100 | const x = e.offsetX || (e.touches[0].pageX - this.offset);
101 | this.seekWidth = this.width;
102 | this.seekProgress = this.calcProgress(x);
103 | this.addEventListener('touchmove', this.moveSeek);
104 | this.addEventListener('mousemove', this.moveSeek);
105 | }
106 |
107 | resetSeek() {
108 | this.seekProgress = null;
109 | this.removeEventListener('touchmove', this.moveSeek);
110 | this.removeEventListener('mousemove', this.moveSeek);
111 | }
112 |
113 | moveSeek(e) {
114 | e.preventDefault();
115 | const x = e.offsetX || (e.touches[0].pageX - this.offset);
116 | this.seekProgress = this.calcProgress(x);
117 | }
118 |
119 | handleSeek(e) {
120 | this.resetSeek();
121 | const x = e.offsetX || (e.changedTouches[0].pageX - this.offset);
122 | const pos = this.calcProgress(x);
123 | this.player.seek(e, pos);
124 | }
125 |
126 | disconnectedCallback() {
127 | super.disconnectedCallback();
128 | this.resetSeek();
129 | clearInterval(this.tracker);
130 | this.tracker = null;
131 | }
132 |
133 | connectedCallback() {
134 | super.connectedCallback();
135 | if (this.hasProgress) {
136 | this.trackProgress();
137 | }
138 | }
139 |
140 | calcProgress(x) {
141 | const pos = (x / this.seekWidth) * this.duration;
142 | return Math.min(Math.max(pos, 0.1), this.duration);
143 | }
144 |
145 | static get styles() {
146 | return css`
147 | .mmp-progress {
148 | cursor: pointer;
149 | left: 0; right: 0; bottom: 0;
150 | position: absolute;
151 | pointer-events: auto;
152 | min-height: calc(var(--mmp-progress-height) + 10px);
153 | }
154 | .mmp-progress:before {
155 | content: '';
156 | position: absolute;
157 | left: 0;
158 | right: 0;
159 | bottom: 0;
160 | height: var(--mmp-progress-height);
161 | background-color: rgba(100,100,100,.15);
162 | }
163 | .mmp-progress__duration {
164 | left: calc(var(--ha-card-border-radius, 4px) / 2);
165 | right: calc(var(--ha-card-border-radius, 4px) / 2);
166 | bottom: calc(var(--mmp-progress-height) + 6px);
167 | position: absolute;
168 | display: flex;
169 | justify-content: space-between;
170 | font-size: .8em;
171 | padding: 0 6px;
172 | z-index: 2
173 | }
174 | .mmp-progress__duration__remaining {
175 | opacity: .5;
176 | }
177 | .progress-bar {
178 | height: var(--mmp-progress-height);
179 | bottom: 0;
180 | position: absolute;
181 | width: 0;
182 | transition: height 0;
183 | z-index: 1;
184 | background-color: var(--mmp-accent-color);
185 | }
186 | .progress-bar.seeking {
187 | transition: height .15s ease-out;
188 | height: calc(var(--mmp-progress-height) + 4px);
189 | }
190 | .mmp-progress[paused] .progress-bar {
191 | background-color: var(--disabled-text-color, rgba(150,150,150,.5));
192 | }
193 | `;
194 | }
195 | }
196 |
197 | customElements.define('mmp-progress', MiniMediaPlayerProgress);
198 |
--------------------------------------------------------------------------------
/src/translations.ts:
--------------------------------------------------------------------------------
1 | // Add additional languages with their ISO 639-1 language code
2 |
3 | const translations = {
4 | en: {
5 | placeholder: {
6 | tts: 'Text to speech',
7 | },
8 | label: {
9 | leave: 'Leave',
10 | ungroup: 'Ungroup',
11 | group_all: 'Group all',
12 | send: 'Send',
13 | master: 'Master',
14 | },
15 | state: {
16 | idle: 'Idle',
17 | unavailable: 'Unavailable',
18 | },
19 | title: {
20 | speaker_management: 'Group management',
21 | },
22 | },
23 | de: {
24 | placeholder: {
25 | tts: 'Text zum Sprechen',
26 | },
27 | label: {
28 | leave: 'Verlassen',
29 | ungroup: 'Teilen',
30 | group_all: 'Gruppieren',
31 | send: 'Senden',
32 | master: 'Master',
33 | },
34 | state: {
35 | idle: 'Pause',
36 | unavailable: 'Nicht verfügbar',
37 | },
38 | title: {
39 | speaker_management: 'Wiedergabe auf',
40 | },
41 | },
42 | fi: {
43 | placeholder: {
44 | tts: 'Teksti puheeksi',
45 | },
46 | label: {
47 | leave: 'Jätä',
48 | ungroup: 'Pura ryhmä',
49 | group_all: 'Liitä kaikki',
50 | send: 'Lähetä',
51 | master: 'Master',
52 | },
53 | state: {
54 | idle: 'Tauko',
55 | unavailable: 'Ei käytettävissä',
56 | },
57 | title: {
58 | speaker_management: 'Ryhmän hallinta',
59 | },
60 | },
61 | fr: {
62 | placeholder: {
63 | tts: 'Texte à lire',
64 | },
65 | label: {
66 | leave: 'Quitter',
67 | ungroup: 'Dégrouper',
68 | group_all: 'Grouper tous',
69 | send: 'Envoyer',
70 | },
71 | state: {
72 | idle: 'Inactif',
73 | unavailable: 'Indisponible',
74 | },
75 | title: {
76 | speaker_management: 'Gestion des groupes',
77 | },
78 | },
79 | he: {
80 | placeholder: {
81 | tts: 'טקסט לדיבור',
82 | },
83 | label: {
84 | leave: 'לעזוב',
85 | ungroup: 'ביטול קבוצה',
86 | group_all: 'לקבץ את כולם',
87 | send: 'שליחה',
88 | master: 'ראשי',
89 | },
90 | state: {
91 | idle: 'לא פעיל',
92 | unavailable: 'לא זמין',
93 | },
94 | title: {
95 | speaker_management: 'ניהול קבוצות',
96 | },
97 | },
98 | hu: {
99 | placeholder: {
100 | tts: 'Szövegfelolvasás',
101 | },
102 | label: {
103 | leave: 'Kilépés',
104 | ungroup: 'Összes ki',
105 | group_all: 'Összes be',
106 | send: 'Küldés',
107 | master: 'Forrás',
108 | },
109 | state: {
110 | idle: 'Tétlen',
111 | unavailable: 'Nem elérhető',
112 | },
113 | title: {
114 | speaker_management: 'Hangszórók csoportosítása',
115 | },
116 | },
117 | it: {
118 | placeholder: {
119 | tts: 'Conversione testo in voce',
120 | },
121 | label: {
122 | leave: 'Lascia',
123 | ungroup: 'Separa',
124 | group_all: 'Raggruppa tutti',
125 | send: 'Invia',
126 | master: 'Master',
127 | },
128 | state: {
129 | idle: 'Inattivo',
130 | unavailable: 'Non disponibile',
131 | },
132 | title: {
133 | speaker_management: 'Gestione gruppo',
134 | },
135 | },
136 | is: {
137 | placeholder: {
138 | tts: 'Texti sem á að segja',
139 | },
140 | label: {
141 | leave: 'Yfirgefa',
142 | ungroup: 'Aðskilja',
143 | group_all: 'Sameina alla',
144 | send: 'Senda',
145 | master: 'Stjórnandi',
146 | },
147 | state: {
148 | idle: 'Aðgerðalaus',
149 | unavailable: 'Ekki tiltækt',
150 | },
151 | title: {
152 | speaker_management: 'Stjórnun hópa',
153 | },
154 | },
155 | no: {
156 | placeholder: {
157 | tts: 'Tekst til tale',
158 | },
159 | label: {
160 | leave: 'Forlat',
161 | ungroup: 'Oppløs gruppe',
162 | group_all: 'Grupper alle',
163 | send: 'Send',
164 | master: 'Master',
165 | },
166 | state: {
167 | idle: 'Inaktiv',
168 | unavailable: 'Utilgjengelig',
169 | },
170 | title: {
171 | speaker_management: 'Gruppestyring',
172 | },
173 | },
174 | pl: {
175 | placeholder: {
176 | tts: 'Zamień tekst na mowę',
177 | },
178 | label: {
179 | leave: 'Opuść',
180 | ungroup: 'Usuń grupę',
181 | group_all: 'Grupuj wszystkie',
182 | send: 'Wyślij',
183 | master: 'Główny',
184 | },
185 | state: {
186 | idle: 'brak aktywności',
187 | unavailable: 'niedostępny',
188 | },
189 | title: {
190 | speaker_management: 'Zarządzanie grupą',
191 | },
192 | },
193 | sv: {
194 | placeholder: {
195 | tts: 'Text till tal',
196 | },
197 | label: {
198 | leave: 'Lämna',
199 | ungroup: 'Avgruppera',
200 | group_all: 'Gruppera alla',
201 | send: 'Skicka',
202 | master: 'Master',
203 | },
204 | state: {
205 | idle: "Inaktiv",
206 | unavailable: 'Otillgänglig',
207 | },
208 | title: {
209 | speaker_management: 'Gruppstyrning',
210 | }
211 | },
212 | uk: {
213 | placeholder: {
214 | tts: 'Текст для відтворення',
215 | },
216 | label: {
217 | leave: 'Залишити',
218 | ungroup: 'Розгрупувати',
219 | group_all: 'Згрупувати всі',
220 | send: 'Надіслати',
221 | master: 'Головний',
222 | },
223 | state: {
224 | idle: 'бездіяльність',
225 | unavailable: 'недоступний',
226 | },
227 | title: {
228 | speaker_management: 'Управління групою',
229 | },
230 | },
231 | cz: {
232 | placeholder: {
233 | tts: 'Převeď text na řeč',
234 | },
235 | label: {
236 | leave: 'Odejít',
237 | ungroup: 'Zrušit seskupení',
238 | group_all: 'Seskupit vše',
239 | send: 'Poslat',
240 | master: 'Master',
241 | },
242 | state: {
243 | idle: 'Nečinný',
244 | unavailable: 'Nedostupný',
245 | },
246 | title: {
247 | speaker_management: 'Správa skupin',
248 | },
249 | },
250 | ru: {
251 | placeholder: {
252 | tts: 'Преобразование текста в речь',
253 | },
254 | label: {
255 | leave: 'Покинуть',
256 | ungroup: 'Разгруппировать',
257 | group_all: 'Сгруппировать все',
258 | send: 'Отправить',
259 | master: 'Мастер',
260 | },
261 | state: {
262 | idle: 'Бездействие',
263 | unavailable: 'Недоступен',
264 | },
265 | title: {
266 | speaker_management: 'Управление группой',
267 | },
268 | },
269 | es: {
270 | placeholder: {
271 | tts: 'Texto a voz',
272 | },
273 | label: {
274 | leave: 'Salir',
275 | ungroup: 'Desagrupar',
276 | group_all: 'Agrupar todos',
277 | send: 'Enviar',
278 | master: 'Maestro',
279 | },
280 | state: {
281 | idle: 'Inactivo',
282 | unavailable: 'No disponible',
283 | },
284 | title: {
285 | speaker_management: 'Gestión de grupo',
286 | },
287 | },
288 | zh: {
289 | placeholder: {
290 | tts: '播放文本',
291 | },
292 | label: {
293 | leave: '退出',
294 | ungroup: '取消组合',
295 | group_all: '组合全部',
296 | send: '发送',
297 | master: '主要的',
298 | },
299 | state: {
300 | idle: '空闲',
301 | unavailable: '不可用',
302 | },
303 | title: {
304 | speaker_management: '组合管理',
305 | },
306 | },
307 | sk: {
308 | placeholder: {
309 | tts: 'Prevod textu na reč',
310 | },
311 | label: {
312 | leave: 'Odísť',
313 | ungroup: 'Zrušiť zoskupenie',
314 | group_all: 'Zoskupiť všetky',
315 | send: 'Poslať',
316 | master: 'Master',
317 | },
318 | state: {
319 | idle: 'Nečinný',
320 | unavailable: 'Nedostupné',
321 | },
322 | title: {
323 | speaker_management: 'Manažment skupiny',
324 | },
325 | },
326 | ca: {
327 | placeholder: {
328 | tts: 'Text a veu',
329 | },
330 | label: {
331 | leave: 'Sortir',
332 | ungroup: 'Desagrupar',
333 | group_all: 'Agrupar-los tots',
334 | send: 'Enviar',
335 | master: 'Mestre',
336 | },
337 | state: {
338 | idle: 'Inactiu',
339 | unavailable: 'No disponible',
340 | },
341 | title: {
342 | speaker_management: 'Gestió del grup',
343 | },
344 | },
345 | nl: {
346 | placeholder: {
347 | tts: 'Tekst naar spraak',
348 | },
349 | label: {
350 | leave: 'Verlaten',
351 | ungroup: 'Ontgroeperen',
352 | group_all: 'Alles groeperen',
353 | send: 'Verzenden',
354 | master: 'Master',
355 | },
356 | state: {
357 | idle: 'Inactief',
358 | unavailable: 'Niet beschikbaar',
359 | },
360 | title: {
361 | speaker_management: 'Groepsbeheer',
362 | },
363 | },
364 | pt: {
365 | placeholder: {
366 | tts: 'Texto para fala',
367 | },
368 | label: {
369 | leave: 'Sair',
370 | ungroup: 'Desagrupar',
371 | group_all: 'Agrupar tudo',
372 | send: 'Enviar',
373 | master: 'Master',
374 | },
375 | state: {
376 | idle: 'Ocioso',
377 | unavailable: 'Indisponível',
378 | },
379 | title: {
380 | speaker_management: 'Gerenciamento de grupo',
381 | },
382 | },
383 | cs: {
384 | placeholder: {
385 | tts: 'Převod textu na řeč',
386 | },
387 | label: {
388 | leave: 'Opustit',
389 | ungroup: 'Zrušit seskupení',
390 | group_all: 'Seskupit vše',
391 | send: 'Poslat',
392 | master: 'Master',
393 | },
394 | state: {
395 | idle: 'Nečinný',
396 | unavailable: 'Nedostupné',
397 | },
398 | title: {
399 | speaker_management: 'Správa skupiny',
400 | },
401 | },
402 | };
403 |
404 | export default translations;
405 |
--------------------------------------------------------------------------------
/src/editor.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html, css } from 'lit-element';
2 | import style from './style';
3 | import generateConfig from './config/config';
4 | import './components/dropdown';
5 |
6 | const fireEvent = (node, type, detail = {}, options = {}) => {
7 | const event = new Event(type, {
8 | bubbles: options.bubbles === undefined ? true : options.bubbles,
9 | cancelable: Boolean(options.cancelable),
10 | composed: options.composed === undefined ? true : options.composed,
11 | });
12 |
13 | event.detail = detail;
14 | node.dispatchEvent(event);
15 | return event;
16 | };
17 |
18 | const OptionsArtwork = ['cover', 'full-cover', 'full-cover-fit', 'material', 'none'];
19 |
20 | const OptionsSource = ['icon', 'full'];
21 |
22 | const OptionsSoundMode = ['icon', 'full'];
23 |
24 | const OptionsInfo = ['short', 'scroll'];
25 |
26 | const OptionsReplaceMute = ['play_pause', 'stop', 'play_stop', 'next'];
27 |
28 | const computeItems = (options, optional = false) => {
29 | const items = options.map((option) => ({
30 | name: option,
31 | id: option,
32 | }));
33 |
34 | if (optional) {
35 | items.push({ name: 'Default', id: undefined });
36 | }
37 |
38 | return items;
39 | };
40 |
41 | export default class MiniMediaPlayerEditor extends LitElement {
42 | static get styles() {
43 | return [
44 | style,
45 | css`
46 | .editor-side-by-side {
47 | display: flex;
48 | margin: 16px 0;
49 | }
50 | .editor-side-by-side > * {
51 | flex: 1;
52 | padding-right: 4px;
53 | }
54 | .editor-label {
55 | margin-left: 6px;
56 | font-size: 0.8em;
57 | opacity: 0.75;
58 | }
59 | `,
60 | ];
61 | }
62 |
63 | static get properties() {
64 | return { hass: {}, _config: {} };
65 | }
66 |
67 | setConfig(config) {
68 | this._config = Object.assign({}, generateConfig, config);
69 | }
70 |
71 | get getMediaPlayerEntities() {
72 | return Object.keys(this.hass.states).filter((eid) => eid.substr(0, eid.indexOf('.')) === 'media_player');
73 | }
74 |
75 | get _group() {
76 | return this._config.group || false;
77 | }
78 |
79 | // eslint-disable-next-line camelcase
80 | get _volume_stateless() {
81 | return this._config.volume_stateless || false;
82 | }
83 |
84 | // eslint-disable-next-line camelcase
85 | get _toggle_power() {
86 | return this._config.toggle_power || true;
87 | }
88 |
89 | render() {
90 | if (!this.hass) return html``;
91 |
92 | const mediaPlayerOptions = this.getMediaPlayerEntities.map((entity) => ({
93 | name: entity,
94 | id: entity,
95 | }));
96 |
97 | return html`
98 |
68 | ${convertProgress(this.seekProgress || this.progress)}
69 |
78 | ` : ''}
79 |
80 |
70 | ${this.showTime ? html`
71 |
72 | -${(convertProgress(this.duration - (this.seekProgress || this.progress)))} |
73 |
74 | ` : ''}
75 | ${convertProgress(this.duration)}
76 |
77 |
99 |
264 | `;
265 | }
266 |
267 | valueChanged(ev) {
268 | if (!this._config || !this.hass) {
269 | return;
270 | }
271 | const { target } = ev;
272 | if (this[`_${target.configValue}`] === target.value) {
273 | return;
274 | }
275 | if (target.configValue) {
276 | if (target.value === '') {
277 | delete this._config[target.configValue];
278 | } else {
279 | this._config = {
280 | ...this._config,
281 | [target.configValue]: target.checked !== undefined ? target.checked : target.value,
282 | };
283 | }
284 | }
285 | fireEvent(this, 'config-changed', { config: this._config });
286 | }
287 | }
288 |
289 | customElements.define('mini-media-player-editor', MiniMediaPlayerEditor);
290 |
--------------------------------------------------------------------------------
/src/components/mediaControls.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html, css } from 'lit-element';
2 | import { classMap } from 'lit-html/directives/class-map';
3 |
4 | import { ICON, REPEAT_STATE } from '../const';
5 | import sharedStyle from '../sharedStyle';
6 |
7 | class MiniMediaPlayerMediaControls extends LitElement {
8 | static get properties() {
9 | return {
10 | player: {},
11 | config: {},
12 | break: Boolean,
13 | };
14 | }
15 |
16 | get showShuffle() {
17 | return !this.config.hide.shuffle && this.player.supportsShuffle;
18 | }
19 |
20 | get showRepeat() {
21 | return !this.config.hide.repeat && this.player.supportsRepeat;
22 | }
23 |
24 | get maxVol() {
25 | return this.config.max_volume || 100;
26 | }
27 |
28 | get minVol() {
29 | return this.config.min_volume || 0;
30 | }
31 |
32 | get vol() {
33 | return Math.round(this.player.vol * 100);
34 | }
35 |
36 | get jumpAmount() {
37 | return this.config.jump_amount || 10;
38 | }
39 |
40 | render() {
41 | const { hide } = this.config;
42 | return html`
43 | ${!hide.volume ? this.renderVolControls(this.player.muted) : html``}
44 | ${this.renderShuffleButton()}
45 | ${this.renderRepeatButton()}
46 | ${!hide.controls ? html`
47 |
100 | Entity (required)
101 | this.valueChanged({ target: { configValue: 'entity', value: detail.id } })}
104 | .items=${mediaPlayerOptions}
105 | .label=${'Select entity'}
106 | .selected=${this._config.entity}
107 | >
108 |
109 |
110 |
263 |
111 |
132 |
133 |
134 |
135 |
137 |
138 |
139 |
145 |
146 |
147 |
153 |
154 |
155 |
156 |
191 |
192 |
157 | Artwork
158 | this.valueChanged({ target: { configValue: 'artwork', value: detail.id } })}
161 | .items=${computeItems(OptionsArtwork, true)}
162 | .label=${'Default'}
163 | .selected=${this._config.artwork}
164 | >
165 |
166 |
167 |
168 | Source
169 | this.valueChanged({ target: { configValue: 'source', value: detail.id } })}
172 | .items=${computeItems(OptionsSource, true)}
173 | .label=${'Default'}
174 | .selected=${this._config.source}
175 | >
176 |
177 |
178 |
179 | Sound mode
180 |
183 | this.valueChanged({ target: { configValue: 'sound_mode', value: detail.id } })}
184 | .items=${computeItems(OptionsSoundMode, true)}
185 | .label=${'Default'}
186 | .selected=${this._config.sound_mode}
187 | >
188 |
189 |
190 |
193 |
218 |
219 |
194 | Info
195 | this.valueChanged({ target: { configValue: 'info', value: detail.id } })}
198 | .items=${computeItems(OptionsInfo, true)}
199 | .label=${'Default'}
200 | .selected=${this._config.info}
201 | >
202 |
203 |
204 |
205 |
206 | Replace Mute
207 |
210 | this.valueChanged({ target: { configValue: 'replace_mute', value: detail.id } })}
211 | .items=${computeItems(OptionsReplaceMute, true)}
212 | .label=${'Default'}
213 | .selected=${this._config.replace_mute}
214 | >
215 |
216 |
217 |
220 |
241 |
242 |
243 |
257 |
258 |
259 | Settings for Tap actions, TTS, hiding UI elements, idle view, speaker groups and shortcuts can only be
260 | configured in the code editor
261 |
262 |
48 | ${!hide.prev && this.player.supportsPrev ? html`
49 | this.player.prev(e)}
51 | .icon=${ICON.PREV}>
52 | ` : ''}
54 | ${this.renderJumpBackwardButton()}
55 | ${this.renderPlayButtons()}
56 | ${this.renderJumpForwardButton()}
57 | ${!hide.next && this.player.supportsNext ? html`
58 | this.player.next(e)}
60 | .icon=${ICON.NEXT}>
61 | ` : ''}
63 |
64 | ` : html``}
65 | `;
66 | }
67 |
68 | renderShuffleButton() {
69 | return this.showShuffle ? html`
70 |
71 | this.player.toggleShuffle(e)}
74 | .icon=${ICON.SHUFFLE}
75 | ?color=${this.player.shuffle}>
76 |
78 |
79 | ` : html``;
80 | }
81 |
82 | renderRepeatButton() {
83 | if (!this.showRepeat) return html``;
84 |
85 | const colored = [REPEAT_STATE.ONE, REPEAT_STATE.ALL].includes(this.player.repeat);
86 | return html`
87 |
88 | this.player.toggleRepeat(e)}
91 | .icon=${ICON.REPEAT[this.player.repeat]}
92 | ?color=${colored}>
93 |
95 |
96 | `;
97 | }
98 |
99 | renderVolControls(muted) {
100 | const volumeControls = this.config.volume_stateless
101 | ? this.renderVolButtons(muted)
102 | : this.renderVolSlider(muted);
103 |
104 | const classes = classMap({
105 | '--buttons': this.config.volume_stateless,
106 | 'mmp-media-controls__volume': true,
107 | flex: true,
108 | });
109 |
110 | const showVolumeLevel = !this.config.hide.volume_level;
111 | return html`
112 |
113 | ${volumeControls}
114 | ${showVolumeLevel ? this.renderVolLevel() : ''}
115 |
`;
116 | }
117 |
118 | renderVolSlider(muted) {
119 | return html`
120 | ${this.renderMuteButton(muted)}
121 | ${this.renderBackground()} ${this.renderArtwork()} ${this.renderGradient()}
172 |
173 |
207 |
174 | ${this.renderIcon()}
175 |
185 |
186 |
187 | ${this.renderEntityName()} ${this.renderMediaInfo()}
176 |
188 | ${!config.collapse && this.player.isActive
189 | ? html`
190 |
191 |
192 | `
193 | : ''}
194 |
195 | ${config.tts
196 | ? html` `
197 | : ''}
198 | >
204 |
205 |
206 |
208 | ${this.player.isActive && this.player.hasProgress
209 | ? html`
210 |
215 |
216 | `
217 | : ''}
218 |
219 |
292 | ${' '}
293 |
`;
294 | }
295 |
296 | if (this.config.icon_image != undefined){
297 | return html`
298 | 
299 |
`;
300 | }
301 |
302 | const active = !this.config.hide.icon_state && this.player.isActive;
303 | return html`
304 |
`;
311 | }
312 |
313 | renderEntityName(): TemplateResult | undefined {
314 | if (this.config.hide.name) return;
315 |
316 | return html` ${this.name} ${this.speakerCount()}
`;
317 | }
318 |
319 | renderMediaInfo(): TemplateResult | undefined {
320 | if (this.config.hide.info) return;
321 | const items = this.player.mediaInfo;
322 |
323 | return html`
330 | ${this.config.info === 'scroll'
331 | ? html`
`;
339 | }
340 |
341 | speakerCount(): string | undefined {
342 | if (this.config.speaker_group.show_group_count) {
343 | const count = this.groupMgmtPlayer ? this.groupMgmtPlayer.groupCount : this.player.groupCount;
344 | return count > 1 ? ` +${count - 1}` : '';
345 | }
346 | return;
347 | }
348 |
349 | computeStyles(): (part: Part) => void {
350 | const { scale } = this.config;
351 | return styleMap({
352 | ...(scale && { '--mmp-unit': `${40 * scale}px` }),
353 | ...(this.foregroundColor &&
354 | this.player.isActive && {
355 | '--mmp-text-color': this.foregroundColor,
356 | '--mmp-icon-color': this.foregroundColor,
357 | '--mmp-icon-active-color': this.foregroundColor,
358 | '--mmp-accent-color': this.foregroundColor,
359 | '--secondary-text-color': this.foregroundColor,
360 | '--mmp-media-cover-info-color': this.foregroundColor,
361 | '--ha-control-color': this.foregroundColor,
362 | }),
363 | });
364 | }
365 |
366 | async computeArtwork(): Promise
332 |
`
336 | : ''}
337 | ${items.map((i) => html`${i.prefix + i.text}`)}
338 |
333 | ${items.map((i) => html`${i.prefix + i.text}`)}
334 |
335 |
269 |
270 | ```yaml
271 | type: custom:mini-media-player
272 | entity: media_player.kitchen_speakers
273 | ```
274 |
275 | #### Compact card
276 | Setting either `volume` and/or `controls` to `true` in the `hide` option object will render the player as a single row.
277 |
278 |
279 |
280 | ```yaml
281 | type: custom:mini-media-player
282 | entity: media_player.example
283 | icon: mdi:spotify
284 | artwork: cover
285 | hide:
286 | volume: true
287 | source: true
288 | power_state: false
289 | ```
290 |
291 | #### Card with media shortcuts
292 | You can specify media shortcuts through the `shortcuts` option, either as a list or as buttons or why not both?
293 |
294 |
295 |
296 | ```yaml
297 | - entity: media_player.spotify
298 | type: custom:mini-media-player
299 | artwork: cover
300 | source: icon
301 | hide:
302 | volume: true
303 | shortcuts:
304 | columns: 4 # Max buttons per row
305 | buttons:
306 | # Start predefined playlist
307 | - icon: mdi:cat
308 | type: playlist
309 | id: spotify:user:XXXXXXX:playlist:37i9dQZF1DZ06evO2O09Hg # Where XXXXXXX is your User ID
310 | # Change the source to bathroom
311 | - icon: mdi:dog
312 | type: source
313 | id: Bathroom
314 | # Trigger script
315 | - icon: mdi:dog
316 | type: script
317 | id: script.script_name
318 | # Trigger custom service
319 | - name: Crooners Playlist
320 | type: service
321 | id: spotcast.start
322 | data:
323 | entity_id: media_player.googlehome1234
324 | uri: spotify:playlist:37i9dQZF1DX9XiAcF7t1s5
325 |
326 | ... # etc.
327 | ```
328 | **Tip**:
329 | If you don't have Sonos, but want just a bit more control over playlists and so, a simple solution is to use the `type: service`-option, to trigger the`spotcast.start`-service.
330 |
331 | Remember to add the [required data](https://github.com/fondberg/spotcast#call-the-service), for spotcast to work. Also, kindly note that the [spotcast](https://github.com/fondberg/spotcast) custom component is required, for this to work. It's available in HACS.
332 |
333 | #### Grouped cards
334 | Set the `group` option to `true` when nesting mini media player cards inside other cards that already have margins/paddings.
335 |
336 |
337 |
338 | ```yaml
339 | type: entities
340 | entities:
341 | - type: custom:mini-media-player
342 | entity: media_player.multiroom_player
343 | group: true
344 | source: icon
345 | info: short
346 | hide:
347 | volume: true
348 | power: true
349 | - type: custom:mini-media-player
350 | entity: media_player.kitchen_speakers
351 | group: true
352 | hide:
353 | controls: true
354 | - type: custom:mini-media-player
355 | entity: media_player.bathroom_speakers
356 | group: true
357 | hide:
358 | controls: true
359 | - type: custom:mini-media-player
360 | entity: media_player.bedroom_speakers
361 | group: true
362 | hide:
363 | controls: true
364 | - type: custom:mini-media-player
365 | entity: media_player.patio_speakers
366 | group: true
367 | hide:
368 | controls: true
369 | ```
370 |
371 | #### Stacked cards
372 | By using vertical and horizontal stacks, you can achieve many different setups.
373 |
374 |
375 |
376 | ```yaml
377 | - type: horizontal-stack
378 | cards:
379 | - entity: media_player.tv_livingroom
380 | type: custom:mini-media-player
381 | info: short
382 | artwork: cover
383 | hide:
384 | mute: true
385 | icon: true
386 | power_state: false
387 | - entity: media_player.tv_bedroom
388 | type: custom:mini-media-player
389 | info: short
390 | artwork: cover
391 | hide:
392 | mute: true
393 | icon: true
394 | power_state: false
395 | - type: horizontal-stack
396 | cards:
397 | - entity: media_player.cc_patio
398 | type: custom:mini-media-player
399 | hide:
400 | icon: true
401 | - entity: media_player.cc_kitchen
402 | type: custom:mini-media-player
403 | hide:
404 | icon: true
405 | - entity: media_player.cc_bath
406 | type: custom:mini-media-player
407 | hide:
408 | icon: true
409 | ```
410 |
411 | #### Speaker group management
412 | Specify all your speaker entities in a list under the option `speaker_group` -> `entities`. They obviously need to be of the same platform.
413 |
414 | * The card does only allow changes to be made to groups where the entity of the card is the coordinator/master speaker.
415 | * Checking a speakers in the list will make it join the group of the card entity. (*`media_player.sonos_office`* in the example below).
416 | * Unchecking a speaker in the list will remove it from any group it's a part of.
417 |
418 |
419 |
420 | ```yaml
421 | type: custom:mini-media-player
422 | entity: media_player.sonos_office
423 | hide:
424 | power: true
425 | icon: true
426 | source: true
427 | speaker_group:
428 | platform: sonos
429 | show_group_count: true
430 | entities:
431 | - entity_id: media_player.sonos_office
432 | name: Sonos Office
433 | - entity_id: media_player.sonos_livingroom
434 | name: Sonos Livingroom
435 | - entity_id: media_player.sonos_kitchen
436 | name: Sonos Kitchen
437 | - entity_id: media_player.sonos_bathroom
438 | name: Sonos Bathroom
439 | - entity_id: media_player.sonos_bedroom
440 | name: Sonos Bedroom
441 | ```
442 |
443 | If you are planning to use the `speaker_group` option in several cards, creating a separate yaml file for the list is highly recommended, this will result in a less cluttered `ui-lovelace.yaml` and also make the list easier to manage and maintain.
444 | You then simply reference the file containing the list using `entities: !include filename.yaml` for every occurrence of `entities` in your `ui-lovelace.yaml`.
445 |
446 | This is however only possible when you have lovelace mode set to yaml in your HA configuration, see [Lovelace YAML mode](https://www.home-assistant.io/lovelace/yaml-mode/) for more info.
447 |
448 | ## Development
449 | *If you plan to contribute back to this repo, please fork & create the PR against the [dev](https://github.com/kalkih/mini-media-player/tree/dev) branch.*
450 |
451 | **Clone this repository into your `config/www` folder using git.**
452 |
453 | ```console
454 | $ git clone https://github.com/kalkih/mini-media-player.git
455 | ```
456 |
457 | **Add a reference to the card in your `ui-lovelace.yaml`.**
458 |
459 | ```yaml
460 | resources:
461 | - url: /local/mini-media-player/dist/mini-media-player-bundle.js
462 | type: module
463 | ```
464 |
465 | ### Instructions
466 |
467 | *Requires `nodejs` & `npm`*
468 |
469 | 1. Move into the `mini-media-player` repo, checkout the *dev* branch & install dependencies.
470 | ```console
471 | $ cd mini-media-player && git checkout dev && npm install
472 | ```
473 |
474 | 2. Make changes to the source
475 |
476 | 3. Build the source by running
477 | ```console
478 | $ npm run build
479 | ```
480 |
481 | 4. Refresh the browser to see changes
482 |
483 | *Make sure cache is cleared or disabled*
484 |
485 | 5. *(Optional)* Watch the source and automatically rebuild on save
486 | ```console
487 | $ npm run watch
488 | ```
489 |
490 | *The new `mini-media-player-bundle.js` will be build and ready inside `/dist`.*
491 |
492 |
493 | ## Getting errors?
494 | Make sure you have `javascript_version: latest` in your `configuration.yaml` under `frontend:`.
495 |
496 | Make sure you have the latest version of `mini-media-player-bundle.js`.
497 |
498 | If you have issues after updating the card, try clearing your browsers cache or restart Home Assistant.
499 |
500 | If you are getting "Custom element doesn't exist: mini-media-player" or running older browsers try replacing `type: module` with `type: js` in your resource reference, like below.
501 |
502 | ```yaml
503 | resources:
504 | - url: ...
505 | type: js
506 | ```
507 |
508 | ## Inspiration
509 | - [@ciotlosm](https://github.com/ciotlosm) - [custom-lovelace](https://github.com/ciotlosm/custom-lovelace)
510 | - [@c727](https://github.com/c727) - [Custom UI: Mini media player](https://community.home-assistant.io/t/custom-ui-mini-media-player/40135)
511 |
512 | ## License
513 | This project is under the MIT license.
514 |
--------------------------------------------------------------------------------