Initial commit

.gitignore

@@ -0,0 +1,50 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/.parcel-cache
+/dist

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "ministream-frontend",
+  "version": "1.0.0",
+  "description": "",
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "scripts": {
+    "start": "parcel",
+    "build": "parcel build",
+    "type-check": "tsc --noEmit",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "parcel": "^2.10.3",
+    "process": "^0.11.10",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.2"
+  },
+  "dependencies": {
+    "@types/node": "^20.10.1",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "purecss": "^3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

src/css/style.css

@@ -0,0 +1,284 @@
+@import 'npm:purecss/build/pure.css';
+
+body {
+    color: #777;
+}
+
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+.menu-link {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout {
+    position: relative;
+    left: 0;
+    padding-left: 0;
+}
+
+#layout.active #menu {
+    left: 150px;
+    width: 150px;
+}
+
+#layout.active .menu-link {
+    left: 150px;
+}
+
+/*
+The content `<div>` is where all your content goes.
+*/
+.content {
+    margin: 0 auto;
+    padding: 0 2em;
+    margin-left: 150px;
+
+    /* max-width: 800px; */
+    margin-bottom: 50px;
+    line-height: 1.6em;
+}
+
+.content video {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    z-index: -100;
+    background-size: cover;
+    overflow: hidden;
+}
+
+.content p {
+    padding-left: 5em;
+}
+
+.header {
+    margin: 0;
+    color: #333;
+    text-align: center;
+    padding: 2.5em 2em 0;
+    border-bottom: 1px solid #eee;
+}
+
+.header h1 {
+    margin: 0.2em 0;
+    font-size: 3em;
+    font-weight: 300;
+}
+
+.header h2 {
+    font-weight: 300;
+    color: #ccc;
+    padding: 0;
+    margin-top: 0;
+}
+
+.content-subhead {
+    margin: 50px 0 20px 0;
+    font-weight: 300;
+    color: #888;
+}
+
+
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+
+#menu {
+    margin-left: -150px;
+    /* "#menu" width */
+    width: 240px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000;
+    /* so the menu or its navicon stays above all content */
+    background: #191818;
+    overflow-y: auto;
+}
+
+/*
+    All anchors inside the menu should be styled like this.
+    */
+#menu a {
+    color: #999;
+    border: none;
+    padding: 0.6em 0 0.6em 0.6em;
+}
+
+/*
+    Remove all background/borders, since we are applying them to #menu.
+    */
+#menu .pure-menu,
+#menu .pure-menu ul {
+    border: none;
+    background: transparent;
+}
+
+/*
+    Add that light border to separate items into groups.
+    */
+#menu .pure-menu ul,
+#menu .pure-menu .menu-item-divided {
+    border-top: 1px solid #333;
+}
+
+/*
+        Change color of the anchor links on hover/focus.
+        */
+#menu .pure-menu li a:hover,
+#menu .pure-menu li a:focus {
+    background: #333;
+}
+
+/*
+    This styles the selected menu item `<li>`.
+    */
+#menu .pure-menu-selected,
+#menu .pure-menu-heading {
+    background: #1f8dd6;
+}
+
+/*
+        This styles a link within a selected menu item `<li>`.
+        */
+#menu .pure-menu-selected a {
+    color: #fff;
+}
+
+/*
+    This styles the menu heading.
+    */
+#menu .pure-menu-heading {
+    font-size: 110%;
+    color: #fff;
+    margin: 0;
+}
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+    position: fixed;
+    display: block;
+    /* show this only on small screens */
+    top: 0;
+    left: 0;
+    /* "#menu width" */
+    background: #000;
+    background: rgba(0, 0, 0, 0.7);
+    font-size: 10px;
+    /* change this value to increase/decrease button size */
+    z-index: 10;
+    width: 2em;
+    height: auto;
+    padding: 2.1em 1.6em;
+}
+
+.menu-link:hover,
+.menu-link:focus {
+    background: #000;
+}
+
+.menu-link span {
+    position: relative;
+    display: block;
+}
+
+.menu-link span,
+.menu-link span:before,
+.menu-link span:after {
+    background-color: #fff;
+    pointer-events: none;
+    width: 100%;
+    height: 0.2em;
+}
+
+.menu-link span:before,
+.menu-link span:after {
+    position: absolute;
+    margin-top: -0.6em;
+    content: " ";
+}
+
+.menu-link span:after {
+    margin-top: 0.6em;
+}
+
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+/*
+Hides the menu at `48em`, but modify this based on your app's needs.
+*/
+@media (min-width: 48em) {
+
+    .header,
+    .content {
+        padding-left: 2em;
+        padding-right: 2em;
+    }
+
+    #layout {
+        padding-left: 150px;
+        /* left col width "#menu" */
+        left: 0;
+    }
+
+    #menu {
+        left: 150px;
+    }
+
+    .menu-link {
+        position: fixed;
+        left: 150px;
+        display: none;
+    }
+
+    #layout.active .menu-link {
+        left: 150px;
+    }
+}
+
+@media (max-width: 48em) {
+
+    /* Only apply this when the window is small. Otherwise, the following
+    case results in extra padding on the left:
+        * Make the window small.
+        * Tap the menu to trigger the active state.
+        * Make the window large again.
+    */
+    #layout.active {
+        position: relative;
+        left: 150px;
+    }
+}

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>stream.t-juice.club</title>
+    <script src="./js/app.tsx" type="module"></script>
+    <link rel="stylesheet" href="./css/style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <div id="app" />
+  </body>
+</html>

