stacker.news/components/item-full.js

117 lines
3.6 KiB
JavaScript
Raw Normal View History

2022-02-17 17:23:43 +00:00
import Item, { ItemJob } from './item'
2021-09-24 21:28:21 +00:00
import Reply from './reply'
2021-09-23 17:42:00 +00:00
import Comment from './comment'
import Text from './text'
2021-09-24 21:28:21 +00:00
import Comments from './comments'
2021-09-23 17:42:00 +00:00
import styles from '../styles/item.module.css'
import { NOFOLLOW_LIMIT } from '../lib/constants'
2021-09-23 22:18:48 +00:00
import { useMe } from './me'
2021-09-24 21:28:21 +00:00
import { Button } from 'react-bootstrap'
2022-02-12 14:06:41 +00:00
import { TwitterTweetEmbed } from 'react-twitter-embed'
2022-02-05 21:40:54 +00:00
import YouTube from 'react-youtube'
2022-01-20 20:22:10 +00:00
import useDarkMode from 'use-dark-mode'
2022-03-10 16:09:05 +00:00
import { useState } from 'react'
2021-09-23 17:42:00 +00:00
2021-09-24 21:28:21 +00:00
function BioItem ({ item, handleClick }) {
2021-09-23 22:18:48 +00:00
const me = useMe()
2021-09-23 20:09:07 +00:00
if (!item.text) {
return null
}
return (
<>
<ItemText item={item} />
2021-09-23 22:18:48 +00:00
{me?.name === item.user.name &&
2021-11-12 22:39:52 +00:00
<div className='text-right'>
<Button
onClick={handleClick}
size='md' variant='link'
>edit bio
</Button>
</div>}
<Reply parentId={item.id} meComments={item.meComments} />
2021-09-23 20:09:07 +00:00
</>
)
}
2022-02-12 14:06:41 +00:00
function TweetSkeleton () {
return (
<div className={styles.tweetsSkeleton}>
<div className={styles.tweetSkeleton}>
<div className={`${styles.img} clouds`} />
<div className={styles.content1}>
<div className={`${styles.line} clouds`} />
<div className={`${styles.line} clouds`} />
<div className={`${styles.line} clouds`} />
</div>
</div>
</div>
)
}
2022-01-20 20:22:10 +00:00
function ItemEmbed ({ item }) {
const darkMode = useDarkMode()
2022-02-12 14:06:41 +00:00
const [overflowing, setOverflowing] = useState(false)
const [show, setShow] = useState(false)
const twitter = item.url?.match(/^https?:\/\/twitter\.com\/(?:#!\/)?\w+\/status(?:es)?\/(?<id>\d+)/)
2022-01-20 20:22:10 +00:00
if (twitter?.groups?.id) {
return (
2022-03-10 16:09:05 +00:00
<div className={`${styles.twitterContainer} ${show ? '' : styles.twitterContained}`}>
<TwitterTweetEmbed tweetId={twitter.groups.id} options={{ width: '550px', theme: darkMode.value ? 'dark' : 'light' }} placeholder={<TweetSkeleton />} onLoad={() => setOverflowing(true)} />
2022-02-12 14:06:41 +00:00
{overflowing && !show &&
<Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
show full tweet
</Button>}
</div>
)
2022-01-20 20:22:10 +00:00
}
2022-02-05 21:40:54 +00:00
const youtube = item.url?.match(/(https?:\/\/)?((www\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)(?<id>[_0-9a-z-]+)/i)
if (youtube?.groups?.id) {
return (
<div style={{ maxWidth: '640px', paddingRight: '15px' }}>
<YouTube videoId={youtube.groups.id} containerClassName={styles.youtubeContainer} />
</div>
)
}
2022-01-20 20:22:10 +00:00
return null
}
2022-02-03 22:01:42 +00:00
function TopLevelItem ({ item, noReply, ...props }) {
2022-02-17 17:23:43 +00:00
const ItemComponent = item.maxBid ? ItemJob : Item
2021-09-23 20:09:07 +00:00
return (
2022-04-19 18:32:39 +00:00
<ItemComponent item={item} showFwdUser {...props}>
2021-09-23 20:09:07 +00:00
{item.text && <ItemText item={item} />}
2022-01-20 20:22:10 +00:00
{item.url && <ItemEmbed item={item} />}
{!noReply && <Reply parentId={item.id} meComments={item.meComments} replyOpen />}
2022-02-17 17:23:43 +00:00
</ItemComponent>
2021-09-23 20:09:07 +00:00
)
}
function ItemText ({ item }) {
2022-02-03 22:01:42 +00:00
return <Text nofollow={item.sats + item.boost < NOFOLLOW_LIMIT}>{item.searchText || item.text}</Text>
2021-09-23 20:09:07 +00:00
}
2021-09-24 21:28:21 +00:00
export default function ItemFull ({ item, bio, ...props }) {
2021-09-23 17:42:00 +00:00
return (
<>
{item.parentId
2021-09-24 21:28:21 +00:00
? <Comment item={item} replyOpen includeParent noComments {...props} />
2021-11-12 22:39:52 +00:00
: (
<div className='mt-1'>{
bio
2021-09-24 21:28:21 +00:00
? <BioItem item={item} {...props} />
: <TopLevelItem item={item} {...props} />
2021-11-12 22:39:52 +00:00
}
</div>)}
2021-09-24 21:28:21 +00:00
{item.comments &&
<div className={styles.comments}>
2021-12-21 21:29:42 +00:00
<Comments parentId={item.id} comments={item.comments} />
2021-09-24 21:28:21 +00:00
</div>}
2021-09-23 17:42:00 +00:00
</>
)
}