+ comment thread display support

webroot/comments.shs

@@ -1,16 +1,43 @@
 #!/bin/bash
 
-vid="$(curl -b cookiejar_ -H "Cookie: CONSENT=YES+1337" -s "https://www.youtube.com/watch?v=${get_data[v]}" -c cookiejar_)" # broken comment support, we need this for now
-	
-cont="$(grep -Poh 'token":"Eg0S.*?"' <<< "$vid" | sed -E 's/token"://;s/"//g')" #'
+if [[ "${get_data[v]}" == '' && "${get_data[cont]}" == '' ]]; then
+	echo "pffft"
+	return
+fi
+
+if [[ "${get_data[cont]}" == '' ]]; then # tactical replies, INCOMING
+	vid="$(curl -b cookiejar_ -H "Cookie: CONSENT=YES+1337" -s "https://www.youtube.com/watch?v=${get_data[v]}" -c cookiejar_)"
+	cont="$(grep -Poh 'token":"Eg0S.*?"' <<< "$vid" | sed -E 's/token"://;s/"//g')" #'
+else
+	cont="${get_data[cont]}"	
+fi
+
 comments="$(curl -s 'https://www.youtube.com/youtubei/v1/next?key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8' \
 	--compressed -H 'Content-Type: application/json' \
 	--data-raw '{"context":{"client":{"hl":"en","gl":"GB","clientName":"WEB","clientVersion":"2.20210719.00.00","mainAppWebInfo":{}},"adSignalsInfo":{"params":[]}},"continuation":"'"$cont"'"}' \
-	| jq '.onResponseReceivedEndpoints[].reloadContinuationItemsCommand.continuationItems[]')"
+	| jq '.onResponseReceivedEndpoints[] |
+		if(.reloadContinuationItemsCommand != null) then
+			.reloadContinuationItemsCommand.continuationItems[]
+		else
+			.appendContinuationItemsAction.continuationItems[]
+		end')"
 
 
-	jq -r '"<h3>\(.commentsHeaderRenderer.countText.runs[0].text) Comments</h3>"' <<< "$comments" | head -1
-	jq -r '.commentThreadRenderer.comment.commentRenderer | select(.authorText.simpleText != null) |
-		"</div><div class='"'"'comment'"'"'><a href='"'"'\(.authorEndpoint.commandMetadata.webCommandMetadata.url)'"'"'><img src='"'"'\(.authorThumbnail.thumbnails[0].url)'"'"'>\(.authorText.simpleText)</a><br>",
-		(.contentText.runs[] | if .bold == true then "<b>\(.text)</b>" else .text end)' <<< "$comments" | sed -E 's/^$/<br>/g'
+	jq -r 'select(.commentsHeaderRenderer) | "<h3>(whole \(.commentsHeaderRenderer.countText.runs[0].text) of them)</h3>"' <<< "$comments" | head -1
+	jq -r 'if (.commentThreadRenderer != null) then
+			.commentThreadRenderer | select(.comment.commentRenderer.authorText.simpleText != null)
+		else
+			.commentRenderer
+		end | (
+			if (.comment.commentRenderer != null) then
+				.comment.commentRenderer
+			else
+				.
+			end |
+				"</pre></div><div class='"'"'comment'"'"'><a href='"'"'\(.authorEndpoint.commandMetadata.webCommandMetadata.url)'"'"'><img src='"'"'\(.authorThumbnail.thumbnails[0].url)'"'"'>\(.authorText.simpleText)</a> \(.publishedTimeText.runs[].text)<br><pre>",
+				(.contentText.runs[] | if .bold == true then "<b>\(.text)</b>" else .text end),
+				(select(.voteCount.simpleText != null) | "<br><small>\(.voteCount.simpleText) liked</small>")
+		),
+		(select(.replies.commentRepliesRenderer) | "<div class='"'"'show-more'"'"' data-uwu='"'"'\(.replies.commentRepliesRenderer.contents[0].continuationItemRenderer.continuationEndpoint.continuationCommand.token)'"'"'>Show replies</div>")
+		' <<< "$comments" | sed -E 's/^$/<br>/g'
 

webroot/css/style.css

@@ -2,12 +2,16 @@
 	font-family: sans-serif;
 }
 pre {
+	margin-top: 3px;
 	white-space: pre-wrap;
 }
 .comment {
 	margin-top: 5px;
 	margin-bottom: 15px;
 }
+.comment-thread, .show-more {
+	margin-left: 16px;
+}
 
 .hide-cursor {
 	cursor: none;

webroot/js/watch.js

@@ -1,17 +1,43 @@
 window.addEventListener("load", () => {
 	const comments = document.querySelector(".comments");
 	const id = new URLSearchParams(document.location.search).get("v");
-	comments.innerText = "Loading...";
-	fetch("/comments.shs?v=" + id).then(
-		res => {
-			if (res.status !== 200) {
-				throw new Error('HTTP Error ' + res.status);
-			}
-			return res.text();
+
+	function showMore(e) {
+		let a = e.target.cloneNode(true);
+		a.classList.remove("show-more");
+		a.classList.add("comment-thread");
+		e.target.replaceWith(a);
+		fetchComments(a, a.dataset.uwu);
+	}
+
+	function fetchComments(div, cont) {
+		div.innerText = "Loading...";
+		if(!cont) {
+			url = "/comments.shs?v=" + id;
+		} else {
+			url = "/comments.shs?cont=" + cont;
 		}
-	).then(
-		res => comments.innerHTML = res
-	).catch(
-		err => comments.innerText = 'Error during fetching comments: ' + err.message
-	)
+		fetch(url).then(
+			res => {
+				if (res.status !== 200) {
+					throw new Error('HTTP Error ' + res.status);
+				}
+				return res.text();
+			}
+		).then(
+			res => {
+				div.innerHTML = res;
+				if(!cont) {
+					let show_more = document.querySelectorAll(".show-more");
+					show_more.forEach((elem) => {
+						elem.addEventListener("click", (e) => showMore(e));
+					});
+				}
+			}
+		).catch(
+			err => div.innerText = 'Error during fetching comments: ' + err.message
+		)
+	}
+
+	fetchComments(comments);
 })