src/js/api.ts

@@ -0,0 +1,50 @@
+
+export class MinistreamApiClient {
+    ENV: string
+
+    constructor() {
+        if (process.env.NODE_ENV) {
+            this.ENV = process.env.NODE_ENV
+        } else {
+            this.ENV = "production"
+        }
+    }
+
+    async listStreams(): Promise<string[]> {
+        var data: string[] = [];
+        var url = "/whip"
+        if (this.ENV !== "production") {
+            url = "http://localhost:8080/whip"
+        }
+
+        try {
+            const resp = await fetch(
+                url,
+            );
+            const res = resp.json() as unknown as string[];
+            data = res;
+        }
+        catch (e) {
+            throw e;
+        }
+
+        return data;
+    }
+
+    async postOffer(streamKey: string, offer_sdp: RTCSessionDescription): Promise<RTCSessionDescription> {
+        var url = "/whip/" + streamKey
+        if (this.ENV !== "production") {
+            url = "http://localhost:8080/whip/" + streamKey
+        }
+
+        const resp = await fetch(url,
+            {
+                method: "POST",
+                body: offer_sdp.sdp
+            })
+        const body = await resp.text()
+        const answer = new RTCSessionDescription({type: "answer", sdp: body})
+
+        return answer
+    }
+}

src/js/app.tsx

@@ -0,0 +1,61 @@
+import { createRoot } from "react-dom/client";
+import React from "react";
+import { Menu } from "./menu";
+import { createContext, useState } from "react";
+import { MediaContainer } from "./media";
+import { MinistreamApiClient } from "./api";
+
+type ThemeContextType = "light" | "dark";
+
+const ThemeContext = createContext<ThemeContextType>("light");
+
+type AppState = {
+    streamList: string[]
+    selectedStream: string | undefined
+}
+type AppProps = {}
+
+export class App extends React.Component<AppProps, AppState> {
+    apiClient: MinistreamApiClient
+    constructor(props: AppProps) {
+        super(props)
+        this.state = {
+            streamList: [],
+            selectedStream: undefined
+        }
+        this.apiClient = new MinistreamApiClient()
+        this.updateSelect = this.updateSelect.bind(this)
+    }
+
+    async componentDidMount(): Promise<void> {
+        const streams = await this.apiClient.listStreams()
+        this.setState((state) => {
+            return { selectedStream: state.selectedStream, streamList: streams }
+        })
+    }
+
+    updateSelect(selected: string): void {
+        this.setState((state) => {
+            return { streamList: state.streamList, selectedStream: selected }
+        })
+    }
+
+    render() {
+        return (
+            <>
+                <Menu
+                    items={this.state.streamList}
+                    selectedItem={this.state.selectedStream}
+                    selectCallback={this.updateSelect}
+                />
+                <MediaContainer selectedStream={this.state.selectedStream} api={this.apiClient} />
+            </>
+        )
+    }
+}
+
+const rootElement = document.getElementById("app");
+if (rootElement) {
+    const root = createRoot(rootElement);
+    root.render(<App />)
+}

src/js/media.tsx

