feat(demo): media player popup

922296e5 · David Trattnig · f17aa6d3 · 922296e5
Commit 922296e5 authored 2 years ago by David Trattnig
--- a/public/player_popup.html
+++ b/public/player_popup.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+    <title>Aura Media Player</title>
+
+    <link rel="shortcut icon" href="/assets/aura_fav96x96.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="description" content="AURA PWA and Web Component Demo" />
+    <meta name="theme-color" content="#2196f3" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="apple-mobile-web-app-title" content="AURA PWA" />
+    <link rel="stylesheet" href="/aura-demo.css" />
+
+    <link rel="stylesheet" href="/build/smui.css" />
+    <link rel="stylesheet" href="/build/aura-player-bundle.css" />
+    <link rel="stylesheet" href="/aura-player-theme.css" />
+    <script defer src="/build/aura-player-bundle.js"></script>
+  </head>
+  <style>
+    html,
+    body {
+      background-color: #fff;
+      overflow: hidden;
+    }
+
+    #media-player-popup #aura-media-player {
+      border-radius: 0;
+      box-shadow: none;
+    }
+    #media-player-popup #play-pause:hover {
+      background: rgb(238, 174, 202);
+      background: radial-gradient(
+        circle,
+        rgb(238, 174, 202) 10%,
+        rgb(148, 187, 233) 50%
+      );
+      box-shadow: 0 0 0 2px rgba(238, 174, 202, 1);
+    }
+  </style>
+
+  <body>
+    <div id="media-player-popup"></div>
+    <script>
+      /** Inject component into HTML **/
+      document.addEventListener('DOMContentLoaded', function (event) {
+        new AuraMediaPlayer({
+          target: document.getElementById('media-player-popup'),
+          props: {
+            renderhtml: true,
+            stream: 'https://securestream.o94.at/live.mp3',
+          },
+        })
+      })
+    </script>
+  </body>
+</html>