@outbook/webcomponents-player 1.5.3 → 1.6.0

package/README.md

@@ -1,6 +1,6 @@
 # @outbook/webcomponents-player
 
-This package provides a web component for an audio player with playlist functionality.
+This package provides a web component for an audio player with playlist functionality. It includes playback controls, a timeline, track information with artwork, prominent-color backgrounds, and OS media controls through the [Media Session API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API) when supported.
 
 ## Installation
 
@@ -22,20 +22,14 @@ const myPlaylist = [
     title: 'Song Title 1',
     artist: 'Artist Name 1',
     album: 'Album Name 1',
-    cover: {
-      name: 'cover1.jpg' // or a URL
-      // Other cover properties if available
-    }
+    artwork: '/artwork/[size]/[density]/cover1.jpg'
   },
   {
     file: 'path/to/your/audio2.mp3',
     title: 'Song Title 2',
     artist: 'Artist Name 2',
     album: 'Album Name 2',
-    cover: {
-      name: 'cover2.png' // or a URL
-      // Other cover properties if available
-    }
+    artwork: '/artwork/[size]/[density]/cover2.jpg'
   }
 ];
 
@@ -74,18 +68,14 @@ import '@outbook/webcomponents-player';
       "title": "Song Title 1",
       "artist": "Artist Name 1",
       "album": "Album Name 1",
-      "cover": {
-        "name": "cover1.jpg"
-      }
+      "artwork": "/artwork/[size]/[density]/cover1.jpg"
     },
     {
       "file": "path/to/your/audio2.mp3",
       "title": "Song Title 2",
       "artist": "Artist Name 2",
       "album": "Album Name 2",
-      "cover": {
-        "name": "cover2.png"
-      }
+      "artwork": "/artwork/[size]/[density]/cover2.jpg"
     }
   ]'
 ></outbook-player>
@@ -93,21 +83,36 @@ import '@outbook/webcomponents-player';
 
 **Note:** When using the `playlist` property directly in HTML, you must pass a JSON string. Ensure the JSON is valid and properly escaped if necessary.
 
+### Track Object
+
+Each item in `playlist` describes one track:
+
+| Field     | Type     | Required | Description                                                                                                                                                                            |
+| --------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `file`    | `String` | Yes      | URL of the audio file. Used as the `src` of the underlying `<audio>` element.                                                                                                          |
+| `title`   | `String` | No       | Track title, shown in the playlist, track info, and OS media controls.                                                                                                                 |
+| `artist`  | `String` | No       | Artist name.                                                                                                                                                                           |
+| `album`   | `String` | No       | Album name.                                                                                                                                                                            |
+| `artwork` | `String` | No       | Artwork URL template. `[size]` and `[density]` placeholders are replaced with the requested size (e.g. `384`) and density (e.g. `1x`). Example: `/artwork/[size]/[density]/cover.jpg`. |
+| `cover`   | `Object` | No       | Optional. Only `cover.extension` (e.g. `'jpg'`, `'png'`) is read, to set the artwork MIME type for OS media controls.                                                                  |
+
+Tracks without `artwork` are shown without cover art, and the background falls back to the default color.
+
 ## Component: `outbook-player`
 
 This is the underlying web component. It can be used directly in HTML or in any framework.
 
 ### 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 `artwork` properties (see [Track Object](#track-object)). |
+| `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
 

package/_lib/get-background-color.js

@@ -0,0 +1,40 @@
+// get-background-color.js
+
+import { prominent } from 'color.js';
+import { rgbToHex } from './rgb-to-hex.js';
+import { orderByLuminance } from './order-by-luminance.js';
+
+export const emptyBackground = '';
+
+const PROMINENT_OPTIONS = {
+  amount: 5,
+  format: 'rgb',
+  group: 40,
+  sample: 10
+};
+
+/**
+ * Extracts prominent colors from a cover image and returns a CSS block
+ * of custom properties ordered by luminance.
+ *
+ * @param {string} [coverUrl]
+ * @returns {Promise<string>} CSS string like `--player--main-color-0: #aabbcc;...`
+ */
+export async function getBackgroundColor(coverUrl) {
+  if (!coverUrl) return emptyBackground;
+
+  try {
+    const colors = await prominent(coverUrl, PROMINENT_OPTIONS);
+
+    const colorPropsRgb = colors.map(([r, g, b]) => ({ r, g, b }));
+    const orderedColorsRgb = orderByLuminance(colorPropsRgb);
+
+    return orderedColorsRgb
+      .map((item, index) => `--player--main-color-${index}: ${rgbToHex(item)};`)
+      .join('\n');
+  } catch (err) {
+    // color.js throws on unreadable images / CORS / network failures
+    console.warn('getBackgroundColor failed:', err);
+    return emptyBackground;
+  }
+}

