multistreaming: scenes/composition, installer build support, service updates
- multistreaming (new): RTMP ingest + multi-platform fan-out with pluggable providers (Twitch/YouTube/Kick/custom), zero-knowledge key vaults, Authelia OIDC auth, shared rooms with editor/streamer roles, single-use invites, per-account streaming grants, and scenes & composition (grid/PiP layouts, text/image overlays, per-output audio routing). - installer: support Dockerfile build in metadata (not just image) and RSA key generation for the Authelia OIDC JWKS. - authelia: add OIDC provider with portainer + multistreaming clients (public + PKCE). - services: remove allprox; add nginx-proxy-manager and portainer; update lldap; regenerate catalog.
This commit is contained in:
Ezequiel C.
parent
bb754cdd8c
commit
187379de4e
106 changed files with 21391 additions and 286 deletions
24
services/multistreaming/web/.gitignore
vendored
Normal file
24
services/multistreaming/web/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
7
services/multistreaming/web/.prettierignore
Normal file
7
services/multistreaming/web/.prettierignore
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
node_modules/
|
||||
coverage/
|
||||
.pnpm-store/
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
pnpm-lock.yaml
|
||||
yarn.lock
|
||||
11
services/multistreaming/web/.prettierrc
Normal file
11
services/multistreaming/web/.prettierrc
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"endOfLine": "lf",
|
||||
"semi": false,
|
||||
"singleQuote": false,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 80,
|
||||
"plugins": ["prettier-plugin-tailwindcss"],
|
||||
"tailwindStylesheet": "src/index.css",
|
||||
"tailwindFunctions": ["cn", "cva"]
|
||||
}
|
||||
21
services/multistreaming/web/README.md
Normal file
21
services/multistreaming/web/README.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
# React + TypeScript + Vite + shadcn/ui
|
||||
|
||||
This is a template for a new Vite project with React, TypeScript, and shadcn/ui.
|
||||
|
||||
## Adding components
|
||||
|
||||
To add components to your app, run the following command:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add button
|
||||
```
|
||||
|
||||
This will place the ui components in the `src/components` directory.
|
||||
|
||||
## Using components
|
||||
|
||||
To use the components in your app, import them as follows:
|
||||
|
||||
```tsx
|
||||
import { Button } from "@/components/ui/button"
|
||||
```
|
||||
25
services/multistreaming/web/components.json
Normal file
25
services/multistreaming/web/components.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "radix-nova",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"rtl": false,
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"menuColor": "default",
|
||||
"menuAccent": "subtle",
|
||||
"registries": {}
|
||||
}
|
||||
22
services/multistreaming/web/eslint.config.js
Normal file
22
services/multistreaming/web/eslint.config.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
13
services/multistreaming/web/index.html
Normal file
13
services/multistreaming/web/index.html
Normal 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-app</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
8429
services/multistreaming/web/package-lock.json
generated
Normal file
8429
services/multistreaming/web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
46
services/multistreaming/web/package.json
Normal file
46
services/multistreaming/web/package.json
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"name": "multistreaming",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"format": "prettier --write \"**/*.{ts,tsx}\"",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/geist": "^5.3.0",
|
||||
"@tailwindcss/vite": "^4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^1.39.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"radix-ui": "^1.6.7",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"shadcn": "^4.20.0",
|
||||
"sonner": "^2.0.8",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"tailwindcss": "^4",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10",
|
||||
"@types/node": "^24",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@vitejs/plugin-react": "^6",
|
||||
"eslint": "^10",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"globals": "^17",
|
||||
"prettier": "^3.8.3",
|
||||
"prettier-plugin-tailwindcss": "^0.8.0",
|
||||
"typescript": "~6",
|
||||
"typescript-eslint": "^8",
|
||||
"vite": "^8"
|
||||
}
|
||||
}
|
||||
1
services/multistreaming/web/public/vite.svg
Normal file
1
services/multistreaming/web/public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
265
services/multistreaming/web/src/App.tsx
Normal file
265
services/multistreaming/web/src/App.tsx
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
import { useEffect, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { api } from "@/lib/api"
|
||||
import type { Account, Member, Provider, Vault } from "@/lib/types"
|
||||
import { useApp } from "@/lib/use-app"
|
||||
import { AppSidebar } from "@/components/app-sidebar"
|
||||
import { AuthScreen } from "@/components/auth-screen"
|
||||
import { NewRoomDialog, NewVaultDialog, PromptDialog, UnlockVaultDialog } from "@/components/dialogs"
|
||||
import { HomeView } from "@/components/home-view"
|
||||
import { RoomSidebar } from "@/components/room-sidebar"
|
||||
import { RoomView } from "@/components/room-view"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
SidebarInset,
|
||||
SidebarProvider,
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar"
|
||||
|
||||
export function App() {
|
||||
const app = useApp()
|
||||
const { data, refresh, logout, openRoom, unlockVault, lockActive } = app
|
||||
|
||||
const [providers, setProviders] = useState<Provider[]>([])
|
||||
const [newVaultOpen, setNewVaultOpen] = useState(false)
|
||||
const [unlockTarget, setUnlockTarget] = useState<Vault | null>(null)
|
||||
const [leaveVaultTarget, setLeaveVaultTarget] = useState<Vault | null>(null)
|
||||
const [newRoomOpen, setNewRoomOpen] = useState(false)
|
||||
const [accountDialog, setAccountDialog] = useState<{
|
||||
account: Account | null
|
||||
open: boolean
|
||||
}>({ account: null, open: false })
|
||||
const [feedPrompt, setFeedPrompt] = useState(false)
|
||||
const [feedName, setFeedName] = useState("")
|
||||
const [invitePrompt, setInvitePrompt] = useState(false)
|
||||
const [inviteRole, setInviteRole] = useState("editor")
|
||||
const [members, setMembers] = useState<Member[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
void api.providers().then(setProviders).catch(() => {})
|
||||
}, [])
|
||||
|
||||
// Load members when the open room changes.
|
||||
const roomId = data.screen === "room" ? data.roomId : null
|
||||
useEffect(() => {
|
||||
if (!roomId) {
|
||||
setMembers([])
|
||||
return
|
||||
}
|
||||
void api
|
||||
.roomDetail(roomId)
|
||||
.then((r) => setMembers(r.members ?? []))
|
||||
.catch(() => setMembers([]))
|
||||
}, [roomId])
|
||||
|
||||
useEffect(() => {
|
||||
// accept ?#invite=token on load
|
||||
const m = window.location.hash.match(/invite=([a-f0-9]+)/)
|
||||
if (m && data.me) {
|
||||
void api
|
||||
.acceptInvite(m[1])
|
||||
.then(() => {
|
||||
toast.success("Invite accepted")
|
||||
window.location.hash = ""
|
||||
void refresh()
|
||||
})
|
||||
.catch((err) => toast.error((err as Error).message))
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [data.me])
|
||||
|
||||
if (!data.me) {
|
||||
return <AuthScreen mode={data.authMode} onAuthed={() => void refresh()} />
|
||||
}
|
||||
|
||||
const state = data.state
|
||||
const activeRoom = state?.rooms.find((r) => r.id === roomId) ?? null
|
||||
const currentVault = state?.vaults.find((v) => v.id === data.activeVaultId) ?? null
|
||||
|
||||
/** Select from the center vault menu: unlock (silent, else prompt). */
|
||||
async function selectVault(vault: Vault) {
|
||||
const ok = await unlockVault(vault)
|
||||
if (!ok) setUnlockTarget(vault)
|
||||
}
|
||||
|
||||
async function submitFeed() {
|
||||
if (!activeRoom) return
|
||||
await api.createFeed(activeRoom.id, feedName)
|
||||
setFeedName("")
|
||||
toast.success("Feed added")
|
||||
void refresh()
|
||||
}
|
||||
|
||||
async function submitInvite() {
|
||||
if (!activeRoom) return
|
||||
const invite = await api.invite(activeRoom.id, inviteRole)
|
||||
await navigator.clipboard.writeText(`${window.location.origin}/#invite=${invite.token}`)
|
||||
toast.success("Invite link copied")
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar
|
||||
user={{ name: data.me.username, email: data.me.username }}
|
||||
currentVault={currentVault}
|
||||
unlocked={data.unlocked}
|
||||
rooms={state?.rooms ?? []}
|
||||
activeRoomId={activeRoom?.id ?? null}
|
||||
onLeaveVault={() => currentVault && setLeaveVaultTarget(currentVault)}
|
||||
onOpenRoom={(r) => openRoom(r.id)}
|
||||
onNewRoom={() => setNewRoomOpen(true)}
|
||||
onLogout={() => void logout()}
|
||||
/>
|
||||
<SidebarInset>
|
||||
<header className="flex h-16 shrink-0 items-center gap-2">
|
||||
<div className="flex items-center gap-2 px-4">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
<Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
<BreadcrumbPage>multistreaming</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
{activeRoom ? (
|
||||
<>
|
||||
<BreadcrumbSeparator className="hidden md:block" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>{activeRoom.name}</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</>
|
||||
) : null}
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{activeRoom && state ? (
|
||||
<RoomView
|
||||
room={activeRoom}
|
||||
canEdit={activeRoom.role !== "streamer"}
|
||||
onRefresh={() => void refresh()}
|
||||
onBack={() => openRoom(null)}
|
||||
/>
|
||||
) : (
|
||||
<HomeView
|
||||
vaults={state?.vaults ?? []}
|
||||
activeVaultId={data.activeVaultId}
|
||||
unlocked={data.unlocked}
|
||||
accounts={state?.myAccounts ?? []}
|
||||
providers={providers}
|
||||
onSelectVault={(v) => void selectVault(v)}
|
||||
onNewVault={() => setNewVaultOpen(true)}
|
||||
onAddAccount={() => setAccountDialog({ account: null, open: true })}
|
||||
onEditAccount={(a) => setAccountDialog({ account: a, open: true })}
|
||||
accountDialog={{
|
||||
account: accountDialog.account,
|
||||
open: accountDialog.open,
|
||||
onOpenChange: (o) => setAccountDialog((d) => ({ ...d, open: o })),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</SidebarInset>
|
||||
|
||||
{activeRoom && state ? (
|
||||
<RoomSidebar
|
||||
room={activeRoom}
|
||||
members={members}
|
||||
liveFeeds={state.liveFeeds}
|
||||
ingest={state.ingest}
|
||||
canEdit={activeRoom.role !== "streamer"}
|
||||
onAddFeed={() => setFeedPrompt(true)}
|
||||
onInvite={() => setInvitePrompt(true)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<NewVaultDialog
|
||||
open={newVaultOpen}
|
||||
onOpenChange={setNewVaultOpen}
|
||||
sessionId={data.me.sid}
|
||||
onCreated={() => void refresh()}
|
||||
/>
|
||||
<UnlockVaultDialog
|
||||
vault={unlockTarget}
|
||||
open={unlockTarget !== null}
|
||||
onOpenChange={(o) => {
|
||||
if (!o) setUnlockTarget(null)
|
||||
}}
|
||||
onUnlocked={() => {
|
||||
setUnlockTarget(null)
|
||||
void refresh()
|
||||
}}
|
||||
/>
|
||||
<AlertDialog
|
||||
open={leaveVaultTarget !== null}
|
||||
onOpenChange={(o) => {
|
||||
if (!o) setLeaveVaultTarget(null)
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Leave vault?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{leaveVaultTarget
|
||||
? `Lock "${leaveVaultTarget.name}"? Accounts and streaming will be disabled until you unlock a vault again.`
|
||||
: ""}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => {
|
||||
lockActive()
|
||||
setLeaveVaultTarget(null)
|
||||
openRoom(null)
|
||||
void refresh()
|
||||
}}
|
||||
>
|
||||
Leave
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
<NewRoomDialog
|
||||
open={newRoomOpen}
|
||||
onOpenChange={setNewRoomOpen}
|
||||
onCreated={(room) => {
|
||||
openRoom(room.id)
|
||||
void refresh()
|
||||
}}
|
||||
/>
|
||||
<PromptDialog
|
||||
open={feedPrompt}
|
||||
onOpenChange={setFeedPrompt}
|
||||
title="Add feed"
|
||||
label="Feed name"
|
||||
value={feedName}
|
||||
onChange={setFeedName}
|
||||
onSubmit={submitFeed}
|
||||
/>
|
||||
<PromptDialog
|
||||
open={invitePrompt}
|
||||
onOpenChange={setInvitePrompt}
|
||||
title="Invite member"
|
||||
description="Editors edit feeds/outputs (no keys). Streamers bring their own accounts."
|
||||
label="Role (editor | streamer)"
|
||||
value={inviteRole}
|
||||
onChange={setInviteRole}
|
||||
onSubmit={submitInvite}
|
||||
/>
|
||||
</SidebarProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
1
services/multistreaming/web/src/assets/react.svg
Normal file
1
services/multistreaming/web/src/assets/react.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
68
services/multistreaming/web/src/components/app-sidebar.tsx
Normal file
68
services/multistreaming/web/src/components/app-sidebar.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import * as React from "react"
|
||||
import { RadioIcon } from "lucide-react"
|
||||
|
||||
import { NavRooms } from "@/components/nav-rooms"
|
||||
import { NavUser } from "@/components/nav-user"
|
||||
import { NavVaults } from "@/components/nav-vaults"
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/components/ui/sidebar"
|
||||
import type { Room, Vault } from "@/lib/types"
|
||||
|
||||
export function AppSidebar({
|
||||
user,
|
||||
currentVault,
|
||||
unlocked,
|
||||
rooms,
|
||||
activeRoomId,
|
||||
onLeaveVault,
|
||||
onOpenRoom,
|
||||
onNewRoom,
|
||||
onLogout,
|
||||
...props
|
||||
}: {
|
||||
user: { name: string; email: string }
|
||||
currentVault: Vault | null
|
||||
unlocked: boolean
|
||||
rooms: Room[]
|
||||
activeRoomId: string | null
|
||||
onLeaveVault: () => void
|
||||
onOpenRoom: (room: Room) => void
|
||||
onNewRoom: () => void
|
||||
onLogout: () => void
|
||||
} & React.ComponentProps<typeof Sidebar>) {
|
||||
return (
|
||||
<Sidebar variant="inset" {...props}>
|
||||
<SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg" asChild>
|
||||
<a href="#">
|
||||
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
|
||||
<RadioIcon className="size-4" />
|
||||
</div>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-medium">multistreaming</span>
|
||||
<span className="truncate text-xs">control room</span>
|
||||
</div>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<NavVaults vault={currentVault} unlocked={unlocked} onLeave={onLeaveVault} />
|
||||
<NavRooms rooms={rooms} activeRoomId={activeRoomId} onOpen={onOpenRoom} onNew={onNewRoom} />
|
||||
</SidebarContent>
|
||||
<SidebarFooter>
|
||||
<NavUser user={user} onLogout={onLogout} />
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
)
|
||||
}
|
||||
98
services/multistreaming/web/src/components/auth-screen.tsx
Normal file
98
services/multistreaming/web/src/components/auth-screen.tsx
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
import { useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { api } from "@/lib/api"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
export function AuthScreen({ mode, onAuthed }: { mode: "oidc" | "local" | null; onAuthed: () => void }) {
|
||||
const [username, setUsername] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
const oidc = mode === "oidc"
|
||||
|
||||
async function submitLocal(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setBusy(true)
|
||||
try {
|
||||
try {
|
||||
await api.login(username, password)
|
||||
} catch {
|
||||
await api.register(username, password)
|
||||
}
|
||||
toast.success("Signed in")
|
||||
onAuthed()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-svh items-center justify-center p-4">
|
||||
<Card className="w-full max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>multistreaming</CardTitle>
|
||||
<CardDescription>
|
||||
{oidc
|
||||
? "Sign in with your identity provider."
|
||||
: "Sign in or create your account."}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{oidc ? (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
window.location.href = "/api/auth/oidc/start"
|
||||
}}
|
||||
>
|
||||
<Button type="submit" className="w-full">
|
||||
Sign in with Authelia
|
||||
</Button>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={submitLocal}>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="username">Username</FieldLabel>
|
||||
<Input
|
||||
id="username"
|
||||
autoComplete="username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="password">Password</FieldLabel>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<Button type="submit" className="mt-5 w-full" disabled={busy}>
|
||||
Continue
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
515
services/multistreaming/web/src/components/dialogs.tsx
Normal file
515
services/multistreaming/web/src/components/dialogs.tsx
Normal file
|
|
@ -0,0 +1,515 @@
|
|||
import { useEffect, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { api } from "@/lib/api"
|
||||
import type { Account, Provider, Room, Vault } from "@/lib/types"
|
||||
import {
|
||||
createVault,
|
||||
decryptSecret,
|
||||
encryptSecret,
|
||||
saveDeviceWrapped,
|
||||
unlockWithPassphrase,
|
||||
vaultState,
|
||||
} from "@/lib/vault"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
|
||||
// ---- New vault ------------------------------------------------------------
|
||||
|
||||
export function NewVaultDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
sessionId,
|
||||
onCreated,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
sessionId: string
|
||||
onCreated: () => void
|
||||
}) {
|
||||
const [name, setName] = useState("")
|
||||
const [passphrase, setPassphrase] = useState("")
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setBusy(true)
|
||||
try {
|
||||
const created = await createVault(name, passphrase, sessionId)
|
||||
const vault = await api.createVault({
|
||||
name,
|
||||
salt: created.salt,
|
||||
serverWrapped: created.serverWrapped,
|
||||
})
|
||||
await saveDeviceWrapped(vault.id, created.deviceWrapped)
|
||||
vaultState.setActive(vault.id, created.vk)
|
||||
toast.success("Vault created and unlocked")
|
||||
onOpenChange(false)
|
||||
onCreated()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>New vault</DialogTitle>
|
||||
<DialogDescription>
|
||||
A vault stores your streaming keys, encrypted in your browser.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={submit}>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="vault-name">Name</FieldLabel>
|
||||
<Input
|
||||
id="vault-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="vault-pass">Passphrase</FieldLabel>
|
||||
<Input
|
||||
id="vault-pass"
|
||||
type="password"
|
||||
value={passphrase}
|
||||
onChange={(e) => setPassphrase(e.target.value)}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="submit" disabled={busy}>
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ---- Unlock vault ---------------------------------------------------------
|
||||
|
||||
export function UnlockVaultDialog({
|
||||
vault,
|
||||
open,
|
||||
onOpenChange,
|
||||
onUnlocked,
|
||||
}: {
|
||||
vault: Vault | null
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onUnlocked: () => void
|
||||
}) {
|
||||
const [passphrase, setPassphrase] = useState("")
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (open) setPassphrase("")
|
||||
}, [open])
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!vault) return
|
||||
setBusy(true)
|
||||
try {
|
||||
const vk = await unlockWithPassphrase(vault, passphrase)
|
||||
vaultState.setActive(vault.id, vk)
|
||||
toast.success("Vault unlocked")
|
||||
onOpenChange(false)
|
||||
onUnlocked()
|
||||
} catch {
|
||||
toast.error("Wrong passphrase")
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Unlock {vault?.name}</DialogTitle>
|
||||
<DialogDescription>Enter this vault's passphrase.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={submit}>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="unlock-pass">Passphrase</FieldLabel>
|
||||
<Input
|
||||
id="unlock-pass"
|
||||
type="password"
|
||||
value={passphrase}
|
||||
onChange={(e) => setPassphrase(e.target.value)}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="submit" disabled={busy}>
|
||||
Unlock
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ---- New room -------------------------------------------------------------
|
||||
|
||||
export function NewRoomDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onCreated,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onCreated: (room: Room) => void
|
||||
}) {
|
||||
const [name, setName] = useState("")
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setBusy(true)
|
||||
try {
|
||||
const room = await api.createRoom(name)
|
||||
toast.success("Room created")
|
||||
onOpenChange(false)
|
||||
onCreated(room)
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>New room</DialogTitle>
|
||||
<DialogDescription>A room is a shared production you can invite people to.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={submit}>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="room-name">Name</FieldLabel>
|
||||
<Input id="room-name" value={name} onChange={(e) => setName(e.target.value)} required />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="submit" disabled={busy}>
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ---- Account editor -------------------------------------------------------
|
||||
|
||||
export function AccountDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
account,
|
||||
vaultId,
|
||||
providers,
|
||||
onSaved,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
account: Account | null
|
||||
vaultId: string
|
||||
providers: Provider[]
|
||||
onSaved: () => void
|
||||
}) {
|
||||
const [name, setName] = useState("")
|
||||
const [provider, setProvider] = useState("twitch")
|
||||
const [url, setUrl] = useState("")
|
||||
const [key, setKey] = useState("")
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setName(account?.name ?? "")
|
||||
setProvider(account?.provider ?? "twitch")
|
||||
setUrl(account?.url ?? "")
|
||||
setKey("")
|
||||
}
|
||||
}, [open, account])
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setBusy(true)
|
||||
try {
|
||||
const patch: Partial<Account> = { name, url: url || providers.find((p) => p.id === provider)?.defaultUrl || "" }
|
||||
if (key) {
|
||||
patch.secretCiphertext = await encryptSecret(key, account ? `acct:${account.id}` : `acct:${crypto.randomUUID()}`)
|
||||
}
|
||||
if (account) {
|
||||
await api.updateAccount(account.id, patch)
|
||||
} else {
|
||||
if (!key) throw new Error("stream key required")
|
||||
await api.createAccount({
|
||||
vaultId,
|
||||
provider,
|
||||
name,
|
||||
url: patch.url!,
|
||||
secretCiphertext: patch.secretCiphertext!,
|
||||
})
|
||||
}
|
||||
toast.success(account ? "Account updated" : "Account added")
|
||||
onOpenChange(false)
|
||||
onSaved()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{account ? "Edit account" : "Add account"}</DialogTitle>
|
||||
<DialogDescription>The stream key is encrypted in your browser before upload.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={submit}>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="acct-name">Name</FieldLabel>
|
||||
<Input id="acct-name" value={name} onChange={(e) => setName(e.target.value)} required />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="acct-provider">Provider</FieldLabel>
|
||||
<Select value={provider} onValueChange={setProvider} disabled={!!account}>
|
||||
<SelectTrigger id="acct-provider" className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{providers.map((p) => (
|
||||
<SelectItem key={p.id} value={p.id}>
|
||||
{p.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="acct-url">RTMP URL</FieldLabel>
|
||||
<Input
|
||||
id="acct-url"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder={providers.find((p) => p.id === provider)?.defaultUrl || "rtmp://…"}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="acct-key">
|
||||
Stream key{account ? " (blank keeps current)" : ""}
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id="acct-key"
|
||||
type="password"
|
||||
value={key}
|
||||
onChange={(e) => setKey(e.target.value)}
|
||||
required={!account}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="submit" disabled={busy}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ---- Simple prompt dialog (feed name, invite link display) ----------------
|
||||
|
||||
export function PromptDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
title,
|
||||
description,
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
onSubmit,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
title: string
|
||||
description?: string
|
||||
label: string
|
||||
value: string
|
||||
onChange: (v: string) => void
|
||||
onSubmit: () => void | Promise<void>
|
||||
}) {
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setBusy(true)
|
||||
try {
|
||||
await onSubmit()
|
||||
onOpenChange(false)
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
{description ? <DialogDescription>{description}</DialogDescription> : null}
|
||||
</DialogHeader>
|
||||
<form onSubmit={submit}>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel>{label}</FieldLabel>
|
||||
<Input value={value} onChange={(e) => onChange(e.target.value)} required />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="submit" disabled={busy}>
|
||||
Continue
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ---- Start streaming (grant) ----------------------------------------------
|
||||
|
||||
export function GrantDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
accounts,
|
||||
onGranted,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
accounts: Account[]
|
||||
onGranted: () => void
|
||||
}) {
|
||||
const [selected, setSelected] = useState<string[]>([])
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (open) setSelected([])
|
||||
}, [open])
|
||||
|
||||
const mine = accounts.filter((a) => a.secretCiphertext)
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setBusy(true)
|
||||
try {
|
||||
if (!vaultState.isUnlocked()) throw new Error("unlock the vault holding these keys first")
|
||||
const accountKeys: Record<string, string> = {}
|
||||
for (const id of selected) {
|
||||
const acct = mine.find((a) => a.id === id)
|
||||
if (acct?.secretCiphertext) {
|
||||
accountKeys[id] = await decryptSecret(acct.secretCiphertext, `acct:${acct.id}`)
|
||||
}
|
||||
}
|
||||
await api.startStream(accountKeys)
|
||||
toast.success("Streaming started")
|
||||
onOpenChange(false)
|
||||
onGranted()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Start streaming</DialogTitle>
|
||||
<DialogDescription>
|
||||
Pick platforms to push to. Your keys are decrypted in the browser and granted to the
|
||||
server for this stream only.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={submit}>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<div className="flex flex-col gap-2">
|
||||
{mine.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">You have no accounts in this room.</p>
|
||||
) : (
|
||||
mine.map((a) => (
|
||||
<label key={a.id} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.includes(a.id)}
|
||||
onChange={(e) =>
|
||||
setSelected((s) =>
|
||||
e.target.checked ? [...s, a.id] : s.filter((x) => x !== a.id),
|
||||
)
|
||||
}
|
||||
/>
|
||||
{a.name} ({a.provider})
|
||||
</label>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="submit" disabled={busy || selected.length === 0}>
|
||||
Start
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
167
services/multistreaming/web/src/components/home-view.tsx
Normal file
167
services/multistreaming/web/src/components/home-view.tsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
import { toast } from "sonner"
|
||||
|
||||
import { api } from "@/lib/api"
|
||||
import type { Account, Provider, Vault } from "@/lib/types"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { AccountDialog } from "@/components/dialogs"
|
||||
|
||||
/**
|
||||
* Home: when a vault is unlocked, show its accounts. When no vault is active,
|
||||
* show the vault picker — everything else is disabled until one is selected.
|
||||
*/
|
||||
export function HomeView({
|
||||
vaults,
|
||||
activeVaultId,
|
||||
unlocked,
|
||||
accounts,
|
||||
providers,
|
||||
onSelectVault,
|
||||
onNewVault,
|
||||
onAddAccount,
|
||||
onEditAccount,
|
||||
accountDialog,
|
||||
}: {
|
||||
vaults: Vault[]
|
||||
activeVaultId: string | null
|
||||
unlocked: boolean
|
||||
accounts: Account[]
|
||||
providers: Provider[]
|
||||
onSelectVault: (vault: Vault) => void
|
||||
onNewVault: () => void
|
||||
onAddAccount: () => void
|
||||
onEditAccount: (account: Account) => void
|
||||
accountDialog: { account: Account | null; open: boolean; onOpenChange: (o: boolean) => void }
|
||||
}) {
|
||||
const activeVault = vaults.find((v) => v.id === activeVaultId) ?? null
|
||||
const vaultAccounts = accounts.filter((a) => a.vaultId === activeVaultId)
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
|
||||
{!unlocked || !activeVault ? (
|
||||
<Card className="mx-auto w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Select a vault</CardTitle>
|
||||
<CardDescription>
|
||||
Unlock a vault to manage its accounts and stream. Everything else stays locked until
|
||||
you do.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{vaults.length === 0 ? (
|
||||
<Empty>
|
||||
<EmptyHeader>
|
||||
<EmptyTitle>No vaults yet</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
Create a vault to start storing streaming keys securely in your browser.
|
||||
</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
<EmptyContent>
|
||||
<Button onClick={onNewVault}>Create vault</Button>
|
||||
</EmptyContent>
|
||||
</Empty>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{vaults.map((v) => (
|
||||
<Button
|
||||
key={v.id}
|
||||
variant="outline"
|
||||
className="justify-between"
|
||||
onClick={() => onSelectVault(v)}
|
||||
>
|
||||
<span>{v.name}</span>
|
||||
{v.isDefault ? (
|
||||
<span className="text-xs text-muted-foreground">default</span>
|
||||
) : null}
|
||||
</Button>
|
||||
))}
|
||||
<Button variant="ghost" onClick={onNewVault}>
|
||||
Create a new vault
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Accounts</CardTitle>
|
||||
<CardDescription>
|
||||
Accounts stored in "{activeVault.name}".
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{vaultAccounts.length === 0 ? (
|
||||
<Empty>
|
||||
<EmptyHeader>
|
||||
<EmptyTitle>No accounts in this vault</EmptyTitle>
|
||||
<EmptyDescription>Add a Twitch, YouTube, Kick, or custom RTMP account.</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
<EmptyContent>
|
||||
<Button onClick={onAddAccount}>Add account</Button>
|
||||
</EmptyContent>
|
||||
</Empty>
|
||||
) : (
|
||||
<div className="flex flex-col">
|
||||
{vaultAccounts.map((a) => (
|
||||
<div key={a.id}>
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<div className="text-sm font-medium">{a.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{a.provider}
|
||||
{a.secretCiphertext ? " · key encrypted" : ""}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => onEditAccount(a)}>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
if (!confirm(`Delete account "${a.name}"?`)) return
|
||||
try {
|
||||
await api.deleteAccount(a.id)
|
||||
toast.success("Account deleted")
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
))}
|
||||
<Button className="mt-4 w-fit" variant="outline" onClick={onAddAccount}>
|
||||
Add account
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<AccountDialog
|
||||
open={accountDialog.open}
|
||||
onOpenChange={accountDialog.onOpenChange}
|
||||
account={accountDialog.account}
|
||||
vaultId={activeVaultId ?? ""}
|
||||
providers={providers}
|
||||
onSaved={() => {}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
152
services/multistreaming/web/src/components/image-upload.tsx
Normal file
152
services/multistreaming/web/src/components/image-upload.tsx
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
import { useEffect, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import { UploadIcon } from "lucide-react"
|
||||
|
||||
import { api } from "@/lib/api"
|
||||
import type { Room } from "@/lib/types"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
const MAX_IMAGE_BYTES = 1 * 1024 * 1024 // 1 MiB (mirrors SCENE_MAX_IMAGE_BYTES)
|
||||
const ALLOWED_MIME = ["image/png", "image/jpeg", "image/webp"]
|
||||
|
||||
function fileToBase64(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
const result = reader.result as string
|
||||
resolve(result.split(",")[1] ?? "")
|
||||
}
|
||||
reader.onerror = () => reject(new Error("Failed to read image"))
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
function isAllowedType(file: File): boolean {
|
||||
if (ALLOWED_MIME.includes(file.type)) return true
|
||||
const ext = file.name.split(".").pop()?.toLowerCase()
|
||||
return ext === "png" || ext === "jpg" || ext === "jpeg" || ext === "webp"
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload an overlay image. Enforces the size/type limits client-side before the
|
||||
* file is base64-encoded and sent to the server.
|
||||
*/
|
||||
export function ImageUploader({
|
||||
open,
|
||||
onOpenChange,
|
||||
room,
|
||||
onUploaded,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
room: Room
|
||||
onUploaded: () => void
|
||||
}) {
|
||||
const [name, setName] = useState("")
|
||||
const [data, setData] = useState("")
|
||||
const [fileName, setFileName] = useState("")
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setName("")
|
||||
setData("")
|
||||
setFileName("")
|
||||
}
|
||||
}, [open])
|
||||
|
||||
async function onFile(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0]
|
||||
e.target.value = ""
|
||||
if (!file) return
|
||||
if (!isAllowedType(file)) {
|
||||
toast.error("Only PNG, JPEG, or WebP images are allowed")
|
||||
return
|
||||
}
|
||||
if (file.size > MAX_IMAGE_BYTES) {
|
||||
toast.error("Image must be 1 MiB or smaller")
|
||||
return
|
||||
}
|
||||
try {
|
||||
const b64 = await fileToBase64(file)
|
||||
setData(b64)
|
||||
setFileName(file.name)
|
||||
setName((n) => (n.trim() ? n : file.name))
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
}
|
||||
}
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
const trimmed = name.trim()
|
||||
if (!trimmed) {
|
||||
toast.error("Image name is required")
|
||||
return
|
||||
}
|
||||
if (trimmed.length > 64) {
|
||||
toast.error("Image name must be 64 characters or fewer")
|
||||
return
|
||||
}
|
||||
if (!data) {
|
||||
toast.error("Choose an image file")
|
||||
return
|
||||
}
|
||||
setBusy(true)
|
||||
try {
|
||||
await api.uploadImage(room.id, { name: trimmed, data })
|
||||
toast.success("Image uploaded")
|
||||
onOpenChange(false)
|
||||
onUploaded()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Upload image</DialogTitle>
|
||||
<DialogDescription>PNG, JPEG, or WebP up to 1 MiB for scene overlays.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={submit}>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="image-name">Name</FieldLabel>
|
||||
<Input
|
||||
id="image-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
maxLength={64}
|
||||
placeholder={fileName || "logo.png"}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="image-file">File</FieldLabel>
|
||||
<Input id="image-file" type="file" accept={ALLOWED_MIME.join(",")} onChange={onFile} />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="submit" disabled={busy || !data}>
|
||||
<UploadIcon />
|
||||
Upload
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
47
services/multistreaming/web/src/components/nav-rooms.tsx
Normal file
47
services/multistreaming/web/src/components/nav-rooms.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupAction,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/components/ui/sidebar"
|
||||
import { PlusIcon, VideoIcon } from "lucide-react"
|
||||
|
||||
import type { Room } from "@/lib/types"
|
||||
|
||||
export function NavRooms({
|
||||
rooms,
|
||||
activeRoomId,
|
||||
onOpen,
|
||||
onNew,
|
||||
}: {
|
||||
rooms: Room[]
|
||||
activeRoomId: string | null
|
||||
onOpen: (room: Room) => void
|
||||
onNew: () => void
|
||||
}) {
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Rooms</SidebarGroupLabel>
|
||||
<SidebarGroupAction title="New room" onClick={onNew}>
|
||||
<PlusIcon />
|
||||
<span className="sr-only">New room</span>
|
||||
</SidebarGroupAction>
|
||||
<SidebarMenu>
|
||||
{rooms.map((room) => (
|
||||
<SidebarMenuItem key={room.id}>
|
||||
<SidebarMenuButton
|
||||
onClick={() => onOpen(room)}
|
||||
isActive={room.id === activeRoomId}
|
||||
tooltip={room.name}
|
||||
>
|
||||
<VideoIcon />
|
||||
<span>{room.name}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
)
|
||||
}
|
||||
79
services/multistreaming/web/src/components/nav-user.tsx
Normal file
79
services/multistreaming/web/src/components/nav-user.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
"use client"
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
} from "@/components/ui/avatar"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
useSidebar,
|
||||
} from "@/components/ui/sidebar"
|
||||
import { ChevronsUpDownIcon, LogOutIcon } from "lucide-react"
|
||||
|
||||
export function NavUser({
|
||||
user,
|
||||
onLogout,
|
||||
}: {
|
||||
user: { name: string; email: string }
|
||||
onLogout: () => void
|
||||
}) {
|
||||
const { isMobile } = useSidebar()
|
||||
const initials = user.name.slice(0, 2).toUpperCase()
|
||||
|
||||
return (
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
size="lg"
|
||||
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
||||
>
|
||||
<Avatar className="size-8 rounded-lg">
|
||||
<AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-medium">{user.name}</span>
|
||||
<span className="truncate text-xs">{user.email}</span>
|
||||
</div>
|
||||
<ChevronsUpDownIcon className="ml-auto size-4" />
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
|
||||
side={isMobile ? "bottom" : "right"}
|
||||
align="end"
|
||||
sideOffset={4}
|
||||
>
|
||||
<DropdownMenuLabel className="p-0 font-normal">
|
||||
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
||||
<Avatar className="size-8 rounded-lg">
|
||||
<AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-medium">{user.name}</span>
|
||||
<span className="truncate text-xs">{user.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={onLogout}>
|
||||
<LogOutIcon />
|
||||
Log out
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
)
|
||||
}
|
||||
44
services/multistreaming/web/src/components/nav-vaults.tsx
Normal file
44
services/multistreaming/web/src/components/nav-vaults.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { LockIcon, LockOpenIcon } from "lucide-react"
|
||||
|
||||
import type { Vault } from "@/lib/types"
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/components/ui/sidebar"
|
||||
|
||||
/**
|
||||
* The current vault shown as a single sidebar item (not a group).
|
||||
* Clicking it asks to leave/lock the vault; when nothing is unlocked it shows a
|
||||
* disabled "no vault" state and unlocking happens from the center view.
|
||||
*/
|
||||
export function NavVaults({
|
||||
vault,
|
||||
unlocked,
|
||||
onLeave,
|
||||
}: {
|
||||
vault: Vault | null
|
||||
unlocked: boolean
|
||||
onLeave: () => void
|
||||
}) {
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Vault</SidebarGroupLabel>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
onClick={vault ? onLeave : undefined}
|
||||
isActive={unlocked}
|
||||
tooltip={vault ? vault.name : "No vault unlocked"}
|
||||
disabled={!vault}
|
||||
>
|
||||
{unlocked ? <LockOpenIcon /> : <LockIcon />}
|
||||
<span className="truncate">{vault ? vault.name : "No vault unlocked"}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
)
|
||||
}
|
||||
179
services/multistreaming/web/src/components/room-sidebar.tsx
Normal file
179
services/multistreaming/web/src/components/room-sidebar.tsx
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
import { ClapperboardIcon, PlusIcon, RadioIcon, UserIcon, VideoIcon } from "lucide-react"
|
||||
|
||||
import type { Member, Room } from "@/lib/types"
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarGroup,
|
||||
SidebarGroupAction,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuItem,
|
||||
SidebarSeparator,
|
||||
} from "@/components/ui/sidebar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
||||
/**
|
||||
* Right sidebar: room-scoped context (feeds, outputs, members). Rendered only
|
||||
* when a room is open — outside a room it is not mounted at all.
|
||||
*/
|
||||
export function RoomSidebar({
|
||||
room,
|
||||
members,
|
||||
liveFeeds,
|
||||
ingest,
|
||||
canEdit,
|
||||
onAddFeed,
|
||||
onInvite,
|
||||
}: {
|
||||
room: Room
|
||||
members: Member[]
|
||||
liveFeeds: string[]
|
||||
ingest: { app: string; rtmpPort: number; publicHost: string }
|
||||
canEdit: boolean
|
||||
onAddFeed: () => void
|
||||
onInvite: () => void
|
||||
}) {
|
||||
const host = ingest.publicHost || (typeof window !== "undefined" ? window.location.hostname : "")
|
||||
const feedById = (id: string) => room.feeds.find((f) => f.id === id)
|
||||
const accountById = (id: string) => room.accounts.find((a) => a.id === id)
|
||||
const scenes = room.scenes ?? []
|
||||
|
||||
return (
|
||||
<Sidebar
|
||||
side="right"
|
||||
collapsible="none"
|
||||
className="sticky top-0 hidden h-svh border-l lg:flex"
|
||||
>
|
||||
<SidebarHeader className="h-16 border-b border-sidebar-border">
|
||||
<div className="flex items-center gap-2 px-4 py-3">
|
||||
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
|
||||
<VideoIcon className="size-4" />
|
||||
</div>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-medium">{room.name}</span>
|
||||
<span className="truncate text-xs">room context</span>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Feeds</SidebarGroupLabel>
|
||||
{canEdit ? (
|
||||
<SidebarGroupAction title="Add feed" onClick={onAddFeed}>
|
||||
<PlusIcon />
|
||||
<span className="sr-only">Add feed</span>
|
||||
</SidebarGroupAction>
|
||||
) : null}
|
||||
<SidebarMenu>
|
||||
{room.feeds.length === 0 ? (
|
||||
<SidebarMenuItem>
|
||||
<span className="flex items-center gap-2 px-2 py-1.5 text-sm text-muted-foreground">
|
||||
<RadioIcon />
|
||||
No feeds
|
||||
</span>
|
||||
</SidebarMenuItem>
|
||||
) : (
|
||||
room.feeds.map((f) => (
|
||||
<SidebarMenuItem key={f.id}>
|
||||
<div className="flex items-center justify-between gap-2 px-2 py-1.5">
|
||||
<span className="flex min-w-0 items-center gap-2">
|
||||
<RadioIcon className="shrink-0" />
|
||||
<span className="truncate text-sm">{f.name}</span>
|
||||
</span>
|
||||
{liveFeeds.includes(f.id) ? <Badge>live</Badge> : null}
|
||||
</div>
|
||||
<div className="truncate px-8 pb-1.5 text-[11px] text-muted-foreground">
|
||||
{host}/{ingest.app}/{f.streamKey}
|
||||
</div>
|
||||
</SidebarMenuItem>
|
||||
))
|
||||
)}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
|
||||
<SidebarSeparator className="mx-0" />
|
||||
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Outputs</SidebarGroupLabel>
|
||||
<SidebarMenu>
|
||||
{room.outputs.length === 0 ? (
|
||||
<SidebarMenuItem>
|
||||
<span className="flex items-center gap-2 px-2 py-1.5 text-sm text-muted-foreground">
|
||||
<VideoIcon />
|
||||
No outputs
|
||||
</span>
|
||||
</SidebarMenuItem>
|
||||
) : (
|
||||
room.outputs.map((o) => (
|
||||
<SidebarMenuItem key={o.id}>
|
||||
<div className="flex items-center justify-between gap-2 px-2 py-1.5">
|
||||
<span className="truncate text-sm">
|
||||
{feedById(o.feedId)?.name ?? "?"} → {accountById(o.accountId)?.name ?? "?"}
|
||||
</span>
|
||||
{o.runtime?.running ? <Badge variant="secondary">live</Badge> : null}
|
||||
</div>
|
||||
</SidebarMenuItem>
|
||||
))
|
||||
)}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
|
||||
<SidebarSeparator className="mx-0" />
|
||||
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Scenes</SidebarGroupLabel>
|
||||
<SidebarMenu>
|
||||
{scenes.length === 0 ? (
|
||||
<SidebarMenuItem>
|
||||
<span className="flex items-center gap-2 px-2 py-1.5 text-sm text-muted-foreground">
|
||||
<ClapperboardIcon />
|
||||
No scenes
|
||||
</span>
|
||||
</SidebarMenuItem>
|
||||
) : (
|
||||
scenes.map((s) => (
|
||||
<SidebarMenuItem key={s.id}>
|
||||
<div className="flex items-center justify-between gap-2 px-2 py-1.5">
|
||||
<span className="flex min-w-0 items-center gap-2">
|
||||
<ClapperboardIcon className="shrink-0" />
|
||||
<span className="truncate text-sm">{s.name}</span>
|
||||
</span>
|
||||
{s.active ? <Badge>active</Badge> : null}
|
||||
</div>
|
||||
</SidebarMenuItem>
|
||||
))
|
||||
)}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
|
||||
<SidebarSeparator className="mx-0" />
|
||||
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Members</SidebarGroupLabel>
|
||||
{canEdit ? (
|
||||
<SidebarGroupAction title="Invite" onClick={onInvite}>
|
||||
<PlusIcon />
|
||||
<span className="sr-only">Invite</span>
|
||||
</SidebarGroupAction>
|
||||
) : null}
|
||||
<SidebarMenu>
|
||||
{members.map((m) => (
|
||||
<SidebarMenuItem key={m.id}>
|
||||
<div className="flex items-center justify-between gap-2 px-2 py-1.5">
|
||||
<span className="flex min-w-0 items-center gap-2">
|
||||
<UserIcon className="shrink-0" />
|
||||
<span className="truncate text-sm">{m.username}</span>
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">{m.role}</span>
|
||||
</div>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
)
|
||||
}
|
||||
216
services/multistreaming/web/src/components/room-view.tsx
Normal file
216
services/multistreaming/web/src/components/room-view.tsx
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
import { useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { api } from "@/lib/api"
|
||||
import type { Account, Output, Room } from "@/lib/types"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { GrantDialog } from "@/components/dialogs"
|
||||
import { ScenePanel } from "@/components/scene-panel"
|
||||
|
||||
/**
|
||||
* Center content for an open room: the production routing (feed → account).
|
||||
* Feeds and members live in the right sidebar (room context).
|
||||
*/
|
||||
export function RoomView({
|
||||
room,
|
||||
canEdit,
|
||||
onRefresh,
|
||||
onBack,
|
||||
}: {
|
||||
room: Room
|
||||
canEdit: boolean
|
||||
onRefresh: () => void
|
||||
onBack: () => void
|
||||
}) {
|
||||
const [grantOpen, setGrantOpen] = useState(false)
|
||||
const [outputOpen, setOutputOpen] = useState(false)
|
||||
const [outputFeed, setOutputFeed] = useState("")
|
||||
const [outputAccount, setOutputAccount] = useState("")
|
||||
|
||||
const feedNameById = (id: string) => room.feeds.find((f) => f.id === id)?.name ?? "?"
|
||||
const accountName = (id: string) => room.accounts.find((a) => a.id === id)?.name ?? "?"
|
||||
|
||||
async function addOutput() {
|
||||
try {
|
||||
await api.createOutput(room.id, outputFeed, outputAccount)
|
||||
toast.success("Output added")
|
||||
setOutputOpen(false)
|
||||
setOutputFeed("")
|
||||
setOutputAccount("")
|
||||
onRefresh()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>{room.name}</CardTitle>
|
||||
<CardDescription>Production routing · role: {room.role}</CardDescription>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={onBack}>
|
||||
Back
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => setGrantOpen(true)} disabled={room.accounts.length === 0}>
|
||||
Start streaming
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
<ScenePanel room={room} canEdit={canEdit} onRefresh={onRefresh} />
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Outputs</CardTitle>
|
||||
<CardDescription>Route a feed to a destination account.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{room.outputs.length === 0 ? (
|
||||
<Empty>
|
||||
<EmptyHeader>
|
||||
<EmptyTitle>No outputs</EmptyTitle>
|
||||
<EmptyDescription>Wire a feed to a destination account.</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
<EmptyContent>
|
||||
{canEdit ? <Button onClick={() => setOutputOpen(true)}>Add output</Button> : null}
|
||||
</EmptyContent>
|
||||
</Empty>
|
||||
) : (
|
||||
<div className="flex flex-col">
|
||||
{room.outputs.map((o: Output) => (
|
||||
<div key={o.id}>
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">
|
||||
{feedNameById(o.feedId)} → {accountName(o.accountId)}
|
||||
</span>
|
||||
{o.runtime?.running ? <Badge variant="secondary">live</Badge> : null}
|
||||
</div>
|
||||
{canEdit ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
checked={o.enabled}
|
||||
onCheckedChange={async (checked) => {
|
||||
try {
|
||||
await api.updateOutput(o.id, checked)
|
||||
onRefresh()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
if (!confirm("Delete this output?")) return
|
||||
await api.deleteOutput(o.id)
|
||||
toast.success("Output deleted")
|
||||
onRefresh()
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
))}
|
||||
{canEdit ? (
|
||||
<Button className="mt-4 w-fit" variant="outline" onClick={() => setOutputOpen(true)}>
|
||||
Add output
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={outputOpen} onOpenChange={setOutputOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add output</DialogTitle>
|
||||
<DialogDescription>Route a feed to a destination account.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-3">
|
||||
<Select value={outputFeed} onValueChange={setOutputFeed}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Feed" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{room.feeds.map((f) => (
|
||||
<SelectItem key={f.id} value={f.id}>
|
||||
{f.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={outputAccount} onValueChange={setOutputAccount}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Account" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{room.accounts.map((a) => (
|
||||
<SelectItem key={a.id} value={a.id}>
|
||||
{a.name} ({a.provider})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button disabled={!outputFeed || !outputAccount} onClick={() => void addOutput()}>
|
||||
Add
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<GrantDialog
|
||||
open={grantOpen}
|
||||
onOpenChange={setGrantOpen}
|
||||
accounts={room.accounts as Account[]}
|
||||
onGranted={onRefresh}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
606
services/multistreaming/web/src/components/scene-editor.tsx
Normal file
606
services/multistreaming/web/src/components/scene-editor.tsx
Normal file
|
|
@ -0,0 +1,606 @@
|
|||
import { useEffect, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import { ImageIcon, PlusIcon, Trash2Icon, TypeIcon } from "lucide-react"
|
||||
|
||||
import { api } from "@/lib/api"
|
||||
import type { AudioRouting, OverlayItem, Room, Scene, SceneLayout, SceneOutput } from "@/lib/types"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
|
||||
const EMPTY = "__empty__"
|
||||
const CANVAS_W = 1920
|
||||
const CANVAS_H = 1080
|
||||
const MAX_OVERLAYS = 8
|
||||
|
||||
function audioLabel(audio: AudioRouting, room: Room): string {
|
||||
if (audio.mode === "program") return "Program mix"
|
||||
if (audio.mode === "silent") return "Silent"
|
||||
return `Feed: ${room.feeds.find((f) => f.id === audio.feedId)?.name ?? "?"}`
|
||||
}
|
||||
|
||||
function newTextOverlay(): OverlayItem {
|
||||
return { id: crypto.randomUUID(), kind: "text", text: "", x: 32, y: 32, fontSize: 48, color: "#ffffff", bold: false }
|
||||
}
|
||||
|
||||
function newImageOverlay(firstImageId: string | undefined): OverlayItem | null {
|
||||
if (!firstImageId) return null
|
||||
return { id: crypto.randomUUID(), kind: "image", imageId: firstImageId, x: 16, y: 844, width: 200, height: 112, opacity: 1 }
|
||||
}
|
||||
|
||||
/**
|
||||
* Full scene editor: name, layout (grid/PiP) with feed-slot assignment, text +
|
||||
* image overlays, and per-output audio routing. Used for both create (scene
|
||||
* null) and edit (scene set).
|
||||
*/
|
||||
export function SceneEditorDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
scene,
|
||||
room,
|
||||
onSaved,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
scene: Scene | null
|
||||
room: Room
|
||||
onSaved: () => void
|
||||
}) {
|
||||
const [name, setName] = useState("")
|
||||
const [layoutType, setLayoutType] = useState<"grid" | "pip">("grid")
|
||||
const [columns, setColumns] = useState(2)
|
||||
const [slots, setSlots] = useState<Array<string | null>>([null, null])
|
||||
const [overlays, setOverlays] = useState<OverlayItem[]>([])
|
||||
const [outputs, setOutputs] = useState<SceneOutput[]>([])
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
const feeds = room.feeds ?? []
|
||||
const images = room.images ?? []
|
||||
const accounts = room.accounts ?? []
|
||||
const sceneOutputs = room.sceneOutputs ?? []
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const existing = scene ? sceneOutputs.filter((so) => so.sceneId === scene.id) : []
|
||||
setName(scene?.name ?? "")
|
||||
setLayoutType(scene?.layout.type ?? "grid")
|
||||
setColumns(scene?.layout.type === "grid" ? scene.layout.columns ?? 2 : 2)
|
||||
setSlots(scene ? [...scene.layout.slots] : [null, null])
|
||||
setOverlays(scene ? scene.overlays.map((o) => ({ ...o })) : [])
|
||||
setOutputs(existing.map((so) => ({ ...so })))
|
||||
// Reset only when the dialog opens or the edited scene changes.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open, scene])
|
||||
|
||||
function setLayoutKind(type: "grid" | "pip") {
|
||||
setLayoutType(type)
|
||||
if (type === "grid") {
|
||||
// Keep existing assignments; grid allows 1..6 slots.
|
||||
const next = slots.length >= 1 && slots.length <= 6 ? [...slots] : [null, null]
|
||||
setSlots(next)
|
||||
} else {
|
||||
setSlots([slots[0] ?? null, slots[1] ?? null])
|
||||
}
|
||||
}
|
||||
|
||||
function setSlot(i: number, value: string | null) {
|
||||
setSlots((list) => list.map((s, idx) => (idx === i ? value : s)))
|
||||
}
|
||||
|
||||
function addSlot() {
|
||||
setSlots((list) => (list.length < 6 ? [...list, null] : list))
|
||||
}
|
||||
|
||||
function removeSlot() {
|
||||
setSlots((list) => (list.length > 1 ? list.slice(0, -1) : list))
|
||||
}
|
||||
|
||||
function patchOverlay(id: string, patch: Record<string, unknown>) {
|
||||
setOverlays((list) => list.map((o) => (o.id === id ? ({ ...o, ...patch } as OverlayItem) : o)))
|
||||
}
|
||||
|
||||
function removeOverlay(id: string) {
|
||||
setOverlays((list) => list.filter((o) => o.id !== id))
|
||||
}
|
||||
|
||||
function addText() {
|
||||
if (overlays.length >= MAX_OVERLAYS) {
|
||||
toast.error(`At most ${MAX_OVERLAYS} overlays`)
|
||||
return
|
||||
}
|
||||
setOverlays((list) => [...list, newTextOverlay()])
|
||||
}
|
||||
|
||||
function addImage() {
|
||||
if (overlays.length >= MAX_OVERLAYS) {
|
||||
toast.error(`At most ${MAX_OVERLAYS} overlays`)
|
||||
return
|
||||
}
|
||||
const first = images[0]?.id
|
||||
if (!first) {
|
||||
toast.error("Upload an image first")
|
||||
return
|
||||
}
|
||||
setOverlays((list) => [...list, newImageOverlay(first)!])
|
||||
}
|
||||
|
||||
function addOutput() {
|
||||
setOutputs((list) => [
|
||||
...list,
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
roomId: room.id,
|
||||
sceneId: scene?.id ?? "",
|
||||
accountId: accounts[0]?.id ?? "",
|
||||
enabled: true,
|
||||
audio: { mode: "program" },
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
function patchOutput(id: string, patch: Partial<SceneOutput>) {
|
||||
setOutputs((list) => list.map((o) => (o.id === id ? ({ ...o, ...patch } as SceneOutput) : o)))
|
||||
}
|
||||
|
||||
function removeOutput(id: string) {
|
||||
setOutputs((list) => list.filter((o) => o.id !== id))
|
||||
}
|
||||
|
||||
function buildLayout(): SceneLayout {
|
||||
return layoutType === "grid"
|
||||
? { type: "grid", columns, slots: [...slots] }
|
||||
: { type: "pip", slots: [slots[0] ?? null, slots[1] ?? null] }
|
||||
}
|
||||
|
||||
function validate(): string | null {
|
||||
const trimmed = name.trim()
|
||||
if (!trimmed) return "Scene name is required"
|
||||
if (trimmed.length > 64) return "Scene name must be 64 characters or fewer"
|
||||
|
||||
const layout = buildLayout()
|
||||
if (layout.type === "grid") {
|
||||
if (!layout.columns || layout.columns < 2 || layout.columns > 4) return "Grid columns must be 2–4"
|
||||
if (layout.slots.length < 1 || layout.slots.length > 6) return "Grid layout needs 1–6 slots"
|
||||
} else if (layout.slots.length !== 2) {
|
||||
return "PiP layout needs exactly 2 slots"
|
||||
}
|
||||
|
||||
const assigned = layout.slots.filter((s): s is string => !!s)
|
||||
if (new Set(assigned).size !== assigned.length) return "A feed can only be assigned to one slot"
|
||||
|
||||
if (overlays.length > MAX_OVERLAYS) return `At most ${MAX_OVERLAYS} overlays`
|
||||
for (const o of overlays) {
|
||||
if (o.kind === "text") {
|
||||
const t = o.text.trim()
|
||||
if (!t || t.length > 256) return "Text overlays need 1–256 characters"
|
||||
if (!Number.isInteger(o.x) || o.x < 0 || o.x >= CANVAS_W) return "Text x must be 0–1919"
|
||||
if (!Number.isInteger(o.y) || o.y < 0 || o.y >= CANVAS_H) return "Text y must be 0–1079"
|
||||
if (o.fontSize < 8 || o.fontSize > 144) return "Font size must be 8–144"
|
||||
if (!/^#[0-9a-fA-F]{6}$/.test(o.color)) return "Text color must be #rrggbb"
|
||||
} else {
|
||||
if (!images.some((img) => img.id === o.imageId)) return "Image overlay references a missing image"
|
||||
if (o.width < 16 || o.width > CANVAS_W) return "Image width must be 16–1920"
|
||||
if (o.height < 16 || o.height > CANVAS_H) return "Image height must be 16–1080"
|
||||
if (o.opacity != null && (o.opacity < 0 || o.opacity > 1)) return "Image opacity must be 0–1"
|
||||
}
|
||||
}
|
||||
|
||||
for (const so of outputs) {
|
||||
if (!accounts.some((a) => a.id === so.accountId)) return "Each destination needs an account"
|
||||
if (so.audio.mode === "feed") {
|
||||
const feedId = so.audio.feedId
|
||||
if (!feeds.some((f) => f.id === feedId)) return "Audio feed must be a feed in this room"
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
async function reconcileOutputs(sceneId: string) {
|
||||
const existingIds = new Set(sceneOutputs.filter((so) => so.sceneId === sceneId).map((so) => so.id))
|
||||
const currentIds = new Set(outputs.map((o) => o.id))
|
||||
// Delete removed destinations.
|
||||
for (const ex of sceneOutputs) {
|
||||
if (ex.sceneId === sceneId && !currentIds.has(ex.id)) {
|
||||
await api.deleteSceneOutput(ex.id)
|
||||
}
|
||||
}
|
||||
for (const so of outputs) {
|
||||
if (existingIds.has(so.id)) {
|
||||
await api.updateSceneOutput(so.id, { accountId: so.accountId, audio: so.audio, enabled: so.enabled })
|
||||
} else {
|
||||
await api.createSceneOutput(room.id, {
|
||||
sceneId,
|
||||
accountId: so.accountId,
|
||||
audio: so.audio,
|
||||
enabled: so.enabled,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
const err = validate()
|
||||
if (err) {
|
||||
toast.error(err)
|
||||
return
|
||||
}
|
||||
setBusy(true)
|
||||
try {
|
||||
const layout = buildLayout()
|
||||
if (scene) {
|
||||
await api.updateScene(scene.id, { name: name.trim(), layout, overlays })
|
||||
await reconcileOutputs(scene.id)
|
||||
} else {
|
||||
const created = await api.createScene(room.id, { name: name.trim(), layout })
|
||||
if (overlays.length > 0) await api.updateScene(created.id, { overlays })
|
||||
for (const so of outputs) {
|
||||
await api.createSceneOutput(room.id, {
|
||||
sceneId: created.id,
|
||||
accountId: so.accountId,
|
||||
audio: so.audio,
|
||||
enabled: so.enabled,
|
||||
})
|
||||
}
|
||||
}
|
||||
toast.success(scene ? "Scene updated" : "Scene created")
|
||||
onOpenChange(false)
|
||||
onSaved()
|
||||
} catch (err2) {
|
||||
toast.error((err2 as Error).message)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{scene ? `Edit scene · ${scene.name}` : "New scene"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Compose live feeds into a grid or picture-in-picture program with overlays and per-output
|
||||
audio.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={submit} className="max-h-[70vh] overflow-y-auto pr-1">
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="scene-name">Name</FieldLabel>
|
||||
<Input
|
||||
id="scene-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
maxLength={64}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Layout</FieldLabel>
|
||||
<Select value={layoutType} onValueChange={(v) => setLayoutKind(v as "grid" | "pip")}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="grid">Grid</SelectItem>
|
||||
<SelectItem value="pip">Picture-in-picture</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
{layoutType === "grid" ? (
|
||||
<Field>
|
||||
<FieldLabel>Columns</FieldLabel>
|
||||
<Select value={String(columns)} onValueChange={(v) => setColumns(Number(v))}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="2">2</SelectItem>
|
||||
<SelectItem value="3">3</SelectItem>
|
||||
<SelectItem value="4">4</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
) : null}
|
||||
|
||||
<Field>
|
||||
<div className="flex items-center justify-between">
|
||||
<FieldLabel className="mb-0">
|
||||
{layoutType === "grid" ? "Slots" : "Slots (main + PiP)"}
|
||||
</FieldLabel>
|
||||
{layoutType === "grid" ? (
|
||||
<div className="flex gap-1">
|
||||
<Button type="button" variant="outline" size="xs" onClick={addSlot} disabled={slots.length >= 6}>
|
||||
<PlusIcon />
|
||||
Slot
|
||||
</Button>
|
||||
<Button type="button" variant="outline" size="xs" onClick={removeSlot} disabled={slots.length <= 1}>
|
||||
<Trash2Icon />
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{slots.map((slot, i) => (
|
||||
<div key={i} className="flex items-center gap-2">
|
||||
<span className="w-24 shrink-0 text-xs text-muted-foreground">
|
||||
{layoutType === "pip" ? (i === 0 ? "Main" : "PiP") : `Slot ${i + 1}`}
|
||||
</span>
|
||||
<Select value={slot ?? EMPTY} onValueChange={(v) => setSlot(i, v === EMPTY ? null : v)}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Feed" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value={EMPTY}>Empty</SelectItem>
|
||||
{feeds.map((f) => (
|
||||
<SelectItem key={f.id} value={f.id}>
|
||||
{f.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Overlays</span>
|
||||
<div className="flex gap-1">
|
||||
<Button type="button" variant="outline" size="xs" onClick={addText}>
|
||||
<TypeIcon />
|
||||
Text
|
||||
</Button>
|
||||
<Button type="button" variant="outline" size="xs" onClick={addImage}>
|
||||
<ImageIcon />
|
||||
Image
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-col gap-3">
|
||||
{overlays.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No overlays. Add text or an uploaded image.</p>
|
||||
) : (
|
||||
overlays.map((o) =>
|
||||
o.kind === "text" ? (
|
||||
<div key={o.id} className="flex flex-col gap-2 rounded-lg border p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="outline">Text</Badge>
|
||||
<Button type="button" variant="ghost" size="icon-sm" onClick={() => removeOverlay(o.id)}>
|
||||
<Trash2Icon />
|
||||
</Button>
|
||||
</div>
|
||||
<Input
|
||||
value={o.text}
|
||||
placeholder="Text"
|
||||
maxLength={256}
|
||||
onChange={(e) => patchOverlay(o.id, { text: e.target.value })}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
aria-label="X"
|
||||
value={o.x}
|
||||
onChange={(e) => patchOverlay(o.id, { x: Number(e.target.value) || 0 })}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
aria-label="Y"
|
||||
value={o.y}
|
||||
onChange={(e) => patchOverlay(o.id, { y: Number(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
aria-label="Font size"
|
||||
value={o.fontSize}
|
||||
onChange={(e) => patchOverlay(o.id, { fontSize: Number(e.target.value) || 0 })}
|
||||
/>
|
||||
<Input
|
||||
type="color"
|
||||
aria-label="Color"
|
||||
value={o.color}
|
||||
onChange={(e) => patchOverlay(o.id, { color: e.target.value })}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={o.bold ?? false}
|
||||
onCheckedChange={(checked) => patchOverlay(o.id, { bold: checked })}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">Bold</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div key={o.id} className="flex flex-col gap-2 rounded-lg border p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="outline">Image</Badge>
|
||||
<Button type="button" variant="ghost" size="icon-sm" onClick={() => removeOverlay(o.id)}>
|
||||
<Trash2Icon />
|
||||
</Button>
|
||||
</div>
|
||||
<Select value={o.imageId} onValueChange={(v) => patchOverlay(o.id, { imageId: v })}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Image" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{images.map((img) => (
|
||||
<SelectItem key={img.id} value={img.id}>
|
||||
{img.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
aria-label="X"
|
||||
value={o.x}
|
||||
onChange={(e) => patchOverlay(o.id, { x: Number(e.target.value) || 0 })}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
aria-label="Y"
|
||||
value={o.y}
|
||||
onChange={(e) => patchOverlay(o.id, { y: Number(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
aria-label="Width"
|
||||
value={o.width}
|
||||
onChange={(e) => patchOverlay(o.id, { width: Number(e.target.value) || 0 })}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
aria-label="Height"
|
||||
value={o.height}
|
||||
onChange={(e) => patchOverlay(o.id, { height: Number(e.target.value) || 0 })}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
step={0.05}
|
||||
min={0}
|
||||
max={1}
|
||||
aria-label="Opacity"
|
||||
value={o.opacity ?? 1}
|
||||
onChange={(e) => patchOverlay(o.id, { opacity: Number(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Destinations & audio</span>
|
||||
<Button type="button" variant="outline" size="xs" onClick={addOutput} disabled={accounts.length === 0}>
|
||||
<PlusIcon />
|
||||
Destination
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-col gap-3">
|
||||
{outputs.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No destinations. Add one to push the composed program to an account.
|
||||
</p>
|
||||
) : (
|
||||
outputs.map((so) => (
|
||||
<div key={so.id} className="flex flex-col gap-2 rounded-lg border p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="truncate text-sm font-medium">
|
||||
{accounts.find((a) => a.id === so.accountId)?.name ?? "Select account"}
|
||||
</span>
|
||||
<Button type="button" variant="ghost" size="icon-sm" onClick={() => removeOutput(so.id)}>
|
||||
<Trash2Icon />
|
||||
</Button>
|
||||
</div>
|
||||
<Select value={so.accountId} onValueChange={(v) => patchOutput(so.id, { accountId: v })}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Account" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{accounts.map((a) => (
|
||||
<SelectItem key={a.id} value={a.id}>
|
||||
{a.name} ({a.provider})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="grid grid-cols-2 items-center gap-2">
|
||||
<Select value={so.audio.mode} onValueChange={(v) => patchOutput(so.id, { audio: { mode: v } as AudioRouting })}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="program">Program mix</SelectItem>
|
||||
<SelectItem value="silent">Silent</SelectItem>
|
||||
<SelectItem value="feed">Single feed</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{so.audio.mode === "feed" ? (
|
||||
<Select
|
||||
value={so.audio.feedId ?? ""}
|
||||
onValueChange={(v) => patchOutput(so.id, { audio: { mode: "feed", feedId: v } as AudioRouting })}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Feed" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{feeds.map((f) => (
|
||||
<SelectItem key={f.id} value={f.id}>
|
||||
{f.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<span className="truncate text-xs text-muted-foreground">{audioLabel(so.audio, room)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={so.enabled}
|
||||
onCheckedChange={(checked) => patchOutput(so.id, { enabled: checked })}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">Enabled</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="submit" disabled={busy}>
|
||||
{scene ? "Save" : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
365
services/multistreaming/web/src/components/scene-panel.tsx
Normal file
365
services/multistreaming/web/src/components/scene-panel.tsx
Normal file
|
|
@ -0,0 +1,365 @@
|
|||
import { useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import {
|
||||
ClapperboardIcon,
|
||||
ImageIcon,
|
||||
PencilIcon,
|
||||
PlusIcon,
|
||||
PowerIcon,
|
||||
Trash2Icon,
|
||||
UploadIcon,
|
||||
} from "lucide-react"
|
||||
|
||||
import { api } from "@/lib/api"
|
||||
import type { AudioRouting, Room, RoomImage, Scene, SceneOutput } from "@/lib/types"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { ImageUploader } from "@/components/image-upload"
|
||||
import { SceneEditorDialog } from "@/components/scene-editor"
|
||||
|
||||
function audioLabel(audio: AudioRouting, room: Room): string {
|
||||
if (audio.mode === "program") return "Program mix"
|
||||
if (audio.mode === "silent") return "Silent"
|
||||
return `Feed: ${room.feeds.find((f) => f.id === audio.feedId)?.name ?? "?"}`
|
||||
}
|
||||
|
||||
function formatBytes(n: number): string {
|
||||
if (n < 1024) return `${n} B`
|
||||
if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`
|
||||
return `${(n / (1024 * 1024)).toFixed(1)} MB`
|
||||
}
|
||||
|
||||
/**
|
||||
* Scenes & composition card: create/rename/delete/activate scenes, show the
|
||||
* active scene's destinations, and manage overlay images.
|
||||
*/
|
||||
export function ScenePanel({
|
||||
room,
|
||||
canEdit,
|
||||
onRefresh,
|
||||
}: {
|
||||
room: Room
|
||||
canEdit: boolean
|
||||
onRefresh: () => void
|
||||
}) {
|
||||
const [editorOpen, setEditorOpen] = useState(false)
|
||||
const [editing, setEditing] = useState<Scene | null>(null)
|
||||
const [uploadOpen, setUploadOpen] = useState(false)
|
||||
const [deleteScene, setDeleteScene] = useState<Scene | null>(null)
|
||||
const [deleteOutput, setDeleteOutput] = useState<SceneOutput | null>(null)
|
||||
const [deleteImage, setDeleteImage] = useState<RoomImage | null>(null)
|
||||
|
||||
const scenes = room.scenes ?? []
|
||||
const images = room.images ?? []
|
||||
const sceneOutputs = room.sceneOutputs ?? []
|
||||
const activeScene = scenes.find((s) => s.active) ?? null
|
||||
const activeOutputs = activeScene ? sceneOutputs.filter((so) => so.sceneId === activeScene.id) : []
|
||||
|
||||
function openNew() {
|
||||
setEditing(null)
|
||||
setEditorOpen(true)
|
||||
}
|
||||
|
||||
function openEdit(scene: Scene) {
|
||||
setEditing(scene)
|
||||
setEditorOpen(true)
|
||||
}
|
||||
|
||||
async function activate(scene: Scene) {
|
||||
try {
|
||||
await api.activateScene(scene.id)
|
||||
toast.success(`"${scene.name}" activated`)
|
||||
onRefresh()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDeleteScene() {
|
||||
if (!deleteScene) return
|
||||
try {
|
||||
await api.deleteScene(deleteScene.id)
|
||||
toast.success("Scene deleted")
|
||||
setDeleteScene(null)
|
||||
onRefresh()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
setDeleteScene(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDeleteOutput() {
|
||||
if (!deleteOutput) return
|
||||
try {
|
||||
await api.deleteSceneOutput(deleteOutput.id)
|
||||
toast.success("Destination removed")
|
||||
setDeleteOutput(null)
|
||||
onRefresh()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
setDeleteOutput(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDeleteImage() {
|
||||
if (!deleteImage) return
|
||||
try {
|
||||
await api.deleteImage(deleteImage.id)
|
||||
toast.success("Image deleted")
|
||||
setDeleteImage(null)
|
||||
onRefresh()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
setDeleteImage(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleOutput(so: SceneOutput, enabled: boolean) {
|
||||
try {
|
||||
await api.updateSceneOutput(so.id, { enabled })
|
||||
onRefresh()
|
||||
} catch (err) {
|
||||
toast.error((err as Error).message)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Scenes</CardTitle>
|
||||
<CardDescription>Compose feeds into a grid or PiP program.</CardDescription>
|
||||
</div>
|
||||
{canEdit ? (
|
||||
<Button size="sm" onClick={openNew}>
|
||||
<PlusIcon />
|
||||
New scene
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{scenes.length === 0 ? (
|
||||
<Empty>
|
||||
<EmptyHeader>
|
||||
<EmptyTitle>No scenes</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
Create a scene to compose live feeds instead of raw passthrough.
|
||||
</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
<EmptyContent>
|
||||
{canEdit ? <Button onClick={openNew}>New scene</Button> : null}
|
||||
</EmptyContent>
|
||||
</Empty>
|
||||
) : (
|
||||
<div className="flex flex-col">
|
||||
{scenes.map((scene) => (
|
||||
<div key={scene.id}>
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<ClapperboardIcon className="shrink-0" />
|
||||
<span className="truncate text-sm font-medium">{scene.name}</span>
|
||||
{scene.active ? <Badge>active</Badge> : null}
|
||||
</div>
|
||||
{canEdit ? (
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
{!scene.active ? (
|
||||
<Button variant="outline" size="sm" onClick={() => void activate(scene)}>
|
||||
<PowerIcon />
|
||||
Activate
|
||||
</Button>
|
||||
) : null}
|
||||
<Button variant="outline" size="icon-sm" title="Edit" onClick={() => openEdit(scene)}>
|
||||
<PencilIcon />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
title="Delete"
|
||||
onClick={() => setDeleteScene(scene)}
|
||||
>
|
||||
<Trash2Icon />
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeScene ? (
|
||||
<div className="mt-4">
|
||||
<span className="text-sm font-medium">
|
||||
Destinations for “{activeScene.name}”
|
||||
</span>
|
||||
<div className="mt-2 flex flex-col">
|
||||
{activeOutputs.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No destinations. Edit the scene to add one.
|
||||
</p>
|
||||
) : (
|
||||
activeOutputs.map((so) => (
|
||||
<div key={so.id}>
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="truncate text-sm">
|
||||
{so.account?.name ?? "?"}
|
||||
</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{audioLabel(so.audio, room)}
|
||||
</span>
|
||||
{so.runtime?.running ? <Badge variant="secondary">live</Badge> : null}
|
||||
</div>
|
||||
{canEdit ? (
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<Switch
|
||||
checked={so.enabled}
|
||||
onCheckedChange={(checked) => void toggleOutput(so, checked)}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
title="Delete"
|
||||
onClick={() => setDeleteOutput(so)}
|
||||
>
|
||||
<Trash2Icon />
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Images</span>
|
||||
{canEdit ? (
|
||||
<Button variant="outline" size="sm" onClick={() => setUploadOpen(true)}>
|
||||
<UploadIcon />
|
||||
Upload
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-2 flex flex-col">
|
||||
{images.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No overlay images yet.</p>
|
||||
) : (
|
||||
images.map((img) => (
|
||||
<div key={img.id}>
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<ImageIcon className="shrink-0" />
|
||||
<span className="truncate text-sm">{img.name}</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{img.mime} · {formatBytes(img.size)}
|
||||
</span>
|
||||
</div>
|
||||
{canEdit ? (
|
||||
<Button variant="outline" size="icon-sm" title="Delete" onClick={() => setDeleteImage(img)}>
|
||||
<Trash2Icon />
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<SceneEditorDialog
|
||||
open={editorOpen}
|
||||
onOpenChange={setEditorOpen}
|
||||
scene={editing}
|
||||
room={room}
|
||||
onSaved={onRefresh}
|
||||
/>
|
||||
<ImageUploader open={uploadOpen} onOpenChange={setUploadOpen} room={room} onUploaded={onRefresh} />
|
||||
|
||||
<AlertDialog open={deleteScene !== null} onOpenChange={(o) => !o && setDeleteScene(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete scene?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{deleteScene ? (
|
||||
<>
|
||||
This removes “{deleteScene.name}” and its destinations. If it was active, the room
|
||||
returns to passthrough routing.
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction variant="destructive" onClick={() => void confirmDeleteScene()}>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog open={deleteOutput !== null} onOpenChange={(o) => !o && setDeleteOutput(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Remove destination?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This destination will stop receiving the composed program.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction variant="destructive" onClick={() => void confirmDeleteOutput()}>
|
||||
Remove
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog open={deleteImage !== null} onOpenChange={(o) => !o && setDeleteImage(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete image?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Any overlay referencing this image will be removed too.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction variant="destructive" onClick={() => void confirmDeleteImage()}>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
230
services/multistreaming/web/src/components/theme-provider.tsx
Normal file
230
services/multistreaming/web/src/components/theme-provider.tsx
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
/* eslint-disable react-refresh/only-export-components */
|
||||
import * as React from "react"
|
||||
|
||||
type Theme = "dark" | "light" | "system"
|
||||
type ResolvedTheme = "dark" | "light"
|
||||
|
||||
type ThemeProviderProps = {
|
||||
children: React.ReactNode
|
||||
defaultTheme?: Theme
|
||||
storageKey?: string
|
||||
disableTransitionOnChange?: boolean
|
||||
}
|
||||
|
||||
type ThemeProviderState = {
|
||||
theme: Theme
|
||||
setTheme: (theme: Theme) => void
|
||||
}
|
||||
|
||||
const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)"
|
||||
const THEME_VALUES: Theme[] = ["dark", "light", "system"]
|
||||
|
||||
const ThemeProviderContext = React.createContext<
|
||||
ThemeProviderState | undefined
|
||||
>(undefined)
|
||||
|
||||
function isTheme(value: string | null): value is Theme {
|
||||
if (value === null) {
|
||||
return false
|
||||
}
|
||||
|
||||
return THEME_VALUES.includes(value as Theme)
|
||||
}
|
||||
|
||||
function getSystemTheme(): ResolvedTheme {
|
||||
if (window.matchMedia(COLOR_SCHEME_QUERY).matches) {
|
||||
return "dark"
|
||||
}
|
||||
|
||||
return "light"
|
||||
}
|
||||
|
||||
function disableTransitionsTemporarily() {
|
||||
const style = document.createElement("style")
|
||||
style.appendChild(
|
||||
document.createTextNode(
|
||||
"*,*::before,*::after{-webkit-transition:none!important;transition:none!important}"
|
||||
)
|
||||
)
|
||||
document.head.appendChild(style)
|
||||
|
||||
return () => {
|
||||
window.getComputedStyle(document.body)
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
style.remove()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function isEditableTarget(target: EventTarget | null) {
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (target.isContentEditable) {
|
||||
return true
|
||||
}
|
||||
|
||||
const editableParent = target.closest(
|
||||
"input, textarea, select, [contenteditable='true']"
|
||||
)
|
||||
if (editableParent) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
defaultTheme = "system",
|
||||
storageKey = "theme",
|
||||
disableTransitionOnChange = true,
|
||||
...props
|
||||
}: ThemeProviderProps) {
|
||||
const [theme, setThemeState] = React.useState<Theme>(() => {
|
||||
const storedTheme = localStorage.getItem(storageKey)
|
||||
if (isTheme(storedTheme)) {
|
||||
return storedTheme
|
||||
}
|
||||
|
||||
return defaultTheme
|
||||
})
|
||||
|
||||
const setTheme = React.useCallback(
|
||||
(nextTheme: Theme) => {
|
||||
localStorage.setItem(storageKey, nextTheme)
|
||||
setThemeState(nextTheme)
|
||||
},
|
||||
[storageKey]
|
||||
)
|
||||
|
||||
const applyTheme = React.useCallback(
|
||||
(nextTheme: Theme) => {
|
||||
const root = document.documentElement
|
||||
const resolvedTheme =
|
||||
nextTheme === "system" ? getSystemTheme() : nextTheme
|
||||
const restoreTransitions = disableTransitionOnChange
|
||||
? disableTransitionsTemporarily()
|
||||
: null
|
||||
|
||||
root.classList.remove("light", "dark")
|
||||
root.classList.add(resolvedTheme)
|
||||
|
||||
if (restoreTransitions) {
|
||||
restoreTransitions()
|
||||
}
|
||||
},
|
||||
[disableTransitionOnChange]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
applyTheme(theme)
|
||||
|
||||
if (theme !== "system") {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY)
|
||||
const handleChange = () => {
|
||||
applyTheme("system")
|
||||
}
|
||||
|
||||
mediaQuery.addEventListener("change", handleChange)
|
||||
|
||||
return () => {
|
||||
mediaQuery.removeEventListener("change", handleChange)
|
||||
}
|
||||
}, [theme, applyTheme])
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.repeat) {
|
||||
return
|
||||
}
|
||||
|
||||
if (event.metaKey || event.ctrlKey || event.altKey) {
|
||||
return
|
||||
}
|
||||
|
||||
if (isEditableTarget(event.target)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key.toLowerCase() !== "d") {
|
||||
return
|
||||
}
|
||||
|
||||
setThemeState((currentTheme) => {
|
||||
const nextTheme =
|
||||
currentTheme === "dark"
|
||||
? "light"
|
||||
: currentTheme === "light"
|
||||
? "dark"
|
||||
: getSystemTheme() === "dark"
|
||||
? "light"
|
||||
: "dark"
|
||||
|
||||
localStorage.setItem(storageKey, nextTheme)
|
||||
return nextTheme
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown)
|
||||
}
|
||||
}, [storageKey])
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleStorageChange = (event: StorageEvent) => {
|
||||
if (event.storageArea !== localStorage) {
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key !== storageKey) {
|
||||
return
|
||||
}
|
||||
|
||||
if (isTheme(event.newValue)) {
|
||||
setThemeState(event.newValue)
|
||||
return
|
||||
}
|
||||
|
||||
setThemeState(defaultTheme)
|
||||
}
|
||||
|
||||
window.addEventListener("storage", handleStorageChange)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("storage", handleStorageChange)
|
||||
}
|
||||
}, [defaultTheme, storageKey])
|
||||
|
||||
const value = React.useMemo(
|
||||
() => ({
|
||||
theme,
|
||||
setTheme,
|
||||
}),
|
||||
[theme, setTheme]
|
||||
)
|
||||
|
||||
return (
|
||||
<ThemeProviderContext.Provider {...props} value={value}>
|
||||
{children}
|
||||
</ThemeProviderContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export const useTheme = () => {
|
||||
const context = React.useContext(ThemeProviderContext)
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error("useTheme must be used within a ThemeProvider")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
197
services/multistreaming/web/src/components/ui/alert-dialog.tsx
Normal file
197
services/multistreaming/web/src/components/ui/alert-dialog.tsx
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
import * as React from "react"
|
||||
import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
function AlertDialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
|
||||
}
|
||||
|
||||
function AlertDialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
data-slot="alert-dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogContent({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
|
||||
size?: "default" | "sm"
|
||||
}) {
|
||||
return (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
data-slot="alert-dialog-content"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-header"
|
||||
className={cn(
|
||||
"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogFooter({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-footer"
|
||||
className={cn(
|
||||
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogMedia({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-media"
|
||||
className={cn(
|
||||
"mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Title
|
||||
data-slot="alert-dialog-title"
|
||||
className={cn(
|
||||
"font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Description
|
||||
data-slot="alert-dialog-description"
|
||||
className={cn(
|
||||
"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogAction({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
|
||||
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
|
||||
return (
|
||||
<Button variant={variant} size={size} asChild>
|
||||
<AlertDialogPrimitive.Action
|
||||
data-slot="alert-dialog-action"
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogCancel({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
|
||||
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
|
||||
return (
|
||||
<Button variant={variant} size={size} asChild>
|
||||
<AlertDialogPrimitive.Cancel
|
||||
data-slot="alert-dialog-cancel"
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogMedia,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogPortal,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
}
|
||||
76
services/multistreaming/web/src/components/ui/alert.tsx
Normal file
76
services/multistreaming/web/src/components/ui/alert.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn(
|
||||
"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-action"
|
||||
className={cn("absolute top-2 right-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription, AlertAction }
|
||||
110
services/multistreaming/web/src/components/ui/avatar.tsx
Normal file
110
services/multistreaming/web/src/components/ui/avatar.tsx
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import * as React from "react"
|
||||
import { Avatar as AvatarPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Avatar({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
|
||||
size?: "default" | "sm" | "lg"
|
||||
}) {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarImage({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
data-slot="avatar-image"
|
||||
className={cn(
|
||||
"aspect-square size-full rounded-full object-cover",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarFallback({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="avatar-badge"
|
||||
className={cn(
|
||||
"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
|
||||
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
|
||||
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
|
||||
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="avatar-group"
|
||||
className={cn(
|
||||
"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarGroupCount({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="avatar-group-count"
|
||||
className={cn(
|
||||
"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Avatar,
|
||||
AvatarImage,
|
||||
AvatarFallback,
|
||||
AvatarGroup,
|
||||
AvatarGroupCount,
|
||||
AvatarBadge,
|
||||
}
|
||||
49
services/multistreaming/web/src/components/ui/badge.tsx
Normal file
49
services/multistreaming/web/src/components/ui/badge.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
||||
outline:
|
||||
"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot.Root : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
data-variant={variant}
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
122
services/multistreaming/web/src/components/ui/breadcrumb.tsx
Normal file
122
services/multistreaming/web/src/components/ui/breadcrumb.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
|
||||
|
||||
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
|
||||
return (
|
||||
<nav
|
||||
aria-label="breadcrumb"
|
||||
data-slot="breadcrumb"
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
||||
return (
|
||||
<ol
|
||||
data-slot="breadcrumb-list"
|
||||
className={cn(
|
||||
"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="breadcrumb-item"
|
||||
className={cn("inline-flex items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbLink({
|
||||
asChild,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"a"> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot.Root : "a"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="breadcrumb-link"
|
||||
className={cn("transition-colors hover:text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="breadcrumb-page"
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
className={cn("font-normal text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="breadcrumb-separator"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("[&>svg]:size-3.5", className)}
|
||||
{...props}
|
||||
>
|
||||
{children ?? (
|
||||
<ChevronRightIcon />
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbEllipsis({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="breadcrumb-ellipsis"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
"flex size-5 items-center justify-center [&>svg]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontalIcon
|
||||
/>
|
||||
<span className="sr-only">More</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Breadcrumb,
|
||||
BreadcrumbList,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
BreadcrumbEllipsis,
|
||||
}
|
||||
67
services/multistreaming/web/src/components/ui/button.tsx
Normal file
67
services/multistreaming/web/src/components/ui/button.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot.Root : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
103
services/multistreaming/web/src/components/ui/card.tsx
Normal file
103
services/multistreaming/web/src/components/ui/card.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-(--card-spacing)", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { Collapsible as CollapsiblePrimitive } from "radix-ui"
|
||||
|
||||
function Collapsible({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
||||
}
|
||||
|
||||
function CollapsibleTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleTrigger
|
||||
data-slot="collapsible-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CollapsibleContent({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleContent
|
||||
data-slot="collapsible-content"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||
168
services/multistreaming/web/src/components/ui/dialog.tsx
Normal file
168
services/multistreaming/web/src/components/ui/dialog.tsx
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Dialog as DialogPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close data-slot="dialog-close" asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-2 right-2"
|
||||
size="icon-sm"
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-none font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn(
|
||||
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
269
services/multistreaming/web/src/components/ui/dropdown-menu.tsx
Normal file
269
services/multistreaming/web/src/components/ui/dropdown-menu.tsx
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CheckIcon, ChevronRightIcon } from "lucide-react"
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
align = "start",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
align={align}
|
||||
className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-checkbox-item-indicator"
|
||||
>
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-radio-item-indicator"
|
||||
>
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
104
services/multistreaming/web/src/components/ui/empty.tsx
Normal file
104
services/multistreaming/web/src/components/ui/empty.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty"
|
||||
className={cn(
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-header"
|
||||
className={cn("flex max-w-sm flex-col items-center gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const emptyMediaVariants = cva(
|
||||
"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function EmptyMedia({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-icon"
|
||||
data-variant={variant}
|
||||
className={cn(emptyMediaVariants({ variant, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-title"
|
||||
className={cn(
|
||||
"font-heading text-sm font-medium tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-description"
|
||||
className={cn(
|
||||
"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-content"
|
||||
className={cn(
|
||||
"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Empty,
|
||||
EmptyHeader,
|
||||
EmptyTitle,
|
||||
EmptyDescription,
|
||||
EmptyContent,
|
||||
EmptyMedia,
|
||||
}
|
||||
236
services/multistreaming/web/src/components/ui/field.tsx
Normal file
236
services/multistreaming/web/src/components/ui/field.tsx
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
import { useMemo } from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
|
||||
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
|
||||
return (
|
||||
<fieldset
|
||||
data-slot="field-set"
|
||||
className={cn(
|
||||
"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldLegend({
|
||||
className,
|
||||
variant = "legend",
|
||||
...props
|
||||
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
|
||||
return (
|
||||
<legend
|
||||
data-slot="field-legend"
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-group"
|
||||
className={cn(
|
||||
"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const fieldVariants = cva(
|
||||
"group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
|
||||
{
|
||||
variants: {
|
||||
orientation: {
|
||||
vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
|
||||
horizontal:
|
||||
"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
responsive:
|
||||
"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
orientation: "vertical",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Field({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="field"
|
||||
data-orientation={orientation}
|
||||
className={cn(fieldVariants({ orientation }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-content"
|
||||
className={cn(
|
||||
"group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Label>) {
|
||||
return (
|
||||
<Label
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
|
||||
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="field-description"
|
||||
className={cn(
|
||||
"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
|
||||
"last:mt-0 nth-last-2:-mt-1",
|
||||
"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
children?: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-separator"
|
||||
data-content={!!children}
|
||||
className={cn(
|
||||
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<Separator className="absolute inset-0 top-1/2" />
|
||||
{children && (
|
||||
<span
|
||||
className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
|
||||
data-slot="field-separator-content"
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldError({
|
||||
className,
|
||||
children,
|
||||
errors,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
errors?: Array<{ message?: string } | undefined>
|
||||
}) {
|
||||
const content = useMemo(() => {
|
||||
if (children) {
|
||||
return children
|
||||
}
|
||||
|
||||
if (!errors?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const uniqueErrors = [
|
||||
...new Map(errors.map((error) => [error?.message, error])).values(),
|
||||
]
|
||||
|
||||
if (uniqueErrors?.length == 1) {
|
||||
return uniqueErrors[0]?.message
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="ml-4 flex list-disc flex-col gap-1">
|
||||
{uniqueErrors.map(
|
||||
(error, index) =>
|
||||
error?.message && <li key={index}>{error.message}</li>
|
||||
)}
|
||||
</ul>
|
||||
)
|
||||
}, [children, errors])
|
||||
|
||||
if (!content) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
data-slot="field-error"
|
||||
className={cn("text-sm font-normal text-destructive", className)}
|
||||
{...props}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldDescription,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLegend,
|
||||
FieldSeparator,
|
||||
FieldSet,
|
||||
FieldContent,
|
||||
FieldTitle,
|
||||
}
|
||||
156
services/multistreaming/web/src/components/ui/input-group.tsx
Normal file
156
services/multistreaming/web/src/components/ui/input-group.tsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
|
||||
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-group"
|
||||
role="group"
|
||||
className={cn(
|
||||
"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const inputGroupAddonVariants = cva(
|
||||
"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
align: {
|
||||
"inline-start":
|
||||
"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
|
||||
"inline-end":
|
||||
"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
|
||||
"block-start":
|
||||
"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
|
||||
"block-end":
|
||||
"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
align: "inline-start",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function InputGroupAddon({
|
||||
className,
|
||||
align = "inline-start",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="input-group-addon"
|
||||
data-align={align}
|
||||
className={cn(inputGroupAddonVariants({ align }), className)}
|
||||
onClick={(e) => {
|
||||
if ((e.target as HTMLElement).closest("button")) {
|
||||
return
|
||||
}
|
||||
e.currentTarget.parentElement?.querySelector("input")?.focus()
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const inputGroupButtonVariants = cva(
|
||||
"flex items-center gap-2 text-sm shadow-none",
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
||||
sm: "",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
|
||||
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "xs",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function InputGroupButton({
|
||||
className,
|
||||
type = "button",
|
||||
variant = "ghost",
|
||||
size = "xs",
|
||||
...props
|
||||
}: Omit<React.ComponentProps<typeof Button>, "size"> &
|
||||
VariantProps<typeof inputGroupButtonVariants>) {
|
||||
return (
|
||||
<Button
|
||||
type={type}
|
||||
data-size={size}
|
||||
variant={variant}
|
||||
className={cn(inputGroupButtonVariants({ size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="input-group-control"
|
||||
className={cn(
|
||||
"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupTextarea({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<Textarea
|
||||
data-slot="input-group-control"
|
||||
className={cn(
|
||||
"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupButton,
|
||||
InputGroupText,
|
||||
InputGroupInput,
|
||||
InputGroupTextarea,
|
||||
}
|
||||
19
services/multistreaming/web/src/components/ui/input.tsx
Normal file
19
services/multistreaming/web/src/components/ui/input.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
24
services/multistreaming/web/src/components/ui/label.tsx
Normal file
24
services/multistreaming/web/src/components/ui/label.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Label as LabelPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
190
services/multistreaming/web/src/components/ui/select.tsx
Normal file
190
services/multistreaming/web/src/components/ui/select.tsx
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
import * as React from "react"
|
||||
import { Select as SelectPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return (
|
||||
<SelectPrimitive.Group
|
||||
data-slot="select-group"
|
||||
className={cn("scroll-my-1 p-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "item-aligned",
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
data-align-trigger={position === "item-aligned"}
|
||||
className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
|
||||
position={position}
|
||||
align={align}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
data-position={position}
|
||||
className={cn(
|
||||
"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
|
||||
position === "popper" && ""
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="pointer-events-none" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
26
services/multistreaming/web/src/components/ui/separator.tsx
Normal file
26
services/multistreaming/web/src/components/ui/separator.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import * as React from "react"
|
||||
import { Separator as SeparatorPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
147
services/multistreaming/web/src/components/ui/sheet.tsx
Normal file
147
services/multistreaming/web/src/components/ui/sheet.tsx
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Dialog as SheetPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||
}
|
||||
|
||||
function SheetTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||
}
|
||||
|
||||
function SheetClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||
}
|
||||
|
||||
function SheetPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||
}
|
||||
|
||||
function SheetOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||
return (
|
||||
<SheetPrimitive.Overlay
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = "right",
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||
side?: "top" | "right" | "bottom" | "left"
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
data-slot="sheet-content"
|
||||
data-side={side}
|
||||
className={cn(
|
||||
"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<SheetPrimitive.Close data-slot="sheet-close" asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-3 right-3"
|
||||
size="icon-sm"
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</Button>
|
||||
</SheetPrimitive.Close>
|
||||
)}
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn("flex flex-col gap-0.5 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn(
|
||||
"font-heading text-base font-medium text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
700
services/multistreaming/web/src/components/ui/sidebar.tsx
Normal file
700
services/multistreaming/web/src/components/ui/sidebar.tsx
Normal file
|
|
@ -0,0 +1,700 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { useIsMobile } from "@/hooks/use-mobile"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip"
|
||||
import { PanelLeftIcon } from "lucide-react"
|
||||
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||
const SIDEBAR_WIDTH = "16rem"
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||
const SIDEBAR_WIDTH_ICON = "3rem"
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||
|
||||
type SidebarContextProps = {
|
||||
state: "expanded" | "collapsed"
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
openMobile: boolean
|
||||
setOpenMobile: (open: boolean) => void
|
||||
isMobile: boolean
|
||||
toggleSidebar: () => void
|
||||
}
|
||||
|
||||
const SidebarContext = React.createContext<SidebarContextProps | null>(null)
|
||||
|
||||
function useSidebar() {
|
||||
const context = React.useContext(SidebarContext)
|
||||
if (!context) {
|
||||
throw new Error("useSidebar must be used within a SidebarProvider.")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function SidebarProvider({
|
||||
defaultOpen = true,
|
||||
open: openProp,
|
||||
onOpenChange: setOpenProp,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
defaultOpen?: boolean
|
||||
open?: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}) {
|
||||
const isMobile = useIsMobile()
|
||||
const [openMobile, setOpenMobile] = React.useState(false)
|
||||
|
||||
// This is the internal state of the sidebar.
|
||||
// We use openProp and setOpenProp for control from outside the component.
|
||||
const [_open, _setOpen] = React.useState(defaultOpen)
|
||||
const open = openProp ?? _open
|
||||
const setOpen = React.useCallback(
|
||||
(value: boolean | ((value: boolean) => boolean)) => {
|
||||
const openState = typeof value === "function" ? value(open) : value
|
||||
if (setOpenProp) {
|
||||
setOpenProp(openState)
|
||||
} else {
|
||||
_setOpen(openState)
|
||||
}
|
||||
|
||||
// This sets the cookie to keep the sidebar state.
|
||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
|
||||
},
|
||||
[setOpenProp, open]
|
||||
)
|
||||
|
||||
// Helper to toggle the sidebar.
|
||||
const toggleSidebar = React.useCallback(() => {
|
||||
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
|
||||
}, [isMobile, setOpen, setOpenMobile])
|
||||
|
||||
// Adds a keyboard shortcut to toggle the sidebar.
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (
|
||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||
(event.metaKey || event.ctrlKey)
|
||||
) {
|
||||
event.preventDefault()
|
||||
toggleSidebar()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
return () => window.removeEventListener("keydown", handleKeyDown)
|
||||
}, [toggleSidebar])
|
||||
|
||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||
// This makes it easier to style the sidebar with Tailwind classes.
|
||||
const state = open ? "expanded" : "collapsed"
|
||||
|
||||
const contextValue = React.useMemo<SidebarContextProps>(
|
||||
() => ({
|
||||
state,
|
||||
open,
|
||||
setOpen,
|
||||
isMobile,
|
||||
openMobile,
|
||||
setOpenMobile,
|
||||
toggleSidebar,
|
||||
}),
|
||||
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
||||
)
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={contextValue}>
|
||||
<div
|
||||
data-slot="sidebar-wrapper"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH,
|
||||
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||
...style,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</SidebarContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function Sidebar({
|
||||
side = "left",
|
||||
variant = "sidebar",
|
||||
collapsible = "offcanvas",
|
||||
className,
|
||||
children,
|
||||
dir,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
side?: "left" | "right"
|
||||
variant?: "sidebar" | "floating" | "inset"
|
||||
collapsible?: "offcanvas" | "icon" | "none"
|
||||
}) {
|
||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
||||
|
||||
if (collapsible === "none") {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar"
|
||||
className={cn(
|
||||
"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||
<SheetContent
|
||||
dir={dir}
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar"
|
||||
data-mobile="true"
|
||||
className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
side={side}
|
||||
>
|
||||
<SheetHeader className="sr-only">
|
||||
<SheetTitle>Sidebar</SheetTitle>
|
||||
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="flex h-full w-full flex-col">{children}</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group peer hidden text-sidebar-foreground md:block"
|
||||
data-state={state}
|
||||
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||
data-variant={variant}
|
||||
data-side={side}
|
||||
data-slot="sidebar"
|
||||
>
|
||||
{/* This is what handles the sidebar gap on desktop */}
|
||||
<div
|
||||
data-slot="sidebar-gap"
|
||||
className={cn(
|
||||
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
||||
"group-data-[collapsible=offcanvas]:w-0",
|
||||
"group-data-[side=right]:rotate-180",
|
||||
variant === "floating" || variant === "inset"
|
||||
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
||||
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
data-slot="sidebar-container"
|
||||
data-side={side}
|
||||
className={cn(
|
||||
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
|
||||
// Adjust the padding for floating and inset variants.
|
||||
variant === "floating" || variant === "inset"
|
||||
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
||||
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar-inner"
|
||||
className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarTrigger({
|
||||
className,
|
||||
onClick,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-sidebar="trigger"
|
||||
data-slot="sidebar-trigger"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className={cn(className)}
|
||||
onClick={(event) => {
|
||||
onClick?.(event)
|
||||
toggleSidebar()
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<PanelLeftIcon />
|
||||
<span className="sr-only">Toggle Sidebar</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<button
|
||||
data-sidebar="rail"
|
||||
data-slot="sidebar-rail"
|
||||
aria-label="Toggle Sidebar"
|
||||
tabIndex={-1}
|
||||
onClick={toggleSidebar}
|
||||
title="Toggle Sidebar"
|
||||
className={cn(
|
||||
"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
|
||||
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
|
||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||
return (
|
||||
<main
|
||||
data-slot="sidebar-inset"
|
||||
className={cn(
|
||||
"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Input>) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="sidebar-input"
|
||||
data-sidebar="input"
|
||||
className={cn("h-8 w-full bg-background shadow-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-header"
|
||||
data-sidebar="header"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-footer"
|
||||
data-sidebar="footer"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Separator>) {
|
||||
return (
|
||||
<Separator
|
||||
data-slot="sidebar-separator"
|
||||
data-sidebar="separator"
|
||||
className={cn("mx-2 w-auto bg-sidebar-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-content"
|
||||
data-sidebar="content"
|
||||
className={cn(
|
||||
"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-group"
|
||||
data-sidebar="group"
|
||||
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroupLabel({
|
||||
className,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot.Root : "div"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-group-label"
|
||||
data-sidebar="group-label"
|
||||
className={cn(
|
||||
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroupAction({
|
||||
className,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot.Root : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-group-action"
|
||||
data-sidebar="group-action"
|
||||
className={cn(
|
||||
"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroupContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-group-content"
|
||||
data-sidebar="group-content"
|
||||
className={cn("w-full text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="sidebar-menu"
|
||||
data-sidebar="menu"
|
||||
className={cn("flex w-full min-w-0 flex-col gap-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="sidebar-menu-item"
|
||||
data-sidebar="menu-item"
|
||||
className={cn("group/menu-item relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const sidebarMenuButtonVariants = cva(
|
||||
"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
outline:
|
||||
"bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
|
||||
},
|
||||
size: {
|
||||
default: "h-8 text-sm",
|
||||
sm: "h-7 text-xs",
|
||||
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function SidebarMenuButton({
|
||||
asChild = false,
|
||||
isActive = false,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
tooltip,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> & {
|
||||
asChild?: boolean
|
||||
isActive?: boolean
|
||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
||||
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
||||
const Comp = asChild ? Slot.Root : "button"
|
||||
const { isMobile, state } = useSidebar()
|
||||
|
||||
const button = (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-button"
|
||||
data-sidebar="menu-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
if (!tooltip) {
|
||||
return button
|
||||
}
|
||||
|
||||
if (typeof tooltip === "string") {
|
||||
tooltip = {
|
||||
children: tooltip,
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="right"
|
||||
align="center"
|
||||
hidden={state !== "collapsed" || isMobile}
|
||||
{...tooltip}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuAction({
|
||||
className,
|
||||
asChild = false,
|
||||
showOnHover = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> & {
|
||||
asChild?: boolean
|
||||
showOnHover?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot.Root : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-action"
|
||||
data-sidebar="menu-action"
|
||||
className={cn(
|
||||
"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
showOnHover &&
|
||||
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuBadge({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-menu-badge"
|
||||
data-sidebar="menu-badge"
|
||||
className={cn(
|
||||
"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSkeleton({
|
||||
className,
|
||||
showIcon = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showIcon?: boolean
|
||||
}) {
|
||||
// Random width between 50 to 90%.
|
||||
const [width] = React.useState(() => {
|
||||
return `${Math.floor(Math.random() * 40) + 50}%`
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-menu-skeleton"
|
||||
data-sidebar="menu-skeleton"
|
||||
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||
{...props}
|
||||
>
|
||||
{showIcon && (
|
||||
<Skeleton
|
||||
className="size-4 rounded-md"
|
||||
data-sidebar="menu-skeleton-icon"
|
||||
/>
|
||||
)}
|
||||
<Skeleton
|
||||
className="h-4 max-w-(--skeleton-width) flex-1"
|
||||
data-sidebar="menu-skeleton-text"
|
||||
style={
|
||||
{
|
||||
"--skeleton-width": width,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="sidebar-menu-sub"
|
||||
data-sidebar="menu-sub"
|
||||
className={cn(
|
||||
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSubItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="sidebar-menu-sub-item"
|
||||
data-sidebar="menu-sub-item"
|
||||
className={cn("group/menu-sub-item relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSubButton({
|
||||
asChild = false,
|
||||
size = "md",
|
||||
isActive = false,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"a"> & {
|
||||
asChild?: boolean
|
||||
size?: "sm" | "md"
|
||||
isActive?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot.Root : "a"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-sub-button"
|
||||
data-sidebar="menu-sub-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupAction,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarInput,
|
||||
SidebarInset,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuBadge,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSkeleton,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
SidebarProvider,
|
||||
SidebarRail,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
useSidebar,
|
||||
}
|
||||
13
services/multistreaming/web/src/components/ui/skeleton.tsx
Normal file
13
services/multistreaming/web/src/components/ui/skeleton.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
47
services/multistreaming/web/src/components/ui/sonner.tsx
Normal file
47
services/multistreaming/web/src/components/ui/sonner.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: (
|
||||
<CircleCheckIcon className="size-4" />
|
||||
),
|
||||
info: (
|
||||
<InfoIcon className="size-4" />
|
||||
),
|
||||
warning: (
|
||||
<TriangleAlertIcon className="size-4" />
|
||||
),
|
||||
error: (
|
||||
<OctagonXIcon className="size-4" />
|
||||
),
|
||||
loading: (
|
||||
<Loader2Icon className="size-4 animate-spin" />
|
||||
),
|
||||
}}
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
"--border-radius": "var(--radius)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast: "cn-toast",
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
33
services/multistreaming/web/src/components/ui/switch.tsx
Normal file
33
services/multistreaming/web/src/components/ui/switch.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Switch as SwitchPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Switch({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SwitchPrimitive.Root
|
||||
data-slot="switch"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SwitchPrimitive.Thumb
|
||||
data-slot="switch-thumb"
|
||||
className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
|
||||
/>
|
||||
</SwitchPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Switch }
|
||||
18
services/multistreaming/web/src/components/ui/textarea.tsx
Normal file
18
services/multistreaming/web/src/components/ui/textarea.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { type VariantProps } from "class-variance-authority"
|
||||
import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { toggleVariants } from "@/components/ui/toggle"
|
||||
|
||||
const ToggleGroupContext = React.createContext<
|
||||
VariantProps<typeof toggleVariants> & {
|
||||
spacing?: number
|
||||
orientation?: "horizontal" | "vertical"
|
||||
}
|
||||
>({
|
||||
size: "default",
|
||||
variant: "default",
|
||||
spacing: 2,
|
||||
orientation: "horizontal",
|
||||
})
|
||||
|
||||
function ToggleGroup({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
spacing = 2,
|
||||
orientation = "horizontal",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants> & {
|
||||
spacing?: number
|
||||
orientation?: "horizontal" | "vertical"
|
||||
}) {
|
||||
return (
|
||||
<ToggleGroupPrimitive.Root
|
||||
data-slot="toggle-group"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
data-spacing={spacing}
|
||||
data-orientation={orientation}
|
||||
style={{ "--gap": spacing } as React.CSSProperties}
|
||||
className={cn(
|
||||
"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ToggleGroupContext.Provider
|
||||
value={{ variant, size, spacing, orientation }}
|
||||
>
|
||||
{children}
|
||||
</ToggleGroupContext.Provider>
|
||||
</ToggleGroupPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ToggleGroupItem({
|
||||
className,
|
||||
children,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
const context = React.useContext(ToggleGroupContext)
|
||||
|
||||
return (
|
||||
<ToggleGroupPrimitive.Item
|
||||
data-slot="toggle-group-item"
|
||||
data-variant={context.variant || variant}
|
||||
data-size={context.size || size}
|
||||
data-spacing={context.spacing}
|
||||
className={cn(
|
||||
"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
|
||||
toggleVariants({
|
||||
variant: context.variant || variant,
|
||||
size: context.size || size,
|
||||
}),
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</ToggleGroupPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
export { ToggleGroup, ToggleGroupItem }
|
||||
45
services/multistreaming/web/src/components/ui/toggle.tsx
Normal file
45
services/multistreaming/web/src/components/ui/toggle.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Toggle as TogglePrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const toggleVariants = cva(
|
||||
"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline: "border border-input bg-transparent hover:bg-muted",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Toggle({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TogglePrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
return (
|
||||
<TogglePrimitive.Root
|
||||
data-slot="toggle"
|
||||
className={cn(toggleVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toggle, toggleVariants }
|
||||
57
services/multistreaming/web/src/components/ui/tooltip.tsx
Normal file
57
services/multistreaming/web/src/components/ui/tooltip.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot="tooltip-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
|
||||
19
services/multistreaming/web/src/hooks/use-mobile.ts
Normal file
19
services/multistreaming/web/src/hooks/use-mobile.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import * as React from "react"
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
mql.addEventListener("change", onChange)
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
return () => mql.removeEventListener("change", onChange)
|
||||
}, [])
|
||||
|
||||
return !!isMobile
|
||||
}
|
||||
130
services/multistreaming/web/src/index.css
Normal file
130
services/multistreaming/web/src/index.css
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@import "@fontsource-variable/geist";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--font-heading: var(--font-sans);
|
||||
--font-sans: 'Geist Variable', sans-serif;
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-background: var(--background);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
138
services/multistreaming/web/src/lib/api.ts
Normal file
138
services/multistreaming/web/src/lib/api.ts
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
import type {
|
||||
Account,
|
||||
AudioRouting,
|
||||
Feed,
|
||||
Me,
|
||||
Member,
|
||||
Output,
|
||||
Provider,
|
||||
Room,
|
||||
RoomImage,
|
||||
Scene,
|
||||
SceneLayout,
|
||||
SceneOutput,
|
||||
State,
|
||||
Vault,
|
||||
} from "@/lib/types"
|
||||
|
||||
const JSON_HEADERS = { "Content-Type": "application/json" }
|
||||
|
||||
class ApiError extends Error {
|
||||
status: number
|
||||
constructor(status: number, message: string) {
|
||||
super(message)
|
||||
this.status = status
|
||||
}
|
||||
}
|
||||
|
||||
async function request<T>(
|
||||
path: string,
|
||||
opts: { method?: string; body?: unknown } = {},
|
||||
): Promise<T> {
|
||||
const res = await fetch(path, {
|
||||
method: opts.method,
|
||||
headers: opts.body !== undefined ? JSON_HEADERS : undefined,
|
||||
body: opts.body !== undefined ? JSON.stringify(opts.body) : undefined,
|
||||
})
|
||||
const data = await res.json().catch(() => ({}))
|
||||
if (!res.ok) throw new ApiError(res.status, (data as { error?: string }).error ?? res.statusText)
|
||||
return data as T
|
||||
}
|
||||
|
||||
export const api = {
|
||||
// auth
|
||||
authConfig: () => request<{ mode: string; oidc: boolean }>("/api/auth/config"),
|
||||
me: () => request<Me>("/api/me"),
|
||||
login: (username: string, password: string) =>
|
||||
request<{ id: string; username: string }>("/api/auth/login", {
|
||||
method: "POST",
|
||||
body: { username, password },
|
||||
}),
|
||||
register: (username: string, password: string) =>
|
||||
request<{ id: string; username: string }>("/api/auth/register", {
|
||||
method: "POST",
|
||||
body: { username, password },
|
||||
}),
|
||||
logout: () => request<{ ok: boolean }>("/api/auth/logout", { method: "POST" }),
|
||||
|
||||
// vaults
|
||||
listVaults: () => request<Vault[]>("/api/vaults"),
|
||||
createVault: (body: { name: string; salt: string; serverWrapped: { iv: string; data: string } }) =>
|
||||
request<Vault>("/api/vaults", { method: "POST", body }),
|
||||
setDefaultVault: (id: string) =>
|
||||
request<{ defaultVaultId: string }>(`/api/vaults/${id}/default`, { method: "POST" }),
|
||||
deleteVault: (id: string) => request<{ ok: boolean }>(`/api/vaults/${id}`, { method: "DELETE" }),
|
||||
|
||||
// accounts
|
||||
createAccount: (body: {
|
||||
vaultId: string
|
||||
provider: string
|
||||
name: string
|
||||
url: string
|
||||
secretCiphertext: { iv: string; data: string }
|
||||
}) => request<Account>("/api/accounts", { method: "POST", body }),
|
||||
updateAccount: (id: string, body: Partial<Account>) =>
|
||||
request<Account>(`/api/accounts/${id}`, { method: "PUT", body }),
|
||||
deleteAccount: (id: string) => request<{ ok: boolean }>(`/api/accounts/${id}`, { method: "DELETE" }),
|
||||
|
||||
// rooms
|
||||
createRoom: (name: string) => request<Room>("/api/rooms", { method: "POST", body: { name } }),
|
||||
roomDetail: (id: string) => request<Room & { members: Member[] }>(`/api/rooms/${id}`),
|
||||
invite: (roomId: string, role: string) =>
|
||||
request<{ id: string; token: string }>(`/api/rooms/${roomId}/invites`, {
|
||||
method: "POST",
|
||||
body: { role },
|
||||
}),
|
||||
acceptInvite: (token: string) =>
|
||||
request<{ roomId: string; role: string }>(`/api/invites/${token}/accept`, { method: "POST" }),
|
||||
|
||||
// feeds & outputs
|
||||
createFeed: (roomId: string, name: string) =>
|
||||
request<Feed>(`/api/rooms/${roomId}/feeds`, { method: "POST", body: { name } }),
|
||||
deleteFeed: (id: string) => request<{ ok: boolean }>(`/api/feeds/${id}`, { method: "DELETE" }),
|
||||
createOutput: (roomId: string, feedId: string, accountId: string) =>
|
||||
request<Output>(`/api/rooms/${roomId}/outputs`, {
|
||||
method: "POST",
|
||||
body: { feedId, accountId, enabled: true },
|
||||
}),
|
||||
updateOutput: (id: string, enabled: boolean) =>
|
||||
request<Output>(`/api/outputs/${id}`, { method: "PUT", body: { enabled } }),
|
||||
deleteOutput: (id: string) => request<{ ok: boolean }>(`/api/outputs/${id}`, { method: "DELETE" }),
|
||||
|
||||
// scenes & composition
|
||||
createScene: (roomId: string, body: { name: string; layout: SceneLayout }) =>
|
||||
request<Scene>(`/api/rooms/${roomId}/scenes`, { method: "POST", body }),
|
||||
updateScene: (
|
||||
id: string,
|
||||
body: Partial<Pick<Scene, "name" | "layout" | "overlays" | "active">>,
|
||||
) => request<Scene>(`/api/scenes/${id}`, { method: "PUT", body }),
|
||||
deleteScene: (id: string) => request<{ ok: boolean }>(`/api/scenes/${id}`, { method: "DELETE" }),
|
||||
activateScene: (id: string) =>
|
||||
request<Scene>(`/api/scenes/${id}/activate`, { method: "POST" }),
|
||||
|
||||
createSceneOutput: (
|
||||
roomId: string,
|
||||
body: { sceneId: string; accountId: string; audio: AudioRouting; enabled?: boolean },
|
||||
) => request<SceneOutput>(`/api/rooms/${roomId}/scene-outputs`, { method: "POST", body }),
|
||||
updateSceneOutput: (
|
||||
id: string,
|
||||
body: Partial<Pick<SceneOutput, "accountId" | "enabled" | "audio">>,
|
||||
) => request<SceneOutput>(`/api/scene-outputs/${id}`, { method: "PUT", body }),
|
||||
deleteSceneOutput: (id: string) =>
|
||||
request<{ ok: boolean }>(`/api/scene-outputs/${id}`, { method: "DELETE" }),
|
||||
|
||||
uploadImage: (roomId: string, body: { name: string; data: string }) =>
|
||||
request<RoomImage>(`/api/rooms/${roomId}/images`, { method: "POST", body }),
|
||||
deleteImage: (id: string) => request<{ ok: boolean }>(`/api/images/${id}`, { method: "DELETE" }),
|
||||
|
||||
// streaming grants
|
||||
startStream: (accountKeys: Record<string, string>) =>
|
||||
request<{ granted: string[] }>("/api/streams/start", { method: "POST", body: { accountKeys } }),
|
||||
stopStream: () => request<{ ok: boolean }>("/api/streams/stop", { method: "POST" }),
|
||||
|
||||
// providers + state
|
||||
providers: () => request<Provider[]>("/api/providers"),
|
||||
state: () => request<State>("/api/state"),
|
||||
}
|
||||
|
||||
export { ApiError }
|
||||
156
services/multistreaming/web/src/lib/types.ts
Normal file
156
services/multistreaming/web/src/lib/types.ts
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
export type Role = "owner" | "editor" | "streamer"
|
||||
|
||||
export interface Me {
|
||||
id: string
|
||||
username: string
|
||||
sid: string
|
||||
defaultVaultId: string | null
|
||||
}
|
||||
|
||||
export interface Vault {
|
||||
id: string
|
||||
name: string
|
||||
isDefault: boolean
|
||||
salt?: string
|
||||
serverWrapped?: { iv: string; data: string }
|
||||
createdAt?: number
|
||||
}
|
||||
|
||||
export interface Account {
|
||||
id: string
|
||||
ownerId: string
|
||||
vaultId: string | null
|
||||
provider: string
|
||||
name: string
|
||||
url: string
|
||||
secretCiphertext: { iv: string; data: string } | null
|
||||
enabled: boolean
|
||||
}
|
||||
|
||||
export interface Feed {
|
||||
id: string
|
||||
roomId: string
|
||||
ownerId: string
|
||||
name: string
|
||||
streamKey: string
|
||||
}
|
||||
|
||||
export interface OutputRuntime {
|
||||
running: boolean
|
||||
restarts: number
|
||||
log: string[]
|
||||
}
|
||||
|
||||
export interface Output {
|
||||
id: string
|
||||
roomId: string
|
||||
feedId: string
|
||||
accountId: string
|
||||
enabled: boolean
|
||||
runtime?: OutputRuntime
|
||||
}
|
||||
|
||||
export type LayoutType = "grid" | "pip"
|
||||
|
||||
export interface SceneLayout {
|
||||
type: LayoutType
|
||||
columns?: number // grid only, 2..4
|
||||
slots: Array<string | null> // index = slot number; grid 1..6, pip length 2
|
||||
}
|
||||
|
||||
export type OverlayItem =
|
||||
| {
|
||||
id: string
|
||||
kind: "text"
|
||||
text: string
|
||||
x: number
|
||||
y: number
|
||||
fontSize: number
|
||||
color: string
|
||||
bold?: boolean
|
||||
}
|
||||
| {
|
||||
id: string
|
||||
kind: "image"
|
||||
imageId: string
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
opacity?: number
|
||||
}
|
||||
|
||||
export type AudioRouting =
|
||||
| { mode: "program" }
|
||||
| { mode: "silent" }
|
||||
| { mode: "feed"; feedId: string }
|
||||
|
||||
export interface Scene {
|
||||
id: string
|
||||
roomId: string
|
||||
ownerId: string
|
||||
name: string
|
||||
active: boolean
|
||||
layout: SceneLayout
|
||||
overlays: OverlayItem[]
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
}
|
||||
|
||||
export interface SceneOutput {
|
||||
id: string
|
||||
roomId: string
|
||||
sceneId: string
|
||||
accountId: string
|
||||
enabled: boolean
|
||||
audio: AudioRouting
|
||||
account?: Account // masked by server
|
||||
runtime?: OutputRuntime
|
||||
}
|
||||
|
||||
export interface RoomImage {
|
||||
id: string
|
||||
name: string
|
||||
mime: string
|
||||
size: number
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface Room {
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
ownerId: string
|
||||
role: Role
|
||||
feeds: Feed[]
|
||||
outputs: Output[]
|
||||
accounts: Account[]
|
||||
activeSceneId: string | null
|
||||
scenes: Scene[]
|
||||
sceneOutputs: SceneOutput[]
|
||||
images: RoomImage[]
|
||||
}
|
||||
|
||||
export interface Member {
|
||||
id: string
|
||||
roomId: string
|
||||
userId: string
|
||||
role: Role
|
||||
username: string
|
||||
}
|
||||
|
||||
export interface Provider {
|
||||
id: string
|
||||
name: string
|
||||
fields: { name: string; label: string; secret?: boolean; required?: boolean }[]
|
||||
defaultUrl: string
|
||||
}
|
||||
|
||||
export interface State {
|
||||
me: Me
|
||||
vaults: Vault[]
|
||||
rooms: Room[]
|
||||
myAccounts: Account[]
|
||||
liveFeeds: string[]
|
||||
ingest: { app: string; rtmpPort: number; publicHost: string }
|
||||
}
|
||||
128
services/multistreaming/web/src/lib/use-app.ts
Normal file
128
services/multistreaming/web/src/lib/use-app.ts
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
import { api } from "@/lib/api"
|
||||
import type { Me, State, Vault } from "@/lib/types"
|
||||
import {
|
||||
rearmDeviceWrapped,
|
||||
saveDeviceWrapped,
|
||||
unlockSilent,
|
||||
unlockWithPassphrase,
|
||||
vaultState,
|
||||
} from "@/lib/vault"
|
||||
|
||||
export type Screen = "home" | "room"
|
||||
|
||||
interface AppData {
|
||||
me: Me | null
|
||||
state: State | null
|
||||
authMode: "oidc" | "local" | null
|
||||
screen: Screen
|
||||
roomId: string | null
|
||||
activeVaultId: string | null
|
||||
unlocked: boolean
|
||||
}
|
||||
|
||||
export function useApp() {
|
||||
const [data, setData] = useState<AppData>({
|
||||
me: null,
|
||||
state: null,
|
||||
authMode: null,
|
||||
screen: "home",
|
||||
roomId: null,
|
||||
activeVaultId: null,
|
||||
unlocked: false,
|
||||
})
|
||||
const timer = useRef<number | null>(null)
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
const state = await api.state()
|
||||
setData((d) => ({
|
||||
...d,
|
||||
state,
|
||||
me: { ...state.me, sid: d.me?.sid ?? "" },
|
||||
unlocked: vaultState.isUnlocked(),
|
||||
activeVaultId: vaultState.activeVault()?.id ?? null,
|
||||
}))
|
||||
} catch (e) {
|
||||
const err = e as { status?: number }
|
||||
if (err.status === 401) {
|
||||
setData((d) => ({ ...d, me: null, state: null }))
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const bootstrap = useCallback(async () => {
|
||||
const cfg = await api.authConfig().catch(() => ({ mode: "local", oidc: false }))
|
||||
try {
|
||||
const me = await api.me()
|
||||
setData((d) => ({ ...d, me, authMode: cfg.mode as "oidc" | "local" }))
|
||||
await refresh()
|
||||
} catch {
|
||||
setData((d) => ({ ...d, authMode: cfg.mode as "oidc" | "local" }))
|
||||
}
|
||||
}, [refresh])
|
||||
|
||||
useEffect(() => {
|
||||
void bootstrap()
|
||||
}, [bootstrap])
|
||||
|
||||
useEffect(() => {
|
||||
if (!data.me) return
|
||||
timer.current = window.setInterval(() => void refresh(), 3000)
|
||||
return () => {
|
||||
if (timer.current) window.clearInterval(timer.current)
|
||||
}
|
||||
}, [data.me, refresh])
|
||||
|
||||
const logout = useCallback(async () => {
|
||||
await api.logout().catch(() => {})
|
||||
vaultState.lockVault()
|
||||
setData((d) => ({ ...d, me: null, state: null, unlocked: false }))
|
||||
}, [])
|
||||
|
||||
const openRoom = useCallback((roomId: string | null) => {
|
||||
setData((d) => ({ ...d, screen: roomId ? "room" : "home", roomId }))
|
||||
}, [])
|
||||
|
||||
/** Unlock a vault (silent first, then passphrase). Returns false on cancel/failure. */
|
||||
const unlockVault = useCallback(
|
||||
async (vault: Vault, passphrase?: string): Promise<boolean> => {
|
||||
try {
|
||||
if (!passphrase && data.me) {
|
||||
const vk = await unlockSilent(vault.id, data.me.sid)
|
||||
vaultState.setActive(vault.id, vk)
|
||||
setData((d) => ({ ...d, unlocked: true, activeVaultId: vault.id }))
|
||||
return true
|
||||
}
|
||||
if (!passphrase) return false
|
||||
const vk = await unlockWithPassphrase(vault, passphrase)
|
||||
vaultState.setActive(vault.id, vk)
|
||||
if (data.me) {
|
||||
const deviceWrapped = await rearmDeviceWrapped(data.me.sid)
|
||||
await saveDeviceWrapped(vault.id, deviceWrapped)
|
||||
}
|
||||
setData((d) => ({ ...d, unlocked: true, activeVaultId: vault.id }))
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
},
|
||||
[data.me],
|
||||
)
|
||||
|
||||
const lockActive = useCallback(() => {
|
||||
vaultState.lockVault()
|
||||
setData((d) => ({ ...d, unlocked: false, activeVaultId: null }))
|
||||
}, [])
|
||||
|
||||
return {
|
||||
data,
|
||||
refresh,
|
||||
logout,
|
||||
openRoom,
|
||||
unlockVault,
|
||||
lockActive,
|
||||
}
|
||||
}
|
||||
|
||||
export type App = ReturnType<typeof useApp>
|
||||
6
services/multistreaming/web/src/lib/utils.ts
Normal file
6
services/multistreaming/web/src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
259
services/multistreaming/web/src/lib/vault.ts
Normal file
259
services/multistreaming/web/src/lib/vault.ts
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
/**
|
||||
* Client-side zero-knowledge vault manager (multi-vault).
|
||||
*
|
||||
* A "vault" is a named, passphrase-protected key store. A user can have many
|
||||
* vaults; only ONE is unlocked at a time (its vault key VK lives in memory,
|
||||
* never persisted). Account secrets are encrypted under the active vault's VK.
|
||||
*
|
||||
* Each vault has two wrapped copies of its VK:
|
||||
* - serverWrapped = AES-GCM(KEK, VK) — stored on the server for recovery
|
||||
* - deviceWrapped = AES-GCM(devKey, VK) — stored in IndexedDB under a
|
||||
* NON-EXTRACTABLE WebCrypto device key, with AAD = fingerprint + session.
|
||||
*/
|
||||
|
||||
const PBKDF2_ITERATIONS = 600_000
|
||||
|
||||
type Bytes = Uint8Array<ArrayBuffer>
|
||||
|
||||
export interface Wrapped {
|
||||
iv: string
|
||||
data: string
|
||||
}
|
||||
|
||||
interface ActiveVault {
|
||||
id: string
|
||||
vk: Bytes
|
||||
}
|
||||
|
||||
const b64 = (buf: ArrayBuffer | Uint8Array) => {
|
||||
const bytes = buf instanceof Uint8Array ? buf : new Uint8Array(buf)
|
||||
let s = ""
|
||||
for (const b of bytes) s += String.fromCharCode(b)
|
||||
return btoa(s)
|
||||
}
|
||||
|
||||
const unb64 = (s: string): Bytes => Uint8Array.from(atob(s), (c) => c.charCodeAt(0))
|
||||
|
||||
const te = new TextEncoder()
|
||||
const td = new TextDecoder()
|
||||
|
||||
async function pbkdf2(password: string, saltB64: string, iterations: number, bytes: number): Promise<Bytes> {
|
||||
const salt = unb64(saltB64)
|
||||
const key = await crypto.subtle.importKey("raw", te.encode(password), "PBKDF2", false, [
|
||||
"deriveBits",
|
||||
])
|
||||
return new Uint8Array(
|
||||
await crypto.subtle.deriveBits({ name: "PBKDF2", hash: "SHA-256", salt, iterations }, key, bytes * 8),
|
||||
)
|
||||
}
|
||||
|
||||
async function importRaw(bytes: Bytes) {
|
||||
return crypto.subtle.importKey("raw", bytes, { name: "AES-GCM" }, false, ["encrypt", "decrypt"])
|
||||
}
|
||||
|
||||
async function aesGcmEncrypt(key: CryptoKey, plaintext: Bytes, aad: Bytes): Promise<Wrapped> {
|
||||
const iv = crypto.getRandomValues(new Uint8Array(12))
|
||||
const data = new Uint8Array(
|
||||
await crypto.subtle.encrypt({ name: "AES-GCM", iv, additionalData: aad }, key, plaintext),
|
||||
)
|
||||
return { iv: b64(iv), data: b64(data) }
|
||||
}
|
||||
|
||||
async function aesGcmDecrypt(key: CryptoKey, ivB64: string, dataB64: string, aad: Bytes): Promise<Bytes> {
|
||||
return new Uint8Array(
|
||||
await crypto.subtle.decrypt(
|
||||
{ name: "AES-GCM", iv: unb64(ivB64), additionalData: aad },
|
||||
key,
|
||||
unb64(dataB64),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
// ---- device key (IndexedDB, non-extractable) ------------------------------
|
||||
|
||||
function openDb(): Promise<IDBDatabase> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const req = indexedDB.open("multistreaming-vault", 1)
|
||||
req.onupgradeneeded = () => {
|
||||
if (!req.result.objectStoreNames.contains("keys")) req.result.createObjectStore("keys")
|
||||
if (!req.result.objectStoreNames.contains("vaults")) req.result.createObjectStore("vaults")
|
||||
}
|
||||
req.onsuccess = () => resolve(req.result)
|
||||
req.onerror = () => reject(req.error)
|
||||
})
|
||||
}
|
||||
|
||||
async function idbGet<T>(storeName: string, key: string): Promise<T | null> {
|
||||
const db = await openDb()
|
||||
return new Promise((resolve, reject) => {
|
||||
const tx = db.transaction(storeName, "readonly")
|
||||
const req = tx.objectStore(storeName).get(key)
|
||||
req.onsuccess = () => resolve((req.result as T) ?? null)
|
||||
req.onerror = () => reject(req.error)
|
||||
})
|
||||
}
|
||||
|
||||
async function idbPut(storeName: string, key: string, value: unknown): Promise<void> {
|
||||
const db = await openDb()
|
||||
return new Promise((resolve, reject) => {
|
||||
const tx = db.transaction(storeName, "readwrite")
|
||||
tx.objectStore(storeName).put(value, key)
|
||||
tx.oncomplete = () => resolve()
|
||||
tx.onerror = () => reject(tx.error)
|
||||
})
|
||||
}
|
||||
|
||||
async function idbDelete(storeName: string, key: string): Promise<void> {
|
||||
const db = await openDb()
|
||||
return new Promise((resolve, reject) => {
|
||||
const tx = db.transaction(storeName, "readwrite")
|
||||
tx.objectStore(storeName).delete(key)
|
||||
tx.oncomplete = () => resolve()
|
||||
tx.onerror = () => reject(tx.error)
|
||||
})
|
||||
}
|
||||
|
||||
async function ensureDeviceKey(): Promise<CryptoKey> {
|
||||
const existing = await idbGet<CryptoKey>("keys", "deviceKey")
|
||||
if (existing) return existing
|
||||
const key = await crypto.subtle.generateKey({ name: "AES-GCM", length: 256 }, false, [
|
||||
"encrypt",
|
||||
"decrypt",
|
||||
])
|
||||
await idbPut("keys", "deviceKey", key)
|
||||
return key
|
||||
}
|
||||
|
||||
function fingerprint(): string {
|
||||
const parts = [
|
||||
navigator.userAgent,
|
||||
navigator.language,
|
||||
screen.width,
|
||||
screen.height,
|
||||
screen.colorDepth,
|
||||
navigator.hardwareConcurrency ?? "",
|
||||
]
|
||||
let hash = 0
|
||||
const s = parts.join("|")
|
||||
for (let i = 0; i < s.length; i++) hash = (hash * 31 + s.charCodeAt(i)) >>> 0
|
||||
return hash.toString(36)
|
||||
}
|
||||
|
||||
// ---- active vault (in-memory only) ---------------------------------------
|
||||
|
||||
let active: ActiveVault | null = null
|
||||
|
||||
function activeVault() {
|
||||
return active
|
||||
}
|
||||
|
||||
function isUnlocked() {
|
||||
return active !== null
|
||||
}
|
||||
|
||||
function lockVault() {
|
||||
active = null
|
||||
}
|
||||
|
||||
function setActive(id: string, vk: Bytes) {
|
||||
active = { id, vk }
|
||||
}
|
||||
|
||||
// ---- vault operations ------------------------------------------------------
|
||||
|
||||
export interface CreatedVault {
|
||||
name: string
|
||||
salt: string
|
||||
serverWrapped: Wrapped
|
||||
deviceWrapped: Wrapped
|
||||
vk: Bytes
|
||||
}
|
||||
|
||||
export async function createVault(
|
||||
name: string,
|
||||
passphrase: string,
|
||||
sessionId: string,
|
||||
): Promise<CreatedVault> {
|
||||
const salt = crypto.getRandomValues(new Uint8Array(16))
|
||||
const kek = await pbkdf2(passphrase, b64(salt), PBKDF2_ITERATIONS, 32)
|
||||
const vk = crypto.getRandomValues(new Uint8Array(32))
|
||||
|
||||
const serverWrapped = await aesGcmEncrypt(
|
||||
await importRaw(kek),
|
||||
vk,
|
||||
te.encode("multistreaming:vault:v1"),
|
||||
)
|
||||
const deviceKey = await ensureDeviceKey()
|
||||
const deviceWrapped = await aesGcmEncrypt(
|
||||
deviceKey,
|
||||
vk,
|
||||
te.encode(`fp:${fingerprint()}|sess:${sessionId}`),
|
||||
)
|
||||
|
||||
return { name, salt: b64(salt), serverWrapped, deviceWrapped, vk }
|
||||
}
|
||||
|
||||
export async function unlockWithPassphrase(
|
||||
vault: { salt?: string; serverWrapped?: Wrapped },
|
||||
passphrase: string,
|
||||
): Promise<Bytes> {
|
||||
if (!vault.salt || !vault.serverWrapped) throw new Error("vault has no recovery data")
|
||||
const kek = await pbkdf2(passphrase, vault.salt, PBKDF2_ITERATIONS, 32)
|
||||
return aesGcmDecrypt(
|
||||
await importRaw(kek),
|
||||
vault.serverWrapped.iv,
|
||||
vault.serverWrapped.data,
|
||||
te.encode("multistreaming:vault:v1"),
|
||||
)
|
||||
}
|
||||
|
||||
export async function unlockSilent(vaultId: string, sessionId: string): Promise<Bytes> {
|
||||
const deviceKey = await ensureDeviceKey()
|
||||
const deviceWrapped = await idbGet<Wrapped>("vaults", vaultId)
|
||||
if (!deviceWrapped) throw new Error("no device vault")
|
||||
return aesGcmDecrypt(
|
||||
deviceKey,
|
||||
deviceWrapped.iv,
|
||||
deviceWrapped.data,
|
||||
te.encode(`fp:${fingerprint()}|sess:${sessionId}`),
|
||||
)
|
||||
}
|
||||
|
||||
export async function saveDeviceWrapped(vaultId: string, deviceWrapped: Wrapped): Promise<void> {
|
||||
await idbPut("vaults", vaultId, deviceWrapped)
|
||||
}
|
||||
|
||||
export async function removeDeviceWrapped(vaultId: string): Promise<void> {
|
||||
await idbDelete("vaults", vaultId)
|
||||
}
|
||||
|
||||
/** Re-arm the device blob for the active vault (after passphrase unlock). */
|
||||
export async function rearmDeviceWrapped(sessionId: string): Promise<Wrapped> {
|
||||
if (!active) throw new Error("no vault unlocked")
|
||||
const deviceKey = await ensureDeviceKey()
|
||||
return aesGcmEncrypt(
|
||||
deviceKey,
|
||||
active.vk,
|
||||
te.encode(`fp:${fingerprint()}|sess:${sessionId}`),
|
||||
)
|
||||
}
|
||||
|
||||
// ---- account secrets under the active vault ------------------------------
|
||||
|
||||
export async function encryptSecret(secret: string, aad: string): Promise<Wrapped> {
|
||||
if (!active) throw new Error("no vault unlocked")
|
||||
return aesGcmEncrypt(await importRaw(active.vk), te.encode(secret), te.encode(aad))
|
||||
}
|
||||
|
||||
export async function decryptSecret(wrapped: Wrapped, aad: string): Promise<string> {
|
||||
if (!active) throw new Error("no vault unlocked")
|
||||
return td.decode(await aesGcmDecrypt(await importRaw(active.vk), wrapped.iv, wrapped.data, te.encode(aad)))
|
||||
}
|
||||
|
||||
export const vaultState = {
|
||||
activeVault,
|
||||
isUnlocked,
|
||||
lockVault,
|
||||
setActive,
|
||||
fingerprint,
|
||||
}
|
||||
19
services/multistreaming/web/src/main.tsx
Normal file
19
services/multistreaming/web/src/main.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { StrictMode } from "react"
|
||||
import { createRoot } from "react-dom/client"
|
||||
|
||||
import "./index.css"
|
||||
import App from "./App.tsx"
|
||||
import { ThemeProvider } from "@/components/theme-provider.tsx"
|
||||
import { Toaster } from "@/components/ui/sonner"
|
||||
import { TooltipProvider } from "@/components/ui/tooltip"
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<ThemeProvider>
|
||||
<TooltipProvider>
|
||||
<App />
|
||||
<Toaster />
|
||||
</TooltipProvider>
|
||||
</ThemeProvider>
|
||||
</StrictMode>,
|
||||
)
|
||||
29
services/multistreaming/web/tsconfig.app.json
Normal file
29
services/multistreaming/web/tsconfig.app.json
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023", "DOM"],
|
||||
"module": "esnext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
12
services/multistreaming/web/tsconfig.json
Normal file
12
services/multistreaming/web/tsconfig.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
],
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
24
services/multistreaming/web/tsconfig.node.json
Normal file
24
services/multistreaming/web/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "esnext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
14
services/multistreaming/web/vite.config.ts
Normal file
14
services/multistreaming/web/vite.config.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import path from "path"
|
||||
import tailwindcss from "@tailwindcss/vite"
|
||||
import react from "@vitejs/plugin-react"
|
||||
import { defineConfig } from "vite"
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(import.meta.dirname, "./src"),
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue