@outbook/webcomponents-player 1.3.0

package/_i18n/i18n.js

@@ -0,0 +1,95 @@
+import defaultLiterals from './en.json';
+import af from './af.json';
+import ar from './ar.json';
+import bg from './bg.json';
+import ca from './ca.json';
+import cs from './cs.json';
+import da from './da.json';
+import de from './de.json';
+import el from './el.json';
+import es from './es.json';
+import eu from './eu.json';
+import fa from './fa.json';
+import fi from './fi.json';
+import fr from './fr.json';
+import gl from './gl.json';
+import ha from './ha.json';
+import hi from './hi.json';
+import hu from './hu.json';
+import id from './id.json';
+import it from './it.json';
+import ja from './ja.json';
+import km from './km.json';
+import ko from './ko.json';
+import lo from './lo.json';
+import ms from './ms.json';
+import nl from './nl.json';
+import no from './no.json';
+import pl from './pl.json';
+import pt from './pt.json';
+import ro from './ro.json';
+import ru from './ru.json';
+import sk from './sk.json';
+import sv from './sv.json';
+import sw from './sw.json';
+import th from './th.json';
+import tl from './tl.json';
+import tr from './tr.json';
+import uk from './uk.json';
+import vi from './vi.json';
+import zh from './zh.json';
+import zu from './zu.json';
+
+const literals = {
+  af,
+  ar,
+  bg,
+  ca,
+  cs,
+  da,
+  de,
+  el,
+  en: defaultLiterals,
+  es,
+  eu,
+  fa,
+  fi,
+  fr,
+  gl,
+  ha,
+  hi,
+  hu,
+  id,
+  it,
+  ja,
+  km,
+  ko,
+  lo,
+  ms,
+  nl,
+  no,
+  pl,
+  pt,
+  ro,
+  ru,
+  sk,
+  sv,
+  sw,
+  th,
+  tl,
+  tr,
+  uk,
+  vi,
+  zh,
+  zu
+};
+
+/**
+ * @param {string} lang - ISO language code (e.g. "fr", "de").
+ * @returns {Promise<Object>} Resolved with the language object.
+ */
+export async function loadLiterals(lang) {
+  const key = String(lang).trim().toLowerCase();
+  const loadedLiterals = literals[key] || defaultLiterals;
+  return Promise.resolve(loadedLiterals);
+}

package/_i18n/id.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Lagu berikutnya",
+    "pause": "Jeda",
+    "play": "Putar",
+    "previousTrack": "Lagu sebelumnya",
+    "stop": "Berhenti"
+  },
+  "trackInfo": {
+    "noPlaying": "Tidak ada lagu yang diputar"
+  }
+}

package/_i18n/it.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Prossimo brano",
+    "pause": "Pausa",
+    "play": "Riproduci",
+    "previousTrack": "Brano precedente",
+    "stop": "Ferma"
+  },
+  "trackInfo": {
+    "noPlaying": "Nessun brano in riproduzione"
+  }
+}

package/_i18n/ja.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "次のトラック",
+    "pause": "一時停止",
+    "play": "再生",
+    "previousTrack": "前のトラック",
+    "stop": "停止"
+  },
+  "trackInfo": {
+    "noPlaying": "再生中のトラックはありません"
+  }
+}

package/_i18n/km.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "បទបន្ទាប់",
+    "pause": "ផ្អាក",
+    "play": "លេង",
+    "previousTrack": "បទមុន",
+    "stop": "បញ្ឈប់"
+  },
+  "trackInfo": {
+    "noPlaying": "មិនមានបទចាក់"
+  }
+}

package/_i18n/ko.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "다음 트랙",
+    "pause": "일시 정지",
+    "play": "재생",
+    "previousTrack": "이전 트랙",
+    "stop": "정지"
+  },
+  "trackInfo": {
+    "noPlaying": "재생 중인 트랙 없음"
+  }
+}

