diff --git a/README.md b/README.md index bac604404298d0deaf95fad1095969956307dfc5..9628772c62a4e0fdb803e9f8f5bcae4c6feac8db 100644 --- a/README.md +++ b/README.md @@ -39,18 +39,19 @@ Provided components: 2. [Components](#components) 1. [Media Player](#media-player) 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) + 3. [Now Playing Widget](#now-playing-widget) + 4. [Programme Information](#programme-information) + 5. [Track Service](#track-service) + 6. [Online Status (Toast Notification)](#online-status-toast-notification) + 7. [Host](#host) 1. [Host List Component](#host-list-component) 2. [Host Detail Component](#host-detail-component) - 7. [Show](#show) + 8. [Show](#show) 1. [Show List Component](#show-list-component) 2. [Show Detail Component](#show-detail-component) - 8. [Episode](#episode) + 9. [Episode](#episode) 1. [Episode Detail Component](#episode-detail-component) - 9. [Category](#category) + 10. [Category](#category) 1. [Category List Component](#category-list-component) 3. [Progressive Web App](#progressive-web-app) 1. [Service Worker](#service-worker) @@ -127,6 +128,23 @@ This currently only works when the player is part of the page, not when being us </script> ``` +### Now Playing Widget + +Display a bar with the current show and episode details. When clicking the bar the media player opens in a popup window. + +```html +<div id="media-player-widget" class=""></div> +<script> + /** Inject component into HTML **/ + document.addEventListener('DOMContentLoaded', function (event) { + new AuraNowPlayingWidget({ + target: document.getElementById('media-player-widget'), + props: { popupUrl: '/player_popup.html' }, + }) + }) +</script> +``` + ### Programme Information Renders the daily programme info by listing all shows of the selected day.