docs: now playing widget

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.