@outbook/webcomponents-player 1.4.5 → 1.4.7

package/README.md

@@ -13,8 +13,8 @@ npm install @outbook/webcomponents-player
 ### As a Lit Element
 
 ```javascript
-import {html} from 'lit';
-import {Player} from '@outbook/webcomponents-player';
+import { html } from 'lit';
+import { Player } from '@outbook/webcomponents-player';
 
 const myPlaylist = [
   {
@@ -23,7 +23,7 @@ const myPlaylist = [
     artist: 'Artist Name 1',
     album: 'Album Name 1',
     cover: {
-      name: 'cover1.jpg', // or a URL
+      name: 'cover1.jpg' // or a URL
       // Other cover properties if available
     }
   },
@@ -33,7 +33,7 @@ const myPlaylist = [
     artist: 'Artist Name 2',
     album: 'Album Name 2',
     cover: {
-      name: 'cover2.png', // or a URL
+      name: 'cover2.png' // or a URL
       // Other cover properties if available
     }
   }
@@ -42,13 +42,13 @@ const myPlaylist = [
 function render() {
   return html`
     ${Player({
-    playlist: myPlaylist,
-    lang: 'en',
-    showFileExtension: true,
-    showArtwork: true,
-    showTrackNumber: true,
-    playlistAlign: 'right'
-  })}
+      playlist: myPlaylist,
+      lang: 'en',
+      showFileExtension: true,
+      showArtwork: true,
+      showTrackNumber: true,
+      playlistAlign: 'right'
+    })}
   `;
 }
 ```
@@ -99,15 +99,15 @@ This is the underlying web component. It can be used directly in HTML or in any
 
 ### Properties
 
-| Attribute | Property | Type | Default | Description |
-|---|---|---|---|---|
-| `lang` | `lang` | `String` | `'en'` | The language to use for localized strings. |
-| `playlist` | `playlist` | `Array` | `[]` | An array of track objects, each with `file`, `title`, `artist`, `album`, and `cover` properties. |
-| `extraClasses` | `extraClasses` | `String` | `undefined` | Classes to add to the host element. |
-| `show-file-extension` | `showFileExtension` | `Boolean` | `true` | Whether to display file extensions in the playlist. |
-| `show-artwork` | `showArtwork` | `Boolean` | `true` | Whether to display artwork in the playlist. |
-| `show-track-number` | `showTrackNumber` | `Boolean` | `true` | Whether to display track numbers in the playlist. |
-| `playlist-align` | `playlistAlign` | `String` | `'right'` | Aligns the playlist to 'left' or 'right' of the track info. |
+| Attribute             | Property            | Type      | Default     | Description                                                                                      |
+| --------------------- | ------------------- | --------- | ----------- | ------------------------------------------------------------------------------------------------ |
+| `lang`                | `lang`              | `String`  | `'en'`      | The language to use for localized strings.                                                       |
+| `playlist`            | `playlist`          | `Array`   | `[]`        | An array of track objects, each with `file`, `title`, `artist`, `album`, and `cover` properties. |
+| `extraClasses`        | `extraClasses`      | `String`  | `undefined` | Classes to add to the host element.                                                              |
+| `show-file-extension` | `showFileExtension` | `Boolean` | `true`      | Whether to display file extensions in the playlist.                                              |
+| `show-artwork`        | `showArtwork`       | `Boolean` | `true`      | Whether to display artwork in the playlist.                                                      |
+| `show-track-number`   | `showTrackNumber`   | `Boolean` | `true`      | Whether to display track numbers in the playlist.                                                |
+| `playlist-align`      | `playlistAlign`     | `String`  | `'right'`   | Aligns the playlist to 'left' or 'right' of the track info.                                      |
 
 ### Styling
 
@@ -117,21 +117,21 @@ This component uses Shadow DOM, and its styles are self-contained. The component
 
 Should not be used with css `light-dark` function.
 
