synops/docs/proposals/skjermen.md

# Proposal: Skjermen — live-produksjon i arbeidsflaten

## Konsept

"Skjermen" er et panel i arbeidsflaten som fungerer som et
produksjonsbord. Du drar inn videostrømmer, bilder, tekst og
andre noder — og arrangerer dem fritt. Det som er i skjermen
er det som tas opp eller strømmes.

Skjermen er ikke en video-editor. Den er en **live kompositor**
som bruker drag-and-drop med eksisterende noder.

## Delt arbeidsflate som møterom/studio

Et møterom eller studio er en delt arbeidsflate med riktige traits.
Alle deltakere ser sin egen arbeidsflate, men skjermen(e) er
synkronisert — alle ser samme komposisjon.

```
Delt arbeidsflate (podcaststudio):

  Synkronisert:                Personlig:
  ┌──────────────────────┐    ┌─────────┐
  │ SKJERM (program)     │    │ Notater │ ← kun deg
  │ Trond │ Arne         │    └─────────┘
  │ Vegard│ Logo         │    ┌─────────┐
  │              ●REC    │    │ Chat    │ ← alle ser
  └──────────────────────┘    └─────────┘
  ┌──────────────────────┐    ┌─────────┐
  │ SKJERM (preview)     │    │ Mixer   │ ← delt
  │ Arne (stor)          │    └─────────┘
  │ Trond│Vegard (små)   │
  └──────────────────────┘
```

## Videoramme

Hvert deltaker har et panel — "videoramme" — som fanger kamera
og mikrofon. Produserer en LiveKit-track som er en strøm-node.

- Styres av eieren (velg kamera, mikrofon, on/off)
- Kan dras inn i skjermer av vert/produsent
- Samme strøm kan refereres fra flere skjermer
- Kan også fange skjermdeling

## Skjerm-panelet

### Grunnfunksjoner

- **Drop-target:** aksepterer videostrømmer, bilder, tekst, noder
- **Fritt arrangement:** hvert element har posisjon, størrelse, z-order
- **Resizerbart:** elementene inne i skjermen resizes fritt
- **Aspect ratio:** låses til 16:9 (default), 4:3, 1:1 eller fritt
- **Bakgrunn:** farge, gradient eller bilde
- **Snap-to-grid:** valgfritt, for presis plassering

### Frameless modus

Noder som dras inn i skjermen rendres **som standard uten
grensesnittelementer** — ingen BlockShell-header, ingen resize-handles,
ingen border, ingen skygge. Bare innholdet. Skjermen er output.

Frameless er default, men **valgfritt per element**. Vert kan slå
på ramme, navneskilt, skygge eller andre visuelle effekter per
element i skjermen. Nyttig for f.eks. et bilde med border, eller
en videostrøm med semi-transparent navnebanner over.

Resize og flytting av elementer *inne i skjermen* gjøres av
skjermens egen editor-modus (kun tilgjengelig for vert), ikke
av BlockShell. Elementene er rene rektangler med innhold.

Dette betyr at noder trenger en `frameless`-renderingsmodus:
- **Videoramme:** bare `<video>` — ingen kontroller, ingen header
- **Bildenode:** bare `<img>` — ingen border, ingen metadata
- **Tekstnode:** bare teksten — med font/farge/størrelse
- **Chat-overlay:** bare meldingsstrøm — transparent bakgrunn

BlockShell brukes fortsatt for paneler *utenfor* skjermen
(i arbeidsflaten). Det er bare inne i skjerm-panelet at
innhold rendres frameless.

### Ting som kan dras inn

| Kilde | Resultat i skjermen |
|-------|---------------------|
| Videoramme (deltaker) | Ren video-strøm (frameless) |
| Bildenode (CAS) | Rent bilde (frameless) |
| Tekstnode | Ren tekst med styling (frameless) |
| Chat-panel | Meldingsstrøm med transparent bg |
| Lydvisualisering | Waveform/VU uten ramme |
| Presentasjon | Slides (frameless) |
| Skjermdeling | Deltakerens skjerm (frameless) |
| Annen node | Minimal rendering, tilpasset innhold |

### Fade og overganger

**Master opacity slider:**
- 0% (helt svart) til 100% (fullt synlig)
- Live, sanntids — brukes som manuell fade

**Sceneskifte-knapp (dedikert, godt synlig):**

Én knapp. To trykk. Ferdig.

```
Trykk 1: "Sceneskifte"
  → Rask fade til svart (0.2s default, konfigurerbar)
  → Opptak pauses automatisk ved full blackout
  → Knappen endrer tekst/farge: "Fortsett" (pulserer)
  → Bygg om scenen i ro og mak

Trykk 2: "Fortsett"
  → Opptak resumer
  → Rask fade inn fra svart (0.2s)
  → Knappen tilbake til "Sceneskifte"
```

