Initial commit

2026-06-11 01:59:58 +00:00 · 2018-06-08 04:56:02 +01:00
commit d815fb7af0
70 changed files with 8370 additions and 0 deletions
--- a/ext/src/popup/index.css
+++ b/ext/src/popup/index.css
@@ -0,0 +1,52 @@
+body {
+    background: -moz-dialog;
+    color: -moz-dialogtext;
+    margin: initial;
+    font: message-box;
+}
+
+.receivers {
+    list-style: none;
+    margin: initial;
+    padding: initial;
+}
+.receiver {
+    column-gap: 0.75em;
+    display: grid;
+    flex-direction: column;
+    grid-template-columns: 1fr min-content;
+    grid-template-rows: min-content min-content 1fr;
+    grid-template-areas:
+        "name connect"
+        "address connect"
+        ". connect";
+    justify-content: center;
+    padding: 0.75em 1em;
+    position: relative;
+}
+
+
+.receiver:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+.receiver-name,
+.receiver-address {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.receiver-name {
+    font-size: 1.1em;
+    grid-area: name;
+}
+.receiver-address {
+    color: GrayText;
+    grid-area: address;
+}
+.receiver-connect {
+    grid-area: connect;
+    justify-self: end;
+    min-width: 100px;
+}
--- a/ext/src/popup/index.html
+++ b/ext/src/popup/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <link rel="stylesheet" href="index.css">
+        <script src="bundle.js" defer></script>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
--- a/ext/src/popup/index.js
+++ b/ext/src/popup/index.js
@@ -0,0 +1,146 @@
+"use strict";
+
+import React, { Component } from "react";
+import ReactDOM             from "react-dom";
+
+const _ = browser.i18n.getMessage;
+
+let winWidth = 350;
+let winHeight = 200;
+
+let frameHeight;
+let frameWidth;
+
+
+class App extends Component {
+    constructor () {
+        super();
+
+        this.state = {
+            receivers: []
+          , isLoading: false
+        };
+
+        // Store window ref
+        browser.windows.getCurrent().then(win => {
+            this.win = win;
+            frameHeight = win.height - window.innerHeight;
+            frameWidth = win.width - window.innerWidth;
+        });
+    }
+
+    componentDidMount () {
+        browser.runtime.sendMessage({
+            subject: "shim:popupReady"
+        });
+
+        browser.runtime.onMessage.addListener(message => {
+            switch (message.subject) {
+                case "popup:populate":
+                    this.setState({
+                        receivers: message.data
+                    });
+
+                    winHeight = document.body.clientHeight + frameHeight;
+
+                    browser.windows.update(this.win.id, {
+                        height: winHeight
+                    });
+
+                    break;
+
+                case "popup:close":
+                    window.close();
+                    break;
+            }
+        });
+    }
+
+    onCast (receiver) {
+        this.setState({
+            isLoading: true
+        });
+
+        browser.runtime.sendMessage({
+            subject: "shim:selectReceiver"
+          , data: receiver
+        });
+    }
+
+    render () {
+        return (
+            <ul className="receivers">
+                { this.state.receivers.map(receiver => {
+                    return (
+                       <Receiver receiver={receiver}
+                                 onCast={this.onCast.bind(this)}
+                                 isLoading={this.state.isLoading} />
+                    );
+                })}
+            </ul>
+        );
+    }
+}
+
+class Receiver extends Component {
+    constructor () {
+        super();
+
+        this.state = {
+            isLoading: false
+          , ellipsis: ""
+        };
+    }
+
+    onClick () {
+        this.props.onCast(this.props.receiver);
+
+        this.setState({
+            isLoading: true
+        });
+
+        setInterval(() => {
+            this.setState({
+                ellipsis: do {
+                         if (this.state.ellipsis === "")    ".";
+                    else if (this.state.ellipsis === ".")   "..";
+                    else if (this.state.ellipsis === "..")  "...";
+                    else if (this.state.ellipsis === "...") "";
+                }
+            });
+
+        }, 500);
+    }
+
+    render () {
+        return (
+            <li className="receiver">
+                <div className="receiver-name">
+                    { this.props.receiver.friendlyName }
+                </div>
+                <div className="receiver-address">
+                    { `${this.props.receiver._address}:${this.props.receiver._port}` }
+                </div>
+                <button className="receiver-connect"
+                        onClick={this.onClick.bind(this)}
+                        disabled={this.props.isLoading}>
+                    { do {
+                        if (this.state.isLoading) {
+                            _("popup_casting_button_label") +
+                                (this.state.isLoading
+                                    ? this.state.ellipsis
+                                    : "" )
+                        } else {
+                            _("popup_cast_button_label")
+                        }
+                    }}
+                </button>
+            </li>
+        );
+    }
+}
+
+
+ReactDOM.render(
+    <App />
+  , document.querySelector("#root"));