shish · shish · Mar 26, 2023
diff --git a/browser2/src/browser.d.ts b/browser2/src/browser.d.ts
@@ -80,6 +80,7 @@ type State = {
     widescreen: boolean;
     scroll_stack: Array<number>;
     now: number;
+    casting: boolean;
 
     // login
     session_id: string | null;

diff --git a/browser2/src/browser.ts b/browser2/src/browser.ts
@@ -10,6 +10,7 @@ import {
 import { Root } from "./screens/root";
 import { BeLoggedIn, getMQTTListener, ResizeListener } from "./subs";
 import { ApiRequest } from "./effects";
+import { CastSender } from "./cc_sender";
 
 declare global {
     namespace JSX {
@@ -44,6 +45,7 @@ let state: State = {
     widescreen: isWidescreen(),
     scroll_stack: [],
     now: Date.now() / 1000,
+    casting: false,
 
     // login
     session_id: null,
@@ -153,6 +155,7 @@ const subscriptions = (state: State): Array<Subscription | boolean> => [
             return { ...state, now: timestamp_ms / 1000 };
         },
     }),
+    state.casting && CastSender(state.room_name, state.room_password),
 ];
 
 app({

diff --git a/browser2/src/cc_sender.tsx b/browser2/src/cc_sender.tsx
@@ -0,0 +1,46 @@
+function _castSender(dispatch, props) {
+    var applicationID = '05C10F57';
+    var session = null;
+
+    function bail(e) {
+        console.log("cast error", e);
+        dispatch((state) => ({...state, casting: false}));
+    }
+
+    var apiConfig = new chrome.cast.ApiConfig(
+        new chrome.cast.SessionRequest(applicationID),
+        function (s) { console.log("session", s); },  // session listener
+        function (r) { console.log("receiver", r); }, // receiver listener
+    );
+    chrome.cast.initialize(
+        apiConfig,
+        function () { },  // ok
+        function (e) { bail(e); },  // err
+    );
+    chrome.cast.requestSession(
+        function (s) {
+            session = s;
+            session.setReceiverMuted(false);
+            session.setReceiverVolumeLevel(1.00);
+            session.sendMessage('urn:x-cast:uk.karakara', {
+                "command": "join",
+                "room_name": props.room_name,
+                "room_password": props.room_password,
+            });
+        },
+        function (e) {bail(e);}
+    );
+
+    return function () {
+        if (session) {
+            session.stop(
+                function () { session = null; },
+                function (e) { console.log("session stop err", e); },
+            );
+        }
+    }
+}
+
+export function CastSender(name, pass): Subscription {
+    return [_castSender, { room_name: name, room_password: pass }];
+}
diff --git a/browser2/src/index.html b/browser2/src/index.html
@@ -9,5 +9,6 @@
         <link href="static/style.scss" rel="stylesheet" type="text/css" />
     </head>
     <body><noscript>This page requires JavaScript</noscript></body>
+    <script type="text/javascript" src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
     <script type="module" src="browser.ts"></script>
 </html>
diff --git a/browser2/src/screens/control.tsx b/browser2/src/screens/control.tsx
@@ -236,13 +236,20 @@ const ControlButtons = (): VNode => (
     </footer>
 );
 
+export const CastButton = ({ state }: { state: State }): VNode => (
+    (window.chrome && chrome.cast && chrome.cast.isAvailable) &&
+        <a onclick={(state) => ({...state, casting: !state.casting})}>
+            <i class={"fab fa-2x fa-chromecast"} />
+        </a>
+);
+
 export const Control = ({ state }: { state: State }): VNode => (
     <Screen
         state={state}
         className={"queue"}
         navLeft={!state.widescreen && <BackToExplore />}
         title={"Remote Control"}
-        // navRight={}
+        navRight={<CastButton state={state} />}
         footer={<ControlButtons />}
     >
         {current_and_future(state.now, state.queue).length == 0 ? (

diff --git a/browser2/src/static/_brands.css b/browser2/src/static/_brands.css
@@ -0,0 +1,14 @@
+/*!
+ * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@font-face {
+  font-family: 'Font Awesome 5 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("fa-brands-400.woff2") format("woff2"); }
+
+.fab {
+  font-family: 'Font Awesome 5 Brands';
+  font-weight: 400; }
diff --git a/browser2/src/static/fa-brands-400.woff2 b/browser2/src/static/fa-brands-400.woff2
diff --git a/player2/src/cc_receiver.tsx b/player2/src/cc_receiver.tsx
@@ -0,0 +1,30 @@
+function _castReceiver(dispatch, props) {
+    let crm = cast.receiver.CastReceiverManager.getInstance();
+    crm.onReady = function (event) {
+        crm.setApplicationState("Application ready");
+    };
+    let bus = crm.getCastMessageBus('urn:x-cast:uk.karakara');
+    bus.onMessage = function (event) {
+        var msg = JSON.parse(event.data);
+        console.groupCollapsed("cast_onmessage(", event.target ,")")
+        console.log(msg);
+        console.groupEnd();
+        dispatch(function (state) {
+            return {
+                ...state,
+                room_name: msg.room_name,
+                room_password: msg.room_password
+            };
+        });
+        //bus.send(event.senderId, event.data);
+    }
+    crm.start({ statusText: "Application starting" });
+
+    return function () {
+        crm.stop();
+    }
+}
+
+export function CastReceiver(): Subscription {
+    return [_castReceiver, {}];
+}
diff --git a/player2/src/index.html b/player2/src/index.html
@@ -9,5 +9,6 @@
         <link href="static/style.scss" rel="stylesheet" type="text/css" />
     </head>
     <body><noscript>This page requires JavaScript</noscript></body>
+    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
     <script type="module" src="player.ts"></script>
 </html>
diff --git a/player2/src/player.ts b/player2/src/player.ts
@@ -16,6 +16,7 @@ import {
 } from "./subs";
 import { ApiRequest } from "./effects";
 import { current_and_future } from "./utils";
+import { CastReceiver } from "./cc_receiver";
 
 declare global {
     namespace JSX {
@@ -163,6 +164,7 @@ const subscriptions = (state: State): Array<Subscription | boolean> => [
             };
         },
     }),
+    window.location.search.includes("chromecast=true") && CastReceiver(),
 ];
 
 app({