Add folder dropping, fix rate limits

- Add folder drag and drop support
- Do expodential retrying if rate limited, allowing upload of very large drive folders
- Do not import deleted files
- Move the upload buttons to their own line
- Notify when no TJA files have been found
- Add more translations

public/src/js/customsongs.js

@@ -6,6 +6,7 @@ class CustomSongs{
 			this.getElement("view-outer").classList.add("touch-enabled")
 		}
 		this.locked = false
+		this.mode = "main"
 		
 		var tutorialTitle = this.getElement("view-title")
 		this.setAltText(tutorialTitle, strings.customSongs.title)
@@ -40,21 +41,55 @@ class CustomSongs{
 		
 		this.endButton = this.getElement("view-end-button")
 		this.setAltText(this.endButton, strings.session.cancel)
-		pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this))
+		pageEvents.add(this.endButton, ["mousedown", "touchstart"], event => this.onEnd(event, true))
 		this.items.push(this.endButton)
 		this.selected = this.items.length - 1
 		
 		this.loaderDiv = document.createElement("div")
 		this.loaderDiv.innerHTML = assets.pages["loadsong"]
 		var loadingText = this.loaderDiv.querySelector("#loading-text")
-		loadingText.appendChild(document.createTextNode(strings.loading))
-		loadingText.setAttribute("alt", strings.loading)
+		this.setAltText(loadingText, strings.loading)
+		
+		if(DataTransferItem.prototype.webkitGetAsEntry){
+			this.dropzone = document.getElementById("dropzone")
+			var dropContent = this.dropzone.getElementsByClassName("view-content")[0]
+			dropContent.innerText = strings.customSongs.dropzone
+			this.dragging = false
+			pageEvents.add(document, "dragover", event => {
+				event.preventDefault()
+				if(!this.locked){
+					event.dataTransfer.dropEffect = "copy"
+					this.dropzone.classList.add("dragover")
+					this.dragging = true
+				}else{
+					event.dataTransfer.dropEffect = "none"
+				}
+			})
+			pageEvents.add(document, "dragleave", () => {
+				this.dropzone.classList.remove("dragover")
+				this.dragging = false
+			})
+			pageEvents.add(document, "drop", this.filesDropped.bind(this))
+		}
+		
+		this.errorDiv = document.getElementById("customsongs-error")
+		pageEvents.add(this.errorDiv, ["mousedown", "touchstart"], event => {
+			if(event.target === event.currentTarget){
+				this.hideError()
+			}
+		})
+		var errorTitle = this.errorDiv.getElementsByClassName("view-title")[0]
+		this.setAltText(errorTitle, strings.customSongs.importError)
+		this.errorContent = this.errorDiv.getElementsByClassName("view-content")[0]
+		this.errorEnd = this.errorDiv.getElementsByClassName("view-end-button")[0]
+		this.setAltText(this.errorEnd, strings.tutorial.ok)
+		pageEvents.add(this.errorEnd, ["mousedown", "touchstart"], () => this.hideError(true))
 		
 		this.keyboard = new Keyboard({
 			confirm: ["enter", "space", "don_l", "don_r"],
 			previous: ["left", "up", "ka_l"],
 			next: ["right", "down", "ka_r"],
-			back: ["escape"]
+			backEsc: ["escape"]
 		}, this.keyPressed.bind(this))
 		this.gamepad = new Gamepad({
 			confirmPad: ["b", "ls", "rs"],
@@ -73,9 +108,17 @@ class CustomSongs{
 		element.setAttribute("alt", text)
 	}
 	localFolder(){
-		if(this.locked){
+		if(event){
+			if(event.type === "touchstart"){
+				event.preventDefault()
+			}else if(event.which !== 1){
+				return
+			}
+		}
+		if(this.locked || this.mode !== "main"){
 			return
 		}
+		this.changeSelected(this.linkLocalFolder)
 		this.browse.click()
 	}
 	browseChange(event){
@@ -83,6 +126,47 @@ class CustomSongs{
 		for(var i = 0; i < event.target.files.length; i++){
 			files.push(new LocalFile(event.target.files[i]))
 		}
+		this.importLocal(files)
+	}
+	filesDropped(event){
+		event.preventDefault()
+		this.dropzone.classList.remove("dragover")
+		this.dragging = false
+		if(this.locked){
+			return
+		}
+		var files = []
+		var walk = (entry, path="") => {
+			return new Promise(resolve => {
+				if(entry.isFile){
+					entry.file(file => {
+						files.push(new LocalFile(file, path + file.name))
+						return resolve()
+					}, resolve)
+				}else if(entry.isDirectory){
+					var dirReader = entry.createReader()
+					dirReader.readEntries(entries => {
+						var dirPromises = []
+						for(var i = 0; i < entries.length; i++){
+							dirPromises.push(walk(entries[i], path + entry.name + "/"))
+						}
+						return Promise.all(dirPromises).then(resolve)
+					}, resolve)
+				}else{
+					return resolve()
+				}
+			})
+		}
+		var dropPromises = []
+		for(var i = 0; i < event.dataTransfer.items.length; i++){
+			var entry = event.dataTransfer.items[i].webkitGetAsEntry()
+			if(entry){
+				dropPromises.push(walk(entry))
+			}
+		}
+		Promise.all(dropPromises).then(() => this.importLocal(files))
+	}
+	importLocal(files){
 		if(!files.length){
 			return
 		}
@@ -94,15 +178,25 @@ class CustomSongs{
 			this.browse.parentNode.reset()
 			this.locked = false
 			this.loading(false)
-			if(e !== "cancel"){
+			if(e === "nosongs"){
+				this.showError(strings.customSongs.noSongs)
+			}else if(e !== "cancel"){
 				return Promise.reject(e)
 			}
 		})
 	}
-	gdriveFolder(){
-		if(this.locked){
+	gdriveFolder(event){
+		if(event){
+			if(event.type === "touchstart"){
+				event.preventDefault()
+			}else if(event.which !== 1){
+				return
+			}
+		}
+		if(this.locked || this.mode !== "main"){
 			return
 		}
+		this.changeSelected(this.linkGdriveFolder)
 		this.locked = true
 		this.loading(true)
 		var importSongs = new ImportSongs(true)
@@ -117,13 +211,17 @@ class CustomSongs{
 			return gpicker.browse(locked => {
 				this.locked = locked
 				this.loading(locked)
+			}, error => {
+				this.showError(error)
 			})
 		}).then(files => importSongs.load(files))
 		.then(this.songsLoaded.bind(this))
 		.catch(e => {
 			this.locked = false
 			this.loading(false)
-			if(e !== "cancel"){
+			if(e === "nosongs"){
+				this.showError(strings.customSongs.noSongs)
+			}else if(e !== "cancel"){
 				return Promise.reject(e)
 			}
 		})
@@ -154,32 +252,48 @@ class CustomSongs{
 			return
 		}
 		var selected = this.items[this.selected]
-		if(name === "confirm" || name === "confirmPad"){
-			if(selected === this.endButton){
-				this.onEnd()
-			}else if(name !== "confirmPad"){
-				if(selected === this.linkLocalFolder){
-					assets.sounds["se_don"].play()
-					this.localFolder()
-				}else if(selected === this.linkGdriveFolder){
-					assets.sounds["se_don"].play()
-					this.gdriveFolder()
+		if(this.mode === "main"){
+			if(name === "confirm" || name === "confirmPad"){
+				if(selected === this.endButton){
+					this.onEnd(null, true)
+				}else if(name !== "confirmPad"){
+					if(selected === this.linkLocalFolder){
+						assets.sounds["se_don"].play()
+						this.localFolder()
+					}else if(selected === this.linkGdriveFolder){
+						assets.sounds["se_don"].play()
+						this.gdriveFolder()
+					}
+				}
+			}else if(name === "previous" || name === "next"){
+				selected.classList.remove("selected")
+				this.selected = this.mod(this.items.length, this.selected + (name === "next" ? 1 : -1))
+				this.items[this.selected].classList.add("selected")
+				assets.sounds["se_ka"].play()
+			}else if(name === "back" || name === "backEsc"){
+				if(!this.dragging || name !== "backEsc"){
+					this.onEnd()
 				}
 			}
-		}else if(name === "previous" || name === "next"){
+		}else if(this.mode === "error"){
+			if(name === "confirm" || name === "confirmPad" || name === "back" || name === "backEsc"){
+				this.hideError(name === "confirm" || name === "confirmPad")
+			}
+		}
+	}
+	changeSelected(button){
+		var selected = this.items[this.selected]
+		if(selected !== button){
 			selected.classList.remove("selected")
-			this.selected = this.mod(this.items.length, this.selected + (name === "next" ? 1 : -1))
+			this.selected = this.items.findIndex(item => item === button)
 			this.items[this.selected].classList.add("selected")
-			assets.sounds["se_ka"].play()
-		}else if(name === "back"){
-			this.onEnd()
 		}
 	}
 	mod(length, index){
 		return ((index % length) + length) % length
 	}
-	onEnd(event){
-		if(this.locked){
+	onEnd(event, confirm){
+		if(this.locked || this.mode !== "main"){
 			return
 		}
 		var touched = false
@@ -190,13 +304,32 @@ class CustomSongs{
 			}else if(event.which !== 1){
 				return
 			}
+		}else{
+			touched = this.touchEnabled
 		}
 		this.clean()
-		assets.sounds["se_don"].play()
+		assets.sounds[confirm ? "se_don" : "se_cancel"].play()
 		setTimeout(() => {
 			new SongSelect("customSongs", false, touched)
 		}, 500)
 	}
+	showError(text){
+		if(this.mode === "error"){
+			return
+		}
+		this.mode = "error"
+		this.errorContent.innerText = text
+		this.errorDiv.style.display = "flex"
+		assets.sounds["se_pause"].play()
+	}
+	hideError(confirm){
+		if(this.mode !== "error"){
+			return
+		}
+		this.mode = "main"
+		this.errorDiv.style.display = ""
+		assets.sounds[confirm ? "se_don" : "se_cancel"].play()
+	}
 	clean(){
 		this.keyboard.clean()
 		this.gamepad.clean()
@@ -208,11 +341,20 @@ class CustomSongs{
 			pageEvents.remove(this.linkGdriveFolder, ["mousedown", "touchstart"])
 		}
 		pageEvents.remove(this.endButton, ["mousedown", "touchstart"])
+		pageEvents.remove(this.errorDiv, ["mousedown", "touchstart"])
+		pageEvents.remove(this.errorEnd, ["mousedown", "touchstart"])
+		if(DataTransferItem.prototype.webkitGetAsEntry){
+			pageEvents.remove(document, ["dragover", "dragleave", "drop"])
+			delete this.dropzone
+		}
 		delete this.browse
 		delete this.linkLocalFolder
 		delete this.linkGdriveFolder
 		delete this.endButton
 		delete this.items
 		delete this.loaderDiv
+		delete this.errorDiv
+		delete this.errorContent
+		delete this.errorEnd
 	}
 }