-| Custom Property                                       | Description                                   |
-|-------------------------------------------------------|-----------------------------------------------|
-| `--outbook-player--color-accent-0`                    | Accent color 0.                               |
-| `--outbook-player--color-accent-50`                   | Accent color 50.                              |
-| `--outbook-player--color-accent-100`                  | Accent color 100.                             |
-| `--outbook-player--color-accent-200`                  | Accent color 200.                             |
-| `--outbook-player--color-accent-300`                  | Accent color 300.                             |
-| `--outbook-player--color-accent-400`                  | Accent color 400.                             |
-| `--outbook-player--color-accent-500`                  | Accent color 500.                             |
-| `--outbook-player--color-accent-600`                  | Accent color 600.                             |
-| `--outbook-player--color-accent-700`                  | Accent color 700.                             |
-| `--outbook-player--color-accent-800`                  | Accent color 800.                             |
-| `--outbook-player--color-accent-900`                  | Accent color 900.                             |
-| `--outbook-player--color-accent-950`                  | Accent color 950.                             |
-| `--outbook-player--color-accent-1000`                 | Accent color 1000.                            |
+| Custom Property                       | Description        |
+| ------------------------------------- | ------------------ |
+| `--outbook-player--color-accent-0`    | Accent color 0.    |
+| `--outbook-player--color-accent-50`   | Accent color 50.   |
+| `--outbook-player--color-accent-100`  | Accent color 100.  |
+| `--outbook-player--color-accent-200`  | Accent color 200.  |
+| `--outbook-player--color-accent-300`  | Accent color 300.  |
+| `--outbook-player--color-accent-400`  | Accent color 400.  |
+| `--outbook-player--color-accent-500`  | Accent color 500.  |
+| `--outbook-player--color-accent-600`  | Accent color 600.  |
+| `--outbook-player--color-accent-700`  | Accent color 700.  |
+| `--outbook-player--color-accent-800`  | Accent color 800.  |
+| `--outbook-player--color-accent-900`  | Accent color 900.  |
+| `--outbook-player--color-accent-950`  | Accent color 950.  |
+| `--outbook-player--color-accent-1000` | Accent color 1000. |
 
 ## License
 

package/_i18n/af.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Geen snit speel tans nie"
   }
-}
+}

package/_i18n/ar.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "لا يوجد مسار قيد التشغيل"
   }
-}
+}

package/_i18n/bg.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Няма пусната песен"
   }
-}
+}

package/_i18n/bn.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "কোনো ট্র্যাক বাজছে না"
   }
-}
+}

package/_i18n/ca.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Cap pista en reproducció"
   }
-}
+}

package/_i18n/cs.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Žádná skladba se nepřehrává"
   }
-}
+}

package/_i18n/da.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Intet nummer afspilles"
   }
-}
+}

package/_i18n/de.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Kein Titel wird abgespielt"
   }
-}
+}

package/_i18n/el.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Δεν υπάρχει κομμάτι σε αναπαραγωγή"
   }
-}
+}

package/_i18n/es.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Ninguna pista en reproducción"
   }
-}
+}

package/_i18n/eu.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Ez dago pistarik erreproduzitzen"
   }
-}
+}

package/_i18n/fa.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "آهنگی در حال پخش نیست"
   }
-}
+}

package/_i18n/fi.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Ei toistettavaa kappaletta"
   }
-}
+}

package/_i18n/fr.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Aucune piste en cours de lecture"
   }
-}
+}

package/_i18n/gl.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Ningunha pista en reprodución"
   }
-}
+}

package/_i18n/ha.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Babu waƙa mai kunnawa"
   }
-}
+}

package/_i18n/hi.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "कोई ट्रैक नहीं चल रहा है"
   }
-}
+}

package/_i18n/hu.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Nincs lejátszott szám"
   }
-}
+}

package/_i18n/id.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Tidak ada lagu yang diputar"
   }
-}
+}

package/_i18n/it.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Nessun brano in riproduzione"
   }
