From d4a193119d2465f46ea78ae01cb9f6a8771bf9fd Mon Sep 17 00:00:00 2001
From: MathMan05 <mathmanrm@gmail.com>
Date: Sat, 17 Aug 2024 13:11:53 -0500
Subject: [PATCH] better img loading

---
 .dist/file.js     | 22 +++++++++++++++++++---
 webpage/file.ts   | 21 ++++++++++++++++++---
 webpage/style.css | 19 ++++++++++++++-----
 3 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/.dist/file.js b/.dist/file.js
index 2954783..5d7a689 100644
--- a/.dist/file.js
+++ b/.dist/file.js
@@ -23,20 +23,36 @@ class File {
     }
     getHTML(temp = false) {
         const src = this.proxy_url || this.url;
+        if (this.width) {
+            let scale = 1;
+            const max = 96 * 3;
+            scale = Math.max(scale, this.width / max);
+            scale = Math.max(scale, this.height / max);
+            this.width /= scale;
+            this.height /= scale;
+        }
         if (this.content_type.startsWith('image/')) {
+            const div = document.createElement("div");
             const img = document.createElement("img");
             img.classList.add("messageimg");
+            div.classList.add("messageimgdiv");
             img.onclick = function () {
                 const full = new Dialog(["img", img.src, ["fit"]]);
                 full.show();
             };
             img.src = src;
+            div.append(img);
             if (this.width) {
-                img.height = this.height;
-                img.width = this.width;
+                div.style.width = this.width + "px";
+                div.style.height = this.height + "px";
+                console.log(div, ":3");
             }
+            else {
+                console.log("really?");
+            }
+            console.log(img);
             console.log(this.width, this.height);
-            return img;
+            return div;
         }
         else if (this.content_type.startsWith('video/')) {
             const video = document.createElement("video");
diff --git a/webpage/file.ts b/webpage/file.ts
index 5153b73..21e6e25 100644
--- a/webpage/file.ts
+++ b/webpage/file.ts
@@ -26,20 +26,35 @@ class File{
     }
     getHTML(temp:boolean=false):HTMLElement{
         const src=this.proxy_url||this.url;
+        if(this.width){
+            let scale=1;
+            const max=96*3;
+            scale=Math.max(scale,this.width/max);
+            scale=Math.max(scale,this.height/max);
+            this.width/=scale;
+            this.height/=scale;
+        }
         if(this.content_type.startsWith('image/')){
+            const div=document.createElement("div")
             const img=document.createElement("img");
             img.classList.add("messageimg");
+            div.classList.add("messageimgdiv")
             img.onclick=function(){
                 const full=new Dialog(["img",img.src,["fit"]]);
                 full.show();
             }
             img.src=src;
+            div.append(img)
             if(this.width){
-                img.height=this.height;
-                img.width=this.width;
+                div.style.width=this.width+"px";
+                div.style.height=this.height+"px";
+                console.log(div,":3")
+            }else{
+                console.log("really?");
             }
+            console.log(img);
             console.log(this.width,this.height)
-            return img;
+            return div;
         }else if(this.content_type.startsWith('video/')){
             const video=document.createElement("video");
             const source=document.createElement("source");
diff --git a/webpage/style.css b/webpage/style.css
index 3e4d9ad..a4a0ced 100644
--- a/webpage/style.css
+++ b/webpage/style.css
@@ -266,10 +266,9 @@ h2 {
 
 img {
 	vertical-align: middle;
-	max-width: 3in;
-	max-height: 3in;
-	width: auto;
-	height: auto;
+	
+	
+	]: 2 / 1;
 }
 
 #page {
@@ -345,6 +344,7 @@ p {
 	text-indent: .05in;
 	width: .175in;
 	padding-right: .026in;
+	height: .175in;
 }
 
 .spacee {
@@ -763,6 +763,15 @@ textarea:focus-visible,
 .messageimg {
 	cursor: pointer;
 	user-select: none;
+	flex-shrink: 0;
+	flex-grow: 0;
+	width: 100%;
+	height: 100%;
+	]:
+	black;
+	/* aspect-ratio: 1 /20; */
+}
+.messageimgdiv{
 }
 .embedimg {
 	cursor: pointer;
@@ -1065,7 +1074,7 @@ span {
 	position: relative;
 }
 .tabbed-head{
-    background: var(--settings-hover);
+    background: var(--profile-info-bg);
 }
 .tabbed-content td{
     /* border-color: var(--textarea-bg); */