package/_i18n/lo.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "ເພງຕໍ່ໄປ",
+    "pause": "ຢຸດຊົ່ວຄາວ",
+    "play": "ຫຼິ້ນ",
+    "previousTrack": "ເພງກ່ອນໜ້າ",
+    "stop": "ຢຸດ"
+  },
+  "trackInfo": {
+    "noPlaying": "ບໍ່ມີເພງກຳລັງຫຼິ້ນ"
+  }
+}

package/_i18n/ms.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Lagu seterusnya",
+    "pause": "Jeda",
+    "play": "Main",
+    "previousTrack": "Lagu sebelumnya",
+    "stop": "Berhenti"
+  },
+  "trackInfo": {
+    "noPlaying": "Tiada lagu dimainkan"
+  }
+}

package/_i18n/nl.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Volgend nummer",
+    "pause": "Pauzeren",
+    "play": "Afspelen",
+    "previousTrack": "Vorig nummer",
+    "stop": "Stoppen"
+  },
+  "trackInfo": {
+    "noPlaying": "Geen spelend nummer"
+  }
+}

package/_i18n/no.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Neste spor",
+    "pause": "Pause",
+    "play": "Spill av",
+    "previousTrack": "Forrige spor",
+    "stop": "Stopp"
+  },
+  "trackInfo": {
+    "noPlaying": "Ingen spor spilles av"
+  }
+}

package/_i18n/pl.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Następny utwór",
+    "pause": "Pauza",
+    "play": "Odtwórz",
+    "previousTrack": "Poprzedni utwór",
+    "stop": "Zatrzymaj"
+  },
+  "trackInfo": {
+    "noPlaying": "Brak odtwarzanego utworu"
+  }
+}

package/_i18n/pt.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Próxima faixa",
+    "pause": "Pausar",
+    "play": "Reproduzir",
+    "previousTrack": "Faixa anterior",
+    "stop": "Parar"
+  },
+  "trackInfo": {
+    "noPlaying": "Nenhuma faixa em reprodução"
+  }
+}

package/_i18n/ro.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Următoarea piesă",
+    "pause": "Pauză",
+    "play": "Redare",
+    "previousTrack": "Piesa anterioară",
+    "stop": "Oprește"
+  },
+  "trackInfo": {
+    "noPlaying": "Nicio piesă în redare"
+  }
+}

package/_i18n/ru.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Следующий трек",
+    "pause": "Пауза",
+    "play": "Играть",
+    "previousTrack": "Предыдущий трек",
+    "stop": "Стоп"
+  },
+  "trackInfo": {
+    "noPlaying": "Нет воспроизводимого трека"
+  }
+}

package/_i18n/sk.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Ďalšia skladba",
+    "pause": "Pozastaviť",
+    "play": "Prehrať",
+    "previousTrack": "Predchádzajúca skladba",
+    "stop": "Zastaviť"
+  },
+  "trackInfo": {
+    "noPlaying": "Neprehráva sa žiadna skladba"
+  }
+}

package/_i18n/sv.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Nästa spår",
+    "pause": "Pausa",
+    "play": "Spela",
+    "previousTrack": "Föregående spår",
+    "stop": "Stoppa"
+  },
+  "trackInfo": {
+    "noPlaying": "Inget spår spelas"
+  }
+}

package/_i18n/sw.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Wimbo unaofuata",
+    "pause": "Sitisha",
+    "play": "Cheza",
+    "previousTrack": "Wimbo uliopita",
+    "stop": "Acha"
+  },
+  "trackInfo": {
+    "noPlaying": "Hakuna wimbo unaocheza"
+  }
+}

package/_i18n/th.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "เพลงถัดไป",
+    "pause": "หยุดชั่วคราว",
+    "play": "เล่น",
+    "previousTrack": "เพลงก่อนหน้า",
+    "stop": "หยุด"
+  },
+  "trackInfo": {
+    "noPlaying": "ไม่มีเพลงที่กำลังเล่นอยู่"
+  }
+}

package/_i18n/tl.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Susunod na track",
+    "pause": "I-pause",
+    "play": "I-play",
+    "previousTrack": "Nakaraang track",
+    "stop": "Ihinto"
+  },
+  "trackInfo": {
+    "noPlaying": "Walang tumutugtog na track"
+  }
+}

