embedded meetus
This commit is contained in:
@@ -12,7 +12,7 @@
|
||||
* GET /api/original?path=<rel> stream the original file (native viewer / packaging)
|
||||
*/
|
||||
import type { Plugin } from 'vite'
|
||||
import type { ServerResponse } from 'node:http'
|
||||
import type { IncomingMessage, ServerResponse } from 'node:http'
|
||||
import fs from 'node:fs'
|
||||
import fsp from 'node:fs/promises'
|
||||
import path from 'node:path'
|
||||
@@ -80,7 +80,7 @@ export function doocusApi(opts: Options): Plugin {
|
||||
server.middlewares.use('/api', (req, res, next) => {
|
||||
const url = new URL(req.url ?? '/', 'http://localhost')
|
||||
const parts = url.pathname.split('/').filter(Boolean)
|
||||
handle(res, parts, url.searchParams, req.headers.range).catch((err) => {
|
||||
handle(req, res, parts, url.searchParams).catch((err) => {
|
||||
server.config.logger.error(`[doocus-api] ${String(err)}`)
|
||||
sendJson(res, 500, { error: String(err) })
|
||||
}).then((handled) => { if (!handled) next() })
|
||||
@@ -88,7 +88,8 @@ export function doocusApi(opts: Options): Plugin {
|
||||
},
|
||||
}
|
||||
|
||||
async function handle(res: ServerResponse, parts: string[], q: URLSearchParams, range?: string): Promise<boolean> {
|
||||
async function handle(req: IncomingMessage, res: ServerResponse, parts: string[], q: URLSearchParams): Promise<boolean> {
|
||||
const range = req.headers.range
|
||||
if (parts[0] === 'tree') {
|
||||
const index = readIndex()
|
||||
if (!index) { sendJson(res, 404, { error: `index.json not found in ${outputDir}` }); return true }
|
||||
@@ -117,6 +118,14 @@ export function doocusApi(opts: Options): Plugin {
|
||||
return true
|
||||
}
|
||||
|
||||
// meetus-shaped run API (id = meeting rel path), so the composed meetus
|
||||
// review store works unchanged when embedded in doocus.
|
||||
if (parts[0] === 'runs' && parts.length >= 2) {
|
||||
const id = decodeURIComponent(parts[1])
|
||||
if (parts.length === 2 && req.method === 'GET') { await getRunShaped(res, id); return true }
|
||||
if (parts.length === 3 && parts[2] === 'review' && req.method === 'PUT') { await saveRunReview(req, res, id); return true }
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
@@ -125,10 +134,16 @@ export function doocusApi(opts: Options): Plugin {
|
||||
return { dir: path.join(outputDir, rel + '.meetus'), stem: path.parse(rel).name }
|
||||
}
|
||||
|
||||
async function getMeeting(res: ServerResponse, rel: string): Promise<void> {
|
||||
interface MeetingData {
|
||||
segments: Array<{ start: number; end: number; text: string; speaker: string | null }>
|
||||
frames: Array<{ file: string; url: string; time: number | null; size: number }>
|
||||
enhancedAvailable: boolean
|
||||
}
|
||||
|
||||
/** Read a meeting's .meetus output into the shared review shape. */
|
||||
async function meetingData(rel: string): Promise<MeetingData> {
|
||||
const { dir, stem } = meetusDirFor(rel)
|
||||
// Whisper segments (may be null-flagged in manifest but present on disk).
|
||||
const segments: Array<{ start: number; end: number; text: string; speaker: string | null }> = []
|
||||
const segments: MeetingData['segments'] = []
|
||||
const whisper = path.join(dir, `${stem}.json`)
|
||||
if (fs.existsSync(whisper)) {
|
||||
try {
|
||||
@@ -159,28 +174,66 @@ export function doocusApi(opts: Options): Plugin {
|
||||
} catch { /* none */ }
|
||||
}
|
||||
|
||||
const frames: Array<{ file: string; url: string; time: number | null }> = []
|
||||
const frames: MeetingData['frames'] = []
|
||||
try {
|
||||
for (const file of (await fsp.readdir(path.join(dir, 'frames'))).filter((f) => f.toLowerCase().endsWith('.jpg')).sort()) {
|
||||
const framesDir = path.join(dir, 'frames')
|
||||
for (const file of (await fsp.readdir(framesDir)).filter((f) => f.toLowerCase().endsWith('.jpg')).sort()) {
|
||||
const fny = file.match(/_(\d+(?:\.\d+)?)s\.jpg$/i)
|
||||
let size = 0
|
||||
try { size = (await fsp.stat(path.join(framesDir, file))).size } catch { /* */ }
|
||||
frames.push({
|
||||
file,
|
||||
url: `/api/meeting/frame?path=${encodeURIComponent(rel)}&file=${encodeURIComponent(file)}`,
|
||||
time: fny ? Number(fny[1]) : times.get(file) ?? null,
|
||||
size,
|
||||
})
|
||||
}
|
||||
} catch { /* no frames */ }
|
||||
|
||||
return { segments, frames, enhancedAvailable }
|
||||
}
|
||||
|
||||
async function getMeeting(res: ServerResponse, rel: string): Promise<void> {
|
||||
const { dir } = meetusDirFor(rel)
|
||||
const data = await meetingData(rel)
|
||||
sendJson(res, 200, {
|
||||
path: rel,
|
||||
hasOutput: fs.existsSync(dir),
|
||||
segments,
|
||||
frames,
|
||||
enhancedAvailable,
|
||||
...data,
|
||||
videoUrl: `/api/original?path=${encodeURIComponent(rel)}`,
|
||||
})
|
||||
}
|
||||
|
||||
/** meetus store's /api/runs/:id shape (id = meeting rel path). */
|
||||
async function getRunShaped(res: ServerResponse, id: string): Promise<void> {
|
||||
const { dir } = meetusDirFor(id)
|
||||
const data = await meetingData(id)
|
||||
let review: unknown = null
|
||||
try { review = JSON.parse(await fsp.readFile(path.join(dir, 'review.json'), 'utf-8')) } catch { /* none */ }
|
||||
sendJson(res, 200, {
|
||||
id,
|
||||
manifest: { video: { name: path.basename(id) } },
|
||||
segments: data.segments,
|
||||
frames: data.frames,
|
||||
enhancedAvailable: data.enhancedAvailable,
|
||||
hasVideo: true,
|
||||
videoUrl: `/api/original?path=${encodeURIComponent(id)}`,
|
||||
review,
|
||||
})
|
||||
}
|
||||
|
||||
/** Persist the review sidecar next to the meeting's .meetus output (atomic). */
|
||||
async function saveRunReview(req: IncomingMessage, res: ServerResponse, id: string): Promise<void> {
|
||||
const { dir } = meetusDirFor(id)
|
||||
if (!fs.existsSync(dir)) { sendJson(res, 404, { error: 'no meetus output for this meeting' }); return }
|
||||
let parsed: unknown
|
||||
try { parsed = JSON.parse((await readBody(req)) || '{}') } catch { sendJson(res, 400, { error: 'invalid JSON' }); return }
|
||||
const tmp = path.join(dir, `.review.${process.pid}.tmp`)
|
||||
await fsp.writeFile(tmp, JSON.stringify(parsed, null, 2), 'utf-8')
|
||||
await fsp.rename(tmp, path.join(dir, 'review.json'))
|
||||
sendJson(res, 200, { ok: true })
|
||||
}
|
||||
|
||||
function serveMeetingFrame(res: ServerResponse, rel: string, file: string): void {
|
||||
const { dir } = meetusDirFor(rel)
|
||||
const safe = path.basename(file)
|
||||
@@ -262,3 +315,12 @@ function sendJson(res: ServerResponse, status: number, obj: unknown): void {
|
||||
function isFile(p: string): boolean {
|
||||
try { return fs.statSync(p).isFile() } catch { return false }
|
||||
}
|
||||
|
||||
function readBody(req: IncomingMessage): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
let data = ''
|
||||
req.on('data', (c) => { data += c; if (data.length > 5_000_000) reject(new Error('body too large')) })
|
||||
req.on('end', () => resolve(data))
|
||||
req.on('error', reject)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,93 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import VideoPlayer from '@framework/components/VideoPlayer.vue'
|
||||
import SplitPane from '@framework/components/SplitPane.vue'
|
||||
/**
|
||||
* Embeds the meetus review for a specific meeting — pure composition of meetus's
|
||||
* own ReviewBody (single source, via the @meetus alias). doocus serves a
|
||||
* meetus-shaped /api/runs/:id from the meeting's .meetus/ output, so the meetus
|
||||
* store + components run unchanged here. Read-only (allowEdit=false).
|
||||
*/
|
||||
import { watch } from 'vue'
|
||||
import ReviewBody from '@meetus/components/ReviewBody.vue'
|
||||
import { useStore } from '@meetus/store'
|
||||
|
||||
const props = defineProps<{ path: string }>()
|
||||
const { openRun, state } = useStore()
|
||||
|
||||
interface Segment { start: number; end: number; text: string; speaker: string | null }
|
||||
interface Frame { file: string; url: string; time: number | null }
|
||||
|
||||
const loading = ref(false)
|
||||
const data = ref<{
|
||||
hasOutput: boolean; segments: Segment[]; frames: Frame[]
|
||||
enhancedAvailable: boolean; videoUrl: string
|
||||
} | null>(null)
|
||||
|
||||
const currentTime = ref(0)
|
||||
const playing = ref(false)
|
||||
|
||||
async function load(): Promise<void> {
|
||||
loading.value = true
|
||||
data.value = null
|
||||
try {
|
||||
const res = await fetch(`/api/meeting?path=${encodeURIComponent(props.path)}`)
|
||||
if (res.ok) data.value = await res.json()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
watch(() => props.path, load, { immediate: true })
|
||||
|
||||
function seek(t: number | null): void {
|
||||
if (t != null) currentTime.value = t
|
||||
}
|
||||
function fmt(t: number): string {
|
||||
const m = Math.floor(t / 60), s = Math.floor(t % 60)
|
||||
return `${m}:${String(s).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const activeSeg = computed(() =>
|
||||
data.value?.segments.findIndex((s) => currentTime.value >= s.start && currentTime.value < s.end) ?? -1)
|
||||
// The meeting's rel path IS the run id; openRun hits doocus's /api/runs/:id.
|
||||
watch(() => props.path, (p) => { if (p) openRun(p) }, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mr">
|
||||
<div v-if="loading" class="dim pad">Loading meeting…</div>
|
||||
<div v-else-if="!data?.hasOutput" class="dim pad">
|
||||
No meetus output yet for this meeting — it hasn't been transcribed (or the
|
||||
<code>.meetus</code> folder isn't merged into this output yet).
|
||||
<div class="sub">The video still plays below.</div>
|
||||
<VideoPlayer v-if="data" :src="data.videoUrl" v-model:current-time="currentTime" v-model:playing="playing" />
|
||||
</div>
|
||||
|
||||
<SplitPane v-else direction="horizontal" :initial-size="1.4" :min="0.4" :max="4">
|
||||
<template #first>
|
||||
<div class="left">
|
||||
<VideoPlayer :src="data.videoUrl" v-model:current-time="currentTime" v-model:playing="playing" />
|
||||
<div v-if="data.frames.length" class="frames">
|
||||
<img v-for="f in data.frames" :key="f.file" :src="f.url" :title="f.time != null ? fmt(f.time) : f.file"
|
||||
@click="seek(f.time)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #second>
|
||||
<div class="transcript">
|
||||
<div v-if="!data.segments.length" class="dim pad">No transcript segments.</div>
|
||||
<p v-for="(s, i) in data.segments" :key="i" class="seg" :class="{ active: i === activeSeg }" @click="seek(s.start)">
|
||||
<span class="t">{{ fmt(s.start) }}</span>
|
||||
<span v-if="s.speaker" class="spk">{{ s.speaker }}</span>
|
||||
<span class="txt">{{ s.text }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
<div class="meeting-review">
|
||||
<div v-if="state.error" class="note">{{ state.error }}</div>
|
||||
<div v-else-if="!state.currentRunId" class="note">Loading meeting…</div>
|
||||
<ReviewBody v-else :allow-edit="false" :embedded="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mr { height: 100%; }
|
||||
.pad { padding: var(--space-4); }
|
||||
.dim { color: var(--text-secondary); }
|
||||
.sub { font-size: var(--font-size-sm); margin: var(--space-2) 0; }
|
||||
.left { height: 100%; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); min-height: 0; }
|
||||
.frames { display: flex; gap: var(--space-1); overflow-x: auto; flex-shrink: 0; }
|
||||
.frames img { height: 64px; border: var(--panel-border); border-radius: 3px; cursor: pointer; }
|
||||
.frames img:hover { border-color: var(--text-secondary); }
|
||||
.transcript { height: 100%; overflow-y: auto; padding: var(--space-2) var(--space-3); }
|
||||
.seg { margin: 0 0 var(--space-1); padding: 2px 4px; border-radius: 3px; cursor: pointer; line-height: 1.5; }
|
||||
.seg:hover { background: var(--surface-2); }
|
||||
.seg.active { background: var(--surface-3); }
|
||||
.seg .t { color: var(--text-secondary); font-size: var(--font-size-sm); margin-right: var(--space-2); }
|
||||
.seg .spk { color: var(--status-live, #2a6); font-weight: 600; margin-right: var(--space-2); }
|
||||
.meeting-review { height: 100%; }
|
||||
.note { padding: var(--space-4); color: var(--text-secondary); }
|
||||
</style>
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@framework/*": ["../framework/src/*"],
|
||||
"@meetus/*": ["../meetus-app/src/*"],
|
||||
"@/*": ["src/*"],
|
||||
"vue": ["node_modules/vue"]
|
||||
}
|
||||
|
||||
@@ -13,15 +13,18 @@ export default defineConfig({
|
||||
resolve: {
|
||||
alias: {
|
||||
'@framework': fileURLToPath(new URL('../framework/src', import.meta.url)),
|
||||
// Compose meetus's own review components (single source; portable imports).
|
||||
'@meetus': fileURLToPath(new URL('../meetus-app/src', import.meta.url)),
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
fs: {
|
||||
// Allow the dev server to read the framework source and the docs-output tree.
|
||||
// Allow the dev server to read the framework + meetus-app source and the output tree.
|
||||
allow: [
|
||||
fileURLToPath(new URL('.', import.meta.url)),
|
||||
fileURLToPath(new URL('../framework', import.meta.url)),
|
||||
fileURLToPath(new URL('../meetus-app', import.meta.url)),
|
||||
outputDir,
|
||||
],
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user