add video embeds
This commit is contained in:
parent
c282c6c6f6
commit
715eae7ff2
3 changed files with 65 additions and 8 deletions
|
@ -20,6 +20,8 @@ class Embed {
|
||||||
return this.generateImage();
|
return this.generateImage();
|
||||||
case "link":
|
case "link":
|
||||||
return this.generateLink();
|
return this.generateLink();
|
||||||
|
case "video":
|
||||||
|
console.log(this);
|
||||||
case "article":
|
case "article":
|
||||||
return this.generateArticle();
|
return this.generateArticle();
|
||||||
default:
|
default:
|
||||||
|
@ -209,11 +211,35 @@ class Embed {
|
||||||
}
|
}
|
||||||
if (this.json.thumbnail) {
|
if (this.json.thumbnail) {
|
||||||
const img = document.createElement("img");
|
const img = document.createElement("img");
|
||||||
|
if (this.json.thumbnail.width && this.json.thumbnail.width) {
|
||||||
|
let scale = 1;
|
||||||
|
const inch = 96;
|
||||||
|
scale = Math.max(scale, this.json.thumbnail.width / inch / 4);
|
||||||
|
scale = Math.max(scale, this.json.thumbnail.height / inch / 3);
|
||||||
|
this.json.thumbnail.width /= scale;
|
||||||
|
this.json.thumbnail.height /= scale;
|
||||||
|
img.style.width = this.json.thumbnail.width + "px";
|
||||||
|
img.style.height = this.json.thumbnail.height + "px";
|
||||||
|
}
|
||||||
img.classList.add("bigembedimg");
|
img.classList.add("bigembedimg");
|
||||||
img.onclick = function () {
|
if (this.json.video) {
|
||||||
const full = new Dialog(["img", img.src, ["fit"]]);
|
img.onclick = async () => {
|
||||||
full.show();
|
img.remove();
|
||||||
};
|
const iframe = document.createElement("iframe");
|
||||||
|
iframe.src = this.json.video.url;
|
||||||
|
if (this.json.thumbnail.width && this.json.thumbnail.width) {
|
||||||
|
iframe.style.width = this.json.thumbnail.width + "px";
|
||||||
|
iframe.style.height = this.json.thumbnail.height + "px";
|
||||||
|
}
|
||||||
|
div.append(iframe);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
img.onclick = async () => {
|
||||||
|
const full = new Dialog(["img", img.src, ["fit"]]);
|
||||||
|
full.show();
|
||||||
|
};
|
||||||
|
}
|
||||||
img.src = this.json.thumbnail.proxy_url || this.json.thumbnail.url;
|
img.src = this.json.thumbnail.proxy_url || this.json.thumbnail.url;
|
||||||
div.append(img);
|
div.append(img);
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,6 +23,8 @@ class Embed{
|
||||||
return this.generateImage();
|
return this.generateImage();
|
||||||
case"link":
|
case"link":
|
||||||
return this.generateLink();
|
return this.generateLink();
|
||||||
|
case "video":
|
||||||
|
console.log(this);
|
||||||
case"article":
|
case"article":
|
||||||
return this.generateArticle();
|
return this.generateArticle();
|
||||||
default:
|
default:
|
||||||
|
@ -217,11 +219,34 @@ class Embed{
|
||||||
}
|
}
|
||||||
if(this.json.thumbnail){
|
if(this.json.thumbnail){
|
||||||
const img=document.createElement("img");
|
const img=document.createElement("img");
|
||||||
|
if(this.json.thumbnail.width&&this.json.thumbnail.width){
|
||||||
|
let scale=1;
|
||||||
|
const inch=96;
|
||||||
|
scale=Math.max(scale,this.json.thumbnail.width/inch/4);
|
||||||
|
scale=Math.max(scale,this.json.thumbnail.height/inch/3);
|
||||||
|
this.json.thumbnail.width/=scale;
|
||||||
|
this.json.thumbnail.height/=scale;
|
||||||
|
img.style.width=this.json.thumbnail.width+"px";
|
||||||
|
img.style.height=this.json.thumbnail.height+"px";
|
||||||
|
}
|
||||||
img.classList.add("bigembedimg");
|
img.classList.add("bigembedimg");
|
||||||
img.onclick=function(){
|
if(this.json.video){
|
||||||
const full=new Dialog(["img",img.src,["fit"]]);
|
img.onclick=async ()=>{
|
||||||
full.show();
|
img.remove();
|
||||||
};
|
const iframe=document.createElement("iframe");
|
||||||
|
iframe.src=this.json.video.url;
|
||||||
|
if(this.json.thumbnail.width&&this.json.thumbnail.width){
|
||||||
|
iframe.style.width=this.json.thumbnail.width+"px";
|
||||||
|
iframe.style.height=this.json.thumbnail.height+"px";
|
||||||
|
}
|
||||||
|
div.append(iframe);
|
||||||
|
};
|
||||||
|
}else{
|
||||||
|
img.onclick=async ()=>{
|
||||||
|
const full=new Dialog(["img",img.src,["fit"]]);
|
||||||
|
full.show();
|
||||||
|
};
|
||||||
|
}
|
||||||
img.src=this.json.thumbnail.proxy_url||this.json.thumbnail.url;
|
img.src=this.json.thumbnail.proxy_url||this.json.thumbnail.url;
|
||||||
div.append(img);
|
div.append(img);
|
||||||
}
|
}
|
||||||
|
|
|
@ -332,6 +332,12 @@ type embedjson={
|
||||||
},
|
},
|
||||||
provider:{
|
provider:{
|
||||||
name:string,
|
name:string,
|
||||||
|
},
|
||||||
|
video:{
|
||||||
|
url: string,
|
||||||
|
width?: number|null,
|
||||||
|
height?: number|null,
|
||||||
|
proxy_url?: string
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
type presencejson={
|
type presencejson={
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue