Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>
This commit is contained in:
parent
63df6cebaf
commit
7f20ba3ffa
4
PRD.md
4
PRD.md
@ -255,6 +255,7 @@ KaraokeMerge/
|
||||
- **Search & Filter**: Real-time search across artists, titles, and paths
|
||||
- **Responsive Design**: Mobile-friendly interface
|
||||
- **Easy Startup**: Automated dependency checking and browser launch
|
||||
- **Remaining Songs View**: Separate page to browse all songs that remain after cleanup
|
||||
|
||||
#### **Media Preview & Playback**
|
||||
- **Video Playback**: Direct MP4 video playback in modal popup for previewing karaoke videos
|
||||
@ -308,6 +309,7 @@ KaraokeMerge/
|
||||
#### **Key Components**
|
||||
- **`web/app.py`**: Flask application with API endpoints
|
||||
- **`web/templates/index.html`**: Main web interface template
|
||||
- **`web/templates/remaining_songs.html`**: Remaining songs browsing interface
|
||||
- **`start_web_ui.py`**: Startup script with dependency management
|
||||
|
||||
### 7.3 API Endpoints
|
||||
@ -317,6 +319,7 @@ KaraokeMerge/
|
||||
- **`/api/stats`**: Get statistical analysis of the song collection
|
||||
- **`/api/artists`**: Get list of artists for filtering
|
||||
- **`/api/mp3-songs`**: Get MP3 songs that remain after cleanup
|
||||
- **`/api/remaining-songs`**: Get all remaining songs with pagination and filtering
|
||||
- **`/api/config`**: Get current configuration settings
|
||||
|
||||
#### **Priority Management Endpoints**
|
||||
@ -412,6 +415,7 @@ data/preferences/
|
||||
- [x] Create responsive design with Bootstrap 5
|
||||
- [x] Add file path normalization for corrupted paths
|
||||
- [x] Implement change tracking and save button management
|
||||
- [x] Create remaining songs browsing page with filtering and video preview
|
||||
|
||||
#### **Advanced Features**
|
||||
- [x] Multi-format support (MP3, CDG, MP4)
|
||||
|
||||
86
web/app.py
86
web/app.py
@ -191,6 +191,11 @@ def index():
|
||||
"""Main dashboard page."""
|
||||
return render_template('index.html')
|
||||
|
||||
@app.route('/remaining-songs')
|
||||
def remaining_songs():
|
||||
"""Page showing remaining songs after cleanup."""
|
||||
return render_template('remaining_songs.html')
|
||||
|
||||
@app.route('/api/duplicates')
|
||||
def get_duplicates():
|
||||
"""API endpoint to get duplicate data."""
|
||||
@ -435,6 +440,87 @@ def get_mp3_songs():
|
||||
|
||||
return jsonify(mp3_song_list)
|
||||
|
||||
@app.route('/api/remaining-songs')
|
||||
def get_remaining_songs():
|
||||
"""Get all remaining songs (MP4 and MP3) after cleanup with pagination."""
|
||||
try:
|
||||
all_songs = load_json_file(os.path.join(DATA_DIR, 'allSongs.json'))
|
||||
skip_songs = load_json_file(os.path.join(DATA_DIR, 'reports', 'skip_songs_detailed.json'))
|
||||
|
||||
if not all_songs:
|
||||
return jsonify({'error': 'No all songs data found'}), 404
|
||||
|
||||
if not skip_songs:
|
||||
skip_songs = []
|
||||
|
||||
# Get pagination parameters
|
||||
page = request.args.get('page', 1, type=int)
|
||||
per_page = request.args.get('per_page', 50, type=int)
|
||||
search = request.args.get('search', '').lower()
|
||||
file_type_filter = request.args.get('file_type', 'all')
|
||||
artist_filter = request.args.get('artist', '')
|
||||
|
||||
# Create a set of paths that are being skipped
|
||||
skip_paths = {song['path'] for song in skip_songs}
|
||||
|
||||
# Filter for songs that are NOT being skipped
|
||||
remaining_songs = []
|
||||
for song in all_songs:
|
||||
path = song.get('path', '')
|
||||
if path not in skip_paths:
|
||||
# Apply file type filter
|
||||
if file_type_filter != 'all':
|
||||
if file_type_filter == 'mp4' and not path.lower().endswith('.mp4'):
|
||||
continue
|
||||
elif file_type_filter == 'mp3' and not path.lower().endswith(('.mp3', '.cdg')):
|
||||
continue
|
||||
|
||||
# Apply search filter
|
||||
if search:
|
||||
title = song.get('title', '').lower()
|
||||
artist = song.get('artist', '').lower()
|
||||
if search not in title and search not in artist:
|
||||
continue
|
||||
|
||||
# Apply artist filter
|
||||
if artist_filter:
|
||||
artist = song.get('artist', '').lower()
|
||||
if artist_filter.lower() not in artist:
|
||||
continue
|
||||
|
||||
remaining_songs.append({
|
||||
'title': song.get('title', 'Unknown'),
|
||||
'artist': song.get('artist', 'Unknown'),
|
||||
'path': song.get('path', ''),
|
||||
'file_type': get_file_type(song.get('path', '')),
|
||||
'channel': extract_channel(song.get('path', ''))
|
||||
})
|
||||
|
||||
# Sort by artist, then by title
|
||||
remaining_songs.sort(key=lambda x: (x['artist'].lower(), x['title'].lower()))
|
||||
|
||||
# Calculate pagination
|
||||
total_songs = len(remaining_songs)
|
||||
total_pages = (total_songs + per_page - 1) // per_page
|
||||
start_idx = (page - 1) * per_page
|
||||
end_idx = start_idx + per_page
|
||||
|
||||
# Get songs for current page
|
||||
page_songs = remaining_songs[start_idx:end_idx]
|
||||
|
||||
return jsonify({
|
||||
'songs': page_songs,
|
||||
'pagination': {
|
||||
'current_page': page,
|
||||
'per_page': per_page,
|
||||
'total_songs': total_songs,
|
||||
'total_pages': total_pages
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
return jsonify({'error': str(e)}), 500
|
||||
|
||||
|
||||
@app.route('/api/download/mp3-songs')
|
||||
def download_mp3_songs():
|
||||
|
||||
@ -478,6 +478,20 @@
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-3">
|
||||
<a href="/remaining-songs" class="btn btn-outline-success w-100">
|
||||
<i class="fas fa-eye"></i> View Remaining Songs
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
Browse all remaining songs (MP4 and MP3) after cleanup with filtering,
|
||||
search, and video preview capabilities.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
402
web/templates/remaining_songs.html
Normal file
402
web/templates/remaining_songs.html
Normal file
@ -0,0 +1,402 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Remaining Songs After Cleanup - Karaoke Library</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
.song-card {
|
||||
border-left: 4px solid #28a745;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.song-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.file-type-badge {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.channel-badge {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.stats-card {
|
||||
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
||||
color: white;
|
||||
}
|
||||
.filter-section {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
.pagination-info {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
.path-text {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
.back-button {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<!-- Header -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<a href="/" class="btn btn-outline-secondary back-button">
|
||||
<i class="fas fa-arrow-left"></i> Back to Duplicates
|
||||
</a>
|
||||
<h1 class="d-inline-block ms-3">Remaining Songs After Cleanup</h1>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<small class="text-muted">All songs that remain after duplicate removal</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="card stats-card">
|
||||
<div class="card-body text-center">
|
||||
<h3 id="totalSongs">-</h3>
|
||||
<p class="mb-0">Total Songs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card stats-card">
|
||||
<div class="card-body text-center">
|
||||
<h3 id="mp4Count">-</h3>
|
||||
<p class="mb-0">MP4 Videos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card stats-card">
|
||||
<div class="card-body text-center">
|
||||
<h3 id="mp3Count">-</h3>
|
||||
<p class="mb-0">MP3/CDG Files</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card stats-card">
|
||||
<div class="card-body text-center">
|
||||
<h3 id="uniqueArtists">-</h3>
|
||||
<p class="mb-0">Unique Artists</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="filter-section">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label for="searchInput" class="form-label">Search</label>
|
||||
<input type="text" class="form-control" id="searchInput" placeholder="Search by artist or title...">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="fileTypeFilter" class="form-label">File Type</label>
|
||||
<select class="form-select" id="fileTypeFilter">
|
||||
<option value="all">All Types</option>
|
||||
<option value="mp4">MP4 Videos</option>
|
||||
<option value="mp3">MP3/CDG Files</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="artistFilter" class="form-label">Artist Filter</label>
|
||||
<input type="text" class="form-control" id="artistFilter" placeholder="Filter by artist...">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label for="perPageSelect" class="form-label">Per Page</label>
|
||||
<select class="form-select" id="perPageSelect">
|
||||
<option value="25">25</option>
|
||||
<option value="50" selected>50</option>
|
||||
<option value="100">100</option>
|
||||
<option value="200">200</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Songs List -->
|
||||
<div id="songsContainer">
|
||||
<div class="loading">
|
||||
<i class="fas fa-spinner fa-spin fa-2x"></i>
|
||||
<p class="mt-2">Loading remaining songs...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<nav aria-label="Songs pagination">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="pagination-info">
|
||||
Showing <span id="showingInfo">-</span> of <span id="totalInfo">-</span> songs
|
||||
</div>
|
||||
<ul class="pagination mb-0" id="pagination">
|
||||
<!-- Pagination will be generated here -->
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video Modal -->
|
||||
<div class="modal fade" id="videoModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="videoModalTitle">Video Preview</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<video id="videoPlayer" class="w-100" controls>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
let currentPage = 1;
|
||||
let currentFilters = {
|
||||
search: '',
|
||||
file_type: 'all',
|
||||
artist: '',
|
||||
per_page: 50
|
||||
};
|
||||
|
||||
// Initialize the page
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadSongs();
|
||||
setupEventListeners();
|
||||
});
|
||||
|
||||
function setupEventListeners() {
|
||||
// Search input
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
let searchTimeout;
|
||||
searchInput.addEventListener('input', function() {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
currentFilters.search = this.value;
|
||||
currentPage = 1;
|
||||
loadSongs();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// File type filter
|
||||
document.getElementById('fileTypeFilter').addEventListener('change', function() {
|
||||
currentFilters.file_type = this.value;
|
||||
currentPage = 1;
|
||||
loadSongs();
|
||||
});
|
||||
|
||||
// Artist filter
|
||||
const artistFilter = document.getElementById('artistFilter');
|
||||
let artistTimeout;
|
||||
artistFilter.addEventListener('input', function() {
|
||||
clearTimeout(artistTimeout);
|
||||
artistTimeout = setTimeout(() => {
|
||||
currentFilters.artist = this.value;
|
||||
currentPage = 1;
|
||||
loadSongs();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Per page selector
|
||||
document.getElementById('perPageSelect').addEventListener('change', function() {
|
||||
currentFilters.per_page = parseInt(this.value);
|
||||
currentPage = 1;
|
||||
loadSongs();
|
||||
});
|
||||
}
|
||||
|
||||
async function loadSongs() {
|
||||
const container = document.getElementById('songsContainer');
|
||||
container.innerHTML = '<div class="loading"><i class="fas fa-spinner fa-spin fa-2x"></i><p class="mt-2">Loading songs...</p></div>';
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: currentPage,
|
||||
per_page: currentFilters.per_page,
|
||||
search: currentFilters.search,
|
||||
file_type: currentFilters.file_type,
|
||||
artist: currentFilters.artist
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/remaining-songs?${params}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
displaySongs(data.songs, data.pagination);
|
||||
updateStats(data.songs, data.pagination);
|
||||
} else {
|
||||
container.innerHTML = `<div class="alert alert-danger">Error: ${data.error}</div>`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading songs:', error);
|
||||
container.innerHTML = '<div class="alert alert-danger">Error loading songs. Please try again.</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function displaySongs(songs, pagination) {
|
||||
const container = document.getElementById('songsContainer');
|
||||
|
||||
if (songs.length === 0) {
|
||||
container.innerHTML = '<div class="alert alert-info">No songs found matching your filters.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const songsHtml = songs.map(song => `
|
||||
<div class="card song-card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<h5 class="card-title mb-1">${escapeHtml(song.title)}</h5>
|
||||
<p class="card-text text-muted mb-2">${escapeHtml(song.artist)}</p>
|
||||
<div class="path-text">${escapeHtml(song.path)}</div>
|
||||
</div>
|
||||
<div class="col-md-4 text-end">
|
||||
<span class="badge bg-primary file-type-badge me-2">${song.file_type}</span>
|
||||
${song.channel ? `<span class="badge bg-info channel-badge me-2">${escapeHtml(song.channel)}</span>` : ''}
|
||||
${song.file_type === 'MP4' ?
|
||||
`<button class="btn btn-sm btn-outline-primary" onclick="openVideoPlayer('${escapeHtml(song.path)}', '${escapeHtml(song.artist)}', '${escapeHtml(song.title)}')">
|
||||
<i class="fas fa-play"></i> Play
|
||||
</button>` :
|
||||
''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
container.innerHTML = songsHtml;
|
||||
updatePagination(pagination);
|
||||
}
|
||||
|
||||
function updateStats(songs, pagination) {
|
||||
// Update total songs
|
||||
document.getElementById('totalSongs').textContent = pagination.total_songs;
|
||||
|
||||
// Count file types
|
||||
const mp4Count = songs.filter(song => song.file_type === 'MP4').length;
|
||||
const mp3Count = songs.filter(song => song.file_type === 'MP3').length;
|
||||
|
||||
// Get unique artists from current page (this is a simplified count)
|
||||
const uniqueArtists = new Set(songs.map(song => song.artist)).size;
|
||||
|
||||
document.getElementById('mp4Count').textContent = mp4Count;
|
||||
document.getElementById('mp3Count').textContent = mp3Count;
|
||||
document.getElementById('uniqueArtists').textContent = uniqueArtists;
|
||||
}
|
||||
|
||||
function updatePagination(pagination) {
|
||||
const paginationContainer = document.getElementById('pagination');
|
||||
const showingInfo = document.getElementById('showingInfo');
|
||||
const totalInfo = document.getElementById('totalInfo');
|
||||
|
||||
// Update info text
|
||||
const start = (pagination.current_page - 1) * pagination.per_page + 1;
|
||||
const end = Math.min(start + pagination.per_page - 1, pagination.total_songs);
|
||||
showingInfo.textContent = `${start}-${end}`;
|
||||
totalInfo.textContent = pagination.total_songs;
|
||||
|
||||
// Generate pagination buttons
|
||||
let paginationHtml = '';
|
||||
|
||||
// Previous button
|
||||
paginationHtml += `
|
||||
<li class="page-item ${pagination.current_page === 1 ? 'disabled' : ''}">
|
||||
<a class="page-link" href="#" onclick="changePage(${pagination.current_page - 1})">Previous</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
// Page numbers
|
||||
const startPage = Math.max(1, pagination.current_page - 2);
|
||||
const endPage = Math.min(pagination.total_pages, pagination.current_page + 2);
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
paginationHtml += `
|
||||
<li class="page-item ${i === pagination.current_page ? 'active' : ''}">
|
||||
<a class="page-link" href="#" onclick="changePage(${i})">${i}</a>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
// Next button
|
||||
paginationHtml += `
|
||||
<li class="page-item ${pagination.current_page === pagination.total_pages ? 'disabled' : ''}">
|
||||
<a class="page-link" href="#" onclick="changePage(${pagination.current_page + 1})">Next</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
paginationContainer.innerHTML = paginationHtml;
|
||||
}
|
||||
|
||||
function changePage(page) {
|
||||
currentPage = page;
|
||||
loadSongs();
|
||||
}
|
||||
|
||||
function openVideoPlayer(filePath, artist, title) {
|
||||
const modal = new bootstrap.Modal(document.getElementById('videoModal'));
|
||||
const videoPlayer = document.getElementById('videoPlayer');
|
||||
const modalTitle = document.getElementById('videoModalTitle');
|
||||
|
||||
modalTitle.textContent = `${artist} - ${title}`;
|
||||
|
||||
// Normalize the path for video playback
|
||||
const normalizedPath = normalizePath(filePath);
|
||||
const encodedPath = encodeURIComponent(normalizedPath);
|
||||
const videoUrl = `/api/video/${encodedPath}`;
|
||||
|
||||
videoPlayer.src = videoUrl;
|
||||
modal.show();
|
||||
|
||||
// Handle video errors
|
||||
videoPlayer.onerror = function() {
|
||||
console.error('Error loading video:', videoUrl);
|
||||
alert(`Error loading video: ${filePath}`);
|
||||
};
|
||||
}
|
||||
|
||||
function normalizePath(filePath) {
|
||||
// Simple path normalization - just handle :// corruption
|
||||
if (filePath.includes('://')) {
|
||||
return filePath.replace('://', ':\\');
|
||||
}
|
||||
return filePath;
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user