@outbook/webcomponents-player 1.3.2 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -6
- package/_lib/playlist/index.js +3 -8
- package/_lib/to-boolean.js +5 -0
- package/_style/player.style.js +1 -1
- package/package.json +2 -1
- package/player.js +40 -3
package/README.md
CHANGED
|
@@ -43,7 +43,11 @@ function render() {
|
|
|
43
43
|
return html`
|
|
44
44
|
${Player({
|
|
45
45
|
playlist: myPlaylist,
|
|
46
|
-
lang: 'en'
|
|
46
|
+
lang: 'en',
|
|
47
|
+
showFileExtension: true,
|
|
48
|
+
showArtwork: true,
|
|
49
|
+
showTrackNumber: true,
|
|
50
|
+
playlistAlign: 'right'
|
|
47
51
|
})}
|
|
48
52
|
`;
|
|
49
53
|
}
|
|
@@ -60,6 +64,10 @@ import '@outbook/webcomponents-player';
|
|
|
60
64
|
```html
|
|
61
65
|
<outbook-player
|
|
62
66
|
lang="en"
|
|
67
|
+
show-file-extension="true"
|
|
68
|
+
show-artwork="true"
|
|
69
|
+
show-track-number="true"
|
|
70
|
+
playlist-align="right"
|
|
63
71
|
.playlist='[
|
|
64
72
|
{
|
|
65
73
|
"file": "path/to/your/audio1.mp3",
|
|
@@ -91,11 +99,15 @@ This is the underlying web component. It can be used directly in HTML or in any
|
|
|
91
99
|
|
|
92
100
|
### Properties
|
|
93
101
|
|
|
94
|
-
| Attribute
|
|
95
|
-
|
|
96
|
-
| `lang`
|
|
97
|
-
| `playlist`
|
|
98
|
-
| `extraClasses` | `extraClasses` | `String` | `undefined`
|
|
102
|
+
| Attribute | Property | Type | Default | Description |
|
|
103
|
+
|---|---|---|---|---|
|
|
104
|
+
| `lang` | `lang` | `String` | `'en'` | The language to use for localized strings. |
|
|
105
|
+
| `playlist` | `playlist` | `Array` | `[]` | An array of track objects, each with `file`, `title`, `artist`, `album`, and `cover` properties. |
|
|
106
|
+
| `extraClasses` | `extraClasses` | `String` | `undefined` | Classes to add to the host element. |
|
|
107
|
+
| `show-file-extension` | `showFileExtension` | `Boolean` | `true` | Whether to display file extensions in the playlist. |
|
|
108
|
+
| `show-artwork` | `showArtwork` | `Boolean` | `true` | Whether to display artwork in the playlist. |
|
|
109
|
+
| `show-track-number` | `showTrackNumber` | `Boolean` | `true` | Whether to display track numbers in the playlist. |
|
|
110
|
+
| `playlist-align` | `playlistAlign` | `String` | `'right'` | Aligns the playlist to 'left' or 'right' of the track info. |
|
|
99
111
|
|
|
100
112
|
### Styling
|
|
101
113
|
|
package/_lib/playlist/index.js
CHANGED
|
@@ -18,12 +18,7 @@ export const Playlist = virtual(
|
|
|
18
18
|
handleAudio,
|
|
19
19
|
listId
|
|
20
20
|
}) => {
|
|
21
|
-
const {
|
|
22
|
-
showCovers = true,
|
|
23
|
-
showTrackNumber = true,
|
|
24
|
-
showIconIsPlaying = true,
|
|
25
|
-
showFileExtension = true
|
|
26
|
-
} = list;
|
|
21
|
+
const { showArtwork, showTrackNumber, showFileExtension } = list;
|
|
27
22
|
function handleButton(index) {
|
|
28
23
|
return ev => {
|
|
29
24
|
if (isEventClick(ev) || isKeyEnterOrKeySpace(ev)) {
|
|
@@ -49,8 +44,8 @@ export const Playlist = virtual(
|
|
|
49
44
|
@click="${handleButton(index)}"
|
|
50
45
|
@keydown="${handleButton(index)}"
|
|
51
46
|
>
|
|
52
|
-
${
|
|
53
|
-
${
|
|
47
|
+
${showArtwork ? ShowCover({ cover: item.cover }) : nothing}
|
|
48
|
+
${isPlayingItem
|
|
54
49
|
? html`
|
|
55
50
|
<div
|
|
56
51
|
class="player-playlist__item-block player-playlist__item-playing-icon"
|
package/_style/player.style.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
export default css`.skeleton-loader{--pulse-bg-start: blue;--pulse-bg-end: red}@keyframes colorPulse{from{background-color:var(--pulse-bg-start)}to{background-color:var(--pulse-bg-end)}}.skeleton-loader{background-color:var(--pulse-bg-start);animation:colorPulse 3.2s ease infinite alternate-reverse;opacity:.3}:host{display:block;color-scheme:inherit;--_accent-0: var(--outbook-player--color-accent-0, oklch(100% 0 0deg));--_accent-50: var(--outbook-player--color-accent-50, oklch(98.5% 0 0deg));--_accent-100: var(--outbook-player--color-accent-100, oklch(97% 0 0deg));--_accent-200: var(--outbook-player--color-accent-200, oklch(92.2% 0 0deg));--_accent-300: var(--outbook-player--color-accent-300, oklch(87% 0 0deg));--_accent-400: var(--outbook-player--color-accent-400, oklch(70.8% 0 0deg));--_accent-500: var(--outbook-player--color-accent-500, oklch(55.6% 0 0deg));--_accent-600: var(--outbook-player--color-accent-600, oklch(43.9% 0 0deg));--_accent-700: var(--outbook-player--color-accent-700, oklch(37.1% 0 0deg));--_accent-800: var(--outbook-player--color-accent-800, oklch(26.9% 0 0deg));--_accent-900: var(--outbook-player--color-accent-900, oklch(20.5% 0 0deg));--_accent-950: var(--outbook-player--color-accent-950, oklch(14.5% 0 0deg));--_accent-1000: var(--outbook-player--color-accent-1000, oklch(0% 0 0deg));--pulse-bg-start: light-dark( var(--_accent-100), var(--_accent-600) );--pulse-bg-end: light-dark( var(--_accent-600), var(--_accent-500) );--outbook-badge-file-extension--border-color: light-dark( oklch(37.1% 0 0deg), oklch(87% 0 0deg) );--outbook-badge-file-extension--text-color: light-dark( oklch(14.5% 0 0deg), oklch(100% 0 0deg) );--outbook-scrollable--indicator-color: light-dark( var(--_accent-900), var(--_accent-200) );--outbook-player-timeline--background: light-dark( var(--_accent-200), var(--_accent-800) );--outbook-player-timeline--background-completed: light-dark( var(--_accent-800), var(--_accent-200) );--outbook-player-timeline--chapter--mark-color: light-dark( oklch(14.5% 0 0deg), oklch(98.5% 0 0deg) );--outbook-player-timeline--chapter-played-mark-color: light-dark( oklch(98.5% 0 0deg), oklch(14.5% 0 0deg) );--_text-color: light-dark(oklch(20.5% 0 0deg), oklch(100% 0 0deg));--_background-color: light-dark(oklch(98.5% 0 0deg), oklch(20.5% 0 0deg));--_separator-color: light-dark(oklch(92.2% 0 0deg), oklch(43.9% 0 0deg));--_link-color: light-dark(var(--_accent-700), var(--_accent-200));--_link-color-hover: light-dark(var(--_accent-500), var(--_accent-50))}*{box-sizing:border-box;padding:0;margin:0}ul,ol,li{list-style:none}a,button,[role=button],[role=link]{cursor:pointer}a[disabled],button[disabled],[role=button][disabled],[role=link][disabled]{cursor:default}.player{container-name:player;container-type:inline-size;height:var(--_main-height, 32rem);background-color:var(--_background-color);position:relative}.player::after,.player::before{content:"";height:100%;width:100%;position:absolute;left:0;top:0}.player.has-gradient::after{opacity:.65;background-color:var(--_background-color)}.player::before{opacity:.45;background:linear-gradient(145deg, var(--_accent-400) 0%, var(--_accent-500) 25%, var(--_accent-600) 50%, var(--_accent-700) 75%, var(--_accent-800) 100%)}.player.has-gradient::before{opacity:1;background:linear-gradient(145deg, var(--player--main-color-0) 0%, var(--player--main-color-1) 25%, var(--player--main-color-2) 50%, var(--player--main-color-3) 75%, var(--player--main-color-4) 100%)}@container player (width < 768px){.player__inner{--player--flex-direction: column;--_secondary-block-width: unset;--_secondary-block-min-width: unset}}@container player (width >= 768px){.player__inner{--player--flex-direction: row;--_secondary-block-width: 25%;--_secondary-block-min-width: 20rem}}.player__inner{display:flex;flex-direction:column;height:100%;color:var(--_text-color);position:relative;z-index:2}.player__body{display:flex;flex-direction:var(--player--flex-direction);flex:1 0 0;overflow:hidden}.player__playlist{overflow:hidden;padding:0 0 0 0.5rem;display:flex;flex:1 0 0}.player__track-info{width:var(--_secondary-block-width);min-width:var(--_secondary-block-min-width);padding:0.5rem}.player__controls{display:flex;justify-content:center;margin-top:-1rem}.player__controls,.player__timeline{position:relative}.player__timeline{padding:0 0.5rem}.player-controls{--_controls-color: light-dark( var(--_accent-950), var(--_accent-100) );--_controls-size: 3rem}@container player (width >= 768px){.player-controls{--_controls-size: 3.5rem}}@container player (width >= 1024px){.player-controls{--_controls-size: 4rem}}.player-controls,.player-controls__items{width:auto}.player-controls__items{display:flex}.player-controls__button{background:rgba(0,0,0,0);border:0;color:var(--_controls-color)}.player-controls__button:focus-visible{outline:var(--outbook-outline--color, light-dark(oklch(48.8% 0.243 264.376deg), oklch(88.2% 0.059 254.128deg))) solid 2px;outline-offset:-4px}.player-controls__button.is-disabled{opacity:.4}.player-controls__icon{width:var(--_controls-size);height:var(--_controls-size)}.player-playlist{--_playlist-font-weight: normal;--_playlist-font-size: 0.75rem;--_playlist-font-size-small: 0.625rem;--_playlist-item-background-color: transparent;--_playlist-item-image-size: 3rem}.player-playlist .is-playing{--_playlist-font-weight: 600;--_playlist-item-background-color: var(--_accent-200)}.ambient-dark .player-playlist .is-playing{--_playlist-item-background-color: var(--_accent-700)}@container player (width >= 768px){.player-playlist{--_playlist-font-size: 0.875rem;--_playlist-font-size-small: 0.75rem}}@container player (width >= 1024px){.player-playlist{--_playlist-font-size: 1rem;--_playlist-font-size-small: 0.875rem;--_playlist-item-image-size: 4rem}}.player-playlist .track-text__item{font-weight:var(--_playlist-font-weight);font-size:var(--_playlist-font-size);line-height:150%}.player-playlist .track-text__item.size-small{font-size:var(--_playlist-font-size-small)}.player-playlist__items{padding:0;position:relative}.player-playlist__item{position:relative;border-bottom:1px solid var(--_separator-color)}.player-playlist__item.is-playing:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:.45}@keyframes colorPulse{from{background-color:var(--pulse-bg-start)}to{background-color:var(--pulse-bg-end)}}.player-playlist__item.is-playing:before{background-color:var(--pulse-bg-start);animation:colorPulse 3.2s ease infinite alternate-reverse;opacity:.3}.player-playlist__item:last-child{border-bottom:0}.player-playlist__item-button{display:flex;padding:0.5rem;position:relative;align-items:center}.player-playlist__item-button:focus-visible{outline:var(--outbook-outline--color, light-dark(oklch(48.8% 0.243 264.376deg), oklch(88.2% 0.059 254.128deg))) solid 2px;outline-offset:-4px}.player-playlist__item-group,.player-playlist__item-block{display:flex;align-items:center;margin-left:1rem;height:var(--_playlist-item-image-size)}.player-playlist__item-group:first-child,.player-playlist__item-block:first-child{margin-left:0}.player-playlist__item-group.is-last-right,.player-playlist__item-block.is-last-right{margin-left:auto;padding-left:0.5rem}.player-playlist__item-image{width:var(--_playlist-item-image-size);height:var(--_playlist-item-image-size);flex-shrink:0}.player-playlist__item-playing-icon{width:1rem;height:1rem;display:flex;align-items:center}.player-playlist__item-playing-icon-inner{width:100%;aspect-ratio:1/1}.track-info{--track-info--flex-direction: row;--track-info--image-width: 4rem;--track-info--image-separation-horizontal: 1rem;--track-info--image-separation-vertical: 0;--track-info--height: 4rem}@container player (width >= 768px){.track-info{--track-info--flex-direction: column;--track-info--image-width: 100%;--track-info--image-separation-horizontal: 0;--track-info--image-separation-vertical: 1rem;--track-info--height: auto}}.track-info__inner{display:flex;flex-direction:var(--track-info--flex-direction);height:var(--track-info--height)}.track-info__inner .track-text__item{font-size:1rem;line-height:150%}.track-info__inner .track-text__item.size-small{font-size:0.75rem}.track-info__image{width:var(--track-info--image-width);flex-shrink:0;display:flex;align-items:center;margin-right:var(--track-info--image-separation-horizontal);margin-bottom:var(--track-info--image-separation-vertical)}.track-info__image>*{width:100%}.track-info__data{display:flex;align-items:center}`;
|
|
4
|
+
export default css`.skeleton-loader{--pulse-bg-start: blue;--pulse-bg-end: red}@keyframes colorPulse{from{background-color:var(--pulse-bg-start)}to{background-color:var(--pulse-bg-end)}}.skeleton-loader{background-color:var(--pulse-bg-start);animation:colorPulse 3.2s ease infinite alternate-reverse;opacity:.3}:host{display:block;color-scheme:inherit;--_accent-0: var(--outbook-player--color-accent-0, oklch(100% 0 0deg));--_accent-50: var(--outbook-player--color-accent-50, oklch(98.5% 0 0deg));--_accent-100: var(--outbook-player--color-accent-100, oklch(97% 0 0deg));--_accent-200: var(--outbook-player--color-accent-200, oklch(92.2% 0 0deg));--_accent-300: var(--outbook-player--color-accent-300, oklch(87% 0 0deg));--_accent-400: var(--outbook-player--color-accent-400, oklch(70.8% 0 0deg));--_accent-500: var(--outbook-player--color-accent-500, oklch(55.6% 0 0deg));--_accent-600: var(--outbook-player--color-accent-600, oklch(43.9% 0 0deg));--_accent-700: var(--outbook-player--color-accent-700, oklch(37.1% 0 0deg));--_accent-800: var(--outbook-player--color-accent-800, oklch(26.9% 0 0deg));--_accent-900: var(--outbook-player--color-accent-900, oklch(20.5% 0 0deg));--_accent-950: var(--outbook-player--color-accent-950, oklch(14.5% 0 0deg));--_accent-1000: var(--outbook-player--color-accent-1000, oklch(0% 0 0deg));--pulse-bg-start: light-dark( var(--_accent-100), var(--_accent-600) );--pulse-bg-end: light-dark( var(--_accent-600), var(--_accent-500) );--outbook-badge-file-extension--border-color: light-dark( oklch(37.1% 0 0deg), oklch(87% 0 0deg) );--outbook-badge-file-extension--text-color: light-dark( oklch(14.5% 0 0deg), oklch(100% 0 0deg) );--outbook-scrollable--indicator-color: light-dark( var(--_accent-900), var(--_accent-200) );--outbook-player-timeline--background: light-dark( var(--_accent-200), var(--_accent-800) );--outbook-player-timeline--background-completed: light-dark( var(--_accent-800), var(--_accent-200) );--outbook-player-timeline--chapter--mark-color: light-dark( oklch(14.5% 0 0deg), oklch(98.5% 0 0deg) );--outbook-player-timeline--chapter-played-mark-color: light-dark( oklch(98.5% 0 0deg), oklch(14.5% 0 0deg) );--_text-color: light-dark(oklch(20.5% 0 0deg), oklch(100% 0 0deg));--_background-color: light-dark(oklch(98.5% 0 0deg), oklch(20.5% 0 0deg));--_separator-color: light-dark(oklch(92.2% 0 0deg), oklch(43.9% 0 0deg));--_link-color: light-dark(var(--_accent-700), var(--_accent-200));--_link-color-hover: light-dark(var(--_accent-500), var(--_accent-50))}*{box-sizing:border-box;padding:0;margin:0}ul,ol,li{list-style:none}a,button,[role=button],[role=link]{cursor:pointer}a[disabled],button[disabled],[role=button][disabled],[role=link][disabled]{cursor:default}.player{container-name:player;container-type:inline-size;height:var(--_main-height, 32rem);background-color:var(--_background-color);position:relative}.player::after,.player::before{content:"";height:100%;width:100%;position:absolute;left:0;top:0}.player.has-gradient::after{opacity:.65;background-color:var(--_background-color)}.player::before{opacity:.45;background:linear-gradient(145deg, var(--_accent-400) 0%, var(--_accent-500) 25%, var(--_accent-600) 50%, var(--_accent-700) 75%, var(--_accent-800) 100%)}.player.has-gradient::before{opacity:1;background:linear-gradient(145deg, var(--player--main-color-0) 0%, var(--player--main-color-1) 25%, var(--player--main-color-2) 50%, var(--player--main-color-3) 75%, var(--player--main-color-4) 100%)}@container player (width < 768px){.player__inner{--player--flex-direction: column;--_secondary-block-width: unset;--_secondary-block-min-width: unset}}@container player (width >= 768px){.player__inner{--player--flex-direction: row;--_secondary-block-width: 25%;--_secondary-block-min-width: 20rem}.playlist-align-left .player__inner{--player--flex-direction: row-reverse}}.player__inner{display:flex;flex-direction:column;height:100%;color:var(--_text-color);position:relative;z-index:2}.player__body{display:flex;flex-direction:var(--player--flex-direction);flex:1 0 0;overflow:hidden}.player__playlist{overflow:hidden;padding:0 0 0 0.5rem;display:flex;flex:1 0 0}.player__track-info{width:var(--_secondary-block-width);min-width:var(--_secondary-block-min-width);padding:0.5rem}.player__controls{display:flex;justify-content:center;margin-top:-1rem}.player__controls,.player__timeline{position:relative}.player__timeline{padding:0 0.5rem}.player-controls{--_controls-color: light-dark( var(--_accent-950), var(--_accent-100) );--_controls-size: 3rem}@container player (width >= 768px){.player-controls{--_controls-size: 3.5rem}}@container player (width >= 1024px){.player-controls{--_controls-size: 4rem}}.player-controls,.player-controls__items{width:auto}.player-controls__items{display:flex}.player-controls__button{background:rgba(0,0,0,0);border:0;color:var(--_controls-color)}.player-controls__button:focus-visible{outline:var(--outbook-outline--color, light-dark(oklch(48.8% 0.243 264.376deg), oklch(88.2% 0.059 254.128deg))) solid 2px;outline-offset:-4px}.player-controls__button.is-disabled{opacity:.4}.player-controls__icon{width:var(--_controls-size);height:var(--_controls-size)}.player-playlist{--_playlist-font-weight: normal;--_playlist-font-size: 0.75rem;--_playlist-font-size-small: 0.625rem;--_playlist-item-background-color: transparent;--_playlist-item-image-size: 3rem}.player-playlist .is-playing{--_playlist-font-weight: 600;--_playlist-item-background-color: var(--_accent-200)}.ambient-dark .player-playlist .is-playing{--_playlist-item-background-color: var(--_accent-700)}@container player (width >= 768px){.player-playlist{--_playlist-font-size: 0.875rem;--_playlist-font-size-small: 0.75rem}}@container player (width >= 1024px){.player-playlist{--_playlist-font-size: 1rem;--_playlist-font-size-small: 0.875rem;--_playlist-item-image-size: 4rem}}.player-playlist .track-text__item{font-weight:var(--_playlist-font-weight);font-size:var(--_playlist-font-size);line-height:150%}.player-playlist .track-text__item.size-small{font-size:var(--_playlist-font-size-small)}.player-playlist__items{padding:0;position:relative}.player-playlist__item{position:relative;border-bottom:1px solid var(--_separator-color)}.player-playlist__item.is-playing:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:.45}@keyframes colorPulse{from{background-color:var(--pulse-bg-start)}to{background-color:var(--pulse-bg-end)}}.player-playlist__item.is-playing:before{background-color:var(--pulse-bg-start);animation:colorPulse 3.2s ease infinite alternate-reverse;opacity:.3}.player-playlist__item:last-child{border-bottom:0}.player-playlist__item-button{display:flex;padding:0.5rem;position:relative;align-items:center}.player-playlist__item-button:focus-visible{outline:var(--outbook-outline--color, light-dark(oklch(48.8% 0.243 264.376deg), oklch(88.2% 0.059 254.128deg))) solid 2px;outline-offset:-4px}.player-playlist__item-group,.player-playlist__item-block{display:flex;align-items:center;margin-left:1rem;height:var(--_playlist-item-image-size)}.player-playlist__item-group:first-child,.player-playlist__item-block:first-child{margin-left:0}.player-playlist__item-group.is-last-right,.player-playlist__item-block.is-last-right{margin-left:auto;padding-left:0.5rem}.player-playlist__item-image{width:var(--_playlist-item-image-size);height:var(--_playlist-item-image-size);flex-shrink:0}.player-playlist__item-playing-icon{width:1rem;height:1rem;display:flex;align-items:center}.player-playlist__item-playing-icon-inner{width:100%;aspect-ratio:1/1}.track-info{--track-info--flex-direction: row;--track-info--image-width: 4rem;--track-info--image-separation-horizontal: 1rem;--track-info--image-separation-vertical: 0;--track-info--height: 4rem}@container player (width >= 768px){.track-info{--track-info--flex-direction: column;--track-info--image-width: 100%;--track-info--image-separation-horizontal: 0;--track-info--image-separation-vertical: 1rem;--track-info--height: auto}}.track-info__inner{display:flex;flex-direction:var(--track-info--flex-direction);height:var(--track-info--height)}.track-info__inner .track-text__item{font-size:1rem;line-height:150%}.track-info__inner .track-text__item.size-small{font-size:0.75rem}.track-info__image{width:var(--track-info--image-width);flex-shrink:0;display:flex;align-items:center;margin-right:var(--track-info--image-separation-horizontal);margin-bottom:var(--track-info--image-separation-vertical)}.track-info__image>*{width:100%}.track-info__data{display:flex;align-items:center}`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@outbook/webcomponents-player",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"main": "player.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"@outbook/webcomponents-type-icon": ">=1.1.2",
|
|
36
36
|
"@outbook/webcomponents-badge-file-extension": ">=1.2.1",
|
|
37
37
|
"@outbook/webcomponents-player-artwork": ">=1.0.0",
|
|
38
|
+
"@outbook/webcomponents-player-timeline": ">=1.0.1",
|
|
38
39
|
"@outbook/icons": ">=1.3.0"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
package/player.js
CHANGED
|
@@ -15,12 +15,30 @@ import { PlayerTimeline } from '@outbook/webcomponents-player-timeline';
|
|
|
15
15
|
import { loadLiterals } from './_i18n/i18n.js';
|
|
16
16
|
import _literals from './_i18n/en.json' with { type: 'json' };
|
|
17
17
|
import { useLangObserver } from '@outbook/hooks';
|
|
18
|
+
import { toBoolean } from './_lib/to-boolean.js';
|
|
18
19
|
|
|
19
20
|
function ComponentPlayer(element) {
|
|
20
|
-
const {
|
|
21
|
+
const {
|
|
22
|
+
playlist = [],
|
|
23
|
+
playlistAlign: _playlistAlign = 'right',
|
|
24
|
+
showFileExtension: _showFileExtension = 'true',
|
|
25
|
+
showArtwork: _showArtwork = 'true',
|
|
26
|
+
showTrackNumber: _showTrackNumber = 'true'
|
|
27
|
+
} = element;
|
|
28
|
+
const showFileExtension = toBoolean(_showFileExtension);
|
|
29
|
+
const showArtwork = toBoolean(_showArtwork);
|
|
30
|
+
const showTrackNumber = toBoolean(_showTrackNumber);
|
|
31
|
+
const list = {
|
|
32
|
+
showArtwork,
|
|
33
|
+
showTrackNumber,
|
|
34
|
+
showFileExtension
|
|
35
|
+
};
|
|
21
36
|
const mediaId = 'mythical-media-element';
|
|
22
37
|
const listId = 'mythical-list';
|
|
23
38
|
const playlistScrollId = 'mythical-playlist-scroll';
|
|
39
|
+
const playlistAlign = ['left', 'right'].includes(_playlistAlign)
|
|
40
|
+
? _playlistAlign
|
|
41
|
+
: 'right';
|
|
24
42
|
|
|
25
43
|
function getMediaElement() {
|
|
26
44
|
const el = element.shadowRoot.getElementById(mediaId);
|
|
@@ -234,6 +252,7 @@ function ComponentPlayer(element) {
|
|
|
234
252
|
|
|
235
253
|
const mainClasses = classMap({
|
|
236
254
|
player: true,
|
|
255
|
+
[`playlist-align-${playlistAlign}`]: true,
|
|
237
256
|
'has-gradient': hasProminentColors
|
|
238
257
|
});
|
|
239
258
|
|
|
@@ -300,18 +319,36 @@ if (!customElements.get('outbook-player')) {
|
|
|
300
319
|
customElements.define(
|
|
301
320
|
'outbook-player',
|
|
302
321
|
component(ComponentPlayer, {
|
|
303
|
-
observedAttributes: [
|
|
322
|
+
observedAttributes: [
|
|
323
|
+
'lang',
|
|
324
|
+
'show-file-extension',
|
|
325
|
+
'show-track-number',
|
|
326
|
+
'show-artwork',
|
|
327
|
+
'playlist-align'
|
|
328
|
+
],
|
|
304
329
|
useShadowDOM: true
|
|
305
330
|
})
|
|
306
331
|
);
|
|
307
332
|
}
|
|
308
333
|
|
|
309
334
|
export function Player(props) {
|
|
310
|
-
const {
|
|
335
|
+
const {
|
|
336
|
+
extraClasses,
|
|
337
|
+
lang = 'en',
|
|
338
|
+
playlist = [],
|
|
339
|
+
showFileExtension = true,
|
|
340
|
+
showArtwork = true,
|
|
341
|
+
showTrackNumber = true,
|
|
342
|
+
playlistAlign = 'right'
|
|
343
|
+
} = props;
|
|
311
344
|
return html`
|
|
312
345
|
<outbook-player
|
|
313
346
|
class="${ifDefined(extraClasses || undefined)}"
|
|
314
347
|
lang="${lang}"
|
|
348
|
+
show-file-extension="${showFileExtension.toString()}"
|
|
349
|
+
show-artwork="${showArtwork.toString()}"
|
|
350
|
+
show-track-number="${showTrackNumber.toString()}"
|
|
351
|
+
playlist-align="${playlistAlign}"
|
|
315
352
|
.playlist="${playlist}"
|
|
316
353
|
></outbook-player>
|
|
317
354
|
`;
|