Cleanup

- PWA support (needs https)
- Optimize websocket responses
- Support `/ad` for youtube cache
- New icon!

6 files changed, 82 insertions, 32 deletions

diff --git a/res/client.js b/res/client.js
index ac32132..9629980 100644
--- a/res/client.js
+++ b/res/client.js
@@ -556,8 +556,12 @@ client_Buttons.init = function(main) {
 	if(client_Buttons.settings.isSwapped) {
 		client_Buttons.swapPlayerAndChat();
 	}
-	client_Buttons.initSplit();
-	client_Buttons.setSplitSize(client_Buttons.settings.chatSize);
+	var tmp = client_Buttons.split;
+	if(tmp != null) {
+		tmp.destroy();
+	}
+	client_Buttons.split = new client_Split(client_Buttons.settings);
+	client_Buttons.split.setSize(client_Buttons.settings.chatSize);
 	client_Buttons.initChatInputs(main);
 	var _g = 0;
 	var _g1 = client_Buttons.settings.checkboxes;
@@ -801,14 +805,14 @@ client_Buttons.init = function(main) {
 			var request = window.fetch("/upload",{ method : "POST", headers : { "content-name" : haxe_io_Path.withoutExtension(name), "client-name" : main.personal.name}, body : buffer});
 			request.then(function(e) {
 				return e.json().then(function(data) {
-					haxe_Log.trace(data.info,{ fileName : "src/client/Buttons.hx", lineNumber : 274, className : "client.Buttons", methodName : "init"});
+					haxe_Log.trace(data.info,{ fileName : "src/client/Buttons.hx", lineNumber : 276, className : "client.Buttons", methodName : "init"});
 					if(data.errorId == null) {
 						return;
 					}
 					main.serverMessage(data.info,true,false);
 				});
 			}).catch(function(err) {
-				haxe_Log.trace(err,{ fileName : "src/client/Buttons.hx", lineNumber : 279, className : "client.Buttons", methodName : "init"});
+				haxe_Log.trace(err,{ fileName : "src/client/Buttons.hx", lineNumber : 281, className : "client.Buttons", methodName : "init"});
 				return haxe_Timer.delay(function() {
 					main.hideDynamicChin();
 				},500);
@@ -897,29 +901,6 @@ client_Buttons.swapPlayerAndChat = function() {
 	sizes.reverse();
 	window.document.body.style.gridTemplateColumns = sizes.join(" ");
 };
-client_Buttons.initSplit = function() {
-	if(client_Buttons.split != null) {
-		client_Buttons.split.destroy();
-	}
-	client_Buttons.split = new Split({ columnGutters : [{ element : window.document.querySelector(".gutter"), track : 1}], minSize : 200, snapOffset : 0, onDragEnd : client_Buttons.saveSplitSize});
-};
-client_Buttons.setSplitSize = function(chatSize) {
-	if(chatSize < 200) {
-		return;
-	}
-	var sizes = window.document.body.style.gridTemplateColumns.split(" ");
-	sizes[client_Buttons.settings.isSwapped ? 0 : sizes.length - 1] = "" + chatSize + "px";
-	window.document.body.style.gridTemplateColumns = sizes.join(" ");
-};
-client_Buttons.saveSplitSize = function() {
-	var sizes = window.document.body.style.gridTemplateColumns.split(" ");
-	if(client_Buttons.settings.isSwapped) {
-		sizes.reverse();
-	}
-	var tmp = parseFloat(sizes[sizes.length - 1]);
-	client_Buttons.settings.chatSize = tmp;
-	client_Settings.write(client_Buttons.settings);
-};
 client_Buttons.initTextButtons = function(main) {
 	window.document.querySelector("#synchThresholdBtn").onclick = function(e) {
 		var secs = client_Buttons.settings.synchThreshold + 1;
@@ -3321,10 +3302,14 @@ client_Player.prototype = {
 		if(tmp == null) {
 			return;
 		}
-		if(!this.youtube.isSupportedLink(tmp.url)) {
-			return;
+		var itemUrl = tmp.url;
+		if(!this.youtube.isSupportedLink(itemUrl)) {
+			itemUrl = StringTools.replace(itemUrl,"/cache/","youtu.be/");
+			if(!this.youtube.isSupportedLink(itemUrl)) {
+				return;
+			}
 		}
-		var http = new haxe_http_HttpJs("https://sponsor.ajay.app/api/skipSegments?videoID=" + this.youtube.extractVideoId(tmp.url));
+		var http = new haxe_http_HttpJs("https://sponsor.ajay.app/api/skipSegments?videoID=" + this.youtube.extractVideoId(itemUrl));
 		http.onData = function(text) {
 			var json;
 			try {
@@ -3345,7 +3330,7 @@ client_Player.prototype = {
 			}
 		};
 		http.onError = function(msg) {
-			haxe_Log.trace(msg,{ fileName : "src/client/Player.hx", lineNumber : 652, className : "client.Player", methodName : "skipAd"});
+			haxe_Log.trace(msg,{ fileName : "src/client/Player.hx", lineNumber : 656, className : "client.Player", methodName : "skipAd"});
 		};
 		http.request();
 	}
@@ -3443,6 +3428,33 @@ client_Settings.write = function(data) {
 	}
 	client_Settings.storage.setItem("data",JSON.stringify(data));
 };
+var client_Split = function(settings) {
+	this.settings = settings;
+	this.split = new Split({ columnGutters : [{ element : window.document.querySelector(".gutter"), track : 1}], minSize : 200, snapOffset : 0, onDragEnd : $bind(this,this.saveSize)});
+};
+client_Split.__name__ = true;
+client_Split.prototype = {
+	setSize: function(chatSize) {
+		if(chatSize < 200) {
+			return;
+		}
+		var sizes = window.document.body.style.gridTemplateColumns.split(" ");
+		sizes[this.settings.isSwapped ? 0 : sizes.length - 1] = "" + chatSize + "px";
+		window.document.body.style.gridTemplateColumns = sizes.join(" ");
+	}
+	,saveSize: function() {
+		var sizes = window.document.body.style.gridTemplateColumns.split(" ");
+		if(this.settings.isSwapped) {
+			sizes.reverse();
+		}
+		var tmp = parseFloat(sizes[sizes.length - 1]);
+		this.settings.chatSize = tmp;
+		client_Settings.write(this.settings);
+	}
+	,destroy: function() {
+		this.split.destroy();
+	}
+};
 var client_Utils = function() { };
 client_Utils.__name__ = true;
 client_Utils.nativeTrace = function(msg,infos) {
diff --git a/res/css/des.css b/res/css/des.css
index d6cd5ed..f047714 100644
--- a/res/css/des.css
+++ b/res/css/des.css
@@ -761,6 +761,12 @@ footer#footer {
   background-color: var(--background-chat);
 }
 
+@media only screen and (orientation: portrait) {
+  #swapLayoutBtn {
+    display: none !important;
+  }
+}
+
 /* Message buffer */
 
 #messagebuffer {
diff --git a/res/img/favicon.png b/res/img/favicon.png
deleted file mode 100755
index 5d46d1c..0000000
--- a/res/img/favicon.png
+++ /dev/null
diff --git a/res/img/favicon.svg b/res/img/favicon.svg
new file mode 100644
index 0000000..ffed1d5
--- /dev/null
+++ b/res/img/favicon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.6.13 -->
+<svg width="601" height="601" viewBox="0 0 601 601" xmlns="http://www.w3.org/2000/svg">
+    <g id="Group">
+        <linearGradient id="linearGradient1" x1="507.329206" y1="478.444028" x2="93.671347" y2="122.680956" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#3478f6" stop-opacity="1"/>
+            <stop offset="1" stop-color="#53b6f9" stop-opacity="1"/>
+        </linearGradient>
+        <path id="Path-copy-2" fill="url(#linearGradient1)" stroke="#ffffff" stroke-width="15" visibility="hidden" d="M 593 262 C 592.394104 205.032471 569.920532 151.067017 530 110.999969 C 489.952332 70.743286 436.905975 49 380 49 L 220.999985 49 C 103.492493 49.02179 8 144.523254 8 262 C 8 379.486938 103.492493 474.968018 220.999985 475 L 338 475 C 341.091156 475 343.184906 476.902557 344 478 C 345.983307 480.652161 345.313141 483.945984 345 485 C 343.76651 489.377197 340.077087 495.119568 334 505 C 329.319885 512.750732 324.919159 519.611023 324 521 C 317.44046 530.839294 315.555847 539.69342 318 545 C 319.838196 549 324.77179 551.143799 332 552 C 334.444153 552.281189 337.781982 552 341 552 C 342.691864 552 344.558411 552.114258 346 552 C 360.999451 550.715088 381.311218 548.111694 405 541 C 439.530579 530.617737 488.246277 508.916565 528 463 C 570.531616 414.023193 593.125671 346.53949 593 267 Z"/>
+        <linearGradient id="linearGradient2" x1="507.328733" y1="478.404761" x2="93.671267" y2="122.674209" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#7234f6" stop-opacity="1"/>
+            <stop offset="1" stop-color="#f253f9" stop-opacity="1"/>
+        </linearGradient>
+        <path id="Path-copy-5" fill="url(#linearGradient2)" stroke="#ffffff" stroke-width="15" d="M 592.977661 261.792419 C 592.37207 204.854401 570.094177 151.445831 530.194336 111.399597 C 490.16745 71.163757 436.842316 49 379.965881 49 L 221.011749 49 C 103.56514 49.02179 8 144.565125 8 261.980988 C 8 379.407043 103.56514 474.971069 221.011749 475.003021 L 338.480103 475.003021 C 341.569672 475.003021 343.198975 476.307861 344.013672 477.404724 C 345.995972 480.055511 345.119568 483.773438 344.80658 484.826904 C 343.57373 489.201843 340.462463 495.287201 334.38855 505.162506 C 329.710876 512.90918 325.36795 519.434387 324.449249 520.822632 C 317.893127 530.65686 315.638824 538.987366 318.081696 544.291199 C 319.918945 548.289063 324.532715 550.753601 331.757172 551.609375 C 334.200073 551.890442 337.582031 552.078979 340.798401 552.078979 C 342.48938 552.078979 344.117584 552.026428 345.558411 551.91217 C 360.55011 550.62793 380.803467 548.246826 404.479919 541.138794 C 438.992615 530.761902 488.457092 508.765045 528.190247 462.872284 C 570.699768 413.920868 593.125122 346.03125 592.999451 266.53299 Z M 554.079956 262.177521"/>
+        <path id="Path-copy-3" fill="#ffffff" stroke="none" d="M 220 180.192719 L 220 344.807281 C 220 364.413269 227.833878 375.072723 241.407272 375.072723 C 247.942627 375.072723 255.72879 373.220764 265.029083 367.690918 L 405.28363 285.752716 C 416.846191 278.966034 423 271.16394 423 262.86908 C 423 254.574249 416.846191 246.033997 405.28363 239.247284 L 265.029083 158.047272 C 255.72879 152.517365 247.942627 149.927277 241.407272 149.927277 C 227.833878 149.927277 220 160.5867 220 180.192719 Z"/>
+    </g>
+</svg>
diff --git a/res/index.html b/res/index.html
index 4c06632..dfcbcd8 100644
--- a/res/index.html
+++ b/res/index.html
@@ -5,8 +5,11 @@
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <link rel="manifest" href="manifest.json">
   <title>SyncTube</title>
-  <link rel="icon" type="image/png" href="img/favicon.png" />
+  <link rel="icon" href="img/favicon.svg" type="image/svg+xml">
   <link id="usertheme" href="css/des.css" rel="stylesheet">
   <link id="customcss" href="css/custom.css" rel="stylesheet">
   <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@7.4.0/dist/ionicons/ionicons.esm.js"></script>
diff --git a/res/manifest.json b/res/manifest.json
new file mode 100644
index 0000000..1bdb671
--- /dev/null
+++ b/res/manifest.json
@@ -0,0 +1,12 @@
+{
+  "name": "SyncTube",
+  "display": "standalone",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "img/favicon.svg",
+      "type": "image/svg+xml",
+      "sizes": "any"
+    }
+  ]
+}