keligrubb/kestrelos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity

minor: heavily simplify server and app content. unify styling (#4)
All checks were successful
ci/woodpecker/push/push Pipeline was successful
Details

Browse Source 
Co-authored-by: Madison Grubb <madison@elastiflow.com>
Reviewed-on: #4
This commit was merged in pull request #4.
This commit is contained in:
Keli Grubb
2026-02-14 04:52:18 +00:00
parent 1a143d2f8e
commit 17f28401ba
40 changed files with 595 additions and 933 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/CameraViewer.vue
View File

@@ -7,18 +7,18 @@
/>
<aside
v-else
class="flex flex-col border border-kestrel-border bg-kestrel-surface"
:class="asideClass"
class="kestrel-panel-base"
:class="inline ? 'kestrel-panel-inline' : 'kestrel-panel-overlay'"
role="dialog"
aria-label="Camera feed"
>
<div class="flex items-center justify-between border-b border-kestrel-border px-4 py-3 [box-shadow:0_1px_0_0_rgba(34,201,201,0.08)]">
<h2 class="font-medium tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
<div class="kestrel-panel-header">
<h2 class="font-medium tracking-wide text-kestrel-text text-shadow-glow-sm">
{{ camera?.name ?? 'Camera' }}
</h2>
<button
type="button"
class="rounded p-1 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
class="kestrel-close-btn"
aria-label="Close panel"
@click="$emit('close')"
>
@@ -26,7 +26,7 @@
</button>
</div>
<div class="flex-1 overflow-auto p-4">
<div class="relative aspect-video w-full overflow-hidden rounded border border-kestrel-border bg-black [box-shadow:inset_0_0_20px_-8px_rgba(34,201,201,0.1)]">
<div class="kestrel-video-frame">
<template v-if="sourceType === 'hls'">
<video
ref="videoRef"
@@ -75,18 +75,14 @@ defineEmits(['close'])
const videoRef = ref(null)
const streamError = ref(false)
const isLiveSession = computed(() =>
props.camera && typeof props.camera.hasStream !== 'undefined')
const asideClass = computed(() =>
props.inline ? 'rounded-lg shadow-glow' : 'absolute right-0 top-0 z-[1000] h-full w-full border-l shadow-glow md:w-[420px] [box-shadow:-8px_0_24px_-4px_rgba(34,201,201,0.12)]')
const isLiveSession = computed(() => props.camera?.hasStream !== undefined)
const streamUrl = computed(() => props.camera?.streamUrl ?? '')
const sourceType = computed(() => (props.camera?.sourceType === 'hls' ? 'hls' : 'mjpeg'))
const safeStreamUrl = computed(() => {
const u = streamUrl.value
return typeof u === 'string' && u.trim() && (u.startsWith('http://') || u.startsWith('https://')) ? u.trim() : ''
const u = streamUrl.value?.trim()
return (u?.startsWith('http://') || u?.startsWith('https://')) ? u : ''
})
function initHls() {