@outbook/webcomponents-player 1.3.0

package/_style/_modules/_timeline.scss

@@ -0,0 +1,125 @@
+@use '@outbook/design-decisions/measures';
+@use '@outbook/design-decisions/outline';
+@use '../_lib/variables';
+@use '@outbook/colorful/palettes-oklch' as colors;
+
+
+@mixin style() {
+
+  .timeline {
+    --timeline--background: var(--_accent-200);
+    --timeline--completed-background: var(--_accent-800);
+    --timeline--font-size: #{measures.$baseline * 1.5};
+    --timeline--numbers-separation: #{measures.$baseline * 0.25};
+    --timeline--chapter-limit-color: #{colors.$neutral_950};
+    .timeline__chapter-limit--played {
+      --timeline--chapter-limit-color: #{colors.$neutral_50};
+    }
+    .ambient-dark & {
+      --timeline--background: var(--_accent-800);
+      --timeline--chapter-limit-color: #{colors.$neutral_50};
+      --timeline--completed-background: var(--_accent-200);
+      .timeline__chapter-limit--played {
+        --timeline--chapter-limit-color: #{colors.$neutral_950};
+      }
+    }
+  }
+  @container player (width >= #{variables.$player-widht-m}) {
+    .timeline {
+      --timeline--font-size: #{measures.$baseline * 1.75};
+      --timeline--numbers-separation: #{measures.$baseline * 0.5};
+    }
+  }
+
+  @container player (width >= #{variables.$player-widht-l}) {
+    .timeline {
+      --timeline--font-size: #{measures.$baseline * 2};
+      --timeline--numbers-separation: #{measures.$baseline};
+    }
+  }
+
+  mythical-player-timeline {
+    display: block;
+  }
+
+  .timeline {
+    position: relative;
+    padding: 0 #{measures.$baseline};
+  }
+
+  .timeline__track {
+    height: #{measures.$baseline};
+    width: 100%;
+    background-color: var(--timeline--background);
+    cursor: pointer;
+    &:focus-visible {
+      @include outline.outside();
+    }
+
+  }
+
+  .timeline__completed {
+    height: 100%;
+    background-color: var(--timeline--completed-background);
+    //transition: width 0.35s;
+  }
+
+  .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: #{measures.$baseline};
+    z-index: 3;
+  }
+
+  .timeline__tooltip-inner {
+    background-color: #{colors.$white};
+    color: #{colors.$neutral_700};
+    padding: #{measures.$baseline * 0.5};
+    position: relative;
+    border-width: 1px 1px 0 1px;
+    border-color: colors.$neutral_200;
+    border-style: solid;
+    max-width: #{measures.$baseline * 16};
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &:after {
+      content: "";
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 0 4px 6.9px 4px;
+      border-color: transparent transparent #{colors.$white} transparent;
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%) rotate(180deg);
+    }
+  }
+
+  .timeline__tooltip-time {
+    font-size: #{measures.$baseline * 2};
+  }
+  .timeline__tooltip-chapter-title {
+    font-size: #{measures.$baseline * 1.5};
+    margin-bottom: #{measures.$baseline * 0.5};
+  }
+
+  .timeline__chapter-limit {
+    width: 1px;
+    height: #{measures.$baseline};
+    background-color: var(--timeline--chapter-limit-color);
+    position: absolute;
+    top: 0;
+    left: var(--timeline--chapter-limit-position);
+  }
+}

package/_style/_modules/_track-info.scss

