Refactored chat. Chat now refreshes very slowly when it is not the active tab (or the window is minimized)

2 files changed, 141 insertions, 82 deletions

diff --git a/pages/chat.php b/pages/chat.php
index 4f903a8..0bc1cb5 100644
--- a/pages/chat.php
+++ b/pages/chat.php
@@ -18,36 +18,34 @@ if (!$accepted) {
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 

 <script>

-var lastID = 1;

-var chatTimerDelayUpper = 9000;

-var chatTimerDelayLower = 2000;

-var chatTimerDelay = 5000;

 

+var lastID = 1;

+const chatTimerDelayUpper = 9000;

+const chatTimerDelayLower = 2000;

+const chatTimerDelayDefault = 5000;

+const chatTimerDelayWindowHidden = 90000;

+var chatTimerDelay = chatTimerDelayDefault;

+var isChatWindowVisible = true;

 var skipNextGetChat = false;

-

 var chatBuffer = new Array();

 

 getChatTimer();

 function getChatTimer() {

 	setTimeout("getChatTimer()", chatTimerDelay);

-	if (chatTimerDelay < chatTimerDelayUpper)

-		chatTimerDelay += 150;

+	if (isChatWindowVisible)

+		chatTimerDelay = Math.min(chatTimerDelay + 300, chatTimerDelayUpper);

 	if (skipNextGetChat) {

 		skipNextGetChat = false;

 		return;

 	}

 	getChat();

+	//addChatMessage("Debug", "Chat timer called!");

 }

 

 var firstGetChat = true;

 function getChatDone(data) {

-	var items = [];

-	var p; //our prep string

 	var newChats = false;

-	

-	var lastDisplay = '';

-	var lastMessage = '';

-	

+

 	////console.log('datalength', data.length);

 	

 	if (data.length < 3 || data == 'false')

@@ -65,88 +63,35 @@ function getChatDone(data) {
 	

 		var postDate = new Date();

 		postDate.setTime(postDate.getTime() + chat.secondsSince * 1000);

-		//var timestamp = postDate.format("ddd h:MM TT");

-		//var timestamp = postDate.format("h:MM:ss");

-		var timestamp = postDate.format("hh:MM:ss");

-		var timestampDetails = postDate.format("ddd h:MM TT");

 		

 		if (!chat.message) return;

 		

-		var strClass = '';

-		if (chat.userID == userObj.ID) {

-			strClass += ' self';

-		}

-		if (chat.userID == null || chat.userID <= 0) {

-			strClass += ' server';

-			chat.displayName = 'SERVER'

-		}

-		

-		var usernameClass = '';

-		if (chat.message.indexOf("/me ") == 0) {

-			chat.message = chat.message.substring(4);

-			usernameClass = ' me';

-		}

-		

-		var isSpoiler = false;

-		if (chat.message.indexOf("/spoiler ") == 0) {

-			chat.message = chat.message.substring(9);

-			isSpoiler = true;

-		}

-		

-		if (!isSpoiler) {

-			document.title = chat.displayName+': '+chat.message.substring(0, 20)+' | Pathery Chat';

-		} else {

-			document.title = chat.displayName+': ~Spoiler~ | Pathery Chat';

-		}

-		

-		//console.log("INSIDE BUILD START");

-		p = '';

-		p = p+ " <div class='chatColumn1'>";

-		p = p+ " 	<span class='chatTimestamp' title='"+timestampDetails+"'>["+timestamp+"]</span>";

-		p = p+ "		<div class='grid_td chatBadge' style='float:left; width:35px; height:35px; background:"+chat.wallColor+" url("+linkEmblem(chat.wallEmblem, chat.wallOrientation)+");'>";

-		p = p+ "			<div style='background-color:transparent;' class='grid_td_inner grid_td_rocks'>";

-		p = p+ "			</div>";

-		p = p+ "		</div>";

-		p = p+ "	</div>";

+		var isSelf = (chat.userID == userObj.ID);

+		var isServer = false;

 		

-		p = p+ " <div class='chatColumn2'>";

 		if (chat.userID == null || chat.userID <= 0) {

-			p = p+ "<span class='chatUsername"+usernameClass+"'><a href='home'>";

-		} else {

-			p = p+ "<span class='chatUsername"+usernameClass+"'><a href='achievements?id="+chat.userID+"' style='color:"+chat.displayColor+"'>";

+			isServer = true;

+			chat.displayName = 'SERVER'

 		}

-		p = p+ chat.displayName+"</a></span>";

-		

-		if (isSpoiler == true) p = p+ "	<span class='chatText spoiler' onclick='spoil(this);'>";

-		else p = p+ "	<span class='chatText'>";

-		p = p+ chatReplaceAndEncode(chat.message);

-		p = p+ "	</span>";

-		p = p+ "	</div>";

 		

 		//Message is legitmently new or a server message?

 		if (chat.ID > lastID || typeof(chat.ID) == 'undefined') {

-			items.push('<div class="chatMessage'+strClass+'" id="C_' + chat.ID + '">' + p + '</div>');

+			addChatMessage(chat.displayName, chat.message, postDate, isSelf, isServer, chat.wallColor, chat.wallEmblem,

+				chat.wallOrientation, chat.userID, chat.displayColor, chat.ID);

 			newChats = true;

 		}

-		lastDisplay = chat.displayName

-		lastMessage = chat.message 

-		if (chat.ID > 0) lastID = chat.ID;

+		

+		//console.log("INSIDE BUILD START"); 

+		if (chat.ID > 0)

+			lastID = chat.ID;

 	});

 	

 	//console.log("BUILD DONE");

 	

-	if (newChats) {

-		if (chatTimerDelay > chatTimerDelayLower)	chatTimerDelay -= 1000;

-		

-		var elem = $("#chatContainer");

-		var atBottom = (elem.scrollTop() >= elem[0].scrollHeight - elem.outerHeight() - 1);	

-

-		$("#chatContainer").append(items.join(''));

+	if (newChats && !firstGetChat) {

+		if (isChatWindowVisible)

+			chatTimerDelay = chatTimerDelayLower;

 

-		if (atBottom || firstGetChat) {

-			$("#chatContainer").scrollTop($("#chatContainer")[0].scrollHeight);

-			firstGetChat = false;

-		}

 		if (chatIsMuted == 'false') {

 			soundManager.setVolume('charm', 20);

 			soundManager.setPan('charm', -60)

@@ -154,6 +99,72 @@ function getChatDone(data) {
 			soundManager.play('charm');

 		}

 	}

+	

+	firstGetChat = false;

+}

+

+function addChatMessage(displayName, message, postDate, isSelf, isServer, wallColor, wallEmblem, wallOrientation, userID, displayColor, chatID)

+{

+	if(!postDate)

+		postDate = new Date();

+	var timestamp = postDate.format("hh:MM:ss");

+	var timestampDetails = postDate.format("ddd h:MM TT");

+

+	var strClass = '';

+	if (isSelf)

+		strClass += ' self';

+	if (isServer)

+		strClass += ' server';

+

+	var usernameClass = '';

+	if (message.indexOf("/me ") == 0) {

+		message = message.substring(4);

+		usernameClass = ' me';

+	}

+

+	var isSpoiler = false;

+	if (message.indexOf("/spoiler ") == 0) {

+		message = message.substring(9);

+		isSpoiler = true;

+	}

+	

+	if (!isSpoiler) {

+		document.title = displayName + ': '+ message.substring(0, 20) + ' | Pathery Chat';

+	} else {

+		document.title = displayName + ': ~Spoiler~ | Pathery Chat';

+	}

+	

+	var p = '';

+	p = p+ " <div class='chatColumn1'>";

+	p = p+ " 	<span class='chatTimestamp' title='"+timestampDetails+"'>["+timestamp+"]</span>";

+	p = p+ "		<div class='grid_td chatBadge' style='float:left; width:35px; height:35px; background:"+wallColor+" url("+linkEmblem(wallEmblem, wallOrientation)+");'>";

+	p = p+ "			<div style='background-color:transparent;' class='grid_td_inner grid_td_rocks'>";

+	p = p+ "			</div>";

+	p = p+ "		</div>";

+	p = p+ "	</div>";

+

+	p = p+ " <div class='chatColumn2'>";

+	if (userID == null || userID <= 0) {

+		p = p+ "<span class='chatUsername"+usernameClass+"'><a href='home'>";

+	} else {

+		p = p+ "<span class='chatUsername"+usernameClass+"'><a href='achievements?id="+userID+"' style='color:"+displayColor+"'>";

+	}

+	p = p+ displayName+"</a></span>";

+

+	if (isSpoiler == true) p = p+ "	<span class='chatText spoiler' onclick='spoil(this);'>";

+	else p = p+ "	<span class='chatText'>";

+	p = p+ chatReplaceAndEncode(message);

+	p = p+ "	</span>";

+	p = p+ "	</div>";

+	

+	var chatContainer = $("#chatContainer");

+	var isAtBottom = (chatContainer.length == 1 && chatContainer.scrollTop() >= chatContainer[0].scrollHeight - chatContainer.outerHeight() - 1);	

+

+	chatContainer.append('<div class="chatMessage'+strClass+'" id="C_' + chatID + '">' + p + '</div>');

+

+	if (isAtBottom || firstGetChat) {

+		chatContainer.scrollTop(chatContainer[0].scrollHeight);

+	}

 }

 

 function chatReplaceAndEncode(chat) {

@@ -253,11 +264,9 @@ function sendChat() {
 }

 

 $(document).ready(function() {

-

     $('#sendChat').live("submit", function() {

         sendChat()

     });

-	 

 });

 

 function htmlEncode(value){

@@ -268,6 +277,56 @@ function htmlEncode(value){
     }

 }

 

+//Code for checking if the window is currently visible or not

+//Adapted from http://stackoverflow.com/a/1060034/238419

+$(function() {

+	var hidden = "hidden";

+

+    // Standards:

+    if (hidden in document)

+        document.addEventListener("visibilitychange", onchange);

+    else if ((hidden = "mozHidden") in document)

+        document.addEventListener("mozvisibilitychange", onchange);

+    else if ((hidden = "webkitHidden") in document)

+        document.addEventListener("webkitvisibilitychange", onchange);

+    else if ((hidden = "msHidden") in document)

+        document.addEventListener("msvisibilitychange", onchange);

+    // IE 9 and lower:

+    else if ('onfocusin' in document)

+        document.onfocusin = document.onfocusout = onchange;

+    // All others:

+    else

+        window.onpageshow = window.onpagehide 

+            = window.onfocus = window.onblur = onchange;

+

+    function onchange (evt) {

+        var eventMapIsWindowShown = { 

+                focus:true, focusin:true, pageshow:true, blur:false, focusout:false, pagehide:false 

+            };

+

+        evt = evt || window.event;

+        if (evt.type in eventMapIsWindowShown)

+            isChatWindowVisible = eventMapIsWindowShown[evt.type];

+        else   

+            isChatWindowVisible = !this[hidden];

+		

+		if(isChatWindowVisible)

+			onChatWindowShown();

+		else

+			onChatWindowHidden();

+    }

+});

+

+function onChatWindowShown()

+{

+	chatTimerDelay = chatTimerDelayDefault;

+	getChatTimer();

+}

+

+function onChatWindowHidden()

+{

+	chatTimerDelay = chatTimerDelayWindowHidden;

+}

 

 <?

 $chatMute = (isset($_COOKIE['pref_chatMute']) && $_COOKIE['pref_chatMute'] == "true");

diff --git a/pages/login.php b/pages/login.php
index c400e52..5bb1d64 100644
--- a/pages/login.php
+++ b/pages/login.php
@@ -86,7 +86,7 @@ try {
 		//TODO: This will always fail for Twitter - we need to reconsider our needs...

 		if($email == '')

 		{

-			$userProfile['op'] = $_GET['op'];

+			$userProfile['op'] = $_GET['op']; //TODO This isn't valid, whoops - but, plan on deleting anyways...

 			die(throwLoginError($userProfile, "No email provided by {$authenticator->id} - please try a different provider"));

 		}

 		createNewUser($claimedid, $display, $email);