mra/OnBoard-Live
1
0
Fork 0
mirror of https://github.com/MichaByte/OnBoard-Live.git synced 2025-12-06 07:13:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Micha Albert 2024-07-26 08:54:39 -07:00
commit 5ad56fac3f
No known key found for this signature in database
GPG key ID: 33149159A417BBCE
21 changed files with 808 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

47
stream/tiling-frontend/README.md Normal file
View file

@ -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)
```

BIN
stream/tiling-frontend/bun.lockb Executable file
View file

Binary file not shown.

13
stream/tiling-frontend/index.html Normal file
View file

@ -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>

26
stream/tiling-frontend/package.json Normal file
View file

@ -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"
}
}

1
stream/tiling-frontend/public/flag-orpheus-left.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

187
stream/tiling-frontend/src/App.svelte Normal file
View file

@ -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>

7
stream/tiling-frontend/src/main.ts Normal file
View file

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

2
stream/tiling-frontend/src/vite-env.d.ts vendored Normal file
View file

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

7
stream/tiling-frontend/svelte.config.js Normal file
View file

@ -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(),
}

20
stream/tiling-frontend/tsconfig.json Normal file
View file

@ -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"],
}

12
stream/tiling-frontend/tsconfig.node.json Normal file
View file

@ -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"]
}

18
stream/tiling-frontend/vite.config.ts Normal file
View file

@ -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
}
}));