@@ -0,0 +1,54 @@
+@use '@outbook/design-decisions/measures';
+@use '../_lib/variables';
+
+@mixin style() {
+  $height-xs: measures.$baseline * 8;
+
+  .myth-track-info {
+    --track-info--flex-direction: row;
+    --track-info--image-width: #{measures.$baseline * 8};
+    --track-info--image-separation-horizontal: #{measures.$baseline * 2};
+    --track-info--image-separation-vertical: 0;
+    --track-info--height: #{$height-xs};
+  }
+  @container player (width >= #{variables.$player-widht-m}) {
+    .myth-track-info {
+      --track-info--flex-direction: column;
+      --track-info--image-width: 100%;
+      --track-info--image-separation-horizontal: 0;
+      --track-info--image-separation-vertical: #{measures.$baseline * 2};
+      --track-info--height: auto;
+    }
+  }
+
+
+  .myth-track-info__inner {
+    display: flex;
+    flex-direction: var(--track-info--flex-direction);
+    height: var(--track-info--height);
+    .myth-item-text {
+      font-size: #{measures.$baseline * 2};
+      line-height: 150%;
+      &.size-small {
+        font-size: #{measures.$baseline * 1.5}
+      }
+    }
+  }
+
+  .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);
+    & > * {
+      width: 100%;
+    }
+  }
+
+  .myth-track-info__data {
+    display: flex;
+    align-items: center;
+  }
+}

package/_style/player.style.js

