webmusic/webmusic.js

'use strict';

const audioPlayer = new Audio();
let selectedItem = 0;
let playingItem = 0;
let playerState = 'idle';
let continuous = true;
let repeat = false;
let total = 0;
let onlyDirs = true;

const handleKeyEvent = (event) => {
    if (event.ctrlKey === true || event.altKey === true || event.metaKey === true) return;
    event.preventDefault();
    event.stopPropagation();

    switch (event.key) {
        case ' ':
        case 'p':
            if (onlyDirs !== false) return;
            if (playerState === 'idle' && total !== 0) {
                if (document.getElementById(playingItem).classList.contains('dir')) {
                    return nextTrack();
                }

                playSong(playingItem)
            } else {
                togglePlayback();
            }
            break;

        case '>':
            nextTrack();
            break;

        case '<':
            previousTrack();
            break;

        case 'r':
            toggleRepeat();
            break;

        case 'c':
            toggleContinue();
            break;

        case 'ArrowUp':
            selectPreviousItem();
            break;

        case 'ArrowDown':
            selectNextItem();
            break;

        case 'ArrowLeft':
            if (audioPlayer.currentTime < 10) {
                audioPlayer.currentTime = 0;
            } else {
                audioPlayer.currentTime = audioPlayer.currentTime - 10;
            }
            break;

        case 'ArrowRight':
            audioPlayer.currentTime = audioPlayer.currentTime + 10;
            break;

        case 'Enter':
            if (document.activeElement.href) {
                document.activeElement.click();
            } else {
                document.getElementById(selectedItem).click();
            }
            break;

        case 'Escape':
            document.getElementById('back').click();
            break;

        case '0':
        case '1':
        case '2':
        case '3':
        case '4':
        case '5':
        case '6':
        case '7':
        case '8':
        case '9':
            audioPlayer.currentTime = audioPlayer.duration / 100 * (event.key * 10);
            break;
    }
};

const initState = () => {
    const dirElements = document.querySelectorAll('.dir');
    const fileElements = document.querySelectorAll('.file');
    let id = 0;

    document.getElementById('state').addEventListener('click', togglePlayback)
    document.getElementById('repeatButton').addEventListener('click', toggleRepeat)
    document.getElementById('continuousButton').addEventListener('click', toggleContinue)

    audioPlayer.addEventListener('canplay', () => {
        audioPlayer.play();
    });

    audioPlayer.addEventListener('play', () => {
        setPlayerState('playing');
    });

    audioPlayer.addEventListener('pause', () => {
        setPlayerState('paused');
    });

    audioPlayer.addEventListener('error', () => {
        setPlayerState('error loading track');
    });

    audioPlayer.addEventListener('ended', () => {
        setPlayerState('idle');
        nextTrack();
    });

    audioPlayer.addEventListener('timeupdate', () => {
        updatePlayerState();
    });

    dirElements.forEach((element) => {
        element.id = id++;
    });

    fileElements.forEach((element) => {
        element.id = id++;
        onlyDirs = false;

        element.addEventListener('click', (event) => {
            event.preventDefault();
            event.stopPropagation();
            playSong(event.target.id);
        });
    });

    total = id;
    updatePlayerState();
    updateButtonState();
}

const setPlayerState = (state) => {
    playerState = state;

    console.log('now in state: ' + state);
    updatePlayerState();
}

const updatePlayerState = () => {
    let statestr = '[' + playerState;

    if (!audioPlayer.paused) {
        statestr += ' ' + formatTime(audioPlayer.currentTime) + '/' + formatTime(audioPlayer.duration);
    }

    statestr += ']';
    document.getElementById('state').innerHTML = statestr;
}

const updateButtonState = () => {
    if (repeat !== false) {
        document.getElementById('repeatButton').classList.add('active');
    } else {
        document.getElementById('repeatButton').classList.remove('active');
    }

    if (continuous !== false) {
        document.getElementById('continuousButton').classList.add('active');
    } else {
        document.getElementById('continuousButton').classList.remove('active');
    }
}

const playSong = (id) => {
    const element = document.getElementById(id);

    if (element === null) return;
    if (element.classList.contains('dir')) return;

    if (document.getElementsByClassName('playing').length > 0) {
        document.getElementsByClassName('playing')[0].classList.remove('playing');
    }

    if (document.getElementsByClassName('selected').length > 0) {
        document.getElementsByClassName('selected')[0].classList.remove('selected');
    }

    audioPlayer.pause()

    playingItem = element.id;
    element.classList.add('playing');

    audioPlayer.src = element.href;

    setPlayerState('loading');
    audioPlayer.load();
}

const togglePlayback = () => {
    if (audioPlayer.paused) {
        audioPlayer.play();
    } else {
        audioPlayer.pause();
    }
}

const toggleRepeat = () => {
    repeat = !repeat;
    continuous = !repeat;
    audioPlayer.loop = repeat;
    updateButtonState();
}

const toggleContinue = () => {
    continuous = !continuous;
    updateButtonState();
}

const previousTrack = () => {
    if (!continuous) return;
    if (playingItem-- === 0) playingItem = total - 1;

    if (document.getElementById(playingItem).classList.contains('dir')) {
        return previousTrack();
    }

    playSong(playingItem);
}

const nextTrack = () => {
    if (!continuous) return;
    if (++playingItem === total) playingItem = 0;

    if (document.getElementById(playingItem).classList.contains('dir')) {
        return nextTrack();
    }

    playSong(playingItem);
}

const selectPreviousItem = () => {
    if (selectedItem-- === 0) selectedItem = total - 1;
    updateSelectedItem();
}

const selectNextItem = () => {
    if (selectedItem === 0 && document.getElementsByClassName('selected').length === 0) {
        document.getElementById(selectedItem).classList.add('selected');
    } else {
        if (++selectedItem === total) selectedItem = 0;
        updateSelectedItem();
    }
}

const updateSelectedItem = () => {
    if (document.getElementsByClassName('selected').length > 0) {
        document.getElementsByClassName('selected')[0].classList.remove('selected');
    }

    document.getElementById(selectedItem).classList.add('selected');
}

const formatTime = (secs) => {
    secs = Math.round(secs);
    const minutes = Math.floor(secs / 60) || 0;
    const seconds = (secs - minutes * 60) || 0;
    return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
}

document.addEventListener('DOMContentLoaded', initState);
document.addEventListener('keydown', handleKeyEvent);

function copyToClipboard(str) {
    navigator.clipboard.writeText(str);
}