Threads, but something is off
This commit is contained in:
parent
4c871c5ce4
commit
81ba37fcdf
3 changed files with 126 additions and 37 deletions
|
|
@ -1,8 +1,10 @@
|
|||
/* HTML items */
|
||||
img, video {
|
||||
.Embed, img, video {
|
||||
border-style: solid;
|
||||
border-radius: 1%;
|
||||
|
||||
background-color: yellow;
|
||||
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
|
|
@ -35,3 +37,10 @@ img, video {
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
height: 5vh;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,21 @@
|
|||
</head>
|
||||
|
||||
<body style="margin: 0px; text-align: center;">
|
||||
<!-- Grandparent is a reply post above the reply post above the regular, clicked post. -->
|
||||
<p class="PostText GrandParent"></p>
|
||||
<div class="Images GrandParent"></div>
|
||||
<hr/>
|
||||
<!-- Parent is a reply post above the regular, clicked post. -->
|
||||
<p class="PostText Parent"></p>
|
||||
<div class="Images Parent"></div>
|
||||
<hr/>
|
||||
<!-- The regular, clicked post. -->
|
||||
<header>
|
||||
<h1 class="Handle"></h1>
|
||||
<h2 class="Origin"></h2>
|
||||
<h1 class="Handle Regular"></h1>
|
||||
<h2 class="Origin Regular"></h2>
|
||||
</header>
|
||||
<p class="PostText"></p>
|
||||
<div class="Images">
|
||||
</div>
|
||||
<p class="PostText Regular"></p>
|
||||
<div class="Images Regular"></div>
|
||||
<div "display: flex;">
|
||||
<p class="Favorite">Favorite!</p>
|
||||
<p class="Boost">Boost!</p>
|
||||
|
|
|
|||
134
JS/expanded.js
134
JS/expanded.js
|
|
@ -46,53 +46,78 @@ async function GetPost() {
|
|||
if (website == "Mastodon") {
|
||||
// Check for a reblog.
|
||||
if (post.reblog != null) {
|
||||
document.getElementsByClassName("PostText")[0].innerHTML = post.reblog.content;
|
||||
document.getElementsByClassName("PostText Regular")[0].innerHTML = post.reblog.content;
|
||||
document.getElementsByClassName("Handle")[0].innerHTML = post.reblog.account.username + " ( R: " + post.account.username + " )";
|
||||
if (post.reblog.media_attachments.length != 0) {
|
||||
for (let i of post.reblog.media_attachments) {
|
||||
CreateMedia(i);
|
||||
await CreateMedia(i, document.getElementsByClassName("Images Regular")[0]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
document.getElementsByClassName("PostText")[0].innerHTML = post.content;
|
||||
document.getElementsByClassName("PostText Regular")[0].innerHTML = post.content;
|
||||
document.getElementsByClassName("Handle")[0].innerHTML = post.account.username;
|
||||
// Show the image if it exists.
|
||||
if (post.media_attachments.length != 0) {
|
||||
for (let i of post.media_attachments) {
|
||||
CreateMedia(i);
|
||||
await CreateMedia(i, document.getElementsByClassName("Images Regular")[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Update the post to see if there is new information.
|
||||
post = await MastodonAPI.GetStatus(post.id);
|
||||
// Set the texts. It's opposite because "setting" causes it to switch.
|
||||
FavoriteFlipper = !(post.favourite);
|
||||
BoostFlipper = !(post.reblogged);
|
||||
SetFavorite();
|
||||
SetBoost();
|
||||
// Now time to see if there are any parents
|
||||
if (post.in_reply_to_id != null) {
|
||||
var AnotherPost = await MastodonAPI.GetStatus(post.in_reply_to_id);
|
||||
if (AnotherPost.reblog != null) {
|
||||
document.getElementsByClassName("PostText Parent")[0].innerHTML = AnotherPost.reblog.content;
|
||||
if (AnotherPost.reblog.media_attachments.length != 0) {
|
||||
for (let i of AnotherPost.reblog.media_attachments) {
|
||||
await CreateMedia(i, document.getElementsByClassName("Images Parent")[0]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
document.getElementsByClassName("PostText Parent")[0].innerHTML = AnotherPost.content;
|
||||
if (AnotherPost.media_attachments.length != 0) {
|
||||
for (let i of AnotherPost.media_attachments) {
|
||||
await CreateMedia(i, document.getElementsByClassName("Images Parent")[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Now time to see if there are any grandparents
|
||||
if (AnotherPost.in_reply_to_id != null) {
|
||||
var AnotherAnotherPost = await MastodonAPI.GetStatus(AnotherPost.in_reply_to_id);
|
||||
if (AnotherAnotherPost.reblog != null) {
|
||||
document.getElementsByClassName("PostText GrandParent")[0].innerHTML = AnotherAnotherPost.reblog.content;
|
||||
if (AnotherAnotherPost.reblog.media_attachments.length != 0) {
|
||||
for (let i of AnotherAnotherPost.reblog.media_attachments) {
|
||||
await CreateMedia(i, document.getElementsByClassName("Images GrandParent")[0]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
document.getElementsByClassName("PostText GrandParent")[0].innerHTML = AnotherAnotherPost.content;
|
||||
if (AnotherAnotherPost.media_attachments.length != 0) {
|
||||
for (let i of AnotherAnotherPost.media_attachments) {
|
||||
await CreateMedia(i, document.getElementsByClassName("Images GrandParent")[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (website == "Bluesky") {
|
||||
// Check for a reblog.
|
||||
if (post.hasOwnProperty("reason") && post.reason.$type == "app.bsky.feed.defs#reasonRepost") {
|
||||
document.getElementsByClassName("PostText")[0].innerHTML = post.post.record.text;
|
||||
document.getElementsByClassName("PostText Regular")[0].innerHTML = post.post.record.text;
|
||||
document.getElementsByClassName("Handle")[0].innerHTML = post.post.author.handle + " ( R: " + post.reason.by.handle + " )";
|
||||
} else {
|
||||
document.getElementsByClassName("PostText")[0].innerHTML = post.post.record.text;
|
||||
document.getElementsByClassName("PostText Regular")[0].innerHTML = post.post.record.text;
|
||||
document.getElementsByClassName("Handle")[0].innerHTML = post.post.author.handle;
|
||||
}
|
||||
// Show the image if it exists.
|
||||
if (post.post.record.hasOwnProperty("embed")) {
|
||||
if (post.post.record.embed.$type == "app.bsky.embed.images") {
|
||||
for (let i of post.post.embed.images) {
|
||||
var Blobby = await BlueskyAPI.GetBlob(post.post.author.did, post.post.record.embed.images[0].image.ref.$link);
|
||||
var ObjectURL = URL.createObjectURL(Blobby)
|
||||
document.getElementsByClassName("Images")[0].innerHTML = document.getElementsByClassName("Images")[0].innerHTML + "<img src=" + ObjectURL + " alt='" + i.alt + "'/>";
|
||||
}
|
||||
} else if (post.post.record.embed.$type == "app.bsky.embed.video") {
|
||||
let i = post.post.embed.playlist;
|
||||
var Blobby = await BlueskyAPI.GetBlob(post.post.author.did, post.post.record.embed.video.ref.$link);
|
||||
var ObjectURL = URL.createObjectURL(Blobby)
|
||||
document.getElementsByClassName("Images")[0].innerHTML = document.getElementsByClassName("Images")[0].innerHTML + "<video controls src=" + ObjectURL + "></video>";
|
||||
}
|
||||
await CreateMedia(post.post.record, document.getElementsByClassName("Images Regular")[0], post.post.author.did);
|
||||
}
|
||||
// We don't need to update the post with new information. The repos are seperate.
|
||||
// Set the texts. It's opposite because "setting" causes it to switch.
|
||||
|
|
@ -106,24 +131,71 @@ async function GetPost() {
|
|||
}
|
||||
SetFavorite();
|
||||
SetBoost();
|
||||
// Now time to see if there are any parents.
|
||||
if (post.hasOwnProperty("reply")) {
|
||||
var AnotherPost = await BlueskyAPI.GetRecord(post.reply.parent.uri.split("/")[2], post.reply.parent.uri.split("/")[3], post.reply.parent.uri.split("/")[4]);
|
||||
console.log(AnotherPost);
|
||||
document.getElementsByClassName("PostText Parent")[0].innerHTML = AnotherPost.value.text;
|
||||
if (AnotherPost.value.hasOwnProperty("embed")) {
|
||||
await CreateMedia(AnotherPost.value, document.getElementsByClassName("Images Parent")[0], post.reply.parent.author.did);
|
||||
}
|
||||
// Now time to see if there are any grandparents.
|
||||
if (AnotherPost.value.hasOwnProperty("reply")) {
|
||||
var AnotherAnotherPost = await BlueskyAPI.GetRecord(AnotherPost.value.reply.parent.uri.split("/")[2], AnotherPost.value.reply.parent.uri.split("/")[3], AnotherPost.value.reply.parent.uri.split("/")[4]);
|
||||
document.getElementsByClassName("PostText GrandParent")[0].innerHTML = AnotherAnotherPost.value.text;
|
||||
if (AnotherAnotherPost.value.hasOwnProperty("embed")) {
|
||||
await CreateMedia(AnotherAnotherPost.value, document.getElementsByClassName("Images GrandParent")[0], post.reply.grandparentAuthor.did);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
document.getElementsByClassName("PostText")[0].innerHTML = "Nothing to load.";
|
||||
}
|
||||
}
|
||||
|
||||
function CreateMedia(Media) {
|
||||
async function CreateMedia(Media, Element, Author = undefined) {
|
||||
// Check to see if the image is on the same server.
|
||||
if (Media.type == "image") {
|
||||
if (Media.remote_url == null) {
|
||||
document.getElementsByClassName("Images")[0].innerHTML += "<img src=" + Media.url + " alt='" + Media.description + "'/>";
|
||||
} else {
|
||||
document.getElementsByClassName("Images")[0].innerHTML += "<img src=" + Media.remote_url + " alt='" + Media.description + "'/>";
|
||||
if (website == "Mastodon") {
|
||||
if (Media.type == "image") {
|
||||
if (Media.remote_url == null) {
|
||||
Element.innerHTML += "<img src=" + Media.url + " alt='" + Media.description + "'/>";
|
||||
} else {
|
||||
Element.innerHTML += "<img src=" + Media.remote_url + " alt='" + Media.description + "'/>";
|
||||
}
|
||||
} else if (Media.type == "video") {
|
||||
if (Media.remote_url == null) {
|
||||
Element.innerHTML += "<video controls src=" + Media.url + " alt='" + Media.description + "'></video>";
|
||||
} else {
|
||||
Element.innerHTML += "<video controls src=" + Media.remote_url + " alt='" + Media.description + "'></video>";
|
||||
}
|
||||
}
|
||||
} else if (Media.type == "video") {
|
||||
if (Media.remote_url == null) {
|
||||
document.getElementsByClassName("Images")[0].innerHTML += "<video controls src=" + Media.url + " alt='" + Media.description + "'></video>";
|
||||
} else {
|
||||
document.getElementsByClassName("Images")[0].innerHTML += "<video controls src=" + Media.remote_url + " alt='" + Media.description + "'></video>";
|
||||
} else if (website == "Bluesky") {
|
||||
if (Media.embed.$type == "app.bsky.embed.record") {
|
||||
var Texty = await BlueskyAPI.GetPosts([Media.embed.record.uri]);
|
||||
console.log(Texty);
|
||||
Element.innerHTML += "<p class='Embed'>" + Texty.posts[0].record.text + "</p><br/>";
|
||||
if (Texty.posts[0].embed.$type == "app.bsky.embed.images") {
|
||||
for (let i of Texty.posts[0].embed.images) {
|
||||
var Blobby = await BlueskyAPI.GetBlob(Author, i.image.ref.$link);
|
||||
var ObjectURL = URL.createObjectURL(Blobby);
|
||||
Element.innerHTML += "<img src=" + ObjectURL + " alt='" + i.alt + "'/>";
|
||||
}
|
||||
} else if (Media.embed.$type == "app.bsky.embed.video") {
|
||||
var Blobby = await BlueskyAPI.GetBlob(Author, Texty.posts[0].embed.video.ref.$link);
|
||||
var ObjectURL = URL.createObjectURL(Blobby);
|
||||
Element.innerHTML += "<video controls src=" + ObjectURL + "></video>";
|
||||
}
|
||||
// It's not an embed, continue...
|
||||
} else if (Media.embed.$type == "app.bsky.embed.images") {
|
||||
for (let i of Media.embed.images) {
|
||||
var Blobby = await BlueskyAPI.GetBlob(Author, i.image.ref.$link);
|
||||
var ObjectURL = URL.createObjectURL(Blobby);
|
||||
Element.innerHTML += "<img src=" + ObjectURL + " alt='" + i.alt + "'/>";
|
||||
}
|
||||
} else if (Media.embed.$type == "app.bsky.embed.video") {
|
||||
var Blobby = await BlueskyAPI.GetBlob(Author, Media.embed.video.ref.$link);
|
||||
var ObjectURL = URL.createObjectURL(Blobby);
|
||||
Element.innerHTML += "<video controls src=" + ObjectURL + "></video>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue