react-modern-audio-player 2.2.0 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/README.md +75 -57
  2. package/dist/index.css +1 -1
  3. package/dist/index.es.js +994 -835
  4. package/dist/types/api/useAudioPlayer.d.ts +2 -0
  5. package/dist/types/api/useAudioPlayerPlayback.d.ts +2 -0
  6. package/dist/types/components/AudioPlayer/Context/PlaybackContext.d.ts +1 -0
  7. package/dist/types/components/AudioPlayer/Context/StateContext/audio.d.ts +2 -0
  8. package/dist/types/components/AudioPlayer/Context/StateContext/element.d.ts +1 -0
  9. package/dist/types/components/AudioPlayer/Context/StateContext/index.d.ts +2 -1
  10. package/dist/types/components/AudioPlayer/Context/StateContext/placement.d.ts +7 -5
  11. package/dist/types/components/AudioPlayer/Context/UIContext.d.ts +2 -1
  12. package/dist/types/components/AudioPlayer/Context/dispatchContext.d.ts +5 -2
  13. package/dist/types/components/AudioPlayer/Context/providerProps.d.ts +2 -1
  14. package/dist/types/components/AudioPlayer/Interface/Controller/SpeedSelector/SpeedSelector.d.ts +10 -0
  15. package/dist/types/components/AudioPlayer/Interface/Controller/SpeedSelector/index.d.ts +2 -0
  16. package/dist/types/components/AudioPlayer/Interface/Controller/Tooltip/Volume/index.d.ts +5 -1
  17. package/dist/types/components/AudioPlayer/Interface/hooks/index.d.ts +2 -0
  18. package/dist/types/components/AudioPlayer/Interface/hooks/useDropdownAutoPlacement.d.ts +5 -0
  19. package/dist/types/components/AudioPlayer/Interface/hooks/useResolvedDropdownProps.d.ts +18 -0
  20. package/dist/types/components/AudioPlayer/Player/index.d.ts +2 -2
  21. package/dist/types/components/AudioPlayer/Provider/AudioPlayerStateProvider.d.ts +2 -2
  22. package/dist/types/components/AudioPlayer/index.d.ts +5 -3
  23. package/package.json +1 -1
  24. package/dist/types/components/AudioPlayer/Interface/Controller/Tooltip/Volume/useVolume.d.ts +0 -5
package/README.md CHANGED
@@ -176,6 +176,7 @@ interface AudioPlayerProps {
176
176
  playList?: PlayListPlacement;
177
177
  interface?: InterfacePlacement;
178
178
  volumeSlider?: VolumeSliderPlacement;
179
+ speedSelector?: SpeedSelectorPlacement;
179
180
  };
180
181
  rootContainerProps?: RootContainerProps;
181
182
  colorScheme?: "light" | "dark";
@@ -262,6 +263,7 @@ type ActiveUI = {
262
263
  trackInfo: boolean;
263
264
  artwork: boolean;
264
265
  progress: ProgressUI;
266
+ playbackRate: boolean;
265
267
  };
266
268
  type ProgressUI = "waveform" | "bar" | false;
267
269
  type PlayListUI = "sortable" | "unSortable" | false;
@@ -306,7 +308,9 @@ type PlayerPlacement =
306
308
  | "top-left"
307
309
  | "top-right";
308
310
 
309
- type VolumeSliderPlacement = "bottom" | "top" | 'left' | 'right';
311
+ type VolumeSliderPlacement = "bottom" | "top" | "left" | "right";
312
+
313
+ type SpeedSelectorPlacement = "bottom" | "top" | "left" | "right";
310
314
 
311
315
  type PlayListPlacement = "bottom" | "top";
312
316
 
@@ -321,7 +325,7 @@ type InterfacePlacementKey =
321
325
  | "trackTimeCurrent"
322
326
  | "trackTimeDuration";
323
327
 
324
- type InterfacePlacementValue = "row1-1" | "row1-2" | "row1-3" | "row1-4" | ... more ... | "row9-9"
328
+ type InterfacePlacementValue = "row1-1" | "row1-2" | "row1-3" | "row1-4" | ... more ... | "row10-10"
325
329
  /** if you apply custom components, values must be "row1-1" ~ any more */
326
330
 
327
331
  type InterfaceGridTemplateArea = Record<InterfacePlacementKey,InterfacePlacementValue>;
@@ -352,6 +356,7 @@ const defaultInterfacePlacement = {
352
356
  volume: "row1-7",
353
357
  playButton: "row1-8",
354
358
  playList: "row1-9",
359
+ playbackRate: "row1-10",
355
360
  },
356
361
  };
