From e09c2545a16ac39a17058de10c9c50edaa61f20f Mon Sep 17 00:00:00 2001
From: Laura Hausmann <laura@hausmann.dev>
Date: Thu, 27 May 2021 16:48:24 +0200
Subject: [PATCH] select first element on down arrow press, cleanup

---
 webmusic.js | 352 ++++++++++++++++++++++++++--------------------------
 1 file changed, 178 insertions(+), 174 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index b61997f..4edb612 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -1,261 +1,265 @@
 '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 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();
+    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();
-				}
+    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;
+                playSong(playingItem)
+            } else {
+                togglePlayback();
+            }
+            break;
 
-		case 'r':
-			toggleRepeat();
-			break;
+        case 'r':
+            toggleRepeat();
+            break;
 
-		case 'c':
-			toggleContinue();
-			break;
+        case 'c':
+            toggleContinue();
+            break;
 
-		case 'ArrowUp':
-			selectPreviousItem();
-			break;
+        case 'ArrowUp':
+            selectPreviousItem();
+            break;
 
-		case 'ArrowDown':
-			selectNextItem();
-			break;
+        case 'ArrowDown':
+            selectNextItem();
+            break;
 
-		case 'ArrowLeft':
-			if (audioPlayer.currentTime < 10) {
-				audioPlayer.currentTime = 0;
-			} else {
-				audioPlayer.currentTime = audioPlayer.currentTime-10;
-			}
-			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 'ArrowRight':
+            audioPlayer.currentTime = audioPlayer.currentTime + 10;
+            break;
 
-		case 'Enter':
-			document.getElementById(selectedItem).click()
-			break;
+        case 'Enter':
+            document.getElementById(selectedItem).click()
+            break;
 
-		case 'Escape':
-			document.getElementById('back').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;
-	}
+        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;
+    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)
+    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('canplay', () => {
+        audioPlayer.play();
+    });
 
-	audioPlayer.addEventListener('play', () => {
-		setPlayerState('playing');
-	});
+    audioPlayer.addEventListener('play', () => {
+        setPlayerState('playing');
+    });
 
-	audioPlayer.addEventListener('pause', () => {
-		setPlayerState('paused');
-	});
+    audioPlayer.addEventListener('pause', () => {
+        setPlayerState('paused');
+    });
 
-	audioPlayer.addEventListener('error', () => {
-		setPlayerState('error loading track');
-	});
+    audioPlayer.addEventListener('error', () => {
+        setPlayerState('error loading track');
+    });
 
-	audioPlayer.addEventListener('ended', () => {
-		setPlayerState('idle');
-		nextTrack();
-	});
+    audioPlayer.addEventListener('ended', () => {
+        setPlayerState('idle');
+        nextTrack();
+    });
 
-	audioPlayer.addEventListener('timeupdate', () => {
-		updatePlayerState();
-	});
+    audioPlayer.addEventListener('timeupdate', () => {
+        updatePlayerState();
+    });
 
-	dirElements.forEach((element) => {
-		element.id = id++;
-	});
+    dirElements.forEach((element) => {
+        element.id = id++;
+    });
 
-	fileElements.forEach((element) => {
-		element.id = id++;
-		onlyDirs   = false;
+    fileElements.forEach((element) => {
+        element.id = id++;
+        onlyDirs = false;
 
-		element.addEventListener('click', (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			playSong(event.target.id);
-		});
-	});
+        element.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            playSong(event.target.id);
+        });
+    });
 
