- Support multiple music providers
- feat: Doubleclick on track in Table view to get technical information about it
This commit is contained in:
Kamil
@@ -1,5 +1,5 @@
|
||||
{% if item.can_add %}
|
||||
<button class="btn btn-success" hx-post="/addplaylist" hx-include="this" hx-swap="outerHTML" hx-target="this"
|
||||
<button class="btn btn-success" hx-post="/addplaylist?provider={{provider_id}}" hx-include="this" hx-swap="outerHTML" hx-target="this"
|
||||
data-bs-toggle="tooltip" title="Add to my Jellyfin"
|
||||
hx-vals='{"item_id": "{{ item.id }}", "item_name": "{{ item.name }}"}'>
|
||||
<i class="fa-solid fa-circle-plus"> </i>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button hx-swap="beforebegin" class="btn btn-sm btn-success" hx-post="/associate_track" hx-vals='{"jellyfin_id": "{{ track.Id }}","spotify_id": "{{ spotify_id}}"}' data-bs-toggle="tooltip" title="Link this Track [{{track.Id}}] with Spotify-Track-ID {{ spotify_id }}">
|
||||
<button hx-swap="beforebegin" class="btn btn-sm btn-success" hx-post="/associate_track" hx-vals='{"jellyfin_id": "{{ track.Id }}","provider_track_id": "{{ provider_track_id}}"}' data-bs-toggle="tooltip" title="Link this Track [{{track.Id}}] with Provider-Track-ID {{ provider_track_id }}">
|
||||
Link Track
|
||||
</button>
|
||||
</td>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<div class="d-flex align-items-center row sticky-top py-3 mb-3 bg-dark" style="top: 0; z-index: 1000;">
|
||||
<div class="col-6">
|
||||
<img src="{{ playlist_cover }}" class="img-fluid">
|
||||
<img src="{{ item.image }}" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="playlist-info">
|
||||
<h1>{{ playlist_name }}</h1>
|
||||
<p>{{ playlist_description }}</p>
|
||||
<p>{{ track_count }} songs, {{ total_duration }}</p>
|
||||
<p>Last Updated: {{ last_updated}} | Last Change: {{ last_changed}}</p>
|
||||
<h1>{{ item.name }}</h1>
|
||||
<p>{{ item.description }}</p>
|
||||
<p>{{ item.track_count }} songs, {{ total_duration }}</p>
|
||||
<p>Last Updated: {{ item.last_updated}} | Last Change: {{ item.last_changed}}</p>
|
||||
{% include 'partials/_add_remove_button.html' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,75 +1,98 @@
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Title</th>
|
||||
<th scope="col">Artist</th>
|
||||
<th scope="col">Duration</th>
|
||||
<th scope="col">Spotify</th>
|
||||
<th scope="col">Preview</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Jellyfin</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for track in tracks %}
|
||||
<tr>
|
||||
<th scope="row">{{ loop.index }}</th>
|
||||
<td>{{ track.title }}</td>
|
||||
<td>{{ track.artist }}</td>
|
||||
<td>{{ track.duration }}</td>
|
||||
<td>
|
||||
<a href="{{ track.url }}" target="_blank" class="text-success" data-bs-toggle="tooltip" title="Open in Spotify">
|
||||
<i class="fab fa-spotify fa-lg"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{% if track.preview_url %}
|
||||
<button class="btn btn-sm btn-primary" onclick="playPreview(this, '{{ track.preview_url }}')" data-bs-toggle="tooltip" title="Play Preview">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<span data-bs-toggle="tooltip" title="No Preview Available">
|
||||
<button class="btn btn-sm" disabled><i class="fas fa-ban"></i></button>
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if not track.downloaded %}
|
||||
<button class="btn btn-sm btn-danger"
|
||||
data-bs-toggle="tooltip" title="{{ track.download_status if track.download_status else 'Not downloaded'}}">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<button class="btn btn-sm btn-success" data-bs-toggle="tooltip" title="Track downloaded">
|
||||
<i class="fa-solid fa-circle-check"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% set title = track.title | replace("'","") %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Title</th>
|
||||
<th scope="col">Artist</th>
|
||||
<th scope="col">Duration</th>
|
||||
<th scope="col">{{provider_id}}</th>
|
||||
<th scope="col">Preview</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Jellyfin</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for track in tracks %}
|
||||
<tr hx-get="/track_details/{{track.provider_track_id}}?provider={{ provider_id }}"
|
||||
hx-target="#trackDetailsModalcontent" hx-trigger="dblclick" hx-on="htmx:afterOnLoad:showModal">
|
||||
<th scope="row">{{ loop.index }}</th>
|
||||
<td>{{ track.title }}</td>
|
||||
<td>{{ track.artist }}</td>
|
||||
<td>{{ track.duration }}</td>
|
||||
<td>
|
||||
<a href="{{ track.url[0] }}" target="_blank" class="text-success" data-bs-toggle="tooltip"
|
||||
title="Open in {{ track.provider_id }}">
|
||||
<i class="fab fa-{{ track.provider_id.lower() }} fa-lg"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{% if track.preview_url %}
|
||||
<button class="btn btn-sm btn-primary" onclick="playPreview(this, '{{ track.preview_url }}')"
|
||||
data-bs-toggle="tooltip" title="Play Preview">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<span data-bs-toggle="tooltip" title="No Preview Available">
|
||||
<button class="btn btn-sm" disabled><i class="fas fa-ban"></i></button>
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if not track.downloaded %}
|
||||
<button class="btn btn-sm btn-danger" data-bs-toggle="tooltip"
|
||||
title="{{ track.download_status if track.download_status else 'Not downloaded'}}">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<button class="btn btn-sm btn-success" data-bs-toggle="tooltip" title="Downloaded">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% set title = track.title | replace("'","") %}
|
||||
|
||||
{% if track.jellyfin_id %}
|
||||
<button class="btn btn-sm btn-success" onclick="handleJellyfinClick(event, '{{ track.jellyfin_id }}', '{{ title }}', '{{ track.spotify_id }}')" data-bs-toggle="tooltip" title="Play from Jellyfin (Hold CTRL Key to reassing a new track)">
|
||||
<i class="fas fa-play"></i>
|
||||
{% if track.jellyfin_id %}
|
||||
<button class="btn btn-sm btn-success"
|
||||
onclick="handleJellyfinClick(event, '{{ track.jellyfin_id }}', '{{ title }}', '{{ track.provider_track_id }}')"
|
||||
data-bs-toggle="tooltip" title="Play from Jellyfin (Hold CTRL Key to reassing a new track)">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
{% elif track.downloaded %}
|
||||
<span data-bs-toggle="tooltip"
|
||||
title="Track Downloaded, but not in Jellyfin or could not be associated automatically. You can try to do the association manually">
|
||||
<button class="btn btn-sm btn-warning"
|
||||
onclick="openSearchModal('{{ title }}','{{track.provider_track_id}}')">
|
||||
<i class="fas fa-triangle-exclamation"></i>
|
||||
</button>
|
||||
{% elif track.downloaded %}
|
||||
<span data-bs-toggle="tooltip" title="Track Downloaded, but not in Jellyfin or could not be associated automatically. You can try to do the association manually">
|
||||
<button class="btn btn-sm btn-warning" onclick="openSearchModal('{{ title }}','{{track.spotify_id}}')">
|
||||
<i class="fas fa-triangle-exclamation"></i>
|
||||
</button>
|
||||
</span>
|
||||
{% else %}
|
||||
<span data-bs-toggle="tooltip" title="Not Available">
|
||||
<button class="btn btn-sm" disabled><i class="fas fa-ban"></i></button>
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</span>
|
||||
{% else %}
|
||||
<span>
|
||||
<button class="btn btn-sm" onclick="openSearchModal('{{ title }}','{{track.provider_track_id}}')"
|
||||
data-bs-toggle="tooltip" title="Hold CTRL Key to reassing a new track"><i class="fas fa-ban"></i></button>
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="modal fade" id="trackDetailsModal" tabindex="-1" aria-labelledby="trackDetailsModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content" id="trackDetailsModalcontent">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('htmx:afterOnLoad', function(event) {
|
||||
if (event.detail.target.id === 'trackDetailsModalcontent') {
|
||||
const modal = new bootstrap.Modal(document.getElementById('trackDetailsModal'));
|
||||
modal.show();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
@@ -81,8 +104,9 @@
|
||||
<!-- htmx-enabled form -->
|
||||
<form id="search-form" hx-get="/search_jellyfin" hx-target="#search-results" hx-trigger="submit">
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" id="search-query" name="search_query" placeholder="Search for a track...">
|
||||
<input type="hidden" class="form-control" id="spotify-id" name="spotify_id" >
|
||||
<input type="text" class="form-control" id="search-query" name="search_query"
|
||||
placeholder="Search for a track...">
|
||||
<input type="hidden" class="form-control" id="provider-track-id" name="provider_track_id">
|
||||
<button class="btn btn-primary" type="submit">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -93,10 +117,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
49
templates/partials/playlist_item.html
Normal file
49
templates/partials/playlist_item.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<div class="col" id="item-id-{{ item.id }}">
|
||||
<div class="card shadow h-100 d-flex flex-column position-relative">
|
||||
|
||||
<!-- Badge: Only show if status is available (i.e., playlist has been requested) -->
|
||||
{% if item.status %}
|
||||
<span style="z-index: 99;" class="badge position-absolute top-0 end-0 m-2
|
||||
{% if item.status == 'green' %} bg-success
|
||||
{% elif item.status == 'yellow' %} bg-warning text-dark
|
||||
{% else %} bg-danger {% endif %}" data-bs-toggle="tooltip" title="{% if item.track_count > 0 %}
|
||||
{{ item.tracks_available }} Track Available / {{ item.tracks_linked}} Tracks linked/ {{ item.track_count}} Total
|
||||
{%endif%}
|
||||
">
|
||||
{% if item.track_count > 0 %}
|
||||
{{ item.tracks_available }} / {{ item.tracks_linked}} / {{ item.track_count}}
|
||||
{% else %}
|
||||
not Available
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
<!-- Card Image -->
|
||||
<div style="position: relative;">
|
||||
<img src="{{ item.image }}" class="card-img-top" alt="{{ item.name }}">
|
||||
</div>
|
||||
|
||||
<!-- Card Body -->
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<h5 class="card-title">{{ item.name }}</h5>
|
||||
<p class="card-text">{{ item.description }}</p>
|
||||
</div>
|
||||
<div class="mt-auto pt-3">
|
||||
{% if item.type == 'category'%}
|
||||
<a href="{{ item.url }}" class="btn btn-primary" data-bs-toggle="tooltip" title="View Playlist">
|
||||
<i class="fa-solid fa-eye"></i>
|
||||
</a>
|
||||
{%else%}
|
||||
|
||||
<a href="/playlist/view/{{ item.id }}?provider={{provider_id}}" class="btn btn-primary" data-bs-toggle="tooltip"
|
||||
title="View Playlist details">
|
||||
<i class="fa-solid fa-eye"></i>
|
||||
</a>
|
||||
{%endif%}
|
||||
{% include 'partials/_add_remove_button.html' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
23
templates/partials/track_details.html
Normal file
23
templates/partials/track_details.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="trackDetailsModalLabel">Track Details</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>Title:</strong> {{ track.title }}</p>
|
||||
<p><strong>Artist:</strong> {{ track.artist }}</p>
|
||||
<p><strong>Duration:</strong> {{ track.duration }}</p>
|
||||
<p><strong>Duration (ms):</strong> {{ track.duration_ms }}</p>
|
||||
<p><strong>Provider:</strong> {{ track.provider_id }}</p>
|
||||
<p><strong>Provider Track URL:</strong> <a href="{{track.provider_track_url}}" target="_blank">{{track.provider_track_url}}</a></p>
|
||||
<!-- <p><strong>Preview URL:</strong> <a href="{{ track.preview_url }}" target="_blank">{{ track.preview_url if track.preview_url else 'No Preview Available' }}</a></p> -->
|
||||
<p><strong>Status:</strong> {{ 'Downloaded' if track.downloaded else 'Not Downloaded' }}</p>
|
||||
<p><strong>Jellyfin ID:</strong> {{ track.jellyfin_id | jellyfin_link }}</p>
|
||||
<p><strong>Provider Track ID:</strong> {{ track.provider_track_id }}</p>
|
||||
<p><strong>Download Status:</strong> {{ track.download_status }}</p>
|
||||
<p><strong>Filesystem Path:</strong> {{ track.filesystem_path }}</p>
|
||||
<p><strong>Jellyfin Filesystem Path:</strong> {{ track.jellyfin_filesystem_path if track.jellyfin_filesystem_path else 'N/A' }}</p>
|
||||
<p>{{ track.jellyfin_filesystem_path | audioprofile(track.jellyfin_filesystem_path) if track.jellyfin_filesystem_path else 'N/A' }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
Reference in New Issue
Block a user