From f78fe69e51f370c00ffa9a05101448a1dfd0e00c Mon Sep 17 00:00:00 2001
From: David Trattnig <david@subsquare.at>
Date: Tue, 6 Sep 2022 11:00:18 +0200
Subject: [PATCH] docs: now playing widget
---
README.md | 32 +++++++++++++++++++++++++-------
1 file changed, 25 insertions(+), 7 deletions(-)
diff --git a/README.md b/README.md
index bac6044..9628772 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.
--
GitLab