ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

added update notifier

Browse Source
This commit is contained in:
lenafx
2025-12-02 21:05:45 +01:00
parent fb3d1a447e
commit 01376362af
11 changed files with 314 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/scripts/updateNotifier.js Normal file
View File

@@ -0,0 +1,103 @@
const Gitea_OWNER = 'ItsSkaiya';
const Gitea_REPO = 'WaifuBoard';
const CURRENT_VERSION = 'v1.6.3';
const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
let currentVersionDisplay;
let latestVersionDisplay;
let updateToast;
document.addEventListener('DOMContentLoaded', () => {
currentVersionDisplay = document.getElementById('currentVersionDisplay');
latestVersionDisplay = document.getElementById('latestVersionDisplay');
updateToast = document.getElementById('updateToast');
if (currentVersionDisplay) {
currentVersionDisplay.textContent = CURRENT_VERSION;
}
checkForUpdates();
setInterval(checkForUpdates, UPDATE_CHECK_INTERVAL);
});
function showToast(latestVersion) {
if (latestVersionDisplay && updateToast) {
latestVersionDisplay.textContent = latestVersion;
updateToast.classList.add('update-available');
updateToast.classList.remove('hidden');
} else {
console.error("Error: Cannot display toast because one or more DOM elements were not found.");
}
}
function hideToast() {
if (updateToast) {
updateToast.classList.add('hidden');
updateToast.classList.remove('update-available');
}
}
function isVersionOutdated(versionA, versionB) {
const vA = versionA.replace(/^v/, '').split('.').map(Number);
const vB = versionB.replace(/^v/, '').split('.').map(Number);
for (let i = 0; i < Math.max(vA.length, vB.length); i++) {
const numA = vA[i] || 0;
const numB = vB[i] || 0;
if (numA < numB) return true;
if (numA > numB) return false;
}
return false;
}
async function checkForUpdates() {
console.log(`Checking for updates for ${Gitea_OWNER}/${Gitea_REPO}...`);
const apiUrl = `https://git.waifuboard.app/api/v1/repos/${Gitea_OWNER}/${Gitea_REPO}/releases/latest`;
try {
const response = await fetch(apiUrl, {
method: 'GET',
headers: {
'Accept': 'application/json'
}
});
if (!response.ok) {
if (response.status === 404) {
console.info('No releases found for this repository.');
return;
}
throw new Error(`Gitea API error: ${response.status} ${response.statusText}`);
}
const data = await response.json();
const latestVersion = data.tag_name;
if (!latestVersion) {
console.warn("Release found but no tag_name present");
return;
}
console.log(`Latest Gitea Release: ${latestVersion}`);
if (isVersionOutdated(CURRENT_VERSION, latestVersion)) {
console.warn('Update available!');
showToast(latestVersion);
} else {
console.info('Package is up to date.');
hideToast();
}
} catch (error) {
console.error('Failed to fetch Gitea release:', error);
}
}

15
views/anime.html
View File

@@ -6,6 +6,7 @@
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<title>WaifuBoard</title> <title>WaifuBoard</title>
<link rel="stylesheet" href="/views/css/anime/anime.css"> <link rel="stylesheet" href="/views/css/anime/anime.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
</head> </head>
<body> <body>
@@ -128,6 +129,20 @@
</div> </div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="../src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/anime/anime.js"></script> <script src="/src/scripts/anime/anime.js"></script>
</body> </body>
</html> </html>

14
views/book.html
View File

@@ -7,6 +7,7 @@
<title>WaifuBoard Book</title> <title>WaifuBoard Book</title>
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/books/book.css"> <link rel="stylesheet" href="/views/css/books/book.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
</head> </head>
<body> <body>
@@ -111,6 +112,19 @@
</div> </div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="../src/scripts/updateNotifier.js"></script>
<script src="../src/scripts/books/book.js"></script> <script src="../src/scripts/books/book.js"></script>
</body> </body>
</html> </html>

14
views/books.html
View File

@@ -6,6 +6,7 @@
<title>WaifuBoard Books</title> <title>WaifuBoard Books</title>
<link rel="stylesheet" href="/views/css/books/books.css"> <link rel="stylesheet" href="/views/css/books/books.css">
<script src="../src/scripts/books/books.js" defer></script> <script src="../src/scripts/books/books.js" defer></script>
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
</head> </head>
<body> <body>
@@ -81,5 +82,18 @@
</section> </section>
</main> </main>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="../src/scripts/updateNotifier.js"></script>
</body> </body>
</html> </html>

