Playlist (#356)

* playlist * progress * parse seconds * muuuusic
royalfig · Aug 4, 2023 · 15715dd · 15715dd
1 parent 7879e62
commit 15715dd
Show file tree

Hide file tree

Showing 11 changed files with 824 additions and 152 deletions.
diff --git a/assets/css/abstracts/grid.css b/assets/css/abstracts/grid.css
@@ -42,17 +42,18 @@
   margin-block: var(--spacing-04);
 }
 
-.sm-music-grid {
+.sm-playlist-grid {
   grid-template-columns: 1fr;
   grid-column: content;
   gap: var(--spacing-06);
   margin-block: var(--spacing-04);
   overflow: hidden;
-  background-color: hsl(var(--surface-dark));
+  color: #fff;
+  background-color: #000314;
   border-radius: var(--radius);
 
   @media (--tablet) {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: max-content 1fr;
   }
 }
 

diff --git a/assets/css/components/playlist.css b/assets/css/components/playlist.css
@@ -0,0 +1,228 @@
+.sm-playlist-grid {
+  position: relative;
+  padding: var(--spacing-08);
+  overflow: hidden;
+
+  &.sm-playing {
+    background: none;
+  }
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: '';
+    background-image: var(--bg);
+    filter: blur(15px);
+    background-position-x: center;
+    opacity: 0;
+    transition: opacity 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
+    scale: 1.5;
+  }
+
+  &.sm-playing::before {
+    opacity: 1;
+  }
+
+  h3 {
+    margin: 0;
+    font-family: var(--body-typeface);
+    font-size: var(--h4);
+    font-style: italic;
+    font-weight: 400;
+  }
+
+  p {
+    margin-block-end: var(--spacing-04);
+    font-family: var(--ui-typeface);
+    font-size: var(--xx-small);
+    font-weight: 300;
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-expand);
+  }
+
+  ol {
+    min-height: 16rem;
+    padding-inline-start: 0;
+    margin-block-end: var(--spacing-04);
+    font-size: var(--small);
+    list-style-type: none;
+    counter-reset: li;
+  }
+
+  li::before {
+    margin-inline-end: var(--spacing-01);
+    font-variant-numeric: tabular-nums;
+    content: counter(li, decimal-leading-zero) '.';
+    content: attr(data-track) '.';
+    counter-increment: li;
+  }
+
+  .sm-active::before {
+    color: hsl(var(--color-1));
+    content: '▶️';
+  }
+
+  .sm-playlist-iframe {
+    display: none;
+  }
+}
+
+.sm-playlist-item {
+  text-align: left;
+}
+
+.sm-playlist-item-artist {
+  &::before {
+    content: '— ';
+    opacity: 0.5;
+  }
+}
+
+.sm-playlist-text {
+  position: relative;
+}
+
+.sm-playlist-controls {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-02);
+  align-items: center;
+  justify-content: center;
+}
+
+.sm-playlist-buttons {
+  display: flex;
+  gap: var(--spacing-01);
+  align-items: center;
+}
+
+.sm-playlist-button {
+  aspect-ratio: 1;
+  padding: var(--spacing-01);
+  line-height: 1;
+  color: #fff;
+  border-radius: 50%;
+  transition: background-color var(--transition);
+
+  &:hover {
+    background-color: rgb(255 255 255 / 20%);
+  }
+
+  svg {
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: currentcolor;
+  }
+
+  &[data-control='pause'] {
+    display: none;
+
+    svg {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  }
+
+  &[data-control='play'] {
+    svg {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  }
+}
+
+.sm-playing {
+  [data-control='pause'] {
+    display: initial;
+  }
+
+  [data-control='play'] {
+    display: none;
+  }
+
+  .sm-playlist-text {
+    color: white;
+  }
+}
+
+.sm-playlist-cover-art {
+  width: 100%;
+  max-width: 15rem;
+  aspect-ratio: 1 / 1;
+  background-color: hsl(var(--surface-darker));
+  background-position: center;
+  background-size: cover;
+  border-radius: var(--radius);
+}
+
+.sm-playlist-progress {
+  span {
+    position: absolute;
+    top: -3px;
+    font-size: var(--xx-small);
+    opacity: 0.7;
+
+    &:last-of-type {
+      right: 0;
+    }
+  }
+}
+
+.sm-playlist-volume {
+  display: flex;
+  gap: var(--spacing-01);
+  align-items: center;
+  line-height: 1;
+
+  svg {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    fill: currentcolor;
+  }
+}
+
+[data-volume='high'] {
+  :where(.sm-muted, .sm-low-volume) {
+    display: none;
+  }
+}
+
+[data-volume='low'] {
+  :where(.sm-muted, .sm-high-volume) {
+    display: none;
+  }
+}
+
+[data-volume='muted'] {
+  :where(.sm-low-volume, .sm-high-volume) {
+    display: none;
+  }
+}
+
+:where(.sm-playlist-progress, .sm-playlist-volume) {
+  position: relative;
+  width: 100%;
+  max-width: 15rem;
+
+  input {
+    width: 100%;
+    height: 5px;
+    accent-color: hsl(var(--color-1));
+  }
+}
+
+.sm-playlist-now-playing {
+  p {
+    margin-block-end: 0;
+    font-size: var(--small);
+    text-align: center;
+    text-transform: none;
+
+    &:first-child {
+      font-size: 1rem;
+    }
+  }
+}
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -35,6 +35,7 @@
 @import 'components/form.css';
 @import 'components/gradient.css';
 @import 'components/toc.css';
+@import 'components/playlist.css';
 
 /* Vendor */
 @import 'vendor/kg.css';

diff --git a/assets/css/pages/home.css b/assets/css/pages/home.css
@@ -15,68 +15,3 @@
     }
   }
 }