I opptaksfilen: ...scene A [0.2s fade] scene B...
Ser ut som en profesjonell overgang. Pausen er usynlig.

Fade-varigheten er kort som default (0.2s) — dette er et
praktisk verktøy for å bytte scene raskt, ikke en kunstnerisk
overgang. Kan justeres i innstillinger om ønskelig.

**Master opacity slider (separat):**
- For manuell kontroll / kreativ bruk
- 0-100%, live
- Uavhengig av sceneskifte-knappen

**Overgangstyper (for multi-skjerm switching):**
- Fade til svart (default)
- Fade til hvitt
- Fade til egendefinert farge
- Crossfade (mellom to skjermer — se multi-skjerm)
- Cut (øyeblikkelig, ingen fade)

### Opptak

- **REC-knapp** (rød prikk, synlig i skjerm-headeren)
- **Pause/resume** (usynlig i output, sømløst)
- **Tidskode-display** (total innspilt tid)
- **Markører:** klikk for å sette en markør ("dette var bra",
  "klipp her") som lagres som tidsstempel-metadata
- **Output:** server-side compositing via FFmpeg, eller
  canvas-capture API for klientsiden

### Forhåndsdefinerte layouts

Hurtigknapper for vanlige oppsett:
- **Fullskjerm:** én kilde fyller alt
- **2-split:** to kilder side om side
- **3-split:** tre kilder (1 stor + 2 små, eller 3 like)
- **PiP:** én stor + én liten i hjørnet
- **Grid:** 2x2 eller 3x3
- Alltid mulig å justere manuelt etterpå

## Multi-skjerm: Program / Preview

### Konsept

To (eller flere) skjermer som fungerer som TV-studio:

- **Program:** det som tas opp/strømmes akkurat nå
- **Preview:** neste scene du forbereder

Samme videostrøm kan ligge i begge, med ulik layout.
"Take" bytter dem.

### Bytte mellom skjermer

**Cut (øyeblikkelig):**
- Preview → Program, Program → Preview
- Bytte skjer på én frame

**Take (med overgang):**
- Crossfade mellom Program og Preview
- Konfigurerbar varighet
- Program og Preview bytter roller etter overgangen

**Manuelt:**
- Velg hvilken skjerm som er "live" via knapp/dropdown
- De andre er tilgjengelige for redigering

### Brukseksempel: podcast med kameraveksling

```
Skjerm A (program): Alle tre i grid
Skjerm B (preview): Arne stor, Trond+Vegard små

Arne snakker → produsent trykker "Take" →
  Crossfade til Skjerm B (Arne stor) →
  Skjerm A er nå preview, redigeres for neste bytte

Trond tar over → produsent bygger Skjerm A om:
  Trond stor, Arne+Vegard små →
  Trykker "Take" → crossfade til Skjerm A
```

Alt live, under innspilling, uten klipping etterpå.

### Ubegrenset antall skjermer

Ikke begrenset til to. Du kan ha:
- Skjerm A: alle i grid (oversikt)
- Skjerm B: Arne stor (nærportrett)
- Skjerm C: Trond stor
- Skjerm D: Vegard stor
- Skjerm E: presentasjon fullskjerm
- Skjerm F: chat-overlay over video

Bytt mellom dem etter behov. Hver har sin egen layout
men deler de samme kilde-strømmene.

## Teknisk modell

### Skjerm som node

```
node_kind: 'screen'
metadata: {
  aspect_ratio: '16:9',
  background: { type: 'color', value: '#000000' },
  elements: [
    { node_id: '<tronds-video>', x: 0, y: 0, w: 50, h: 50, z: 1 },
    { node_id: '<arnes-video>', x: 50, y: 0, w: 50, h: 50, z: 1 },
    { node_id: '<logo>', x: 80, y: 80, w: 15, h: 15, z: 10 },
  ],
  is_program: true,  // denne skjermen tas opp
}
```

Posisjon/størrelse i prosent (0-100) for oppløsningsuavhengighet.

### Skjerm i arbeidsflaten

Skjermen er et BlockShell-panel som:
- Viser intern canvas med elementene
- Synkroniseres via PG NOTIFY (alle ser samme layout)
- Kun `owner`/`admin` kan endre innhold (dra inn/ut, resize)
- Deltakere ser resultatet i sanntid

### Opptak

**Klientside (enklest):**
- Canvas-capture API → MediaRecorder → upload til CAS
- Begrensning: kvalitet avhenger av klientens maskin

**Serverside (bedre):**
- Maskinrommet mottar layout-metadata + LiveKit-strømmene
- FFmpeg compositor renderer til fil i sanntid
- Uavhengig av klientens ytelse
- Kan produsere flere oppløsninger