85
views/css/updateNotifier.css Normal file
View File

@@ -0,0 +1,85 @@
#updateToast {
position: fixed;
bottom: 20px;
right: 30px;
z-index: 5000;
opacity: 0;
transform: translateY(100px);
pointer-events: none;
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
padding: 0.8rem 1.25rem;
border-radius: var(--radius-md);
max-width: 300px;
background: rgba(18, 18, 21, 0.8);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
color: var(--text-primary);
font-size: 0.9rem;
}
#updateToast.hidden {
opacity: 0;
transform: translateY(100px);
pointer-events: none;
}
#updateToast.update-available {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#updateToast p {
margin: 0;
font-weight: 500;
width: 100%;
padding-bottom: 0.3rem;
}
#latestVersionDisplay {
font-weight: 700;
font-size: 0.9rem;
padding: 0.2rem 0.6rem;
border-radius: 6px;
background: var(--accent);
color: var(--bg-base);
display: inline-block;
margin-left: 0.5rem;
box-shadow: 0 0 12px var(--accent-glow);
transition: transform 0.2s;
}
#downloadButton {
width: 100%;
padding: 0.6rem 1rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
text-decoration: none;
text-align: center;
background: var(--accent);
color: white;
border: none;
box-shadow: 0 4px 10px var(--accent-glow);
transition: transform 0.2s, background 0.2s;
}
#downloadButton:hover {
transform: translateY(-2px);
background: #7c4dff;
box-shadow: 0 6px 15px var(--accent-glow);
}

14
views/gallery-image.html
View File

@@ -9,6 +9,7 @@
<link rel="stylesheet" href="/views/css/gallery/image.css"> <link rel="stylesheet" href="/views/css/gallery/image.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
</head> </head>
<body> <body>
@@ -52,6 +53,19 @@
</section> </section>
</main> </main>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/gallery/image.js"></script> <script src="/src/scripts/gallery/image.js"></script>
</body> </body>
</html> </html>

14
views/gallery.html
View File

@@ -7,6 +7,7 @@
<link rel="stylesheet" href="/views/css/anime/home.css"> <link rel="stylesheet" href="/views/css/anime/home.css">
<link rel="stylesheet" href="/views/css/gallery/gallery.css"> <link rel="stylesheet" href="/views/css/gallery/gallery.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
@@ -67,6 +68,19 @@
</section> </section>
</main> </main>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="../src/scripts/updateNotifier.js"></script>
<script src="../src/scripts/gallery/gallery.js"></script> <script src="../src/scripts/gallery/gallery.js"></script>
</body> </body>
</html> </html>

14
views/index.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WaifuBoard</title> <title>WaifuBoard</title>
<link rel="stylesheet" href="/views/css/anime/home.css"> <link rel="stylesheet" href="/views/css/anime/home.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
</head> </head>
<body> <body>
@@ -104,6 +105,19 @@
</section> </section>
</main> </main>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="../src/scripts/updateNotifier.js"></script>
<script src="../src/scripts/anime/animes.js"></script> <script src="../src/scripts/anime/animes.js"></script>
</body> </body>
</html> </html>

13
views/read.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reader</title> <title>Reader</title>
<link rel="stylesheet" href="/views/css/books/reader.css"> <link rel="stylesheet" href="/views/css/books/reader.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
</head> </head>
@@ -177,6 +178,18 @@
</div> </div>
</main> </main>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/books/reader.js"></script> <script src="/src/scripts/books/reader.js"></script>
</body> </body>
</html> </html>

14
views/schedule.html
View File

@@ -9,6 +9,7 @@
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/views/css/schedule/schedule.css"> <link rel="stylesheet" href="/views/css/schedule/schedule.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
</head> </head>
<body> <body>
@@ -81,6 +82,19 @@
<span id="loadingText">Syncing Schedule...</span> <span id="loadingText">Syncing Schedule...</span>
</div> </div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="../src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/schedule/schedule.js"></script> <script src="/src/scripts/schedule/schedule.js"></script>
</body> </body>
</html> </html>

14
views/watch.html
View File

@@ -6,6 +6,7 @@
<base href="/"> <base href="/">
<title>WaifuBoard Watch</title> <title>WaifuBoard Watch</title>
<link rel="stylesheet" href="/views/css/anime/watch.css"> <link rel="stylesheet" href="/views/css/anime/watch.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" /> <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script> <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
@@ -168,5 +169,18 @@
}); });
</script> </script>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download
</a>
</div>
<script src="../src/scripts/updateNotifier.js"></script>
</body> </body>
</html> </html>