jank-client-fork/webpage/file.ts
2024-08-17 13:11:53 -05:00

144 lines
4.9 KiB
TypeScript

import { Message } from "./message.js";
import { Dialog } from "./dialog.js";
import { filejson } from "./jsontypes.js";
class File{
owner:Message;
id:string;
filename:string;
content_type:string;
width:number;
height:number;
proxy_url:string;
url:string;
size:number;
constructor(fileJSON:filejson,owner:Message){
this.owner=owner;
this.id=fileJSON.id;
this.filename=fileJSON.filename;
this.content_type=fileJSON.content_type;
this.width=fileJSON.width;
this.height=fileJSON.height;
this.url=fileJSON.url;
this.proxy_url=fileJSON.proxy_url;
this.content_type=fileJSON.content_type;
this.size=fileJSON.size;
}
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){
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 div;
}else if(this.content_type.startsWith('video/')){
const video=document.createElement("video");
const source=document.createElement("source");
source.src=src;
video.append(source);
source.type=this.content_type;
video.controls=!temp;
return video;
}else if(this.content_type.startsWith('audio/')){
const audio=document.createElement("audio");
const source=document.createElement("source");
source.src=src;
audio.append(source);
source.type=this.content_type;
audio.controls=!temp;
return audio;
}else{
return this.createunknown();
}
}
upHTML(files:Blob[],file:globalThis.File):HTMLElement{
const div=document.createElement("div");
const contained=this.getHTML(true);
div.classList.add("containedFile");
div.append(contained);
const controls=document.createElement("div");
const garbage=document.createElement("button");
garbage.textContent="🗑";
garbage.onclick=_=>{
div.remove();
files.splice(files.indexOf(file),1);
}
controls.classList.add("controls");
div.append(controls);
controls.append(garbage);
return div;
}
static initFromBlob(file:globalThis.File){
return new File({
filename:file.name,
size:file.size,
id:null,
content_type:file.type,
width:undefined,
height:undefined,
url:URL.createObjectURL(file),
proxy_url:undefined
},null)
}
createunknown():HTMLElement{
console.log("🗎")
const src=this.proxy_url||this.url;
const div=document.createElement("table");
div.classList.add("unknownfile");
const nametr=document.createElement("tr");
div.append(nametr);
const fileicon=document.createElement("td");
nametr.append(fileicon);
fileicon.append("🗎");
fileicon.classList.add("fileicon");
fileicon.rowSpan=2;
const nametd=document.createElement("td");
if(src){
const a=document.createElement("a");
a.href=src;
a.textContent=this.filename;
nametd.append(a);
}else{
nametd.textContent=this.filename;
}
nametd.classList.add("filename");
nametr.append(nametd);
const sizetr=document.createElement("tr");
const size=document.createElement("td");
sizetr.append(size);
size.textContent="Size:"+File.filesizehuman(this.size);
size.classList.add("filesize");
div.appendChild(sizetr);
return div;
}
static filesizehuman(fsize:number){
var i = fsize == 0 ? 0 : Math.floor(Math.log(fsize) / Math.log(1024));
return +((fsize / Math.pow(1024, i)).toFixed(2)) * 1 + ' ' + ['Bytes', 'Kilobytes', 'Megabytes', 'Gigabytes', 'Terabytes'][i];
}
}
export{File}