package/_i18n/tr.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Sonraki parça",
+    "pause": "Duraklat",
+    "play": "Oynat",
+    "previousTrack": "Önceki parça",
+    "stop": "Durdur"
+  },
+  "trackInfo": {
+    "noPlaying": "Çalan parça yok"
+  }
+}

package/_i18n/uk.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Наступний трек",
+    "pause": "Пауза",
+    "play": "Відтворити",
+    "previousTrack": "Попередній трек",
+    "stop": "Зупинити"
+  },
+  "trackInfo": {
+    "noPlaying": "Немає відтворюваного треку"
+  }
+}

package/_i18n/vi.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Bài hát tiếp theo",
+    "pause": "Tạm dừng",
+    "play": "Phát",
+    "previousTrack": "Bài hát trước",
+    "stop": "Dừng"
+  },
+  "trackInfo": {
+    "noPlaying": "Không có bài hát nào đang phát"
+  }
+}

package/_i18n/zh.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "下一曲",
+    "pause": "暂停",
+    "play": "播放",
+    "previousTrack": "上一曲",
+    "stop": "停止"
+  },
+  "trackInfo": {
+    "noPlaying": "没有正在播放的曲目"
+  }
+}

package/_i18n/zu.json

@@ -0,0 +1,12 @@
+{
+  "controls": {
+    "nextTrack": "Ingoma elandelayo",
+    "pause": "Yimisa okwesikhashana",
+    "play": "Dlala",
+    "previousTrack": "Ingoma edlule",
+    "stop": "Ima"
+  },
+  "trackInfo": {
+    "noPlaying": "Ayikho ingoma edlalayo"
+  }
+}

package/_lib/background.js

@@ -0,0 +1,28 @@
+import { prominent } from 'color.js';
+import { rgbToHex } from './rgb-to-hex.js';
+import { orderByLuminance } from './order-by-luminance.js';
+
+export const emptyBackground = '';
+
+export function getBackgroundColor(coverUrl) {
+  return prominent(coverUrl, {
+    amount: 5,
+    format: 'rgb',
+    group: 40,
+    sample: 10
+  }).then(colors => {
+    const colorPropsRgb = colors.map(item => ({
+      r: item[0],
+      g: item[1],
+      b: item[2]
+    }));
+
+    const orderedColorsRgb = orderByLuminance(colorPropsRgb);
+
+    return orderedColorsRgb
+      .map((item, index) => {
+        return `--player--main-color-${index}: ${rgbToHex(item)};`;
+      })
+      .join(''); // Return the string!
+  });
+}

package/_lib/controls/index.js

@@ -0,0 +1,91 @@
+import { virtual } from 'haunted';
+import { html } from 'lit';
+import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';
+import { skip_next, skip_previous, play_arrow, pause, stop } from '@outbook/icons';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { isEventClick, isKeyEnterOrKeySpace } from 'a11y-key-conjurer';
+import { classMap } from 'lit/directives/class-map.js';
+
+export const Controls = virtual(({ props, handleAudio, literals = {} }) => {
+  const { isPlaying = false, playlist, indexSelected } = props;
+  const controlsDisabled = !Number.isInteger(indexSelected);
+  const controlItems = [
+    {
+      label: literals.previousTrack,
+      icon: 'skip_previous',
+      isDisabled: controlsDisabled || indexSelected === 0,
+      action: handleAudio.previous,
+      id: 'previous'
+    },
+    isPlaying && !controlsDisabled
+      ? {
+          label: literals.pause,
+          icon: 'pause',
+          action: handleAudio.pause,
+          isDisabled: false,
+          id: 'pause'
+        }
+      : {
+          label: literals.play,
+          icon: 'play_arrow',
+          action: handleAudio.play,
+          isDisabled: controlsDisabled,
+          id: 'play'
+        },
+    {
+      label: literals.stop,
+      icon: 'stop',
+      isDisabled: controlsDisabled,
+      action: handleAudio.stop,
+      id: 'stop'
+    },
+    {
+      label: literals.nextTrack,
+      icon: 'skip_next',
+      isDisabled: controlsDisabled || playlist.length - 1 === indexSelected,
+      action: handleAudio.next,
+      id: 'next'
+    }
+  ];
+
+  function handleControl(action) {
+    return ev => {
+      if (isEventClick(ev) || isKeyEnterOrKeySpace(ev)) {
+        action();
+      }
+    };
+  }
+
+  return html`
+    <div class="myth-controls">
+      <ul class="myth-controls__items">
+        ${controlItems.map(item => {
+          const buttonClasses = classMap({
+            'myth-controls__button': true,
+            'is-disabled': item.isDisabled
+          });
+          return html`
+            <li class="myth-controls__item">
+              <button
+                class="${buttonClasses}"
+                aria-label="${item.label}"
+                disabled="${ifDefined(
+                  item.isDisabled ? 'disabled' : undefined
+                )}"
+                data-test-id="player-button-${item.id}"
+                @click="${handleControl(item.action)}"
+                @keydown="${handleControl(item.action)}"
+              >
+                ${TypeIcon({
+                  icon: item.icon,
+                  icons: { skip_next, skip_previous, play_arrow, pause, stop },
+                  extraClasses: 'myth-controls__icon'
+                })}
+              </button>
+            </li>
+          `;
+        })}
+      </ul>
+    </div>
+  `;
+});

