react-bluesky-embed/dist/bluesky-theme/embed.js

React Bluesky Embed allows you to embed post threads, profiles, and comments in your React application when using Next.js, Create React App, Vite, and more.

import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{AppBskyEmbedExternal,AppBskyEmbedImages,AppBskyEmbedRecord,AppBskyEmbedRecordWithMedia,AppBskyEmbedVideo,AppBskyFeedDefs,AppBskyFeedPost,AppBskyGraphDefs,AppBskyGraphStarterpack,AppBskyLabelerDefs}from"@atproto/api";import{CONTENT_LABELS,labelsToInfo}from"./labels.js";import{getRkey}from"./utils.js";import{Link}from"./link.js";const InfoIcon=props=>/*#__PURE__*/_jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",...props,children:/*#__PURE__*/_jsx("path",{fill:"#42576C",fillRule:"evenodd",d:"M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm8-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-4a1 1 0 0 1-1-1Zm1-3a1 1 0 1 0 2 0 1 1 0 0 0-2 0Z",clipRule:"evenodd"})});const PlayIconSvgComponent=props=>/*#__PURE__*/_jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",...props,children:/*#__PURE__*/_jsx("path",{fill:"#fff",d:"M9.576 2.534C7.578 1.299 5 2.737 5 5.086v13.828c0 2.35 2.578 3.787 4.576 2.552l11.194-6.914c1.899-1.172 1.899-3.932 0-5.104L9.576 2.534Z"})});const StarterPackIcon=props=>/*#__PURE__*/_jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",...props,children:[/*#__PURE__*/_jsx("defs",{children:/*#__PURE__*/_jsxs("linearGradient",{id:"a",x1:0,x2:"100%",y1:0,y2:0,gradientTransform:"rotate(45)",children:[/*#__PURE__*/_jsx("stop",{offset:0,stopColor:"#0A7AFF"}),/*#__PURE__*/_jsx("stop",{offset:1,stopColor:"#59B9FF"})]})}),/*#__PURE__*/_jsx("path",{fill:"url(#a)",fillRule:"evenodd",d:"M11.26 5.227 5.02 6.899c-.734.197-1.17.95-.973 1.685l1.672 6.24c.197.734.951 1.17 1.685.973l6.24-1.672a1.376 1.376 0 0 0 .973-1.685L12.945 6.2a1.375 1.375 0 0 0-1.685-.973Zm-6.566.459a2.632 2.632 0 0 0-1.86 3.223l1.672 6.24a2.632 2.632 0 0 0 3.223 1.861l6.24-1.672a2.631 2.631 0 0 0 1.861-3.223l-1.672-6.24a2.632 2.632 0 0 0-3.223-1.861l-6.24 1.672Z",clipRule:"evenodd"}),/*#__PURE__*/_jsx("path",{fill:"url(#a)",fillRule:"evenodd",d:"M15.138 18.411a4.606 4.606 0 1 0 0-9.211 4.606 4.606 0 0 0 0 9.211Zm0 1.257a5.862 5.862 0 1 0 0-11.724 5.862 5.862 0 0 0 0 11.724Z",clipRule:"evenodd"})]});export function Embed({content,labels,hideRecord}){const labelInfo=labelsToInfo(labels);if(!content)return null;try{if(AppBskyEmbedImages.isView(content)){return /*#__PURE__*/_jsx(ImageEmbed,{content:content,labelInfo:labelInfo})}if(AppBskyEmbedExternal.isView(content)){return /*#__PURE__*/_jsx(ExternalEmbed,{content:content,labelInfo:labelInfo})}if(AppBskyEmbedRecord.isView(content)){if(hideRecord){return null}const record=content.record;if(AppBskyEmbedRecord.isViewRecord(record)){var _record_author_labels,_record_author_labels1,_record_embeds;const pwiOptOut=!!((_record_author_labels=record.author.labels)==null?void 0:_record_author_labels.find(label=>label.val==="!no-unauthenticated"));if(pwiOptOut){return /*#__PURE__*/_jsx(Info,{children:"The author of the quoted post has requested their posts not be displayed on external sites."})}let text;if(AppBskyFeedPost.isRecord(record.value)){text=record.value.text}const isAuthorLabeled=(_record_author_labels1=record.author.labels)==null?void 0:_record_author_labels1.some(label=>CONTENT_LABELS.includes(label.val));return /*#__PURE__*/_jsxs(Link,{href:`/profile/${record.author.did}/post/${getRkey(record)}`,className:"transition-colors hover:bg-neutral-100 border rounded-lg p-2 gap-1.5 w-full flex flex-col",children:[/*#__PURE__*/_jsxs("div",{className:"flex gap-1.5 items-center",children:[/*#__PURE__*/_jsx("div",{className:"w-4 h-4 overflow-hidden rounded-full bg-neutral-300 shrink-0",children:/*#__PURE__*/_jsx("img",{loading:"lazy",src:record.author.avatar,style:isAuthorLabeled?{filter:"blur(1.5px)"}:undefined,alt:"author"})}),/*#__PURE__*/_jsxs("p",{className:"line-clamp-1 text-sm",children:[/*#__PURE__*/_jsx("span",{className:"font-bold",children:record.author.displayName}),/*#__PURE__*/_jsxs("span",{className:"text-textLight dark:text-textDark ml-1",children:["@",record.author.handle]})]})]}),text&&/*#__PURE__*/_jsx("p",{className:"text-sm",children:text}),(_record_embeds=record.embeds)==null?void 0:_record_embeds.map(embed=>/*#__PURE__*/_jsx(Embed,{content:embed,labels:record.labels,hideRecord:true},embed.$type))]})}if(AppBskyGraphDefs.isListView(record)){return /*#__PURE__*/_jsx(GenericWithImageEmbed,{image:record.avatar,title:record.name,href:`/profile/${record.creator.did}/lists/${getRkey(record)}`,subtitle:record.purpose===AppBskyGraphDefs.MODLIST?`Moderation list by @${record.creator.handle}`:`User list by @${record.creator.handle}`,description:record.description})}if(AppBskyFeedDefs.isGeneratorView(record)){var _record_likeCount;return /*#__PURE__*/_jsx(GenericWithImageEmbed,{image:record.avatar,title:record.displayName,href:`/profile/${record.creator.did}/feed/${getRkey(record)}`,subtitle:`Feed by @${record.creator.handle}`,description:`Liked by ${(_record_likeCount=record.likeCount)!=null?_record_likeCount:0} users`})}if(AppBskyLabelerDefs.isLabelerView(record)){return null}if(AppBskyGraphDefs.isStarterPackViewBasic(record)){return /*#__PURE__*/_jsx(StarterPackEmbed,{content:record})}if(AppBskyEmbedRecord.isViewNotFound(record)){return /*#__PURE__*/_jsx(Info,{children:"Quoted post not found, it may have been deleted."})}if(AppBskyEmbedRecord.isViewBlocked(record)){return /*#__PURE__*/_jsx(Info,{children:"The quoted post is blocked."})}if(AppBskyEmbedRecord.isViewDetached(record)){return null}return null}if(AppBskyEmbedVideo.isView(content)){return /*#__PURE__*/_jsx(VideoEmbed,{content:content})}if(AppBskyEmbedRecordWithMedia.isView(content)&&AppBskyEmbedRecord.isViewRecord(content.record.record)){return /*#__PURE__*/_jsxs("div",{className:"flex flex-col gap-2",children:[/*#__PURE__*/_jsx(Embed,{content:content.media,labels:labels,hideRecord:hideRecord}),/*#__PURE__*/_jsx(Embed,{content:{$type:"app.bsky.embed.record#view",record:content.record.record},labels:content.record.record.labels,hideRecord:hideRecord})]})}return null}catch(err){return /*#__PURE__*/_jsx(Info,{children:err instanceof Error?err.message:"An error occurred"})}}function Info({children}){return /*#__PURE__*/_jsxs("div",{className:"w-full rounded-lg border py-2 px-2.5 flex-row flex gap-2 bg-neutral-50",children:[/*#__PURE__*/_jsx(InfoIcon,{className:"w-4 h-4 shrink-0 mt-0.5"}),/*#__PURE__*/_jsx("p",{className:"text-sm text-textLight dark:text-textDark ",children:children})]})}function ImageEmbed({content,labelInfo}){if(labelInfo){return /*#__PURE__*/_jsx(Info,{children:labelInfo})}switch(content.images.length){case 1:return /*#__PURE__*/_jsx("img",{loading:"lazy",src:content.images[0].thumb,alt:content.images[0].alt,className:"w-full rounded-lg overflow-hidden object-cover h-auto max-h-[1000px]"});case 2:return /*#__PURE__*/_jsx("div",{className:"flex gap-1 rounded-lg overflow-hidden w-full aspect-[2/1]",children:content.images.map((image,i)=>/*#__PURE__*/_jsx("img",{src:image.thumb,alt:image.alt,className:"w-1/2 h-full object-cover rounded-sm"},i))});case 3:return /*#__PURE__*/_jsxs("div",{className:"flex gap-1 rounded-lg overflow-hidden w-full aspect-[2/1]",children:[/*#__PURE__*/_jsx("img",{loading:"lazy",src:content.images[0].thumb,alt:content.images[0].alt,className:"flex-[3] object-cover rounded-sm"}),/*#__PURE__*/_jsx("div",{className:"flex flex-col gap-1 flex-[2]",children:content.images.slice(1).map((image,i)=>/*#__PURE__*/_jsx("img",{loading:"lazy",src:image.thumb,alt:image.alt,className:"w-full h-full object-cover rounded-sm"},i))})]});case 4:return /*#__PURE__*/_jsx("div",{className:"grid grid-cols-2 gap-1 rounded-lg overflow-hidden",children:content.images.map((image,i)=>/*#__PURE__*/_jsx("img",{loading:"lazy",src:image.thumb,alt:image.alt,className:"aspect-square w-full object-cover rounded-sm"},i))});default:return null}}function ExternalEmbed({content,labelInfo}){function toNiceDomain(url){try{const urlp=new URL(url);return urlp.host?urlp.host:url}catch(e){return url}}if(labelInfo){return /*#__PURE__*/_jsx(Info,{children:labelInfo})}return /*#__PURE__*/_jsxs(Link,{href:content.external.uri,className:"w-full rounded-lg overflow-hidden border flex flex-col items-stretch",disableTracking:true,children:[content.external.thumb&&/*#__PURE__*/_jsx("img",{loading:"lazy",src:content.external.thumb,className:"aspect-[1.91/1] object-cover",alt:"thumbnail"}),/*#__PURE__*/_jsxs("div",{className:"py-3 px-4",children:[/*#__PURE__*/_jsx("p",{className:"text-sm text-textLight  dark:text-textDark line-clamp-1",children:toNiceDomain(content.external.uri)}),/*#__PURE__*/_jsx("p",{className:"font-semibold line-clamp-3",children:content.external.title}),/*#__PURE__*/_jsx("p",{className:"text-sm text-textLight  dark:text-textDark line-clamp-2 mt-0.5",children:content.external.description})]})]})}function GenericWithImageEmbed({title,subtitle,href,image,description}){return /*#__PURE__*/_jsxs(Link,{href:href,className:"w-full rounded-lg border py-2 px-3 flex flex-col gap-2",children:[/*#__PURE__*/_jsxs("div",{className:"flex gap-2.5 items-center",children:[image?/*#__PURE__*/_jsx("img",{loading:"lazy",src:image,alt:title,className:"w-8 h-8 rounded-md bg-neutral-300 shrink-0"}):/*#__PURE__*/_jsx("div",{className:"w-8 h-8 rounded-md bg-brand shrink-0"}),/*#__PURE__*/_jsxs("div",{className:"flex-1",children:[/*#__PURE__*/_jsx("p",{className:"font-bold text-sm",children:title}),/*#__PURE__*/_jsx("p",{className:"text-textLight  dark:text-textDark text-sm",children:subtitle})]})]}),description&&/*#__PURE__*/_jsx("p",{className:"text-textLight  dark:text-textDark text-sm",children:description})]})}function VideoEmbed({content}){let aspectRatio=1;if(content.aspectRatio){const{width,height}=content.aspectRatio;aspectRatio=clamp(width/height,1/1,3/1)}return /*#__PURE__*/_jsxs("div",{className:"w-full overflow-hidden rounded-lg aspect-square relative",style:{aspectRatio:`${aspectRatio} / 1`},children:[/*#__PURE__*/_jsx("img",{loading:"lazy",src:content.thumbnail,alt:content.alt||"video thumbnail",className:"object-cover size-full"}),/*#__PURE__*/_jsx("div",{className:"size-24 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black/50 flex items-center justify-center",children:/*#__PURE__*/_jsx(PlayIconSvgComponent,{className:"object-cover size-3/5"})})]})}function StarterPackEmbed({content}){if(!AppBskyGraphStarterpack.isRecord(content.record)){return null}const starterPackHref=getStarterPackHref(content);const imageUri=getStarterPackImage(content);return /*#__PURE__*/_jsxs(Link,{href:starterPackHref,className:"w-full rounded-lg overflow-hidden border flex flex-col items-stretch",children:[/*#__PURE__*/_jsx("img",{loading:"lazy",src:imageUri,className:"aspect-[1.91/1] object-cover",alt:"starter pack"}),/*#__PURE__*/_jsxs("div",{className:"py-3 px-4",children:[/*#__PURE__*/_jsxs("div",{className:"flex space-x-2 items-center",children:[/*#__PURE__*/_jsx(StarterPackIcon,{className:"w-10 h-10"}),/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx("p",{className:"font-semibold leading-[21px]",children:content.record.name}),/*#__PURE__*/_jsxs("p",{className:"text-sm text-textLight  dark:text-textDark line-clamp-2 leading-[18px]",children:["Starter pack by"," ",content.creator.displayName||`@${content.creator.handle}`]})]})]}),content.record.description&&/*#__PURE__*/_jsx("p",{className:"text-sm mt-1",children:content.record.description}),!!content.joinedAllTimeCount&&content.joinedAllTimeCount>50&&/*#__PURE__*/_jsxs("p",{className:"text-sm font-semibold text-textLight mt-1",children:[content.joinedAllTimeCount," users have joined!"]})]})]})}function getStarterPackImage(starterPack){const rkey=getRkey({uri:starterPack.uri});return`https://ogcard.cdn.bsky.app/start/${starterPack.creator.did}/${rkey}`}function getStarterPackHref(starterPack){const rkey=getRkey({uri:starterPack.uri});const handleOrDid=starterPack.creator.handle||starterPack.creator.did;return`/starter-pack/${handleOrDid}/${rkey}`}function clamp(num,min,max){return Math.max(min,Math.min(num,max))}