mirror of
https://github.com/calibrain/shelfmark.git
synced 2026-10-05 18:31:05 +01:00
Stephon ParkerandCaliBrain
5e04b6bfb8
## Summary
This PR completely overhauls the download system to support concurrent
downloads, cancellation, and advanced queue
management. No more waiting for stuck downloads to block the entire
queue!
## New Features
### **Concurrent Downloads**
- **3 simultaneous downloads** by default (configurable)
- ThreadPoolExecutor-based architecture replaces single-threaded
bottleneck
- Downloads no longer block each other
### **Download Cancellation**
- **Cancel button** for active/queued downloads
- Clean cancellation with partial file cleanup
- Thread-safe cancellation flags
### **Queue Priority & Reordering**
- **Priority-based queue** (lower number = higher priority)
- **Editable priority inputs** in UI for queued items
- **Bulk reordering** API support
## UI Enhancements
- **Enhanced status table** with Priority, Progress, and Actions columns
- **Progress bars** for active downloads
- **Cancel buttons** for downloads
- **Queue management controls**: Refresh, Clear Completed, Active
Counter
- **Real-time updates** every 60 seconds
## Implementation
### New Architecture
- `queue.PriorityQueue` replaces simple `set()` for proper ordering
- `concurrent.futures.ThreadPoolExecutor` handles worker threads
- `threading.Event` flags enable clean cancellation
- Thread-safe operations with proper locking
### New API Endpoints
DELETE /api/download/{id}/cancel # Cancel downloads
PUT /api/queue/{id}/priority # Set priorityPOST /api/queue/reorder #
Bulk reorder
GET /api/downloads/active # Active tracking
DELETE /api/queue/clear # Clear completed
### New Environment Variables
```bash
MAX_CONCURRENT_DOWNLOADS=3 # Worker thread count
DOWNLOAD_PROGRESS_UPDATE_INTERVAL=5 # Progress frequency
```
### Fully backward compatible - existing functionality unchanged
### Fixes
- Resolves: Downloads blocking when one gets stuck
- Resolves: No way to cancel problematic downloads
- Resolves: No queue management or prioritization
#183
---------
Co-authored-by: CaliBrain <calibrain@l4n.xyz>
253 lines
16 KiB
HTML
253 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Calibre Web Book Downloader Application">
|
|
<meta name="theme-color" content="#333333">
|
|
<title>Calibre Web Book Downloader</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
|
<!-- Add favicon -->
|
|
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
<!-- UIkit CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/css/uikit.min.css" />
|
|
|
|
<!-- UIkit JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/js/uikit.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/js/uikit-icons.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="uk-flex uk-flex-between uk-flex-middle">
|
|
<h1 class="uk-heading-medium" style="color: white;">Book Search & Download</h1>
|
|
<div class="uk-margin-right">
|
|
{% if debug %}
|
|
<form action="/api/restart" method="get" style="display: inline;" id="restart-form">
|
|
<button class="uk-button uk-button-danger uk-margin-small-right" id="restart-button" type="submit">
|
|
RESTART <span uk-spinner="ratio: 0.8" class="uk-hidden" id="restart-spinner"></span>
|
|
</button>
|
|
</form>
|
|
<form action="/debug" method="get" style="display: inline;" id="debug-form">
|
|
<button class="uk-button uk-button-danger uk-margin-small-right" id="debug-button" type="submit">
|
|
DEBUG <span uk-spinner="ratio: 0.8" class="uk-hidden" id="debug-spinner"></span>
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
<button class="uk-button uk-button-default" type="button" id="theme-toggle">
|
|
<span uk-icon="icon: paint-bucket"></span>
|
|
<span id="theme-text">Theme</span>
|
|
</button>
|
|
<div uk-dropdown="mode: click">
|
|
<ul class="uk-nav uk-dropdown-nav">
|
|
<li><a href="#" data-theme="light">Light</a></li>
|
|
<li><a href="#" data-theme="dark">Dark</a></li>
|
|
<li><a href="#" data-theme="auto">Auto (System)</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="uk-container">
|
|
<!-- Search Section -->
|
|
<section class="uk-section-xxsmall uk-padding">
|
|
<div class="uk-container uk-width-expand">
|
|
<form class="uk-search uk-search-default uk-width-expand">
|
|
<input class="uk-search-input" type="search" placeholder="Search by ISBN, title, author..." aria-label="Search books" id="search-input">
|
|
<button class="uk-search-icon-flip" uk-search-icon id="search-button" type="button"></button>
|
|
</form>
|
|
<button class="uk-button uk-button-default uk-float-right" uk-toggle="target: #search-filters" type="button">Advanced Search</button>
|
|
<form hidden id="search-filters" class="uk-search uk-search-default uk-inline uk-width-expand uk-flex uk-flex-wrap">
|
|
<div class="search-filter">
|
|
<label for="isbn-input">ISBN</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<input class="uk-search-input uk-width-4-5" type="search" placeholder="ISBN..." aria-label="Search by ISBN" id="isbn-input">
|
|
</div>
|
|
</div>
|
|
<div class="search-filter">
|
|
<label for="author-input">Author</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<input class="uk-search-input uk-width-4-5" type="search" placeholder="Author..." aria-label="Search by author" id="author-input">
|
|
</div>
|
|
</div>
|
|
<div class="search-filter">
|
|
<label for="title-input">Title</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<input class="uk-search-input uk-width-4-5" type="search" placeholder="Title" aria-label="Search by title" id="title-input">
|
|
</div>
|
|
</div>
|
|
<div class="search-filter">
|
|
<label for="lang-input">Language</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<select class="uk-select uk-width-4-5" id="lang-input">
|
|
<option value="all">All</option>
|
|
{% for lang in book_languages %}
|
|
<option value="{{ lang.code }}"
|
|
{% if lang.code == default_language[0] %}selected{% endif %}>
|
|
{{ lang.language }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="search-filter">
|
|
<label for="sort-input">Sort</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<select class="uk-select uk-width-4-5" id="sort-input">
|
|
<option value="">Most relevant</option>
|
|
<option value="newest">Newest (publication year)</option>
|
|
<option value="oldest">Oldest (publication year)</option>
|
|
<option value="largest">Largest (filesize)</option>
|
|
<option value="smallest">Smallest (filesize)</option>
|
|
<option value="newest_added">Newest (open sourced)</option>
|
|
<option value="oldest_added">Oldest (open sourced)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="search-filter">
|
|
<label for="content-input">Content</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<select class="uk-select uk-width-4-5" id="content-input">
|
|
<option value="">All</option>
|
|
<option value="book_nonfiction">Book (non-fiction)</option>
|
|
<option value="book_fiction">Book (fiction)</option>
|
|
<option value="book_unknown">Book (unkown)</option>
|
|
<option value="magazine">Magazine</option>
|
|
<option value="book_comic">Comic Book</option>
|
|
<option value="standards_document">Standards document</option>
|
|
<option value="other">Other</option>
|
|
<option value="musical_score">Musical score</option>
|
|
<option value="audiobook">Audiobook</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="search-filter">
|
|
<label>Formats</label>
|
|
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
|
|
<label><input class="uk-checkbox" type="checkbox" id="format-pdf" value="pdf"> PDF</label>
|
|
<label><input class="uk-checkbox" type="checkbox" id="format-epub" value="epub" checked> EPUB</label>
|
|
<label><input class="uk-checkbox" type="checkbox" id="format-mobi" value="mobi" checked> MOBI</label>
|
|
<label><input class="uk-checkbox" type="checkbox" id="format-azw3" value="azw3" checked> AZW3</label>
|
|
<label><input class="uk-checkbox" type="checkbox" id="format-fb2" value="fb2" checked> FB2</label>
|
|
<label><input class="uk-checkbox" type="checkbox" id="format-djvu" value="djvu" checked> DJVU</label>
|
|
<label><input class="uk-checkbox" type="checkbox" id="format-cbz" value="cbz" checked> CBZ</label>
|
|
<label><input class="uk-checkbox" type="checkbox" id="format-cbr" value="cbr" checked> CBR</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-flex uk-margin-auto-top uk-margin-auto-left">
|
|
<button class="uk-button uk-button-default uk-margin-small-top" id="adv-search-button" type="button">Search</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Results Section -->
|
|
<ul uk-accordion="animation: false" id="results-section-accordion">
|
|
<li id="search-accordion">
|
|
<a class="uk-accordion-title" href><h1 class="uk-heading-xsmall">Search Results</h1></a>
|
|
<div class="uk-accordion-content">
|
|
<div id="search-loading" class="uk-flex uk-flex-center" role="status" hidden>
|
|
<div uk-spinner="ratio: 2"></div>
|
|
<span>Loading...</span>
|
|
</div>
|
|
<div class="results-content">
|
|
<button class="uk-button uk-button-primary uk-margin-small" id="download-selected-button" disabled>Download Selected</button>
|
|
<div class="uk-overflow-auto">
|
|
<table id="results-table" class="uk-table uk-table-hover uk-table-divider" role="grid">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<input type="checkbox" id="select-all-checkbox" class="uk-checkbox" />
|
|
</th>
|
|
<th scope="col" data-sort="index"># <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col">Preview</th>
|
|
<th scope="col" data-sort="title">Title <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="author">Author <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="publisher">Publisher <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="year">Year <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="language">Language <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="format">Format <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="size">Size <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Search results will be injected here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal-overlay" id="modal-overlay" role="dialog" aria-modal="true">
|
|
<div class="details-container" id="details-container">
|
|
<!-- Details will be dynamically injected here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Section -->
|
|
<ul uk-accordion="animation: false" id="status-section">
|
|
<li id="search-accordion">
|
|
<a class="uk-accordion-title" href><h1 class="uk-heading-xsmall">Download Queue & Status</h1></a>
|
|
<div class="uk-accordion-content">
|
|
<div id="status-loading" class="uk-flex uk-flex-center" role="status" hidden>
|
|
<div uk-spinner="ratio: 2"></div>
|
|
<span>Loading...</span>
|
|
</div>
|
|
<div class="status-content">
|
|
<div class="uk-overflow-auto">
|
|
<!-- Queue Management Controls -->
|
|
<div class="uk-margin-small-bottom">
|
|
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-middle">
|
|
<div class="uk-flex uk-flex-wrap uk-flex-middle">
|
|
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right" id="refresh-status-button">
|
|
<span uk-icon="icon: refresh"></span> Refresh
|
|
</button>
|
|
<button class="uk-button uk-button-secondary uk-button-small uk-margin-small-right" id="clear-completed-button">
|
|
<span uk-icon="icon: trash"></span> Clear Completed
|
|
</button>
|
|
<span class="uk-text-small uk-text-muted uk-margin-small-right" id="active-downloads-count">Active: 0</span>
|
|
</div>
|
|
<div class="uk-flex uk-flex-middle">
|
|
<label class="uk-text-small uk-margin-small-right">Max Concurrent:</label>
|
|
<span class="uk-text-small uk-text-bold" id="max-concurrent-display">3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table id="status-table" class="uk-table uk-table-hover uk-table-divider uk-table-small" role="grid">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Priority</th>
|
|
<th scope="col">Title</th>
|
|
<th scope="col">Progress</th>
|
|
<th scope="col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Search results will be injected here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<h1 class="uk-heading-xxsmall" style="color: white;">Calibre Web Book Downloader</h1>
|
|
<a href="https://github.com/calibrain/calibre-web-automated-book-downloader" class="uk-icon-link" uk-icon="icon:github; ratio: 2"></a>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
|
|
</body>
|
|
</html> |