-
-.sm-music-grid {
-  align-items: center;
-
-  h3 {
-    margin: 0;
-    font-family: var(--body-typeface);
-    font-size: var(--h4);
-    font-style: italic;
-    font-weight: 400;
-  }
-
-  p {
-    margin-block-end: var(--spacing-04);
-    font-family: var(--ui-typeface);
-    font-size: var(--xx-small);
-    font-weight: 300;
-    color: hsl(var(--element-light) / 80%);
-    text-transform: uppercase;
-    letter-spacing: var(--letter-spacing-expand);
-  }
-
-  ol {
-    min-height: 16rem;
-    margin-block-end: var(--spacing-04);
-    font-size: var(--small);
-  }
-
-  .sm-music-iframe {
-    height: 100%;
-  }
-
-  iframe {
-    display: block;
-    width: 100%;
-    min-height: 16rem;
-    aspect-ratio: 16 / 9;
-
-    @media (--tablet) {
-      height: 100%;
-      aspect-ratio: unset;
-    }
-  }
-}
-
-.sm-music-text {
-  padding: var(--spacing-04);
-}
-
-.sm-music-pager-controls {
-  gap: var(--spacing-02);
-  justify-content: flex-start;
-
-  .sm-circle-icon-button {
-    border: 1px solid hsl(var(--element-light) / 80%);
-  }
-}
-
-.sm-music-page {
-  display: none;
-
-  &.sm-music-active {
-    display: block;
-  }
-}
diff --git a/assets/images/noise.svg b/assets/images/noise.svg
diff --git a/assets/js/app/app.js b/assets/js/app/app.js
@@ -1,16 +1,16 @@
-import "../../css/index.css";
+import '../../css/index.css';
 
-import initClickHandler from "./clickHandler";
-import { determineColorModeSupport } from "./colorModeToggle";
-import keyClickHandler from "./keyHandler";
-import generatePagination from "./pagination";
-import initMediumZoom from "./medium_zoom";
-import responsiveTableInit from "./responsiveTables";
-import writeAuthorWebsite from "./authorWebsite";
-import toc from "./toc";
-import animateOnScroll from "./homePageAnimation";
-import toggleShareMenu from "./toggleShareMenu";
-import { createMusicToggle, playlistFacadeGenerator } from "./musicPages";
+import initClickHandler from './clickHandler';
+import { determineColorModeSupport } from './colorModeToggle';
+import keyClickHandler from './keyHandler';
+import generatePagination from './pagination';
+import initMediumZoom from './medium_zoom';
+import responsiveTableInit from './responsiveTables';
+import writeAuthorWebsite from './authorWebsite';
+import toc from './toc';
+import animateOnScroll from './homePageAnimation';
+import toggleShareMenu from './toggleShareMenu';
+import { createPlaylist } from './musicPages';
 
 initClickHandler();
 determineColorModeSupport();
@@ -22,5 +22,4 @@ writeAuthorWebsite();
 toc();
 animateOnScroll();
 toggleShareMenu();
-createMusicToggle();
-playlistFacadeGenerator();
+createPlaylist();