@@ -0,0 +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;--_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}`;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@outbook/webcomponents-player",
+  "version": "1.3.0",
+  "main": "player.js",
+  "type": "module",
+  "private": false,
+  "scripts": {},
+  "keywords": [
+    "web player",
+    "audio player",
+    "audio",
+    "playlist"
+  ],
+  "bugs": {
+    "url": "https://gitlab.com/arr2019/web-components/issues"
+  },
+  "homepage": "https://gitlab.com/arr2019/web-components/pkg/player#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/arr2019/web-components.git",
+    "folder": "pkg/player"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": "Antonio Rodríguez",
+  "license": "Apache-2.0",
+  "description": "Web component media player (formerly mythical-player)",
+  "dependencies": {
+    "a11y-key-conjurer": "1.1.2",
+    "color.js": "1.2.0",
+    "custom-event-conjurer": "1.0.0",
+    "mystic-format-time": "1.0.2",
+    "@outbook/webcomponents-scrollable": ">=1.0.0",
+    "@outbook/webcomponents-type-icon": ">=1.1.2",
+    "@outbook/webcomponents-badge-file-extension": ">=1.2.0",
+    "@outbook/icons": ">=1.3.0"
+  },
+  "devDependencies": {
+    "@outbook/colorful": ">=1.1.2",
+    "@outbook/design-decisions": ">=1.1.5"
+  },
+  "peerDependencies": {
+    "sass": "^1.97.2",
+    "lit": "^3.0.0",
+    "haunted": "^5.0.0 || ^6.0.0"
+  }
+}

package/player.js

@@ -0,0 +1,324 @@
+import { adoptStyles, html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { component, useEffect, useState } from 'haunted';
+import { customEventConjurer } from 'custom-event-conjurer';
+import styleComponent from './_style/player.style.js';
+import { setupMediaSession } from './_lib/setup-media-session.js';
+import { emptyBackground, getBackgroundColor } from './_lib/background.js';
+import { getCover } from './_lib/get-cover.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { Scrollable } from '@outbook/webcomponents-scrollable';
+import { Playlist as ComponentPlaylist } from './_lib/playlist/index.js';
+import { TrackInfo } from './_lib/track-info/index.js';
+import { Controls } from './_lib/controls/index.js';
+import { Timeline } from './_lib/timeline/index.js';
+import { readable as formatTime } from 'mystic-format-time';
+import { loadLiterals } from './_i18n/i18n.js';
+import _literals from './_i18n/en.json' with { type: 'json' };
+import { useLangObserver } from '@outbook/hooks';
+
+function ComponentPlayer(element) {
+  const { playlist = [], list } = element;
+  const mediaId = 'mythical-media-element';
+  const listId = 'mythical-list';
+  const playlistScrollId = 'mythical-playlist-scroll';
+  const timelineUniqueId = 'mythical-timeline';
+
+  function getMediaElement() {
+    const el = element.shadowRoot.getElementById(mediaId);
+    if (!el) {
+      console.warn('Media element not found yet');
+    }
+    return el;
+  }
+
+  const currentLang = useLangObserver(element);
+  const [literals, setLiterals] = useState(_literals);
+  const [indexSelected, setIndexSelected] = useState(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [totalTime, setTotalTime] = useState(0);
+  const [prominentColors, setProminentColors] = useState('');
+  const [hasProminentColors, setHasProminentColors] = useState(false);
+  const [coverUrl, setCoverUrl] = useState(null);
+
+  useEffect(() => {
+    let isActive = true; // 1. Flag to track if component is alive
+
+    if (coverUrl) {
+      setHasProminentColors(true);
+
+      getBackgroundColor(coverUrl)
+        .then(colorString => {
+          if (isActive) {
+            setProminentColors(colorString);
+          }
+        })
+        .catch(err => {
+          console.warn('Color extraction failed', err);
+          if (isActive) {
+            setHasProminentColors(false);
+          }
+        });
+    } else {
+      setHasProminentColors(false);
+      setProminentColors(emptyBackground);
+    }
+
+    return () => {
+      isActive = false;
+    };
+  }, [coverUrl]);
+
+  useEffect(() => {
+    if (element.shadowRoot) {
+      adoptStyles(element.shadowRoot, [styleComponent]);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (navigator.mediaSession && indexSelected !== null) {
+      setupMediaSession({
+        index: indexSelected,
+        playlist,
+        handleAudio: {
+          stop: handleAudio.stop,
+          play: handleAudio.play,
+          pause: handleSessionPause,
+          next: handleSessionNext,
+          previous: handleSessionPrevious
+        }
+      });
+    } else if (navigator.mediaSession) {
+      navigator.mediaSession.metadata = null;
+    }
+  }, [indexSelected]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    loadLiterals(currentLang).then(data => {
+      if (isMounted) {
+        setLiterals(data);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [currentLang]);
+
+  function handleSessionPrevious() {
+    handleAudio.setTrack({ index: indexSelected - 1, fromControls: true });
+  }
+
+  function handleSessionNext() {
+    handleAudio.setTrack({ index: indexSelected + 1, fromControls: true });
+  }
+
+  function handleSessionPause() {
+    getMediaElement().pause();
+    if (navigator.mediaSession) {
+      navigator.mediaSession.playbackState = 'paused';
+    }
+    setIsPlaying(false);
+  }
+
+  function handleSessionPlay() {
+    getMediaElement().play();
+    setIsPlaying(true);
+    if (navigator.mediaSession) {
+      navigator.mediaSession.playbackState = 'playing';
+    }
+  }
+
+  function handleSessionStop() {
+    if (navigator.mediaSession) {
+      navigator.mediaSession.playbackState = 'none';
+    }
+
+    const media = getMediaElement();
+
+    if (media) {
+      media.pause();
+      media.currentTime = 0;
+    }
+
+    setTotalTime(0);
+    setHasProminentColors(false);
+
+    if (navigator.mediaSession) {
+      navigator.mediaSession.metadata = null;
+    }
+
+    setIndexSelected(null);
+    setCoverUrl(null);
+  }
+
+  function handleScroll({ index }) {
+    customEventConjurer({
+      name: 'scrollToPlayingItem',
+      detail: {
+        selectedItem: element.shadowRoot
+          .getElementById(listId)
+          .querySelector(`[data-playlist-item="${index}"]`)
+      },
+      bubbles: true
+    });
+  }
+
+  const handleAudio = {
+    next: handleSessionNext,
+    previous: handleSessionPrevious,
+    setTrack({ index, fromControls = false }) {
+      setIndexSelected(index);
+      if (fromControls) {
+        handleScroll({ index });
+      }
+
+      if (playlist[index]?.cover?.name) {
+        setCoverUrl(getCover(playlist[index]?.cover));
+      } else {
+        setCoverUrl(null);
+      }
+      setTimeout(() => {
+        this.playInitial();
+      }, 100);
+    },
+    stop: handleSessionStop,
+    play: handleSessionPlay,
+    playInitial() {
+      const mediaElement = getMediaElement();
+      if (!mediaElement) {
+        console.warn('Audio element not ready yet, retrying...');
+        setTimeout(() => this.playInitial(), 50);
+        return;
+      }
+      mediaElement.currentTime = 0;
+
+      mediaElement
+        .play()
+        .then(function () {
+          setTotalTime(mediaElement.duration);
+          if (navigator.mediaSession) {
+            navigator.mediaSession.playbackState = 'playing';
+          }
+          setIsPlaying(true);
+        })
+        .catch(err => console.error('Autoplay blocked:', err));
+    },
+    pause: handleSessionPause
+  };
+
+  function handleAudioEnd() {
+    if (playlist.length - 1 === indexSelected) {
+      handleAudio.stop();
+    } else {
+      handleAudio.setTrack({ index: indexSelected + 1, fromControls: true });
+    }
+  }
+
+  function handleTimeUpdate(ev) {
+    const media = ev.currentTarget;
+    const currentSecs = media.currentTime;
+    const duration = media.duration || totalTime; // fallback to state totalTime
+
+    const bar = element.shadowRoot.getElementById(`bar-${timelineUniqueId}`);
+    const txt = element.shadowRoot.getElementById(`txt-${timelineUniqueId}`);
+
+    if (bar && duration > 0) {
+      const percent = (currentSecs / duration) * 100;
+      bar.style.width = `${percent}%`;
+    }
+
+    if (txt) {
+      txt.textContent = formatTime(currentSecs);
+    }
+  }
+
+  const mainClasses = classMap({
+    'mythical-player': true,
+    'root-container': true,
+    'has-gradient': hasProminentColors
+  });
+
+  return literals
+    ? html`
+        <div class="${mainClasses}" style="${prominentColors}">
+          <div class="mythical-player__inner">
+            <div class="mythical-player__body">
+              <div class="mythical-player__playlist">
+                ${Scrollable({
+                  extraClasses: 'scrollable--default',
+                  eventScrollToPlayingItem: true,
+                  id: playlistScrollId,
+                  content: function () {
+                    return ComponentPlaylist({
+                      playlist,
+                      list,
+                      indexSelected,
+                      isPlaying,
+                      handleAudio,
+                      listId
+                    });
+                  }
+                })}
+              </div>
+              <div class="mythical-player__track-info">
+                ${TrackInfo({
+                  indexSelected,
+                  track: playlist[indexSelected],
+                  literals: literals.trackInfo
+                })}
+              </div>
+            </div>
+            <div class="mythical-player__timeline">
+              ${Timeline({
+                totalTime,
+                currentTime: 0,
+                getMediaElement,
+                id: timelineUniqueId
+              })}
+            </div>
+            <div class="mythical-player__controls">
+              ${Controls({
+                props: { isPlaying, playlist, indexSelected },
+                handleAudio,
+                literals: literals.controls
+              })}
+            </div>
+          </div>
+        </div>
+        ${Number.isInteger(indexSelected)
+          ? html`
+              <audio
+                src="${playlist[indexSelected]?.file}"
+                id="${mediaId}"
+                @ended="${handleAudioEnd}"
+                @timeupdate="${handleTimeUpdate}"
+              ></audio>
+            `
+          : nothing}
+      `
+    : html`Loading...`;
+}
+
+if (!customElements.get('outbook-player')) {
+  customElements.define(
+    'outbook-player',
+    component(ComponentPlayer, {
+      observedAttributes: ['lang'],
+      useShadowDOM: true
+    })
+  );
+}
+
+export function Player(props) {
+  const { extraClasses, lang = 'en', playlist = [] } = props;
+  return html`
+    <outbook-player
+      class="${ifDefined(extraClasses || undefined)}"
+      lang="${lang}"
+      .playlist="${playlist}"
+    ></outbook-player>
+  `;
+}