DannyArends · December 27, 2020 20:21
diff --git a/twitchoverlay.html b/twitchoverlay.html
 <!DOCTYPE HTML>
 <head>
  <title>DannyArendsTwitchOverlayApp</title>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
  <script src="js/secret.js"></script> <!-- Contains startTwitch function which calls getAppToken with Client-ID and Client-Secret -->
  <script>

    var audio1 = new Audio('Audio/teleport.mp3');
    var audio2 = new Audio('Audio/fireball.mp3');
    var viewers = -1;

    /* Helper functions */
    function capitalize(str) { return(str.charAt(0).toUpperCase() + str.toLowerCase().slice(1)) }
    function createAuthorization(token) { return(capitalize(token.token_type) + " " + token.access_token); }
    
    /* Generate an application token */
    function getAppToken(id, secret) {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "https://id.twitch.tv/oauth2/token?grant_type=client_credentials&client_id=" + id + "&client_secret=" + secret, true);
      xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v3+json");

      xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) { getChannelInfo(id, JSON.parse(xhr.responseText)); }
      }
      xhr.onerror = function(error){ console.log(error.target.status); };
      xhr.send();
    }

    /* Get Channel information */
    function getChannelInfo(id, token) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "https://api.twitch.tv/helix/channels?broadcaster_id=517507998", true);
      xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v3+json");
      xhr.setRequestHeader("Client-ID", id);
      xhr.setRequestHeader("Authorization", createAuthorization(token));
          
      xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
          var obj = JSON.parse(xhr.responseText);
          if(obj.data.length > 0) {
            console.log(obj.data[0]);
            setInterval(function(){ getStreamInfo(id, token, obj.data[0].broadcaster_name); }, 4000);
          }
        }
      }
          
      xhr.onerror = function(error){ console.log(error.target.status); };
      xhr.send();
    }

    /* Get Stream information of username */
    function getStreamInfo(id, token, username) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "https://api.twitch.tv/helix/streams?user_login=" + username, true);
      xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v3+json");
      xhr.setRequestHeader("Client-ID", id);
      xhr.setRequestHeader("Authorization", createAuthorization(token));
          
      xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
          var now = new Date();
          var obj = JSON.parse(xhr.responseText);
          var infoDiv = document.getElementById("info");
          var errorDiv = document.getElementById("error");
          var streamerDiv = document.getElementById("streamer");
          if(obj.data.length > 0) {
            infoDiv.style.display = "inline";  
            errorDiv.style.display = "none";            
            //console.log(obj.data[0]);

            var titleDiv = document.getElementById('title');
            titleDiv.innerHTML = obj.data[0].title;

            var viewerDiv = document.getElementById('viewers');
            viewerDiv.innerHTML = obj.data[0].viewer_count;
            if(viewers > obj.data[0].viewer_count){
              if(viewers != -1) audio1.play();
              viewers = obj.data[0].viewer_count;
            }
            if(viewers < obj.data[0].viewer_count){
              if(viewers != -1) audio2.play();
              viewers = obj.data[0].viewer_count;
            }
            var sTimeDiv = document.getElementById('sTime');
            diff = (now - Date.parse(obj.data[0].started_at));
            var hours   = Math.floor(diff / 3.6e6);
            var minutes = ('0' + Math.floor((diff % 3.6e6) / 6e4)).slice(-2);
            var seconds = ('0' + Math.floor((diff % 6e4) / 1000)).slice(-2);
            
            sTimeDiv.innerHTML = hours + ':' +  minutes + ':' + seconds;
          }else{
            infoDiv.style.display = "none";
            errorDiv.style.display = "block";
            var streamerErrorDiv = document.getElementById("streamerError");
            streamerErrorDiv.innerHTML = username;
          }
          streamerDiv.innerHTML = username;
          var lastUpdatedDiv = document.getElementById('lastUpdated');
          lastUpdatedDiv.innerHTML = now.toUTCString();
        }
      }
          
      xhr.onerror = function(error){ console.log(error.target.status); };
      xhr.send();
    }
  </script>
 </head>
 <body style="color:gray;font-size:150%;" onload="startTwitch()">
 <marquee>
  <div id="info" style="display:none">
    Streamer: <div id="streamer" style="display:inline"></div> | 
    Title: <div id="title" style="display:inline"></div> |
    Viewers: <div id="viewers" style="display:inline"></div> |
    Streamed for: <div id="sTime" style="display:inline"></div>
  </div>
  <div id="error" style="display:none">
    <div id="streamerError" style="display:inline"></div> is not streaming <font style="font-size:30%;">Last Updated: <div id="lastUpdated" style="display:inline"></div></style>
  </div>
 </marquee>
 </body>
	<!DOCTYPE HTML>
	<head>
	<title>DannyArendsTwitchOverlayApp</title>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
	<script src="js/secret.js"></script> <!-- Contains startTwitch function which calls getAppToken with Client-ID and Client-Secret -->
	<script>

	var audio1 = new Audio('Audio/teleport.mp3');
	var audio2 = new Audio('Audio/fireball.mp3');
	var viewers = -1;

	/* Helper functions */
	function capitalize(str) { return(str.charAt(0).toUpperCase() + str.toLowerCase().slice(1)) }
	function createAuthorization(token) { return(capitalize(token.token_type) + " " + token.access_token); }

	/* Generate an application token */
	function getAppToken(id, secret) {
	var xhr = new XMLHttpRequest();
	xhr.open("POST", "https://id.twitch.tv/oauth2/token?grant_type=client_credentials&client_id=" + id + "&client_secret=" + secret, true);
	xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v3+json");

	xhr.onreadystatechange = function() {
	if (xhr.readyState == XMLHttpRequest.DONE) { getChannelInfo(id, JSON.parse(xhr.responseText)); }
	}
	xhr.onerror = function(error){ console.log(error.target.status); };
	xhr.send();
	}

	/* Get Channel information */
	function getChannelInfo(id, token) {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", "https://api.twitch.tv/helix/channels?broadcaster_id=517507998", true);
	xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v3+json");
	xhr.setRequestHeader("Client-ID", id);
	xhr.setRequestHeader("Authorization", createAuthorization(token));

	xhr.onreadystatechange = function() {
	if (xhr.readyState == XMLHttpRequest.DONE) {
	var obj = JSON.parse(xhr.responseText);
	if(obj.data.length > 0) {
	console.log(obj.data[0]);
	setInterval(function(){ getStreamInfo(id, token, obj.data[0].broadcaster_name); }, 4000);
	}
	}
	}

	xhr.onerror = function(error){ console.log(error.target.status); };
	xhr.send();
	}

	/* Get Stream information of username */
	function getStreamInfo(id, token, username) {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", "https://api.twitch.tv/helix/streams?user_login=" + username, true);
	xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v3+json");
	xhr.setRequestHeader("Client-ID", id);
	xhr.setRequestHeader("Authorization", createAuthorization(token));

	xhr.onreadystatechange = function() {
	if (xhr.readyState == XMLHttpRequest.DONE) {
	var now = new Date();
	var obj = JSON.parse(xhr.responseText);
	var infoDiv = document.getElementById("info");
	var errorDiv = document.getElementById("error");
	var streamerDiv = document.getElementById("streamer");
	if(obj.data.length > 0) {
	infoDiv.style.display = "inline";
	errorDiv.style.display = "none";
	//console.log(obj.data[0]);

	var titleDiv = document.getElementById('title');
	titleDiv.innerHTML = obj.data[0].title;

	var viewerDiv = document.getElementById('viewers');
	viewerDiv.innerHTML = obj.data[0].viewer_count;
	if(viewers > obj.data[0].viewer_count){
	if(viewers != -1) audio1.play();
	viewers = obj.data[0].viewer_count;
	}
	if(viewers < obj.data[0].viewer_count){
	if(viewers != -1) audio2.play();
	viewers = obj.data[0].viewer_count;
	}
	var sTimeDiv = document.getElementById('sTime');
	diff = (now - Date.parse(obj.data[0].started_at));
	var hours = Math.floor(diff / 3.6e6);
	var minutes = ('0' + Math.floor((diff % 3.6e6) / 6e4)).slice(-2);
	var seconds = ('0' + Math.floor((diff % 6e4) / 1000)).slice(-2);

	sTimeDiv.innerHTML = hours + ':' + minutes + ':' + seconds;
	}else{
	infoDiv.style.display = "none";
	errorDiv.style.display = "block";
	var streamerErrorDiv = document.getElementById("streamerError");
	streamerErrorDiv.innerHTML = username;
	}
	streamerDiv.innerHTML = username;
	var lastUpdatedDiv = document.getElementById('lastUpdated');
	lastUpdatedDiv.innerHTML = now.toUTCString();
	}
	}

	xhr.onerror = function(error){ console.log(error.target.status); };
	xhr.send();
	}
	</script>
	</head>
	<body style="color:gray;font-size:150%;" onload="startTwitch()">
	<marquee>
	<div id="info" style="display:none">
	Streamer: <div id="streamer" style="display:inline"></div> \|
	Title: <div id="title" style="display:inline"></div> \|
	Viewers: <div id="viewers" style="display:inline"></div> \|
	Streamed for: <div id="sTime" style="display:inline"></div>
	</div>
	<div id="error" style="display:none">
	<div id="streamerError" style="display:inline"></div> is not streaming <font style="font-size:30%;">Last Updated: <div id="lastUpdated" style="display:inline"></div></style>
	</div>
	</marquee>
	</body>