LeoVasanko/mediahive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity

Improve scanning. Add Crime category taking it out of Action.

Browse Source
This commit is contained in:
LeoVasanko
2026-02-10 21:15:00 +00:00
parent 4347a8d11d
commit a9e6c2a145
10 changed files with 896 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+109 -20
View File
@@ -5,6 +5,29 @@
<component :is="Component" v-show="false" />
</router-view>
<!-- Scanning progress debug overlay -->
<div v-if="activeTasks.length > 0 || !wsConnected" class="scan-debug-overlay">
<div v-if="!wsConnected" class="scan-debug-item scan-debug-disconnected">
⚡ Reconnecting...
</div>
<div
v-for="task in activeTasks"
:key="task.id"
class="scan-debug-item"
:class="{
'scan-debug-done': task.status === 'completed',
'scan-debug-error': task.status === 'error',
}"
>
<span class="scan-debug-label">{{ task.id }}</span>
<span v-if="task.progress > 0" class="scan-debug-progress">
{{ Math.round(task.progress * 100) }}%
</span>
<span v-if="task.detail" class="scan-debug-detail">{{ task.detail }}</span>
<span class="scan-debug-status">{{ task.status }}</span>
</div>
</div>
<!-- Persistent Header overlay - single instance -->
<Header
:current-view="currentView"
@@ -32,7 +55,7 @@
<div class="error-icon">⚠️</div>
<h2 class="error-title">Failed to load media index</h2>
<p class="error-message">{{ error }}</p>
<button class="btn btn-primary" @click="loadIndex">
<button class="btn btn-primary" @click="reloadPage">
Try Again
</button>
</div>
@@ -57,6 +80,7 @@
<!-- Hero for movies -->
<CollageHero
v-if="movieCollageItems.length > 0"
:key="`movie-hero-${movieCollageItems.length}-${movieFeaturedItem?.id || 'none'}`"
:items="movieCollageItems"
:featured-item="movieFeaturedItem"
@play="handlePlay"
@@ -83,6 +107,7 @@
<!-- Hero for series -->
<CollageHero
v-if="seriesCollageItems.length > 0"
:key="`series-hero-${seriesCollageItems.length}-${seriesFeaturedItem?.id || 'none'}`"
:items="seriesCollageItems"
:featured-item="seriesFeaturedItem"
@play="handlePlay"
@@ -113,6 +138,7 @@
<template v-if="searchResults.length > 0">
<!-- Hero with all results ranked by relevance -->
<CollageHero
:key="`search-hero-${searchCollageItems.length}-${searchFeaturedItem?.id || 'none'}`"
:items="searchCollageItems"
:featured-item="searchFeaturedItem"
@play="handlePlay"
@@ -152,9 +178,10 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import type { MediaIndex, Movie, Series, MediaItem, EpisodeWithSeries, MatchedPerson, MatchedEpisode } from './types';
import { loadMediaIndex, playMedia, openFolder } from './api';
import type { Movie, Series, MediaItem, EpisodeWithSeries, MatchedPerson, MatchedEpisode, TaskInfo } from './types';
import { playMedia, openFolder } from './api';
import { useKeyboardNavigation } from './composables/useKeyboardNavigation';
import { useMediaWebSocket } from './composables/useMediaWebSocket';
import Header from './components/Header.vue';
import CollageHero from './components/CollageHero.vue';
import MediaRow from './components/MediaRow.vue';
@@ -166,9 +193,12 @@ const { getFocusState, restoreFocusState, focusAt } = useKeyboardNavigation();
const router = useRouter();
const route = useRoute();
const loading = ref(true);
const error = ref<string | null>(null);
const mediaIndex = ref<MediaIndex | null>(null);
// WebSocket-driven media index
const { mediaIndex, loading, error, connected: wsConnected, tasks } = useMediaWebSocket();
// Active tasks for the debug overlay
const activeTasks = computed<TaskInfo[]>(() => Array.from(tasks.value.values()));
const searchResults = ref<MediaItem[]>([]);
const isSearching = ref(false);
@@ -438,10 +468,11 @@ function seriesToMediaItem(series: Series): MediaItem {
// priority: lower number = higher matching priority (movies assigned to highest priority match)
// exclude: if item has any of these genres, it won't match this category (negative match)
const GENRE_CATEGORIES = [
{ name: 'Action', keywords: ['Action', 'Adventure', 'Crime'], priority: 40, exclude: [] },
{ name: 'Action', keywords: ['Action', 'Adventure'], priority: 40, exclude: [] },
{ name: 'Comedy', keywords: ['Comedy'], priority: 30, exclude: ['Drama'] },
{ name: 'Romance', keywords: ['Romance'], priority: 20, exclude: [] },
{ name: 'Drama', keywords: ['Drama'], priority: 50, exclude: [] },
{ name: 'Crime', keywords: ['Crime'], priority: 45, exclude: [] },
{ name: 'Thriller', keywords: ['Thriller', 'Mystery'], priority: 20, exclude: [] },
{ name: 'Horror', keywords: ['Horror'], priority: 10, exclude: [] },
{ name: 'Science Fiction', keywords: ['Science Fiction', 'Sci-Fi'], priority: 15, exclude: [] },
@@ -1049,16 +1080,8 @@ const searchFeaturedItem = computed(() => {
return withCovers[0] || searchResults.value[0] || null;
});
async function loadIndex() {
loading.value = true;
error.value = null;
try {
mediaIndex.value = await loadMediaIndex();
} catch (e) {
error.value = e instanceof Error ? e.message : String(e);
} finally {
loading.value = false;
}
function reloadPage() {
window.location.reload();
}
async function handlePlay(filePath: string) {
@@ -1077,9 +1100,7 @@ async function handleOpenFolder(folderPath: string) {
}
}
onMounted(() => {
loadIndex();
});
</script>
<style scoped>
@@ -1087,6 +1108,74 @@ onMounted(() => {
min-height: 100vh;
}
/* Scanning progress debug overlay */
.scan-debug-overlay {
position: fixed;
bottom: 12px;
right: 12px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 4px;
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 11px;
max-width: 380px;
pointer-events: none;
}
.scan-debug-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
background: rgba(0, 0, 0, 0.82);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
white-space: nowrap;
overflow: hidden;
}
.scan-debug-disconnected {
color: #f59e0b;
border-color: rgba(245, 158, 11, 0.3);
}
.scan-debug-done {
color: #34d399;
border-color: rgba(52, 211, 153, 0.3);
}
.scan-debug-error {
color: #f87171;
border-color: rgba(248, 113, 113, 0.3);
}
.scan-debug-label {
color: rgba(255, 255, 255, 0.5);
flex-shrink: 0;
}
.scan-debug-progress {
color: #60a5fa;
font-weight: 600;
flex-shrink: 0;
}
.scan-debug-detail {
color: rgba(255, 255, 255, 0.55);
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.scan-debug-status {
color: rgba(255, 255, 255, 0.35);
flex-shrink: 0;
margin-left: auto;
}
.empty-hero {
height: 70vh;
min-height: 450px;
frontend/src/composables/useMediaWebSocket.ts
+186
View File
@@ -0,0 +1,186 @@
import { ref, readonly, onUnmounted } from 'vue';
import type { Movie, Series, MediaIndex, TaskInfo, WsMessage } from '../types';
/**
* Composable that connects to the MediaHive WebSocket and keeps
* the media index updated in real time.
*
* The server sends:
* - "init" → full index (movies + series) on connect
* - "upsert" → single item inserted or updated
* - "remove" → single item removed
* - "task" → background task progress
*
* Messages are msgspec-encoded binary JSON with a "type" tag field.
*/
export function useMediaWebSocket() {
const mediaIndex = ref<MediaIndex | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
const connected = ref(false);
const tasks = ref<Map<string, TaskInfo>>(new Map());
let ws: WebSocket | null = null;
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
let disposed = false;
// Lookup maps for fast upsert / remove
const movieMap = new Map<string, Movie>();
const seriesMap = new Map<string, Series>();
function buildIndex(): MediaIndex {
const movies = Array.from(movieMap.values());
const series = Array.from(seriesMap.values());
return {
version: 0,
generated_at: new Date().toISOString(),
stats: {
total_movies: movies.length,
total_series: series.length,
},
movies,
series,
};
}
function handleMessage(event: MessageEvent) {
try {
// Server sends binary frames (msgspec json bytes)
let text: string;
if (event.data instanceof Blob) {
// Will be handled by the blob reader below
event.data.text().then((t) => processJson(t));
return;
} else if (event.data instanceof ArrayBuffer) {
text = new TextDecoder().decode(event.data);
} else {
text = event.data as string;
}
processJson(text);
} catch (e) {
console.error('[WS] Failed to handle message:', e);
}
}
function processJson(text: string) {
const msg = JSON.parse(text) as WsMessage;
switch (msg.type) {
case 'init': {
movieMap.clear();
seriesMap.clear();
for (const m of msg.data.movies) movieMap.set(m.id, m);
for (const s of msg.data.series) seriesMap.set(s.id, s);
mediaIndex.value = buildIndex();
loading.value = false;
error.value = null;
console.log(`[WS] init: ${movieMap.size} movies, ${seriesMap.size} series`);
break;
}
case 'upsert': {
if (msg.kind === 'movie') {
movieMap.set(msg.item.id, msg.item as Movie);
} else {
seriesMap.set(msg.item.id, msg.item as Series);
}
// Rebuild the index ref so Vue detects the change
mediaIndex.value = buildIndex();
break;
}
case 'remove': {
if (msg.kind === 'movie') {
movieMap.delete(msg.id);
} else {
seriesMap.delete(msg.id);
}
mediaIndex.value = buildIndex();
break;
}
case 'task': {
const info = msg.data;
if (info.status === 'completed' || info.status === 'cancelled' || info.status === 'error') {
// Keep finished tasks briefly so the UI can show completion
tasks.value.set(info.id, info);
setTimeout(() => {
tasks.value.delete(info.id);
tasks.value = new Map(tasks.value);
}, 3000);
} else {
tasks.value.set(info.id, info);
}
// Trigger reactivity
tasks.value = new Map(tasks.value);
break;
}
}
}
function connect() {
if (disposed) return;
// Build WS URL relative to current page
const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
const url = `${proto}//${location.host}/ws`;
console.log(`[WS] Connecting to ${url}...`);
ws = new WebSocket(url);
ws.onopen = () => {
connected.value = true;
error.value = null;
console.log('[WS] Connected');
};
ws.onmessage = handleMessage;
ws.onclose = (ev) => {
connected.value = false;
console.log(`[WS] Closed (code=${ev.code})`);
scheduleReconnect();
};
ws.onerror = (ev) => {
console.error('[WS] Error:', ev);
if (!mediaIndex.value) {
error.value = 'WebSocket connection failed';
}
};
}
function scheduleReconnect() {
if (disposed) return;
if (reconnectTimer) clearTimeout(reconnectTimer);
reconnectTimer = setTimeout(() => {
console.log('[WS] Reconnecting...');
connect();
}, 2000);
}
function disconnect() {
disposed = true;
if (reconnectTimer) {
clearTimeout(reconnectTimer);
reconnectTimer = null;
}
if (ws) {
ws.onclose = null; // prevent reconnect
ws.close();
ws = null;
}
}
// Start the connection
connect();
// Clean up on component unmount
onUnmounted(disconnect);
return {
mediaIndex,
loading: readonly(loading),
error: readonly(error),
connected: readonly(connected),
tasks: readonly(tasks),
disconnect,
};
}
frontend/src/types.ts
+34
View File
@@ -88,6 +88,7 @@ export interface Series {
id: string;
title: string | null;
info: Info | null;
alternative_titles: string[] | null;
newest: number | null;
cover_path: string | null;
backdrop_path: string | null;
@@ -153,3 +154,36 @@ export interface EpisodeWithSeries {
series: Series;
seasonNumber: number;
}
// Task progress info from background scanning
export interface TaskInfo {
id: string;
status: string;
progress: number;
detail: string;
}
// WebSocket message types (matching server msgspec tagged structs)
export interface WsInitMessage {
type: 'init';
data: { movies: Movie[]; series: Series[] };
}
export interface WsUpsertMessage {
type: 'upsert';
kind: 'movie' | 'series';
item: Movie | Series;
}
export interface WsRemoveMessage {
type: 'remove';
kind: 'movie' | 'series';
id: string;
}
export interface WsTaskMessage {
type: 'task';
data: TaskInfo;
}
export type WsMessage = WsInitMessage | WsUpsertMessage | WsRemoveMessage | WsTaskMessage;