claudes variant of ui
This commit is contained in:
JohannesItten
+155
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, markRaw, watch } from 'vue'
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
import type { Node, Edge, Connection } from '@vue-flow/core'
|
||||
import '@vue-flow/core/dist/style.css'
|
||||
import '@vue-flow/core/dist/theme-default.css'
|
||||
|
||||
import Toolbar from './components/Toolbar.vue'
|
||||
import NodePalette from './components/NodePalette.vue'
|
||||
import StudioNode from './components/nodes/StudioNode.vue'
|
||||
import { useStudioStore } from './stores/studio'
|
||||
import { buildGraph } from './graphBuilder'
|
||||
import { defaultParams } from './nodeTypes'
|
||||
import type { StudioNodeData } from './types'
|
||||
|
||||
const studio = useStudioStore()
|
||||
const nodeTypes = { studio: markRaw(StudioNode) }
|
||||
|
||||
const nodes = ref<Node[]>([])
|
||||
const edges = ref<Edge[]>([])
|
||||
|
||||
let nodeCounter = 0
|
||||
|
||||
// Sync server-push state into Vue Flow node data
|
||||
watch(
|
||||
() => studio.serverStatus,
|
||||
(status) => {
|
||||
for (const node of nodes.value) {
|
||||
const d = node.data as StudioNodeData
|
||||
const serverState = (status[node.id] as StudioNodeData['serverState']) ?? undefined
|
||||
if (d.serverState !== serverState) {
|
||||
node.data = { ...d, serverState }
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
function addNode(nodeType: string) {
|
||||
nodeCounter++
|
||||
const id = `${nodeType}-${nodeCounter}`
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const newNode: Node = {
|
||||
id,
|
||||
type: 'studio',
|
||||
position: { x: 160 + (nodeCounter % 6) * 220, y: 80 + Math.floor(nodeCounter / 6) * 200 },
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
data: { nodeType, params: defaultParams(nodeType), serverState: undefined } as any,
|
||||
}
|
||||
// @ts-ignore TS2589: Vue Flow Node<T> generic is too deep for vue-tsc's instantiation limit
|
||||
nodes.value = [...nodes.value, newNode]
|
||||
}
|
||||
|
||||
function onConnect(connection: Connection) {
|
||||
const srcHandle = connection.sourceHandle ?? ''
|
||||
const tgtHandle = connection.targetHandle ?? ''
|
||||
if (srcHandle.startsWith('video') !== tgtHandle.startsWith('video')) return
|
||||
edges.value = [
|
||||
...edges.value,
|
||||
{ ...connection, id: `e-${Date.now()}`, animated: true } as Edge,
|
||||
]
|
||||
}
|
||||
|
||||
function run() {
|
||||
const graph = buildGraph(nodes.value, edges.value)
|
||||
studio.send({ type: 'load_graph', graph })
|
||||
}
|
||||
|
||||
function stop() {
|
||||
studio.send({ type: 'load_graph', graph: { nodes: [], edges: [] } })
|
||||
}
|
||||
|
||||
function clear() {
|
||||
nodes.value = []
|
||||
edges.value = []
|
||||
nodeCounter = 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-shell">
|
||||
<Toolbar @run="run" @stop="stop" @clear="clear" />
|
||||
<div class="canvas-area">
|
||||
<NodePalette @add-node="addNode" />
|
||||
<VueFlow
|
||||
v-model:nodes="nodes"
|
||||
v-model:edges="edges"
|
||||
:node-types="nodeTypes"
|
||||
class="flow-canvas"
|
||||
:min-zoom="0.3"
|
||||
:max-zoom="2"
|
||||
fit-view-on-init
|
||||
@connect="onConnect"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
html, body, #app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #11111b;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
color: #cdd6f4;
|
||||
}
|
||||
|
||||
.vue-flow {
|
||||
background: #11111b !important;
|
||||
}
|
||||
|
||||
.vue-flow__background {
|
||||
background: #11111b !important;
|
||||
}
|
||||
|
||||
.vue-flow__edge-path {
|
||||
stroke: #89b4fa !important;
|
||||
stroke-width: 2 !important;
|
||||
}
|
||||
|
||||
.vue-flow__edge.animated .vue-flow__edge-path {
|
||||
stroke-dasharray: 5;
|
||||
animation: dashdraw 0.5s linear infinite;
|
||||
}
|
||||
|
||||
.vue-flow__handle {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
@keyframes dashdraw {
|
||||
to { stroke-dashoffset: -10; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.app-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.canvas-area {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flow-canvas {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -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="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import viteLogo from '../assets/vite.svg'
|
||||
import heroImg from '../assets/hero.png'
|
||||
import vueLogo from '../assets/vue.svg'
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="center">
|
||||
<div class="hero">
|
||||
<img :src="heroImg" class="base" width="170" height="179" alt="" />
|
||||
<img :src="vueLogo" class="framework" alt="Vue logo" />
|
||||
<img :src="viteLogo" class="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
|
||||
</div>
|
||||
<button type="button" class="counter" @click="count++">
|
||||
Count is {{ count }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img class="logo" :src="viteLogo" alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img class="button-icon" :src="vueLogo" alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</template>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import { NODE_TYPES } from '../nodeTypes'
|
||||
|
||||
const emit = defineEmits<{
|
||||
addNode: [nodeType: string]
|
||||
}>()
|
||||
|
||||
const groups = [
|
||||
{ label: 'Sources', types: ['testpattern', 'ndiin', 'decklinkin'] },
|
||||
{ label: 'Sinks', types: ['ndiout', 'decklinkout', 'fakesink'] },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="palette">
|
||||
<div class="palette-title">Nodes</div>
|
||||
<div v-for="group in groups" :key="group.label" class="palette-group">
|
||||
<div class="group-label">{{ group.label }}</div>
|
||||
<button
|
||||
v-for="type in group.types"
|
||||
:key="type"
|
||||
class="palette-btn"
|
||||
@click="emit('addNode', type)"
|
||||
>
|
||||
+ {{ NODE_TYPES[type]?.label ?? type }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.palette {
|
||||
width: 140px;
|
||||
background: #181825;
|
||||
border-right: 1px solid #313244;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.palette-title {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #6c7086;
|
||||
letter-spacing: 0.8px;
|
||||
padding: 12px 12px 6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.palette-group {
|
||||
padding: 4px 0 8px;
|
||||
}
|
||||
|
||||
.group-label {
|
||||
font-size: 10px;
|
||||
color: #45475a;
|
||||
padding: 4px 12px 2px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.palette-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
color: #bac2de;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.palette-btn:hover {
|
||||
background: #2a2b3d;
|
||||
color: #cdd6f4;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useStudioStore } from '../stores/studio'
|
||||
|
||||
const emit = defineEmits<{
|
||||
run: []
|
||||
stop: []
|
||||
clear: []
|
||||
}>()
|
||||
|
||||
const studio = useStudioStore()
|
||||
|
||||
const statusLabel = computed(() =>
|
||||
studio.connected ? 'Connected' : 'Disconnected'
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toolbar">
|
||||
<span class="app-title">DMF Studio</span>
|
||||
|
||||
<div class="toolbar-center">
|
||||
<button class="btn btn-run" @click="emit('run')">▶ Run</button>
|
||||
<button class="btn btn-stop" @click="emit('stop')">■ Stop</button>
|
||||
<button class="btn btn-clear" @click="emit('clear')">Clear</button>
|
||||
</div>
|
||||
|
||||
<div class="status">
|
||||
<span :class="['status-dot', studio.connected ? 'dot-ok' : 'dot-err']" />
|
||||
<span class="status-text">{{ statusLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
height: 44px;
|
||||
background: #181825;
|
||||
border-bottom: 1px solid #313244;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #89b4fa;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.toolbar-center {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 5px 14px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.btn:hover { opacity: 0.85; }
|
||||
|
||||
.btn-run { background: #a6e3a1; color: #1e2030; }
|
||||
.btn-stop { background: #f38ba8; color: #1e2030; }
|
||||
.btn-clear { background: #313244; color: #9399b2; }
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #9399b2;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dot-ok { background: #a6e3a1; box-shadow: 0 0 4px #a6e3a1; }
|
||||
.dot-err { background: #f38ba8; }
|
||||
</style>
|
||||
@@ -0,0 +1,194 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import type { NodeProps } from '@vue-flow/core'
|
||||
import type { StudioNodeData } from '../../types'
|
||||
import { NODE_TYPES } from '../../nodeTypes'
|
||||
|
||||
const props = defineProps<NodeProps<StudioNodeData>>()
|
||||
|
||||
const typeDef = computed(() => NODE_TYPES[props.data.nodeType] ?? null)
|
||||
|
||||
const inputs = computed(() => typeDef.value?.ports.filter(p => p.direction === 'in') ?? [])
|
||||
const outputs = computed(() => typeDef.value?.ports.filter(p => p.direction === 'out') ?? [])
|
||||
|
||||
const stateBadge = computed(() => {
|
||||
switch (props.data.serverState) {
|
||||
case 'running': return { text: 'RUN', cls: 'badge-running' }
|
||||
case 'stopped': return { text: 'STOP', cls: 'badge-stopped' }
|
||||
case 'crashed': return { text: 'ERR', cls: 'badge-crashed' }
|
||||
default: return null
|
||||
}
|
||||
})
|
||||
|
||||
// Update a param value; Vue Flow tracks node data reactively
|
||||
function setParam(key: string, value: string | number) {
|
||||
props.data.params[key] = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="studio-node" :class="{ 'node-running': data.serverState === 'running', 'node-crashed': data.serverState === 'crashed' }">
|
||||
<!-- Input handles (left) -->
|
||||
<Handle
|
||||
v-for="port in inputs"
|
||||
:key="port.id"
|
||||
:id="port.id"
|
||||
type="target"
|
||||
:position="Position.Left"
|
||||
:class="`handle-${port.kind}`"
|
||||
/>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="node-header">
|
||||
<span class="node-label">{{ typeDef?.label ?? data.nodeType }}</span>
|
||||
<span v-if="stateBadge" :class="['badge', stateBadge.cls]">{{ stateBadge.text }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Params -->
|
||||
<div v-if="typeDef && typeDef.params.length" class="node-body">
|
||||
<div v-for="param in typeDef.params" :key="param.key" class="param-row">
|
||||
<label class="param-label">{{ param.label }}</label>
|
||||
<select
|
||||
v-if="param.type === 'select'"
|
||||
class="param-input"
|
||||
:value="data.params[param.key] ?? param.default"
|
||||
@change="setParam(param.key, ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option v-for="opt in param.options" :key="String(opt.value)" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
<input
|
||||
v-else-if="param.type === 'number'"
|
||||
type="number"
|
||||
class="param-input"
|
||||
:value="data.params[param.key] ?? param.default"
|
||||
:min="param.min"
|
||||
:max="param.max"
|
||||
@change="setParam(param.key, Number(($event.target as HTMLInputElement).value))"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Node id -->
|
||||
<div class="node-id">{{ id }}</div>
|
||||
|
||||
<!-- Output handles (right) -->
|
||||
<Handle
|
||||
v-for="port in outputs"
|
||||
:key="port.id"
|
||||
:id="port.id"
|
||||
type="source"
|
||||
:position="Position.Right"
|
||||
:class="`handle-${port.kind}`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.studio-node {
|
||||
background: #1e2030;
|
||||
border: 1px solid #383a4e;
|
||||
border-radius: 8px;
|
||||
min-width: 180px;
|
||||
font-size: 12px;
|
||||
color: #cdd6f4;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.studio-node.node-running {
|
||||
border-color: #a6e3a1;
|
||||
box-shadow: 0 0 0 1px #a6e3a1, 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.studio-node.node-crashed {
|
||||
border-color: #f38ba8;
|
||||
box-shadow: 0 0 0 1px #f38ba8, 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.node-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px 6px;
|
||||
border-bottom: 1px solid #383a4e;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #89b4fa;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.badge-running { background: #a6e3a1; color: #1e2030; }
|
||||
.badge-stopped { background: #6c7086; color: #cdd6f4; }
|
||||
.badge-crashed { background: #f38ba8; color: #1e2030; }
|
||||
|
||||
.node-body {
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.param-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #9399b2;
|
||||
min-width: 70px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.param-input {
|
||||
flex: 1;
|
||||
background: #11111b;
|
||||
border: 1px solid #383a4e;
|
||||
border-radius: 4px;
|
||||
color: #cdd6f4;
|
||||
font-size: 11px;
|
||||
padding: 3px 6px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.param-input:focus {
|
||||
border-color: #89b4fa;
|
||||
}
|
||||
|
||||
.node-id {
|
||||
padding: 4px 10px;
|
||||
font-size: 10px;
|
||||
color: #45475a;
|
||||
border-top: 1px solid #2a2b3d;
|
||||
}
|
||||
|
||||
/* Handle styles */
|
||||
:deep(.handle-video) {
|
||||
background: #89b4fa !important;
|
||||
border-color: #89b4fa !important;
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
|
||||
:deep(.handle-audio) {
|
||||
background: #fab387 !important;
|
||||
border-color: #fab387 !important;
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
import type { Node, Edge } from '@vue-flow/core'
|
||||
import type { StudioNodeData, GraphJson } from './types'
|
||||
import { NODE_TYPES } from './nodeTypes'
|
||||
|
||||
const FPS_MAP: Record<string, [number, number]> = {
|
||||
'23.98': [24000, 1001],
|
||||
'24': [24, 1],
|
||||
'25': [25, 1],
|
||||
'29.97': [30000, 1001],
|
||||
'30': [30, 1],
|
||||
'50': [50, 1],
|
||||
'59.94': [60000, 1001],
|
||||
'60': [60, 1],
|
||||
}
|
||||
|
||||
function parseFps(fps: string): { fps_num: number; fps_den: number } {
|
||||
const [num, den] = FPS_MAP[fps] ?? [25, 1]
|
||||
return { fps_num: num, fps_den: den }
|
||||
}
|
||||
|
||||
function parseRes(res: string): { width: number; height: number } {
|
||||
const [w, h] = (res || '1920x1080').split('x').map(Number)
|
||||
return { width: w || 1920, height: h || 1080 }
|
||||
}
|
||||
|
||||
// Converts a Vue Flow handle id to the NODE_CONFIG port key used in graph JSON
|
||||
function handleToPort(handle: string): string {
|
||||
return handle.replace(/-(?:in|out)$/, '_flow_id')
|
||||
// 'video-out' → 'video_flow_id', 'audio-in' → 'audio_flow_id'
|
||||
}
|
||||
|
||||
export function buildGraph(vfNodes: Node[], vfEdges: Edge[]): GraphJson {
|
||||
const nodeMap = new Map(vfNodes.map(n => [n.id, n.data as StudioNodeData]))
|
||||
|
||||
const nodes = vfNodes.map(n => {
|
||||
const d = n.data as StudioNodeData
|
||||
const typeDef = NODE_TYPES[d.nodeType]
|
||||
// Only include non-format params in the graph JSON node params
|
||||
const params: Record<string, unknown> = {}
|
||||
if (typeDef) {
|
||||
for (const p of typeDef.params) {
|
||||
if (!p.isFormat && d.params[p.key] != null) {
|
||||
params[p.key] = d.params[p.key]
|
||||
}
|
||||
}
|
||||
}
|
||||
return { id: n.id, type: d.nodeType, params }
|
||||
})
|
||||
|
||||
const edges = vfEdges.map((e) => {
|
||||
const srcData = nodeMap.get(e.source)
|
||||
const srcHandle = e.sourceHandle ?? 'video-out'
|
||||
const tgtHandle = e.targetHandle ?? 'video-in'
|
||||
const kind = srcHandle.startsWith('video') ? 'video' : 'audio'
|
||||
|
||||
let format: Record<string, unknown> = { kind }
|
||||
if (kind === 'video') {
|
||||
const { width, height } = parseRes(String(srcData?.params.res ?? '1920x1080'))
|
||||
const { fps_num, fps_den } = parseFps(String(srcData?.params.fps ?? '25'))
|
||||
format = { kind, width, height, fps_num, fps_den }
|
||||
} else {
|
||||
format = { kind, sample_rate: 48000, channels: 2, bit_depth: 32 }
|
||||
}
|
||||
|
||||
return {
|
||||
from: e.source, from_port: handleToPort(srcHandle),
|
||||
to: e.target, to_port: handleToPort(tgtHandle),
|
||||
format,
|
||||
}
|
||||
})
|
||||
|
||||
return { nodes, edges }
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).use(createPinia()).mount('#app')
|
||||
@@ -0,0 +1,102 @@
|
||||
import type { NodeTypeDef, ParamDef } from './types'
|
||||
|
||||
export const RESOLUTION_OPTIONS = [
|
||||
{ label: '1920×1080', value: '1920x1080' },
|
||||
{ label: '1280×720', value: '1280x720' },
|
||||
{ label: '3840×2160', value: '3840x2160' },
|
||||
]
|
||||
|
||||
export const FPS_OPTIONS = [
|
||||
{ label: '23.98', value: '23.98' },
|
||||
{ label: '24', value: '24' },
|
||||
{ label: '25', value: '25' },
|
||||
{ label: '29.97', value: '29.97' },
|
||||
{ label: '30', value: '30' },
|
||||
{ label: '50', value: '50' },
|
||||
{ label: '59.94', value: '59.94' },
|
||||
{ label: '60', value: '60' },
|
||||
]
|
||||
|
||||
export const DEVICE_OPTIONS = [
|
||||
{ label: 'Port 1', value: 0 },
|
||||
{ label: 'Port 2', value: 1 },
|
||||
{ label: 'Port 3', value: 2 },
|
||||
{ label: 'Port 4', value: 3 },
|
||||
]
|
||||
|
||||
// Format params shown on source nodes; values go into edge format (not node params)
|
||||
const FORMAT_PARAMS: ParamDef[] = [
|
||||
{ key: 'res', label: 'Resolution', type: 'select', options: RESOLUTION_OPTIONS, default: '1920x1080', isFormat: true },
|
||||
{ key: 'fps', label: 'FPS', type: 'select', options: FPS_OPTIONS, default: '25', isFormat: true },
|
||||
]
|
||||
|
||||
export const NODE_TYPES: Record<string, NodeTypeDef> = {
|
||||
testpattern: {
|
||||
type: 'testpattern',
|
||||
label: 'Test Pattern',
|
||||
ports: [
|
||||
{ id: 'video-out', kind: 'video', direction: 'out' },
|
||||
{ id: 'audio-out', kind: 'audio', direction: 'out' },
|
||||
],
|
||||
params: [...FORMAT_PARAMS],
|
||||
},
|
||||
ndiin: {
|
||||
type: 'ndiin',
|
||||
label: 'NDI In',
|
||||
ports: [
|
||||
{ id: 'video-out', kind: 'video', direction: 'out' },
|
||||
{ id: 'audio-out', kind: 'audio', direction: 'out' },
|
||||
],
|
||||
params: [
|
||||
{ key: 'source_num', label: 'NDI Source #', type: 'number', default: 0, min: 0, max: 15 },
|
||||
...FORMAT_PARAMS,
|
||||
],
|
||||
},
|
||||
decklinkin: {
|
||||
type: 'decklinkin',
|
||||
label: 'DeckLink In',
|
||||
ports: [
|
||||
{ id: 'video-out', kind: 'video', direction: 'out' },
|
||||
{ id: 'audio-out', kind: 'audio', direction: 'out' },
|
||||
],
|
||||
params: [
|
||||
{ key: 'device_index', label: 'Port', type: 'select', options: DEVICE_OPTIONS, default: 0 },
|
||||
...FORMAT_PARAMS,
|
||||
],
|
||||
},
|
||||
ndiout: {
|
||||
type: 'ndiout',
|
||||
label: 'NDI Out',
|
||||
ports: [
|
||||
{ id: 'video-in', kind: 'video', direction: 'in' },
|
||||
{ id: 'audio-in', kind: 'audio', direction: 'in' },
|
||||
],
|
||||
params: [],
|
||||
},
|
||||
decklinkout: {
|
||||
type: 'decklinkout',
|
||||
label: 'DeckLink Out',
|
||||
ports: [
|
||||
{ id: 'video-in', kind: 'video', direction: 'in' },
|
||||
{ id: 'audio-in', kind: 'audio', direction: 'in' },
|
||||
],
|
||||
params: [
|
||||
{ key: 'device_index', label: 'Port', type: 'select', options: DEVICE_OPTIONS, default: 0 },
|
||||
],
|
||||
},
|
||||
fakesink: {
|
||||
type: 'fakesink',
|
||||
label: 'Fake Sink',
|
||||
ports: [
|
||||
{ id: 'video-in', kind: 'video', direction: 'in' },
|
||||
],
|
||||
params: [],
|
||||
},
|
||||
}
|
||||
|
||||
// Default params for a new node of the given type
|
||||
export function defaultParams(nodeType: string): Record<string, string | number> {
|
||||
const def = NODE_TYPES[nodeType]
|
||||
if (!def) return {}
|
||||
return Object.fromEntries(def.params.map(p => [p.key, p.default]))
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import type { ServerNode } from '../types'
|
||||
|
||||
const WS_URL = 'ws://localhost:7070/ws'
|
||||
const RECONNECT_MS = 2000
|
||||
|
||||
export const useStudioStore = defineStore('studio', () => {
|
||||
const connected = ref(false)
|
||||
const serverNodes = ref<ServerNode[]>([])
|
||||
const serverStatus = computed(() =>
|
||||
Object.fromEntries(serverNodes.value.map(n => [n.id, n.state]))
|
||||
)
|
||||
|
||||
let ws: WebSocket | null = null
|
||||
let reconnectTimer: ReturnType<typeof setTimeout> | null = null
|
||||
const messageHandlers: ((msg: unknown) => void)[] = []
|
||||
|
||||
function onMessage(handler: (msg: unknown) => void) {
|
||||
messageHandlers.push(handler)
|
||||
return () => {
|
||||
const i = messageHandlers.indexOf(handler)
|
||||
if (i >= 0) messageHandlers.splice(i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function connect() {
|
||||
if (ws) return
|
||||
ws = new WebSocket(WS_URL)
|
||||
|
||||
ws.onopen = () => {
|
||||
connected.value = true
|
||||
}
|
||||
|
||||
ws.onclose = () => {
|
||||
connected.value = false
|
||||
ws = null
|
||||
reconnectTimer = setTimeout(connect, RECONNECT_MS)
|
||||
}
|
||||
|
||||
ws.onerror = () => {
|
||||
ws?.close()
|
||||
}
|
||||
|
||||
ws.onmessage = (e: MessageEvent) => {
|
||||
let msg: unknown
|
||||
try { msg = JSON.parse(e.data) } catch { return }
|
||||
|
||||
const m = msg as Record<string, unknown>
|
||||
if (m.type === 'status' && Array.isArray(m.nodes)) {
|
||||
serverNodes.value = m.nodes as ServerNode[]
|
||||
}
|
||||
for (const h of messageHandlers) h(msg)
|
||||
}
|
||||
}
|
||||
|
||||
function send(payload: unknown) {
|
||||
if (ws?.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify(payload))
|
||||
}
|
||||
}
|
||||
|
||||
function disconnect() {
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer)
|
||||
ws?.close()
|
||||
ws = null
|
||||
}
|
||||
|
||||
connect()
|
||||
|
||||
return { connected, serverNodes, serverStatus, onMessage, send, disconnect }
|
||||
})
|
||||
+296
@@ -0,0 +1,296 @@
|
||||
:root {
|
||||
--text: #6b6375;
|
||||
--text-h: #08060d;
|
||||
--bg: #fff;
|
||||
--border: #e5e4e7;
|
||||
--code-bg: #f4f3ec;
|
||||
--accent: #aa3bff;
|
||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||
--accent-border: rgba(170, 59, 255, 0.5);
|
||||
--social-bg: rgba(244, 243, 236, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
|
||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--mono: ui-monospace, Consolas, monospace;
|
||||
|
||||
font: 18px/145% var(--sans);
|
||||
letter-spacing: 0.18px;
|
||||
color-scheme: light dark;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #9ca3af;
|
||||
--text-h: #f3f4f6;
|
||||
--bg: #16171d;
|
||||
--border: #2e303a;
|
||||
--code-bg: #1f2028;
|
||||
--accent: #c084fc;
|
||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||
--accent-border: rgba(192, 132, 252, 0.5);
|
||||
--social-bg: rgba(47, 48, 58, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||
}
|
||||
|
||||
#social .button-icon {
|
||||
filter: invert(1) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--heading);
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 32px 0;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 36px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 118%;
|
||||
letter-spacing: -0.24px;
|
||||
margin: 0 0 8px;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
.counter {
|
||||
font-family: var(--mono);
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 15px;
|
||||
line-height: 135%;
|
||||
padding: 4px 8px;
|
||||
background: var(--code-bg);
|
||||
}
|
||||
|
||||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 1126px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-inline: 1px solid var(--border);
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
export type PortKind = 'video' | 'audio'
|
||||
|
||||
export interface PortDef {
|
||||
id: string // 'video-out', 'audio-in', etc.
|
||||
kind: PortKind
|
||||
direction: 'in' | 'out'
|
||||
}
|
||||
|
||||
export interface ParamDef {
|
||||
key: string
|
||||
label: string
|
||||
type: 'select' | 'number'
|
||||
options?: { label: string; value: string | number }[]
|
||||
default: string | number
|
||||
min?: number
|
||||
max?: number
|
||||
isFormat?: boolean // true → goes into edge format (not node params)
|
||||
}
|
||||
|
||||
export interface NodeTypeDef {
|
||||
type: string
|
||||
label: string
|
||||
ports: PortDef[]
|
||||
params: ParamDef[]
|
||||
}
|
||||
|
||||
// All config as a flat record; format keys (res, fps) handled separately in graphBuilder
|
||||
export interface StudioNodeData {
|
||||
nodeType: string
|
||||
params: Record<string, string | number>
|
||||
serverState?: 'running' | 'stopped' | 'crashed'
|
||||
}
|
||||
|
||||
export interface ServerNode {
|
||||
id: string
|
||||
type: string
|
||||
pid: number
|
||||
state: 'running' | 'stopped' | 'crashed'
|
||||
}
|
||||
|
||||
export interface GraphJson {
|
||||
nodes: { id: string; type: string; params: Record<string, unknown> }[]
|
||||
edges: {
|
||||
from: string; from_port: string
|
||||
to: string; to_port: string
|
||||
format: Record<string, unknown>
|
||||
}[]
|
||||
}
|
||||
Reference in New Issue
Block a user