18 | {/* User info, verified badge, twitter logo, text, etc. */}
19 |
74 | )
75 |
76 | return noTilt ? (
77 | TweetBody
78 | ) : (
79 |
20 |
35 | {/* Images, Preview images, videos, polls, etc. */}
36 |
23 | Replying to{' '}
24 |
29 | @{tweet.in_reply_to_screen_name}
30 |
31 |
32 | )}
33 |
37 | {tweet.mediaDetails?.length ? (
38 |
53 |
73 |
45 | {tweet.mediaDetails?.map((media) => (
46 |
47 |
51 | ) : null}
52 |
8 |
67 | )
68 |
--------------------------------------------------------------------------------
/apps/custom-tweet-dub/components/tweet/tweet-media.tsx:
--------------------------------------------------------------------------------
1 | import type { MediaDetails } from 'react-tweet/api'
2 | import { type EnrichedTweet, getMediaUrl, getMp4Video } from 'react-tweet'
3 | import BlurImage from './blur-image'
4 |
5 | export const TweetMedia = ({
6 | tweet,
7 | media,
8 | }: {
9 | tweet: EnrichedTweet
10 | media: MediaDetails
11 | }) => {
12 | if (media.type == 'video') {
13 | return (
14 |
26 | )
27 | }
28 |
29 | if (media.type == 'animated_gif') {
30 | return (
31 |
9 |
10 |
62 |
63 | Link to tweet
64 |
17 | {tweet.entities.map((item, i) => {
18 | switch (item.type) {
19 | case 'hashtag':
20 | case 'mention':
21 | case 'url':
22 | case 'symbol':
23 | return (
24 |
25 | {item.text}
26 |
27 | )
28 | case 'media':
29 | return
30 | default:
31 | // We use `dangerouslySetInnerHTML` to preserve the text encoding.
32 | // https://github.com/vercel-labs/react-tweet/issues/29
33 | return (
34 |
35 | )
36 | }
37 | })}
38 |
39 | )
40 |
--------------------------------------------------------------------------------
/apps/custom-tweet-dub/components/tweet/tweet.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense } from 'react'
2 | import { type TweetCoreProps, enrichTweet } from 'react-tweet'
3 | import { getTweet } from 'react-tweet/api'
4 | import { DubTweet } from './dub-tweet'
5 |
6 | type Props = TweetCoreProps & {
7 | noTilt?: boolean
8 | }
9 |
10 | export const TweetContent = async ({ id, noTilt, onError }: Props) => {
11 | const tweet = id
12 | ? await getTweet(id).catch((err) => {
13 | if (onError) {
14 | onError(err)
15 | } else {
16 | console.error(err)
17 | }
18 | })
19 | : undefined
20 |
21 | if (!tweet) {
22 | return (
23 |
24 |
26 | )
27 | }
28 |
29 | return There was an error loading this tweet.
25 |
7 |
14 | )
15 |
16 | export default Layout
17 |
--------------------------------------------------------------------------------
/apps/next-app/app/light/mdx/page.tsx:
--------------------------------------------------------------------------------
1 | import Post from './post.mdx'
2 |
3 | export default function Page() {
4 | return
8 | {children}
9 |
12 |
13 |
9 |
18 | )
19 |
--------------------------------------------------------------------------------
/apps/next-app/mdx-components.tsx:
--------------------------------------------------------------------------------
1 | export const useMDXComponents = (components: any) => components
2 |
--------------------------------------------------------------------------------
/apps/next-app/mdx.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.mdx' {
2 | let MDXComponent: (props) => JSX.Element
3 | export default MDXComponent
4 | }
5 |
--------------------------------------------------------------------------------
/apps/next-app/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
10 | {children}
11 | {footer && (
12 |
15 | )}
16 |
17 |
15 |
18 |
19 | )
20 | }
21 |
22 | export default function MyApp() {
23 | return
43 |
45 | ```
46 |
47 | Alternatively, a parent with the class `light` or `dark` will also work:
48 |
49 | ```tsx
50 |
51 |
53 | ```
54 |
55 | ### Updating the theme
56 |
57 | In CSS Modules, you can use the `:global` selector to update the CSS variables used by themes:
58 |
59 | ```css
60 | .my-class :global(.react-tweet-theme) {
61 | --tweet-body-font-size: 1rem;
62 | }
63 | ```
64 |
65 | For Global CSS the usage of `:global` is not necessary.
66 |
67 | ## Enabling cache for the Twitter API
68 |
69 | Rendering tweets requires making a call to Twitter's syndication API. Getting rate limited by that API is very hard but it's possible if you're relying only on the endpoint we provide for SWR (`react-tweet.vercel.app/api/tweet/:id`) as the IPs of the server are making many requests to the syndication API. This also applies to RSC where the API endpoint is not required but the server is still making the request from the same IP.
70 |
71 | To prevent this, you can use a db like Redis or [Vercel KV](https://vercel.com/docs/storage/vercel-kv) to cache the tweets. For example using [Vercel KV](https://vercel.com/docs/storage/vercel-kv):
72 |
73 | ```tsx
74 | import { Suspense } from 'react'
75 | import { TweetSkeleton, EmbeddedTweet, TweetNotFound } from 'react-tweet'
76 | import { fetchTweet, Tweet } from 'react-tweet/api'
77 | import { kv } from '@vercel/kv'
78 |
79 | async function getTweet(
80 | id: string,
81 | fetchOptions?: RequestInit
82 | ): Promise
49 |
71 | ),
72 | },
73 | }
74 |
75 | export default config
76 |
--------------------------------------------------------------------------------
/apps/site/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": true,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "incremental": true,
15 | "esModuleInterop": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "jsx": "preserve",
21 | "plugins": [
22 | {
23 | "name": "next"
24 | }
25 | ]
26 | },
27 | "include": [
28 | "next-env.d.ts",
29 | "**/*.ts",
30 | "**/*.tsx",
31 | ".next/types/**/*.ts"
32 | ],
33 | "exclude": [
34 | "node_modules"
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/apps/site/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "buildCommand": "pnpm turbo build --filter=site...",
3 | "ignoreCommand": "pnpm dlx turbo-ignore"
4 | }
5 |
--------------------------------------------------------------------------------
/apps/vite-app/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/apps/vite-app/api/tweet/[tweet].ts:
--------------------------------------------------------------------------------
1 | import type { VercelRequest, VercelResponse } from '@vercel/node'
2 | import { getTweet } from 'react-tweet/api'
3 |
4 | const handler = async (req: VercelRequest, res: VercelResponse) => {
5 | const tweetId = req.query.tweet
6 |
7 | if (req.method !== 'GET' || typeof tweetId !== 'string') {
8 | res.status(400).json({ error: 'Bad Request.' })
9 | return
10 | }
11 |
12 | try {
13 | const tweet = await getTweet(tweetId)
14 | res.status(tweet ? 200 : 404).json({ data: tweet ?? null })
15 | } catch (error) {
16 | console.error(error)
17 | res.status(400).json({ error: error.message ?? 'Bad request.' })
18 | }
19 | }
20 |
21 | export default handler
22 |
--------------------------------------------------------------------------------
/apps/vite-app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
50 |
57 | Powered by
58 |
65 |
66 |
67 | 68 | © {new Date().getFullYear()} Vercel, Inc. All rights reserved. 69 |
70 |
8 |
9 |
11 |
12 | )
13 |
--------------------------------------------------------------------------------
/apps/vite-app/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import { createBrowserRouter, RouterProvider } from 'react-router-dom'
4 | import { Layout } from './layout'
5 | import { IndexPage } from './pages/index'
6 | import { TweetPage } from './pages/tweet'
7 |
8 | const router = createBrowserRouter([
9 | {
10 | path: '/',
11 | element: 8 | {tweet.entities.map((item, i) => ( 9 | 10 | ))} 11 |
12 | ) 13 | -------------------------------------------------------------------------------- /packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-container.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | width: 100%; 3 | overflow: hidden; 4 | border: var(--tweet-border); 5 | border-radius: 12px; 6 | margin: var(--tweet-quoted-container-margin); 7 | transition-property: background-color, box-shadow; 8 | transition-duration: 0.2s; 9 | cursor: pointer; 10 | } 11 | 12 | .root:hover { 13 | background-color: var(--tweet-quoted-bg-color-hover); 14 | } 15 | 16 | .article { 17 | position: relative; 18 | box-sizing: inherit; 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-container.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import type { ReactNode } from 'react' 4 | import type { EnrichedQuotedTweet } from '../../utils.js' 5 | import s from './quoted-tweet-container.module.css' 6 | 7 | type Props = { tweet: EnrichedQuotedTweet; children: ReactNode } 8 | 9 | export const QuotedTweetContainer = ({ tweet, children }: Props) => ( 10 | {
13 | e.preventDefault()
14 | window.open(tweet.url, '_blank')
15 | }}
16 | >
17 | {children}
18 |
19 | )
20 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-header.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | display: flex;
3 | padding: 0.75rem 0.75rem 0 0.75rem;
4 | line-height: var(--tweet-header-line-height);
5 | font-size: var(--tweet-header-font-size);
6 | white-space: nowrap;
7 | overflow-wrap: break-word;
8 | overflow: hidden;
9 | }
10 |
11 | .avatar {
12 | position: relative;
13 | height: 20px;
14 | width: 20px;
15 | }
16 |
17 | .avatarSquare {
18 | border-radius: 4px;
19 | }
20 |
21 | .author {
22 | display: flex;
23 | margin: 0 0.5rem;
24 | }
25 |
26 | .authorText {
27 | font-weight: 700;
28 | text-overflow: ellipsis;
29 | overflow: hidden;
30 | white-space: nowrap;
31 | }
32 |
33 | .username {
34 | color: var(--tweet-font-color-secondary);
35 | text-decoration: none;
36 | text-overflow: ellipsis;
37 | margin-left: 0.125rem;
38 | }
39 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-header.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import { AvatarImg } from '../avatar-img.js'
3 | import s from './quoted-tweet-header.module.css'
4 | import type { EnrichedQuotedTweet } from '../../utils.js'
5 | import { VerifiedBadge } from '../verified-badge.js'
6 |
7 | type Props = { tweet: EnrichedQuotedTweet }
8 |
9 | export const QuotedTweetHeader = ({ tweet }: Props) => {
10 | const { user } = tweet
11 |
12 | return (
13 |
14 |
20 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet.tsx:
--------------------------------------------------------------------------------
1 | import type { EnrichedQuotedTweet } from '../../utils.js'
2 | import { QuotedTweetContainer } from './quoted-tweet-container.js'
3 | import { QuotedTweetHeader } from './quoted-tweet-header.js'
4 | import { QuotedTweetBody } from './quoted-tweet-body.js'
5 | import { TweetMedia } from '../tweet-media.js'
6 |
7 | type Props = { tweet: EnrichedQuotedTweet }
8 |
9 | export const QuotedTweet = ({ tweet }: Props) => (
10 |
26 |
33 |
34 |
35 |
43 |
36 | {user.name}
37 |
38 |
40 | @{user.screen_name}
41 |
42 |
7 | {tweet.entities.map((item, i) => {
8 | switch (item.type) {
9 | case 'hashtag':
10 | case 'mention':
11 | case 'url':
12 | case 'symbol':
13 | return (
14 |
10 | {children}
11 |
12 | )
13 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-header.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | display: flex;
3 | padding-bottom: 0.75rem;
4 | line-height: var(--tweet-header-line-height);
5 | font-size: var(--tweet-header-font-size);
6 | white-space: nowrap;
7 | overflow-wrap: break-word;
8 | overflow: hidden;
9 | }
10 |
11 | .avatar {
12 | position: relative;
13 | height: 48px;
14 | width: 48px;
15 | }
16 | .avatarOverflow {
17 | height: 100%;
18 | width: 100%;
19 | position: absolute;
20 | overflow: hidden;
21 | border-radius: 9999px;
22 | }
23 | .avatarSquare {
24 | border-radius: 4px;
25 | }
26 | .avatarShadow {
27 | height: 100%;
28 | width: 100%;
29 | transition-property: background-color;
30 | transition-duration: 0.2s;
31 | box-shadow: rgb(0 0 0 / 3%) 0px 0px 2px inset;
32 | }
33 | .avatarShadow:hover {
34 | background-color: rgba(26, 26, 26, 0.15);
35 | }
36 |
37 | .author {
38 | max-width: calc(100% - 84px);
39 | display: flex;
40 | flex-direction: column;
41 | justify-content: center;
42 | margin: 0 0.5rem;
43 | }
44 | .authorLink {
45 | text-decoration: none;
46 | color: inherit;
47 | display: flex;
48 | align-items: center;
49 | }
50 | .authorLink:hover {
51 | text-decoration-line: underline;
52 | }
53 | .authorVerified {
54 | display: inline-flex;
55 | }
56 | .authorLinkText {
57 | font-weight: 700;
58 | text-overflow: ellipsis;
59 | overflow: hidden;
60 | white-space: nowrap;
61 | }
62 |
63 | .authorMeta {
64 | display: flex;
65 | }
66 | .authorFollow {
67 | display: flex;
68 | }
69 | .username {
70 | color: var(--tweet-font-color-secondary);
71 | text-decoration: none;
72 | text-overflow: ellipsis;
73 | }
74 | .follow {
75 | color: var(--tweet-color-blue-secondary);
76 | text-decoration: none;
77 | font-weight: 700;
78 | }
79 | .follow:hover {
80 | text-decoration-line: underline;
81 | }
82 | .separator {
83 | padding: 0 0.25rem;
84 | }
85 |
86 | .brand {
87 | margin-inline-start: auto;
88 | }
89 |
90 | .twitterIcon {
91 | width: 23.75px;
92 | height: 23.75px;
93 | color: var(--tweet-twitter-icon-color);
94 | fill: currentColor;
95 | user-select: none;
96 | }
97 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-header.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import type { EnrichedTweet } from '../utils.js'
3 | import type { TwitterComponents } from './types.js'
4 | import { AvatarImg } from './avatar-img.js'
5 | import s from './tweet-header.module.css'
6 | import { VerifiedBadge } from './verified-badge.js'
7 |
8 | type Props = {
9 | tweet: EnrichedTweet
10 | components?: TwitterComponents
11 | }
12 |
13 | export const TweetHeader = ({ tweet, components }: Props) => {
14 | const Img = components?.AvatarImg ?? AvatarImg
15 | const { user } = tweet
16 |
17 | return (
18 |
19 |
25 |
90 | )
91 | }
92 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-in-reply-to.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | text-decoration: none;
3 | color: var(--tweet-font-color-secondary);
4 | font-size: 0.9375rem;
5 | line-height: 1.25rem;
6 | margin-bottom: 0.25rem;
7 | overflow-wrap: break-word;
8 | white-space: pre-wrap;
9 | }
10 | .root:hover {
11 | text-decoration-thickness: 1px;
12 | text-decoration-line: underline;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-in-reply-to.tsx:
--------------------------------------------------------------------------------
1 | import type { EnrichedTweet } from '../utils.js'
2 | import s from './tweet-in-reply-to.module.css'
3 |
4 | export const TweetInReplyTo = ({ tweet }: { tweet: EnrichedTweet }) => (
5 |
11 | Replying to @{tweet.in_reply_to_screen_name}
12 |
13 | )
14 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-info-created-at.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | color: inherit;
3 | text-decoration: none;
4 | font-size: var(--tweet-info-font-size);
5 | line-height: var(--tweet-info-line-height);
6 | }
7 | .root:hover {
8 | text-decoration-thickness: 1px;
9 | text-decoration-line: underline;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-info-created-at.tsx:
--------------------------------------------------------------------------------
1 | import type { EnrichedTweet } from '../utils.js'
2 | import { formatDate } from '../date-utils.js'
3 | import s from './tweet-info-created-at.module.css'
4 |
5 | export const TweetInfoCreatedAt = ({ tweet }: { tweet: EnrichedTweet }) => {
6 | const createdAt = new Date(tweet.created_at)
7 | const formattedCreatedAtDate = formatDate(createdAt)
8 |
9 | return (
10 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-info.module.css:
--------------------------------------------------------------------------------
1 | .info {
2 | display: flex;
3 | align-items: center;
4 | color: var(--tweet-font-color-secondary);
5 | margin-top: 0.125rem;
6 | overflow-wrap: break-word;
7 | white-space: nowrap;
8 | text-overflow: ellipsis;
9 | }
10 | .infoLink {
11 | color: inherit;
12 | text-decoration: none;
13 | }
14 | .infoLink {
15 | height: var(--tweet-actions-icon-wrapper-size);
16 | width: var(--tweet-actions-icon-wrapper-size);
17 | font: inherit;
18 | margin-left: auto;
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | margin-right: -4px;
23 | border-radius: 9999px;
24 | transition-property: background-color;
25 | transition-duration: 0.2s;
26 | }
27 | .infoLink:hover {
28 | background-color: var(--tweet-color-blue-secondary-hover);
29 | }
30 | .infoIcon {
31 | color: inherit;
32 | fill: currentColor;
33 | height: var(--tweet-actions-icon-size);
34 | user-select: none;
35 | }
36 | .infoLink:hover > .infoIcon {
37 | color: var(--tweet-color-blue-secondary);
38 | }
39 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-info.tsx:
--------------------------------------------------------------------------------
1 | import type { EnrichedTweet } from '../utils.js'
2 | import { TweetInfoCreatedAt } from './tweet-info-created-at.js'
3 | import s from './tweet-info.module.css'
4 |
5 | export const TweetInfo = ({ tweet }: { tweet: EnrichedTweet }) => (
6 |
31 | 
37 |
38 |
39 |
40 |
41 |
42 |
43 |
49 |
76 |
83 |
88 |
89 |
50 | {user.name}
51 |
52 |
55 |
61 | @{user.screen_name}
62 |
63 |
75 |
64 | ·
65 |
71 | Follow
72 |
73 |
74 |
7 |
22 | )
23 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-link.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | font-weight: inherit;
3 | color: var(--tweet-color-blue-secondary);
4 | text-decoration: none;
5 | cursor: pointer;
6 | }
7 | .root:hover {
8 | text-decoration-thickness: 1px;
9 | text-decoration-line: underline;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-link.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import s from './tweet-link.module.css'
3 |
4 | type Props = {
5 | children: ReactNode
6 | href: string
7 | }
8 |
9 | export const TweetLink = ({ href, children }: Props) => (
10 |
11 | {children}
12 |
13 | )
14 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-media-video.module.css:
--------------------------------------------------------------------------------
1 | .anchor {
2 | display: flex;
3 | align-items: center;
4 | color: white;
5 | padding: 0 1rem;
6 | border: 1px solid transparent;
7 | border-radius: 9999px;
8 | font-weight: 700;
9 | transition: background-color 0.2s;
10 | cursor: pointer;
11 | user-select: none;
12 | outline-style: none;
13 | text-decoration: none;
14 | text-overflow: ellipsis;
15 | white-space: nowrap;
16 | }
17 | .videoButton {
18 | position: relative;
19 | height: 67px;
20 | width: 67px;
21 | display: flex;
22 | align-items: center;
23 | justify-content: center;
24 | background-color: var(--tweet-color-blue-primary);
25 | transition-property: background-color;
26 | transition-duration: 0.2s;
27 | border: 4px solid #fff;
28 | border-radius: 9999px;
29 | cursor: pointer;
30 | }
31 | .videoButton:hover,
32 | .videoButton:focus-visible {
33 | background-color: var(--tweet-color-blue-primary-hover);
34 | }
35 | .videoButtonIcon {
36 | margin-left: 3px;
37 | width: calc(50% + 4px);
38 | height: calc(50% + 4px);
39 | max-width: 100%;
40 | color: #fff;
41 | fill: currentColor;
42 | user-select: none;
43 | }
44 | .watchOnTwitter {
45 | position: absolute;
46 | top: 12px;
47 | right: 8px;
48 | }
49 | .watchOnTwitter > a {
50 | min-width: 2rem;
51 | min-height: 2rem;
52 | font-size: 0.875rem;
53 | line-height: 1rem;
54 | backdrop-filter: blur(4px);
55 | background-color: rgba(15, 20, 25, 0.75);
56 | }
57 | .watchOnTwitter > a:hover {
58 | background-color: rgba(39, 44, 48, 0.75);
59 | }
60 | .viewReplies {
61 | position: relative;
62 | min-height: 2rem;
63 | background-color: var(--tweet-color-blue-primary);
64 | border-color: var(--tweet-color-blue-primary);
65 | font-size: 0.9375rem;
66 | line-height: 1.25rem;
67 | }
68 | .viewReplies:hover {
69 | background-color: var(--tweet-color-blue-primary-hover);
70 | }
71 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-media-video.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useState } from 'react'
4 | import clsx from 'clsx'
5 | import type { MediaAnimatedGif, MediaVideo } from '../api/index.js'
6 | import {
7 | EnrichedQuotedTweet,
8 | type EnrichedTweet,
9 | getMediaUrl,
10 | getMp4Video,
11 | } from '../utils.js'
12 | import mediaStyles from './tweet-media.module.css'
13 | import s from './tweet-media-video.module.css'
14 |
15 | type Props = {
16 | tweet: EnrichedTweet | EnrichedQuotedTweet
17 | media: MediaAnimatedGif | MediaVideo
18 | }
19 |
20 | export const TweetMediaVideo = ({ tweet, media }: Props) => {
21 | const [playButton, setPlayButton] = useState(true)
22 | const [isPlaying, setIsPlaying] = useState(false)
23 | const [ended, setEnded] = useState(false)
24 | const mp4Video = getMp4Video(media)
25 | let timeout = 0
26 |
27 | return (
28 | <>
29 |
56 |
57 | {playButton && (
58 |
91 | )}
92 |
93 | {!isPlaying && !ended && (
94 |
104 | )}
105 |
106 | {ended && (
107 |
113 | View replies
114 |
115 | )}
116 |
117 | )
118 | }
119 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-media.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | margin-top: 0.75rem;
3 | overflow: hidden;
4 | position: relative;
5 | }
6 | .rounded {
7 | border: var(--tweet-border);
8 | border-radius: 12px;
9 | }
10 | .mediaWrapper {
11 | display: grid;
12 | grid-auto-rows: 1fr;
13 | gap: 2px;
14 | height: 100%;
15 | width: 100%;
16 | }
17 | .grid2Columns {
18 | grid-template-columns: repeat(2, 1fr);
19 | }
20 | .grid3 > a:first-child {
21 | grid-row: span 2;
22 | }
23 | .grid2x2 {
24 | grid-template-rows: repeat(2, 1fr);
25 | }
26 | .mediaContainer {
27 | position: relative;
28 | height: 100%;
29 | width: 100%;
30 | display: flex;
31 | align-items: center;
32 | justify-content: center;
33 | }
34 | .mediaLink {
35 | text-decoration: none;
36 | outline-style: none;
37 | }
38 | .skeleton {
39 | padding-bottom: 56.25%;
40 | width: 100%;
41 | display: block;
42 | }
43 | .image {
44 | position: absolute;
45 | top: 0px;
46 | left: 0px;
47 | bottom: 0px;
48 | height: 100%;
49 | width: 100%;
50 | margin: 0;
51 | object-fit: cover;
52 | object-position: center;
53 | }
54 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-media.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment } from 'react'
2 | import clsx from 'clsx'
3 | import {
4 | type EnrichedTweet,
5 | type EnrichedQuotedTweet,
6 | getMediaUrl,
7 | } from '../utils.js'
8 | import { MediaDetails } from '../api/index.js'
9 | import type { TwitterComponents } from './types.js'
10 | import { TweetMediaVideo } from './tweet-media-video.js'
11 | import { MediaImg } from './media-img.js'
12 | import s from './tweet-media.module.css'
13 |
14 | const getSkeletonStyle = (media: MediaDetails, itemCount: number) => {
15 | let paddingBottom = 56.25 // default of 16x9
16 |
17 | // if we only have 1 item, show at original ratio
18 | if (itemCount === 1)
19 | paddingBottom =
20 | (100 / media.original_info.width) * media.original_info.height
21 |
22 | // if we have 2 items, double the default to be 16x9 total
23 | if (itemCount === 2) paddingBottom = paddingBottom * 2
24 |
25 | return {
26 | width: media.type === 'photo' ? undefined : 'unset',
27 | paddingBottom: `${paddingBottom}%`,
28 | }
29 | }
30 |
31 | type Props = {
32 | tweet: EnrichedTweet | EnrichedQuotedTweet
33 | components?: TwitterComponents
34 | quoted?: boolean
35 | }
36 |
37 | export const TweetMedia = ({ tweet, components, quoted }: Props) => {
38 | const length = tweet.mediaDetails?.length ?? 0
39 | const Img = components?.MediaImg ?? MediaImg
40 |
41 | return (
42 |
43 |
85 | )
86 | }
87 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-not-found.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | padding-bottom: 0.75rem;
6 | }
7 | .root > h3 {
8 | font-size: 1.25rem;
9 | margin-bottom: 0.5rem;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/twitter-theme/tweet-not-found.tsx:
--------------------------------------------------------------------------------
1 | import { TweetContainer } from './tweet-container.js'
2 | import styles from './tweet-not-found.module.css'
3 |
4 | type Props = {
5 | error?: any
6 | }
7 |
8 | export const TweetNotFound = (_props: Props) => (
9 | 1 && s.grid2Columns,
47 | length === 3 && s.grid3,
48 | length > 4 && s.grid2x2
49 | )}
50 | >
51 | {tweet.mediaDetails?.map((media) => (
52 |
53 | {media.type === 'photo' ? (
54 |
61 |
65 | 
71 |
72 | ) : (
73 |
82 | ))}
83 |
84 |
74 |
78 |
80 | )}
81 |
11 |
14 | Tweet not found
12 |The embedded tweet could not be found…
13 |{icon}
38 | ) : null
39 | }
40 |
--------------------------------------------------------------------------------
/packages/react-tweet/src/utils.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | TweetBase,
3 | Tweet,
4 | QuotedTweet,
5 | MediaDetails,
6 | HashtagEntity,
7 | SymbolEntity,
8 | Indices,
9 | UserMentionEntity,
10 | UrlEntity,
11 | MediaEntity,
12 | MediaAnimatedGif,
13 | MediaVideo,
14 | } from './api/index.js'
15 |
16 | export type TweetCoreProps = {
17 | id: string
18 | onError?(error: any): any
19 | }
20 |
21 | const getTweetUrl = (tweet: TweetBase) =>
22 | `https://x.com/${tweet.user.screen_name}/status/${tweet.id_str}`
23 |
24 | const getUserUrl = (usernameOrTweet: string | TweetBase) =>
25 | `https://x.com/${
26 | typeof usernameOrTweet === 'string'
27 | ? usernameOrTweet
28 | : usernameOrTweet.user.screen_name
29 | }`
30 |
31 | const getLikeUrl = (tweet: TweetBase) =>
32 | `https://x.com/intent/like?tweet_id=${tweet.id_str}`
33 |
34 | const getReplyUrl = (tweet: TweetBase) =>
35 | `https://x.com/intent/tweet?in_reply_to=${tweet.id_str}`
36 |
37 | const getFollowUrl = (tweet: TweetBase) =>
38 | `https://x.com/intent/follow?screen_name=${tweet.user.screen_name}`
39 |
40 | const getHashtagUrl = (hashtag: HashtagEntity) =>
41 | `https://x.com/hashtag/${hashtag.text}`
42 |
43 | const getSymbolUrl = (symbol: SymbolEntity) =>
44 | `https://x.com/search?q=%24${symbol.text}`
45 |
46 | const getInReplyToUrl = (tweet: Tweet) =>
47 | `https://x.com/${tweet.in_reply_to_screen_name}/status/${tweet.in_reply_to_status_id_str}`
48 |
49 | export const getMediaUrl = (
50 | media: MediaDetails,
51 | size: 'small' | 'medium' | 'large'
52 | ): string => {
53 | const url = new URL(media.media_url_https)
54 | const extension = url.pathname.split('.').pop()
55 |
56 | if (!extension) return media.media_url_https
57 |
58 | url.pathname = url.pathname.replace(`.${extension}`, '')
59 | url.searchParams.set('format', extension)
60 | url.searchParams.set('name', size)
61 |
62 | return url.toString()
63 | }
64 |
65 | export const getMp4Videos = (media: MediaAnimatedGif | MediaVideo) => {
66 | const { variants } = media.video_info
67 | const sortedMp4Videos = variants
68 | .filter((vid) => vid.content_type === 'video/mp4')
69 | .sort((a, b) => (b.bitrate ?? 0) - (a.bitrate ?? 0))
70 |
71 | return sortedMp4Videos
72 | }
73 |
74 | export const getMp4Video = (media: MediaAnimatedGif | MediaVideo) => {
75 | const mp4Videos = getMp4Videos(media)
76 | // Skip the highest quality video and use the next quality
77 | return mp4Videos.length > 1 ? mp4Videos[1] : mp4Videos[0]
78 | }
79 |
80 | export const formatNumber = (n: number): string => {
81 | if (n > 999999) return `${(n / 1000000).toFixed(1)}M`
82 | if (n > 999) return `${(n / 1000).toFixed(1)}K`
83 | return n.toString()
84 | }
85 |
86 | type TextEntity = {
87 | indices: Indices
88 | type: 'text'
89 | }
90 |
91 | type TweetEntity =
92 | | HashtagEntity
93 | | UserMentionEntity
94 | | UrlEntity
95 | | MediaEntity
96 | | SymbolEntity
97 |
98 | type EntityWithType =
99 | | TextEntity
100 | | (HashtagEntity & { type: 'hashtag' })
101 | | (UserMentionEntity & { type: 'mention' })
102 | | (UrlEntity & { type: 'url' })
103 | | (MediaEntity & { type: 'media' })
104 | | (SymbolEntity & { type: 'symbol' })
105 |
106 | type Entity = {
107 | text: string
108 | } & (
109 | | TextEntity
110 | | (HashtagEntity & { type: 'hashtag'; href: string })
111 | | (UserMentionEntity & { type: 'mention'; href: string })
112 | | (UrlEntity & { type: 'url'; href: string })
113 | | (MediaEntity & { type: 'media'; href: string })
114 | | (SymbolEntity & { type: 'symbol'; href: string })
115 | )
116 |
117 | function getEntities(tweet: TweetBase): Entity[] {
118 | const textMap = Array.from(tweet.text)
119 | const result: EntityWithType[] = [
120 | { indices: tweet.display_text_range, type: 'text' },
121 | ]
122 |
123 | addEntities(result, 'hashtag', tweet.entities.hashtags)
124 | addEntities(result, 'mention', tweet.entities.user_mentions)
125 | addEntities(result, 'url', tweet.entities.urls)
126 | addEntities(result, 'symbol', tweet.entities.symbols)
127 | if (tweet.entities.media) {
128 | addEntities(result, 'media', tweet.entities.media)
129 | }
130 | fixRange(tweet, result)
131 |
132 | return result.map((entity) => {
133 | const text = textMap.slice(entity.indices[0], entity.indices[1]).join('')
134 | switch (entity.type) {
135 | case 'hashtag':
136 | return Object.assign(entity, { href: getHashtagUrl(entity), text })
137 | case 'mention':
138 | return Object.assign(entity, {
139 | href: getUserUrl(entity.screen_name),
140 | text,
141 | })
142 | case 'url':
143 | case 'media':
144 | return Object.assign(entity, {
145 | href: entity.expanded_url,
146 | text: entity.display_url,
147 | })
148 | case 'symbol':
149 | return Object.assign(entity, { href: getSymbolUrl(entity), text })
150 | default:
151 | return Object.assign(entity, { text })
152 | }
153 | })
154 | }
155 |
156 | function addEntities(
157 | result: EntityWithType[],
158 | type: EntityWithType['type'],
159 | entities: TweetEntity[]
160 | ) {
161 | for (const entity of entities) {
162 | for (const [i, item] of result.entries()) {
163 | if (
164 | item.indices[0] > entity.indices[0] ||
165 | item.indices[1] < entity.indices[1]
166 | ) {
167 | continue
168 | }
169 |
170 | const items = [{ ...entity, type }] as EntityWithType[]
171 |
172 | if (item.indices[0] < entity.indices[0]) {
173 | items.unshift({
174 | indices: [item.indices[0], entity.indices[0]],
175 | type: 'text',
176 | })
177 | }
178 | if (item.indices[1] > entity.indices[1]) {
179 | items.push({
180 | indices: [entity.indices[1], item.indices[1]],
181 | type: 'text',
182 | })
183 | }
184 |
185 | result.splice(i, 1, ...items)
186 | break // Break out of the loop to avoid iterating over the new items
187 | }
188 | }
189 | }
190 |
191 | /**
192 | * Update display_text_range to work w/ Array.from
193 | * Array.from is unicode aware, unlike string.slice()
194 | */
195 | function fixRange(tweet: TweetBase, entities: EntityWithType[]) {
196 | if (
197 | tweet.entities.media &&
198 | tweet.entities.media[0].indices[0] < tweet.display_text_range[1]
199 | ) {
200 | tweet.display_text_range[1] = tweet.entities.media[0].indices[0]
201 | }
202 | const lastEntity = entities.at(-1)
203 | if (lastEntity && lastEntity.indices[1] > tweet.display_text_range[1]) {
204 | lastEntity.indices[1] = tweet.display_text_range[1]
205 | }
206 | }
207 |
208 | export type EnrichedTweet = Omit