Skip to content

Commit

Permalink
Merge branch 'main' of github.com:matvp91/mixwave into feature/player…
Browse files Browse the repository at this point in the history
…-refactor
  • Loading branch information
matvp91 committed Dec 10, 2024
2 parents c8f7c6d + 2b59303 commit 03ab89c
Show file tree
Hide file tree
Showing 29 changed files with 886 additions and 279 deletions.
6 changes: 5 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,8 @@ vite.config.ts.timestamp*
config.env*
!config.env.example

.wrangler
.wrangler

# Dev Folder
docker/volume
docker/sprs-localstack-data
8 changes: 8 additions & 0 deletions docker/aws/buckets.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
#!/usr/bin/env bash

# Automatic bucket creation
awslocal s3 mb s3://sprs-bucket
awslocal s3api put-bucket-cors --bucket sprs-bucket --cors-configuration file:///etc/localstack/init/ready.d/cors.json

# You can check your S3 bucket status here after running the ./run-dev.sh script
# https://app.localstack.cloud/inst/default/resources/s3/sprs-bucket
10 changes: 10 additions & 0 deletions docker/aws/cors.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"CORSRules": [
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "POST", "PUT", "DELETE"],
"AllowedOrigins": ["*"],
"ExposeHeaders": ["ETag"]
}
]
}
45 changes: 45 additions & 0 deletions docker/docker-compose-dev.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
version: "3"

volumes:
superstreamer_redis_data:
superstreamer_postgres_data:

services:
superstreamer-redis:
image: redis/redis-stack-server:7.2.0-v6
ports:
- 127.0.0.1:6379:6379
healthcheck:
test: ["CMD", "redis-cli", "--raw", "incr", "ping"]
volumes:
- superstreamer_redis_data:/data

superstreamer-postgres:
image: "postgres:latest"
restart: always
stop_signal: SIGINT
ports:
- "5432:5432"
volumes:
- superstreamer_postgres_data:/var/lib/postgresql/data
environment:
- POSTGRES_INITDB_ARGS=--data-checksums
- POSTGRES_DB=sprs
- POSTGRES_PASSWORD=sprs

localstack:
image: gresau/localstack-persist:4 # instead of localstack/localstack:4
ports:
- "127.0.0.1:4566:4566" # LocalStack Gateway
- "127.0.0.1:4510-4559:4510-4559" # external services port range
volumes:
- "./sprs-localstack-data:/persisted-data"
- "${LOCALSTACK_VOLUME_DIR:-./volume}:/var/lib/localstack"
- "/var/run/docker.sock:/var/run/docker.sock"
- ./aws:/etc/localstack/init/ready.d
environment:
# LocalStack configuration: https://docs.localstack.cloud/references/configuration/
- DEBUG=${DEBUG:-0}
- PERSIST_DEFAULT=0
- SERVICES=s3
- PERSIST_S3=1
68 changes: 66 additions & 2 deletions docs/guide/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Getting Started

Setting up your video streaming platform has never been easier. With just a few simple steps, you'll be up and running, delivering seamless video experiences.
Setting up your video streaming platform has never been easier. With just a few simple steps, you'll be up and running, delivering seamless video experiences.

Let's dive in and get you started!

Expand Down Expand Up @@ -127,6 +127,7 @@ In a scalable architecture, you probably do not want to run the ffmpeg and trans
If you'd like to change the port of each service individually, provide the `PORT` environment variable for each service individually.

