From b8a5ccdaf822885fd4f2ef382d75e66d02d54bbc Mon Sep 17 00:00:00 2001
From: David Trattnig <david@subsquare.at>
Date: Tue, 6 Sep 2022 10:54:30 +0200
Subject: [PATCH] docs: media player button
---
README.md | 50 +++++++++++++++++++++++++++++++++++++++++++-------
1 file changed, 43 insertions(+), 7 deletions(-)
diff --git a/README.md b/README.md
index 22ac98a..bac6044 100644
--- a/README.md
+++ b/README.md
@@ -38,18 +38,19 @@ Provided components:
1. [Website Integration](#website-integration)
2. [Components](#components)
1. [Media Player](#media-player)
- 2. [Programme Information](#programme-information)
- 3. [Track Service](#track-service)
- 4. [Online Status (Toast Notification)](#online-status-toast-notification)
- 5. [Host](#host)
+ 2. [Media Player Button](#media-player-button)
+ 3. [Programme Information](#programme-information)
+ 4. [Track Service](#track-service)
+ 5. [Online Status (Toast Notification)](#online-status-toast-notification)
+ 6. [Host](#host)
1. [Host List Component](#host-list-component)
2. [Host Detail Component](#host-detail-component)
- 6. [Show](#show)
+ 7. [Show](#show)
1. [Show List Component](#show-list-component)
2. [Show Detail Component](#show-detail-component)
- 7. [Episode](#episode)
+ 8. [Episode](#episode)
1. [Episode Detail Component](#episode-detail-component)
- 8. [Category](#category)
+ 9. [Category](#category)
1. [Category List Component](#category-list-component)
3. [Progressive Web App](#progressive-web-app)
1. [Service Worker](#service-worker)
@@ -91,6 +92,41 @@ Renders the Radio Media Player.
</script>
```
+### Media Player Button
+
+Display a button to either add a track to playlist (`type='add'`) or add and play (`type='play'`).
+
+This currently only works when the player is part of the page, not when being used in popup mode.
+
+```html
+<div class="demo-album component-container">
+ <div class="album-art lorn"></div>
+ <div
+ id="media-player-button-play"
+ class="media-player-button component-container"
+ ></div>
+</div>
+<script>
+ /** Inject component into HTML **/
+ document.addEventListener('DOMContentLoaded', function (event) {
+ new AuraMediaPlayerButton({
+ target: document.getElementById('media-player-button-play'),
+ props: {
+ type: 'play',
+ label: 'Play',
+ track: {
+ name: 'Anvil',
+ artist: 'Lorn',
+ album: 'Anvil',
+ url: '/path/to/audio.mp3',
+ cover: '/path/to/audio-cover.png',
+ },
+ },
+ })
+ })
+</script>
+```
+
### Programme Information
Renders the daily programme info by listing all shows of the selected day.
--
GitLab