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

wip implementation of local library on anime

Browse Source
This commit is contained in:
lenafx
2025-12-26 22:36:16 +01:00
parent 6075dcf149
commit 25ea30f086
9 changed files with 645 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
desktop/views/anime/anime.html
View File

@@ -158,6 +158,7 @@
<div class="meta-row">
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
<div class="pill score" id="score">--% Score</div>
<div class="pill" id="year">----</div>
<div class="pill" id="genres">Action</div>

168
desktop/views/anime/animes.html
View File

@@ -9,17 +9,19 @@
<link rel="stylesheet" href="/views/css/components/hero.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/local-library.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body >
<div id="titlebar"><div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<body>
<div id="titlebar">
<div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="min">−</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
@@ -121,8 +123,102 @@
</div>
</div>
</div>
<button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
</button>
</div>
<!-- Online Mode Content -->
<main id="online-content">
<section class="section">
<div class="section-header">
<div class="section-title">Continue watching</div>
</div>
<div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
<div class="carousel" id="my-status">
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
</div>
<button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
</div>
</section>
<section class="section">
<div class="section-header"><div class="section-title">Trending This Season</div></div>
<div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
<div class="carousel" id="trending">
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
</div>
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
</div>
</section>
<section class="section">
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
<div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
<div class="carousel" id="top-airing">
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
</div>
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
</div>
</section>
</main>
<!-- Local Library Mode Content -->
<main id="local-content" class="hidden">
<section class="section">
<div class="section-header">
<div class="section-title">Local Anime Library</div>
<button class="btn-secondary" onclick="scanLocalLibrary()">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M21 12a9 9 0 1 1-9-9"/>
<path d="M21 3v6h-6"/>
</svg>
<span id="scan-text">Scan Library</span>
</button>
</div>
<div class="local-filters">
<div class="filter-group">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="watching">Watching</button>
<button class="filter-btn" data-filter="completed">Completed</button>
<button class="filter-btn" data-filter="unwatched">Unwatched</button>
<button class="filter-btn" data-filter="unlinked">Unlinked</button>
</div>
<div class="filter-group">
<button class="filter-btn" data-sort="az">A–Z</button>
<button class="filter-btn" data-sort="recent">Recent</button>
</div>
</div>
<div class="local-library-grid" id="local-entries-grid">
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
</div>
</section>
</main>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
@@ -130,11 +226,10 @@
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label>Status</label>
<select id="entry-status" class="form-input">
<option value="WATCHING">Watching/Reading</option>
<option value="WATCHING"><Watchi></Watchi>ng/Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Planning</option>
<option value="PAUSED">Paused</option>
@@ -180,7 +275,6 @@
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
</div>
</div>
</div>
@@ -191,63 +285,10 @@
</div>
</div>
</div>
<main>
<section class="section">
<div class="section-header">
<div class="section-title">Continue watching</div>
</div>
<div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
<div class="carousel" id="my-status">
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
</div>
<button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
</div>
</section>
<section class="section">
<div class="section-header"><div class="section-title">Trending This Season</div></div>
<div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
<div class="carousel" id="trending">
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
</div>
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
</div>
</section>
<section class="section">
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
<div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
<div class="carousel" id="top-airing">
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div>
</div>
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
</div>
</section>
</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"
>
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
Click To Download
</a>
</div>
@@ -258,6 +299,7 @@
<script src="/src/scripts/utils/continue-watching-manager.js"></script>
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
<script src="/src/scripts/anime/animes.js"></script>
<script src="/src/scripts/local-library.js"></script>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script>

6
desktop/views/css/anime/anime.css
View File

@@ -53,8 +53,8 @@
gap: 1.25rem;
}
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.info-item span { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
.character-list {
display: flex;
@@ -180,7 +180,7 @@
transition: 0.2s;
text-align: center;
font-weight: 600;
color: var(--text-secondary);
color: var(--color-text-secondary);
}
.episode-btn:hover {

132
desktop/views/css/components/local-library.css Normal file
View File

@@ -0,0 +1,132 @@
.library-mode-btn {
padding: 0.6rem 1.2rem;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.2s;
}
.library-mode-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.library-mode-btn.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.library-mode-btn svg {
width: 18px;
height: 18px;
}
.local-library-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem;
padding: 1rem 0;
}
.local-card {
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.local-card:hover {
transform: translateY(-8px);
}
.local-card-info {
padding: 0.8rem 0;
}
.local-card-title {
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0.5rem;
}
.match-status {
font-size: 0.85rem;
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-sm);
}
.status-linked {
background: rgba(34, 197, 94, 0.2);
color: var(--color-success);
}
.status-unlinked {
background: rgba(239, 68, 68, 0.2);
color: var(--color-danger);
}
.hidden {
display: none !important;
}
.skeleton-card {
width: 100%;
aspect-ratio: 2/3;
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--radius-md);
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.hero-wrapper {
position: relative;
}
.library-mode-btn.icon-only {
position: absolute;
bottom: 2rem;
right: 2rem;
z-index: 50;
}
.hero-mode-switch .library-mode-btn {
backdrop-filter: blur(10px);
}
.local-filters {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 0.4rem 0.9rem;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: #bbb;
cursor: pointer;
}
.filter-btn.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}