diff --git a/404.html b/404.html index 0fcb4e9..313e879 100644 --- a/404.html +++ b/404.html @@ -7,7 +7,7 @@ content="width=device-width, initial-scale=1, viewport-fit=cover" /> Page not found - + +
+ + + + + + + + +
+ `,this.domRefFrame=e.querySelector("#frame"),this.domRefImg={fallback:e.querySelector("#fallbackPlaceholder"),webp:e.querySelector("#webpPlaceholder"),jpeg:e.querySelector("#jpegPlaceholder")},this.domRefPlayButton=e.querySelector("#playButton")}setupComponent(){this.shadowRoot.querySelector("slot[name=image]").assignedNodes().length===0&&this.initImagePlaceholder(),this.domRefPlayButton.setAttribute("aria-label",`${this.videoPlay}: ${this.videoTitle}`),this.setAttribute("title",`${this.videoPlay}: ${this.videoTitle}`),(this.autoLoad||this.isYouTubeShort()||this.autoPause)&&this.initIntersectionObserver(),this.disableNoscript||this.injectSearchNoScript()}attributeChangedCallback(e,n,i){n!==i&&(this.setupComponent(),this.domRefFrame.classList.contains("activated")&&(this.domRefFrame.classList.remove("activated"),this.shadowRoot.querySelector("iframe").remove(),this.isIframeLoaded=!1))}injectSearchNoScript(){const e=document.createElement("noscript");this.prepend(e),e.innerHTML=this.generateIframe()}generateIframe(e=!1){let n=e?0:1,i=this.autoPause?"&enablejsapi=1":"";const r=this.noCookie?"-nocookie":"";let a;return this.playlistId?a=`?listType=playlist&list=${this.playlistId}&`:a=`${this.videoId}?`,this.isYouTubeShort()&&(this.params=`loop=1&mute=1&modestbranding=1&playsinline=1&rel=0&enablejsapi=1&playlist=${this.videoId}`,n=1),` +`}addIframe(e=!1){if(!this.isIframeLoaded){const n=this.generateIframe(e);this.domRefFrame.insertAdjacentHTML("beforeend",n),this.domRefFrame.classList.add("activated"),this.isIframeLoaded=!0,this.attemptShortAutoPlay(),this.dispatchEvent(new CustomEvent("liteYoutubeIframeLoaded",{detail:{videoId:this.videoId},bubbles:!0,cancelable:!0}))}}initImagePlaceholder(){this.testPosterImage(),this.domRefImg.fallback.setAttribute("aria-label",`${this.videoPlay}: ${this.videoTitle}`),this.domRefImg?.fallback?.setAttribute("alt",`${this.videoPlay}: ${this.videoTitle}`)}async testPosterImage(){setTimeout(()=>{const e=`https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`,n=new Image;n.fetchPriority="low",n.referrerPolicy="origin",n.src=e,n.onload=async i=>{const r=i.target;r?.naturalHeight==90&&r?.naturalWidth==120&&(this.posterQuality="hqdefault");const s=`https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;this.domRefImg.webp.srcset=s;const c=`https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;this.domRefImg.fallback.loading=this.posterLoading,this.domRefImg.jpeg.srcset=c,this.domRefImg.fallback.src=c,this.domRefImg.fallback.loading=this.posterLoading}},100)}initIntersectionObserver(){const e={root:null,rootMargin:"0px",threshold:0};new IntersectionObserver((i,r)=>{i.forEach(a=>{a.isIntersecting&&!this.isIframeLoaded&&(Ut.warmConnections(this),this.addIframe(!0),r.unobserve(this))})},e).observe(this),this.autoPause&&new IntersectionObserver((r,a)=>{r.forEach(s=>{s.intersectionRatio!==1&&this.shadowRoot.querySelector("iframe")?.contentWindow?.postMessage('{"event":"command","func":"pauseVideo","args":""}',"*")})},{threshold:1}).observe(this)}attemptShortAutoPlay(){this.isYouTubeShort()&&setTimeout(()=>{this.shadowRoot.querySelector("iframe")?.contentWindow?.postMessage('{"event":"command","func":"playVideo","args":""}',"*")},2e3)}isYouTubeShort(){return this.getAttribute("short")===""&&window.matchMedia("(max-width: 40em)").matches}static addPrefetch(e,n){const i=document.createElement("link");i.rel=e,i.href=n,i.crossOrigin="true",document.head.append(i)}static warmConnections(e){Ut.isPreconnected||window.liteYouTubeIsPreconnected||(Ut.addPrefetch("preconnect","https://i.ytimg.com/"),Ut.addPrefetch("preconnect","https://s.ytimg.com"),e.noCookie?Ut.addPrefetch("preconnect","https://www.youtube-nocookie.com"):(Ut.addPrefetch("preconnect","https://www.youtube.com"),Ut.addPrefetch("preconnect","https://www.google.com"),Ut.addPrefetch("preconnect","https://googleads.g.doubleclick.net"),Ut.addPrefetch("preconnect","https://static.doubleclick.net")),Ut.isPreconnected=!0,window.liteYouTubeIsPreconnected=!0)}}Ut.isPreconnected=!1;customElements.define("lite-youtube",Ut);function Eg({authors:t,hidden:e,children:n}){if(e||!t?.[0]?.account?.id)return n;const i=t[0].account;return o("div",{class:"card-byline",children:[n,o("div",{class:"card-byline-author",children:[o(x,{icon:"link",size:"s"})," ",o("small",{children:o(I,{id:"4LHHK6",components:{0:o(Ce,{account:i,showAvatar:!0})}})})]})]})}function Qr(t){return["x.com","twitter.com","threads.net","bsky.app","bsky.brid.gy","fed.brid.gy"].includes(t)}function Cg({card:t,selfReferential:e,selfAuthor:n,instance:i}){const r=sn(B),{blurhash:a,title:s,description:c,html:l,providerName:d,providerUrl:h,authorName:u,authorUrl:f,width:p,height:m,image:g,imageDescription:v,url:T,type:_,embedUrl:k,language:S,publishedAt:b,authors:A}=t,C=s||d||u,L=p/m>=1.2?"large":"",[F,M]=z(null);if(W(()=>{C&&g&&!e&&oc(T)&&ic(i,T).then(R=>{if(!R)return;const{id:Q,url:et}=R;M("#"+et)})},[C,g,e]),r.unfurledLinks[T])return null;const E=/`;\n }\n addIframe(isIntersectionObserver = false) {\n if (!this.isIframeLoaded) {\n const iframeHTML = this.generateIframe(isIntersectionObserver);\n this.domRefFrame.insertAdjacentHTML('beforeend', iframeHTML);\n this.domRefFrame.classList.add('activated');\n this.isIframeLoaded = true;\n this.attemptShortAutoPlay();\n this.dispatchEvent(new CustomEvent('liteYoutubeIframeLoaded', {\n detail: {\n videoId: this.videoId,\n },\n bubbles: true,\n cancelable: true,\n }));\n }\n }\n initImagePlaceholder() {\n this.testPosterImage();\n this.domRefImg.fallback.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);\n this.domRefImg?.fallback?.setAttribute('alt', `${this.videoPlay}: ${this.videoTitle}`);\n }\n async testPosterImage() {\n setTimeout(() => {\n const webpUrl = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;\n const img = new Image();\n img.fetchPriority = 'low';\n img.referrerPolicy = 'origin';\n img.src = webpUrl;\n img.onload = async (e) => {\n const target = e.target;\n const noPoster = target?.naturalHeight == 90 && target?.naturalWidth == 120;\n if (noPoster) {\n this.posterQuality = 'hqdefault';\n }\n const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;\n this.domRefImg.webp.srcset = posterUrlWebp;\n const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;\n this.domRefImg.fallback.loading = this.posterLoading;\n this.domRefImg.jpeg.srcset = posterUrlJpeg;\n this.domRefImg.fallback.src = posterUrlJpeg;\n this.domRefImg.fallback.loading = this.posterLoading;\n };\n }, 100);\n }\n initIntersectionObserver() {\n const options = {\n root: null,\n rootMargin: '0px',\n threshold: 0,\n };\n const observer = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting && !this.isIframeLoaded) {\n LiteYTEmbed.warmConnections(this);\n this.addIframe(true);\n observer.unobserve(this);\n }\n });\n }, options);\n observer.observe(this);\n if (this.autoPause) {\n const windowPause = new IntersectionObserver((e, o) => {\n e.forEach(entry => {\n if (entry.intersectionRatio !== 1) {\n this.shadowRoot\n .querySelector('iframe')\n ?.contentWindow?.postMessage('{\"event\":\"command\",\"func\":\"pauseVideo\",\"args\":\"\"}', '*');\n }\n });\n }, { threshold: 1 });\n windowPause.observe(this);\n }\n }\n attemptShortAutoPlay() {\n if (this.isYouTubeShort()) {\n setTimeout(() => {\n this.shadowRoot\n .querySelector('iframe')\n ?.contentWindow?.postMessage('{\"event\":\"command\",\"func\":\"' + 'playVideo' + '\",\"args\":\"\"}', '*');\n }, 2000);\n }\n }\n isYouTubeShort() {\n return (this.getAttribute('short') === '' &&\n window.matchMedia('(max-width: 40em)').matches);\n }\n static addPrefetch(kind, url) {\n const linkElem = document.createElement('link');\n linkElem.rel = kind;\n linkElem.href = url;\n linkElem.crossOrigin = 'true';\n document.head.append(linkElem);\n }\n static warmConnections(context) {\n if (LiteYTEmbed.isPreconnected || window.liteYouTubeIsPreconnected)\n return;\n LiteYTEmbed.addPrefetch('preconnect', 'https://i.ytimg.com/');\n LiteYTEmbed.addPrefetch('preconnect', 'https://s.ytimg.com');\n if (!context.noCookie) {\n LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube.com');\n LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');\n LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');\n LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');\n }\n else {\n LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com');\n }\n LiteYTEmbed.isPreconnected = true;\n window.liteYouTubeIsPreconnected = true;\n }\n}\nLiteYTEmbed.isPreconnected = false;\ncustomElements.define('lite-youtube', LiteYTEmbed);\n//# sourceMappingURL=lite-youtube.js.map","import { Trans } from '@lingui/react/macro';\n\nimport Icon from './icon';\nimport NameText from './name-text';\n\nfunction Byline({ authors, hidden, children }) {\n if (hidden) return children;\n if (!authors?.[0]?.account?.id) return children;\n const author = authors[0].account;\n\n return (\n
\n {children}\n
\n {' '}\n \n \n More from \n \n \n
\n
\n );\n}\n\nexport default Byline;\n","import '@justinribeiro/lite-youtube';\n\nimport { decodeBlurHash, getBlurHashAverageColor } from 'fast-blurhash';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport { useSnapshot } from 'valtio';\n\nimport getDomain from '../utils/get-domain';\nimport isMastodonLinkMaybe from '../utils/isMastodonLinkMaybe';\nimport states from '../utils/states';\nimport unfurlMastodonLink from '../utils/unfurl-link';\n\nimport Byline from './byline';\nimport Icon from './icon';\nimport RelativeTime from './relative-time';\n\n// \"Post\": Quote post + card link preview combo\n// Assume all links from these domains are \"posts\"\n// Mastodon links are \"posts\" too but they are converted to real quote posts and there's too many domains to check\n// This is just \"Progressive Enhancement\"\nfunction isCardPost(domain) {\n return [\n 'x.com',\n 'twitter.com',\n 'threads.net',\n 'bsky.app',\n 'bsky.brid.gy',\n 'fed.brid.gy',\n ].includes(domain);\n}\n\nfunction StatusCard({ card, selfReferential, selfAuthor, instance }) {\n const snapStates = useSnapshot(states);\n const {\n blurhash,\n title,\n description,\n html,\n providerName,\n providerUrl,\n authorName,\n authorUrl,\n width,\n height,\n image,\n imageDescription,\n url,\n type,\n embedUrl,\n language,\n publishedAt,\n authors,\n } = card;\n\n /* type\n link = Link OEmbed\n photo = Photo OEmbed\n video = Video OEmbed\n rich = iframe OEmbed. Not currently accepted, so won't show up in practice.\n */\n\n const hasText = title || providerName || authorName;\n const isLandscape = width / height >= 1.2;\n const size = isLandscape ? 'large' : '';\n\n const [cardStatusURL, setCardStatusURL] = useState(null);\n // const [cardStatusID, setCardStatusID] = useState(null);\n useEffect(() => {\n if (hasText && image && !selfReferential && isMastodonLinkMaybe(url)) {\n unfurlMastodonLink(instance, url).then((result) => {\n if (!result) return;\n const { id, url } = result;\n setCardStatusURL('#' + url);\n\n // NOTE: This is for quote post\n // (async () => {\n // const { masto } = api({ instance });\n // const status = await masto.v1.statuses.$select(id).fetch();\n // saveStatus(status, instance);\n // setCardStatusID(id);\n // })();\n });\n }\n }, [hasText, image, selfReferential]);\n\n // if (cardStatusID) {\n // return (\n // \n // );\n // }\n\n if (snapStates.unfurledLinks[url]) return null;\n\n const hasIframeHTML = /