@gentomiyano/optimized-web-audio-player 0.1.0

package/dist/ui/player-views.css

@@ -0,0 +1,654 @@
+.player-compact,
+.player-wide,
+.player-detailed,
+.player-podcast,
+.player-mini,
+.player-queue-panel {
+  container-name: player-surface;
+  container-type: inline-size;
+}
+
+.player-compact {
+  max-width: 480px;
+  overflow: visible;
+}
+
+.player-compact__main {
+  display: grid;
+  grid-template-areas:
+    "play artwork metadata volume"
+    "play artwork signal volume";
+  grid-template-columns: auto 48px minmax(0, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  column-gap: 0.65rem;
+  row-gap: 0.18rem;
+  padding: 0.55rem 0.65rem;
+}
+
+.player-compact__main > .player-play-button {
+  grid-area: play;
+  min-width: var(--player-hit);
+  min-height: var(--player-hit);
+}
+
+.player-compact__artwork {
+  grid-area: artwork;
+  width: 48px;
+  height: 48px;
+}
+
+.player-compact__main > .player-metadata {
+  grid-area: metadata;
+  gap: 0.05rem;
+}
+
+.player-compact .player-collection {
+  display: none;
+}
+
+.player-compact .player-title {
+  font-size: 0.82rem;
+}
+
+.player-compact .player-creator {
+  font-size: 0.63rem;
+}
+
+.player-compact__signal {
+  display: grid;
+  grid-area: signal;
+  grid-template-columns: auto minmax(48px, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  gap: 0.4rem;
+}
+
+.player-compact__main > .player-volume-popover {
+  grid-area: volume;
+}
+
+.player-compact .player-waveform {
+  height: 14px;
+}
+
+.player-compact .player-status,
+.player-compact .player-time {
+  font-size: 0.52rem;
+  letter-spacing: 0.05em;
+}
+
+.player-compact .player-time {
+  gap: 0.18rem;
+}
+
+.player-wide {
+  max-width: 680px;
+}
+
+.player-wide__grid {
+  min-width: 0;
+}
+
+.player-wide__header {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  align-items: center;
+  min-width: 0;
+  gap: clamp(0.9rem, 3vw, 1.2rem);
+  padding: 0.9rem 1.1rem;
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-wide__artwork {
+  width: 96px;
+  height: 96px;
+}
+
+.player-wide__identity {
+  display: grid;
+  min-width: 0;
+  gap: 0.55rem;
+}
+
+.player-wide[data-appearance="light"] .player-wide__identity {
+  padding: 0.65rem 0.8rem;
+  border: 1px solid var(--player-lcd-rule);
+  background: var(--player-lcd);
+}
+
+.player-wide__identity .player-title {
+  font-size: clamp(1.05rem, 4cqi, 1.42rem);
+  font-weight: 350;
+}
+
+.player-wide__content {
+  display: grid;
+  min-width: 0;
+  gap: 0.35rem;
+  padding: 0.65rem 1.1rem 0.8rem;
+}
+
+.player-wide .player-transport {
+  padding-top: 0.4rem;
+  border-top: 1px solid var(--player-faint);
+}
+
+.player-timeline,
+.player-podcast__timeline {
+  display: grid;
+  grid-template-rows: auto auto auto;
+  min-width: 0;
+}
+
+.player-timeline > .player-waveform,
+.player-podcast__timeline > .player-waveform {
+  grid-row: 1;
+}
+
+.player-timeline > .player-seek,
+.player-podcast__timeline > .player-seek {
+  grid-row: 2;
+}
+
+.player-timeline > .player-wide__timeline-footer,
+.player-podcast__timeline > .player-time {
+  grid-row: 3;
+}
+
+.player-wide .player-waveform {
+  height: 50px;
+  margin-block: 0;
+}
+
+.player-timeline .player-seek,
+.player-podcast__timeline .player-seek {
+  min-height: 30px;
+}
+
+.player-wide__timeline-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 1.5rem;
+}
+
+.player-wide__timeline-footer .player-time {
+  width: min(13rem, 42%);
+}
+
+.player-wide__timeline-footer .player-volume {
+  justify-content: flex-end;
+}
+
+.player-detailed {
+  max-width: 720px;
+}
+
+.player-detailed__display {
+  display: grid;
+  grid-template-columns: 170px minmax(0, 1fr) 126px;
+  min-width: 0;
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-detailed__artwork {
+  width: 170px;
+  min-height: 170px;
+}
+
+.player-detailed__primary {
+  display: grid;
+  align-content: center;
+  min-width: 0;
+  gap: 0.25rem;
+  padding: 0.65rem 1.2rem 0.25rem;
+  border-right: 1px solid var(--player-faint);
+}
+
+.player-detailed[data-appearance="light"] .player-detailed__primary {
+  background: var(--player-lcd);
+}
+
+.player-detailed__primary .player-title {
+  font-size: clamp(1.02rem, 3.2cqi, 1.32rem);
+  font-weight: 350;
+}
+
+.player-detailed__primary .player-waveform {
+  height: 28px;
+}
+
+.player-detailed__primary .player-seek {
+  min-height: 30px;
+}
+
+.player-detailed__numbers {
+  display: grid;
+  align-content: center;
+  min-width: 0;
+  gap: 0.55rem;
+  padding: 0.95rem;
+}
+
+.player-detailed__metric {
+  display: grid;
+  min-width: 0;
+  gap: 0.12rem;
+  justify-items: end;
+}
+
+.player-detailed__metric-label {
+  color: var(--player-muted);
+  font-size: 0.5rem;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.player-detailed__metric-value {
+  color: var(--player-text);
+  font-family: var(--player-font-digital);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.09em;
+}
+
+.player-detailed__transport {
+  padding: 0.4rem 1rem;
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 38px;
+  border-bottom: 1px solid var(--player-faint);
+  color: var(--player-muted);
+  font-size: 0.67rem;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.player-detailed__queue {
+  padding: 0 1rem 0.65rem;
+}
+
+.player-detailed__queue ol,
+.player-queue-panel ol {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.player-detailed__queue li,
+.player-queue-panel li {
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-detailed__queue li:last-child,
+.player-queue-panel li:last-child {
+  border-bottom: 0;
+}
+
+.player-detailed__queue li[data-current="true"],
+.player-queue-panel li[data-current="true"] {
+  background: var(--player-active-wash);
+}
+
+.player-detailed__queue li[data-current="true"] .player-queue-number,
+.player-detailed__queue li[data-current="true"] .player-queue-title,
+.player-queue-panel li[data-current="true"] .player-queue-number {
+  color: var(--player-brand);
+}
+
+.player-detailed__queue li[data-current="true"] .player-queue-title,
+.player-queue-panel li[data-current="true"] .player-queue-copy strong {
+  font-weight: 650;
+}
+
+.player-detailed__queue li > button {
+  display: grid;
+  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
+  align-items: center;
+  width: 100%;
+  min-height: 38px;
+  padding: 0 0.55rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.player-detailed__queue li > button:hover,
+.player-queue-panel li > button:hover {
+  background: var(--player-faint);
+}
+
+.player-detailed__queue time,
+.player-queue-panel time {
+  color: var(--player-muted);
+  font-family: var(--player-font-digital);
+  font-size: 0.66rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.player-queue-title {
+  overflow: hidden;
+  font-size: 0.76rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-empty {
+  margin: 0;
+  padding: 1.4rem 0.6rem;
+  color: var(--player-muted);
+  font-size: 0.8rem;
+}
+
+.player-podcast {
+  max-width: 760px;
+}
+
+.player-podcast__header {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  gap: clamp(1rem, 4vw, 1.6rem);
+  padding: 1.15rem;
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-podcast__artwork {
+  width: 112px;
+  height: 112px;
+}
+
+.player-podcast__header .player-title {
+  font-size: clamp(1.05rem, 3.6cqi, 1.4rem);
+  font-weight: 350;
+}
+
+.player-podcast[data-appearance="light"]
+  .player-podcast__header
+  > .player-metadata {
+  padding: 0.65rem 0.8rem;
+  border: 1px solid var(--player-lcd-rule);
+  background: var(--player-lcd);
+}
+
+.player-podcast__transport {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(0.15rem, 2vw, 1rem);
+  padding: 0.45rem 1rem;
+  border-top: 1px solid var(--player-rule);
+}
+
+.player-podcast__timeline {
+  padding: 0.75rem 1.15rem 1.1rem;
+}
+
+.player-podcast__timeline .player-waveform {
+  height: 60px;
+}
+
+.player-mini {
+  max-width: 100%;
+  overflow: visible;
+}
+
+.player-mini__main {
+  display: grid;
+  grid-template-columns: 48px minmax(120px, 1fr) auto auto minmax(130px, 0.65fr);
+  align-items: center;
+  min-width: 0;
+  gap: 0.55rem;
+  padding: 0.4rem 0.65rem;
+}
+
+.player-mini__artwork {
+  width: 48px;
+  height: 48px;
+}
+
+.player-mini__controls {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.player-mini__timeline {
+  display: grid;
+  min-width: 0;
+}
+
+.player-mini__timeline .player-seek {
+  min-height: 24px;
+}
+
+.player-queue-panel {
+  max-width: 460px;
+}
+
+.player-queue-panel > header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  min-height: 60px;
+  padding: 0.5rem 0.65rem 0.5rem 1rem;
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-queue-panel h2 {
+  margin: 0.12rem 0 0;
+  overflow: hidden;
+  font-size: 0.92rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-queue-panel li > button {
+  display: grid;
+  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
+  align-items: center;
+  width: 100%;
+  min-height: 48px;
+  padding: 0.3rem 0.8rem 0.3rem 0.65rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.player-queue-copy {
+  display: grid;
+  min-width: 0;
+  gap: 0.08rem;
+}
+
+.player-queue-copy strong,
+.player-queue-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-queue-copy strong {
+  font-size: 0.78rem;
+  font-weight: 540;
+}
+
+.player-queue-copy small {
+  color: var(--player-muted);
+  font-size: 0.66rem;
+}
+
+.player-transport .player-icon-button:not(.player-play-button),
+.player-podcast__transport .player-icon-button:not(.player-play-button) {
+  color: var(--player-muted);
+}
+
+.player-transport .player-icon-button[aria-pressed="true"],
+.player-transport .player-icon-button:hover:not(:disabled),
+.player-podcast__transport .player-icon-button:hover:not(:disabled) {
+  color: var(--player-brand);
+}
+
+@container player-surface (max-width: 680px) {
+  .player-detailed__display {
+    grid-template-columns: 104px minmax(0, 1fr);
+  }
+
+  .player-detailed__artwork {
+    width: 104px;
+    height: 104px;
+    min-height: 0;
+    align-self: start;
+  }
+
+  .player-detailed__primary {
+    padding: 0.75rem;
+    border-right: 0;
+  }
+
+  .player-detailed__primary .player-waveform {
+    height: 24px;
+  }
+
+  .player-detailed__numbers {
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    border-top: 1px solid var(--player-faint);
+  }
+
+  .player-detailed__metric {
+    justify-items: start;
+  }
+
+  .player-detailed__transport {
+    padding-inline: 0.5rem;
+  }
+
+  .player-detailed__transport .player-transport {
+    width: 100%;
+    justify-content: space-between;
+    gap: 0;
+  }
+
+  .player-podcast__header {
+    grid-template-columns: 86px minmax(0, 1fr);
+    gap: 0.85rem;
+    padding: 0.85rem;
+  }
+
+  .player-podcast__artwork {
+    width: 86px;
+    height: 86px;
+  }
+
+  .player-podcast__header > .player-status {
+    grid-column: 2;
+  }
+
+  .player-podcast__transport {
+    gap: 0;
+    padding-inline: 0.3rem;
+  }
+
+  .player-mini__main {
+    grid-template-columns: 46px minmax(0, 1fr) auto;
+  }
+
+  .player-mini__controls > .player-volume-popover {
+    display: none;
+  }
+
+  .player-mini__artwork {
+    width: 46px;
+    height: 46px;
+  }
+
+  .player-mini__main > .player-status,
+  .player-mini__timeline {
+    display: none;
+  }
+}
+
+@container player-surface (max-width: 440px) {
+  .player-compact__main {
+    grid-template-areas:
+      "play artwork metadata"
+      "play artwork signal";
+    grid-template-columns: auto 48px minmax(0, 1fr);
+  }
+
+  .player-compact__main > .player-volume-popover {
+    display: none;
+  }
+
+  .player-compact__signal {
+    grid-template-columns: minmax(48px, 1fr) auto;
+  }
+
+  .player-compact .player-status {
+    display: none;
+  }
+
+  .player-wide__header {
+    grid-template-columns: 78px minmax(0, 1fr);
+    gap: 0.85rem;
+    padding: 0.85rem;
+  }
+
+  .player-wide__artwork {
+    width: 78px;
+    height: 78px;
+  }
+
+  .player-wide__identity {
+    gap: 0.55rem;
+  }
+
+  .player-wide__content {
+    padding: 0.7rem 0.85rem 1rem;
+  }
+
+  .player-wide__timeline-footer .player-volume {
+    display: none;
+  }
+
+  .player-wide__timeline-footer .player-time {
+    width: 100%;
+  }
+
+  .player-transport {
+    justify-content: space-between;
+  }
+
+  .player-detailed__queue {
+    padding-inline: 0.5rem;
+  }
+
+  .player-detailed__transport {
+    padding-inline: 0.25rem;
+  }
+
+  .player-queue-panel > header {
+    padding-left: 0.65rem;
+  }
+
+  .player-queue-panel li > button {
+    grid-template-columns: 1.9rem minmax(0, 1fr) auto;
+    padding-inline: 0.45rem;
+  }
+}

package/dist/ui/styles.css

@@ -0,0 +1,2 @@
+@import "./player-tokens.css";
+@import "./player-views.css";