better img loading

This commit is contained in:
MathMan05 2024-08-17 13:11:53 -05:00
parent 0c0611adf2
commit d4a193119d
3 changed files with 51 additions and 11 deletions

View file

@ -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");

View file

@ -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");

View file

@ -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); */