@outbook/webcomponents-player 1.3.0

package/_lib/playlist/index.js

@@ -0,0 +1,105 @@
+import { virtual } from 'haunted';
+import { html, nothing } from 'lit';
+import { isKeyEnterOrKeySpace, isEventClick } from 'a11y-key-conjurer';
+import { classMap } from 'lit/directives/class-map.js';
+import { TrackText } from '../track-text/index.js';
+import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';
+import { play_arrow, pause } from '@outbook/icons';
+import { BadgeFileExtension } from '@outbook/webcomponents-badge-file-extension';
+import { ItemDuration } from './modules/item-duration.js';
+import { ShowCover } from './modules/show-cover.js';
+
+export const Playlist = virtual(
+  ({
+    playlist: _playlist,
+    list = {},
+    indexSelected,
+    isPlaying,
+    handleAudio,
+    listId
+  }) => {
+    const {
+      showCovers = true,
+      showTrackNumber = true,
+      showIconIsPlaying = true,
+      showFileExtension = true
+    } = list;
+    function handleButton(index) {
+      return ev => {
+        if (isEventClick(ev) || isKeyEnterOrKeySpace(ev)) {
+          handleAudio.setTrack({ index, fromControls: false });
+        }
+      };
+    }
+    return html`
+      <div class="myth-playlist" id="${listId}">
+        <ul class="myth-playlist__items">
+          ${_playlist.map((item, index) => {
+            const isPlayingItem = indexSelected === index;
+            const itemClasses = classMap({
+              'myth-playlist__item': true,
+              'is-playing': isPlayingItem
+            });
+            return html`
+              <li class="${itemClasses}" data-playlist-item="${index}">
+                <div
+                  class="myth-playlist__item-button"
+                  tabindex="0"
+                  role="button"
+                  @click="${handleButton(index)}"
+                  @keydown="${handleButton(index)}"
+                >
+                  ${showCovers ? ShowCover({ cover: item.cover }) : nothing}
+                  ${showIconIsPlaying && isPlayingItem
+                    ? html`
+                        <div
+                          class="myth-playlist__item-block myth-playlist__item-playing-icon"
+                        >
+                          ${TypeIcon({
+                            icon: isPlaying ? 'play_arrow' : 'pause',
+                            icons: { play_arrow, pause },
+                            extraClasses:
+                              'myth-playlist__item-playing-icon-inner'
+                          })}
+                        </div>
+                      `
+                    : nothing}
+                  ${showTrackNumber
+                    ? html`
+                        <div
+                          class="myth-playlist__item-block myth-item-text size-small"
+                        >
+                          ${item.trackNumber || index + 1}
+                        </div>
+                      `
+                    : nothing}
+                  <div class="myth-playlist__item-block">
+                    ${TrackText({
+                      title: item.title,
+                      artist: item.artist,
+                      album: item.album
+                    })}
+                  </div>
+                  ${item.duration || showFileExtension
+                    ? html`
+                        <div class="myth-playlist__item-group is-last-right">
+                          ${ItemDuration({ duration: item.duration })}
+                          ${showFileExtension
+                            ? html`
+                                <div class="myth-playlist__item-block">
+                                  ${BadgeFileExtension({ text: item.format })}
+                                </div>
+                              `
+                            : nothing}
+                        </div>
+                      `
+                    : nothing}
+                </div>
+              </li>
+            `;
+          })}
+        </ul>
+      </div>
+    `;
+  }
+);

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

@@ -0,0 +1,17 @@
+import { virtual } from 'haunted';
+import { html } from 'lit';
+import {
+  readable as formatTime,
+  iso as formatTimeDuration
+} from 'mystic-format-time';
+
+export const ItemDuration = virtual(({ duration }) => {
+  return html`
+    <time
+      class="myth-playlist__item-block myth-item-text size-small"
+      datetime="${formatTimeDuration(duration)}"
+    >
+      ${formatTime(duration)}
+    </time>
+  `;
+});

package/_lib/playlist/modules/show-cover.js

@@ -0,0 +1,14 @@
+import { virtual } from 'haunted';
+import { html } from 'lit';
+import { CoverFallback } from '../../cover-fallback/index.js';
+import { getCover } from '../../../_lib/get-cover.js';
+
+export const ShowCover = virtual(({ cover }) => {
+  return html`
+    <div class="myth-playlist__item-block myth-playlist__item-image">
+      ${cover
+        ? html`<img src="${getCover(cover)}" alt="" aria-hidden="true" />`
+        : CoverFallback({ isInFileItem: true })}
+    </div>
+  `;
+});