package/_lib/order-by-luminance.js

@@ -1,9 +1,33 @@
+// order-by-luminance.js
 // https://en.wikipedia.org/wiki/Luma_(video)
-const calculateLuminance = p => {
-  return 0.2126 * p.r + 0.7152 * p.g + 0.0722 * p.b;
-};
+
+/**
+ * Calculate relative luminance for an RGB object using Rec. 709 coefficients.
+ * @param {{r: number, g: number, b: number}} p
+ * @returns {number}
+ */
+export const calculateLuminance = ({ r, g, b }) =>
+  0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+/**
+ * Sort an array of RGB objects by luminance, brightest first.
+ * Does not mutate the input array.
+ *
+ * @param {Array<{r: number, g: number, b: number}>} rgbValues
+ * @returns {Array<{r: number, g: number, b: number}>} new sorted array
+ */
 export const orderByLuminance = rgbValues => {
-  return rgbValues.sort((p1, p2) => {
-    return calculateLuminance(p2) - calculateLuminance(p1);
-  });
+  if (!Array.isArray(rgbValues)) {
+    throw new TypeError('orderByLuminance expects an array');
+  }
+
+  return rgbValues
+    .map((rgb, index) => ({ rgb, index, luminance: calculateLuminance(rgb) }))
+    .sort((a, b) => {
+      // Descending luminance
+      if (b.luminance !== a.luminance) return b.luminance - a.luminance;
+      // Stable tie-break on original position
+      return a.index - b.index;
+    })
+    .map(({ rgb }) => rgb);
 };

package/_lib/playlist/index.js

@@ -1,13 +1,8 @@
 import { virtual } from 'haunted';
-import { html, nothing } from 'lit';
-import { isKeyEnterOrKeySpace, isEventClick } from '@outbook/a11y';
+import { html } from 'lit';
 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';