**Hybrid:**
- Klientside for preview/monitoring
- Serverside for endelig opptak

### Overgangsmotor

```rust
struct Transition {
    from_screen: NodeId,
    to_screen: NodeId,
    kind: TransitionKind,  // Fade, Cut, Crossfade, DipToColor
    duration_ms: u32,
    color: Option<Color>,  // for DipToColor
}
```

Ved sceneskifte med pause:
```
1. Start DipToColor(svart) overgang
2. Ved midtpunkt (100% svart): emit PauseRecording
3. Vent på ResumeRecording signal
4. Fullfør DipToColor (svart → transparent)
```

## Hva dette bygger på (eksisterende)

- BlockShell: panel-wrapper med resize, drag, drop
- Canvas: spatial layout med pan/zoom
- LiveKit: WebRTC for video/lyd-strømmer
- Drag-and-drop: universell overføring mellom paneler
- CAS: lagring av opptak og bilder
- PG NOTIFY + WebSocket: synkronisering av skjerm-layout
- Node/edge-modell: alt er noder med relasjoner

## Hva som er nytt

- Skjerm-panel (canvas-i-canvas) med elementliste
- Videoramme-panel (kamera/mikrofon-fangst)
- Fade/overgang-motor
- Multi-skjerm switching (program/preview)
- Server-side compositing (FFmpeg)
- Opptak med pause/resume og markører

## Ytelsesanalyse (mars 2026)

### Serverspesifikasjoner

- 8 kjerner AMD EPYC @ 2.4 GHz (ingen hyperthreading)
- 16 GB RAM (~10 GB tilgjengelig)
- 204 GB ledig disk
- ~270 Mbit/s båndbredde (Hetzner)
- Ingen GPU

### Video-strømmer (LiveKit SFU)

LiveKit er en SFU (Selective Forwarding Unit) — den videresender
strømmer uten transkoding. Minimal CPU, primært båndbredde.

- 3 deltakere: 9 strømmer (3 inn + 6 ut), ~15-25 Mbit/s
- 10 deltakere: 100 strømmer, ~150-250 Mbit/s uten simulcast
- 10 deltakere med simulcast: ~80-120 Mbit/s (realistisk)
- LiveKit RAM: ~50-100 MB per sesjon med 3 deltakere

### Server-side compositing (FFmpeg)

FFmpeg compositor: flere video-strømmer → én output.
- 3 strømmer @ 720p → 1080p: ~2-3 CPU-kjerner kontinuerlig
- RAM: ~500 MB - 1 GB per FFmpeg-instans

### Kapasitetstabell

| Scenario | Gjennomførbart? | Flaskehals |
|----------|----------------|------------|
| 3 deltakere, klientside opptak | ✅ Enkelt | Ingen |
| 3 deltakere, server compositing | ✅ Ja | 2-3 CPU-kjerner |
| 10 deltakere, klientside | ✅ Ja (med simulcast) | Båndbredde |
| 10 deltakere, server compositing | ⚠️ Grenseland | CPU + båndbredde |
| 3 samtidige team, klientside | ✅ Ja | LiveKit RAM |
| 3 samtidige team, server comp. | ❌ Nei | CPU (trenger 6-9 kjerner) |
| 3 team klient + 1 team server | ✅ Ja | Balansert |

### Strategi

**Klientside compositing som default.** Skjerm-panelet bruker
Canvas API til å komponere video-strømmene i nettleseren.
Opptak via MediaRecorder API. Serveren bare videresender strømmer.

Fordeler:
- Serveren belastes minimalt — skalerer til mange samtidige team
- Null ekstra CPU for compositing
- Lavere latens (ingen round-trip til server)

Ulemper:
- Opptak-kvalitet avhenger av klientens maskin
- Klienten må ha nok CPU (moderne laptop/desktop er nok)

**Server-side compositing som valgfri premium:**
- For opptak i høyere kvalitet enn klienten klarer
- For eksport/re-rendering i etterkant
- Begrenset til én sesjon om gangen på nåværende server
- Købasert: "bestill rendering" → jobbkø → ferdig → varsling

**Oppgradering ved behov:**
- 16-kjerner, 32 GB hos Hetzner: ~€30/mnd ekstra
- Gir kapasitet for 2-3 samtidige server-side compositinger
- Eller: dedikert render-server (billig Hetzner-boks kun for FFmpeg)

## Prioritet

Høy ambisjon, kan bygges inkrementelt:
1. Videoramme-panel (LiveKit-kamera i BlockShell)
2. Enkel skjerm (drop-target med elementer, statisk layout)
3. Opptak (klientside canvas-capture)
4. Fade/overgang
5. Multi-skjerm switching
6. Server-side compositing
7. Sceneskifte med auto-pause