Spaces:

MySafeCode
/

HTML-SUNO-Archive-Player

Running

App Files Files Community

MySafeCode commited on 19 days ago

Commit

ac29d9e

verified ·

1 Parent(s): 8a195a1

Update index.html

Browse files

Files changed (1) hide show

index.html +630 -19

index.html CHANGED Viewed

@@ -1,19 +1,630 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>1hit.no Playlist Player</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+            color: #333;
+        }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+        header {
+            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+        h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+        }
+        .controls {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            padding: 20px;
+            background: #f5f5f5;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        .btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 50px;
+            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
+        }
+        .btn.active {
+            background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);
+            box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2);
+        }
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 0;
+            min-height: 500px;
+        }
+        @media (max-width: 768px) {
+            .main-content {
+                grid-template-columns: 1fr;
+            }
+        }
+        .playlist-container {
+            border-right: 1px solid #e0e0e0;
+            display: flex;
+            flex-direction: column;
+        }
+        .playlist-header {
+            padding: 20px;
+            background: #f9f9f9;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        .playlist {
+            flex: 1;
+            overflow-y: auto;
+            max-height: 400px;
+        }
+        .playlist-item {
+            padding: 15px 20px;
+            border-bottom: 1px solid #eee;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .playlist-item:hover {
+            background-color: #f5f5f5;
+        }
+        .playlist-item.active {
+            background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
+            border-left: 4px solid #6a11cb;
+        }
+        .track-image {
+            width: 50px;
+            height: 50px;
+            border-radius: 8px;
+            object-fit: cover;
+            background: #e0e0e0;
+        }
+        .track-info {
+            flex: 1;
+        }
+        .track-title {
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+        .track-details {
+            font-size: 0.9em;
+            color: #666;
+        }
+        .player-container {
+            display: flex;
+            flex-direction: column;
+            padding: 30px;
+            background: #fafafa;
+        }
+        .current-track {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .current-image {
+            width: 200px;
+            height: 200px;
+            border-radius: 15px;
+            object-fit: cover;
+            margin: 0 auto 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .current-title {
+            font-size: 1.5em;
+            font-weight: 700;
+            margin-bottom: 10px;
+            color: #333;
+        }
+        .current-artist {
+            color: #666;
+            font-size: 1.1em;
+        }
+        .player-controls {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            align-items: center;
+        }
+        .progress-container {
+            width: 100%;
+            margin: 20px 0;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 6px;
+            background: #e0e0e0;
+            border-radius: 3px;
+            cursor: pointer;
+            overflow: hidden;
+        }
+        .progress {
+            height: 100%;
+            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+            width: 0%;
+            border-radius: 3px;
+            transition: width 0.1s;
+        }
+        .time-display {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.9em;
+            color: #666;
+            margin-top: 5px;
+        }
+        .control-buttons {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+        .control-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 10px;
+            border-radius: 50%;
+            transition: background-color 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .control-btn:hover {
+            background-color: rgba(106, 17, 203, 0.1);
+        }
+        .play-pause {
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+            color: white;
+        }
+        .play-pause:hover {
+            transform: scale(1.05);
+        }
+        .lyrics-container {
+            margin-top: 30px;
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid #e0e0e0;
+        }
+        .lyrics-title {
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #333;
+        }
+        .lyrics-content {
+            line-height: 1.6;
+            color: #555;
+            white-space: pre-wrap;
+        }
+        .status {
+            text-align: center;
+            padding: 20px;
+            color: #666;
+        }
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #e0e0e0;
+            border-top-color: #6a11cb;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🎵 1hit.no Playlist</h1>
+            <p>Stream your favorite tracks</p>
+        </header>
+        <div class="controls">
+            <button id="shuffleBtn" class="btn">🔀 Shuffle</button>
+            <button id="repeatBtn" class="btn">🔁 Repeat Off</button>
+            <button id="refreshBtn" class="btn">🔄 Refresh Playlist</button>
+        </div>
+        <div class="main-content">
+            <div class="playlist-container">
+                <div class="playlist-header">
+                    <h2>Playlist (<span id="trackCount">0</span> tracks)</h2>
+                </div>
+                <div id="playlist" class="playlist">
+                    <!-- Playlist items will be added here -->
+                </div>
+            </div>
+            <div class="player-container">
+                <div class="current-track">
+                    <img id="currentImage" class="current-image" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkaWVudCkiLz48dGV4dCB4PSIxMDAiIHk9IjEwMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIFRyYWNrIFNlbGVjdGVkPC90ZXh0PjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzY2N2VlYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc2NGJhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9zdmc+">
+                    <h2 id="currentTitle" class="current-title">No Track Selected</h2>
+                    <p id="currentArtist" class="current-artist">Select a track from the playlist</p>
+                </div>
+                <div class="player-controls">
+                    <div class="progress-container">
+                        <div class="progress-bar" id="progressBar">
+                            <div class="progress" id="progress"></div>
+                        </div>
+                        <div class="time-display">
+                            <span id="currentTime">0:00</span>
+                            <span id="duration">0:00</span>
+                        </div>
+                    </div>
+                    <div class="control-buttons">
+                        <button class="control-btn" id="prevBtn">⏮</button>
+                        <button class="control-btn play-pause" id="playPauseBtn">▶</button>
+                        <button class="control-btn" id="nextBtn">⏭</button>
+                    </div>
+                </div>
+                <div class="lyrics-container">
+                    <div class="lyrics-title">Lyrics</div>
+                    <div id="lyricsContent" class="lyrics-content">
+                        Lyrics will appear here when available...
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="status" class="status">
+            <span class="loading"></span> Loading playlist...
+        </div>
+    </div>
+    <script>
+        class PlaylistPlayer {
+            constructor() {
+                this.playlist = [];
+                this.currentTrackIndex = -1;
+                this.isPlaying = false;
+                this.isShuffled = false;
+                this.isRepeating = false;
+                this.originalPlaylist = [];
+                this.audio = new Audio();
+                this.audio.crossOrigin = "anonymous";
+                this.initElements();
+                this.initEventListeners();
+                this.loadPlaylist();
+            }
+            initElements() {
+                this.elements = {
+                    playlist: document.getElementById('playlist'),
+                    currentImage: document.getElementById('currentImage'),
+                    currentTitle: document.getElementById('currentTitle'),
+                    currentArtist: document.getElementById('currentArtist'),
+                    playPauseBtn: document.getElementById('playPauseBtn'),
+                    prevBtn: document.getElementById('prevBtn'),
+                    nextBtn: document.getElementById('nextBtn'),
+                    progressBar: document.getElementById('progressBar'),
+                    progress: document.getElementById('progress'),
+                    currentTime: document.getElementById('currentTime'),
+                    duration: document.getElementById('duration'),
+                    lyricsContent: document.getElementById('lyricsContent'),
+                    shuffleBtn: document.getElementById('shuffleBtn'),
+                    repeatBtn: document.getElementById('repeatBtn'),
+                    refreshBtn: document.getElementById('refreshBtn'),
+                    trackCount: document.getElementById('trackCount'),
+                    status: document.getElementById('status')
+                };
+            }
+            initEventListeners() {
+                this.elements.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.elements.prevBtn.addEventListener('click', () => this.prevTrack());
+                this.elements.nextBtn.addEventListener('click', () => this.nextTrack());
+                this.elements.progressBar.addEventListener('click', (e) => this.seek(e));
+                this.elements.shuffleBtn.addEventListener('click', () => this.toggleShuffle());
+                this.elements.repeatBtn.addEventListener('click', () => this.toggleRepeat());
+                this.elements.refreshBtn.addEventListener('click', () => this.loadPlaylist());
+                this.audio.addEventListener('timeupdate', () => this.updateProgress());
+                this.audio.addEventListener('ended', () => this.nextTrack());
+                this.audio.addEventListener('loadedmetadata', () => this.updateDuration());
+                this.audio.addEventListener('error', (e) => console.error('Audio error:', e));
+            }
+            async loadPlaylist() {
+                try {
+                    this.elements.status.innerHTML = '<span class="loading"></span> Loading playlist...';
+                    // Load database.json
+                    const response = await fetch('https://1hit.no/gen/database.json');
+                    const database = await response.json();
+                    this.playlist = [];
+                    this.originalPlaylist = [];
+                    // Process each track in database
+                    for (const [taskId, trackData] of Object.entries(database)) {
+                        try {
+                            // Load callback JSON for this track
+                            const callbackResponse = await fetch(`https://1hit.no/gen/callbacks/${taskId}.json`);
+                            const callbackData = await callbackResponse.json();
+                            const track = {
+                                id: taskId,
+                                url: trackData.url || '',
+                                title: callbackData.title || 'Unknown Title',
+                                artist: callbackData.artist || 'Unknown Artist',
+                                image: callbackData.image || null,
+                                lyrics: callbackData.lyrics || null,
+                                duration: callbackData.duration || 0
+                            };
+                            this.playlist.push(track);
+                            this.originalPlaylist.push(track);
+                        } catch (error) {
+                            console.warn(`Failed to load track ${taskId}:`, error);
+                        }
+                    }
+                    this.renderPlaylist();
+                    this.elements.trackCount.textContent = this.playlist.length;
+                    this.elements.status.textContent = `Loaded ${this.playlist.length} tracks`;
+                    if (this.playlist.length > 0) {
+                        this.selectTrack(0);
+                    }
+                } catch (error) {
+                    console.error('Failed to load playlist:', error);
+                    this.elements.status.textContent = 'Error loading playlist';
+                }
+            }
+            renderPlaylist() {
+                this.elements.playlist.innerHTML = '';
+                this.playlist.forEach((track, index) => {
+                    const item = document.createElement('div');
+                    item.className = `playlist-item ${index === this.currentTrackIndex ? 'active' : ''}`;
+                    item.innerHTML = `
+                        <img src="${track.image || 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjNjY3ZWVhIi8+PHRleHQgeD0iMjUiIHk9IjI1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+Tk88L3RleHQ+PC9zdmc+'}"
+                             alt="${track.title}" class="track-image">
+                        <div class="track-info">
+                            <div class="track-title">${track.title}</div>
+                            <div class="track-details">${track.artist}</div>
+                        </div>
+                    `;
+                    item.addEventListener('click', () => this.selectTrack(index));
+                    this.elements.playlist.appendChild(item);
+                });
+            }
+            selectTrack(index) {
+                if (index < 0 || index >= this.playlist.length) return;
+                this.currentTrackIndex = index;
+                const track = this.playlist[index];
+                // Update UI
+                this.elements.currentTitle.textContent = track.title;
+                this.elements.currentArtist.textContent = track.artist;
+                this.elements.currentImage.src = track.image || 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkaWVudCkiLz48dGV4dCB4PSIxMDAiIHk9IjEwMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPiR7dHJhY2sudGl0bGV9PC90ZXh0PjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzY2N2VlYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc2NGJhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9zdmc+';
+                this.elements.lyricsContent.textContent = track.lyrics || 'No lyrics available for this track.';
+                // Update playlist highlights
+                this.renderPlaylist();
+                // Load and play audio
+                this.audio.src = track.url;
+                this.audio.load();
+                this.play();
+            }
+            togglePlay() {
+                if (!this.audio.src) return;
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+            play() {
+                if (!this.audio.src && this.playlist.length > 0) {
+                    this.selectTrack(0);
+                }
+                this.audio.play()
+                    .then(() => {
+                        this.isPlaying = true;
+                        this.elements.playPauseBtn.textContent = '⏸';
+                    })
+                    .catch(error => {
+                        console.error('Playback failed:', error);
+                        this.elements.status.textContent = 'Playback failed. Trying next track...';
+                        setTimeout(() => this.nextTrack(), 1000);
+                    });
+            }
+            pause() {
+                this.audio.pause();
+                this.isPlaying = false;
+                this.elements.playPauseBtn.textContent = '▶';
+            }
+            nextTrack() {
+                if (this.playlist.length === 0) return;
+                let nextIndex = this.currentTrackIndex + 1;
+                if (nextIndex >= this.playlist.length) {
+                    if (this.isRepeating) {
+                        nextIndex = 0;
+                    } else {
+                        return; // End of playlist
+                    }
+                }
+                this.selectTrack(nextIndex);
+            }
+            prevTrack() {
+                if (this.playlist.length === 0 || this.currentTrackIndex <= 0) return;
+                this.selectTrack(this.currentTrackIndex - 1);
+            }
+            toggleShuffle() {
+                this.isShuffled = !this.isShuffled;
+                if (this.isShuffled) {
+                    // Shuffle the playlist
+                    const currentTrack = this.playlist[this.currentTrackIndex];
+                    const shuffled = [...this.playlist];
+                    for (let i = shuffled.length - 1; i > 0; i--) {
+                        const j = Math.floor(Math.random() * (i + 1));
+                        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+                    }
+                    // Keep current track at the same position
+                    const currentIndex = shuffled.findIndex(track => track.id === currentTrack.id);
+                    if (currentIndex > 0) {
+                        [shuffled[0], shuffled[currentIndex]] = [shuffled[currentIndex], shuffled[0]];
+                    }
+                    this.playlist = shuffled;
+                    this.currentTrackIndex = 0;
+                    this.elements.shuffleBtn.classList.add('active');
+                } else {
+                    // Restore original order
+                    const currentTrack = this.playlist[this.currentTrackIndex];
+                    this.playlist = [...this.originalPlaylist];
+                    this.currentTrackIndex = this.playlist.findIndex(track => track.id === currentTrack.id);
+                    this.elements.shuffleBtn.classList.remove('active');
+                }
+                this.renderPlaylist();
+            }
+            toggleRepeat() {
+                this.isRepeating = !this.isRepeating;
+                this.elements.repeatBtn.textContent = this.isRepeating ? '🔁 Repeat On' : '🔁 Repeat Off';
+                this.elements.repeatBtn.classList.toggle('active', this.isRepeating);
+            }
+            updateProgress() {
+                if (!isNaN(this.audio.duration)) {
+                    const progress = (this.audio.currentTime / this.audio.duration) * 100;
+                    this.elements.progress.style.width = `${progress}%`;
+                    this.elements.currentTime.textContent = this.formatTime(this.audio.currentTime);
+                }
+            }
+            updateDuration() {
+                if (!isNaN(this.audio.duration)) {
+                    this.elements.duration.textContent = this.formatTime(this.audio.duration);
+                }
+            }
+            formatTime(seconds) {
+                const mins = Math.floor(seconds / 60);
+                const secs = Math.floor(seconds % 60);
+                return `${mins}:${secs.toString().padStart(2, '0')}`;
+            }
+            seek(e) {
+                if (!isNaN(this.audio.duration)) {
+                    const rect = this.elements.progressBar.getBoundingClientRect();
+                    const pos = (e.clientX - rect.left) / rect.width;
+                    this.audio.currentTime = pos * this.audio.duration;
+                }
+            }
+        }
+        // Initialize the player when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            window.player = new PlaylistPlayer();
+        });
+    </script>
+</body>
+</html>