-	total = id;
-	updatePlayerState();
-	updateButtonState();
+    total = id;
+    updatePlayerState();
+    updateButtonState();
 }
 
 const setPlayerState = (state) => {
-	playerState = state;
+    playerState = state;
 
-	console.log('now in state: ' + state);
-	updatePlayerState();
+    console.log('now in state: ' + state);
+    updatePlayerState();
 }
 
 const updatePlayerState = () => {
-	let statestr = '[' + playerState;
+    let statestr = '[' + playerState;
 
-	if (!audioPlayer.paused) {
-		statestr += ' ' + formatTime(audioPlayer.currentTime) + '/' + formatTime(audioPlayer.duration);
-	}
+    if (!audioPlayer.paused) {
+        statestr += ' ' + formatTime(audioPlayer.currentTime) + '/' + formatTime(audioPlayer.duration);
+    }
 
-	statestr += ']';
-	document.getElementById('state').innerHTML = statestr;
+    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 (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');
-	}
+    if (continuous !== false) {
+        document.getElementById('continuousButton').classList.add('active');
+    } else {
+        document.getElementById('continuousButton').classList.remove('active');
+    }
 }
 
 const playSong = (id) => {
-	const element = document.getElementById(id);
+    const element = document.getElementById(id);
 
-	if (element === null) return;
-	if (element.classList.contains('dir')) return;
+    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('playing').length > 0) {
+        document.getElementsByClassName('playing')[0].classList.remove('playing');
+    }
 
-	if (document.getElementsByClassName('selected').length > 0) {
-		document.getElementsByClassName('selected')[0].classList.remove('selected');
-	}
+    if (document.getElementsByClassName('selected').length > 0) {
+        document.getElementsByClassName('selected')[0].classList.remove('selected');
+    }
 
-	audioPlayer.pause()
+    audioPlayer.pause()
 
-	playingItem = element.id;
-	element.classList.add('playing');
+    playingItem = element.id;
+    element.classList.add('playing');
 
-	audioPlayer.src = element.href;
+    audioPlayer.src = element.href;
 
-	setPlayerState('loading');
-	audioPlayer.load();
+    setPlayerState('loading');
+    audioPlayer.load();
 }
 
 const togglePlayback = () => {
-	if (audioPlayer.paused) {
-		audioPlayer.play();
-	} else {
-		audioPlayer.pause();
-	}
+    if (audioPlayer.paused) {
+        audioPlayer.play();
+    } else {
+        audioPlayer.pause();
+    }
 }
 
 const toggleRepeat = () => {
-	repeat = !repeat;
-	continuous = !repeat;
-	audioPlayer.loop = repeat;
-	updateButtonState();
+    repeat = !repeat;
+    continuous = !repeat;
+    audioPlayer.loop = repeat;
+    updateButtonState();
 }
 
 const toggleContinue = () => {
-	continuous = !continuous;
-	updateButtonState();
+    continuous = !continuous;
+    updateButtonState();
 }
 
 const previousTrack = () => {
-	if (!continuous) return;
-	if (playingItem-- === 0) playingItem = total-1;
+    if (!continuous) return;
+    if (playingItem-- === 0) playingItem = total - 1;
 
-	if (document.getElementById(playingItem).classList.contains('dir')) {
-		return previousTrack();
-	}
+    if (document.getElementById(playingItem).classList.contains('dir')) {
+        return previousTrack();
+    }
 
-	playSong(playingItem);
+    playSong(playingItem);
 }
 
 const nextTrack = () => {
-	if (!continuous) return;
-	if (++playingItem === total) playingItem = 0;
+    if (!continuous) return;
+    if (++playingItem === total) playingItem = 0;
 
-	if (document.getElementById(playingItem).classList.contains('dir')) {
-		return nextTrack();
-	}
+    if (document.getElementById(playingItem).classList.contains('dir')) {
+        return nextTrack();
+    }
 
-	playSong(playingItem);
+    playSong(playingItem);
 }
 
 const selectPreviousItem = () => {
-	if (selectedItem-- === 0) selectedItem = total-1;
-	updateSelectedItem();
+    if (selectedItem-- === 0) selectedItem = total - 1;
+    updateSelectedItem();
 }
 
 const selectNextItem = () => {
-	if (++selectedItem === total) selectedItem = 0;
-	updateSelectedItem();
+    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');
-	}
+    if (document.getElementsByClassName('selected').length > 0) {
+        document.getElementsByClassName('selected')[0].classList.remove('selected');
+    }
 
-	document.getElementById(selectedItem).classList.add('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;
+    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);