diff --git a/CHANGELOG b/CHANGELOG index 49a26eb..262d164 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,3 +1,8 @@ +v3.13.1 - 12/01/2024 +- Add support for audio player +- Add support for video player +- Load video player when user clicks on video preview + v3.12.0 - 11/12/2023 - Fix link preview event on click diff --git a/README.md b/README.md index eae4388..add347b 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,9 @@ hide_reblog: false, // Hide replies toots. Default: don't hide hide_replies: false, +// Hide video image preview and load video player instead. Default: don't hide +hide_video_preview: false, + // Hide preview for links. Default: don't hide hide_preview_link: false, diff --git a/screenshot-light-dark.jpg b/screenshot-light-dark.jpg index a6b5952..33a19db 100644 Binary files a/screenshot-light-dark.jpg and b/screenshot-light-dark.jpg differ diff --git a/src/index.html b/src/index.html index f88eb24..76d86f2 100644 --- a/src/index.html +++ b/src/index.html @@ -1,43 +1,44 @@ - - - - - Mastodon embed timeline - - - - - - - - - -
-
-
- -
-
-
- - - - + + + + + Mastodon embed timeline + + + + + + + + + +
+
+
+ +
+
+
+ + + + diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css index 5876577..09b9160 100644 --- a/src/mastodon-timeline.css +++ b/src/mastodon-timeline.css @@ -1,4 +1,4 @@ -/* Mastodon embed feed timeline v3.12.0 */ +/* Mastodon embed feed timeline v3.13.1 */ /* More info at: */ /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ @@ -223,6 +223,7 @@ html[data-theme="dark"] { /* Medias */ .mt-toot-media { + position: relative; overflow: hidden; margin-bottom: 1rem; } @@ -233,15 +234,26 @@ html[data-theme="dark"] { z-index: 1; transform: translate(-50%, -50%); } -.mt-toot-media-spoiler > img { +.mt-toot-media-spoiler > img, +.mt-toot-media-spoiler > audio, +.mt-toot-media-spoiler > video, +.mt-toot-media-spoiler > .mt-toot-media-play-icon { filter: blur(2rem); + pointer-events: none; } -.img-ratio14_7 { - position: relative; +.mt-toot-media.img-ratio14_7, +.mt-toot-media.video-ratio14_7 { padding-top: 56.95%; width: 100%; } -.img-ratio14_7 > img { +.mt-toot-media > audio { + width: 100%; + position: relative; + z-index: 1; +} +.img-ratio14_7 > img, +.video-ratio14_7 > img, +.video-ratio14_7 > video { width: 100%; height: auto; position: absolute; @@ -251,6 +263,29 @@ html[data-theme="dark"] { text-align: center; color: var(--content-text); } +.mt-toot-media.loading-spinner .mt-toot-media-play-icon { + display: none; +} +.mt-toot-media-play-icon { + display: flex; + position: absolute; + width: 3rem; + height: 3rem; + top: calc(50% - 1.5rem); + left: calc(50% - 1.5rem); + justify-content: center; + align-items: center; + background-color: transparent; + border: none; + cursor: pointer; +} +.mt-toot-media-play-icon > svg { + width: 2.5rem; + height: 2.5rem; + fill: var(--bg-color); + stroke:var(--content-text); + stroke-width: 1px; +} /* Preview link */ .mt-toot-preview { diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js index 727f889..d0d7b89 100644 --- a/src/mastodon-timeline.js +++ b/src/mastodon-timeline.js @@ -1,5 +1,5 @@ /** - * Mastodon embed feed timeline v3.12.0 + * Mastodon embed feed timeline v3.13.1 * More info at: * https://gitlab.com/idotj/mastodon-embed-feed-timeline */ @@ -46,6 +46,9 @@ window.addEventListener("load", () => { // Hide replies toots. Default: don't hide hide_replies: false, + // Hide video image preview and load video player instead. Default: don't hide + hide_video_preview: false, + // Hide preview card if toot contains a link, photo or video from a URL. Default: don't hide hide_preview_link: false, @@ -89,6 +92,10 @@ const MastodonApi = function (params_) { typeof params_.hide_reblog !== "undefined" ? params_.hide_reblog : false; this.HIDE_REPLIES = typeof params_.hide_replies !== "undefined" ? params_.hide_replies : false; + this.HIDE_VIDEO_PREVIEW = + typeof params_.hide_video_preview !== "undefined" + ? params_.hide_video_preview + : false; this.HIDE_PREVIEW_LINK = typeof params_.hide_preview_link !== "undefined" ? params_.hide_preview_link @@ -185,7 +192,8 @@ MastodonApi.prototype.buildTimeline = async function () { if ( e.target.localName == "article" || e.target.offsetParent?.localName == "article" || - e.target.localName == "img" + (e.target.localName == "img" && + !e.target.parentNode.classList.contains("video-ratio14_7")) ) { openTootURL(e); } @@ -193,6 +201,19 @@ MastodonApi.prototype.buildTimeline = async function () { if (e.target.localName == "button" && e.target.className == "spoiler-btn") { toogleSpoiler(e); } + // Check if video preview image or play icon/button was clicked + if ( + e.target.className == "mt-toot-media-play-icon" || + (e.target.localName == "svg" && + e.target.parentNode.className == "mt-toot-media-play-icon") || + (e.target.localName == "path" && + e.target.parentNode.parentNode.className == + "mt-toot-media-play-icon") || + (e.target.localName == "img" && + e.target.parentNode.classList.contains("video-ratio14_7")) + ) { + loadTootVideo(e); + } }); this.mtBodyContainer.addEventListener("keydown", function (e) { // Check if Enter key was pressed with focus in an article @@ -229,7 +250,11 @@ MastodonApi.prototype.buildTimeline = async function () { */ const toogleSpoiler = function (e) { const nextSibling = e.target.nextSibling; - if (nextSibling.localName === "img") { + if ( + nextSibling.localName === "img" || + nextSibling.localName === "audio" || + nextSibling.localName === "video" + ) { e.target.parentNode.classList.remove("mt-toot-media-spoiler"); e.target.style.display = "none"; } else if ( @@ -249,6 +274,18 @@ MastodonApi.prototype.buildTimeline = async function () { } } }; + + /** + * Replace the video preview image by the video player + * @param {event} e User interaction trigger + */ + const loadTootVideo = function (e) { + const parentNode = e.target.closest("[data-video-url]"); + const videoURL = parentNode.dataset.videoUrl; + parentNode.replaceChildren(); + parentNode.innerHTML = + ''; + }; }; /** @@ -541,14 +578,14 @@ MastodonApi.prototype.assambleToot = function (c, i) { // Media attachments let media = []; if (c.media_attachments.length > 0) { - for (let picid in c.media_attachments) { - media.push(this.placeMedias(c.media_attachments[picid], c.sensitive)); + for (let i in c.media_attachments) { + media.push(this.placeMedias(c.media_attachments[i], c.sensitive)); } } if (c.reblog && c.reblog.media_attachments.length > 0) { - for (let picid in c.reblog.media_attachments) { + for (let i in c.reblog.media_attachments) { media.push( - this.placeMedias(c.reblog.media_attachments[picid], c.reblog.sensitive) + this.placeMedias(c.reblog.media_attachments[i], c.reblog.sensitive) ); } } @@ -729,20 +766,85 @@ MastodonApi.prototype.replaceHTMLtag = function ( */ MastodonApi.prototype.placeMedias = function (m, s) { const spoiler = s || false; - const pic = - '
' + - (spoiler ? '' : "") + - '' + - (m.description ? this.escapeHtml(m.description) : ' + - "
"; + const type = m.type; + let media = ""; - return pic; + if (type === "image") { + media = + '
' + + (spoiler ? '' : "") + + '' + + (m.description ? this.escapeHtml(m.description) : ' + + "
"; + } + + if (type === "audio") { + if (m.preview_url) { + media = + '
' + + (spoiler ? '' : "") + + '' + + '' + + (m.description ? this.escapeHtml(m.description) : ' + + "
"; + } else { + media = + '
' + + (spoiler ? '' : "") + + '' + + "
"; + } + } + + if (type === "video") { + if (!this.HIDE_VIDEO_PREVIEW) { + media = + '
' + + (spoiler ? '' : "") + + '' + + (m.description ? this.escapeHtml(m.description) : ' + + '' + + "
"; + } else { + media = + '
' + + (spoiler ? '' : "") + + '' + + "
"; + } + } + + return media; }; /** diff --git a/src/mastodon-timeline.min.css b/src/mastodon-timeline.min.css index b35656e..57c33db 100644 --- a/src/mastodon-timeline.min.css +++ b/src/mastodon-timeline.min.css @@ -1 +1 @@ -:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--contrast-gray-color:#606984;--content-text:#000;--link-color:#3a3bff;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--contrast-gray-color:#606984;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-container{height:100%;overflow-y:auto;position:relative;background-color:var(--bg-color);scrollbar-color:var(--line-gray-color) var(--bg-color);scrollbar-width:thin}.mt-container::-webkit-scrollbar{width:.25rem;height:.25rem}.mt-container::-webkit-scrollbar-thumb{background-color:var(--line-gray-color);border:none;border-radius:3rem}.mt-container::-webkit-scrollbar-thumb:active,.mt-container::-webkit-scrollbar-thumb:hover{background-color:var(--line-gray-color)}.mt-container::-webkit-scrollbar-track{background-color:var(--bg-color);border:none;border-radius:0}.mt-container::-webkit-scrollbar-corner,.mt-container::-webkit-scrollbar-track:active,.mt-container::-webkit-scrollbar-track:hover{background-color:var(--bg-color)}.mt-container a,.mt-container a:active,.mt-container a:link{text-decoration:none;color:var(--link-color)}.mt-container a:not(.mt-toot-preview):hover{text-decoration:underline}.mt-body{padding:1rem clamp(.25rem,4vw,1.5rem);white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-toot-avatar{margin-right:.75rem}.mt-toot-avatar-standard{width:2.25rem;height:2.25rem}.mt-toot-avatar-boosted{width:3rem;height:3rem;position:relative}.mt-toot-avatar-image-big img{aspect-ratio:1/1;width:2.25rem;height:2.25rem;border-radius:.25rem;overflow:hidden}.mt-toot-avatar-image-small img{aspect-ratio:1/1;width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem;position:absolute;border-radius:.25rem;overflow:hidden}.mt-toot-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.mt-toot-header-user{font-weight:600;margin-top:.5rem;padding-right:1rem}.mt-toot-header-user>a{display:flex;align-items:flex-start;color:var(--content-text)!important;overflow-wrap:anywhere}.mt-toot-header-date{font-size:.75rem;text-align:right;margin:.5rem 0 0 auto}.mt-toot-header-date>a{color:var(--contrast-gray-color)!important}.mt-toot-text{margin-bottom:1rem;color:var(--content-text)}.mt-toot-text .spoiler-btn{display:inline-block}.mt-toot-text .spoiler-text-hidden{display:none}.mt-toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.mt-toot-text:not(.truncate) .ellipsis::after{content:"..."}.mt-toot-text blockquote{border-left:.25rem solid var(--line-gray-color);margin-left:0;padding-left:.5rem}.mt-toot-header-user .custom-emoji,.mt-toot-text .custom-emoji{height:1.5rem;min-width:1.5rem;margin-bottom:-.25rem;width:auto}.mt-toot-poll{margin-bottom:1rem;color:var(--content-text)}.mt-toot-poll ul{list-style:none;padding:0;margin:0}.mt-toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.mt-toot-poll.mt-toot-poll-expired ul li{color:var(--contrast-gray-color)}.mt-toot-poll ul li:not(:last-child){margin-bottom:.25rem}.mt-toot-poll ul li:before{content:"◯";padding-right:.5rem}.mt-toot-poll.mt-toot-poll-expired ul li:before{content:"";padding-right:0}.mt-toot-media{overflow:hidden;margin-bottom:1rem}.mt-toot-media>.spoiler-btn{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.mt-toot-media-spoiler>img{filter:blur(2rem)}.img-ratio14_7{position:relative;padding-top:56.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--content-text)}.mt-toot-preview{min-height:4rem;display:flex;flex-direction:row;border:1px solid var(--line-gray-color);border-radius:.5rem;color:var(--link-color);font-size:.8rem;margin:1rem 0;overflow:hidden}.mt-toot-preview-image{width:40%;align-self:stretch}.mt-toot-preview-image img{display:block;width:100%;height:100%;object-fit:cover;color:var(--content-text)}.mt-toot-preview-noImage{width:40%;font-size:1.5rem;align-self:center;text-align:center}.mt-toot-preview-content{width:60%;display:flex;align-self:center;flex-direction:column;padding:.5rem 1rem;gap:.5rem}.mt-toot-preview-title{font-weight:600}.spoiler-btn{border-radius:2px;background-color:var(--line-gray-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.mt-toot-counter-bar{display:flex;min-width:6rem;max-width:40rem;justify-content:space-between;color:var(--contrast-gray-color)}.mt-toot-counter-bar-favorites,.mt-toot-counter-bar-reblog,.mt-toot-counter-bar-replies{display:flex;font-size:.75rem;gap:.25rem;align-items:center;opacity:.5}.mt-toot-counter-bar-favorites>svg,.mt-toot-counter-bar-reblog>svg,.mt-toot-counter-bar-replies>svg{width:1rem;fill:var(--contrast-gray-color)}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.mt-error-icon{font-size:2rem}.mt-error-message{padding:1rem 0}.mt-error-message hr{color:var(--line-gray-color)}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'/%3E%3Cpath d='M64 6.69a57.3 57.3 0 1 1 0 114.61A57.3 57.3 0 0 1 6.69 64' fill='none' stroke='%23404040' stroke-width='12'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} \ No newline at end of file +:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--contrast-gray-color:#606984;--content-text:#000;--link-color:#3a3bff;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--contrast-gray-color:#606984;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-container{height:100%;overflow-y:auto;position:relative;background-color:var(--bg-color);scrollbar-color:var(--line-gray-color) var(--bg-color);scrollbar-width:thin}.mt-container::-webkit-scrollbar{width:.25rem;height:.25rem}.mt-container::-webkit-scrollbar-thumb{background-color:var(--line-gray-color);border:none;border-radius:3rem}.mt-container::-webkit-scrollbar-thumb:active,.mt-container::-webkit-scrollbar-thumb:hover{background-color:var(--line-gray-color)}.mt-container::-webkit-scrollbar-track{background-color:var(--bg-color);border:none;border-radius:0}.mt-container::-webkit-scrollbar-corner,.mt-container::-webkit-scrollbar-track:active,.mt-container::-webkit-scrollbar-track:hover{background-color:var(--bg-color)}.mt-container a,.mt-container a:active,.mt-container a:link{text-decoration:none;color:var(--link-color)}.mt-container a:not(.mt-toot-preview):hover{text-decoration:underline}.mt-body{padding:1rem clamp(.25rem,4vw,1.5rem);white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-toot-avatar{margin-right:.75rem}.mt-toot-avatar-standard{width:2.25rem;height:2.25rem}.mt-toot-avatar-boosted{width:3rem;height:3rem;position:relative}.mt-toot-avatar-image-big img{aspect-ratio:1/1;width:2.25rem;height:2.25rem;border-radius:.25rem;overflow:hidden}.mt-toot-avatar-image-small img{aspect-ratio:1/1;width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem;position:absolute;border-radius:.25rem;overflow:hidden}.mt-toot-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.mt-toot-header-user{font-weight:600;margin-top:.5rem;padding-right:1rem}.mt-toot-header-user>a{display:flex;align-items:flex-start;color:var(--content-text)!important;overflow-wrap:anywhere}.mt-toot-header-date{font-size:.75rem;text-align:right;margin:.5rem 0 0 auto}.mt-toot-header-date>a{color:var(--contrast-gray-color)!important}.mt-toot-text{margin-bottom:1rem;color:var(--content-text)}.mt-toot-text .spoiler-btn{display:inline-block}.mt-toot-text .spoiler-text-hidden{display:none}.mt-toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.mt-toot-text:not(.truncate) .ellipsis::after{content:"..."}.mt-toot-text blockquote{border-left:.25rem solid var(--line-gray-color);margin-left:0;padding-left:.5rem}.mt-toot-header-user .custom-emoji,.mt-toot-text .custom-emoji{height:1.5rem;min-width:1.5rem;margin-bottom:-.25rem;width:auto}.mt-toot-poll{margin-bottom:1rem;color:var(--content-text)}.mt-toot-poll ul{list-style:none;padding:0;margin:0}.mt-toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.mt-toot-poll.mt-toot-poll-expired ul li{color:var(--contrast-gray-color)}.mt-toot-poll ul li:not(:last-child){margin-bottom:.25rem}.mt-toot-poll ul li:before{content:"◯";padding-right:.5rem}.mt-toot-poll.mt-toot-poll-expired ul li:before{content:"";padding-right:0}.mt-toot-media{position:relative;overflow:hidden;margin-bottom:1rem}.mt-toot-media>.spoiler-btn{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.mt-toot-media-spoiler>.mt-toot-media-play-icon,.mt-toot-media-spoiler>audio,.mt-toot-media-spoiler>img,.mt-toot-media-spoiler>video{filter:blur(2rem);pointer-events:none}.mt-toot-media.img-ratio14_7,.mt-toot-media.video-ratio14_7{padding-top:56.95%;width:100%}.mt-toot-media>audio{width:100%;position:relative;z-index:1}.img-ratio14_7>img,.video-ratio14_7>img,.video-ratio14_7>video{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--content-text)}.mt-toot-media.loading-spinner .mt-toot-media-play-icon{display:none}.mt-toot-media-play-icon{display:flex;position:absolute;width:3rem;height:3rem;top:calc(50% - 1.5rem);left:calc(50% - 1.5rem);justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer}.mt-toot-media-play-icon>svg{width:2.5rem;height:2.5rem;fill:var(--bg-color);stroke:var(--content-text);stroke-width:1px}.mt-toot-preview{min-height:4rem;display:flex;flex-direction:row;border:1px solid var(--line-gray-color);border-radius:.5rem;color:var(--link-color);font-size:.8rem;margin:1rem 0;overflow:hidden}.mt-toot-preview-image{width:40%;align-self:stretch}.mt-toot-preview-image img{display:block;width:100%;height:100%;object-fit:cover;color:var(--content-text)}.mt-toot-preview-noImage{width:40%;font-size:1.5rem;align-self:center;text-align:center}.mt-toot-preview-content{width:60%;display:flex;align-self:center;flex-direction:column;padding:.5rem 1rem;gap:.5rem}.mt-toot-preview-title{font-weight:600}.spoiler-btn{border-radius:2px;background-color:var(--line-gray-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.mt-toot-counter-bar{display:flex;min-width:6rem;max-width:40rem;justify-content:space-between;color:var(--contrast-gray-color)}.mt-toot-counter-bar-favorites,.mt-toot-counter-bar-reblog,.mt-toot-counter-bar-replies{display:flex;font-size:.75rem;gap:.25rem;align-items:center;opacity:.5}.mt-toot-counter-bar-favorites>svg,.mt-toot-counter-bar-reblog>svg,.mt-toot-counter-bar-replies>svg{width:1rem;fill:var(--contrast-gray-color)}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.mt-error-icon{font-size:2rem}.mt-error-message{padding:1rem 0}.mt-error-message hr{color:var(--line-gray-color)}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'/%3E%3Cpath d='M64 6.69a57.3 57.3 0 1 1 0 114.61A57.3 57.3 0 0 1 6.69 64' fill='none' stroke='%23404040' stroke-width='12'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} \ No newline at end of file diff --git a/src/mastodon-timeline.min.js b/src/mastodon-timeline.min.js index 84c83bf..9e4a0eb 100644 --- a/src/mastodon-timeline.min.js +++ b/src/mastodon-timeline.min.js @@ -1 +1 @@ -window.addEventListener("load",()=>{new MastodonApi({container_body_id:"mt-body",spinner_class:"loading-spinner",default_theme:"auto",instance_url:"https://mastdn.social",timeline_type:"local",user_id:"",profile_name:"",hashtag_name:"",toots_limit:"20",hide_unlisted:!1,hide_reblog:!1,hide_replies:!1,hide_preview_link:!1,hide_emojos:!1,markdown_blockquote:!1,hide_counter_bar:!1,text_max_lines:"0",link_see_more:"See more posts at Mastodon"})});const MastodonApi=function(t){this.CONTAINER_BODY_ID=t.container_body_id||"mt-body",this.SPINNER_CLASS=t.spinner_class||"loading-spinner",this.DEFAULT_THEME=t.default_theme||"auto",this.INSTANCE_URL=t.instance_url,this.USER_ID=t.user_id||"",this.PROFILE_NAME=this.USER_ID?t.profile_name:"",this.TIMELINE_TYPE=t.timeline_type||"local",this.HASHTAG_NAME=t.hashtag_name||"",this.TOOTS_LIMIT=t.toots_limit||"20",this.HIDE_UNLISTED=void 0!==t.hide_unlisted&&t.hide_unlisted,this.HIDE_REBLOG=void 0!==t.hide_reblog&&t.hide_reblog,this.HIDE_REPLIES=void 0!==t.hide_replies&&t.hide_replies,this.HIDE_PREVIEW_LINK=void 0!==t.hide_preview_link&&t.hide_preview_link,this.HIDE_EMOJOS=void 0!==t.hide_emojos&&t.hide_emojos,this.MARKDOWN_BLOCKQUOTE=void 0!==t.markdown_blockquote&&t.markdown_blockquote,this.HIDE_COUNTER_BAR="undefined"!==t.hide_counter_bar&&t.hide_counter_bar,this.TEXT_MAX_LINES=t.text_max_lines||"0",this.LINK_SEE_MORE=t.link_see_more,this.FETCHED_DATA={},this.mtBodyContainer=document.getElementById(this.CONTAINER_BODY_ID),this.buildTimeline()};MastodonApi.prototype.buildTimeline=async function(){for(let t in this.setTheme(),await this.getTimelineData(),this.mtBodyContainer.innerHTML="",this.FETCHED_DATA.timeline)("public"==this.FETCHED_DATA.timeline[t].visibility||!this.HIDE_UNLISTED&&"unlisted"==this.FETCHED_DATA.timeline[t].visibility)&&(this.HIDE_REBLOG&&this.FETCHED_DATA.timeline[t].reblog||this.HIDE_REPLIES&&this.FETCHED_DATA.timeline[t].in_reply_to_id||this.appendToot(this.FETCHED_DATA.timeline[t],Number(t)));if(""===this.mtBodyContainer.innerHTML)this.mtBodyContainer.setAttribute("role","none"),this.mtBodyContainer.innerHTML='
\uD83D\uDCED
Sorry, no toots to show
Got '+this.FETCHED_DATA.timeline.length+" toots from the server.
This may be due to an incorrect configuration in the parameters or to filters applied to hide certains type of toots.
";else{if(this.LINK_SEE_MORE){let e="";"profile"===this.TIMELINE_TYPE?e=this.PROFILE_NAME:"hashtag"===this.TIMELINE_TYPE?e="tags/"+this.HASHTAG_NAME:"local"===this.TIMELINE_TYPE&&(e="public/local");let o='
'+this.LINK_SEE_MORE+"
";this.mtBodyContainer.parentNode.insertAdjacentHTML("beforeend",o)}this.manageSpinner()}this.mtBodyContainer.addEventListener("click",function(t){("article"==t.target.localName||t.target.offsetParent?.localName=="article"||"img"==t.target.localName)&&i(t),"button"==t.target.localName&&"spoiler-btn"==t.target.className&&a(t)}),this.mtBodyContainer.addEventListener("keydown",function(t){"Enter"===t.key&&"article"==t.target.localName&&i(t)});let i=function(t){let e=t.target.closest(".mt-toot").dataset.location;"a"!==t.target.localName&&"span"!==t.target.localName&&"button"!==t.target.localName&&"time"!==t.target.localName&&"mt-toot-preview-noImage"!==t.target.className&&"mt-toot-avatar-image-big"!==t.target.parentNode.className&&"mt-toot-avatar-image-small"!==t.target.parentNode.className&&"mt-toot-preview-image"!==t.target.parentNode.className&&"mt-toot-preview"!==t.target.parentNode.className&&e&&window.open(e,"_blank","noopener")},a=function(t){let e=t.target.nextSibling;"img"===e.localName?(t.target.parentNode.classList.remove("mt-toot-media-spoiler"),t.target.style.display="none"):(e.classList.contains("spoiler-text-hidden")||e.classList.contains("spoiler-text-visible"))&&("Show more"==t.target.textContent?(e.classList.remove("spoiler-text-hidden"),e.classList.add("spoiler-text-visible"),t.target.setAttribute("aria-expanded","true"),t.target.textContent="Show less"):(e.classList.remove("spoiler-text-visible"),e.classList.add("spoiler-text-hidden"),t.target.setAttribute("aria-expanded","false"),t.target.textContent="Show more"))}},MastodonApi.prototype.setTheme=function(){let t=function(t){document.documentElement.setAttribute("data-theme",t)};if("auto"===this.DEFAULT_THEME){let e=window.matchMedia("(prefers-color-scheme: dark)");e.matches?t("dark"):t("light"),e.addEventListener("change",e=>{e.matches?t("dark"):t("light")})}else t(this.DEFAULT_THEME)},MastodonApi.prototype.getTimelineData=async function(){return new Promise((t,e)=>{async function o(t){let e=await fetch(t);if(!e.ok)throw Error("Failed to fetch the following URL: "+t+"
Error status: "+e.status+"
Error message: "+e.statusText);let o=await e.json();return o}let i={};"profile"===this.TIMELINE_TYPE?i.timeline=`${this.INSTANCE_URL}/api/v1/accounts/${this.USER_ID}/statuses?limit=${this.TOOTS_LIMIT}`:"hashtag"===this.TIMELINE_TYPE?i.timeline=`${this.INSTANCE_URL}/api/v1/timelines/tag/${this.HASHTAG_NAME}?limit=${this.TOOTS_LIMIT}`:"local"===this.TIMELINE_TYPE&&(i.timeline=`${this.INSTANCE_URL}/api/v1/timelines/public?local=true&limit=${this.TOOTS_LIMIT}`),this.HIDE_EMOJOS||(i.emojos=this.INSTANCE_URL+"/api/v1/custom_emojis");let a=Object.entries(i).map(([t,i])=>o(i).then(e=>({[t]:e})).catch(o=>(e(Error("Something went wrong fetching data")),this.mtBodyContainer.innerHTML='
❌
Sorry, request failed:
'+o.message+"
",this.mtBodyContainer.setAttribute("role","none"),{[t]:[]})));Promise.all(a).then(e=>{this.FETCHED_DATA=e.reduce((t,e)=>({...t,...e}),{}),t()})})},MastodonApi.prototype.appendToot=function(t,e){this.mtBodyContainer.insertAdjacentHTML("beforeend",this.assambleToot(t,e))},MastodonApi.prototype.assambleToot=function(t,e){let o,i,a,s,r,n,l,d,c;t.reblog?(s=t.reblog.url,o='
'+this.escapeHtml(t.account.username)+' avatar
',a=this.showEmojos(t.reblog.account.display_name?t.reblog.account.display_name:t.reblog.account.username,this.FETCHED_DATA.emojos),i='
'+a+'
',r=t.reblog.created_at,c=t.reblog.replies_count,d=t.reblog.reblogs_count,l=t.reblog.favourites_count):(s=t.url,o='
',a=this.showEmojos(t.account.display_name?t.account.display_name:t.account.username,this.FETCHED_DATA.emojos),i='
'+a+'
',r=t.created_at,c=t.replies_count,d=t.reblogs_count,l=t.favourites_count),n=this.formatDate(r);let m='
",h="";"0"!==this.TEXT_MAX_LINES&&(h="truncate",document.documentElement.style.setProperty("--text-max-lines",this.TEXT_MAX_LINES));let p="";p=""!==t.spoiler_text?'
'+t.spoiler_text+'
'+this.formatTootText(t.content)+"
":t.reblog&&""!==t.reblog.content&&""!==t.reblog.spoiler_text?'
'+t.reblog.spoiler_text+'
'+this.formatTootText(t.reblog.content)+"
":t.reblog&&""!==t.reblog.content&&""===t.reblog.spoiler_text?'
'+this.formatTootText(t.reblog.content)+"
":'
'+this.formatTootText(t.content)+"
";let g=[];if(t.media_attachments.length>0)for(let u in t.media_attachments)g.push(this.placeMedias(t.media_attachments[u],t.sensitive));if(t.reblog&&t.reblog.media_attachments.length>0)for(let v in t.reblog.media_attachments)g.push(this.placeMedias(t.reblog.media_attachments[v],t.reblog.sensitive));let E="";!this.HIDE_PREVIEW_LINK&&t.card&&(E=this.placePreviewLink(t.card));let T="";if(t.poll){let b="";for(let f in t.poll.options)b+="
  • "+t.poll.options[f].title+"
    • ";T='
    "}let A="";if(!this.HIDE_COUNTER_BAR){let $='
    '+c+"
    ",_='
    '+d+"
    ",L='
    '+l+"
    ";A='
    '+$+_+L+"
    "}let N='
    '+o+i+m+"
    "+p+g.join("")+E+T+A+"
    ";return N},MastodonApi.prototype.formatTootText=function(t){let e=t;return e=this.addTarget2hashtagMention(e),this.HIDE_EMOJOS||(e=this.showEmojos(e,this.FETCHED_DATA.emojos)),this.MARKDOWN_BLOCKQUOTE&&(e=this.replaceHTMLtag(e,"

    >","

    ","

    ","

    ")),e},MastodonApi.prototype.addTarget2hashtagMention=function(t){let e=t.replaceAll('rel="tag"','rel="tag" target="_blank"');return e.replaceAll('class="u-url mention"','class="u-url mention" target="_blank"')},MastodonApi.prototype.showEmojos=function(t,e){if(!t.includes(":"))return t;for(let o of e){let i=RegExp(`\\:${o.shortcode}\\:`,"g");t=t.replace(i,`Emoji ${o.shortcode}`)}return t},MastodonApi.prototype.replaceHTMLtag=function(t,e,o,i,a){if(!t.includes(e))return t;{let s=RegExp(e+"(.*?)"+o,"gi");return t.replace(s,i+"$1"+a)}},MastodonApi.prototype.placeMedias=function(t,e){let o=e||!1,i='
    '+(o?'':"")+''+(t.description?this.escapeHtml(t.description):
    ';return i},MastodonApi.prototype.placePreviewLink=function(t){let e=''+(t.image?'
    '+this.escapeHtml(t.image_description)+'
    ':'
    \uD83D\uDCC4
    ')+'
    '+(t.provider_name?''+this.parseHTMLstring(t.provider_name)+"":"")+''+t.title+""+(t.author_name?''+this.parseHTMLstring(t.author_name)+"":"")+"
    ";return e},MastodonApi.prototype.formatDate=function(t){let e=new Date(t),o=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",][e.getMonth()]+" "+e.getDate()+", "+e.getFullYear();return o},MastodonApi.prototype.parseHTMLstring=function(t){let e=new DOMParser,o=e.parseFromString(t,"text/html");return o.body.textContent},MastodonApi.prototype.escapeHtml=function(t){return(t??"").replaceAll("&","&").replaceAll("<","<").replaceAll(">",">").replaceAll('"',""").replaceAll("'","'")},MastodonApi.prototype.manageSpinner=function(){let t=this.SPINNER_CLASS,e=function(){this.parentNode.classList.remove(t),this.removeEventListener("load",e),this.removeEventListener("error",e)};this.mtBodyContainer.querySelectorAll(`.${this.SPINNER_CLASS} > img`).forEach(t=>{t.addEventListener("load",e),t.addEventListener("error",e)})}; \ No newline at end of file +window.addEventListener("load",()=>{new MastodonApi({container_body_id:"mt-body",spinner_class:"loading-spinner",default_theme:"auto",instance_url:"https://mastdn.social",timeline_type:"local",user_id:"",profile_name:"",hashtag_name:"",toots_limit:"20",hide_unlisted:!1,hide_reblog:!1,hide_replies:!1,hide_video_preview:!1,hide_preview_link:!1,hide_emojos:!1,markdown_blockquote:!1,hide_counter_bar:!1,text_max_lines:"0",link_see_more:"See more posts at Mastodon"})});const MastodonApi=function(t){this.CONTAINER_BODY_ID=t.container_body_id||"mt-body",this.SPINNER_CLASS=t.spinner_class||"loading-spinner",this.DEFAULT_THEME=t.default_theme||"auto",this.INSTANCE_URL=t.instance_url,this.USER_ID=t.user_id||"",this.PROFILE_NAME=this.USER_ID?t.profile_name:"",this.TIMELINE_TYPE=t.timeline_type||"local",this.HASHTAG_NAME=t.hashtag_name||"",this.TOOTS_LIMIT=t.toots_limit||"20",this.HIDE_UNLISTED=void 0!==t.hide_unlisted&&t.hide_unlisted,this.HIDE_REBLOG=void 0!==t.hide_reblog&&t.hide_reblog,this.HIDE_REPLIES=void 0!==t.hide_replies&&t.hide_replies,this.HIDE_VIDEO_PREVIEW=void 0!==t.hide_video_preview&&t.hide_video_preview,this.HIDE_PREVIEW_LINK=void 0!==t.hide_preview_link&&t.hide_preview_link,this.HIDE_EMOJOS=void 0!==t.hide_emojos&&t.hide_emojos,this.MARKDOWN_BLOCKQUOTE=void 0!==t.markdown_blockquote&&t.markdown_blockquote,this.HIDE_COUNTER_BAR="undefined"!==t.hide_counter_bar&&t.hide_counter_bar,this.TEXT_MAX_LINES=t.text_max_lines||"0",this.LINK_SEE_MORE=t.link_see_more,this.FETCHED_DATA={},this.mtBodyContainer=document.getElementById(this.CONTAINER_BODY_ID),this.buildTimeline()};MastodonApi.prototype.buildTimeline=async function(){for(let t in this.setTheme(),await this.getTimelineData(),this.mtBodyContainer.innerHTML="",this.FETCHED_DATA.timeline)("public"==this.FETCHED_DATA.timeline[t].visibility||!this.HIDE_UNLISTED&&"unlisted"==this.FETCHED_DATA.timeline[t].visibility)&&(this.HIDE_REBLOG&&this.FETCHED_DATA.timeline[t].reblog||this.HIDE_REPLIES&&this.FETCHED_DATA.timeline[t].in_reply_to_id||this.appendToot(this.FETCHED_DATA.timeline[t],Number(t)));if(""===this.mtBodyContainer.innerHTML)this.mtBodyContainer.setAttribute("role","none"),this.mtBodyContainer.innerHTML='
    \uD83D\uDCED
    Sorry, no toots to show
    Got '+this.FETCHED_DATA.timeline.length+" toots from the server.
    This may be due to an incorrect configuration in the parameters or to filters applied to hide certains type of toots.
    ";else{if(this.LINK_SEE_MORE){let e="";"profile"===this.TIMELINE_TYPE?e=this.PROFILE_NAME:"hashtag"===this.TIMELINE_TYPE?e="tags/"+this.HASHTAG_NAME:"local"===this.TIMELINE_TYPE&&(e="public/local");let o='
    '+this.LINK_SEE_MORE+"
    ";this.mtBodyContainer.parentNode.insertAdjacentHTML("beforeend",o)}this.manageSpinner()}this.mtBodyContainer.addEventListener("click",function(t){"article"!=t.target.localName&&t.target.offsetParent?.localName!="article"&&("img"!=t.target.localName||t.target.parentNode.classList.contains("video-ratio14_7"))||i(t),"button"==t.target.localName&&"spoiler-btn"==t.target.className&&a(t),("mt-toot-media-play-icon"==t.target.className||"svg"==t.target.localName&&"mt-toot-media-play-icon"==t.target.parentNode.className||"path"==t.target.localName&&"mt-toot-media-play-icon"==t.target.parentNode.parentNode.className||"img"==t.target.localName&&t.target.parentNode.classList.contains("video-ratio14_7"))&&s(t)}),this.mtBodyContainer.addEventListener("keydown",function(t){"Enter"===t.key&&"article"==t.target.localName&&i(t)});let i=function(t){let e=t.target.closest(".mt-toot").dataset.location;"a"!==t.target.localName&&"span"!==t.target.localName&&"button"!==t.target.localName&&"time"!==t.target.localName&&"mt-toot-preview-noImage"!==t.target.className&&"mt-toot-avatar-image-big"!==t.target.parentNode.className&&"mt-toot-avatar-image-small"!==t.target.parentNode.className&&"mt-toot-preview-image"!==t.target.parentNode.className&&"mt-toot-preview"!==t.target.parentNode.className&&e&&window.open(e,"_blank","noopener")},a=function(t){let e=t.target.nextSibling;"img"===e.localName||"audio"===e.localName||"video"===e.localName?(t.target.parentNode.classList.remove("mt-toot-media-spoiler"),t.target.style.display="none"):(e.classList.contains("spoiler-text-hidden")||e.classList.contains("spoiler-text-visible"))&&("Show more"==t.target.textContent?(e.classList.remove("spoiler-text-hidden"),e.classList.add("spoiler-text-visible"),t.target.setAttribute("aria-expanded","true"),t.target.textContent="Show less"):(e.classList.remove("spoiler-text-visible"),e.classList.add("spoiler-text-hidden"),t.target.setAttribute("aria-expanded","false"),t.target.textContent="Show more"))},s=function(t){let e=t.target.closest("[data-video-url]"),o=e.dataset.videoUrl;e.replaceChildren(),e.innerHTML=''}},MastodonApi.prototype.setTheme=function(){let t=function(t){document.documentElement.setAttribute("data-theme",t)};if("auto"===this.DEFAULT_THEME){let e=window.matchMedia("(prefers-color-scheme: dark)");e.matches?t("dark"):t("light"),e.addEventListener("change",e=>{e.matches?t("dark"):t("light")})}else t(this.DEFAULT_THEME)},MastodonApi.prototype.getTimelineData=async function(){return new Promise((t,e)=>{async function o(t){let e=await fetch(t);if(!e.ok)throw Error("Failed to fetch the following URL: "+t+"
    Error status: "+e.status+"
    Error message: "+e.statusText);let o=await e.json();return o}let i={};"profile"===this.TIMELINE_TYPE?i.timeline=`${this.INSTANCE_URL}/api/v1/accounts/${this.USER_ID}/statuses?limit=${this.TOOTS_LIMIT}`:"hashtag"===this.TIMELINE_TYPE?i.timeline=`${this.INSTANCE_URL}/api/v1/timelines/tag/${this.HASHTAG_NAME}?limit=${this.TOOTS_LIMIT}`:"local"===this.TIMELINE_TYPE&&(i.timeline=`${this.INSTANCE_URL}/api/v1/timelines/public?local=true&limit=${this.TOOTS_LIMIT}`),this.HIDE_EMOJOS||(i.emojos=this.INSTANCE_URL+"/api/v1/custom_emojis");let a=Object.entries(i).map(([t,i])=>o(i).then(e=>({[t]:e})).catch(o=>(e(Error("Something went wrong fetching data")),this.mtBodyContainer.innerHTML='
    ❌
    Sorry, request failed:
    '+o.message+"
    ",this.mtBodyContainer.setAttribute("role","none"),{[t]:[]})));Promise.all(a).then(e=>{this.FETCHED_DATA=e.reduce((t,e)=>({...t,...e}),{}),t()})})},MastodonApi.prototype.appendToot=function(t,e){this.mtBodyContainer.insertAdjacentHTML("beforeend",this.assambleToot(t,e))},MastodonApi.prototype.assambleToot=function(t,e){let o,i,a,s,r,n,l,d,c;t.reblog?(s=t.reblog.url,o='
    '+this.escapeHtml(t.account.username)+' avatar
    ',a=this.showEmojos(t.reblog.account.display_name?t.reblog.account.display_name:t.reblog.account.username,this.FETCHED_DATA.emojos),i='
    '+a+'
    ',r=t.reblog.created_at,c=t.reblog.replies_count,d=t.reblog.reblogs_count,l=t.reblog.favourites_count):(s=t.url,o='
    ',a=this.showEmojos(t.account.display_name?t.account.display_name:t.account.username,this.FETCHED_DATA.emojos),i='
    '+a+'
    ',r=t.created_at,c=t.replies_count,d=t.reblogs_count,l=t.favourites_count),n=this.formatDate(r);let m='
    ",p="";"0"!==this.TEXT_MAX_LINES&&(p="truncate",document.documentElement.style.setProperty("--text-max-lines",this.TEXT_MAX_LINES));let h="";h=""!==t.spoiler_text?'
    '+t.spoiler_text+'
    '+this.formatTootText(t.content)+"
    ":t.reblog&&""!==t.reblog.content&&""!==t.reblog.spoiler_text?'
    '+t.reblog.spoiler_text+'
    '+this.formatTootText(t.reblog.content)+"
    ":t.reblog&&""!==t.reblog.content&&""===t.reblog.spoiler_text?'
    '+this.formatTootText(t.reblog.content)+"
    ":'
    '+this.formatTootText(t.content)+"
    ";let u=[];if(t.media_attachments.length>0)for(let v in t.media_attachments)u.push(this.placeMedias(t.media_attachments[v],t.sensitive));if(t.reblog&&t.reblog.media_attachments.length>0)for(let g in t.reblog.media_attachments)u.push(this.placeMedias(t.reblog.media_attachments[g],t.reblog.sensitive));let E="";!this.HIDE_PREVIEW_LINK&&t.card&&(E=this.placePreviewLink(t.card));let b="";if(t.poll){let T="";for(let f in t.poll.options)T+="
  • "+t.poll.options[f].title+"
    • ";b='
    "}let _="";if(!this.HIDE_COUNTER_BAR){let A='
    '+c+"
    ",$='
    '+d+"
    ",N='
    '+l+"
    ";_='
    '+A+$+N+"
    "}let L='
    '+o+i+m+"
    "+h+u.join("")+E+b+_+"
    ";return L},MastodonApi.prototype.formatTootText=function(t){let e=t;return e=this.addTarget2hashtagMention(e),this.HIDE_EMOJOS||(e=this.showEmojos(e,this.FETCHED_DATA.emojos)),this.MARKDOWN_BLOCKQUOTE&&(e=this.replaceHTMLtag(e,"

    >","

    ","

    ","

    ")),e},MastodonApi.prototype.addTarget2hashtagMention=function(t){let e=t.replaceAll('rel="tag"','rel="tag" target="_blank"');return e.replaceAll('class="u-url mention"','class="u-url mention" target="_blank"')},MastodonApi.prototype.showEmojos=function(t,e){if(!t.includes(":"))return t;for(let o of e){let i=RegExp(`\\:${o.shortcode}\\:`,"g");t=t.replace(i,`Emoji ${o.shortcode}`)}return t},MastodonApi.prototype.replaceHTMLtag=function(t,e,o,i,a){if(!t.includes(e))return t;{let s=RegExp(e+"(.*?)"+o,"gi");return t.replace(s,i+"$1"+a)}},MastodonApi.prototype.placeMedias=function(t,e){let o=e||!1,i=t.type,a="";return"image"===i&&(a='
    '+(o?'':"")+''+(t.description?this.escapeHtml(t.description):
    '),"audio"===i&&(a=t.preview_url?'
    '+(o?'':"")+''+(t.description?this.escapeHtml(t.description):
    ':'
    '+(o?'':"")+'
    '),"video"===i&&(a=this.HIDE_VIDEO_PREVIEW?'
    '+(o?'':"")+'
    ':'
    '+(o?'':"")+''+(t.description?this.escapeHtml(t.description):
    '),a},MastodonApi.prototype.placePreviewLink=function(t){let e=''+(t.image?'
    '+this.escapeHtml(t.image_description)+'
    ':'
    \uD83D\uDCC4
    ')+'
    '+(t.provider_name?''+this.parseHTMLstring(t.provider_name)+"":"")+''+t.title+""+(t.author_name?''+this.parseHTMLstring(t.author_name)+"":"")+"
    ";return e},MastodonApi.prototype.formatDate=function(t){let e=new Date(t),o=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",][e.getMonth()]+" "+e.getDate()+", "+e.getFullYear();return o},MastodonApi.prototype.parseHTMLstring=function(t){let e=new DOMParser,o=e.parseFromString(t,"text/html");return o.body.textContent},MastodonApi.prototype.escapeHtml=function(t){return(t??"").replaceAll("&","&").replaceAll("<","<").replaceAll(">",">").replaceAll('"',""").replaceAll("'","'")},MastodonApi.prototype.manageSpinner=function(){let t=this.SPINNER_CLASS,e=function(){this.parentNode.classList.remove(t),this.removeEventListener("load",e),this.removeEventListener("error",e)};this.mtBodyContainer.querySelectorAll(`.${this.SPINNER_CLASS} > img`).forEach(t=>{t.addEventListener("load",e),t.addEventListener("error",e)})};