357
362
  ```
@@ -471,26 +476,28 @@ function App() {
471
476
 
472
477
  ## AudioPlayerControls
473
478
 
474
- | Property | Type | Description |
475
- | ----------------- | -------------------------- | ------------------------- |
476
- | `isPlaying` | `boolean` | Current playback state |
477
- | `volume` | `number` | Current volume (0–1) |
478
- | `currentTime` | `number` | Elapsed time in seconds |
479
- | `duration` | `number` | Track duration in seconds |
480
- | `repeatType` | `RepeatType` | Current repeat mode |
481
- | `muted` | `boolean` | Whether audio is muted |
482
- | `currentTrack` | `AudioData \| null` | Currently playing track |
483
- | `currentIndex` | `number` | Index in playlist |
484
- | `playList` | `PlayList` | Full playlist |
485
- | `play()` | `() => void` | Start playback |
486
- | `pause()` | `() => void` | Pause playback |
487
- | `togglePlay()` | `() => void` | Toggle play/pause |
488
- | `next()` | `() => void` | Skip to next track |
489
- | `prev()` | `() => void` | Skip to previous track |
490
- | `seek(time)` | `(time: number) => void` | Seek to time in seconds |
491
- | `setVolume(vol)` | `(volume: number) => void` | Set volume (0–1, clamped) |
492
- | `toggleMute()` | `() => void` | Toggle mute on/off |
493
- | `setTrack(index)` | `(index: number) => void` | Jump to playlist index |
479
+ | Property | Type | Description |
480
+ | ----------------------- | -------------------------- | -------------------------------------------------------------- |
481
+ | `isPlaying` | `boolean` | Current playback state |
482
+ | `volume` | `number` | Current volume (0–1) |
483
+ | `currentTime` | `number` | Elapsed time in seconds |
484
+ | `duration` | `number` | Track duration in seconds |
485
+ | `repeatType` | `RepeatType` | Current repeat mode |
486
+ | `muted` | `boolean` | Whether audio is muted |
487
+ | `currentTrack` | `AudioData \| null` | Currently playing track |
488
+ | `currentIndex` | `number` | Index in playlist |
489
+ | `playList` | `PlayList` | Full playlist |
490
+ | `play()` | `() => void` | Start playback |
491
+ | `pause()` | `() => void` | Pause playback |
492
+ | `togglePlay()` | `() => void` | Toggle play/pause |
493
+ | `next()` | `() => void` | Skip to next track |
494
+ | `prev()` | `() => void` | Skip to previous track |
495
+ | `seek(time)` | `(time: number) => void` | Seek to time in seconds |
496
+ | `setVolume(vol)` | `(volume: number) => void` | Set volume (0–1, clamped) |
497
+ | `toggleMute()` | `() => void` | Toggle mute on/off |
498
+ | `setTrack(index)` | `(index: number) => void` | Jump to playlist index |
499
+ | `playbackRate` | `number` | Current playback rate (`1` = normal). Default `1`. |
500
+ | `setPlaybackRate(rate)` | `(rate: number) => void` | Set playback rate. No clamping; browser enforces HTML5 bounds. |
494
501
 
495
502
  ## Sub-Hooks
496
503
 
@@ -522,13 +529,13 @@ function TimeDisplay() {
522
529
  }
523
530
  ```
524
531
 
525
- | Hook | Returns |
526
- | ------------------------ | ------------------------------------------------------------------------------- |
527
- | `useAudioPlayerPlayback` | `{ isPlaying, repeatType, play, pause, togglePlay }` |
528
- | `useAudioPlayerTrack` | `{ currentPlayId, currentIndex, playList, currentTrack, setTrack, next, prev }` |
529
- | `useAudioPlayerVolume` | `{ volume, muted, setVolume, toggleMute }` |
530
- | `useAudioPlayerTime` | `{ currentTime, duration, seek }` |
531
- | `useAudioPlayerElement` | `{ audioEl, waveformInst }` (advanced) |
532
+ | Hook | Returns |
533
+ | ------------------------ | ----------------------------------------------------------------------------------- |
534
+ | `useAudioPlayerPlayback` | `{ isPlaying, repeatType, playbackRate, play, pause, togglePlay, setPlaybackRate }` |
535
+ | `useAudioPlayerTrack` | `{ currentPlayId, currentIndex, playList, currentTrack, setTrack, next, prev }` |
536
+ | `useAudioPlayerVolume` | `{ volume, muted, setVolume, toggleMute }` |
537
+ | `useAudioPlayerTime` | `{ currentTime, duration, seek }` |
538
+ | `useAudioPlayerElement` | `{ audioEl, waveformInst }` (advanced) |
532
539
 
533
540
  # Context Hooks
534
541
 
