diff --git a/README.md b/README.md index 22ac98aacf1b03ffb01140a4324f6ad1497d678a..bac604404298d0deaf95fad1095969956307dfc5 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.