- [AWS S3](https://aws.amazon.com/s3/)

- [Cloudflare R2](https://www.cloudflare.com/developer-platform/products/r2/)

:::
Expand Down Expand Up @@ -233,4 +234,67 @@ We've already covered how to build Superstreamer locally, and we've also made it
$ bun run dev
```

:::
:::

### Quick Development Environment Setup

We have also created a `docker-compose-dev.yml` so you can setup your development environment faster and start getting hands on!

::: code-group

```sh [Terminal]
# We have prebuilt development containers, see docker/docker-compose-dev.yml
cd docker
docker-compose -f docker-compose-dev.yml up
```

:::

You can create a file named `config.env.development` for a quick setup. Here is a sample that should work out of the box if default configuration is used:

::: code-group

```sh [config.env.development]
S3_ENDPOINT=http://s3.localhost.localstack.cloud:4566/
S3_REGION=us-east-1
S3_ACCESS_KEY=test
S3_SECRET_KEY=test
S3_BUCKET=sprs-bucket
# With Docker, use "redis", use "localhost" when you
# run Redis on your own device.
REDIS_HOST=localhost
REDIS_PORT=6379
# These are public, they'll end up in client JS.
PUBLIC_API_ENDPOINT=http://localhost:52001
PUBLIC_STITCHER_ENDPOINT=http://localhost:52002
PUBLIC_S3_ENDPOINT=http://s3.localhost.localstack.cloud:4566/sprs-bucket
# Shared secret
# *** Never EVER expose this publicly, auth tokens are signed with this secret.
SUPER_SECRET=abc
# Database
# Provide a PostgreSQL connection string
DATABASE_URI=postgresql://postgres:sprs@localhost:5432/sprs
```

:::

Run it with:

::: code-group

```sh [Terminal]
# Install dependencies
bun install
# Install binary dependencies, such as ffmpeg
bun run install-bin
# RUN!
bun run dev
```

:::
13 changes: 6 additions & 7 deletions docs/guide/video-processing.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ curl -X POST

```json [Request]
{
"input": [
"inputs": [
{
"type": "video",
"url": "https://domain.com/video.mp4"
"path": "https://domain.com/video.mp4"
},
{
"type": "audio",
"url": "https://domain.com/video.mp4",
"path": "https://domain.com/video.mp4",
"language": "eng"
}
],
Expand Down Expand Up @@ -130,14 +130,14 @@ curl -X POST

```json [Request]
{
"input": [
"inputs": [
{
"type": "video",
"url": "https://domain.com/video.mp4"
"path": "https://domain.com/video.mp4"
},
{
"type": "audio",
"url": "https://domain.com/video.mp4",
"path": "https://domain.com/video.mp4",
"language": "eng"
}
],
Expand All @@ -161,5 +161,4 @@ curl -X POST
}
```


The pipeline job generates a unique UUID, and once complete, your asset is instantly available as an HLS playlist — just as if you had packaged it manually.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "superstreamer",
"scripts": {
"dev": "bun run --filter=\"@superstreamer/*\" dev",
"build": "bun run ./scripts/build.ts",
"dev": "NODE_ENV=development bun run --filter=\"@superstreamer/*\" dev",
"build": "NODE_ENV=production bun run ./scripts/build.ts",
"lint": "bun run ./scripts/lint.ts",
"test": "bun run ./scripts/test.ts",
"install-bin": "bun run --filter=\"@superstreamer/*\" install-bin"
Expand Down
8 changes: 8 additions & 0 deletions packages/api/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# @superstreamer/api

The main API for:

- Asset management.
- Start transcode, package (or pipeline) jobs.
- Get a job by id, read status.
- Get storage info, such as transcode results.
3 changes: 3 additions & 0 deletions packages/app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# @superstreamer/app

The app serves as a user-friendly dashboard, enabling interaction with Superstreamer through its API.
1 change: 0 additions & 1 deletion packages/app/src/components/CodeEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export function CodeEditor({

return (
<MonacoEditor
className="h-full w-full"
defaultLanguage="json"
defaultValue={value}
onMount={onMount}
Expand Down
158 changes: 158 additions & 0 deletions packages/app/src/components/DataDump2.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
import type { ReactNode } from "react";

type Data = string | number | object | null | undefined;

interface DataDump2Props {
data: object;
parent?: string;
}

export function DataDump2({
name,
data,
parent,
redacted,
}: {
name?: string | number;
data: Data | Data[];
parent?: string;
redacted?: string[];
}) {
const id = `${parent}.${name}`;

for (const check of redacted ?? []) {
if (id.includes(check)) {
return null;
}
}

if (Array.isArray(data)) {
return (
<div className="ml-2">
<Label name={name} />
{"["}
{data.map((child, index) => (
<DataDump2
key={`${id}.${index}`}
parent={`${id}.${index}`}
name={index}
data={child}
redacted={redacted}
/>
))}
{"]"}
</div>
);
}
if (typeof data === "object" && data) {
return (
<div className="ml-2">
<Label name={name} />
{"{"}
{Object.entries(data).map(([name, value]) => {
return (
<DataDump2
key={`${id}.${name}`}
parent={`${id}.${name}`}
name={name}
data={value}
redacted={redacted}
/>
);
})}
{"}"}
</div>
);
}
if (data !== Object(data)) {
return <Primitive name={name ?? ""} value={data} />;
}
return null;
}

export function DataDump2_({ data }: DataDump2Props) {
return (
<div className="text-sm">
<Tree data={data} />
</div>
);
}

function Tree({ data, parent = "" }: { data: object; parent?: string }) {
return Object.entries(data).map(([name, value]) => {
const id = `${parent}.${name}`;

if (id.includes("levels") || id.includes(".track")) {
return null;
}

if (value !== Object(value)) {
return <Primitive key={id} name={name} value={value} />;
}

if (Array.isArray(value)) {
return (
<div key={id} className="ml-2">
<Label name={name} />
{"["}
{value.map((child, index) => (
<Tree key={`${id}.${index}`} parent={id} data={child} />
))}
{"]"}
</div>
);
}

if (typeof value === "object") {
return (
<div key={id} className="ml-2">
<Label name={name} />
{"{"}
<Tree parent={id} data={value} />
{"}"}
</div>
);
}

return null;
});
}

function Primitive({ name, value }: { name: string | number; value: Data }) {
let className = "";
let child: ReactNode = String(value);
if (value === undefined || value === null) {
className = "opacity-50";
} else if (typeof value === "number") {
if (Number.isNaN(value)) {
className = "text-red-500";
} else if (Number.isInteger(value)) {
className = "text-blue-700";
} else {
className = "text-pink-700";
}
} else if (typeof value === "string") {
className = "text-purple-500";
child = `"${value}"`;
} else if (typeof value === "boolean") {
className = "text-amber-600";
}

return (
<div className="ml-2">
<Label name={name.toString()} />
<span className={className}>{child}</span>
</div>
);
}

function Label({ name }: { name?: string | number }) {
if (name === undefined) {
return "";
}
return (
<>
<span className="opacity-70">{name}</span>:{" "}
</>
);
}
Loading

0 comments on commit 03ab89c

Please sign in to comment.