package/_lib/rgb-to-hex.js

@@ -0,0 +1,13 @@
+const componentToHex = channel => {
+  const hex = channel.toString(16);
+  return hex.length === 1 ? '0' + hex : hex;
+};
+
+export const rgbToHex = item => {
+  return (
+    '#' +
+    componentToHex(item.r) +
+    componentToHex(item.g) +
+    componentToHex(item.b)
+  ).toUpperCase();
+};

package/_lib/setup-media-session.js

@@ -0,0 +1,29 @@
+import { getCover } from './get-cover.js';
+
+export function setupMediaSession({ index, playlist, handleAudio }) {
+  const metadata = playlist[index];
+  const type = 'image/jpeg';
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: metadata.title,
+    artist: metadata.artist,
+    album: metadata.album,
+    artwork: ['512', '384', '256', '192', '128', '96'].map(size => {
+      return {
+        src: metadata.cover ? getCover(metadata.cover) : null,
+        sizes: `${size}x${size}`,
+        type
+      };
+    })
+  });
+  navigator.mediaSession.setActionHandler(
+    'nexttrack',
+    index < playlist.length - 1 ? handleAudio.next : null
+  );
+  navigator.mediaSession.setActionHandler(
+    'previoustrack',
+    index > 0 ? handleAudio.previous : null
+  );
+  navigator.mediaSession.setActionHandler('play', handleAudio.play);
+  navigator.mediaSession.setActionHandler('pause', handleAudio.pause);
+  navigator.mediaSession.setActionHandler('stop', handleAudio.stop);
+}

package/_lib/timeline/_lib/handle-timeline.js

@@ -0,0 +1,42 @@
+import {
+  isEventClick,
+  isKeyArrowLeft,
+  isKeyArrowRight
+} from 'a11y-key-conjurer';
+
+const SKIP_TIME = 10;
+
+function handleClick(ev, getMediaElement) {
+  const audioElement = getMediaElement();
+  const target = ev.currentTarget;
+  const rect = target.getBoundingClientRect();
+  const x = ev.clientX - rect.left;
+  const percent = (100 * x) / target.offsetWidth;
+  audioElement.currentTime = (audioElement.duration / 100) * percent;
+}
+
+function handleArrows({ multiplier }, getMediaElement) {
+  const audioElement = getMediaElement();
+  const newTime = audioElement.currentTime + SKIP_TIME * multiplier;
+  const duration = audioElement.duration;
+  audioElement.currentTime =
+    newTime > 0 ? (newTime < duration ? newTime : duration) : 0;
+}
+
+function handleArrowLeft(ev, getMediaElement) {
+  handleArrows({ ev, multiplier: -1 }, getMediaElement);
+}
+
+function handleArrowRight(ev, getMediaElement) {
+  handleArrows({ ev, multiplier: 1 }, getMediaElement);
+}
+
+export function handleTimeline(ev, getMediaElement) {
+  if (isEventClick(ev)) {
+    handleClick(ev, getMediaElement);
+  } else if (isKeyArrowLeft(ev)) {
+    handleArrowLeft(ev, getMediaElement);
+  } else if (isKeyArrowRight(ev)) {
+    handleArrowRight(ev, getMediaElement);
+  }
+}

package/_lib/timeline/index.js

