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

Implement PWA.

Browse Source
This commit is contained in:
LeoVasanko
2026-05-13 18:22:25 +00:00
parent 14bae04d1e
commit c831537cef
9 changed files with 78 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+5 -3
View File
@@ -2,10 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/webp" sizes="32x32" href="/src/assets/mediahive-32.webp" /> <link rel="icon" type="image/webp" sizes="32x32" href="/mediahive-32.webp" />
<link rel="icon" type="image/webp" sizes="192x192" href="/src/assets/mediahive.webp" /> <link rel="icon" type="image/webp" sizes="192x192" href="/mediahive.webp" />
<link rel="apple-touch-icon" href="/src/assets/mediahive.webp" /> <link rel="apple-touch-icon" href="/mediahive.webp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0a0a0a" />
<meta name="description" content="Movies and Series" />
<title>MediaHive</title> <title>MediaHive</title>
</head> </head>
<body> <body>
frontend/package.json
+1
View File
@@ -16,6 +16,7 @@
"@vitejs/plugin-vue": "^5.0.0", "@vitejs/plugin-vue": "^5.0.0",
"typescript": "^5.3.0", "typescript": "^5.3.0",
"vite": "^5.0.0", "vite": "^5.0.0",
"vite-plugin-pwa": "^1.3.0",
"vue-tsc": "^2.0.0" "vue-tsc": "^2.0.0"
} }
} }
frontend/public/mediahive-32.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 874 B

frontend/public/mediahive.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

frontend/src/App.vue
+6
View File
@@ -219,6 +219,10 @@ interface ScoredMediaItem {
const searchCategories = ref<SearchCategory[]>([]); const searchCategories = ref<SearchCategory[]>([]);
function requestInitialFullscreen() {
void document.documentElement.requestFullscreen();
}
// Focus state per page for Escape navigation // Focus state per page for Escape navigation
const focusStateMap = new Map<string, { row: number; col: number }>(); const focusStateMap = new Map<string, { row: number; col: number }>();
// Track the last viewed item ID to restore focus to the right card // Track the last viewed item ID to restore focus to the right card
@@ -308,10 +312,12 @@ function handleEscapeKey(event: KeyboardEvent) {
onMounted(() => { onMounted(() => {
document.addEventListener('keydown', handleEscapeKey); document.addEventListener('keydown', handleEscapeKey);
window.addEventListener('click', requestInitialFullscreen, { once: true });
}); });
onUnmounted(() => { onUnmounted(() => {
document.removeEventListener('keydown', handleEscapeKey); document.removeEventListener('keydown', handleEscapeKey);
window.removeEventListener('click', requestInitialFullscreen);
}); });
// Search query stored in ref (not URL-based) // Search query stored in ref (not URL-based)
frontend/src/main.ts
+6
View File
@@ -9,4 +9,10 @@ import { installGamepadNavigation } from './composables/useGamepadNavigation'
installKeyboardNavigation() installKeyboardNavigation()
installGamepadNavigation() installGamepadNavigation()
if ('serviceWorker' in navigator && !navigator.serviceWorker.controller) {
navigator.serviceWorker.addEventListener('controllerchange', () => {
window.location.reload()
}, { once: true })
}
createApp(App).use(router).mount('#app') createApp(App).use(router).mount('#app')
frontend/src/pwa.ts
+8
View File
@@ -0,0 +1,8 @@
import { registerSW } from 'virtual:pwa-register'
export function registerMediaHivePwa(): void {
const updateServiceWorker = registerSW({
immediate: true,
onNeedRefresh: () => void updateServiceWorker(true),
})
}
frontend/src/vite-env.d.ts
Vendored
+1
View File
@@ -1,4 +1,5 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
/// <reference types="vite-plugin-pwa/client" />
declare module '*.vue' { declare module '*.vue' {
import type { DefineComponent } from 'vue' import type { DefineComponent } from 'vue'
frontend/vite.config.ts
+51 -1
View File
@@ -1,10 +1,60 @@
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"; import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";
import fastapiVue from './vite-plugin-fastapi.js' import fastapiVue from './vite-plugin-fastapi.js'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig(async () => ({ export default defineConfig(async () => ({
plugins: [fastapiVue(), vue()], plugins: [
fastapiVue(),
vue(),
VitePWA({
registerType: "autoUpdate",
injectRegister: "script",
manifest: {
id: "/",
name: "MediaHive",
short_name: "MediaHive",
description: "Movies and Series",
start_url: "/",
scope: "/",
display_override: ["window-controls-overlay", "fullscreen", "standalone"],
display: "fullscreen",
background_color: "#0a0a0a",
theme_color: "#0a0a0a",
icons: [
{
src: "/mediahive-32.webp",
sizes: "32x32",
type: "image/webp"
},
{
src: "/mediahive.webp",
sizes: "192x192",
type: "image/webp"
}
]
},
workbox: {
cleanupOutdatedCaches: true,
clientsClaim: true,
skipWaiting: true,
manifestTransforms: [
async (entries) => {
const manifest = entries.map((entry) =>
entry.url === "index.html" ? { ...entry, url: "/" } : entry
);
return { manifest, warnings: [] };
},
],
navigateFallback: null,
navigateFallbackDenylist: [/^\/api\//],
},
devOptions: {
enabled: false,
},
}),
],
// Vite dev server options // Vite dev server options
clearScreen: false, clearScreen: false,