danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #488 from arabcoders/dev

Browse source 
Add app manifest to allow the app to be installed
This commit is contained in:
Abdulmohsen 2025-11-13 23:36:14 +03:00 committed by GitHub
commit 59fe171a9d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 1343 additions and 343 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
API.md
View file

@ -81,6 +81,7 @@ This document describes the available endpoints and their usage. All endpoints r
- [Connection Events](#connection-events)
- [`connect` (Built-in)](#connect-built-in)
- [`disconnect` (Built-in)](#disconnect-built-in)
- [`configuration` (Server → Client)](#configuration-server--client)
- [`connected` (Server → Client)](#connected-server--client)
- [Subscription Events](#subscription-events)
- [`subscribe` (Client → Server)](#subscribe-client--server)
@ -442,22 +443,84 @@ or an error:
---
### GET /api/history
**Purpose**: Returns the download queue and the download history.
**Purpose**: Returns the download queue and/or download history with optional pagination support.
**Response**:
**Query Parameters**:
- `type` (optional): Type of items to return. Default: `all`
- `all` (default): Returns both queue and history (legacy behavior, no pagination)
- `queue`: Returns only queue items (with pagination)
- `done`: Returns only history items (with pagination)
- `page` (optional): Page number (1-indexed). Default: `1`. Only used when `type != all`
- `per_page` (optional): Items per page. Default: `config.default_pagination`, Max: `200`. Only used when `type != all`
- `order` (optional): Sort order. Default: `DESC`. Only used when `type != all`
- `DESC`: Newest items first (descending by creation date)
- `ASC`: Oldest items first (ascending by creation date)
**Response (when `type=all` or no type set)** - Legacy format:
```json
{
"queue": [
{ ... },
{
"id": "abc123",
"url": "https://example.com/video",
"title": "Video Title",
"status": "downloading",
...
},
...
],
"history": [
{ ... },
{
"id": "def456",
"url": "https://example.com/video2",
"title": "Completed Video",
"status": "finished",
...
},
...
]
}
```
**Response (when `type=queue` or `type=done`)** - Paginated format:
```json
{
"pagination": {
"page": 1,
"per_page": 50,
"total": 1234,
"total_pages": 25,
"has_next": true,
"has_prev": false
},
"items": [
{
"id": "abc123",
"url": "https://example.com/video",
"title": "Video Title",
"status": "finished",
...
},
...
]
}
```
**Error Responses**:
- `400 Bad Request` if parameters are invalid:
```json
{ "error": "type must be one of all, queue, done." }
{ "error": "page must be >= 1." }
{ "error": "per_page must be between 1 and 1000." }
{ "error": "order must be ASC or DESC." }
{ "error": "page and per_page must be valid integers." }
```
**Notes**:
- The `type=all` behavior is considered legacy and will be removed in future versions
- For large datasets, use paginated requests (`type=queue` or `type=done`) for better performance
- The `items` array contains ItemDTO objects serialized to JSON
---
### DELETE /api/history/{id}/archive
@ -1671,25 +1734,35 @@ Fired when WebSocket connection is closed. No data payload.
socket.on('disconnect', (reason: string) => console.log('WebSocket disconnected:', reason));
```
##### `connected` (Server → Client)
Initial connection event with full application state.
##### `configuration` (Server → Client)
Sends the current application configuration.
**Data Fields**:
- `config`: Global configuration object
- `queue`: Current download queue (array of items)
- `done`: Download history (array of completed items)
- `tasks`: Scheduled tasks
- `presets`: Available download presets
- `dl_fields`: Available download fields
- `folders`: Directory structure for downloads
- `paused`: Queue pause status (boolean)
**Example**:
```typescript
socket.on('connected', (data: string) => {
const json = JSON.parse(data);
console.log('Current configuration:', json.data.config);
});
```
##### `connected` (Server → Client)
When a client connects, this events sends the folder and current queue.
**Data Fields**:
- `queue`: Current download queue (array of items)
- `folders`: Directory structure for downloads
**Example**:
```typescript
socket.on('connected', (data: string) => {
const json = JSON.parse(data);
const queueItems = json.data.queue || {};
const historyItems = json.data.done || {};
console.log('Connected with', Object.keys(queueItems).length, 'queued downloads');
});
```

1
FAQ.md
View file

@ -48,6 +48,7 @@ or the `environment:` section in `compose.yaml` file.
| YTP_SIMPLE_MODE | Switch default interface to Simple mode. | `false` |
| YTP_STATIC_UI_PATH | Path to custom static UI files. | `(not_set)` |
| YTP_AUTO_CLEAR_HISTORY_DAYS | Number of days after which completed download history is cleared. | `0` |
| YTP_DEFAULT_PAGINATION | The default number of items per page for history. | `50` |
> [!NOTE]
> To raise the maximum workers for specific extractor, you need to add a ENV variable that follows the pattern `YTP_MAX_WORKERS_FOR_<EXTRACTOR_NAME>`.

82
app/library/DataStore.py
View file

@ -179,6 +179,88 @@ class DataStore:
self._connection.execute('SELECT "id" FROM "history" LIMIT 1').fetchone()
return True
def get_total_count(self) -> int:
"""
Get the total count of items in the datastore.
Returns:
int: The total number of items in the datastore.
"""
cursor = self._connection.execute(
'SELECT COUNT(*) as count FROM "history" WHERE "type" = ?',
(str(self._type),),
)
row = cursor.fetchone()
return row["count"] if row else 0
def get_items_paginated(
self,
page: int = 1,
per_page: int = 50,
order: str = "DESC",
) -> tuple[list[tuple[str, ItemDTO]], int, int, int]:
"""
Get paginated items from the datastore.
Args:
page (int): The page number (1-indexed). Defaults to 1.
per_page (int): Number of items per page. Defaults to 50.
order (str): Sort order - 'ASC' or 'DESC'. Defaults to 'DESC' (newest first).
Returns:
tuple[list[tuple[str, ItemDTO]], int, int, int]: A tuple containing:
- List of (id, ItemDTO) tuples for the requested page
- Total number of items
- Current page number
- Total number of pages
Raises:
ValueError: If page < 1 or per_page < 1
"""
if page < 1:
msg = "page must be >= 1"
raise ValueError(msg)
if per_page < 1:
msg = "per_page must be >= 1"
raise ValueError(msg)
order = order.upper()
if order not in ("ASC", "DESC"):
msg = f"order must be 'ASC' or 'DESC', got '{order}'"
raise ValueError(msg)
order = "ASC" if order == "ASC" else "DESC"
total_items = self.get_total_count()
total_pages = (total_items + per_page - 1) // per_page if total_items > 0 else 1
# Ensure page is within valid range.
if page > total_pages and total_items > 0:
page = total_pages
offset = (page - 1) * per_page
items: list[tuple[str, ItemDTO]] = []
cursor = self._connection.execute(
f'SELECT "id", "data", "created_at" FROM "history" WHERE "type" = ? ORDER BY "created_at" {order} LIMIT ? OFFSET ?', # noqa: S608
(str(self._type), per_page, offset),
)
for row in cursor:
rowDate: datetime = datetime.strptime(row["created_at"], "%Y-%m-%d %H:%M:%S") # noqa: DTZ007
data: dict = json.loads(row["data"])
data.pop("_id", None)
item: ItemDTO = init_class(ItemDTO, data)
item._id = row["id"]
item.datetime = formatdate(rowDate.replace(tzinfo=UTC).timestamp())
items.append((row["id"], item))
return items, total_items, page, total_pages
def _update_store_item(self, type: StoreType, item: ItemDTO) -> None:
sqlStatement = """
INSERT INTO "history" ("id", "type", "url", "data")

5
app/library/config.py
View file

@ -195,6 +195,9 @@ class Config(metaclass=Singleton):
auto_clear_history_days: int = 0
"""Number of days after which completed download history is automatically cleared. 0 to disable."""
default_pagination: int = 50
"""The default number of items per page for pagination."""
pictures_backends: list[str] = [
"https://unsplash.it/1920/1080?random",
"https://picsum.photos/1920/1080",
@ -234,6 +237,7 @@ class Config(metaclass=Singleton):
"download_path_depth",
"download_info_expires",
"auto_clear_history_days",
"default_pagination",
)
"The variables that are integers."
@ -281,6 +285,7 @@ class Config(metaclass=Singleton):
"app_commit_sha",
"app_build_date",
"app_branch",
"default_pagination",
)
"The variables that are relevant to the frontend."

2
app/routes/api/_static.py
View file

@ -19,6 +19,7 @@ EXT_TO_MIME: dict = {
".js": "application/javascript",
".json": "application/json",
".ico": "image/x-icon",
".webmanifest": "application/manifest+json",
}
FRONTEND_ROUTES: list[str] = [
@ -35,7 +36,6 @@ FRONTEND_ROUTES: list[str] = [
"/browser/{path:.*}",
]
async def serve_static_file(request: Request, config: Config) -> Response:
"""
Preload static files from the ui/exported folder.

77
app/routes/api/history.py
View file

@ -5,6 +5,7 @@ from typing import TYPE_CHECKING
from aiohttp import web
from aiohttp.web import Request, Response
from app.library.config import Config
from app.library.Download import Download
from app.library.DownloadQueue import DownloadQueue
from app.library.encoder import Encoder
@ -20,23 +21,85 @@ LOG: logging.Logger = logging.getLogger(__name__)
@route("GET", r"api/history/", "items_list")
async def items_list(queue: DownloadQueue, encoder: Encoder) -> Response:
async def items_list(request: Request, queue: DownloadQueue, encoder: Encoder, config: Config) -> Response:
"""
Get the history.
Get the history with optional pagination support.
Args:
request (Request): The request object.
queue (DownloadQueue): The download queue instance.
encoder (Encoder): The encoder instance.
config (Config): The configuration instance.
Returns:
Response: The response object.
"""
data: dict = {"queue": [], "history": []}
q = queue.get()
Query Parameters:
type (str): Type of items to return - "all", "queue", or "done". Default: "all"
page (int): Page number for pagination (1-indexed). Only used when type != "all"
per_page (int): Items per page. Default: 50, Max: 1000. Only used when type != "all"
order (str): Sort order - "ASC" or "DESC". Default: "DESC". Only used when type != "all"
data["queue"].extend([q.get("queue", {}).get(k) for k in q.get("queue", {})])
data["history"].extend([q.get("done", {}).get(k) for k in q.get("done", {})])
"""
from app.library.DataStore import StoreType
store_type = request.query.get("type", "all").lower()
stores: list[str] = ["all", StoreType.QUEUE.value, StoreType.HISTORY.value]
if store_type not in stores:
return web.json_response(
data={"error": f"type must be one of {', '.join(stores)}."},
status=web.HTTPBadRequest.status_code,
)
# Legacy behavior: return all items without pagination, will be removed in future.
if "all" == store_type:
data: dict = {"queue": [], "history": []}
q = queue.get()
data["queue"].extend([q.get("queue", {}).get(k) for k in q.get("queue", {})])
data["history"].extend([q.get("done", {}).get(k) for k in q.get("done", {})])
return web.json_response(data=data, status=web.HTTPOk.status_code, dumps=encoder.encode)
ds = queue.queue if store_type == StoreType.QUEUE.value else queue.done
try:
page = int(request.query.get("page", 1))
per_page = int(request.query.get("per_page", config.default_pagination))
order = request.query.get("order", "DESC").upper()
except ValueError:
return web.json_response(
data={"error": "page and per_page must be valid integers."},
status=web.HTTPBadRequest.status_code,
)
if page < 1:
return web.json_response(data={"error": "page must be >= 1."}, status=web.HTTPBadRequest.status_code)
if per_page < 1 or per_page > 1000:
return web.json_response(
data={"error": "per_page must be between 1 and 1000."},
status=web.HTTPBadRequest.status_code,
)
if order not in ("ASC", "DESC"):
return web.json_response(
data={"error": "order must be ASC or DESC."},
status=web.HTTPBadRequest.status_code,
)
items, total, current_page, total_pages = ds.get_items_paginated(page=page, per_page=per_page, order=order)
data = {
"pagination": {
"page": current_page,
"per_page": per_page,
"total": total,
"total_pages": total_pages,
"has_next": current_page < total_pages,
"has_prev": current_page > 1,
},
"items": [item for _, item in items],
}
return web.json_response(data=data, status=web.HTTPOk.status_code, dumps=encoder.encode)

3
app/routes/socket/connection.py
View file

@ -44,7 +44,8 @@ async def connect(config: Config, queue: DownloadQueue, notify: EventBus, sid: s
base=Path(config.download_path),
depth_limit=config.download_path_depth - 1,
),
**queue.get(),
"history_count": queue.done.get_total_count(),
**queue.get()["queue"],
},
title="Sending initial download data",
message=f"Sending initial download data to client '{sid}'.",

252
app/tests/test_datastore_pagination.py Normal file
View file

@ -0,0 +1,252 @@
import json
import sqlite3
from datetime import UTC, datetime
from pathlib import Path
from tempfile import TemporaryDirectory
import pytest
from app.library.DataStore import DataStore, StoreType
from app.library.ItemDTO import ItemDTO
class TestDataStorePagination:
"""Test pagination functionality of DataStore."""
@pytest.fixture
def temp_db(self):
"""Create a temporary database with test data."""
with TemporaryDirectory() as tmpdir:
db_path = Path(tmpdir) / "test.db"
conn = sqlite3.connect(str(db_path))
conn.row_factory = sqlite3.Row
# Create the history table
conn.execute(
"""
CREATE TABLE IF NOT EXISTS "history" (
"id" TEXT PRIMARY KEY,
"type" TEXT NOT NULL,
"url" TEXT NOT NULL,
"data" TEXT NOT NULL,
"created_at" TEXT NOT NULL
)
"""
)
# Insert test data
base_time = datetime.now(UTC)
for i in range(100):
created_at = base_time.replace(
hour=(i // 4) % 24, minute=(i * 15) % 60, second=i % 60
).strftime("%Y-%m-%d %H:%M:%S")
item_data = {
"url": f"https://example.com/video{i}",
"title": f"Test Video {i}",
"id": f"video{i}",
"folder": "/downloads",
"status": "finished",
}
conn.execute(
'INSERT INTO "history" ("id", "type", "url", "data", "created_at") VALUES (?, ?, ?, ?, ?)',
(
f"test-id-{i}",
str(StoreType.HISTORY),
item_data["url"],
json.dumps(item_data),
created_at,
),
)
conn.commit()
yield conn
conn.close()
def test_get_total_count(self, temp_db):
"""Test getting total count of items."""
datastore = DataStore(type=StoreType.HISTORY, connection=temp_db)
count = datastore.get_total_count()
assert count == 100
def test_pagination_basic(self, temp_db):
"""Test basic pagination functionality."""
datastore = DataStore(type=StoreType.HISTORY, connection=temp_db)
# Get first page
items, total, page, total_pages = datastore.get_items_paginated(page=1, per_page=10)
assert len(items) == 10
assert total == 100
assert page == 1
assert total_pages == 10
# Verify items are ItemDTO instances
for _item_id, item in items:
assert isinstance(item, ItemDTO)
assert item._id.startswith("test-id-")
def test_pagination_last_page(self, temp_db):
"""Test pagination on last page."""
datastore = DataStore(type=StoreType.HISTORY, connection=temp_db)
# Get last page
items, total, page, total_pages = datastore.get_items_paginated(page=10, per_page=10)
assert len(items) == 10
assert total == 100
assert page == 10
assert total_pages == 10
def test_pagination_partial_page(self, temp_db):
"""Test pagination with partial last page."""
datastore = DataStore(type=StoreType.HISTORY, connection=temp_db)
# Get items with per_page that doesn't divide evenly
items, total, page, total_pages = datastore.get_items_paginated(page=4, per_page=30)
assert len(items) == 10 # 100 items / 30 per page = 3 full pages + 10 items
assert total == 100
assert page == 4
assert total_pages == 4
def test_pagination_out_of_range(self, temp_db):
"""Test pagination with page number out of range."""
datastore = DataStore(type=StoreType.HISTORY, connection=temp_db)
# Request page beyond total pages - should return last page
items, total, page, total_pages = datastore.get_items_paginated(page=999, per_page=10)
assert len(items) == 10
assert total == 100
assert page == 10 # Adjusted to last page
assert total_pages == 10
def test_pagination_order_desc(self, temp_db):
"""Test pagination with descending order (newest first)."""
datastore = DataStore(type=StoreType.HISTORY, connection=temp_db)
items, _, _, _ = datastore.get_items_paginated(page=1, per_page=5, order="DESC")
assert len(items) == 5
# Verify order - should be newest to oldest
# (note: exact order depends on the timestamp generation in fixture)
def test_pagination_order_asc(self, temp_db):
"""Test pagination with ascending order (oldest first)."""
datastore = DataStore(type=StoreType.HISTORY, connection=temp_db)
items, _, _, _ = datastore.get_items_paginated(page=1, per_page=5, order="ASC")
assert len(items) == 5
def test_pagination_invalid_page(self, temp_db):
"""Test pagination with invalid page number."""
datastore = DataStore(type=StoreType.HISTORY, connection=temp_db)
with pytest.raises(ValueError, match="page must be >= 1"):
datastore.get_items_paginated(page=0, per_page=10)
with pytest.raises(ValueError, match="page must be >= 1"):
datastore.get_items_paginated(page=-1, per_page=10)
def test_pagination_invalid_per_page(self, temp_db):
"""Test pagination with invalid per_page value."""
datastore = DataStore(type=StoreType.HISTORY, connection=temp_db)
with pytest.raises(ValueError, match="per_page must be >= 1"):
datastore.get_items_paginated(page=1, per_page=0)
with pytest.raises(ValueError, match="per_page must be >= 1"):
datastore.get_items_paginated(page=1, per_page=-10)
def test_pagination_invalid_order(self, temp_db):
"""Test pagination with invalid order parameter."""
datastore = DataStore(type=StoreType.HISTORY, connection=temp_db)
with pytest.raises(ValueError, match="order must be 'ASC' or 'DESC'"):
datastore.get_items_paginated(page=1, per_page=10, order="INVALID")
def test_pagination_empty_store(self):
"""Test pagination with empty datastore."""
with TemporaryDirectory() as tmpdir:
db_path = Path(tmpdir) / "empty.db"
conn = sqlite3.connect(str(db_path))
conn.row_factory = sqlite3.Row
# Create empty table
conn.execute(
"""
CREATE TABLE IF NOT EXISTS "history" (
"id" TEXT PRIMARY KEY,
"type" TEXT NOT NULL,
"url" TEXT NOT NULL,
"data" TEXT NOT NULL,
"created_at" TEXT NOT NULL
)
"""
)
conn.commit()
datastore = DataStore(type=StoreType.HISTORY, connection=conn)
items, total, page, total_pages = datastore.get_items_paginated(page=1, per_page=10)
assert len(items) == 0
assert total == 0
assert page == 1
assert total_pages == 1
conn.close()
def test_pagination_single_item(self):
"""Test pagination with single item."""
with TemporaryDirectory() as tmpdir:
db_path = Path(tmpdir) / "single.db"
conn = sqlite3.connect(str(db_path))
conn.row_factory = sqlite3.Row
# Create table with single item
conn.execute(
"""
CREATE TABLE IF NOT EXISTS "history" (
"id" TEXT PRIMARY KEY,
"type" TEXT NOT NULL,
"url" TEXT NOT NULL,
"data" TEXT NOT NULL,
"created_at" TEXT NOT NULL
)
"""
)
item_data = {
"url": "https://example.com/single",
"title": "Single Video",
"id": "single-video",
"folder": "/downloads",
"status": "finished",
}
conn.execute(
'INSERT INTO "history" ("id", "type", "url", "data", "created_at") VALUES (?, ?, ?, ?, ?)',
(
"single-id",
str(StoreType.HISTORY),
item_data["url"],
json.dumps(item_data),
datetime.now(UTC).strftime("%Y-%m-%d %H:%M:%S"),
),
)
conn.commit()
datastore = DataStore(type=StoreType.HISTORY, connection=conn)
items, total, page, total_pages = datastore.get_items_paginated(page=1, per_page=10)
assert len(items) == 1
assert total == 1
assert page == 1
assert total_pages == 1
conn.close()

32
ui/app/components/FloatingImage.vue
View file

@ -2,19 +2,26 @@
<vTooltip @show="loadContent" @hide="stopTimer">
<slot />
<template #popper>
<span class="icon" v-if="!url"><i class="fas fa-circle-notch fa-spin" /></span>
<div v-else>
<div style="min-width: 300px; width: 25vw; height: auto;" class="m-1">
<div class="is-block" style="word-break: all;" v-if="props.title">
<span style="font-size: 120%;">{{ props.title }}</span>
<template v-if="error_msg">
<Message message_class="is-danger" :newStyle="true">
{{ error_msg }}
</Message>
</template>
<template v-else>
<span class="icon" v-if="!url"><i class="fas fa-circle-notch fa-spin" /></span>
<div v-else>
<div style="min-width: 300px; width: 25vw; height: auto;" class="m-1">
<div class="is-block" style="word-break: all;" v-if="props.title">
<span style="font-size: 120%;">{{ props.title }}</span>
</div>
<figure :class="['image', thumbnail_ratio, 'is-hidden-mobile']">
<img @load="e => pImg(e)" :src="url" :alt="props.title" @error="clearCache"
:crossorigin="props.privacy ? 'anonymous' : 'use-credentials'"
:referrerpolicy="props.privacy ? 'no-referrer' : 'origin'" />
</figure>
</div>
<figure :class="['image', thumbnail_ratio, 'is-hidden-mobile']">
<img @load="e => pImg(e)" :src="url" :alt="props.title" @error="clearCache"
:crossorigin="props.privacy ? 'anonymous' : 'use-credentials'"
:referrerpolicy="props.privacy ? 'no-referrer' : 'origin'" />
</figure>
</div>
</div>
</template>
</template>
</vTooltip>
</template>
@ -36,6 +43,7 @@ const thumbnail_ratio = useStorage<'is-16by9' | 'is-3by1'>('thumbnail_ratio', 'i
const url = ref<string | null>(null)
const error = ref(false)
const isPreloading = ref(false)
const error_msg = ref<string | null>(null)
const loadTimer: ReturnType<typeof setTimeout> | null = null
const cancelRequest = new AbortController()
@ -54,7 +62,7 @@ const defaultLoader = async (): Promise<void> => {
const response = await request(props.image, { signal: cancelRequest.signal })
if (!response.ok) {
toast.error(`ImageView Request error. ${response.status}: ${response.statusText}`)
error_msg.value = `ImageView Request error. ${response.status}: ${response.statusText}`
return
}

138
ui/app/components/History.vue
View file

@ -5,7 +5,8 @@
<i :class="showCompleted ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
</span>
<span>
History <span v-if="hasItems">({{ stateStore.count('history') }})</span>
History
<span v-if="stateStore.count('history')">({{ stateStore.count('history') }})</span>
<span v-if="selectedElms.length > 0">&nbsp;- Selected: {{ selectedElms.length }}</span>
</span>
</span>
@ -77,6 +78,34 @@
</span>
</button>
</div>
<div class="column is-1-tablet">
<button type="button" class="button is-info is-fullwidth" @click="() => stateStore.reloadCurrentPage('history')"
:disabled="paginationInfo.isLoading" :class="{ 'is-loading': paginationInfo.isLoading }">
<span class="icon-text is-block">
<span class="icon"><i class="fas fa-refresh" /></span>
</span>
</button>
</div>
</div>
<div class="columns is-multiline" v-if="paginationInfo.isLoading && !hasItems">
<div class="column is-12">
<div class="message is-info">
<div class="message-body">
<span class="icon-text">
<span class="icon"> <i class="fa-solid fa-spinner fa-spin fa-2x" /> </span>
<span class="ml-3">Loading history...</span>
</span>
</div>
</div>
</div>
</div>
<div class="columns is-multiline" v-if="paginationInfo.isLoaded && paginationInfo.total_pages > 1">
<div class="column is-12 has-text-centered">
<Pager :page="paginationInfo.page" :last_page="paginationInfo.total_pages" :isLoading="paginationInfo.isLoading"
@navigate="navigateToPage" />
</div>
</div>
<div class="columns is-multiline" v-if="'list' === display_style">
@ -410,19 +439,30 @@
</LateLoader>
</div>
<div class="columns is-multiline" v-if="!hasItems">
<div class="columns is-multiline" v-if="!hasItems && !paginationInfo.isLoading">
<div class="column is-12">
<Message message_class="has-background-warning-90 has-text-dark" title="No results for downloaded items."
icon="fas fa-search" :useClose="true" @close="() => emitter('clear_search')" v-if="query">
<Message message_class="is-warning" title="Filter items" icon="fas fa-search" :useClose="true"
@close="() => emitter('clear_search')" v-if="query" :newStyle="true">
<span class="is-block">No results found for '<span class="is-underlined is-bold">{{ query }}</span>'.</span>
</Message>
<Message message_class="has-background-success-90 has-text-dark" title="No records in history."
icon="fas fa-circle-check" v-else-if="socket.isConnected" />
<Message message_class="is-warning" title="Page is empty." icon="fas fa-exclamation-triangle"
v-else-if="socket.isConnected && paginationInfo.total" :new-style="true">
<span class="is-block">The current page has no items. Try navigating to a different page.</span>
</Message>
<Message message_class="is-success" title="No records in history."
icon="fas fa-circle-check" v-else-if="socket.isConnected" :new-style="true" />
<Message message_class="has-background-info-90 has-text-dark" title="Connecting.." icon="fas fa-spinner fa-spin"
v-else />
</div>
</div>
<div class="columns is-multiline" v-if="paginationInfo.isLoaded && paginationInfo.total_pages > 1">
<div class="column is-12 has-text-centered">
<Pager :page="paginationInfo.page" :last_page="paginationInfo.total_pages" :isLoading="paginationInfo.isLoading"
@navigate="navigateToPage" />
</div>
</div>
<div class="modal is-active" v-if="video_item">
<div class="modal-background" @click="closeVideo"></div>
<div class="modal-content is-unbounded-model">
@ -495,6 +535,92 @@ const dialog_confirm = ref<{
options: [],
})
const paginationInfo = computed(() => stateStore.getPagination())
const route = useRoute()
const router = useRouter()
const currentPageFromUrl = computed(() => {
const pageParam = route.query.page
if (!pageParam) {
return 1
}
const pageStr = Array.isArray(pageParam) ? pageParam[0] : pageParam
if (!pageStr) {
return 1
}
const page = parseInt(pageStr, 10)
return isNaN(page) || page < 1 ? 1 : page
})
const navigateToPage = async (page: number) => {
if (page < 1 || page > paginationInfo.value.total_pages || paginationInfo.value.isLoading) {
return
}
try {
await router.push({ query: { ...route.query, page: page.toString() } })
await stateStore.loadPaginated('history', page, config.app.default_pagination, 'DESC')
} catch (error) {
console.error('Failed to navigate to page:', error)
toast.error('Failed to load page')
}
}
watch(showCompleted, async isShown => {
if (isShown && !paginationInfo.value.isLoaded && socket.isConnected) {
try {
const pageToLoad = currentPageFromUrl.value
await stateStore.loadPaginated('history', pageToLoad, config.app.default_pagination, 'DESC')
} catch (error) {
console.error('Failed to load history:', error)
}
}
})
watch(() => route.query.page, async newPage => {
if (!showCompleted.value || !paginationInfo.value.isLoaded) {
return
}
const pageStr = newPage ? (Array.isArray(newPage) ? newPage[0] : newPage) : undefined
const page = pageStr ? parseInt(pageStr, 10) : 1
if (isNaN(page) || page < 1) {
return
}
if (page !== paginationInfo.value.page) {
try {
await stateStore.loadPaginated('history', page, config.app.default_pagination, 'DESC')
} catch (error) {
console.error('Failed to load page from URL:', error)
}
}
})
onMounted(async () => {
if (showCompleted.value && !paginationInfo.value.isLoaded && socket.isConnected) {
try {
const pageToLoad = currentPageFromUrl.value
await stateStore.loadPaginated('history', pageToLoad, config.app.default_pagination, 'DESC')
} catch (error) {
console.error('Failed to load history on mount:', error)
toast.error('Failed to load history')
}
}
})
watch(() => socket.isConnected, async connected => {
if (connected && showCompleted.value && !paginationInfo.value.isLoaded) {
try {
const pageToLoad = currentPageFromUrl.value
await stateStore.loadPaginated('history', pageToLoad, config.app.default_pagination, 'DESC')
} catch (error) {
console.error('Failed to load history after socket connection:', error)
}
}
})
const showThumbnails = computed(() => (props.thumbnails ?? true) && !hideThumbnail.value)
const playVideo = (item: StoreItem) => { video_item.value = item }

72
ui/app/components/Message.vue
View file

@ -1,45 +1,65 @@
<template>
<div class="notification" :class="props.message_class">
<button class="delete" @click="emit('close')" v-if="!props.useToggle && props.useClose"></button>
<div @click="emit('toggle')" class="is-clickable is-pulled-right is-unselectable" v-if="props.useToggle">
<div :class="[newStyle ? 'message' : 'notification', message_class]">
<button class="delete" @click="$emit('close')" v-if="!useToggle && useClose && !newStyle"></button>
<div @click="$emit('toggle')" class="is-clickable is-pulled-right is-unselectable" v-if="useToggle">
<span class="icon">
<i class="fas" :class="{ 'fa-arrow-up': props.toggle, 'fa-arrow-down': !props.toggle }"></i>
<i class="fas" :class="{'fa-arrow-up':toggle,'fa-arrow-down':!toggle}"></i>
</span>
<span>{{ props.toggle ? 'Close' : 'Open' }}</span>
<span>{{ toggle ? 'Close' : 'Open' }}</span>
</div>
<div class="notification-title is-unselectable" :class="{ 'is-clickable': props.useToggle }"
v-if="props.title || props.icon" @click="props.useToggle ? emit('toggle', props.toggle) : null">
<template v-if="props.icon">
<div class="is-unselectable"
:class="{'is-clickable':useToggle, 'notification-title': !newStyle, 'message-header': newStyle}"
v-if="title || icon"
@click="true === useToggle ? $emit('toggle', toggle): null">
<template v-if="icon">
<span class="icon-text">
<span class="icon"><i :class="props.icon"></i></span>
<span>{{ props.title }}</span>
<span class="icon"><i :class="icon"></i></span>
<span>{{ title }}</span>
</span>
</template>
<template v-else>{{ props.title }}</template>
<template v-else>{{ title }}</template>
<button class="delete" @click="$emit('close')" v-if="!useToggle && useClose && newStyle"/>
</div>
<div class="notification-content content" v-if="!props.useToggle || props.toggle">
<template v-if="props.message">{{ props.message }}</template>
<slot />
<div class="content is-text-break" v-if="false === useToggle || toggle"
:class="{'notification-body': !newStyle, 'message-body': newStyle}">
<template v-if="message">{{ message }}</template>
<slot/>
</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps < {
title?: string
icon?: string
message?: string
withDefaults(defineProps<{
/** Title text for the notification */
title?: string | null
/** Icon class for the notification */
icon?: string | null
/** Main message content */
message?: string | null
/** CSS class for the notification */
message_class?: string
/** If true, show toggle button */
useToggle?: boolean
/** Current toggle state */
toggle?: boolean
useClose?: boolean
} > ()
/** If true, show close button */
useClose?: boolean,
newStyle?: boolean
}>(), {
title: null,
icon: null,
message: null,
message_class: 'is-info',
useToggle: false,
toggle: false,
useClose: false,
newStyle: false
})
const emit = defineEmits < {
(e: 'toggle', value ?: boolean): void
defineEmits<{
/** Emitted when the toggle button is clicked */
(e: 'toggle', value?: boolean): void
/** Emitted when the close button is clicked */
(e: 'close'): void
}> ()
}>()
</script>

9
ui/app/components/NewDownload.vue
View file

@ -139,10 +139,11 @@
<div class="field">
<label class="label is-unselectable" for="ytdlpCookies">
<span class="icon"><i class="fa-solid fa-cookie" /></span>
<span>Cookies</span>
<span>Cookies - <NuxtLink @click="cookiesDropzoneRef?.triggerFileSelect()">Upload file</NuxtLink>
</span>
</label>
<TextDropzone id="ytdlpCookies" v-model="form.cookies" :disabled="!socket.isConnected || addInProgress"
@error="(msg: string) => toast.error(msg)"
<TextDropzone ref="cookiesDropzoneRef" id="ytdlpCookies" v-model="form.cookies"
:disabled="!socket.isConnected || addInProgress" @error="(msg: string) => toast.error(msg)"
:placeholder="getDefault('cookies', 'Leave empty to use default cookies. Or drag & drop a cookie file here.')" />
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
@ -255,6 +256,7 @@
import 'assets/css/bulma-switch.css'
import { useStorage } from '@vueuse/core'
import TextareaAutocomplete from '~/components/TextareaAutocomplete.vue'
import TextDropzone from '~/components/TextDropzone.vue'
import type { item_request } from '~/types/item'
import type { AutoCompleteOptions } from '~/types/autocomplete'
import { navigateTo } from '#app'
@ -284,6 +286,7 @@ const showTestResults = ref<boolean>(false)
const testResultsData = ref<any>(null)
const dlFieldsExtra = ['--no-download-archive']
const ytDlpOpt = ref<AutoCompleteOptions>([])
const cookiesDropzoneRef = ref<InstanceType<typeof TextDropzone> | null>(null)
const form = useStorage<item_request>('local_config_v1', {
id: null,

70
ui/app/components/Pager.vue Normal file
View file

@ -0,0 +1,70 @@
<template>
<div class="field is-grouped">
<div class="control">
<button rel="first" class="button" v-if="page !== 1" @click="changePage(1)" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-angle-double-left"></i></span>
</button>
</div>
<div class="control">
<button rel="prev" class="button" v-if="page > 1 && (page-1) !== 1" @click="changePage(page-1)"
:disabled="isLoading" :class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-angle-left"></i></span>
</button>
</div>
<div class="control">
<div class="select">
<select id="pager_list" v-model="currentPage" @change="changePage(currentPage)" :disabled="isLoading">
<option v-for="(item, index) in makePagination(page, last_page)" :key="`pager-${index}`"
:value="item.page" :disabled="0 === item.page">
{{ item.text }}
</option>
</select>
</div>
</div>
<div class="control">
<button rel="next" class="button" v-if="page !== last_page && ( page + 1 ) !== last_page"
@click="changePage( page + 1 )" :disabled="isLoading" :class="{ 'is-loading': isLoading }">
<span class="icon"><i class="fas fa-angle-right"></i></span>
</button>
</div>
<div class="control">
<button rel="last" class="button" v-if="page !== last_page" @click="changePage(last_page)"
:disabled="isLoading" :class="{ 'is-loading': isLoading }">
<span class="icon"><i class="fas fa-angle-double-right"></i></span>
</button>
</div>
</div>
</template>
<script setup>
import {makePagination} from '~/utils/index'
const emitter = defineEmits(['navigate'])
const props = defineProps({
page: {
type: Number,
required: true
},
last_page: {
type: Number,
required: true
},
isLoading: {
type: Boolean,
required: false,
default: false
},
})
const changePage = p => {
if (p < 1 || p > props.last_page) {
return
}
emitter('navigate', p)
currentPage.value = p
}
const currentPage = ref(props.page)
</script>

7
ui/app/components/PresetForm.vue
View file

@ -165,10 +165,10 @@
<div class="field">
<label class="label is-inline" for="cookies" v-tooltip="'Netscape HTTP Cookie format.'">
<span class="icon"><i class="fa-solid fa-cookie" /></span>
Cookies
Cookies - <NuxtLink @click="cookiesDropzoneRef?.triggerFileSelect()">Upload file</NuxtLink>
</label>
<div class="control">
<TextDropzone id="cookies" v-model="form.cookies" :disabled="addInProgress"
<TextDropzone ref="cookiesDropzoneRef" id="cookies" v-model="form.cookies" :disabled="addInProgress"
@error="(msg: string) => toast.error(msg)"
placeholder="Leave empty to use default cookies. Or drag & drop a cookie file here." />
</div>
@ -234,6 +234,8 @@
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import TextareaAutocomplete from '~/components/TextareaAutocomplete.vue'
import TextDropzone from '~/components/TextDropzone.vue'
import type { AutoCompleteOptions } from '~/types/autocomplete';
import type { Preset, PresetImport } from '~/types/presets'
@ -257,6 +259,7 @@ const showImport = useStorage<boolean>('showImport', false)
const selected_preset = ref<string>('')
const showOptions = ref<boolean>(false)
const ytDlpOpt = ref<AutoCompleteOptions>([])
const cookiesDropzoneRef = ref<InstanceType<typeof TextDropzone> | null>(null)
watch(() => config.ytdlp_options, newOptions => ytDlpOpt.value = newOptions
.filter(opt => !opt.ignored)

9
ui/app/components/TextDropzone.vue
View file

@ -221,6 +221,15 @@ const readFileAsText = (file: File): Promise<string> => {
reader.readAsText(file)
})
}
const triggerFileSelect = (): void => {
if (props.disabled) {
return
}
fileInputRef.value?.click()
}
defineExpose({ triggerFileSelect })
</script>
<style>

94
ui/app/composables/useNotification.ts
View file

@ -2,8 +2,9 @@ import { useStorage } from '@vueuse/core'
import { POSITION, useToast } from "vue-toastification"
export type notificationType = 'info' | 'success' | 'warning' | 'error'
export type notificationTarget = 'toast' | 'browser'
export interface Notification {
export interface notification {
id: string;
message: string
level: notificationType
@ -25,9 +26,77 @@ export interface notificationOptions {
const allowToast = useStorage<boolean>('allow_toasts', true)
const toastPosition = useStorage<POSITION>('toast_position', POSITION.TOP_RIGHT)
const toastDismissOnClick = useStorage<boolean>('toast_dismiss_on_click', true)
const toastTarget = useStorage<notificationTarget>('toast_target', 'toast')
const toast = useToast()
function notify(type: notificationType, message: string, opts?: notificationOptions): void {
const requestBrowserPermission = async (): Promise<NotificationPermission> => {
if (!('Notification' in window)) {
return 'denied'
}
if (Notification.permission === 'granted') {
return 'granted'
}
if (Notification.permission !== 'denied') {
return await Notification.requestPermission()
}
return Notification.permission
}
const sendMessage = (type: notificationType, id: string, message: string, opts?: notificationOptions): void => {
const notificationStore = useNotificationStore()
const useToastNotification = !window.isSecureContext || 'toast' === toastTarget.value ||
!('Notification' in window) || 'granted' !== Notification.permission;
console.log('useToastNotification', useToastNotification,{
windowIsSecureContext: window.isSecureContext,
notificationTarget: toastTarget.value,
notificationInWindow: 'Notification' in window,
notificationPermission: Notification.permission
});
if (useToastNotification) {
switch (type) {
case 'info':
toast.info(message, opts)
break;
case 'success':
toast.success(message, opts)
break;
case 'warning':
toast.warning(message, opts)
break;
case 'error':
toast.error(message, opts)
break;
default:
toast.error(`Unknown notification type: ${type}. ${message}`, opts)
break;
}
return
}
const notification = new Notification('YTPTube', {
body: message,
icon: '/favicon.ico',
badge: '/favicon.ico',
tag: `ytptube-${type}`,
silent: false
})
setTimeout(() => notification.close(), 5000)
notification.onclick = () => {
notificationStore.markRead(id)
window.focus()
notification.close()
}
}
const notify = (type: notificationType, message: string, opts?: notificationOptions): void => {
const notificationStore = useNotificationStore()
if (!opts) {
@ -63,23 +132,7 @@ function notify(type: notificationType, message: string, opts?: notificationOpti
}
}
switch (type) {
case 'info':
toast.info(message, opts)
break;
case 'success':
toast.success(message, opts)
break;
case 'warning':
toast.warning(message, opts)
break;
case 'error':
toast.error(message, opts)
break;
default:
toast.error(`Unknown notification type: ${type}. ${message}`, opts)
break;
}
sendMessage(type, id, message, opts)
}
export const useNotification = () => {
@ -88,6 +141,7 @@ export const useNotification = () => {
success: (message: string, opts?: notificationOptions) => notify('success', message, opts),
warning: (message: string, opts?: notificationOptions) => notify('warning', message, opts),
error: (message: string, opts?: notificationOptions) => notify('error', message, opts),
notify
notify,
requestBrowserPermission,
}
}

15
ui/app/layouts/default.vue
View file

@ -154,17 +154,18 @@
<div>
<NuxtLoadingIndicator />
<NuxtPage v-if="config.is_loaded" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
<Message v-if="!config.is_loaded" class="mt-5" :newStyle="true"
title="Loading Configuration" icon="fas fa-spinner fa-spin">
<p>Loading application configuration. This usually takes less than a second.</p>
<p v-if="!socket.isConnected" class="mt-2">
If this is taking too long, please check that the backend server is running and that the WebSocket
connection is functional.
<Message v-if="!config.is_loaded" class="mt-5" :newStyle="true" title="Loading Configuration"
icon="fas fa-spinner fa-spin">
<p>This usually takes less than a second.
<span v-if="!socket.isConnected" class="mt-2">
If this is taking too long, please check that the backend server is running and that the WebSocket
connection is functional.
</span>
</p>
<p v-if="socket.error" class="has-text-danger">
<span class="icon-text">
<span class="icon"><i class="fas fa-triangle-exclamation" /></span>
{{ socket.error }}
{{ socket.error }}. Check the developer console for more information.
</span>
</p>
</Message>

55
ui/app/pages/settings.vue
View file

@ -199,7 +199,7 @@
<span class="field title is-4">
<span class="icon-text">
<span class="icon"><i class="fas fa-bell" /></span>
<p class="card-header-title">On-Screen Notifications</p>
<p class="card-header-title">Notifications</p>
</span>
</span>
<span class="field is-horizontal" />
@ -222,6 +222,33 @@
</div>
<div class="field is-horizontal" v-if="allow_toasts">
<div class="field-label is-normal">
<label class="label">Notification target</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<div class="select is-fullwidth">
<select v-model="toast_target" @change="onNotificationTargetChange">
<option value="toast">Toast</option>
<option value="browser" :disabled="!isSecureContext">Browser</option>
</select>
</div>
</div>
<p class="help">
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
<template v-if="!isSecureContext">
Browser notifications require HTTPS connection.
</template>
<template v-else>
Choose where to display notifications. Browser requires permission.
</template>
</p>
</div>
</div>
</div>
<div class="field is-horizontal" v-if="allow_toasts && toast_target === 'toast'">
<div class="field-label is-normal">
<label class="label">Notifications position</label>
</div>
@ -243,7 +270,7 @@
</div>
</div>
<div class="field is-horizontal" v-if="allow_toasts">
<div class="field is-horizontal" v-if="allow_toasts && toast_target === 'toast'">
<div class="field-label is-normal">
<label class="label">Dismiss notification on click</label>
</div>
@ -266,13 +293,17 @@
<script setup lang="ts">
import 'assets/css/bulma-switch.css'
import { useStorage } from '@vueuse/core'
import { ref, onMounted } from 'vue'
import { POSITION } from 'vue-toastification'
import { useConfigStore } from '~/stores/ConfigStore'
import { useNotification } from '~/composables/useNotification'
import type { notificationTarget } from '~/composables/useNotification'
defineProps<{ isLoading: boolean }>()
defineEmits<{ (e: 'reload_bg'): void }>()
const config = useConfigStore()
const notification = useNotification()
const bg_enable = useStorage<boolean>('random_bg', true)
const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
@ -280,8 +311,28 @@ const selectedTheme = useStorage<'auto' | 'light' | 'dark'>('theme', 'auto')
const allow_toasts = useStorage<boolean>('allow_toasts', true)
const toast_position = useStorage<POSITION>('toast_position', POSITION.TOP_RIGHT)
const toast_dismiss_on_click = useStorage<boolean>('toast_dismiss_on_click', true)
const toast_target = useStorage<notificationTarget>('toast_target', 'toast')
const show_thumbnail = useStorage<boolean>('show_thumbnail', true)
const thumbnail_ratio = useStorage<'is-16by9' | 'is-3by1'>('thumbnail_ratio', 'is-3by1')
const separator = useStorage<string>('url_separator', separators[0]?.value ?? ',')
const simpleMode = useStorage<boolean>('simple_mode', config.app.simple_mode || false)
const isSecureContext = ref<boolean>(false)
onMounted(async () => {
isSecureContext.value = window.isSecureContext
await nextTick()
if ('browser' === toast_target.value && !isSecureContext.value) {
toast_target.value = 'toast'
}
})
const onNotificationTargetChange = async (): Promise<void> => {
if ('browser' === toast_target.value) {
const permission = await notification.requestBrowserPermission()
if ('granted' !== permission) {
toast_target.value = 'toast'
notification.warning('Browser notification permission denied. Reverting to toast notifications.')
}
}
}
</script>

1
ui/app/stores/ConfigStore.ts
View file

@ -25,6 +25,7 @@ export const useConfigStore = defineStore('config', () => {
started: 0,
app_env: 'production',
simple_mode: false,
default_pagination: 50,
},
presets: [
{

6
ui/app/stores/NotificationStore.ts
View file

@ -1,9 +1,9 @@
import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'
import type { Notification, notificationType } from '~/composables/useNotification'
import type { notification, notificationType } from '~/composables/useNotification'
export const useNotificationStore = defineStore('notifications', () => {
const notifications = useStorage<Notification[]>('notifications', [])
const notifications = useStorage<notification[]>('notifications', [])
const unreadCount = computed<number>(() => notifications.value.filter(n => !n.seen).length)
const add = (level: notificationType, message: string, seen: boolean = false): string => {
@ -39,7 +39,7 @@ export const useNotificationStore = defineStore('notifications', () => {
n.seen = true
}
const get = (id: string): Notification | undefined => notifications.value.find(n => n.id === id)
const get = (id: string): notification | undefined => notifications.value.find(n => n.id === id)
const remove = (id: string) => notifications.value = notifications.value.filter(n => n.id !== id)

20
ui/app/stores/SocketStore.ts
View file

@ -99,7 +99,6 @@ export const useSocketStore = defineStore('socket', () => {
const json = JSON.parse(stream)
config.setAll({
app: json.data.config,
tasks: json.data.tasks,
presets: json.data.presets,
dl_fields: json.data.dl_fields,
paused: Boolean(json.data.paused)
@ -108,9 +107,22 @@ export const useSocketStore = defineStore('socket', () => {
on('connected', stream => {
const json = JSON.parse(stream);
config.add('folders', json.data.folders)
stateStore.addAll('queue', json.data.queue || {})
stateStore.addAll('history', json.data.done || {})
if (!json?.data) {
return;
}
if (json.data?.folder) {
config.add('folders', json.data.folders)
}
if (json.data?.queue) {
stateStore.addAll('queue', json.data.queue || {})
}
if (typeof json.data?.history_count === 'number') {
stateStore.setHistoryCount(json.data.history_count)
}
error.value = null;
})

123
ui/app/stores/StateStore.ts
View file

@ -1,5 +1,6 @@
import { defineStore } from 'pinia'
import type { StoreItem } from '~/types/store'
import { request } from '~/utils'
type StateType = 'queue' | 'history'
type KeyType = string
@ -7,10 +8,33 @@ type KeyType = string
interface State {
queue: Record<KeyType, StoreItem>
history: Record<KeyType, StoreItem>
pagination: {
page: number
per_page: number
total: number
total_pages: number
has_next: boolean
has_prev: boolean
isLoaded: boolean
isLoading: boolean
}
}
export const useStateStore = defineStore('state', () => {
const state = reactive<State>({ queue: {}, history: {} })
const state = reactive<State>({
queue: {},
history: {},
pagination: {
page: 1,
per_page: 50,
total: 0,
total_pages: 0,
has_next: false,
has_prev: false,
isLoaded: false,
isLoading: false,
},
})
const add = (type: StateType, key: KeyType, value: StoreItem): void => {
state[type][key] = value
@ -37,6 +61,15 @@ export const useStateStore = defineStore('state', () => {
const clearAll = (type: StateType): void => {
state[type] = {}
if ('queue' === type) {
return
}
state.pagination.total = 0
state.pagination.page = 1
state.pagination.total_pages = 0
state.pagination.has_next = false
state.pagination.has_prev = false
}
const addAll = (type: StateType, data: Record<KeyType, StoreItem>): void => {
@ -52,8 +85,94 @@ export const useStateStore = defineStore('state', () => {
}
const count = (type: StateType): number => {
if ('history' === type && state.pagination.total > 0) {
return state.pagination.total
}
return Object.keys(state[type]).length
}
return { ...toRefs(state), add, update, remove, get, has, clearAll, addAll, move, count }
const loadPaginated = async (type: StateType, page: number = 1, per_page: number = 50, order: 'ASC' | 'DESC' = 'DESC'): Promise<void> => {
if ('history' !== type) {
throw new Error('Pagination is only supported for history type');
}
state.pagination.isLoading = true
try {
const search = new URLSearchParams({ type: 'done', page: page.toString(), per_page: per_page.toString(), order });
const response = await request(`/api/history?${search}`)
const data = await response.json()
if (data.pagination) {
state.pagination = { ...data.pagination, isLoaded: true, isLoading: false, }
const items: Record<KeyType, StoreItem> = {}
for (const item of data.items || []) {
items[item._id] = item
}
state[type] = items
}
} catch (error) {
console.error(`Failed to load ${type} page ${page}:`, error)
state.pagination.isLoading = false
}
}
const loadNextPage = async (type: StateType): Promise<void> => {
if ('history' !== type) {
throw new Error('Pagination is only supported for history type');
}
if (!state.pagination.has_next || state.pagination.isLoading) {
return
}
await loadPaginated(type, state.pagination.page + 1, state.pagination.per_page)
}
const loadPreviousPage = async (type: StateType): Promise<void> => {
if ('history' !== type) {
throw new Error('Pagination is only supported for history type');
}
if (!state.pagination.has_prev || state.pagination.isLoading) {
return
}
await loadPaginated(type, state.pagination.page - 1, state.pagination.per_page)
}
const reloadCurrentPage = async (type: StateType): Promise<void> => {
if ('history' !== type) {
throw new Error('Pagination is only supported for history type');
}
if (!state.pagination.isLoaded) {
return
}
await loadPaginated(type, state.pagination.page, state.pagination.per_page)
}
const getPagination = () => state.pagination
const setHistoryCount = (count: number) => state.pagination.total = count
return {
...toRefs(state),
add,
update,
remove,
get,
has,
clearAll,
addAll,
move,
count,
loadPaginated,
loadNextPage,
loadPreviousPage,
reloadCurrentPage,
getPagination,
setHistoryCount,
}
})

2
ui/app/types/config.d.ts vendored
View file

@ -42,6 +42,8 @@ type AppConfig = {
started: number,
/** Application environment, e.g. "production", "development" */
app_env: "production" | "development"
/** Default number of items per page for pagination */
default_pagination: number
}
type Preset = {

11
ui/nuxt.config.ts
View file

@ -43,9 +43,18 @@ export default defineNuxtConfig({
{ "charset": "utf-8" },
{ "name": "viewport", "content": "width=device-width, initial-scale=1.0, maximum-scale=1.0" },
{ "name": "theme-color", "content": "#000000" },
{ "name": "mobile-web-app-capable", "content": "yes" },
{ "name": "apple-mobile-web-app-capable", "content": "yes" },
{ "name": "apple-mobile-web-app-status-bar-style", "content": "black-translucent" },
{ "name": "apple-mobile-web-app-title", "content": "YTPTube" },
],
base: { "href": "/" },
link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico?v=100' }]
link: [
{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico?v=100' },
{ rel: 'manifest', href: 'manifest.webmanifest?v=100' },
{ rel: 'apple-touch-icon', href: 'images/favicon.png' },
{ rel: 'apple-touch-startup-image', href: 'images/logo.png' }
]
},
pageTransition: { name: 'page', mode: 'out-in' }
},

2
ui/package.json
View file

@ -54,7 +54,7 @@
"devDependencies": {
"@nuxt/eslint": "^1.10.0",
"@nuxt/eslint-config": "^1.10.0",
"@typescript-eslint/parser": "^8.46.3",
"@typescript-eslint/parser": "^8.46.4",
"eslint": "^9.39.1",
"typescript": "^5.9.3",
"vitest": "^4.0.8",

468
ui/pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

BIN
ui/public/images/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 99 KiB

35
ui/public/manifest.webmanifest Normal file
View file

@ -0,0 +1,35 @@
{
"short_name": "YTP",
"name": "YTPTube",
"description": "Web-based GUI for yt-dlp. Download videos, playlists, channels, and live streams from various platforms.",
"start_url": "/",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#000000",
"orientation": "any",
"categories": [
"downloaders",
"video",
"audio"
],
"icons": [
{
"src": "favicon.ico",
"sizes": "32x32",
"type": "image/x-icon"
},
{
"src": "images/favicon.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"screenshots": [
{
"src": "images/logo.png",
"sizes": "800x600",
"type": "image/png"
}
]
}