package/_lib/cover-fallback/index.js

@@ -0,0 +1,48 @@
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';
+import { audiotrack } from '@outbook/icons';
+import { component } from 'haunted';
+
+function CoverFallbackComponent(element) {
+  const { props, icon = 'audiotrack' } = element;
+  const { isInFileItem } = props;
+  const mainClasses = classMap({
+    'cover-fallback': true,
+    'cover-fallback--in-file-item': isInFileItem
+  });
+  return html`
+    <div class="${mainClasses}">
+      <div class="cover-fallback__icon">
+        ${TypeIcon({
+          icon,
+          icons: { audiotrack },
+          extraClasses: 'cover-fallback__icon-inner'
+        })}
+      </div>
+    </div>
+  `;
+}
+
+if (!customElements.get('mythical-cover-fallback')) {
+  customElements.define(
+    'mythical-cover-fallback',
+    component(CoverFallbackComponent, {
+      observedAttributes: ['icon'],
+      useShadowDOM: false
+    })
+  );
+}
+
+export function CoverFallback(props) {
+  const { extraClasses, icon = null } = props;
+
+  return html`
+    <mythical-cover-fallback
+      class="${ifDefined(extraClasses || undefined)}"
+      icon="${ifDefined(icon || undefined)}"
+      .props="${props}"
+    ></mythical-cover-fallback>
+  `;
+}

package/_lib/get-cover.js

@@ -0,0 +1,4 @@
+export function getCover(data) {
+  const { path, extension, name } = data;
+  return `${path}/${name}.${extension}`;
+}

package/_lib/hooks.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'haunted';
+
+export function useDocumentEvent(eventName, handler, condition) {
+  useEffect(() => {
+    if (condition) {
+      document.addEventListener(eventName, handler);
+      return () => {
+        document.removeEventListener(eventName, handler);
+      };
+    }
+  }, [eventName, handler, condition]);
+}
+
+export function useWindowEvent(eventName, handler, condition = true) {
+  useEffect(() => {
+    if (condition) {
+      window.addEventListener(eventName, handler);
+      return () => {
+        window.removeEventListener(eventName, handler);
+      };
+    }
+  }, [eventName, handler, condition]);
+}

package/_lib/order-by-luminance.js

@@ -0,0 +1,9 @@
+// https://en.wikipedia.org/wiki/Luma_(video)
+const calculateLuminance = p => {
+  return 0.2126 * p.r + 0.7152 * p.g + 0.0722 * p.b;
+};
+export const orderByLuminance = rgbValues => {
+  return rgbValues.sort((p1, p2) => {
+    return calculateLuminance(p2) - calculateLuminance(p1);
+  });
+};