@@ -563,21 +570,34 @@ You can place a custom component anywhere in the player interface using `AudioPl
563
570
  import AudioPlayer, {
564
571
  useAudioPlayer,
565
572
  InterfacePlacement,
573
+ DEFAULT_INTERFACE_GRID_BOUND,
566
574
  } from "react-modern-audio-player";
567
575
 
568
576
  const activeUI: ActiveUI = {
569
577
  all: true,
570
578
  };
571
579
 
580
+ // `as 12` pins the literal type — TS arithmetic widens
581
+ // `DEFAULT_INTERFACE_GRID_BOUND + 1` to `number`, which would erase grid-coord
582
+ const TOTAL_INTERFACE_GRID_BOUND = (DEFAULT_INTERFACE_GRID_BOUND + 1) as 12;
583
+
584
+ // `row1-${DEFAULT_INTERFACE_GRID_BOUND}` resolves to `"row1-11"` —
585
+ // the first cell beyond the default template area (which fills 1..10).
586
+ const customComponentGridArea = `row1-${DEFAULT_INTERFACE_GRID_BOUND}`;
587
+
572
588
  const placement = {
573
589
  interface: {
574
590
  customComponentsArea: {
575
- playerCustomComponent: "row1-10",
591
+ playerCustomComponent: customComponentGridArea,
576
592
  },
577
- } as InterfacePlacement<11>,
593
+ } as InterfacePlacement<typeof TOTAL_INTERFACE_GRID_BOUND>,
578
594
  /**
579
- * set the generic value of InterfacePlacement to the max interface length + 1
580
- * for correct "row1-10" autocompletion
595
+ * The generic on `InterfacePlacement<N>` is an exclusive upper bound on grid
596
+ * indices — usable cells are `1..(N - 1)`. Default is
597
+ * `DEFAULT_INTERFACE_GRID_BOUND` (= 11), giving cells `1..10` which the
598
+ * built-in template area already occupies (e.g. `playbackRate` at `row1-10`).
599
+ * To reserve an additional cell for the custom component, pass `<N + 1>` —
600
+ * here `<12>` makes `row1-11` a valid coordinate.
581
601
  */
582
602
  };
583
603
 
@@ -606,18 +626,19 @@ const CustomComponent = () => {
606
626
 
607
627
  `AudioPlayer` exposes its built-in controls as static members so you can re-place or augment individual pieces without rebuilding the whole layout.
608
628
 
609
- | Member | Renders |
610
- | --- | --- |
611
- | `AudioPlayer.Progress` | progress bar / waveform |
612
- | `AudioPlayer.Volume` | volume trigger + slider |
613
- | `AudioPlayer.PlayList` | sortable playlist drawer (accepts `initialExpanded?`) |
614
- | `AudioPlayer.PlayListEmpty` | fallback rendered inside the playlist drawer when `playList` is empty |
615
- | [`AudioPlayer.PlayButton`](#audioplayerplaybutton-and-activeuiprevnnext) | Play + Prev + Next group (Prev/Next visibility follows `activeUI.prevNnext`) |
616
- | `AudioPlayer.RepeatButton` | repeat-type button |
617
- | `AudioPlayer.Artwork` | track artwork |
618
- | `AudioPlayer.TrackInfo` | track title / writer |
619
- | `AudioPlayer.TrackTime` | current + duration time |
620
- | `AudioPlayer.CustomComponent` | user-defined slot |
629
+ | Member | Renders |
630
+ | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
631
+ | `AudioPlayer.Progress` | progress bar / waveform |
632
+ | `AudioPlayer.Volume` | volume trigger + slider (accepts `triggerType?: "click" \| "hover"`, `placement?: VolumeSliderPlacement`) |
633
+ | `AudioPlayer.PlayList` | sortable playlist drawer (accepts `initialExpanded?`) |
634
+ | `AudioPlayer.PlayListEmpty` | fallback rendered inside the playlist drawer when `playList` is empty |
635
+ | [`AudioPlayer.PlayButton`](#audioplayerplaybutton-and-activeuiprevnnext) | Play + Prev + Next group (Prev/Next visibility follows `activeUI.prevNnext`) |
636
+ | `AudioPlayer.RepeatButton` | repeat-type button |
637
+ | `AudioPlayer.SpeedSelector` | playback rate dropdown (accepts `options?`, `formatRate?`, `triggerType?: "click" \| "hover"`, `placement?: SpeedSelectorPlacement`) |
638
+ | `AudioPlayer.Artwork` | track artwork |
639
+ | `AudioPlayer.TrackInfo` | track title / writer |
640
+ | `AudioPlayer.TrackTime` | current + duration time |
641
+ | `AudioPlayer.CustomComponent` | user-defined slot |
621
642
 
622
643
  Each slot accepts the full `GridItemLayoutProps` set — `gridArea?`, `visible?`, `width?`, `padding?`, `justifySelf?`, `UNSAFE_className?` — plus its own domain props. `AudioPlayer.TrackTime` is the exception: it only exposes `visible?` because the slot maps to two grid areas internally.
623
644
 
@@ -632,11 +653,8 @@ The two layers are orthogonal. Compound children render **additively** alongside
632
653
 
633
654
  ```tsx
634
655
  // Remove the default volume, re-place it with a custom gridArea
635
- <AudioPlayer
636
- playList={playList}
637
- activeUI={{ all: true, volume: false }}
638
- >
639
- <AudioPlayer.Volume gridArea="1 / 5 / 1 / 6" />
656
+ <AudioPlayer playList={playList} activeUI={{ all: true, volume: false }}>
657
+ <AudioPlayer.Volume gridArea="row1-5" />
640
658
  </AudioPlayer>
