bashtube/webroot/yt/watch.shs

#!/bin/bash

# fetching recommended disabled for speed

#for i in $(curl https://www.youtube.com/watch?v=${get_data[v]} | grep -ohE "watch\?v\=[A-zaz0-9]{11}" | uniq | cut -c 9-19); do
#	echo "<div><img src='http://i.ytimg.com/vi/$i/hqdefault.jpg'><br><audio src='$(youtube-dl -g -f 251 $i)' controls></audio></div>";
#done

if [[ ${get_data[v]} ]]; then
	video=$(youtube-dl -J "http://youtube.com/watch?v=${get_data[v]}")
	if [[ $video == '' ]]; then 
		video=$(youtube-dl -J "http://youtube.com/watch?v=${get_data[v]}")
		if [[ $video == '' ]]; then
			return
		 fi
	fi
	#echo "http://youtube.com/watch?v=${get_data[v]}" > /dev/stderr
	channel_id=$(echo $video | jq -r '.channel_url' | sed -s 's/http:\/\/www.youtube.com\/channel\///')
	uploader=$(echo $video | jq -r '.uploader')
	title=$(echo $video | jq -r '.title')
	meta[title]=$title
	source templates/head.sh
	IFS=$'\n'
	urls=($(echo $video | jq -r '.formats[] | select(.format_id == "22" or .format_id == "18").url'))
	unset IFS
	if [[ ${urls[1]} != '' ]]; then
		url=${urls[1]}
	else
		url=${urls[0]}
	fi
	echo "<form action='search.shs'>
	<input name='q' type='text'>
	<input type='submit' value='Search'>
	</form>
	<div><br>"

	source webroot/yt/player.shs

	#<video id='player' src='$url' controls></video>
	echo "<h2>$title</h2>
	<div>
		<div>
			Uploaded by <b><a href='channel.shs?id=$channel_id'>$uploader</a></b> on <b>$(date -d "$(echo $video | jq -r '.upload_date' | sed -E 's/..../&-/;s/....-../&-/')" "+%d %B %Y")</b>
		</div>
		<div>
			<b>$(echo $video | jq -r '.view_count')</b> views<br>
			<b>$(echo $video | jq -r '.like_count')</b> likes, <b>$(echo $video | jq -r '.dislike_count')</b> dislikes.<br>"
			if [[ ${cookies[sh_session]} ]]; then
				if [[ $(cat storage/faves | grep $(echo -n ${cookies[username]} | sed -E 's/\r//g') | grep ${get_data[v]}) == '' ]]; then
					echo "<a href='fav.shs?v=$(echo ${get_data[v]} | sed -s 's/<//g;')' target='_blank'>Add to favourites</a><br>"
				else
					echo "<a href='unfav.shs?v=$(echo ${get_data[v]} | sed -s 's/<//g;')' target='_blank'>Remove from favourites</a><br>"
				fi
				if [[ $(cat storage/subscribed | grep $(echo -n ${cookies[username]} | sed -E 's/\r//g') | grep $channel_id) == '' ]]; then
					echo "<a href='subscribe.shs?id=$channel_id' target='_blank'>Subscribe to $uploader!</a><br>"
				else
					echo "<a href='unsubscribe.shs?id=$channel_id' target='_blank'>Unsubscribe from $uploader</a><br>"
				fi
			else
				echo "<b><a href='/login.shs?r=$(echo ${r[url]} | sed -s 's/?/___/')'>Log in</a> to add this video to your favourites and/or subscribe to this channel!</b><br>"
			fi
			echo "<br><br>
		</div>
	</div>
	<span><i>Description</i>:<br>$(echo $video | jq -r '.description' | sed -E 's/$/<br>/g')</span>
	</div>";

	if [[ ${get_data[playlist]} ]]; then
		playlist=$(youtube-dl -j --flat-playlist https://www.youtube.com/playlist?list=${get_data[playlist]})
	
		IFS=$'\n'
		video_title=($(jq -r '.title' <<< $playlist))
		video_id=($(jq -r '.id' <<< $playlist))

		next='dQw4w9WgXcQ'
		
		for (( i=0; i<${#video_id[@]}; i++ )); do
			if [[ ${video_id[$i]} == ${get_data[v]} ]]; then
				next=${video_id[$((i+1))]}
				break
			fi
		done

		echo "<script type='text/javascript'>
		window.addEventListener('DOMContentLoaded', (event) => {
			var video = document.getElementById('player');
			// video.play();
			video.addEventListener('ended',function(){
				window.location = 'watch.shs?v=$next&playlist=${get_data[playlist]}';
			});
		});
		</script><h1>Playlist</h1>"
	
		for (( i=0; i<${#video_id[@]}; i++ )); do
			echo "<a href='watch.shs?v=${video_id[$i]}&playlist=${get_data[playlist]}'><img src='http://i.ytimg.com/vi/${video_id[$i]}/mqdefault.jpg'><br>${video_title[$i]}</a><br>"
		done
	fi

	echo "<script type='text/javascript'>
	 		window.addEventListener('DOMContentLoaded', (event) => {
	 			var video = document.getElementById('player');
	 			function toggleVideo() {
	 				if (video.paused) {
	 					const classList = document.querySelector('.ytp-button-play').classList;
	 					classList.remove('ytp-button-play');
	 					classList.add('ytp-button-pause');
	 					return video.play();
	 				} else {
	 					const classList = document.querySelector('.ytp-button-pause').classList;
	 					classList.remove('ytp-button-pause');
	 					classList.add('ytp-button-play');
	 					return video.pause();
	 				}
	 			}
	 			function updateTime() {
	 				v = document.querySelector('.html5-main-video');
	 				document.querySelector('.ytp-time-current').innerHTML = Math.round(v.currentTime/60)+':'+Math.round(v.currentTime%60).toString().padStart(2, '0');
	 				document.querySelector('.ytp-time-duration').innerHTML = Math.round(v.duration/60)+':'+Math.round(v.duration%60).toString().padStart(2, '0');
	 				document.querySelector('.ytp-play-progress').style.transform='scaleX('+v.currentTime/v.duration+')';
	 				document.querySelector('.html5-scrubber-button').style.left=v.currentTime/v.duration*100+'%';
	 			}
	 			toggleVideo();
	 	//		document.querySelector('.ytp-button-play').addEventListener('click', () => toggleVideo());
	 			document.querySelector('.ytp-button-pause').addEventListener('click', () => toggleVideo());
	 			document.querySelector('.html5-main-video').addEventListener('timeupdate', () => updateTime());
	 		});
	 		</script>" 
else
	source templates/head.sh
	echo "pls add ?v param i'm still WiP"
fi