Web UI Improvements (#5)

* ui(StatusPage): add lottie on empty list

* ui: standardize React.Suspense loader

* feat: config hot reloading

* feat: configuration editor

* doc(readme): add featues, note on debug logging

* autogen TypeScript bindings, wip add video to queue

* ci: fix Dockerfile

* fix build.sh

* ci: build binary on actions

* feat: add video

* feat: youtube url parser, dedupe add video

* bump version

* ci: cache deps

.github/workflows/build.yml

@@ -0,0 +1,82 @@
+name: build
+
+on:
+  push:
+    branches:
+    - main
+  pull_request:
+    branches:
+    - main
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        target:
+        - x86_64-pc-windows-gnu
+        - x86_64-unknown-linux-musl
+        - aarch64-unknown-linux-musl
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Cache rust dependencies
+      id: cache-dependencies
+      uses: actions/cache@v2
+      with:
+        path: |
+          ~/.cargo/registry
+          ~/.cargo/git
+          target
+        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}-${{ matrix.target }}
+
+    - name: Cache node_modules
+      id: cache-node
+      uses: actions/cache@v2
+      with:
+        path: |
+          web/node_modules
+        key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-${{ matrix.target }}
+
+    - name: Setup Node
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16
+        cache: yarn
+        cache-dependency-path: web/yarn.lock
+
+    - uses: actions-rs/toolchain@v1
+      with:
+        toolchain: stable
+        target: ${{ matrix.target }}
+        override: true
+
+    - name: Generate TypeScript bindings
+      uses: actions-rs/cargo@v1
+      with:
+        use-cross: true
+        command: test
+        args: --release --locked --target ${{ matrix.target }}
+
+    - name: Build the Web UI
+      run: |
+        pushd web
+        yarn install --frozen-lockfile
+        yarn build
+        popd
+
+    - name: Build hoshinova
+      uses: actions-rs/cargo@v1
+      with:
+        use-cross: true
+        command: build
+        args: --release --locked --target ${{ matrix.target }}
+
+    - name: Upload artifacts
+      uses: actions/upload-artifact@v3
+      with:
+        name: ${{ matrix.target }}
+        path: |
+          target/**/release/hoshinova*
+          !target/**/release/hoshinova.d

.github/workflows/ci.yml → .github/workflows/docker.yml

@@ -1,4 +1,4 @@
-name: ci
+name: docker
 
 on:
   push:

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "hoshinova"
-version = "0.2.1"
+version = "0.2.2"
 edition = "2021"
 repository = "https://github.com/HoloArchivists/hoshinova"
 homepage = "https://github.com/HoloArchivists/hoshinova"
@@ -13,13 +13,17 @@ tokio = { version = "1.20.0", features = ["full"] }
 
 # Web
 actix-web = "4"
-reqwest = { version = "0.11", default-features = false, features = ["gzip", "json", "rustls-tls"] }
+reqwest = { version = "0.11", default-features = false, features = [
+  "gzip", "json", "rustls-tls"
+] }
 mime_guess = "2"
 
 # Utilities
 anyhow = "1.0"
 lazy_static = "1.4.0"
 rust-embed = "6.4.0"
+ts-rs = { version = "6.1", features = ["chrono-impl"] }
+url = "2.2.2"
 
 # Serde
 humantime = "2.1.0"
@@ -30,6 +34,7 @@ quick-xml = { version = "0.23", features = ["serialize"] }
 chrono = { version = "0.4.0", features = ["serde"] }
 regex = "1"
 serde_regex = "1.1.0"
+serde_json = "1.0"
 
 # CLI
 clap = { version = "3.2.8", features = ["derive"] }

Dockerfile

@@ -1,31 +1,49 @@
-FROM node:16 AS web-builder
-
 # Cache dependencies
-WORKDIR /src
+FROM node:16 as web-deps
+WORKDIR /src/web
 COPY web/package.json web/yarn.lock ./
 RUN yarn install
 
-# Build
-COPY web .
-RUN yarn build
-
-FROM rust:1.62-alpine AS rust-builder
+# Create base image for building Rust
+FROM rust:1.62-alpine AS rust-build-image
 RUN apk add --no-cache musl-dev
 
 # Cache dependencies