+
+import { PlayerPlaylistItem } from '@outbook/webcomponents-player-playlist-item';
 
 export const Playlist = virtual(
   ({
@@ -20,11 +15,9 @@ export const Playlist = virtual(
   }) => {
     const { showArtwork, showTrackNumber, showFileExtension } = list;
     function handleButton(index) {
-      return (ev) => {
-        if (isEventClick(ev) || isKeyEnterOrKeySpace(ev)) {
-          handleAudio.setTrack({ index, fromControls: false });
-        }
-      }
+      return () => {
+        handleAudio.setTrack({ index, fromControls: false });
+      };
     }
     return html`
       <div class="player-playlist" id="${listId}">
@@ -37,59 +30,27 @@ export const Playlist = virtual(
             });
             return html`
               <li class="${itemClasses}" data-playlist-item="${index}">
-                <div
-                  class="player-playlist__item-button"
-                  tabindex="0"
-                  role="button"
-                  @click="${handleButton(index)}"
-                  @keydown="${handleButton(index)}"
-                >
-                  ${showArtwork ? ShowCover({ cover: item.cover }) : nothing}
-                  ${isPlayingItem
-                    ? html`
-                        <div
-                          class="player-playlist__item-block player-playlist__item-playing-icon"
-                        >
-                          ${TypeIcon({
-                            icon: isPlaying ? 'play_arrow' : 'pause',
-                            icons: { play_arrow, pause },
-                            extraClasses:
-                              'player-playlist__item-playing-icon-inner'
-                          })}
-                        </div>
-                      `
-                    : nothing}
-                  ${showTrackNumber
-                    ? html`
-                        <div
-                          class="player-playlist__item-block track-text__item size-small"
-                        >
-                          ${item.trackNumber || index + 1}
-                        </div>
-                      `
-                    : nothing}
-                  <div class="player-playlist__item-block">
-                    ${TrackText({
-                      title: item.title,
-                      artist: item.artist,
-                      album: item.album
-                    })}
-                  </div>
-                  ${item.duration || showFileExtension
-                    ? html`
-                        <div class="player-playlist__item-group is-last-right">
-                          ${ItemDuration({ duration: item.duration })}
-                          ${showFileExtension
-                            ? html`
-                                <div class="player-playlist__item-block">
-                                  ${BadgeFileExtension({ text: item.format })}
-                                </div>
-                              `
-                            : nothing}
-                        </div>
-                      `
-                    : nothing}
-                </div>
+                ${PlayerPlaylistItem({
+                  ...item,
+                  title: item.title,
+                  artist: item.artist,
+                  album: item.album,
+                  duration: item.duration,
+                  format: item.format,
+                  artwork: item.artwork,
+                  trackNumber: item.trackNumber,
+                  trackIndex: index,
+                  isCurrent: isPlayingItem,
+                  playState: isPlayingItem
+                    ? isPlaying
+                      ? 'playing'
+                      : 'paused'
+                    : 'stopped',
+                  showArtwork,
+                  showTrackNumber,
+                  showFileExtension,
+                  eventFn: handleButton(index)
+                })}
               </li>
             `;
           })}

package/_lib/rgb-to-hex.js

@@ -1,13 +1,10 @@
-const componentToHex = channel => {
-  const hex = channel.toString(16);
-  return hex.length === 1 ? '0' + hex : hex;
+// rgb-to-hex.js
+
+export const componentToHex = channel => {
+  const clamped = Math.max(0, Math.min(255, Math.round(channel)));
+  return clamped.toString(16).padStart(2, '0');
 };
 
-export const rgbToHex = item => {
-  return (
-    '#' +
-    componentToHex(item.r) +
-    componentToHex(item.g) +
-    componentToHex(item.b)
-  ).toUpperCase();
+export const rgbToHex = ({ r, g, b }) => {
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`.toUpperCase();
 };

package/_lib/setup-media-session.js

@@ -1,4 +1,4 @@
-import { getCover } from './get-cover.js';
+import { playerGetArtwork } from '@outbook/player-get-artwork';
 import { isValidTrackIndex } from './is-valid-track-index.js';
 
 const MEDIA_SESSION_ACTIONS = [
@@ -44,7 +44,11 @@ export function setupMediaSession({ owner, index, playlist, handleAudio }) {
 
   mediaSessionOwner = owner;
   const metadata = playlist[index];
-  const coverUrl = getCover(metadata.cover);
+  const coverUrl = playerGetArtwork({
+    artwork: metadata.artwork,
+    size: 512,
+    density: '1x'
+  });
   const extension = metadata.cover?.extension?.toLowerCase().replace(/^\./, '');
   const subtype = { jpg: 'jpeg', svg: 'svg+xml' }[extension] || extension;
   const type = subtype ? `image/${subtype}` : undefined;

package/_lib/to-boolean.js

@@ -1,5 +1,11 @@
+// to-boolean.js
+
 export function toBoolean(value) {
-  if (typeof value === 'boolean') return value;
-  if (typeof value === 'string') return value !== 'false';
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  if (typeof value === 'string') {
+    return value !== 'false';
+  }
   return Boolean(value);
 }

package/_lib/track-info/index.js

@@ -1,27 +1,38 @@
 import { html } from 'lit';
 import { TrackText } from '../track-text/index.js';
-import { getCover } from '../get-cover.js';
 import { PlayerArtwork } from '@outbook/webcomponents-player-artwork';
 
 export function TrackInfo({ track = {}, indexSelected, literals = {} }) {
   const hasTrackInfo = Number.isInteger(indexSelected);
-  const cover = hasTrackInfo && track.cover ? getCover(track.cover) : undefined;
+  const artwork = hasTrackInfo && track.artwork ? track.artwork : undefined;
   return html`
     <div class="track-info">
       <div class="track-info__inner">
         ${PlayerArtwork({
-          src1x: cover,
+          src: artwork,
+          sources: [
+            {
+              media: '(min-width: 800px)',
+              sizes: [384]
+            },
+            {
+              media: '(min-width: 0px)',
+              sizes: [96]
+            }
+          ],
           extraClasses: 'track-info__image'
         })}
         <div class="track-info__data">
-          ${hasTrackInfo
-            ? TrackText({
-                title: track.title,
-                artist: track.artist,
-                album: track.album,
-                hasTrackInfo
-              })
-            : TrackText({ title: literals.noPlaying, hasTrackInfo })}
+          ${
+            hasTrackInfo
+              ? TrackText({
+                  title: track.title,
+                  artist: track.artist,
+                  album: track.album,
+                  hasTrackInfo
+                })
+              : TrackText({ title: literals.noPlaying, hasTrackInfo })
+          }
         </div>
       </div>
     </div>

package/_style/player.style.js

@@ -283,43 +283,6 @@ button[disabled],
   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;
@@ -355,59 +318,6 @@ button[disabled],
   border-bottom: 0;
 }
 
-.player-playlist__item-button {
-  display: flex;
-  width: 100%;
-  border: 0;
-  padding: 0.5rem;
-  position: relative;
-  align-items: center;
-  color: inherit;
-  background: transparent;
-  font: inherit;
-  text-align: inherit;
-  cursor: pointer;
-}
-.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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outbook/webcomponents-player",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "main": "player.js",
   "type": "module",
   "private": false,
@@ -35,8 +35,9 @@
     "@outbook/webcomponents-scrollable": ">=1.1.0",
     "@outbook/webcomponents-type-icon": ">=1.1.5",
     "@outbook/webcomponents-badge-file-extension": ">=1.3.0",
-    "@outbook/webcomponents-player-artwork": ">=1.1.3",
+    "@outbook/webcomponents-player-artwork": ">=2.0.1",
     "@outbook/webcomponents-player-timeline": ">=1.0.8",
+    "@outbook/webcomponents-player-playlist-item": ">=1.0.1",
     "@outbook/icons": ">=1.3.2",
     "@outbook/webcomponents-player-audio-decoy": ">=1.0.0"
   },

package/player.js

@@ -9,8 +9,10 @@ import {
   syncMediaSession
 } from './_lib/setup-media-session.js';
 import { isValidTrackIndex } from './_lib/is-valid-track-index.js';
-import { emptyBackground, getBackgroundColor } from './_lib/background.js';
-import { getCover } from './_lib/get-cover.js';
+import {
+  emptyBackground,
+  getBackgroundColor
+} from './_lib/get-background-color.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { Scrollable } from '@outbook/webcomponents-scrollable';
 import { Playlist as ComponentPlaylist } from './_lib/playlist/index.js';
@@ -218,9 +220,7 @@ function ComponentPlayer(element) {
     }
 
     selectedTrackRef.current = selectedTrack;
-    setCoverUrl(
-      selectedTrack.cover?.name ? getCover(selectedTrack.cover) : null
-    );
+    setCoverUrl(selectedTrack.artwork || null);
   }, [indexSelected, playlist, playlistMediaSessionSignature]);
 
   useEffect(() => {
@@ -369,9 +369,7 @@ function ComponentPlayer(element) {
         handleScroll({ index });
       }
 
-      setCoverUrl(
-        playlist[index].cover?.name ? getCover(playlist[index].cover) : null
-      );
+      setCoverUrl(playlist[index].artwork || null);
       requestInitialPlayback();
       return true;
     },
@@ -468,21 +466,23 @@ function ComponentPlayer(element) {
           </div>
         </div>
         ${isPlaying ? html`${PlayerAudioDecoy({ mode: 'auto' })}` : nothing}
-        ${Number.isInteger(indexSelected)
-          ? html`
-              <audio
-                src="${playlist[indexSelected]?.file}"
-                id="${mediaId}"
-                @ended="${handleAudioEnd}"
-                @timeupdate="${handleTimeUpdate}"
-                @loadedmetadata="${handleDurationChange}"
-                @durationchange="${handleDurationChange}"
-                @play="${handleAudioNativePlay}"
-                @pause="${handleAudioNativePause}"
-                @error="${handleAudioNativeError}"
-              ></audio>
-            `
-          : nothing}
+        ${
+          Number.isInteger(indexSelected)
+            ? html`
+                <audio
+                  src="${playlist[indexSelected]?.file}"
+                  id="${mediaId}"
+                  @ended="${handleAudioEnd}"
+                  @timeupdate="${handleTimeUpdate}"
+                  @loadedmetadata="${handleDurationChange}"
+                  @durationchange="${handleDurationChange}"
+                  @play="${handleAudioNativePlay}"
+                  @pause="${handleAudioNativePause}"
+                  @error="${handleAudioNativeError}"
+                ></audio>
+              `
+            : nothing
+        }
       `
     : html`Loading...`;
 }

package/_lib/background.js

@@ -1,28 +0,0 @@
-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/get-cover.js

@@ -1,22 +0,0 @@
-export function getCover(data) {
-  if (!data || typeof data !== 'object') {
-    return undefined;
-  }
-
-  const { path = '', extension, name } = data;
-  if (typeof name !== 'string' || !name.trim()) {
-    return undefined;
-  }
-
-  const normalizedName = name.trim();
-  const fileName =
-    typeof extension === 'string' && extension.trim()
-      ? `${normalizedName}.${extension.trim().replace(/^\./, '')}`
-      : normalizedName;
-  const normalizedPath =
-    typeof path === 'string' && path !== '/' ? path.replace(/\/+$/, '') : path;
-
-  return normalizedPath
-    ? `${normalizedPath}${normalizedPath === '/' ? '' : '/'}${fileName}`
-    : fileName;
-}

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

@@ -1,16 +0,0 @@
-import { html } from 'lit';
-import {
-  readable as formatTime,
-  iso as formatTimeDuration
-} from '@outbook/format-time';
-
-export function ItemDuration({ duration }) {
-  return html`
-    <time
-      class="player-playlist__item-block track-text__item size-small"
-      datetime="${formatTimeDuration(duration)}"
-    >
-      ${formatTime(duration)}
-    </time>
-  `;
-}

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

@@ -1,12 +0,0 @@
-import { html } from 'lit';
-import { getCover } from '../../get-cover.js';
-import { PlayerArtwork } from '@outbook/webcomponents-player-artwork';
-
-export const ShowCover = ({ cover }) => {
-  return html`
-    ${PlayerArtwork({
-      src1x: cover ? getCover(cover) : undefined,
-      extraClasses: 'player-playlist__item-block player-playlist__item-image'
-    })}
-  `;
-};