diff --git a/CSS/expanded.css b/CSS/expanded.css index 0795470..00ad5c8 100644 --- a/CSS/expanded.css +++ b/CSS/expanded.css @@ -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; +} diff --git a/HTML/expanded.html b/HTML/expanded.html index c295f75..391a069 100644 --- a/HTML/expanded.html +++ b/HTML/expanded.html @@ -12,13 +12,21 @@ + +

+
+
+ +

+
+
+
-

-

+

+

-

-
-
+

+

Favorite!

Boost!

diff --git a/JS/expanded.js b/JS/expanded.js index 37e8c65..910a430 100644 --- a/JS/expanded.js +++ b/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 + "" + 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 + ""; - } + 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 += "" + Media.description + ""; - } else { - document.getElementsByClassName("Images")[0].innerHTML += "" + Media.description + ""; + if (website == "Mastodon") { + if (Media.type == "image") { + if (Media.remote_url == null) { + Element.innerHTML += "" + Media.description + ""; + } else { + Element.innerHTML += "" + Media.description + ""; + } + } else if (Media.type == "video") { + if (Media.remote_url == null) { + Element.innerHTML += ""; + } else { + Element.innerHTML += ""; + } } - } else if (Media.type == "video") { - if (Media.remote_url == null) { - document.getElementsByClassName("Images")[0].innerHTML += ""; - } else { - document.getElementsByClassName("Images")[0].innerHTML += ""; + } 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 += "

" + Texty.posts[0].record.text + "


"; + 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 += "" + 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 += ""; + } + // 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 += "" + 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 += ""; } } }