From 2a5e8d6ec2e1640da1dd8c69d75907f296dad9fb Mon Sep 17 00:00:00 2001
From: knotteye <knotteye@airmail.cc>
Date: Sun, 25 Oct 2020 10:16:18 -0500
Subject: [PATCH] Add play button functionality for web player

---
 site/index.js      |  6 ++++++
 templates/user.njk | 10 ++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/site/index.js b/site/index.js
index 5567f3f..a5d2459 100644
--- a/site/index.js
+++ b/site/index.js
@@ -196,6 +196,12 @@ async function initPlayer(usr) {
   // Listen for error events.
   player.addEventListener('error', onErrorEvent);
 
+  video.addEventListener('play', () => {
+	document.getElementById('playbtn').style.visibility = 'hidden';
+  });
+  video.addEventListener('pause', () => {
+	document.getElementById('playbtn').style.visibility = 'visible';
+  });
   // Try to load a manifest.
   // This is an asynchronous process.
   try {
diff --git a/templates/user.njk b/templates/user.njk
index b085337..e5ebcb9 100644
--- a/templates/user.njk
+++ b/templates/user.njk
@@ -3,7 +3,7 @@
 <script src="/shaka-player.compiled.js"></script>
 <script>
 shakaPolyFilled = false;
-const manifestUri = document.location.protocol+'//'+document.location.host+'/live/{{ username }}/index.mpd';
+var manifestUri = "https://spacecowboy.cc/live/knotteye/index.mpd"//document.location.protocol+'//'+document.location.host+'/live/{{ username }}/index.mpd';
 async function initPlayer() {
   if(!shakaPolyFilled){
   	shaka.polyfill.installAll();
@@ -15,6 +15,12 @@ async function initPlayer() {
   // Listen for error events.
   player.addEventListener('error', onErrorEvent);
 
+  video.addEventListener('play', () => {
+	  document.getElementById('playbtn').style.visibility = 'hidden';
+  });
+  video.addEventListener('pause', () => {
+	  document.getElementById('playbtn').style.visibility = 'visible';
+  });
   // Try to load a manifest.
   // This is an asynchronous process.
   try {
@@ -51,7 +57,7 @@ function newPopup(url) {
 	<span style="float: left;font-size: large;"><a href="/live/{{ username }}/index.mpd">{{ username }}</a> | {{ title | escape }}</b></span><span style="float: right;font-size: large;"> Links | <a href="rtmp://{{ domain }}/live/{{ username }}">Watch</a> <a href="JavaScript:newPopup('/chat?room={{ username }}');">Chat</a> <a href="/vods/{{ username }}">VODs</a></span>
 	<div id="jscontainer">
 		<div id="jschild" style="width: 70%;height: 100%;position: relative;">
-			<image src="/play.svg" alt="Play Stream" style="width:100%;height:100%;width: 950px;height: 534px;position: absolute;"></image>
+			<image id="playbtn" src="/play.svg" alt="Play Stream" style="width:100%;height:100%;width: 950px;height: 534px;position: absolute;" onclick="document.getElementById('video').paused ? document.getElementById('video').play() : document.getElementById('video')	.pause();"></image>
 			<video id="video" style="width:100%;height:100%;width: 950px;height: 534px;background-color: rgb(0, 0, 0);" poster="/thumbnail.jpg" autoplay onclick="this.paused ? this.play() : this.pause();"></video>
 		</div>
 		<div id="jschild" class="webchat" style="width: 30%;height: 100%;position: relative;">