@@ -0,0 +1,121 @@
+import { html, nothing } from 'lit';
+import { component, useState } from 'haunted';
+import { classMap } from 'lit/directives/class-map.js';
+import { handleTimeline } from './_lib/handle-timeline.js';
+import { readable as formatTime } from 'mystic-format-time';
+
+function getChapter({ targetTime, chapters }) {
+  const selected = chapters.find(
+    chapter =>
+      targetTime >= chapter.start / 1000 && targetTime < chapter.end / 1000
+  );
+  return selected?.tags?.title || null;
+}
+
+function TimelineComponent(element) {
+  const { props } = element;
+  const {
+    totalTime,
+    currentTime = 0, // keep currentTime here for the INITIAL render, but we won't rely on it for updates
+    currentItem = {},
+    getMediaElement,
+    id
+  } = props;
+
+  const [timePosition, setTimePosition] = useState(null);
+  const chapters = currentItem?.metadata?.chapters || [];
+
+  function handleTimelineIn(ev) {
+    const target = ev.currentTarget;
+    const leftPosition = ev.layerX;
+    const targetWidth = target.offsetWidth;
+    const targetTime = (leftPosition * totalTime) / targetWidth;
+    setTimePosition({
+      visual: formatTime(targetTime),
+      chapter:
+        chapters.length > 0 ? getChapter({ targetTime, chapters }) : null,
+      left: leftPosition
+    });
+  }
+
+  function handleTimelineOut() {
+    setTimePosition(null);
+  }
+
+  function fnHandleTimeline(ev) {
+    handleTimeline(ev, getMediaElement);
+  }
+
+  return html`
+    <div class="timeline">
+      <div
+        class="timeline__track"
+        @click="${fnHandleTimeline}"
+        @keydown="${fnHandleTimeline}"
+        @mousemove="${handleTimelineIn}"
+        @mouseout="${handleTimelineOut}"
+        role="progressbar"
+        tabindex="0"
+      >
+        <div
+          id="bar-${id}"
+          class="timeline__completed"
+          style="width: 0;"
+        ></div>
+      </div>
+      <div class="timeline__numbers">
+        <div id="txt-${id}">00:00</div>
+        <div>${formatTime(totalTime)}</div>
+      </div>
+
+      ${chapters.map(chapter => {
+        const limitClasses = {
+          'timeline__chapter-limit': true,
+          'timeline__chapter-limit--played': currentTime > chapter.start / 1000
+        };
+        const position = (100 / totalTime) * (chapter.start / 1000);
+        return html`
+          <div
+            class="${classMap(limitClasses)}"
+            style="--timeline--chapter-limit-position: ${position}%;"
+          ></div>
+        `;
+      })}
+      ${timePosition === null
+        ? nothing
+        : html`
+            <div
+              class="timeline__tooltip"
+              style="--timeline-tooltip-position: ${timePosition.left}px;"
+            >
+              <div class="timeline__tooltip-inner">
+                ${timePosition.chapter
+                  ? html`<span class="timeline__tooltip-chapter-title"
+                      >${timePosition.chapter}</span
+                    >`
+                  : nothing}
+                <span class="timeline__tooltip-time"
+                  >${timePosition.visual}</span
+                >
+              </div>
+            </div>
+          `}
+    </div>
+  `;
+}
+
+if (!customElements.get('mythical-player-timeline')) {
+  customElements.define(
+    'mythical-player-timeline',
+    component(TimelineComponent, {
+      observedAttributes: [],
+      useShadowDOM: false
+    })
+  );
+}
+
+export function Timeline(props) {
+  return html`<mythical-player-timeline
+    .props="${props}"
+  ></mythical-player-timeline>`;
+}

package/_lib/track-info/index.js