641
659
  ```
642
660
 
@@ -720,13 +738,13 @@ The player follows WAI-ARIA patterns and is fully navigable by keyboard and scre
720
738
 
721
739
  All controls are reachable via `Tab` and respond to standard keyboard activation. The playlist uses the WAI-ARIA "Listbox with Rearrangeable Options" pattern:
722
740
 
723
- | Key | Action |
724
- | --- | --- |
725
- | `Tab` / `Shift+Tab` | Move focus between player controls |
726
- | `Space` / `Enter` | Activate the focused button (play/pause, prev/next, repeat, mute, playlist) |
727
- | `ArrowUp` / `ArrowDown` | Move focus between playlist items |
728
- | `Alt+ArrowUp` / `Alt+ArrowDown` | Reorder the focused playlist item |
729
- | `Enter` / `Space` on a playlist item | Select and play that track |
741
+ | Key | Action |
742
+ | ------------------------------------ | --------------------------------------------------------------------------- |
743
+ | `Tab` / `Shift+Tab` | Move focus between player controls |
744
+ | `Space` / `Enter` | Activate the focused button (play/pause, prev/next, repeat, mute, playlist) |
745
+ | `ArrowUp` / `ArrowDown` | Move focus between playlist items |
746
+ | `Alt+ArrowUp` / `Alt+ArrowDown` | Reorder the focused playlist item |
747
+ | `Enter` / `Space` on a playlist item | Select and play that track |
730
748
 
731
749
  Drag-and-drop reordering is preserved as an alternative — keyboard and mouse both call the same `onReorder` handler.
732
750
 
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .rmap-player-provider{--rm-audio-player-text-color: #2c2c2c;--rm-audio-player-shadow: 0 0 0;--rm-audio-player-interface-container: #f5f5f5;--rm-audio-player-volume-background: #ccc;--rm-audio-player-volume-panel-background: #f2f2f2;--rm-audio-player-volume-panel-border: #ccc;--rm-audio-player-volume-thumb: #5c5c5c;--rm-audio-player-volume-fill: rgba(0, 0, 0, .5);--rm-audio-player-volume-track: #ababab;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #8c8c8c;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #393939;--rm-audio-player-waveform-cursor: #4b4b4b;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #eaeaea;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #b3b3b3;color:var(--rm-audio-player-text-color)}@media (prefers-color-scheme: dark){.rmap-player-provider:not([data-theme=light]){--rm-audio-player-text-color: #ededed;--rm-audio-player-shadow: 255 255 255;--rm-audio-player-interface-container: #1e1e1e;--rm-audio-player-volume-background: #5c5c5c;--rm-audio-player-volume-panel-background: #2c2c2c;--rm-audio-player-volume-panel-border: #393939;--rm-audio-player-volume-thumb: #d3d3d3;--rm-audio-player-volume-fill: rgba(255, 255, 255, .5);--rm-audio-player-volume-track: #494949;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #a2a2a2;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #d1d1d1;--rm-audio-player-waveform-cursor: #c8c8c8;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #2c2c2c;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #5c5c5c}}.rmap-player-provider[data-theme=dark]{--rm-audio-player-text-color: #ededed;--rm-audio-player-shadow: 255 255 255;--rm-audio-player-interface-container: #1e1e1e;--rm-audio-player-volume-background: #5c5c5c;--rm-audio-player-volume-panel-background: #2c2c2c;--rm-audio-player-volume-panel-border: #393939;--rm-audio-player-volume-thumb: #d3d3d3;--rm-audio-player-volume-fill: rgba(255, 255, 255, .5);--rm-audio-player-volume-track: #494949;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #a2a2a2;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #d1d1d1;--rm-audio-player-waveform-cursor: #c8c8c8;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #2c2c2c;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #5c5c5c}.rmap-player-provider *{box-sizing:border-box;font:inherit;font-size:100%}.rmap-player-provider ol,.rmap-player-provider ul{list-style:none;margin:0;padding:0}.rmap-player-provider blockquote,.rmap-player-provider q{quotes:none}.rmap-player-provider blockquote:before,.rmap-player-provider blockquote:after,.rmap-player-provider q:before,.rmap-player-provider q:after{content:none}.rmap-player-provider table{border-collapse:collapse;border-spacing:0}.rmap-player-provider button{margin:0;padding:0;background:transparent;color:inherit;cursor:pointer;vertical-align:baseline;border:0}.rmap-ctrl-btn-wrapper{display:flex;align-items:center;gap:10px}.styled-btn.rmap-play-btn{width:35px}.styled-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;width:20px;height:100%;transition:transform .2s ease-out,opacity .2s ease-out}.styled-btn svg{width:100%;height:100%;pointer-events:none}.styled-btn:hover{transform:scale(1.1)}.styled-btn:focus-visible{outline:2px solid var(--rm-audio-player-progress-bar, #0072f5);outline-offset:2px}.styled-btn:active{transform:scale(.8);opacity:.5}.rmap-drawer-container{position:relative;min-width:20px;min-height:20px}.rmap-drawer-container .rmap-drawer-trigger{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;display:flex}.rmap-drawer-container .rmap-drawer-trigger[aria-expanded=true] svg{color:var(--rm-audio-player-sortable-list-button-active)}.rmap-drawer-container .rmap-drawer-content{transform-origin:center top}.rmap-drawer-container .rmap-drawer-content-enter{animation:rmap-appearance-in .25s ease-out forwards}.rmap-drawer-container .rmap-drawer-content-leave{animation:rmap-appearance-out .1s ease-in forwards}.rmap-sortable-list-container,.rmap-sortable-list-container li{list-style-type:none}.rmap-sortable-list-container{cursor:pointer}.rmap-sortable-item{border-top:2px solid transparent;border-bottom:2px solid transparent;transition:opacity .3s ease-in-out,transform .3s ease-in-out,box-shadow .3s ease-in-out,backdrop-filter .3s ease-in-out}.rmap-sortable-item *{pointer-events:none}.rmap-sortable-item.rmap-drag-start{opacity:.5}.rmap-sortable-item.rmap-drag-over{transform:scale(1.02);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 3.58195px 22.3872px -2.68646px rgb(var( --rm-audio-player-shadow, 0 0 0 ) / 20%)}.rmap-sortable-item-inner{display:flex;align-items:center}.rmap-playlist-item{width:100%;height:100%;display:flex;align-items:center;padding:10px 20px}.rmap-playlist-item.rmap-cur-played{background:var(--rm-audio-player-selected-list-item-background)}.rmap-playlist-item .rmap-playlist-item-contents{width:100%;display:flex;gap:10px}.rmap-playlist-item .rmap-playlist-album-cover{display:flex;align-items:center}.rmap-playlist-item .rmap-playlist-album-cover img{width:35px;height:35px}.rmap-playlist-item .rmap-playlist-album-info{display:grid;min-width:10px;font-size:13px;margin-right:1.5rem;padding:2px 0%}.rmap-playlist-item .rmap-playlist-album-info span{align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rmap-playlist-container{transition-property:max-height,opacity;overflow-x:hidden;overflow-y:auto}.rmap-playlist-container.rmap-playlist-content-enter{opacity:0;max-height:0}.rmap-playlist-container.rmap-playlist-content-enter-active{opacity:1;max-height:20vh;transition-duration:.5s;transition-timing-function:cubic-bezier(0,0,0,1.2)}.rmap-playlist-container.rmap-playlist-content-leave{opacity:1;max-height:20vh}.rmap-playlist-container.rmap-playlist-content-leave-active{opacity:0;max-height:0;transition-duration:.25s;transition-timing-function:cubic-bezier(.66,-.41,1,1)}.rmap-bar-progress-wrapper{display:flex;width:100%;height:18px;padding:8px 0;cursor:pointer;position:relative;align-items:center}.rmap-bar-progress-wrapper .rmap-progress-bar{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--rm-audio-player-progress-bar-background)}.rmap-bar-progress-wrapper .rmap-progress-fill{position:absolute;left:0;width:100%;height:100%;background-color:var(--rm-audio-player-progress-bar);transform-origin:0 0;transform:scaleX(0)}.rmap-bar-progress-wrapper .rmap-progress-handle{position:absolute;left:-4px;background-color:var(--rm-audio-player-progress-bar);border-radius:50%;height:8px;width:8px;opacity:0;transition:opacity .2s ease-in-out}.rmap-bar-progress-wrapper:hover .rmap-progress-handle,.rmap-bar-progress-wrapper:focus-visible .rmap-progress-handle{opacity:1}.rmap-bar-progress-wrapper:focus-visible{outline:2px solid var(--rm-audio-player-progress-bar, #0072f5);outline-offset:2px}.rmap-waveform-wrapper{display:flex;width:100%}.rmap-waveform-wrapper[data-active=false]{height:0;opacity:0;pointer-events:none}.rmap-waveform-wrapper #rm-waveform{width:100%;overflow:hidden}.rmap-waveform-wrapper #rm-waveform wave{cursor:pointer!important;overflow-x:hidden!important}.rmap-progress-container{min-width:100px}.rmap-volume-container{position:relative;height:119px;width:32px;display:flex;align-items:center;justify-content:center}.rmap-volume-container[data-placement=top]{bottom:auto}.rmap-volume-container[data-placement=left]{transform:rotate(-90deg);right:50px}.rmap-volume-container[data-placement=right]{transform:rotate(90deg);left:50px}.rmap-volume-container[data-placement=bottom]{transform:rotateX(180deg);top:5px}.rmap-volume-container .rmap-volume-panel{width:30px;background-color:var(--rm-audio-player-volume-panel-background);border:1px solid var(--rm-audio-player-volume-panel-border);border-radius:5px;height:118px;box-shadow:0 2px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 10%);position:absolute;bottom:5px}.rmap-volume-container .rmap-volume-panel:before{content:"";bottom:-10px;left:7.9px;border-color:transparent transparent var(--rm-audio-player-volume-panel-border) var(--rm-audio-player-volume-panel-border);border-style:solid;border-width:5px;box-shadow:-3px 3px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 10%);position:absolute;width:0;height:0;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);pointer-events:none;z-index:0}.rmap-volume-container .rmap-volume-panel:after{content:"";bottom:-8px;left:9px;border-color:transparent transparent var(--rm-audio-player-volume-panel-background) var(--rm-audio-player-volume-panel-background);border-style:solid;border-width:4px;z-index:1;position:absolute;width:0;height:0;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);pointer-events:none}.rmap-volume-container input[type=range]{margin-left:14px;position:absolute;display:block;top:-45px;left:0;height:2px;width:92px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--rm-audio-player-volume-background);transform-origin:75px 75px;transform:rotate(-90deg)}.rmap-volume-container input:focus:not(:focus-visible){outline-color:transparent}.rmap-volume-container input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:12px;overflow:visible;background:var(--rm-audio-player-volume-thumb)}.rmap-volume-container input::-moz-range-thumb{width:16px;height:16px;border-radius:12px;overflow:visible;background:var(--rm-audio-player-volume-thumb);border:none}.rmap-volume-container input::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;overflow:visible;color:transparent;cursor:pointer;border-radius:2%/50%;border-color:transparent;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:100% 3px;background-image:linear-gradient(90deg,var(--rm-audio-player-volume-fill) var(--rm-audio-player-volume-value),var(--rm-audio-player-volume-track) var(--rm-audio-player-volume-value))}.rmap-volume-container input::-webkit-slider-runnable-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;overflow:visible;color:transparent;cursor:pointer;border-radius:2%/50%;border-color:transparent;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:100% 3px;background-image:linear-gradient(90deg,var(--rm-audio-player-volume-fill) var(--rm-audio-player-volume-value),var(--rm-audio-player-volume-track) var(--rm-audio-player-volume-value))}@keyframes rmap-appearance-in{0%{opacity:0;transform:scale(.95)}60%{opacity:.75;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes rmap-appearance-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.rmap-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;min-width:20px;min-height:20px}.rmap-dropdown-container .rmap-dropdown-trigger{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;display:flex}.rmap-dropdown-container .rmap-dropdown-content{transform-origin:center top}.rmap-dropdown-container .rmap-dropdown-content-enter{animation:rmap-appearance-in .25s ease-out normal forwards}.rmap-dropdown-container .rmap-dropdown-content-leave{animation:rmap-appearance-out .1s ease-in forwards}.rmap-artwork-container{display:flex;align-items:center;width:100%;height:100%}.rmap-artwork-container img,.rmap-artwork-container .rmap-artwork-fallback{width:50px;height:50px}.rmap-artwork-container .rmap-artwork-fallback{display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:13px}.rmap-track-info-container{display:grid;align-items:center;row-gap:5px}.rmap-track-info-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rmap-track-info-container .title{font-size:16px}.rmap-track-info-container .writer{font-size:12px}.rmap-track-time-container{display:flex;align-items:center;justify-content:center;min-height:16px;font-family:monospace!important;font-size:16px!important}.rmap-track-time-container[data-position=left] .rmap-track-current-time,.rmap-track-time-container[data-position=left] .rmap-track-duration{margin-right:-10px}.rmap-track-time-container[data-position=right] .rmap-track-current-time:before,.rmap-track-time-container[data-position=right] .rmap-track-duration:before{content:"/";margin:0 .3rem}.rmap-track-time-current .rmap-track-current-time{font-weight:700;letter-spacing:-.1rem;color:var(--rm-audio-player-track-current-time)}.rmap-track-time-duration .rmap-track-duration{display:flex;color:var(--rm-audio-player-track-duration);letter-spacing:-.1rem}.rmap-interface-container .rmap-interface-grid{background:var(--rm-audio-player-interface-container);padding:.5rem 10px}.rmap-interface-container .rmap-sortable-playlist{background:var(--rm-audio-player-sortable-list);box-shadow:-5px 2px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 4%) inset}
1
+ .rmap-player-provider{--rm-audio-player-text-color: #2c2c2c;--rm-audio-player-shadow: 0 0 0;--rm-audio-player-interface-container: #f5f5f5;--rm-audio-player-volume-background: #ccc;--rm-audio-player-volume-panel-background: #f2f2f2;--rm-audio-player-volume-panel-border: #ccc;--rm-audio-player-volume-thumb: #5c5c5c;--rm-audio-player-volume-fill: rgba(0, 0, 0, .5);--rm-audio-player-volume-track: #ababab;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #8c8c8c;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #393939;--rm-audio-player-waveform-cursor: #4b4b4b;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #eaeaea;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #b3b3b3;color:var(--rm-audio-player-text-color)}@media (prefers-color-scheme: dark){.rmap-player-provider:not([data-theme=light]){--rm-audio-player-text-color: #ededed;--rm-audio-player-shadow: 255 255 255;--rm-audio-player-interface-container: #1e1e1e;--rm-audio-player-volume-background: #5c5c5c;--rm-audio-player-volume-panel-background: #2c2c2c;--rm-audio-player-volume-panel-border: #393939;--rm-audio-player-volume-thumb: #d3d3d3;--rm-audio-player-volume-fill: rgba(255, 255, 255, .5);--rm-audio-player-volume-track: #494949;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #a2a2a2;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #d1d1d1;--rm-audio-player-waveform-cursor: #c8c8c8;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #2c2c2c;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #5c5c5c}}.rmap-player-provider[data-theme=dark]{--rm-audio-player-text-color: #ededed;--rm-audio-player-shadow: 255 255 255;--rm-audio-player-interface-container: #1e1e1e;--rm-audio-player-volume-background: #5c5c5c;--rm-audio-player-volume-panel-background: #2c2c2c;--rm-audio-player-volume-panel-border: #393939;--rm-audio-player-volume-thumb: #d3d3d3;--rm-audio-player-volume-fill: rgba(255, 255, 255, .5);--rm-audio-player-volume-track: #494949;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #a2a2a2;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #d1d1d1;--rm-audio-player-waveform-cursor: #c8c8c8;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #2c2c2c;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #5c5c5c}.rmap-player-provider *{box-sizing:border-box;font:inherit;font-size:100%}.rmap-player-provider ol,.rmap-player-provider ul{list-style:none;margin:0;padding:0}.rmap-player-provider blockquote,.rmap-player-provider q{quotes:none}.rmap-player-provider blockquote:before,.rmap-player-provider blockquote:after,.rmap-player-provider q:before,.rmap-player-provider q:after{content:none}.rmap-player-provider table{border-collapse:collapse;border-spacing:0}.rmap-player-provider button{margin:0;padding:0;background:transparent;color:inherit;cursor:pointer;vertical-align:baseline;border:0}.rmap-ctrl-btn-wrapper{display:flex;align-items:center;gap:10px}.styled-btn.rmap-play-btn{width:35px}.styled-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;width:20px;height:100%;transition:transform .2s ease-out,opacity .2s ease-out}.styled-btn svg{width:100%;height:100%;pointer-events:none}.styled-btn:hover{transform:scale(1.1)}.styled-btn:focus-visible{outline:2px solid var(--rm-audio-player-progress-bar, #0072f5);outline-offset:2px}.styled-btn:active{transform:scale(.8);opacity:.5}.rmap-drawer-container{position:relative;min-width:20px;min-height:20px}.rmap-drawer-container .rmap-drawer-trigger{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;display:flex}.rmap-drawer-container .rmap-drawer-trigger[aria-expanded=true] svg{color:var(--rm-audio-player-sortable-list-button-active)}.rmap-drawer-container .rmap-drawer-content{transform-origin:center top}.rmap-drawer-container .rmap-drawer-content-enter{animation:rmap-appearance-in .25s ease-out forwards}.rmap-drawer-container .rmap-drawer-content-leave{animation:rmap-appearance-out .1s ease-in forwards}.rmap-sortable-list-container,.rmap-sortable-list-container li{list-style-type:none}.rmap-sortable-list-container{cursor:pointer}.rmap-sortable-item{border-top:2px solid transparent;border-bottom:2px solid transparent;transition:opacity .3s ease-in-out,transform .3s ease-in-out,box-shadow .3s ease-in-out,backdrop-filter .3s ease-in-out}.rmap-sortable-item *{pointer-events:none}.rmap-sortable-item.rmap-drag-start{opacity:.5}.rmap-sortable-item.rmap-drag-over{transform:scale(1.02);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 3.58195px 22.3872px -2.68646px rgb(var( --rm-audio-player-shadow, 0 0 0 ) / 20%)}.rmap-sortable-item-inner{display:flex;align-items:center}.rmap-playlist-item{width:100%;height:100%;display:flex;align-items:center;padding:10px 20px}.rmap-playlist-item.rmap-cur-played{background:var(--rm-audio-player-selected-list-item-background)}.rmap-playlist-item .rmap-playlist-item-contents{width:100%;display:flex;gap:10px}.rmap-playlist-item .rmap-playlist-album-cover{display:flex;align-items:center}.rmap-playlist-item .rmap-playlist-album-cover img{width:35px;height:35px}.rmap-playlist-item .rmap-playlist-album-info{display:grid;min-width:10px;font-size:13px;margin-right:1.5rem;padding:2px 0%}.rmap-playlist-item .rmap-playlist-album-info span{align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rmap-playlist-container{transition-property:max-height,opacity;overflow-x:hidden;overflow-y:auto}.rmap-playlist-container.rmap-playlist-content-enter{opacity:0;max-height:0}.rmap-playlist-container.rmap-playlist-content-enter-active{opacity:1;max-height:20vh;transition-duration:.5s;transition-timing-function:cubic-bezier(0,0,0,1.2)}.rmap-playlist-container.rmap-playlist-content-leave{opacity:1;max-height:20vh}.rmap-playlist-container.rmap-playlist-content-leave-active{opacity:0;max-height:0;transition-duration:.25s;transition-timing-function:cubic-bezier(.66,-.41,1,1)}.rmap-bar-progress-wrapper{display:flex;width:100%;height:18px;padding:8px 0;cursor:pointer;position:relative;align-items:center}.rmap-bar-progress-wrapper .rmap-progress-bar{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--rm-audio-player-progress-bar-background)}.rmap-bar-progress-wrapper .rmap-progress-fill{position:absolute;left:0;width:100%;height:100%;background-color:var(--rm-audio-player-progress-bar);transform-origin:0 0;transform:scaleX(0)}.rmap-bar-progress-wrapper .rmap-progress-handle{position:absolute;left:-4px;background-color:var(--rm-audio-player-progress-bar);border-radius:50%;height:8px;width:8px;opacity:0;transition:opacity .2s ease-in-out}.rmap-bar-progress-wrapper:hover .rmap-progress-handle,.rmap-bar-progress-wrapper:focus-visible .rmap-progress-handle{opacity:1}.rmap-bar-progress-wrapper:focus-visible{outline:2px solid var(--rm-audio-player-progress-bar, #0072f5);outline-offset:2px}.rmap-waveform-wrapper{display:flex;width:100%}.rmap-waveform-wrapper[data-active=false]{height:0;opacity:0;pointer-events:none}.rmap-waveform-wrapper #rm-waveform{width:100%;overflow:hidden}.rmap-waveform-wrapper #rm-waveform wave{cursor:pointer!important;overflow-x:hidden!important}.rmap-progress-container{min-width:100px}.styled-btn.rmap-speed-selector-trigger{box-sizing:border-box;width:auto;min-width:44px;height:20px;padding-top:2px;align-items:center;justify-content:center;font:inherit;font-variant-numeric:tabular-nums;line-height:1;color:var(--rm-audio-player-text-color);border-radius:4px}.rmap-dropdown-container .rmap-dropdown-trigger.rmap-speed-selector-trigger{position:static;inset:auto}.styled-btn.rmap-speed-selector-trigger:hover{transform:none;color:var(--rm-audio-player-track-current-time)}.styled-btn.rmap-speed-selector-trigger:active{transform:scale(.95)}.rmap-speed-selector-menu{list-style:none;margin:0;padding:4px;min-width:64px;background-color:var(--rm-audio-player-volume-panel-background);border:1px solid var(--rm-audio-player-volume-panel-border);border-radius:5px;box-shadow:0 2px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 10%);display:flex;flex-direction:column}.rmap-speed-selector-option{width:100%;background:none;border:none;cursor:pointer;text-align:center;font:inherit;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--rm-audio-player-text-color);border-radius:3px;transition:background-color .15s ease-out,color .15s ease-out}.rmap-speed-selector-option:hover{background-color:rgb(var(--rm-audio-player-shadow, 0 0 0) / 8%)}.rmap-speed-selector-option:focus-visible{outline:2px solid var(--rm-audio-player-progress-bar, #0072f5);outline-offset:-2px}.rmap-speed-selector-option.rmap-speed-selector-option--active{color:var(--rm-audio-player-track-current-time);font-weight:600}.rmap-speed-selector-menu .rmap-speed-selector-option{padding:6px 12px}@keyframes rmap-appearance-in{0%{opacity:0;transform:scale(.95)}60%{opacity:.75;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes rmap-appearance-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.rmap-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;min-width:20px;min-height:20px}.rmap-dropdown-container .rmap-dropdown-trigger{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;display:flex}.rmap-dropdown-container .rmap-dropdown-content{transform-origin:center top}.rmap-dropdown-container .rmap-dropdown-content-enter{animation:rmap-appearance-in .25s ease-out normal forwards}.rmap-dropdown-container .rmap-dropdown-content-leave{animation:rmap-appearance-out .1s ease-in forwards}.rmap-volume-container{position:relative;height:119px;width:32px;display:flex;align-items:center;justify-content:center}.rmap-volume-container[data-placement=top]{bottom:auto}.rmap-volume-container[data-placement=left]{transform:rotate(-90deg);right:50px}.rmap-volume-container[data-placement=right]{transform:rotate(90deg);left:50px}.rmap-volume-container[data-placement=bottom]{transform:rotateX(180deg);top:5px}.rmap-volume-container .rmap-volume-panel{width:30px;background-color:var(--rm-audio-player-volume-panel-background);border:1px solid var(--rm-audio-player-volume-panel-border);border-radius:5px;height:118px;box-shadow:0 2px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 10%);position:absolute;bottom:5px}.rmap-volume-container .rmap-volume-panel:before{content:"";bottom:-10px;left:7.9px;border-color:transparent transparent var(--rm-audio-player-volume-panel-border) var(--rm-audio-player-volume-panel-border);border-style:solid;border-width:5px;box-shadow:-3px 3px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 10%);position:absolute;width:0;height:0;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);pointer-events:none;z-index:0}.rmap-volume-container .rmap-volume-panel:after{content:"";bottom:-8px;left:9px;border-color:transparent transparent var(--rm-audio-player-volume-panel-background) var(--rm-audio-player-volume-panel-background);border-style:solid;border-width:4px;z-index:1;position:absolute;width:0;height:0;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);pointer-events:none}.rmap-volume-container input[type=range]{margin-left:14px;position:absolute;display:block;top:-45px;left:0;height:2px;width:92px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--rm-audio-player-volume-background);transform-origin:75px 75px;transform:rotate(-90deg)}.rmap-volume-container input:focus:not(:focus-visible){outline-color:transparent}.rmap-volume-container input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:12px;overflow:visible;background:var(--rm-audio-player-volume-thumb)}.rmap-volume-container input::-moz-range-thumb{width:16px;height:16px;border-radius:12px;overflow:visible;background:var(--rm-audio-player-volume-thumb);border:none}.rmap-volume-container input::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;overflow:visible;color:transparent;cursor:pointer;border-radius:2%/50%;border-color:transparent;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:100% 3px;background-image:linear-gradient(90deg,var(--rm-audio-player-volume-fill) var(--rm-audio-player-volume-value),var(--rm-audio-player-volume-track) var(--rm-audio-player-volume-value))}.rmap-volume-container input::-webkit-slider-runnable-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;overflow:visible;color:transparent;cursor:pointer;border-radius:2%/50%;border-color:transparent;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:100% 3px;background-image:linear-gradient(90deg,var(--rm-audio-player-volume-fill) var(--rm-audio-player-volume-value),var(--rm-audio-player-volume-track) var(--rm-audio-player-volume-value))}.rmap-artwork-container{display:flex;align-items:center;width:100%;height:100%}.rmap-artwork-container img,.rmap-artwork-container .rmap-artwork-fallback{width:50px;height:50px}.rmap-artwork-container .rmap-artwork-fallback{display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:13px}.rmap-track-info-container{display:grid;align-items:center;row-gap:5px}.rmap-track-info-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rmap-track-info-container .title{font-size:16px}.rmap-track-info-container .writer{font-size:12px}.rmap-track-time-container{display:flex;align-items:center;justify-content:center;min-height:16px;font-family:monospace!important;font-size:16px!important}.rmap-track-time-container[data-position=left] .rmap-track-current-time,.rmap-track-time-container[data-position=left] .rmap-track-duration{margin-right:-10px}.rmap-track-time-container[data-position=right] .rmap-track-current-time:before,.rmap-track-time-container[data-position=right] .rmap-track-duration:before{content:"/";margin:0 .3rem}.rmap-track-time-current .rmap-track-current-time{font-weight:700;letter-spacing:-.1rem;color:var(--rm-audio-player-track-current-time)}.rmap-track-time-duration .rmap-track-duration{display:flex;color:var(--rm-audio-player-track-duration);letter-spacing:-.1rem}.rmap-interface-container .rmap-interface-grid{background:var(--rm-audio-player-interface-container);padding:.5rem 10px}.rmap-interface-container .rmap-sortable-playlist{background:var(--rm-audio-player-sortable-list);box-shadow:-5px 2px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 4%) inset}