teams ; resize if large image

steveseguin · Dec 26, 2023 · d0c911b · d0c911b
1 parent 087ab86
commit d0c911b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 22 deletions.
diff --git a/emotes.html b/emotes.html
@@ -634,7 +634,7 @@
 							this.src = this.srcBackup;
 							this.srcBackup = null;
 							delete this.srcBackup;
-						} else if (this.alt.length!==2){
+						} else if (!this.alt || (this.alt.length!==2)){
 							this.style.display='none';
 							this.remove();
 						} else {

diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
   "name": "Social Stream Ninja",
   "description": "Powerful tooling to engage live chat on Youtube, Twitch, Zoom, and more",
   "manifest_version": 2,
-  "version": "1.67.9",
+  "version": "1.67.10",
   "homepage_url": "http://socialstream.ninja/",
   "icons": {
     "128": "icons/icon-128.png"

diff --git a/teams.js b/teams.js
@@ -1,23 +1,48 @@
 (function () {
-	function toDataURL(blobUrl, callback) {
+	function toDataURL(blobUrl, callback, maxSizeKB = 10) {
 		var xhr = new XMLHttpRequest;
 		xhr.responseType = 'blob';
 
 		xhr.onload = function() {
-		   var recoveredBlob = xhr.response;
+			var recoveredBlob = xhr.response;
 
-		   var reader = new FileReader;
+			if (recoveredBlob.size / 1024 > maxSizeKB) { // Check if image size is greater than maxSizeKB
+				var img = new Image();
 
-		   reader.onload = function() {
-			 callback(reader.result);
-		   };
+				img.onload = function() {
+					var canvas = document.createElement('canvas');
+					var ctx = canvas.getContext('2d');
+
+					// Resize logic (example: 250x250)
+					var maxSideSize = 250;
+					var ratio = Math.min(maxSideSize / img.width, maxSideSize / img.height);
+					canvas.width = img.width * ratio;
+					canvas.height = img.height * ratio;
+
+					ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+					// Convert to base64, can choose format and quality
+					var newDataUrl = canvas.toDataURL('image/jpeg', 0.7);
+					callback(newDataUrl);
+				};
+
+				var urlCreator = window.URL || window.webkitURL;
+				img.src = urlCreator.createObjectURL(recoveredBlob);
+			} else {
+				// If image is not too large, use original
+				var reader = new FileReader();
+
+				reader.onload = function() {
+					callback(reader.result);
+				};
 
-		   reader.readAsDataURL(recoveredBlob);
+				reader.readAsDataURL(recoveredBlob);
+			}
 		};
 
 		xhr.open('GET', blobUrl);
 		xhr.send();
-	};
+	}
 
 	var lastMessage = {};
 	var lastName = "";

diff --git a/waitlist.html b/waitlist.html
@@ -571,15 +571,16 @@
 		document.documentElement.style.setProperty("--outline", "0px");
 	}
 
-	function hideImage(e){
-		if (this.srcBackup){
-			this.src = this.srcBackup;
-			this.srcBackup = null;
-			delete this.srcBackup;
-		} else if (this.alt.length!==2){
-			this.classList.add("spacer");
+	function hideImage(ele){
+		if (ele.srcBackup){
+			ele.src = ele.srcBackup;
+			ele.srcBackup = null;
+			delete ele.srcBackup;
+		} else if (!ele.alt || (ele.alt.length!==2)){
+			ele.style.display='none';
+			ele.remove();
 		} else {
-			this.outerHTML = this.alt;
+			ele.outerHTML = ele.alt;
 		}
 	}
 
@@ -634,19 +635,19 @@
 						}
 						let extraData = "";
 						if (showsource){
-							extraData = "<img onerror='hideImage' src='"+data.waitlist[i].type+".png'>";
+							extraData = "<img onerror='hideImage(this)' src='"+data.waitlist[i].type+".png'>";
 						}
 						if (randomize){
 							var nodes = document.getElementById("waitlist").childNodes;
 							var choice = randomNumber(0,nodes.length+1);
 							if (choice == 0){
-								document.getElementById("waitlist").innerHTML = "<div class='guestListHolder "+classAdd+"'>"+extraData+"<img onerror='hideImage' src='"+data.waitlist[i].chatimg+"'>"+data.waitlist[i].chatname+"</div>" + document.getElementById("waitlist").innerHTML;
+								document.getElementById("waitlist").innerHTML = "<div class='guestListHolder "+classAdd+"'>"+extraData+"<img onerror='hideImage(this)' src='"+data.waitlist[i].chatimg+"'>"+data.waitlist[i].chatname+"</div>" + document.getElementById("waitlist").innerHTML;
 							} else {
-								nodes[choice-1].outerHTML = nodes[choice-1].outerHTML+"<div class='guestListHolder "+classAdd+"'>"+extraData+"<img onerror='hideImage' src='"+data.waitlist[i].chatimg+"'>"+data.waitlist[i].chatname+"</div>";
+								nodes[choice-1].outerHTML = nodes[choice-1].outerHTML+"<div class='guestListHolder "+classAdd+"'>"+extraData+"<img onerror='hideImage(this)' src='"+data.waitlist[i].chatimg+"'>"+data.waitlist[i].chatname+"</div>";
 							}
 						} else {
 							if (data.waitlist[i].chatimg){
-								document.getElementById("waitlist").innerHTML += "<div class='guestListHolder "+classAdd+"'>"+extraData+"<img onerror='hideImage' src='"+data.waitlist[i].chatimg+"'>"+data.waitlist[i].chatname+"</div>";
+								document.getElementById("waitlist").innerHTML += "<div class='guestListHolder "+classAdd+"'>"+extraData+"<img onerror='hideImage(this)' src='"+data.waitlist[i].chatimg+"'>"+data.waitlist[i].chatname+"</div>";
 							} else {
 								document.getElementById("waitlist").innerHTML += "<div class='guestListHolder "+classAdd+"'>"+extraData+"<div class='spacer'></div>"+data.waitlist[i].chatname+"</div>";
 							}