@@ -0,0 +1,36 @@
+import { virtual } from 'haunted';
+import { html } from 'lit';
+import { CoverFallback } from '../cover-fallback/index.js';
+import { TrackText } from '../track-text/index.js';
+import { getCover } from '../../_lib/get-cover.js';
+
+export const TrackInfo = virtual(
+  ({ track = {}, indexSelected, literals = {} }) => {
+    const hasTrackInfo = Number.isInteger(indexSelected);
+    return html`
+      <div class="myth-track-info">
+        <div class="myth-track-info__inner">
+          <div class="myth-track-info__image">
+            ${hasTrackInfo && track.cover
+              ? html`<img
+                  src="${getCover(track.cover)}"
+                  alt=""
+                  aria-hidden="true"
+                />`
+              : CoverFallback({})}
+          </div>
+          <div class="myth-track-info__data">
+            ${hasTrackInfo
+              ? TrackText({
+                  title: track.title,
+                  artist: track.artist,
+                  album: track.album,
+                  hasTrackInfo
+                })
+              : TrackText({ title: literals.noPlaying, hasTrackInfo })}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+);

package/_lib/track-text/index.js

@@ -0,0 +1,20 @@
+import { virtual } from 'haunted';
+import { html, nothing } from 'lit';
+
+export const TrackText = virtual(({ artist, album, title, hasTrackInfo }) => {
+  return html`
+    <div class="myth-track-text">
+      <div
+        class="myth-item-text"
+        data-test-id="player-data-${hasTrackInfo ? 'title' : 'stopped'}"
+      >
+        ${title}
+      </div>
+      <div class="myth-item-text size-small">
+        ${artist ? html`<span>${artist}</span>` : nothing}
+        ${artist && album ? html`<span> / </span>` : nothing}
+        ${album ? html`<span>${album}</span>` : nothing}
+      </div>
+    </div>
+  `;
+});

package/_style/_lib/_variables.scss

@@ -0,0 +1,5 @@
+$player-widht-s: 640px;
+$player-widht-m: 768px;
+$player-widht-l: 1024px;
+$player-widht-xl: 1280px;
+$player-widht-2xl: 1536px;

package/_style/_modules/_controls.scss

@@ -0,0 +1,50 @@
+@use '@outbook/design-decisions/measures';
+@use '@outbook/design-decisions/outline';
+@use '../_lib/variables';
+
+@mixin style() {
+  .myth-controls {
+    --_controls-color: light-dark(
+        var(--_accent-950),
+        var(--_accent-100)
+    );
+    --_controls-size: #{measures.$baseline * 6};
+  }
+
+  @container player (width >= #{variables.$player-widht-m}) {
+    .myth-controls {
+      --_controls-size: #{measures.$baseline * 7};
+    }
+  }
+
+  @container player (width >= #{variables.$player-widht-l}) {
+    .myth-controls {
+      --_controls-size: #{measures.$baseline * 8};
+    }
+  }
+
+  .myth-controls,
+  .myth-controls__items {
+    width: auto;
+  }
+
+  .myth-controls__items {
+    display: flex;
+  }
+
+  .myth-controls__button {
+    background: transparent;
+    border: 0;
+    color: var(--_controls-color);
+    &:focus-visible {
+      @include outline.inside();
+    }
+    &.is-disabled {
+      opacity: 0.4;
+    }
+  }
+  .myth-controls__icon {
+    width: var(--_controls-size);
+    height: var(--_controls-size);
+  }
+}

package/_style/_modules/_cover-fallback.scss

@@ -0,0 +1,52 @@
+@use '@outbook/design-decisions/measures';
+@use '../_lib/variables';
+
+@mixin style {
+  mythical-cover-fallback {
+    display: block;
+  }
+
+  .cover-fallback {
+    --_cover-fallback-bg-color: light-dark(var(--_accent-200), var(--_accent-700));
+    --_cover-fallback-font-size: #{measures.$baseline * 4};
+
+    &.cover-fallback--in-file-item {
+      --_cover-fallback-font-size: #{measures.$baseline * 4};
+    }
+  }
+  @container player (width >= #{variables.$player-widht-m}) {
+    .cover-fallback {
+      --_cover-fallback-font-size: #{measures.$baseline * 20};
+      &.cover-fallback--in-file-item {
+        --_cover-fallback-font-size: #{measures.$baseline * 4};
+      }
+    }
+  }
+
+  .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%;
+  }
+}

package/_style/_modules/_playlist.scss

@@ -0,0 +1,119 @@
+@use '@outbook/design-decisions/measures';
+@use '@outbook/design-decisions/animation-pulse';
+@use '@outbook/design-decisions/outline';
+@use '../_lib/variables';
+
+@mixin style() {
+  .myth-playlist {
+    --_playlist-font-weight: normal;
+    --_playlist-font-size: #{measures.$baseline * 1.5};
+    --_playlist-font-size-small: #{measures.$baseline * 1.25};
+    --_playlist-item-background-color: transparent;
+    --_playlist-item-image-size: #{measures.$baseline * 6};
+    .is-playing {
+      --_playlist-font-weight: 600;
+      --_playlist-item-background-color: var(--_accent-200);
+      .ambient-dark & {
+        --_playlist-item-background-color: var(--_accent-700);
+      }
+    }
+  }
+
+  @container player (width >= #{variables.$player-widht-l}) {
+    .myth-playlist {
+      --_playlist-font-size: #{measures.$baseline * 2};
+      --_playlist-font-size-small: #{measures.$baseline * 1.5};
+      --_playlist-item-image-size: #{measures.$baseline * 8};
+    }
+  }
+
+  .myth-playlist {
+    .myth-item-text {
+      font-weight: var(--_playlist-font-weight);
+      font-size: var(--_playlist-font-size);
+      line-height: 150%;
+      &.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);
+    &.is-playing {
+      &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.45;
+        @include animation-pulse.background();
+      }
+    }
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  .myth-playlist__item-button {
+    display: flex;
+    padding: #{measures.$baseline};
+    position: relative;
+    align-items: center;
+    &:focus-visible {
+      @include outline.inside();
+    }
+  }
+
+  .myth-playlist__item-group,
+  .myth-playlist__item-block {
+    margin-left: #{measures.$baseline * 2};
+    &:first-child {
+      margin-left: 0;
+    }
+    &.is-last-right {
+      margin-left: auto;
+      padding-left: #{measures.$baseline};
+    }
+  }
+
+  .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;
+    img {
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .myth-playlist__item-playing-icon {
+    width: #{measures.$baseline * 2};
+    height: #{measures.$baseline * 2};
+    display: flex;
+    align-items: center;
+  }
+
+  .myth-playlist__item-playing-icon-inner {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+  }
+}