Initial commit

stream/README.md

@@ -0,0 +1,3 @@
+# Stream utilities
+
+In this folder, you'll find all the scripts, tools, and programs that are needed to operate the OnBoard Live stream.

stream/backend/main.py

@@ -0,0 +1,188 @@
+from fastapi import FastAPI, Request, Response
+from prisma import Prisma
+from secrets import token_hex
+import asyncio
+from slack_bolt import Ack, App, Say
+from slack_bolt.adapter.fastapi import SlackRequestHandler
+from dotenv import load_dotenv
+import os
+import requests
+
+load_dotenv()
+
+api = FastAPI()
+
+db = Prisma()
+
+bolt = App(
+    token=os.environ["SLACK_TOKEN"], signing_secret=os.environ["SLACK_SIGNING_SECRET"]
+)
+
+bolt_handler = SlackRequestHandler(bolt)
+
+
+@bolt.event("")
+@api.get("/api/v1/stream_key/{stream_key}")
+async def get_stream_by_key(stream_key: str):
+    await db.connect()
+    stream = await db.stream.find_first(where={"key": stream_key})
+    await db.disconnect()
+    return (
+        stream if stream else Response(status_code=404, content="404: Stream not found")
+    )
+
+
+@api.get("/api/v1/user/{user_id}")
+async def get_user_by_id(user_id: str):
+    await db.connect()
+    user = await db.user.find_first(where={"slack_id": user_id})
+    await db.disconnect()
+    return user if user else Response(status_code=404, content="404: User not found")
+
+
+@api.post("/api/v1/user")
+async def create_user(user: dict):
+    await db.connect()
+    try:
+        new_user = await db.user.create(
+            {"slack_id": user["slack_id"], "name": user["name"]}
+        )
+        print(new_user.id)
+        new_stream = await db.stream.create(
+            {"user": {"connect": {"id": new_user.id}}, "key": token_hex(16)}
+        )
+        print(new_user, new_stream)
+        return new_user, new_stream
+    except Exception as e:
+        await db.disconnect()
+        return Response(status_code=500, content=f"500: {str(e)}")
+    finally:
+        await db.disconnect()
+
+
+@bolt.event("app_home_opened")
+def handle_app_home_opened_events(body, logger, event, client):
+    client.views_publish(
+        user_id=event["user"],
+        # the view object that appears in the app home
+        view={
+            "type": "home",
+            "callback_id": "home_view",
+            # body of the view
+            "blocks": [
+                {
+                    "type": "section",
+                    "text": {
+                        "type": "mrkdwn",
+                        "text": "Welcome to OnBoard Live! Try sending `/onboard-live-apply` in the #onboard-live channel to get started!",
+                    },
+                },
+            ],
+        },
+    )
+
+
+@bolt.view("apply")
+def handle_application_submission(ack, body):
+    ack()
+    print(body)
+    convo = bolt.client.conversations_open(users=body["user"]["id"], return_im=True)
+    bolt.client.chat_postMessage(
+        channel=convo["channel"]["id"], text=f"Your application has been submitted! We will review it shortly. Please do not send another application - If you haven't heard back in over 48 hours, message @mra! Here's a copy of your responses for your reference:\n{body['view']['state']['values']['project-info']['project-desc-value']['value']}"
+    )
+
+
+@bolt.command("/onboard-live-apply")
+def apply(ack: Ack, command):
+    ack()
+    print(command)
+    r = requests.post(
+        "https://slack.com/api/views.open",
+        headers={"Authorization": f"Bearer {os.environ['SLACK_TOKEN']}"},
+        json={
+            "trigger_id": command["trigger_id"],
+            "view": {
+                "type": "modal",
+                "callback_id": "apply",
+                "title": {"type": "plain_text", "text": "Apply to OnBoard Live"},
+                "submit": {"type": "plain_text", "text": "Submit!"},
+                "blocks": [
+                    {
+                        "type": "input",
+                        "block_id": "project-info",
+                        "label": {
+                            "type": "plain_text",
+                            "text": "Some info on your project(s)",
+                        },
+                        "element": {
+                            "type": "plain_text_input",
+                            "multiline": True,
+                            "action_id": "project-desc-value",
+                            "placeholder": {
+                                "type": "plain_text",
+                                "text": "I'm going to make...",
+                            },
+                        },
+                    },
+                ],
+            },
+        },
+    )
+    print(r.status_code, r.text)
+    # bolt.client.modal(channel=command['channel_id'], user=command['user_id'], text="Application form for OnBoard Live", blocks=[{
+
+
+# 		"type": "header",
+# 		"text": {
+# 			"type": "plain_text",
+# 			"text": "Welcome to OnBoard Live!",
+# 		}
+# 	},
+# 	{
+# 		"type": "section",
+# 		"text": {
+# 			"type": "mrkdwn",
+# 			"text": "Before you can get designing, we need a little bit of info from you. All fields are required!"
+# 		}
+# 	},
+# 	{
+# 		"type": "divider"
+# 	},
+# 	{
+# 		"type": "input",
+# 		"element": {
+# 			"type": "plain_text_input",
+# 			"multiline": True,
+# 			"action_id": "project_ideas_input-action",
+# 			"placeholder": {
+# 				"type": "plain_text",
+# 				"text": "I want to make a..."
+# 			}
+# 		},
+# 		"label": {
+# 			"type": "plain_text",
+# 			"text": "What do you plan to make with OnBoard Live?\nThis can be changed anytime!",
+# 		}
+# 	},
+# 	{
+# 		"type": "divider"
+# 	},
+# 	{
+# 		"type": "actions",
+# 		"elements": [
+# 			{
+# 				"type": "button",
+# 				"text": {
+# 					"type": "plain_text",
+# 					"text": "Apply!",
+# 				},
+# 				"value": "apply",
+# 				"style": "primary",
+# 				"action_id": "actionId-0"
+
+# 		}]}])
+
+
+@api.post("/slack/events")
+async def slack_event_endpoint(req: Request):
+    return await bolt_handler.handle(req)

