OJT/player.js at main · Ananya-Kaushal137/OJT · GitHub

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
// Playback functions

// Play/Pause
function togglePlayback() {
    if (isPlaying) {
        isPlaying = false;
        playBtn.querySelector('.btn-text').textContent = 'Play';
        playBtn.querySelector('.btn-icon').textContent = '▶';
        statusText.textContent = 'Paused';
    } else {
        isPlaying = true;
        playBtn.querySelector('.btn-text').textContent = 'Pause';
        playBtn.querySelector('.btn-icon').textContent = '⏸';
        statusText.textContent = 'Playing';
        playMessages();
    }
}

// Restart
function restartPlayback() {
    currentIndex = 0;
    slider.value = 0;
    chatWindow.innerHTML = '';
    currentTime.textContent = '00:00';
    if (isPlaying) {
        isPlaying = false;
        playBtn.querySelector('.btn-text').textContent = 'Play';
        playBtn.querySelector('.btn-icon').textContent = '▶';
    }
}

// Play messages
function playMessages() {
    if (!isPlaying || currentIndex >= chatData.length) {
        isPlaying = false;
        return;
    }

    var msg = chatData[currentIndex];
    showMessage(msg);
    slider.value = currentIndex;
    currentTime.textContent = formatTime(currentIndex);
    currentIndex++;

    setTimeout(playMessages, 1000 / speed);
}

// Show message
function showMessage(msg) {
    var div = document.createElement('div');
    div.style.cssText = 'display:flex;gap:1rem;padding:1rem;margin-bottom:0.75rem;background:rgba(0,224,255,0.08);border-left:3px solid #00e0ff;border-radius:8px;';

    var text = msg.text || msg.message || '';
    var name = msg.sender || 'User';
    var letter = name.charAt(0).toUpperCase();
    var color = getColor(name);

    div.innerHTML = '<div style="width:40px;height:40px;border-radius:50%;background:' + color + ';display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;">' + letter + '</div><div style="flex:1;"><div style="color:#00e0ff;margin-bottom:0.25rem;">' + name + '</div><div style="color:#fff;">' + text + '</div></div>';

    chatWindow.appendChild(div);
    div.animate([{opacity:0,transform:'translateX(-20px)'},{opacity:1,transform:'translateX(0)'}], {duration:300});
    chatWindow.scrollTop = chatWindow.scrollHeight;
}