@outbook/webcomponents-player 1.3.0 → 1.3.1
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 +5 -5
- package/_lib/playlist/modules/show-cover.js +8 -10
- package/_lib/track-info/index.js +8 -11
- package/_style/_modules/_playlist.scss +5 -14
- package/_style/player.style.js +1 -1
- package/package.json +8 -5
- package/player.js +20 -22
- package/_lib/cover-fallback/index.js +0 -48
- package/_style/_modules/_cover-fallback.scss +0 -52
- package/_style/_modules/_timeline.scss +0 -125
package/README.md
CHANGED
|
@@ -13,8 +13,8 @@ npm install @outbook/webcomponents-player
|
|
|
13
13
|
### As a Lit Element
|
|
14
14
|
|
|
15
15
|
```javascript
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
16
|
+
import {html} from 'lit';
|
|
17
|
+
import {Player} from '@outbook/webcomponents-player';
|
|
18
18
|
|
|
19
19
|
const myPlaylist = [
|
|
20
20
|
{
|
|
@@ -42,9 +42,9 @@ const myPlaylist = [
|
|
|
42
42
|
function render() {
|
|
43
43
|
return html`
|
|
44
44
|
${Player({
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
playlist: myPlaylist,
|
|
46
|
+
lang: 'en'
|
|
47
|
+
})}
|
|
48
48
|
`;
|
|
49
49
|
}
|
|
50
50
|
```
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import { virtual } from 'haunted';
|
|
2
1
|
import { html } from 'lit';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { getCover } from '../../get-cover.js';
|
|
3
|
+
import { PlayerArtwork } from '@outbook/webcomponents-player-artwork';
|
|
5
4
|
|
|
6
|
-
export const ShowCover =
|
|
5
|
+
export const ShowCover = ({ cover }) => {
|
|
7
6
|
return html`
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
</div>
|
|
7
|
+
${PlayerArtwork({
|
|
8
|
+
src1x: cover ? getCover(cover) : undefined,
|
|
9
|
+
extraClasses: 'myth-playlist__item-block myth-playlist__item-image'
|
|
10
|
+
})}
|
|
13
11
|
`;
|
|
14
|
-
}
|
|
12
|
+
};
|
package/_lib/track-info/index.js
CHANGED
|
@@ -1,24 +1,21 @@
|
|
|
1
1
|
import { virtual } from 'haunted';
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
-
import { CoverFallback } from '../cover-fallback/index.js';
|
|
4
3
|
import { TrackText } from '../track-text/index.js';
|
|
5
|
-
import { getCover } from '
|
|
4
|
+
import { getCover } from '../get-cover.js';
|
|
5
|
+
import { PlayerArtwork } from '@outbook/webcomponents-player-artwork';
|
|
6
6
|
|
|
7
7
|
export const TrackInfo = virtual(
|
|
8
8
|
({ track = {}, indexSelected, literals = {} }) => {
|
|
9
9
|
const hasTrackInfo = Number.isInteger(indexSelected);
|
|
10
|
+
const cover =
|
|
11
|
+
hasTrackInfo && track.cover ? getCover(track.cover) : undefined;
|
|
10
12
|
return html`
|
|
11
13
|
<div class="myth-track-info">
|
|
12
14
|
<div class="myth-track-info__inner">
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
alt=""
|
|
18
|
-
aria-hidden="true"
|
|
19
|
-
/>`
|
|
20
|
-
: CoverFallback({})}
|
|
21
|
-
</div>
|
|
15
|
+
${PlayerArtwork({
|
|
16
|
+
src1x: cover,
|
|
17
|
+
extraClasses: 'myth-track-info__image'
|
|
18
|
+
})}
|
|
22
19
|
<div class="myth-track-info__data">
|
|
23
20
|
${hasTrackInfo
|
|
24
21
|
? TrackText({
|
|
@@ -85,24 +85,15 @@
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
.myth-playlist__item-group {
|
|
89
|
-
display: flex;
|
|
90
|
-
align-items: center;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
88
|
.myth-playlist__item-image {
|
|
94
89
|
width: var(--_playlist-item-image-size);
|
|
95
90
|
height: var(--_playlist-item-image-size);
|
|
96
|
-
position: relative;
|
|
97
|
-
overflow: hidden;
|
|
98
91
|
flex-shrink: 0;
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
transform: translateX(-50%);
|
|
105
|
-
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.myth-playlist__item-group {
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
106
97
|
}
|
|
107
98
|
|
|
108
99
|
.myth-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) );--_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}.mythical-player{container-name:player;container-type:inline-size;height:var(--_main-height, 32rem);background-color:var(--_background-color);position:relative}.mythical-player::after,.mythical-player::before{content:"";height:100%;width:100%;position:absolute;left:0;top:0}.mythical-player.has-gradient::after{opacity:.65;background-color:var(--_background-color)}.mythical-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%)}.mythical-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){.mythical-player__inner{--player--flex-direction: column;--_secondary-block-width: unset;--_secondary-block-min-width: unset}}@container player (width >= 768px){.mythical-player__inner{--player--flex-direction: row;--_secondary-block-width: 25%;--_secondary-block-min-width: 20rem}}.mythical-player__inner{display:flex;flex-direction:column;height:100%;color:var(--_text-color);position:relative;z-index:2}.mythical-player__body{display:flex;flex-direction:var(--player--flex-direction);flex:1 0 0;overflow:hidden;padding:0.5rem 0}.mythical-player__playlist{overflow:hidden;padding:0 0 0 0.5rem;display:flex;flex:1 0 0}.mythical-player__track-info{width:var(--_secondary-block-width);min-width:var(--_secondary-block-min-width);padding:0.5rem}.mythical-player__controls{display:flex;justify-content:center;margin-top:-1rem}.mythical-player__controls,.mythical-player__timeline{position:relative}mythical-cover-fallback{display:block}.cover-fallback{--_cover-fallback-bg-color: light-dark(var(--_accent-200), var(--_accent-700));--_cover-fallback-font-size: 2rem}.cover-fallback.cover-fallback--in-file-item{--_cover-fallback-font-size: 2rem}@container player (width >= 768px){.cover-fallback{--_cover-fallback-font-size: 10rem}.cover-fallback.cover-fallback--in-file-item{--_cover-fallback-font-size: 2rem}}.cover-fallback{width:inherit;padding-top:100%;background-color:var(--_cover-fallback-bg-color);display:flex;align-items:center;justify-content:center;position:relative}.cover-fallback__icon{width:80%;height:80%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:var(--_text-color);display:flex;justify-content:center;align-items:center}.cover-fallback__icon-inner{width:100%;height:100%}.myth-controls{--_controls-color: light-dark( var(--_accent-950), var(--_accent-100) );--_controls-size: 3rem}@container player (width >= 768px){.myth-controls{--_controls-size: 3.5rem}}@container player (width >= 1024px){.myth-controls{--_controls-size: 4rem}}.myth-controls,.myth-controls__items{width:auto}.myth-controls__items{display:flex}.myth-controls__button{background:rgba(0,0,0,0);border:0;color:var(--_controls-color)}.myth-controls__button:focus-visible{outline:light-dark(oklch(48.8% 0.243 264.376deg), oklch(88.2% 0.059 254.128deg)) solid 2px;outline-offset:-4px}.myth-controls__button.is-disabled{opacity:.4}.myth-controls__icon{width:var(--_controls-size);height:var(--_controls-size)}.myth-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}.myth-playlist .is-playing{--_playlist-font-weight: 600;--_playlist-item-background-color: var(--_accent-200)}.ambient-dark .myth-playlist .is-playing{--_playlist-item-background-color: var(--_accent-700)}@container player (width >= 1024px){.myth-playlist{--_playlist-font-size: 1rem;--_playlist-font-size-small: 0.75rem;--_playlist-item-image-size: 4rem}}.myth-playlist .myth-item-text{font-weight:var(--_playlist-font-weight);font-size:var(--_playlist-font-size);line-height:150%}.myth-playlist .myth-item-text.size-small{font-size:var(--_playlist-font-size-small)}.myth-playlist__items{padding:0;position:relative}.myth-playlist__item{position:relative;border-bottom:1px solid var(--_separator-color)}.myth-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)}}.myth-playlist__item.is-playing:before{background-color:var(--pulse-bg-start);animation:colorPulse 3.2s ease infinite alternate-reverse;opacity:.3}.myth-playlist__item:last-child{border-bottom:0}.myth-playlist__item-button{display:flex;padding:0.5rem;position:relative;align-items:center}.myth-playlist__item-button:focus-visible{outline:light-dark(oklch(48.8% 0.243 264.376deg), oklch(88.2% 0.059 254.128deg)) solid 2px;outline-offset:-4px}.myth-playlist__item-group,.myth-playlist__item-block{margin-left:1rem}.myth-playlist__item-group:first-child,.myth-playlist__item-block:first-child{margin-left:0}.myth-playlist__item-group.is-last-right,.myth-playlist__item-block.is-last-right{margin-left:auto;padding-left:0.5rem}.myth-playlist__item-group{display:flex;align-items:center}.myth-playlist__item-image{width:var(--_playlist-item-image-size);height:var(--_playlist-item-image-size);position:relative;overflow:hidden;flex-shrink:0}.myth-playlist__item-image img{height:100%;position:absolute;top:0;left:50%;transform:translateX(-50%)}.myth-playlist__item-playing-icon{width:1rem;height:1rem;display:flex;align-items:center}.myth-playlist__item-playing-icon-inner{width:100%;aspect-ratio:1/1}.timeline{--timeline--background: var(--_accent-200);--timeline--completed-background: var(--_accent-800);--timeline--font-size: 0.75rem;--timeline--numbers-separation: 0.125rem;--timeline--chapter-limit-color: oklch(14.5% 0 0deg)}.timeline .timeline__chapter-limit--played{--timeline--chapter-limit-color: oklch(98.5% 0 0deg)}.ambient-dark .timeline{--timeline--background: var(--_accent-800);--timeline--chapter-limit-color: oklch(98.5% 0 0deg);--timeline--completed-background: var(--_accent-200)}.ambient-dark .timeline .timeline__chapter-limit--played{--timeline--chapter-limit-color: oklch(14.5% 0 0deg)}@container player (width >= 768px){.timeline{--timeline--font-size: 0.875rem;--timeline--numbers-separation: 0.25rem}}@container player (width >= 1024px){.timeline{--timeline--font-size: 1rem;--timeline--numbers-separation: 0.5rem}}mythical-player-timeline{display:block}.timeline{position:relative;padding:0 0.5rem}.timeline__track{height:0.5rem;width:100%;background-color:var(--timeline--background);cursor:pointer}.timeline__track:focus-visible{outline:light-dark(oklch(48.8% 0.243 264.376deg), oklch(88.2% 0.059 254.128deg)) solid 2px;outline-offset:2px}.timeline__completed{height:100%;background-color:var(--timeline--completed-background)}.timeline__numbers{display:flex;justify-content:space-between;padding-top:var(--timeline--numbers-separation);font-size:var(--timeline--font-size)}.timeline__tooltip{position:absolute;top:0;transform:translate(-50%, -100%);left:var(--timeline-tooltip-position);padding-bottom:0.5rem;z-index:3}.timeline__tooltip-inner{background-color:oklch(100% 0 0deg);color:oklch(37.1% 0 0deg);padding:0.25rem;position:relative;border-width:1px 1px 0 1px;border-color:oklch(.922 0 0);border-style:solid;max-width:8rem;display:flex;flex-direction:column;align-items:center}.timeline__tooltip-inner:after{content:"";width:0;height:0;border-style:solid;border-width:0 4px 6.9px 4px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) oklch(100% 0 0deg) rgba(0,0,0,0);position:absolute;top:100%;left:50%;transform:translateX(-50%) rotate(180deg)}.timeline__tooltip-time{font-size:1rem}.timeline__tooltip-chapter-title{font-size:0.75rem;margin-bottom:0.25rem}.timeline__chapter-limit{width:1px;height:0.5rem;background-color:var(--timeline--chapter-limit-color);position:absolute;top:0;left:var(--timeline--chapter-limit-position)}.myth-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){.myth-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}}.myth-track-info__inner{display:flex;flex-direction:var(--track-info--flex-direction);height:var(--track-info--height)}.myth-track-info__inner .myth-item-text{font-size:1rem;line-height:150%}.myth-track-info__inner .myth-item-text.size-small{font-size:0.75rem}.myth-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)}.myth-track-info__image>*{width:100%}.myth-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}.mythical-player{container-name:player;container-type:inline-size;height:var(--_main-height, 32rem);background-color:var(--_background-color);position:relative}.mythical-player::after,.mythical-player::before{content:"";height:100%;width:100%;position:absolute;left:0;top:0}.mythical-player.has-gradient::after{opacity:.65;background-color:var(--_background-color)}.mythical-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%)}.mythical-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){.mythical-player__inner{--player--flex-direction: column;--_secondary-block-width: unset;--_secondary-block-min-width: unset}}@container player (width >= 768px){.mythical-player__inner{--player--flex-direction: row;--_secondary-block-width: 25%;--_secondary-block-min-width: 20rem}}.mythical-player__inner{display:flex;flex-direction:column;height:100%;color:var(--_text-color);position:relative;z-index:2}.mythical-player__body{display:flex;flex-direction:var(--player--flex-direction);flex:1 0 0;overflow:hidden}.mythical-player__playlist{overflow:hidden;padding:0 0 0 0.5rem;display:flex;flex:1 0 0}.mythical-player__track-info{width:var(--_secondary-block-width);min-width:var(--_secondary-block-min-width);padding:0.5rem}.mythical-player__controls{display:flex;justify-content:center;margin-top:-1rem}.mythical-player__controls,.mythical-player__timeline{position:relative}.mythical-player__timeline{padding:0 0.5rem}.myth-controls{--_controls-color: light-dark( var(--_accent-950), var(--_accent-100) );--_controls-size: 3rem}@container player (width >= 768px){.myth-controls{--_controls-size: 3.5rem}}@container player (width >= 1024px){.myth-controls{--_controls-size: 4rem}}.myth-controls,.myth-controls__items{width:auto}.myth-controls__items{display:flex}.myth-controls__button{background:rgba(0,0,0,0);border:0;color:var(--_controls-color)}.myth-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}.myth-controls__button.is-disabled{opacity:.4}.myth-controls__icon{width:var(--_controls-size);height:var(--_controls-size)}.myth-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}.myth-playlist .is-playing{--_playlist-font-weight: 600;--_playlist-item-background-color: var(--_accent-200)}.ambient-dark .myth-playlist .is-playing{--_playlist-item-background-color: var(--_accent-700)}@container player (width >= 1024px){.myth-playlist{--_playlist-font-size: 1rem;--_playlist-font-size-small: 0.75rem;--_playlist-item-image-size: 4rem}}.myth-playlist .myth-item-text{font-weight:var(--_playlist-font-weight);font-size:var(--_playlist-font-size);line-height:150%}.myth-playlist .myth-item-text.size-small{font-size:var(--_playlist-font-size-small)}.myth-playlist__items{padding:0;position:relative}.myth-playlist__item{position:relative;border-bottom:1px solid var(--_separator-color)}.myth-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)}}.myth-playlist__item.is-playing:before{background-color:var(--pulse-bg-start);animation:colorPulse 3.2s ease infinite alternate-reverse;opacity:.3}.myth-playlist__item:last-child{border-bottom:0}.myth-playlist__item-button{display:flex;padding:0.5rem;position:relative;align-items:center}.myth-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}.myth-playlist__item-group,.myth-playlist__item-block{margin-left:1rem}.myth-playlist__item-group:first-child,.myth-playlist__item-block:first-child{margin-left:0}.myth-playlist__item-group.is-last-right,.myth-playlist__item-block.is-last-right{margin-left:auto;padding-left:0.5rem}.myth-playlist__item-image{width:var(--_playlist-item-image-size);height:var(--_playlist-item-image-size);flex-shrink:0}.myth-playlist__item-group{display:flex;align-items:center}.myth-playlist__item-playing-icon{width:1rem;height:1rem;display:flex;align-items:center}.myth-playlist__item-playing-icon-inner{width:100%;aspect-ratio:1/1}.myth-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){.myth-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}}.myth-track-info__inner{display:flex;flex-direction:var(--track-info--flex-direction);height:var(--track-info--height)}.myth-track-info__inner .myth-item-text{font-size:1rem;line-height:150%}.myth-track-info__inner .myth-item-text.size-small{font-size:0.75rem}.myth-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)}.myth-track-info__image>*{width:100%}.myth-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.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"main": "player.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -14,14 +14,14 @@
|
|
|
14
14
|
"bugs": {
|
|
15
15
|
"url": "https://gitlab.com/arr2019/web-components/issues"
|
|
16
16
|
},
|
|
17
|
-
"homepage": "https://gitlab.com/arr2019/web-components/pkg/player#readme",
|
|
17
|
+
"homepage": "https://gitlab.com/arr2019/web-components/pkg/web-components/player#readme",
|
|
18
18
|
"repository": {
|
|
19
19
|
"type": "git",
|
|
20
20
|
"url": "git+https://gitlab.com/arr2019/web-components.git",
|
|
21
|
-
"folder": "pkg/player"
|
|
21
|
+
"folder": "pkg/web-components/player"
|
|
22
22
|
},
|
|
23
23
|
"publishConfig": {
|
|
24
|
-
"registry": "https://registry.npmjs.
|
|
24
|
+
"registry": "https://registry.npmjs.com/"
|
|
25
25
|
},
|
|
26
26
|
"author": "Antonio Rodríguez",
|
|
27
27
|
"license": "Apache-2.0",
|
|
@@ -34,11 +34,14 @@
|
|
|
34
34
|
"@outbook/webcomponents-scrollable": ">=1.0.0",
|
|
35
35
|
"@outbook/webcomponents-type-icon": ">=1.1.2",
|
|
36
36
|
"@outbook/webcomponents-badge-file-extension": ">=1.2.0",
|
|
37
|
+
"@outbook/webcomponents-player-artwork": ">=1.0.0",
|
|
37
38
|
"@outbook/icons": ">=1.3.0"
|
|
38
39
|
},
|
|
39
40
|
"devDependencies": {
|
|
40
41
|
"@outbook/colorful": ">=1.1.2",
|
|
41
|
-
"@outbook/design-decisions": ">=1.1.5"
|
|
42
|
+
"@outbook/design-decisions": ">=1.1.5",
|
|
43
|
+
"@outbook/webcomponents-player-artwork": ">=1.0.0",
|
|
44
|
+
"@outbook/webcomponents-player-timeline": ">=1.0.0"
|
|
42
45
|
},
|
|
43
46
|
"peerDependencies": {
|
|
44
47
|
"sass": "^1.97.2",
|
package/player.js
CHANGED
|
@@ -11,8 +11,7 @@ import { Scrollable } from '@outbook/webcomponents-scrollable';
|
|
|
11
11
|
import { Playlist as ComponentPlaylist } from './_lib/playlist/index.js';
|
|
12
12
|
import { TrackInfo } from './_lib/track-info/index.js';
|
|
13
13
|
import { Controls } from './_lib/controls/index.js';
|
|
14
|
-
import {
|
|
15
|
-
import { readable as formatTime } from 'mystic-format-time';
|
|
14
|
+
import { PlayerTimeline } from '@outbook/webcomponents-player-timeline';
|
|
16
15
|
import { loadLiterals } from './_i18n/i18n.js';
|
|
17
16
|
import _literals from './_i18n/en.json' with { type: 'json' };
|
|
18
17
|
import { useLangObserver } from '@outbook/hooks';
|
|
@@ -22,7 +21,6 @@ function ComponentPlayer(element) {
|
|
|
22
21
|
const mediaId = 'mythical-media-element';
|
|
23
22
|
const listId = 'mythical-list';
|
|
24
23
|
const playlistScrollId = 'mythical-playlist-scroll';
|
|
25
|
-
const timelineUniqueId = 'mythical-timeline';
|
|
26
24
|
|
|
27
25
|
function getMediaElement() {
|
|
28
26
|
const el = element.shadowRoot.getElementById(mediaId);
|
|
@@ -37,12 +35,13 @@ function ComponentPlayer(element) {
|
|
|
37
35
|
const [indexSelected, setIndexSelected] = useState(null);
|
|
38
36
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
39
37
|
const [totalTime, setTotalTime] = useState(0);
|
|
38
|
+
const [currentTime, setCurrentTime] = useState(0); // Added state
|
|
40
39
|
const [prominentColors, setProminentColors] = useState('');
|
|
41
40
|
const [hasProminentColors, setHasProminentColors] = useState(false);
|
|
42
41
|
const [coverUrl, setCoverUrl] = useState(null);
|
|
43
42
|
|
|
44
43
|
useEffect(() => {
|
|
45
|
-
let isActive = true;
|
|
44
|
+
let isActive = true;
|
|
46
45
|
|
|
47
46
|
if (coverUrl) {
|
|
48
47
|
setHasProminentColors(true);
|
|
@@ -144,6 +143,7 @@ function ComponentPlayer(element) {
|
|
|
144
143
|
}
|
|
145
144
|
|
|
146
145
|
setTotalTime(0);
|
|
146
|
+
setCurrentTime(0); // Set zero on stop
|
|
147
147
|
setHasProminentColors(false);
|
|
148
148
|
|
|
149
149
|
if (navigator.mediaSession) {
|
|
@@ -194,6 +194,7 @@ function ComponentPlayer(element) {
|
|
|
194
194
|
return;
|
|
195
195
|
}
|
|
196
196
|
mediaElement.currentTime = 0;
|
|
197
|
+
setCurrentTime(0); // Set zero initial time
|
|
197
198
|
|
|
198
199
|
mediaElement
|
|
199
200
|
.play()
|
|
@@ -219,20 +220,16 @@ function ComponentPlayer(element) {
|
|
|
219
220
|
|
|
220
221
|
function handleTimeUpdate(ev) {
|
|
221
222
|
const media = ev.currentTarget;
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
const bar = element.shadowRoot.getElementById(`bar-${timelineUniqueId}`);
|
|
226
|
-
const txt = element.shadowRoot.getElementById(`txt-${timelineUniqueId}`);
|
|
227
|
-
|
|
228
|
-
if (bar && duration > 0) {
|
|
229
|
-
const percent = (currentSecs / duration) * 100;
|
|
230
|
-
bar.style.width = `${percent}%`;
|
|
231
|
-
}
|
|
223
|
+
setCurrentTime(media.currentTime);
|
|
224
|
+
}
|
|
232
225
|
|
|
233
|
-
|
|
234
|
-
|
|
226
|
+
function handleReposition(ev) {
|
|
227
|
+
const newTime = ev.detail.currentTime;
|
|
228
|
+
const media = getMediaElement();
|
|
229
|
+
if (media) {
|
|
230
|
+
media.currentTime = newTime;
|
|
235
231
|
}
|
|
232
|
+
setCurrentTime(newTime);
|
|
236
233
|
}
|
|
237
234
|
|
|
238
235
|
const mainClasses = classMap({
|
|
@@ -271,12 +268,13 @@ function ComponentPlayer(element) {
|
|
|
271
268
|
})}
|
|
272
269
|
</div>
|
|
273
270
|
</div>
|
|
274
|
-
<div
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
271
|
+
<div
|
|
272
|
+
class="mythical-player__timeline"
|
|
273
|
+
@reposition="${handleReposition}"
|
|
274
|
+
>
|
|
275
|
+
${PlayerTimeline({
|
|
276
|
+
duration: totalTime,
|
|
277
|
+
currentTime
|
|
280
278
|
})}
|
|
281
279
|
</div>
|
|
282
280
|
<div class="mythical-player__controls">
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
3
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
|
-
import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';
|
|
5
|
-
import { audiotrack } from '@outbook/icons';
|
|
6
|
-
import { component } from 'haunted';
|
|
7
|
-
|
|
8
|
-
function CoverFallbackComponent(element) {
|
|
9
|
-
const { props, icon = 'audiotrack' } = element;
|
|
10
|
-
const { isInFileItem } = props;
|
|
11
|
-
const mainClasses = classMap({
|
|
12
|
-
'cover-fallback': true,
|
|
13
|
-
'cover-fallback--in-file-item': isInFileItem
|
|
14
|
-
});
|
|
15
|
-
return html`
|
|
16
|
-
<div class="${mainClasses}">
|
|
17
|
-
<div class="cover-fallback__icon">
|
|
18
|
-
${TypeIcon({
|
|
19
|
-
icon,
|
|
20
|
-
icons: { audiotrack },
|
|
21
|
-
extraClasses: 'cover-fallback__icon-inner'
|
|
22
|
-
})}
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
`;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
if (!customElements.get('mythical-cover-fallback')) {
|
|
29
|
-
customElements.define(
|
|
30
|
-
'mythical-cover-fallback',
|
|
31
|
-
component(CoverFallbackComponent, {
|
|
32
|
-
observedAttributes: ['icon'],
|
|
33
|
-
useShadowDOM: false
|
|
34
|
-
})
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export function CoverFallback(props) {
|
|
39
|
-
const { extraClasses, icon = null } = props;
|
|
40
|
-
|
|
41
|
-
return html`
|
|
42
|
-
<mythical-cover-fallback
|
|
43
|
-
class="${ifDefined(extraClasses || undefined)}"
|
|
44
|
-
icon="${ifDefined(icon || undefined)}"
|
|
45
|
-
.props="${props}"
|
|
46
|
-
></mythical-cover-fallback>
|
|
47
|
-
`;
|
|
48
|
-
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
@use '@outbook/design-decisions/measures';
|
|
2
|
-
@use '../_lib/variables';
|
|
3
|
-
|
|
4
|
-
@mixin style {
|
|
5
|
-
mythical-cover-fallback {
|
|
6
|
-
display: block;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.cover-fallback {
|
|
10
|
-
--_cover-fallback-bg-color: light-dark(var(--_accent-200), var(--_accent-700));
|
|
11
|
-
--_cover-fallback-font-size: #{measures.$baseline * 4};
|
|
12
|
-
|
|
13
|
-
&.cover-fallback--in-file-item {
|
|
14
|
-
--_cover-fallback-font-size: #{measures.$baseline * 4};
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
@container player (width >= #{variables.$player-widht-m}) {
|
|
18
|
-
.cover-fallback {
|
|
19
|
-
--_cover-fallback-font-size: #{measures.$baseline * 20};
|
|
20
|
-
&.cover-fallback--in-file-item {
|
|
21
|
-
--_cover-fallback-font-size: #{measures.$baseline * 4};
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.cover-fallback {
|
|
27
|
-
width: inherit;
|
|
28
|
-
padding-top: 100%;
|
|
29
|
-
background-color: var(--_cover-fallback-bg-color);
|
|
30
|
-
display: flex;
|
|
31
|
-
align-items: center;
|
|
32
|
-
justify-content: center;
|
|
33
|
-
position: relative;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.cover-fallback__icon {
|
|
37
|
-
width: 80%;
|
|
38
|
-
height: 80%;
|
|
39
|
-
position: absolute;
|
|
40
|
-
top: 50%;
|
|
41
|
-
left: 50%;
|
|
42
|
-
transform: translate(-50%, -50%);
|
|
43
|
-
color: var(--_text-color);
|
|
44
|
-
display: flex;
|
|
45
|
-
justify-content: center;
|
|
46
|
-
align-items: center;
|
|
47
|
-
}
|
|
48
|
-
.cover-fallback__icon-inner {
|
|
49
|
-
width: 100%;
|
|
50
|
-
height: 100%;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
@use '@outbook/design-decisions/measures';
|
|
2
|
-
@use '@outbook/design-decisions/outline';
|
|
3
|
-
@use '../_lib/variables';
|
|
4
|
-
@use '@outbook/colorful/palettes-oklch' as colors;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
@mixin style() {
|
|
8
|
-
|
|
9
|
-
.timeline {
|
|
10
|
-
--timeline--background: var(--_accent-200);
|
|
11
|
-
--timeline--completed-background: var(--_accent-800);
|
|
12
|
-
--timeline--font-size: #{measures.$baseline * 1.5};
|
|
13
|
-
--timeline--numbers-separation: #{measures.$baseline * 0.25};
|
|
14
|
-
--timeline--chapter-limit-color: #{colors.$neutral_950};
|
|
15
|
-
.timeline__chapter-limit--played {
|
|
16
|
-
--timeline--chapter-limit-color: #{colors.$neutral_50};
|
|
17
|
-
}
|
|
18
|
-
.ambient-dark & {
|
|
19
|
-
--timeline--background: var(--_accent-800);
|
|
20
|
-
--timeline--chapter-limit-color: #{colors.$neutral_50};
|
|
21
|
-
--timeline--completed-background: var(--_accent-200);
|
|
22
|
-
.timeline__chapter-limit--played {
|
|
23
|
-
--timeline--chapter-limit-color: #{colors.$neutral_950};
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
@container player (width >= #{variables.$player-widht-m}) {
|
|
28
|
-
.timeline {
|
|
29
|
-
--timeline--font-size: #{measures.$baseline * 1.75};
|
|
30
|
-
--timeline--numbers-separation: #{measures.$baseline * 0.5};
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@container player (width >= #{variables.$player-widht-l}) {
|
|
35
|
-
.timeline {
|
|
36
|
-
--timeline--font-size: #{measures.$baseline * 2};
|
|
37
|
-
--timeline--numbers-separation: #{measures.$baseline};
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
mythical-player-timeline {
|
|
42
|
-
display: block;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.timeline {
|
|
46
|
-
position: relative;
|
|
47
|
-
padding: 0 #{measures.$baseline};
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.timeline__track {
|
|
51
|
-
height: #{measures.$baseline};
|
|
52
|
-
width: 100%;
|
|
53
|
-
background-color: var(--timeline--background);
|
|
54
|
-
cursor: pointer;
|
|
55
|
-
&:focus-visible {
|
|
56
|
-
@include outline.outside();
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.timeline__completed {
|
|
62
|
-
height: 100%;
|
|
63
|
-
background-color: var(--timeline--completed-background);
|
|
64
|
-
//transition: width 0.35s;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.timeline__numbers {
|
|
68
|
-
display: flex;
|
|
69
|
-
justify-content: space-between;
|
|
70
|
-
padding-top: var(--timeline--numbers-separation);
|
|
71
|
-
font-size: var(--timeline--font-size);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.timeline__tooltip {
|
|
75
|
-
position: absolute;
|
|
76
|
-
top: 0;
|
|
77
|
-
transform: translate(-50%, -100%);
|
|
78
|
-
left: var(--timeline-tooltip-position);
|
|
79
|
-
padding-bottom: #{measures.$baseline};
|
|
80
|
-
z-index: 3;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.timeline__tooltip-inner {
|
|
84
|
-
background-color: #{colors.$white};
|
|
85
|
-
color: #{colors.$neutral_700};
|
|
86
|
-
padding: #{measures.$baseline * 0.5};
|
|
87
|
-
position: relative;
|
|
88
|
-
border-width: 1px 1px 0 1px;
|
|
89
|
-
border-color: colors.$neutral_200;
|
|
90
|
-
border-style: solid;
|
|
91
|
-
max-width: #{measures.$baseline * 16};
|
|
92
|
-
display: flex;
|
|
93
|
-
flex-direction: column;
|
|
94
|
-
align-items: center;
|
|
95
|
-
&:after {
|
|
96
|
-
content: "";
|
|
97
|
-
width: 0;
|
|
98
|
-
height: 0;
|
|
99
|
-
border-style: solid;
|
|
100
|
-
border-width: 0 4px 6.9px 4px;
|
|
101
|
-
border-color: transparent transparent #{colors.$white} transparent;
|
|
102
|
-
position: absolute;
|
|
103
|
-
top: 100%;
|
|
104
|
-
left: 50%;
|
|
105
|
-
transform: translateX(-50%) rotate(180deg);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.timeline__tooltip-time {
|
|
110
|
-
font-size: #{measures.$baseline * 2};
|
|
111
|
-
}
|
|
112
|
-
.timeline__tooltip-chapter-title {
|
|
113
|
-
font-size: #{measures.$baseline * 1.5};
|
|
114
|
-
margin-bottom: #{measures.$baseline * 0.5};
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.timeline__chapter-limit {
|
|
118
|
-
width: 1px;
|
|
119
|
-
height: #{measures.$baseline};
|
|
120
|
-
background-color: var(--timeline--chapter-limit-color);
|
|
121
|
-
position: absolute;
|
|
122
|
-
top: 0;
|
|
123
|
-
left: var(--timeline--chapter-limit-position);
|
|
124
|
-
}
|
|
125
|
-
}
|