stream/backend/migrations/20240719191810_init/migration.sql

@@ -0,0 +1,20 @@
+-- CreateTable
+CREATE TABLE "Stream" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "key" TEXT NOT NULL,
+    "active" BOOLEAN NOT NULL DEFAULT false,
+    "focused" BOOLEAN NOT NULL DEFAULT false,
+    CONSTRAINT "Stream_key_fkey" FOREIGN KEY ("key") REFERENCES "User" ("slackId") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "User" (
+    "slackId" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Stream_key_key" ON "Stream"("key");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_slackId_key" ON "User"("slackId");

stream/backend/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"

stream/backend/schema.prisma

@@ -0,0 +1,28 @@
+generator client {
+  provider             = "prisma-client-py"
+  interface            = "asyncio"
+  recursive_type_depth = 5
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = "file:./dev.db"
+}
+
+model User {
+  id         String   @id @default(cuid())
+  created_at DateTime @default(now())
+  slack_id   String   @unique
+  name       String
+  stream     Stream?
+}
+
+model Stream {
+  id         String   @id @default(cuid())
+  created_at DateTime @default(now())
+  is_live    Boolean  @default(false)
+  is_focused Boolean  @default(false)
+  key        String   @unique @default(uuid())
+  user       User     @relation(fields: [user_id], references: [id])
+  user_id    String   @unique
+}

stream/keygen/main.py

@@ -0,0 +1,30 @@
+import secrets
+import requests
+import pickle
+
+users = {}
+
+with open('users.dat', 'rb') as f:
+    users = pickle.load(f)
+
+def add_stream(stream):
+    requests.post('http://127.0.0.1:9997/v3/config/paths/add/' + stream, json={'name': stream})
+
+def main():
+    print(users)
+    for user in users.values():
+        add_stream(user)
+    while True:
+        new_user = input('Enter new user\'s Slack ID: ')
+        if new_user in users:
+            print('User already exists.')
+            continue
+        users[new_user] = secrets.token_hex(32)
+        print(users[new_user])
+        add_stream(users[new_user])
+        with open('users.dat', 'wb') as f:
+            pickle.dump(users, f)
+
+
+if __name__ == '__main__':
+    main()

stream/tiling-frontend/README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

stream/tiling-frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

stream/tiling-frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "onboard-plus-sfa",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.1",
+    "tslib": "^2.6.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
+  },
+  "dependencies": {
+    "hls.js": "^1.5.13",
+    "unocss": "^0.61.3",
+    "vite-plugin-singlefile": "^2.0.2"
+  }
+}