+FROM rust-build-image AS rust-deps
 WORKDIR /src
 COPY Cargo.toml Cargo.lock ./
 RUN set -ex; \
     mkdir src; \
     echo 'fn main() {}' > src/main.rs; \
-    cargo build --release --target x86_64-unknown-linux-musl; \
+    cargo build --locked --release --target x86_64-unknown-linux-musl; \
     rm -rf src;
 
-# Build
+# Generate TypeScript bindings
+FROM rust-build-image AS ts-bind
+WORKDIR /src
+COPY --from=rust-deps /usr/local/cargo /usr/local/cargo
 COPY . .
-COPY --from=web-builder /src /src/web
+RUN set -ex; \
+    touch src/main.rs; \
+    cargo test
+
+# Build the web app
+FROM node:16 AS web-builder
+WORKDIR /src/web
+COPY web .
+COPY --from=web-deps /src/web/node_modules /src/web/node_modules
+COPY --from=ts-bind /src/web/src/bindings /src/web/src/bindings
+RUN yarn build
+
+# Build the Rust app
+FROM rust-build-image AS rust-builder
+WORKDIR /src
+COPY --from=ts-bind /usr/local/cargo /usr/local/cargo
+COPY --from=ts-bind /src /src
+COPY --from=rust-deps /src/target /src/target
+COPY --from=web-builder /src/web/dist /src/web/dist
 RUN touch src/main.rs && \
-    cargo build --release --target x86_64-unknown-linux-musl
+    cargo build --locked --release --target x86_64-unknown-linux-musl
 
 FROM alpine AS runner
 WORKDIR /app

README.md

@@ -11,6 +11,13 @@ will still undergo a lot of breaking changes. Upgrade with caution.
 
 ![Screenshot of Web UI](.github/screenshot.png)
 
+## Features
+
+- Monitor and automatically record live streams from multiple YouTube channels
+- View and manage recording status from a web interface
+- Receive notifications whenever a stream goes live, or has finished being
+  recorded
+
 ## Install
 
 You can get hoshinova using either one of the following methods.
@@ -34,8 +41,12 @@ Make sure you have [ytarchive](https://github.com/Kethsar/ytarchive) and
 # Clone the repository
 git clone https://github.com/HoloArchivists/hoshinova
 
+# Generate TypeScript bindings
+cd hoshinova
+cargo test
+
 # Build the web UI
-cd hoshinova/web
+cd web
 yarn install && yarn build
 
 # Build and run hoshinova
@@ -207,6 +218,11 @@ verbose logging.
 RUST_LOG=debug cargo run
 ```
 
+Note that you will likely also get debug logs from libraries that hoshinova
+depends on. To only get debug logs for hoshinova, use
+`RUST_LOG=hoshinova=debug`. For more information, see
+[env_logger's documentation](https://docs.rs/env_logger/0.9.0/env_logger/).
+
 ## Support
 
 [![Discord](https://img.shields.io/discord/955170284644733018?label=Discord&logo=discord&logoColor=%23fff&style=for-the-badge)](https://discord.gg/y53h4pHB3n)

build.rs

@@ -0,0 +1,9 @@
+fn main() {
+    // Create the web/dist directory if it doesn't exist.
+    let mut dist_dir = std::env::current_dir().unwrap();
+    dist_dir.push("web");
+    dist_dir.push("dist");
+    if !dist_dir.exists() {
+        std::fs::create_dir(&dist_dir).unwrap();
+    }
+}

build.sh

@@ -9,7 +9,10 @@ set -e
 # See: https://github.com/cross-rs/cross/issues/724
 #
 
-# Pre-build: build the web UI
+# Pre-build: generate typescript bindings
+cargo test
+
+# Build web UI
 pushd web
   yarn install
   yarn build
@@ -23,7 +26,7 @@ targets=(x86_64-unknown-linux-musl aarch64-unknown-linux-musl x86_64-pc-windows-
 for target in "${targets[@]}"; do
   echo "Building for $target"
   cross build --target $target --release
-  
+
   ext=""
   if [[ $target == *"windows"* ]]; then
     ext=".exe"