Hugging Face's logo

Spaces:
Chrunos
/
ytmsc
Running

App Files Community
ytmsc
File size: 2,771 Bytes 
6e9c0b4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
let player;
let currentPlaylist = [];
let currentTrackIndex = 0;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '0',
        width: '0',
        playerVars: {
            'playsinline': 1,
            'controls': 0
        },
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.ENDED) {
        nextTrack();
    }
    updatePlayPauseButton();
}

function updatePlayPauseButton() {
    const btn = document.getElementById('playPauseBtn');
    if (player && player.getPlayerState() === YT.PlayerState.PLAYING) {
        btn.textContent = 'Pause';
    } else {
        btn.textContent = 'Play';
    }
}

function search() {
    const query = document.getElementById('searchInput').value;
    fetch('/search', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ query: query })
    })
    .then(response => response.json())
    .then(data => {
        displaySearchResults(data);
    })
    .catch(error => console.error('Error:', error));
}

function displaySearchResults(results) {
    const container = document.getElementById('searchResults');
    container.innerHTML = '';
    
    results.forEach((song, index) => {
        const div = document.createElement('div');
        div.className = 'song-item';
        div.innerHTML = `
            <strong>${song.title}</strong> - ${song.artists[0].name}
        `;
        div.onclick = () => playSong(song, index, results);
        container.appendChild(div);
    });
}

function playSong(song, index, playlist) {
    currentPlaylist = playlist;
    currentTrackIndex = index;
    
    const videoId = song.videoId;
    document.getElementById('currentSongTitle').textContent = `${song.title} - ${song.artists[0].name}`;
    document.getElementById('player-container').classList.remove('d-none');
    
    player.loadVideoById(videoId);
    player.playVideo();
}

function togglePlayPause() {
    if (player) {
        if (player.getPlayerState() === YT.PlayerState.PLAYING) {
            player.pauseVideo();
        } else {
            player.playVideo();
        }
    }
}

function nextTrack() {
    if (currentPlaylist.length > 0) {
        currentTrackIndex = (currentTrackIndex + 1) % currentPlaylist.length;
        playSong(currentPlaylist[currentTrackIndex], currentTrackIndex, currentPlaylist);
    }
}

function previousTrack() {
    if (currentPlaylist.length > 0) {
        currentTrackIndex = (currentTrackIndex - 1 + currentPlaylist.length) % currentPlaylist.length;
        playSong(currentPlaylist[currentTrackIndex], currentTrackIndex, currentPlaylist);
    }
}