stream/tiling-frontend/src/App.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  // import 'uno.css'
+  import hls from "hls.js";
+  import { onMount } from "svelte";
+  let videos: { [key: string]: HTMLVideoElement } = {};
+  let pathData:
+    | {
+        ready: boolean;
+        name: string;
+        focused?: boolean;
+      }[]
+    | null = null;
+  let newData:
+    | {
+        bytesSent: any;
+        bytesReceived: any;
+        readyTime: any;
+        ready: boolean;
+        name: string;
+      }[]
+    | null = null;
+  onMount(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch("http://localhost:9997/v3/paths/list");
+        newData = (await response.json())["items"];
+        if (newData) {
+          for (let i = 0; i < newData.length; i++) {
+            delete newData[i].readyTime;
+            delete newData[i].bytesReceived;
+            delete newData[i].bytesSent;
+          }
+        }
+        console.log(videos);
+        videos = Object.fromEntries(
+          Object.entries(videos).filter(([_, v]) => v != null)
+        );
+
+        if (JSON.stringify(newData) !== JSON.stringify(pathData)) {
+          console.log("Data changed");
+          pathData = newData;
+          setTimeout(() => {
+            for (const video in videos) {
+              console.log(video);
+              const hlsInstance = new hls({ progressive: false });
+              hlsInstance.loadSource(
+                `http://localhost:8888/${video}/index.m3u8`
+              );
+              hlsInstance.attachMedia(videos[video]);
+            }
+          }, 5);
+        }
+      } catch (error) {
+        console.error("Error fetching JSON data:", error);
+      }
+    };
+
+    fetchData();
+
+    const interval = setInterval(fetchData, 2000);
+
+    return () => {
+      // clearInterval(interval);
+    };
+  });
+</script>
+
+<div style="width: 100vw; height: 100vw; overflow: hidden; position: absolute; top: 0; left: 0"><div class="gradient"></div>
+</div>
+<div class="container2">
+  <h2
+    style="position: absolute; top: 0; width: 100vw; text-align: center;font-family: Arial, Helvetica, sans-serif;"
+  >
+    OnBoard Live Design Stream
+  </h2>
+  <img
+    style="position: absolute; top: 0; left: 0; border: 0; width: 12vw; z-index: 999;"
+    src="https://assets.hackclub.com/flag-orpheus-left.svg"
+    alt="Hack Club"
+  />
+  {#if pathData?.map((path) => path.ready).includes(true)}
+    <div class="container">
+      {#each pathData as path}
+        {#if path.ready}
+          <!-- svelte-ignore a11y-media-has-caption -->
+          <video
+            controls
+            autoplay
+            id={path.name}
+            bind:this={videos[path.name]}
+            class:focused={path.focused}
+            class:video={Object.keys(videos).length > 1}
+            class:only-video={!(Object.keys(videos).length > 1)}
+          ></video>
+        {/if}
+      {/each}
+    </div>
+  {:else}
+    <div class="container">
+      <p
+        style="text-align: center; font-size: 5vw; font-family: Arial, Helvetica, sans-serif"
+      >
+        No one is here yet!<br /> Check back later
+      </p>
+    </div>
+  {/if}
+  <h2
+    style="position: absolute; bottom: 0; width: 100vw; text-align: center;font-family: Arial, Helvetica, sans-serif;"
+  >
+    Join at <div
+      style="display: inline-block; color: #338eda; text-decoration-line: underline;"
+    >
+      https://hack.club/onboard-live
+    </div>
+  </h2>
+</div>
+
+<style>
+  .container2 {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    flex-wrap: wrap;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: transparent;
+  }
+  .gradient {
+	  width: 100vw;
+    height: 100vh;
+	  position: absolute;
+	  transform-origin: center;
+	  overflow: hidden;
+    background: linear-gradient(
+      45deg,
+      rgba(236, 55, 80, 1) 0%,
+      rgba(255, 140, 55, 1) 25%,
+      rgba(241, 196, 15, 1) 40%,
+      rgba(51, 214, 166, 1) 60%,
+      rgba(51, 142, 218, 1) 80%,
+      rgba(166, 51, 214, 1) 100%
+    );
+    animation: move-gradient ease-in-out 15s infinite;
+  }
+  @keyframes move-gradient {
+    0% {
+      transform: scale(1) rotate(0deg);
+    }
+	25% {
+		transform: scale(2) rotate(-35deg);
+	}
+    50% {
+      transform: scale(3) rotate(90deg);
+    }
+	75% {
+		transform: scale(2) rotate(-35deg);
+	}
+    100% {
+      transform: scale(1) rotate(0deg);
+    }
+  }
+  .video {
+    width: 40vw;
+    height: 40vh;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .only-video {
+    width: 85vw;
+    height: 85vh;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .focused {
+    width: 75vw;
+    height: 75vh;
+  }
+  .container {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+  }
+</style>

stream/tiling-frontend/src/main.ts

@@ -0,0 +1,7 @@
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app')!,
+})
+
+export default app

stream/tiling-frontend/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

stream/tiling-frontend/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

stream/tiling-frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force"
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+}

stream/tiling-frontend/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

stream/tiling-frontend/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { viteSingleFile } from 'vite-plugin-singlefile';
+
+export default defineConfig(({ command }) => ({
+	plugins: [
+		svelte({
+			/* plugin options */
+		}),
+		command === 'build' &&
+			viteSingleFile({
+				removeViteModuleLoader: true
+			})
+	],
+	build: {
+		minify: true
+	}
+}));