@@ -0,0 +1,130 @@
+import React, { ComponentProps } from "react"
+import { MinistreamApiClient } from "./api"
+import { resolve } from "path"
+
+type MediaContainerProps = {
+    selectedStream: string | undefined
+    api: MinistreamApiClient
+}
+
+type MediaContainerState = {
+    iceReady: boolean
+    remoteReady: boolean
+}
+
+export class MediaContainer extends React.Component<MediaContainerProps, MediaContainerState> {
+    api: MinistreamApiClient
+    pc: RTCPeerConnection
+    ms: MediaStream
+
+    constructor(props: MediaContainerProps) {
+        super(props)
+
+        this.api = props.api
+        this.state = {
+            iceReady: false,
+            remoteReady: false
+        }
+
+        this.pc = new RTCPeerConnection({
+            iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
+        })
+        this.pc.addTransceiver("video")
+        this.pc.addTransceiver("audio")
+
+        this.ms = new MediaStream()
+
+        this.pc.ontrack = (event) => {
+            console.log("Got track(s).")
+
+            event.streams.forEach(st => {
+                st.getTracks().forEach(t => {
+                    this.ms.addTrack(t)
+                })
+            })
+        }
+
+
+        this.pc.oniceconnectionstatechange = () => {
+            console.log("ICE state changed to " + this.pc?.iceConnectionState)
+        }
+    }
+
+    async componentDidMount() {
+        this.pc.onicecandidate = (event) => {
+            if (!event.candidate) {
+                console.log("ICE gathering complete.")
+                this.setState((state) => {
+                    return { iceReady: true, remoteReady: state.remoteReady }
+                })
+            } else {
+                console.log("Adding ICE candidate: " + event.candidate)
+            }
+        }
+        const offer = await this.pc?.createOffer()
+        await this.pc?.setLocalDescription(offer)
+        console.log("Set local description.")
+    }
+
+    async componentDidUpdate() {
+        if (!this.state.iceReady) {
+            return
+        }
+        if (!this.props.selectedStream) {
+            return
+        }
+        if (!this.state.remoteReady) {
+            console.log("Setting up remote for " + this.props.selectedStream + ".")
+            const remote = await this.setupRemote()
+            if (remote) {
+                this.pc.setRemoteDescription(remote)
+                console.log("Set up remote")
+                this.setState((state) => {
+                    return {iceReady: state.iceReady, remoteReady: true}
+                })
+            } else {
+                console.log("Could not set remote")
+            }
+        }
+    }
+
+    private setupRemote() {
+        if (!this.props.selectedStream) {
+            return
+        }
+        const localOfferSdp = this.pc?.localDescription?.sdp
+        if (!localOfferSdp) {
+            console.log("Could not get local description")
+            return
+        }
+        const localOffer = new RTCSessionDescription({ type: "offer", sdp: localOfferSdp })
+        return this.api.postOffer(this.props.selectedStream, localOffer)
+    }
+
+    renderVideo() {
+        if (!this.props.selectedStream) {
+            return <p>Waiting for stream selection.</p>
+        }
+        if (!this.state.iceReady) {
+            return <p>Waiting for ICE gathering to complete.</p>
+        }
+        if (!this.state.remoteReady) {
+            return <p>Waiting for remote.</p>
+        }
+        return (<video ref={el => {
+            if (el && this.ms) {
+                el.srcObject = this.ms
+            }
+        }} id="video" autoPlay muted controls />)
+    }
+
+    render() {
+        return (
+            <div id="main">
+                <div className="content">
+                    {this.renderVideo()}
+                </div>
+            </div>
+        )
+    }
+}

src/js/menu.tsx

@@ -0,0 +1,45 @@
+import { createRoot } from "react-dom/client";
+import React from "react";
+
+type StreamSelectCallback = (selected: string) => void
+
+type MenuProps = {
+    items: string[]
+    selectedItem: string | undefined
+    selectCallback: StreamSelectCallback
+}
+
+export class Menu extends React.Component<MenuProps> {
+    constructor(props: MenuProps) {
+        super(props)
+    }
+
+    render() {
+        return (
+            <div id="menu">
+                <div className="pure-menu">
+                    <a className="pure-menu-heading" href="#">stream.t-juice.club</a>
+                    <ul className="pure-menu-list">
+                        {this.menuitems()}
+                    </ul>
+                </div>
+            </div>
+        )
+    }
+
+    private menuitems() {
+        return (
+            <>
+                {this.props.items.map((value, idx) => {
+                    if (this.props.selectedItem == value) {
+                        return <li key={idx} className="pure-menu-item pure-menu-selected"><a href={"#" + value} className="pure-menu-link">{value}</a></li>
+                    } else {
+                        return <li key={idx} onClick={() => {
+                            this.props.selectCallback(value)
+                        }} className="pure-menu-item"><a href={"#" + value} className="pure-menu-link">{value}</a></li>
+                    }
+                })}
+            </>
+        )
+    }
+}

tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "esModuleInterop": true,
+        "jsx": "react",
+        "module": "esnext",
+        "moduleResolution": "node",
+        "lib": [
+            "dom",
+            "esnext"
+        ],
+        "strict": true,
+        "sourceMap": true,
+        "target": "esnext",
+    },
+    "exclude": [
+        "node_modules"
+    ],
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx"
+    ],
+}