-}
+}

package/_i18n/ja.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "再生中のトラックはありません"
   }
-}
+}

package/_i18n/km.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "មិនមានបទចាក់"
   }
-}
+}

package/_i18n/ko.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "재생 중인 트랙 없음"
   }
-}
+}

package/_i18n/lo.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "ບໍ່ມີເພງກຳລັງຫຼິ້ນ"
   }
-}
+}

package/_i18n/ms.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Tiada lagu dimainkan"
   }
-}
+}

package/_i18n/no.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Ingen spor spilles av"
   }
-}
+}

package/_i18n/pl.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Brak odtwarzanego utworu"
   }
-}
+}

package/_i18n/pt.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Nenhuma faixa em reprodução"
   }
-}
+}

package/_i18n/ro.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Nicio piesă în redare"
   }
-}
+}

package/_i18n/ru.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Нет воспроизводимого трека"
   }
-}
+}

package/_i18n/sk.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Neprehráva sa žiadna skladba"
   }
-}
+}

package/_i18n/sv.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Inget spår spelas"
   }
-}
+}

package/_i18n/sw.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Hakuna wimbo unaocheza"
   }
-}
+}

package/_i18n/th.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "ไม่มีเพลงที่กำลังเล่นอยู่"
   }
-}
+}

package/_i18n/tl.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Walang tumutugtog na track"
   }
-}
+}

package/_i18n/tr.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Çalan parça yok"
   }
-}
+}

package/_i18n/uk.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Немає відтворюваного треку"
   }
-}
+}

package/_i18n/vi.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Không có bài hát nào đang phát"
   }
-}
+}

package/_i18n/zh.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "没有正在播放的曲目"
   }
-}
+}

package/_i18n/zu.json

@@ -9,4 +9,4 @@
   "trackInfo": {
     "noPlaying": "Ayikho ingoma edlalayo"
   }
-}
+}

package/_lib/controls/index.js

@@ -8,7 +8,7 @@ import {
   stop
 } from '@outbook/icons';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { isEventClick, isKeyEnterOrKeySpace } from 'a11y-key-conjurer';
+import { isEventClick, isKeyEnterOrKeySpace } from '@outbook/a11y';
 import { classMap } from 'lit/directives/class-map.js';
 
 export function Controls({ props, handleAudio, literals = {} }) {

package/_lib/playlist/index.js

@@ -1,6 +1,6 @@
 import { virtual } from 'haunted';
 import { html, nothing } from 'lit';
-import { isKeyEnterOrKeySpace, isEventClick } from 'a11y-key-conjurer';
+import { isKeyEnterOrKeySpace, isEventClick } from '@outbook/a11y';
 import { classMap } from 'lit/directives/class-map.js';
 import { TrackText } from '../track-text/index.js';
 import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';

package/_lib/playlist/modules/item-duration.js

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import {
   readable as formatTime,
   iso as formatTimeDuration
-} from 'mystic-format-time';
+} from '@outbook/format-time';
 
 export function ItemDuration({ duration }) {
   return html`

package/_style/player.style.js

@@ -1,4 +1,4 @@
 /* eslint-disable */
 import { css } from 'lit';
 
-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;width:100%;--_main-height: var(--outbook-player--height, 32rem);--_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-player-artwork--background-color: light-dark( var(--_accent-200), var(--_accent-700) );--outbook-player-artwork--text-color: light-dark( var(--_accent-900), var(--_accent-50) );--outbook-player-artwork--crystal-background: light-dark( var(--_accent-100), var(--_accent-900) );--outbook-player-artwork--crystal-border: light-dark( var(--_accent-200), var(--_accent-600) );--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);background-color:var(--_background-color);padding:0.25rem;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}`;
+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;width:100%;--_main-height: var(--outbook-player--height, 32rem);--_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-player-artwork--background-color: light-dark( var(--_accent-200), var(--_accent-700) );--outbook-player-artwork--text-color: light-dark( var(--_accent-900), var(--_accent-50) );--outbook-player-artwork--crystal-background: light-dark( var(--_accent-100), var(--_accent-900) );--outbook-player-artwork--crystal-border: light-dark( var(--_accent-200), var(--_accent-600) );--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);background-color:var(--_background-color);padding:0.25rem;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

