feat: embed optional apps in player server

apps/lib/arcast.js

@@ -0,0 +1,46 @@
+(function (Arcast) {
+  Arcast.getInfo = function () {
+    return fetch("/api/v1/info")
+      .then((res) => res.json())
+      .then((res) => res.data);
+  };
+
+  Arcast.getBroadcastingChannel = function (id, onmessage) {
+    var scheme = "wss";
+    if (window.location.protocol === "http:") {
+      scheme = "ws";
+    }
+    var ws = new WebSocket(
+      `${scheme}://${window.location.host}/api/v1/broadcast/${id}`
+    );
+
+    var channel = {
+      opened: false,
+      send: (message) => {
+        ws.send(message);
+      },
+      close: () => {
+        ws.close();
+      },
+    };
+
+    ws.onmessage = (evt) => {
+      if (typeof onmessage !== "function") {
+        return;
+      }
+
+      onmessage(evt.data);
+    };
+    ws.onclose = () => {
+      ws.onmessage = null;
+      ws.onclose = null;
+      ws.onopen = null;
+      channel.opened = false;
+    };
+    ws.onopen = () => {
+      channel.opened = true;
+    };
+
+    return channel;
+  };
+})((window.Arcast = window.Arcast || {}));

apps/lib/manifest.json

@@ -0,0 +1,3 @@
+{
+    "hidden": true
+}

apps/lib/style.css

@@ -0,0 +1,77 @@
+html {
+    box-sizing: border-box;
+    font-size: 16px;
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    width: 100%;
+    height: 100%;
+    background-color: #e1e1e1;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.panel {
+    display: block;
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 10px 20px;
+    box-shadow: 2px 2px #3333331d;
+}
+
+.panel p, .panel ul {
+    margin-top: 10px;
+}
+
+.text-centered {
+    text-align: center;
+}
+
+.text-italic {
+    font-style: italic;
+}
+
+.text-small {
+    font-size: 0.8em;
+}
+
+.fullwidth {
+    width: 100%;
+}