smooth-player 2.1.0 → 2.1.2

package/dist/SmoothPlayer.js

@@ -326,8 +326,10 @@ export class SmoothPlayer {
     mountPlaylistTitle(element, options = {}) {
         const fallbackTitle = options.fallbackTitle ?? DEFAULT_PLAYLIST_TITLE;
         const render = () => {
+            const hasPlaylist = this.getPlaylists().length > 1 || this.getActiveTracks().length > 1;
             const playlist = this.getCurrentPlaylist();
-            element.textContent = playlist?.title ?? fallbackTitle;
+            element.hidden = !hasPlaylist;
+            element.textContent = hasPlaylist ? (playlist?.title ?? fallbackTitle) : "";
         };
         render();
         const off = this.on("playlistchange", render);

package/dist/smooth-player.css

@@ -30,6 +30,10 @@
   transition: opacity 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
+.smooth-player [hidden] {
+  display: none !important;
+}
+
 .smooth-player.is-drag-over {
   border-color: color-mix(in srgb, var(--smooth-player-accent) 44%, #fff 56%);
   box-shadow: 0 0 0 calc(var(--smooth-player-rem) * 2) color-mix(in srgb, var(--smooth-player-accent) 18%, transparent);
@@ -628,6 +632,7 @@
   top: 0.75rem;
   right: 0;
   left: auto;
+  z-index: 2;
   width: 2.2rem;
   height: 1.6rem;
   display: block;
@@ -745,8 +750,11 @@
   inset: auto 0 0 0;
   z-index: 2;
   width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
   height: min(48%, 20rem);
   overflow-y: auto;
+  overflow-x: hidden;
   padding: 0.8rem 1rem 1rem;
   border-top: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 0;

package/dist/ui.js

@@ -12,7 +12,7 @@ function renderPlayerMarkup(root, debugEnabled) {
     root.innerHTML = `
     <div class="smooth-player__main">
       <div class="smooth-player__top">
-        <div class="smooth-player__top-title">${strings.playlist.defaultTitle}</div>
+        <div class="smooth-player__top-title"></div>
         <button id="shuffle-toggle" type="button" aria-label="${strings.shuffle.disabledLabel}" aria-pressed="false" hidden>
           <span class="smooth-player__icon-shuffle" aria-hidden="true"></span>
           <span id="shuffle-text" class="smooth-player__sr-only">${strings.shuffle.disabledLabel}</span>
@@ -416,8 +416,10 @@ export function mountPlayerUI(player, root, options = {}) {
         visualizerText.textContent = label;
     };
     const renderTopPlaylist = () => {
+        const hasPlaylist = player.getPlaylists().length > 1 || player.getPlaylist().length > 1;
+        playlistTop.hidden = !hasPlaylist;
         const playlist = player.getCurrentPlaylist();
-        playlistTitle.textContent = playlist?.title ?? strings.playlist.defaultTitle;
+        playlistTitle.textContent = hasPlaylist ? (playlist?.title ?? strings.playlist.defaultTitle) : "";
     };
     const renderVisualizerPanel = () => {
         const mode = player.getVisualizer();
@@ -557,7 +559,6 @@ export function mountPlayerUI(player, root, options = {}) {
         closeButton: playlistClose,
     });
     unmounts.push(() => playlistPanelController.destroy());
-    unmounts.push(player.mountPlaylistTitle(playlistTitle));
     unmounts.push(player.mountShuffleToggle({
         button: shuffleToggle,
         labelElement: shuffleText,

package/dist-cjs/SmoothPlayer.js

@@ -329,8 +329,10 @@ class SmoothPlayer {
     mountPlaylistTitle(element, options = {}) {
         const fallbackTitle = options.fallbackTitle ?? DEFAULT_PLAYLIST_TITLE;
         const render = () => {
+            const hasPlaylist = this.getPlaylists().length > 1 || this.getActiveTracks().length > 1;
             const playlist = this.getCurrentPlaylist();
-            element.textContent = playlist?.title ?? fallbackTitle;
+            element.hidden = !hasPlaylist;
+            element.textContent = hasPlaylist ? (playlist?.title ?? fallbackTitle) : "";
         };
         render();
         const off = this.on("playlistchange", render);

package/dist-cjs/ui.js

@@ -15,7 +15,7 @@ function renderPlayerMarkup(root, debugEnabled) {
     root.innerHTML = `
     <div class="smooth-player__main">
       <div class="smooth-player__top">
-        <div class="smooth-player__top-title">${strings_js_1.strings.playlist.defaultTitle}</div>
+        <div class="smooth-player__top-title"></div>
         <button id="shuffle-toggle" type="button" aria-label="${strings_js_1.strings.shuffle.disabledLabel}" aria-pressed="false" hidden>
           <span class="smooth-player__icon-shuffle" aria-hidden="true"></span>
           <span id="shuffle-text" class="smooth-player__sr-only">${strings_js_1.strings.shuffle.disabledLabel}</span>
@@ -419,8 +419,10 @@ function mountPlayerUI(player, root, options = {}) {
         visualizerText.textContent = label;
     };
     const renderTopPlaylist = () => {
+        const hasPlaylist = player.getPlaylists().length > 1 || player.getPlaylist().length > 1;
+        playlistTop.hidden = !hasPlaylist;
         const playlist = player.getCurrentPlaylist();
-        playlistTitle.textContent = playlist?.title ?? strings_js_1.strings.playlist.defaultTitle;
+        playlistTitle.textContent = hasPlaylist ? (playlist?.title ?? strings_js_1.strings.playlist.defaultTitle) : "";
     };
     const renderVisualizerPanel = () => {
         const mode = player.getVisualizer();
@@ -560,7 +562,6 @@ function mountPlayerUI(player, root, options = {}) {
         closeButton: playlistClose,
     });
     unmounts.push(() => playlistPanelController.destroy());
-    unmounts.push(player.mountPlaylistTitle(playlistTitle));
     unmounts.push(player.mountShuffleToggle({
         button: shuffleToggle,
         labelElement: shuffleText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smooth-player",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Typed audio player with spectrum and waveform analyzers",
   "type": "module",
   "workspaces": [

package/styles/common/_base.scss

@@ -39,6 +39,10 @@
 
 }
 
+.smooth-player [hidden] {
+  display: none !important;
+}
+
 .smooth-player.is-drag-over {
   border-color: color-mix(in srgb, var(--smooth-player-accent) 44%, #fff 56%);
   box-shadow: 0 0 0 sp-rem(2) color-mix(in srgb, var(--smooth-player-accent) 18%, transparent);

package/styles/themes/_nocturne.scss

@@ -59,6 +59,7 @@
     top: .75rem;
     right: 0;
     left: auto;
+    z-index: 2;
     width: 2.2rem;
     height: 1.6rem;
     display: block;
@@ -192,8 +193,11 @@
     inset: auto 0 0 0;
     z-index: 2;
     width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
     height: min(48%, 20rem);
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 0.8rem 1rem 1rem;
     border-top: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 0;