@@ -1,6 +1,6 @@
 {
   "name": "@outbook/webcomponents-player",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "main": "player.js",
   "type": "module",
   "private": false,
@@ -21,28 +21,28 @@
     "folder": "pkg/web-components/player"
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.com/"
+    "registry": "https://registry.npmjs.com/",
+    "access": "public"
   },
   "author": "Antonio Rodríguez",
   "license": "Apache-2.0",
   "description": "Web component media player (formerly mythical-player)",
   "dependencies": {
-    "a11y-key-conjurer": "1.1.2",
+    "@outbook/a11y": ">=1.2.1",
     "color.js": "1.2.0",
     "custom-event-conjurer": "1.0.0",
-    "mystic-format-time": "1.0.2",
+    "@outbook/format-time": "1.0.4",
     "@outbook/webcomponents-scrollable": ">=1.0.2",
-    "@outbook/webcomponents-type-icon": ">=1.1.3",
+    "@outbook/webcomponents-type-icon": ">=1.1.4",
     "@outbook/webcomponents-badge-file-extension": ">=1.2.2",
-    "@outbook/webcomponents-player-artwork": ">=1.1.2",
+    "@outbook/webcomponents-player-artwork": ">=1.1.3",
     "@outbook/webcomponents-player-timeline": ">=1.0.2",
-    "@outbook/icons": ">=1.3.1"
+    "@outbook/icons": ">=1.3.1",
+    "@outbook/webcomponents-player-audio-decoy": ">=1.0.0"
   },
   "devDependencies": {
     "@outbook/colorful": ">=1.1.4",
-    "@outbook/design-decisions": ">=1.1.7",
-    "@outbook/webcomponents-player-artwork": ">=1.0.0",
-    "@outbook/webcomponents-player-timeline": ">=1.0.3"
+    "@outbook/design-decisions": ">=1.1.9"
   },
   "peerDependencies": {
     "lit": "^3.0.0",

package/player.js

@@ -16,6 +16,7 @@ import { loadLiterals } from './_i18n/i18n.js';
 import _literals from './_i18n/en.json';
 import { useLangObserver } from '@outbook/hooks';
 import { toBoolean } from './_lib/to-boolean.js';
+import { PlayerAudioDecoy } from '@outbook/webcomponents-player-audio-decoy';
 
 function ComponentPlayer(element) {
   const {
@@ -105,8 +106,16 @@ function ComponentPlayer(element) {
           previous: handleSessionPrevious
         }
       });
+      navigator.mediaSession.setActionHandler('nexttrack', () => {
+        handleSessionNext();
+      });
+      navigator.mediaSession.setActionHandler('previoustrack', () => {
+        handleSessionPrevious();
+      });
     } else if (navigator.mediaSession) {
       navigator.mediaSession.metadata = null;
+      navigator.mediaSession.setActionHandler('nexttrack', null);
+      navigator.mediaSession.setActionHandler('previoustrack', null);
     }
   }, [indexSelected]);
 
@@ -163,6 +172,7 @@ function ComponentPlayer(element) {
     setTotalTime(0);
     setCurrentTime(0); // Set zero on stop
     setHasProminentColors(false);
+    setIsPlaying(false);
 
     if (navigator.mediaSession) {
       navigator.mediaSession.metadata = null;
@@ -301,6 +311,7 @@ function ComponentPlayer(element) {
             </div>
           </div>
         </div>
+        ${isPlaying ? html`${PlayerAudioDecoy({ mode: 'auto' })}` : nothing}
         ${Number.isInteger(indexSelected)
           ? html`
               <audio