Koha9/PlexPlaylistSync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add playlist overview homepage

Browse Source
This commit is contained in:
Koha9
2025-11-24 17:35:42 +09:00
parent 9ff74550a2
commit 61794b8db9
5 changed files with 220 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/base.html
+7
View File
@@ -64,6 +64,13 @@
</a>
<hr class="d-none d-md-block">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a href="/" class="nav-link {% if path == '/' %}active{% endif %}">
<!-- home icon -->
<i class="bi bi-house-door-fill"></i>
<span class="d-none d-md-inline ms-2">主页</span>
</a>
</li>
<li class="nav-item">
<a href="/login" class="nav-link {% if path == '/login' %}active{% endif %}">
<!-- login icon -->
app/templates/home.html
+93
View File
@@ -0,0 +1,93 @@
{% extends "base.html" %}
{% block title %}主页 - Plex Sync{% endblock %}
{% block content %}
<div class="d-flex flex-column flex-md-row align-items-md-center mb-4 gap-2">
<div>
<h1 class="h3 mb-1">播放列表概览</h1>
<p class="text-body-secondary mb-0">浏览本地与云端同步的播放列表，随时刷新最新状态。</p>
</div>
</div>
<div class="row g-4">
<div class="col-12 col-xl-6">
<div class="card h-100">
<div class="card-body">
<div class="d-flex flex-column flex-lg-row align-items-lg-center gap-3 mb-3">
<div>
<h5 class="card-title mb-0">本地播放列表</h5>
<small class="text-body-secondary">输入目录并刷新，读取挂载的播放列表文件</small>
</div>
<form class="ms-lg-auto w-100 w-lg-auto" method="get" action="/">
<div class="input-group">
<input type="text" class="form-control" name="local_path" value="{{ local_path }}" placeholder="playlist">
<button class="btn btn-outline-secondary" type="submit" title="刷新本地播放列表">
<i class="bi bi-arrow-clockwise"></i>
<span class="d-none d-sm-inline ms-1">刷新</span>
</button>
</div>
</form>
</div>
{% if local_playlists %}
<ul class="list-group list-group-flush">
{% for playlist in local_playlists %}
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<div class="fw-semibold">{{ playlist.name }}</div>
<div class="text-body-secondary small">曲目数</div>
</div>
<span class="badge rounded-pill text-bg-primary">{{ playlist.track_count }}</span>
</li>
{% endfor %}
</ul>
{% else %}
<div class="text-body-secondary">未发现播放列表，请确认目录或点击刷新。</div>
{% endif %}
</div>
</div>
</div>
<div class="col-12 col-xl-6">
<div class="card h-100">
<div class="card-body">
<div class="d-flex flex-column flex-lg-row align-items-lg-center gap-3 mb-3">
<div>
<h5 class="card-title mb-0">云端播放列表</h5>
<small class="text-body-secondary">来自已连接的 Plex 服务器</small>
</div>
<form class="ms-lg-auto" method="get" action="/">
<input type="hidden" name="local_path" value="{{ local_path }}">
<div class="d-flex align-items-center gap-2">
<div class="d-flex align-items-center gap-2 text-body-secondary small">
<span class="status-dot status-{{ connection_status }}"></span>
<span>
{{ server_info.name }}
<span class="text-body-secondary">· {{ server_info.domain }}</span>
</span>
</div>
<button class="btn btn-outline-secondary" type="submit" title="刷新云端播放列表">
<i class="bi bi-arrow-clockwise"></i>
<span class="d-none d-sm-inline ms-1">刷新</span>
</button>
</div>
</form>
</div>
{% if cloud_playlists %}
<ul class="list-group list-group-flush">
{% for playlist in cloud_playlists %}
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<div class="fw-semibold">{{ playlist.name }}</div>
<div class="text-body-secondary small">曲目数</div>
</div>
<span class="badge rounded-pill text-bg-success">{{ playlist.track_count }}</span>
</li>
{% endfor %}
</ul>
{% else %}
<div class="text-body-secondary">暂无云端播放列表，检查连接或刷新重试。</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}