add support for quoted tweets (#117)

* add support for quoted tweets

* fix imports

* tweak tweet media for quoted media

Author: ilyichv

packages/react-tweet/src/api/get-tweet.ts

@@ -55,7 +55,7 @@ export async function getTweet(
       'tfw_tweet_edit_frontend:on',
     ].join(';')
   )
-
+  
   const res = await fetch(url.toString(), fetchOptions)
   const isJson = res.headers.get('content-type')?.includes('application/json')
   const data = isJson ? await res.json() : undefined

packages/react-tweet/src/api/types/tweet.ts

@@ -80,6 +80,7 @@ export interface QuotedTweet extends TweetBase {
   reply_count: number
   retweet_count: number
   favorite_count: number
+  mediaDetails?: MediaDetails[]
   self_thread: {
     id_str: string
   }

packages/react-tweet/src/twitter-theme/embedded-tweet.tsx

@@ -8,6 +8,7 @@ import { TweetMedia } from './tweet-media.js'
 import { TweetInfo } from './tweet-info.js'
 import { TweetActions } from './tweet-actions.js'
 import { TweetReplies } from './tweet-replies.js'
+import { TweetQuotedTweet } from './tweet-quoted-tweet.js'
 import { enrichTweet } from '../utils.js'
 import { useMemo } from 'react'
 
@@ -27,6 +28,7 @@ export const EmbeddedTweet = ({ tweet: t, components }: Props) => {
       {tweet.mediaDetails?.length ? (
         <TweetMedia tweet={tweet} components={components} />
       ) : null}
+      {tweet.quoted_tweet && <TweetQuotedTweet tweet={tweet.quoted_tweet} />}
       <TweetInfo tweet={tweet} />
       <TweetActions tweet={tweet} />
       <TweetReplies tweet={tweet} />

packages/react-tweet/src/twitter-theme/theme.css

@@ -11,6 +11,14 @@
   --tweet-body-line-height: 1.5rem;
   --tweet-body-margin: 0;
 
+  /* Quoted */
+  --tweet-quoted-body-font-size: 0.938rem;
+  --tweet-quoted-body-font-weight: 400;
+  --tweet-quoted-body-line-height: 1.25rem;
+  --tweet-quoted-body-margin: 0.25rem 0 0.75rem 0;
+  --tweet-quoted-container-margin: 0.75rem 0;
+
+
   /* Info */
   --tweet-info-font-size: 0.9375rem;
   --tweet-info-line-height: 1.25rem;

packages/react-tweet/src/twitter-theme/tweet-author-verified-badge.module.css

@@ -0,0 +1,10 @@
+.verifiedOld {
+    color: var(--tweet-verified-old-color);
+}
+.verifiedBlue {
+    color: var(--tweet-verified-blue-color);
+}
+.verifiedGovernment {
+    /* color: var(--tweet-verified-government-color); */
+    color: rgb(130, 154, 171);
+}

packages/react-tweet/src/twitter-theme/tweet-author-verified-badge.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+import s from './tweet-author-verified-badge.module.css'
+import {
+  Verified,
+  VerifiedBusiness,
+  VerifiedGovernment,
+} from './icons/index.js'
+import { TweetUser } from '../api'
+
+type Props = {
+  user: TweetUser
+  className?: string
+}
+
+export const TweetAuthorVerifiedBadge = ({ user, className }: Props) => {
+  const verified = user.verified || user.is_blue_verified || user.verified_type
+  let icon = <Verified />
+  let iconClassName: string | null = s.verifiedBlue
+
+  if (verified) {
+    if (!user.is_blue_verified) {
+      iconClassName = s.verifiedOld
+    }
+    switch (user.verified_type) {
+      case 'Government':
+        icon = <VerifiedGovernment />
+        iconClassName = s.verifiedGovernment
+        break
+      case 'Business':
+        icon = <VerifiedBusiness />
+        iconClassName = null
+        break
+    }
+  }
+  return (
+    verified && <div className={clsx(className, iconClassName)}>{icon}</div>
+  )
+}

packages/react-tweet/src/twitter-theme/tweet-header.module.css

@@ -59,16 +59,7 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.verifiedOld {
-  color: var(--tweet-verified-old-color);
-}
-.verifiedBlue {
-  color: var(--tweet-verified-blue-color);
-}
-.verifiedGovernment {
-  /* color: var(--tweet-verified-government-color); */
-  color: rgb(130, 154, 171);
-}
+
 .authorMeta {
   display: flex;
 }

packages/react-tweet/src/twitter-theme/tweet-header.tsx

@@ -2,12 +2,8 @@ import clsx from 'clsx'
 import type { EnrichedTweet } from '../utils.js'
 import type { TwitterComponents } from './types.js'
 import { AvatarImg } from './avatar-img.js'
-import {
-  Verified,
-  VerifiedGovernment,
-  VerifiedBusiness,
-} from './icons/index.js'
 import s from './tweet-header.module.css'
+import { TweetAuthorVerifiedBadge } from './tweet-author-verified-badge.js'
 
 type Props = {
   tweet: EnrichedTweet
@@ -17,25 +13,6 @@ type Props = {
 export const TweetHeader = ({ tweet, components }: Props) => {
   const Img = components?.AvatarImg ?? AvatarImg
   const { user } = tweet
-  const verified = user.verified || user.is_blue_verified || user.verified_type
-  let icon = <Verified />
-  let iconClassName: string | null = s.verifiedBlue
-
-  if (verified) {
-    if (!user.is_blue_verified) {
-      iconClassName = s.verifiedOld
-    }
-    switch (user.verified_type) {
-      case 'Government':
-        icon = <VerifiedGovernment />
-        iconClassName = s.verifiedGovernment
-        break
-      case 'Business':
-        icon = <VerifiedBusiness />
-        iconClassName = null
-        break
-    }
-  }
 
   return (
     <div className={s.header}>
@@ -72,9 +49,7 @@ export const TweetHeader = ({ tweet, components }: Props) => {
           <div className={s.authorLinkText}>
             <span title={user.name}>{user.name}</span>
           </div>
-          {verified && (
-            <div className={clsx(s.authorVerified, iconClassName)}>{icon}</div>
-          )}
+          <TweetAuthorVerifiedBadge user={user} className={s.authorVerified} />
         </a>
         <div className={s.authorMeta}>
           <a

packages/react-tweet/src/twitter-theme/tweet-media-video.tsx

@@ -3,12 +3,12 @@
 import { useState } from 'react'
 import clsx from 'clsx'
 import type { MediaAnimatedGif, MediaVideo } from '../api/index.js'
-import { type EnrichedTweet, getMediaUrl, getMp4Video } from '../utils.js'
+import { EnrichedQuotedTweet, type EnrichedTweet, getMediaUrl, getMp4Video } from '../utils.js'
 import mediaStyles from './tweet-media.module.css'
 import s from './tweet-media-video.module.css'
 
 type Props = {
-  tweet: EnrichedTweet
+  tweet: EnrichedTweet | EnrichedQuotedTweet
   media: MediaAnimatedGif | MediaVideo
 }
 

packages/react-tweet/src/twitter-theme/tweet-media.module.css

@@ -5,6 +5,10 @@
   overflow: hidden;
   position: relative;
 }
+.rootQuoted {
+  border: none;
+  border-radius: 0;
+}
 .mediaWrapper {
   display: grid;
   grid-auto-rows: 1fr;

packages/react-tweet/src/twitter-theme/tweet-media.tsx

@@ -1,6 +1,10 @@
 import { Fragment } from 'react'
 import clsx from 'clsx'
-import { type EnrichedTweet, getMediaUrl } from '../utils.js'
+import {
+  type EnrichedQuotedTweet,
+  type EnrichedTweet,
+  getMediaUrl,
+} from '../utils.js'
 import { MediaDetails } from '../api/index.js'
 import type { TwitterComponents } from './types.js'
 import { TweetMediaVideo } from './tweet-media-video.js'
@@ -25,16 +29,17 @@ const getSkeletonStyle = (media: MediaDetails, itemCount: number) => {
 }
 
 type Props = {
-  tweet: EnrichedTweet
+  tweet: EnrichedTweet | EnrichedQuotedTweet
   components?: TwitterComponents
+  quoted?: boolean
 }
 
-export const TweetMedia = ({ tweet, components }: Props) => {
+export const TweetMedia = ({ tweet, components, quoted }: Props) => {
   const length = tweet.mediaDetails?.length ?? 0
   const Img = components?.MediaImg ?? MediaImg
 
   return (
-    <div className={s.root}>
+    <div className={clsx(s.root, quoted && s.rootQuoted)}>
       <div
         className={clsx(
           s.mediaWrapper,

packages/react-tweet/src/twitter-theme/tweet-quoted-tweet-body.module.css

@@ -0,0 +1,9 @@
+.root {
+    font-size: var(--tweet-quoted-body-font-size);
+    font-weight: var(--tweet-quoted-body-font-weight);
+    line-height: var(--tweet-quoted-body-line-height);
+    margin: var(--tweet-quoted-body-margin);
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    padding: 0 0.75rem;
+}

packages/react-tweet/src/twitter-theme/tweet-quoted-tweet-body.tsx

@@ -0,0 +1,14 @@
+import type { EnrichedQuotedTweet } from '../utils.js'
+import s from './tweet-quoted-tweet-body.module.css'
+
+export const TweetQuotedTweetBody = ({
+  tweet,
+}: {
+  tweet: EnrichedQuotedTweet
+}) => (
+  <p className={s.root}>
+    {tweet.entities.map((item, i) => (
+      <span key={i} dangerouslySetInnerHTML={{ __html: item.text }} />
+    ))}
+  </p>
+)

packages/react-tweet/src/twitter-theme/tweet-quoted-tweet-container.module.css

@@ -0,0 +1,13 @@
+.root {
+    width: 100%;
+    overflow: hidden;
+    /* Base font styles */
+    border: var(--tweet-border);
+    border-radius: 12px;
+    margin: var(--tweet-quoted-container-margin);
+}
+
+.article {
+    position: relative;
+    box-sizing: inherit;
+}

packages/react-tweet/src/twitter-theme/tweet-quoted-tweet-container.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react'
+import s from './tweet-quoted-tweet-container.module.css'
+
+type Props = { children: ReactNode }
+
+export const TweetQuotedTweetContainer = ({ children }: Props) => (
+  <div className={s.root}>
+    <article className={s.article}>{children}</article>
+  </div>
+)

packages/react-tweet/src/twitter-theme/tweet-quoted-tweet-header.module.css

@@ -0,0 +1,39 @@
+.header {
+    display: flex;
+    padding: 0.75rem 0.75rem 0 0.75rem;
+    line-height: var(--tweet-header-line-height);
+    font-size: var(--tweet-header-font-size);
+    white-space: nowrap;
+    overflow-wrap: break-word;
+    overflow: hidden;
+
+}
+
+.avatar {
+    position: relative;
+    height: 20px;
+    width: 20px;
+}
+
+.avatarSquare {
+    border-radius: 4px;
+}
+
+.author {
+    display: flex;
+    margin: 0 0.5rem;
+}
+
+.authorText {
+    font-weight: 700;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.username {
+    color: var(--tweet-font-color-secondary);
+    text-decoration: none;
+    text-overflow: ellipsis;
+    margin-left: 0.125rem;
+}

packages/react-tweet/src/twitter-theme/tweet-quoted-tweet-header.tsx

@@ -0,0 +1,47 @@
+import clsx from 'clsx'
+import { AvatarImg } from './avatar-img.js'
+import s from './tweet-quoted-tweet-header.module.css'
+import type { EnrichedQuotedTweet } from '../utils'
+import { TweetAuthorVerifiedBadge } from './tweet-author-verified-badge.js'
+
+type Props = {
+  tweet: EnrichedQuotedTweet
+}
+
+export const TweetQuotedTweetHeader = ({ tweet }: Props) => {
+  const { user } = tweet
+
+  return (
+    <div className={s.header}>
+      <a
+        href={tweet.url}
+        className={s.avatar}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <div
+          className={clsx(
+            s.avatarOverflow,
+            user.profile_image_shape === 'Square' && s.avatarSquare
+          )}
+        >
+          <AvatarImg
+            src={user.profile_image_url_https}
+            alt={user.name}
+            width={20}
+            height={20}
+          />
+        </div>
+      </a>
+      <div className={s.author}>
+        <div className={s.authorText}>
+          <span title={user.name}>{user.name}</span>
+        </div>
+        <TweetAuthorVerifiedBadge className={s.authorVerified} user={user} />
+        <div className={s.username}>
+          <span title={`@${user.screen_name}`}>@{user.screen_name}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/react-tweet/src/twitter-theme/tweet-quoted-tweet.tsx

@@ -0,0 +1,23 @@
+import { QuotedTweet } from '../api'
+import { TweetQuotedTweetHeader } from './tweet-quoted-tweet-header.js'
+import { TweetQuotedTweetBody } from './tweet-quoted-tweet-body.js'
+import { TweetQuotedTweetContainer } from './tweet-quoted-tweet-container.js'
+import { TweetMedia } from './tweet-media.js'
+import { useMemo } from 'react'
+import { enrichQuotedTweet } from '../utils.js'
+
+type Props = {
+  tweet: QuotedTweet
+}
+
+export const TweetQuotedTweet = ({ tweet: t }: Props) => {
+  const tweet = useMemo(() => enrichQuotedTweet(t), [t])
+
+  return (
+    <TweetQuotedTweetContainer>
+      <TweetQuotedTweetHeader tweet={tweet} />
+      <TweetQuotedTweetBody tweet={tweet} />
+      {tweet.mediaDetails?.length ? <TweetMedia quoted tweet={tweet} /> : null}
+    </TweetQuotedTweetContainer>
+  )
+}