+
@@ -40,28 +70,11 @@ export const TweetHeader = ({ tweet, components }: Props) => {
rel="noopener noreferrer"
>
- {tweet.user.name}
+ {user.name}
- {tweet.user.verified ||
- (tweet.user.is_blue_verified && (
-
-
-
- ))}
+ {verified && (
+ {icon}
+ )}
{
target="_blank"
rel="noopener noreferrer"
>
-
- @{tweet.user.screen_name}
-
+ @{user.screen_name}
ยท
a {
+ min-width: 2rem;
+ min-height: 2rem;
+ font-size: 0.875rem;
+ line-height: 1rem;
+ backdrop-filter: blur(4px);
+ background-color: rgba(15, 20, 25, 0.75);
+}
+.watchOnTwitter > a:hover {
+ background-color: rgba(39, 44, 48, 0.75);
+}
+.viewReplies {
+ position: relative;
+ min-height: 2rem;
+ background-color: var(--tweet-color-blue-primary);
+ border-color: var(--tweet-color-blue-primary);
+ font-size: 0.9375rem;
+ line-height: 1.25rem;
+}
+.viewReplies:hover {
+ background-color: var(--tweet-color-blue-primary-hover);
+}
diff --git a/packages/react-tweet/src/twitter-theme/tweet-media-video.tsx b/packages/react-tweet/src/twitter-theme/tweet-media-video.tsx
index 9cf016a..dee4932 100644
--- a/packages/react-tweet/src/twitter-theme/tweet-media-video.tsx
+++ b/packages/react-tweet/src/twitter-theme/tweet-media-video.tsx
@@ -1,18 +1,23 @@
'use client'
import { useState } from 'react'
+import clsx from 'clsx'
import type { MediaAnimatedGif, MediaVideo } from '../api/index.js'
-import { getMediaUrl, getMp4Video } from '../utils.js'
+import { 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
media: MediaAnimatedGif | MediaVideo
}
-export const TweetMediaVideo = ({ media }: Props) => {
+export const TweetMediaVideo = ({ tweet, media }: Props) => {
const [playButton, setPlayButton] = useState(true)
+ const [isPlaying, setIsPlaying] = useState(false)
+ const [ended, setEnded] = useState(false)
const mp4Video = getMp4Video(media)
+ let timeout = 0
return (
<>
@@ -20,10 +25,26 @@ export const TweetMediaVideo = ({ media }: Props) => {
className={mediaStyles.image}
poster={getMediaUrl(media, 'small')}
controls={!playButton}
- draggable
muted
preload="metadata"
tabIndex={playButton ? -1 : 0}
+ onPlay={() => {
+ if (timeout) window.clearTimeout(timeout)
+ if (!isPlaying) setIsPlaying(true)
+ if (ended) setEnded(false)
+ }}
+ onPause={() => {
+ // When the video is seeked (moved to a different timestamp), it will pause for a moment
+ // before resuming. We don't want to show the message in that case so we wait a bit.
+ if (timeout) window.clearTimeout(timeout)
+ timeout = window.setTimeout(() => {
+ if (isPlaying) setIsPlaying(false)
+ timeout = 0
+ }, 100)
+ }}
+ onEnded={() => {
+ setEnded(true)
+ }}
>
-
-
+
+
+ ))}
)
}
1 && s.grid2Columns,
- length === 3 && s.grid3,
- length > 4 && s.grid2x2
- )}
- >
- {tweet.mediaDetails?.map((media) =>
- media.type === 'photo' ? (
-
- 
-
- ) : (
-
+ {tweet.mediaDetails?.map((media) => (
+
-
- )
- )}
- 1 && s.grid2Columns,
+ length === 3 && s.grid3,
+ length > 4 && s.grid2x2
+ )}
+ >
+ {media.type === 'photo' ? (
+
+
+
+ ) : (
+
+
+
+ )}
+