Fix client side torrent file browser

static/css/create.css

@@ -99,10 +99,34 @@ body {
 }
 
 .detectedFiles {
-	max-height: 100px;
+	max-height: 300px;
 	overflow: auto;
 }
 
+.detectedFiles div.dir .content {
+	padding-left: 10px;
+}
+
+.detectedFiles div.dir .label {
+	cursor: pointer;
+}
+
+.detectedFiles div.file .label {
+	cursor: text;
+}
+
+.detectedFiles div.dir .label.closed::before {
+	content: "📁 ";
+}
+
+.detectedFiles div.dir .label.opened::before {
+	content: "📂";
+}
+
+.detectedFiles div.file .label::before {
+	content: "🗎 ";
+}
+
 .detectedInfos h5,p {
 	display: inline;
 }

static/js/create.js

@@ -18,8 +18,9 @@ function sortCategories(categories) {
 
 function fillDetectedFilelist(file) {
 	var reader = new FileReader();
-	fileList = document.querySelectorAll(".detectedFiles ul")[0]
+	fileList = document.querySelectorAll(".detectedFiles")[0]
-	fileList.innerHTML = ""
+	fileList.querySelector(".label").innerHTML = ""
+	fileList.querySelector(".content").innerHTML = ""
 	reader.onload = function() {
 		autodetectSuccess = false
 		b = new bencode()
@@ -54,13 +55,14 @@ function fillDetectedFilelist(file) {
 		}
 
 		filesGroup = document.querySelectorAll(".filesGroup")[0]
-		if(torrentObject.info.files.length > 0) {
+		if(torrentObject["info"]["files"] != undefined && torrentObject["info"]["files"].length > 0) {
 			autodetectSuccess = true
+			rootElement = document.createElement("div")
 			for(var fileIndex = 0; fileIndex < torrentObject.info.files.length; fileIndex++){
-				newListElement = document.createElement("li")
+				path = torrentObject["info"]["files"][fileIndex]["path"]
-				newListElement.innerHTML = torrentObject.info.files[fileIndex].path[0]
+				renderFile(getRoot(), path.reverse())
-				fileList.appendChild(newListElement)
 			}
+
 		}
 
 		var detectInfosGroup = document.querySelectorAll(".detectedInfosGroup")[0]
@@ -73,6 +75,68 @@ function fillDetectedFilelist(file) {
 	reader.readAsArrayBuffer(file)
 }
 
+function renderFile(root, path) {
+	if(path.length == 0){
+		return 0
+	} else {
+		nextElement = path.pop()
+		folderName = ""
+		for(var i = 0; i < nextElement.length; i++) {
+			code = nextElement.charCodeAt(i)
+			if((code >= 97 && code <= 122) || (code >= 65 && code <= 90)) {
+				folderName = folderName + nextElement[i]
+			}
+		}
+		type = path.length > 0 ? "dir" : "file"
+		newRoot = getOrCreate(root, folderName, nextElement, type)
+		renderFile(newRoot, path)
+	}
+}
+
+function getOrCreate(root, foldername, displayname, type) {
+	var obj = root.querySelector("div." + type + "." + foldername)
+
+	if(obj == undefined || obj.length == 0){
+		element = document.createElement("div")
+		element.classList.add(type)
+		element.classList.add(foldername)
+		label = document.createElement("div")
+		label.classList.add("label")
+		label.innerHTML = displayname
+		element.appendChild(label)
+
+		if(type == "dir") {
+			label.classList.add("closed")
+			label.onclick = function() {
+				if(this.classList.contains("closed")) {
+					this.classList.remove("closed")
+					this.classList.add("opened")
+				} else if(this.classList.contains("opened")) {
+					this.classList.remove("opened")
+					this.classList.add("closed")
+				}
+				content = this.parentElement.querySelector(".content")
+				content.hidden = !content.hidden
+			}
+			content = document.createElement("div")
+			content.classList.add("content")
+			content.hidden = true
+			element.appendChild(content)
+		}
+		foobar = root
+		root = root.querySelector(".content")
+		root.appendChild(element)
+		return element
+	} else {
+		return obj
+	}
+}
+
+function getRoot() {
+	rootElement = document.querySelectorAll(".detectedFiles.fileRoot")[0]
+	return rootElement
+}
+
 function fillSubcategory(value) {
 	var subSelect = $('#subcategory')
 	var selText = $(':first-child', subSelect).text()

templates/create.html

@@ -45,9 +45,9 @@ vim: ts=2 noexpandtab
 					</div>
 					<div class="detectedGroup filesGroup">
 						<h5>{{ _("Detected files") }}:</h5>
-						<div class="detectedFiles">
+						<div class="detectedFiles fileRoot">
-							<ul>
+							<div class="label"></div>
-							</ul>
+							<div class="content"></div>
 						</div>
 					</div>
 				</div>