fix cls of twitter embed
This commit is contained in:
keyan
parent
109aa7d321
commit
18ff637e5c
|
|
@ -7,9 +7,10 @@ import styles from '../styles/item.module.css'
|
|||
import { NOFOLLOW_LIMIT } from '../lib/constants'
|
||||
import { useMe } from './me'
|
||||
import { Button } from 'react-bootstrap'
|
||||
import TweetEmbed from 'react-tweet-embed'
|
||||
import { TwitterTweetEmbed } from 'react-twitter-embed'
|
||||
import YouTube from 'react-youtube'
|
||||
import useDarkMode from 'use-dark-mode'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
|
||||
function BioItem ({ item, handleClick }) {
|
||||
const me = useMe()
|
||||
|
|
@ -33,13 +34,50 @@ function BioItem ({ item, handleClick }) {
|
|||
)
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
function ItemEmbed ({ item }) {
|
||||
const darkMode = useDarkMode()
|
||||
const [overflowing, setOverflowing] = useState(false)
|
||||
const [show, setShow] = useState(false)
|
||||
const containerRef = useRef(null)
|
||||
|
||||
const checkOverflow = () => {
|
||||
const cont = containerRef.current
|
||||
const over = cont && (cont.offsetHeight < cont.scrollHeight || cont.offsetWidth < cont.scrollWidth)
|
||||
|
||||
if (over) {
|
||||
setOverflowing(true)
|
||||
return
|
||||
}
|
||||
|
||||
setOverflowing(false)
|
||||
}
|
||||
|
||||
useEffect(checkOverflow, [])
|
||||
|
||||
const twitter = item.url?.match(/^https?:\/\/twitter\.com\/(?:#!\/)?\w+\/status(?:es)?\/(?<id>\d+)/)
|
||||
if (twitter?.groups?.id) {
|
||||
return (
|
||||
<div className='mt-1'>
|
||||
<TweetEmbed id={twitter.groups.id} options={{ width: '100%', theme: darkMode.value ? 'dark' : 'light' }} />
|
||||
<div className={`${styles.twitterContainer} ${show ? '' : styles.twitterContained}`} ref={containerRef}>
|
||||
<TwitterTweetEmbed tweetId={twitter.groups.id} options={{ width: '550px', theme: darkMode.value ? 'dark' : 'light' }} placeholder={<TweetSkeleton />} onLoad={checkOverflow} />
|
||||
{overflowing && !show &&
|
||||
<Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
|
||||
show full tweet
|
||||
</Button>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
"react-string-replace": "^0.4.4",
|
||||
"react-syntax-highlighter": "^15.4.3",
|
||||
"react-textarea-autosize": "^8.3.3",
|
||||
"react-tweet-embed": "^1.3.1",
|
||||
"react-twitter-embed": "^4.0.4",
|
||||
"react-youtube": "^7.14.0",
|
||||
"remark-directive": "^2.0.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
|
|
@ -9878,12 +9878,19 @@
|
|||
"react-dom": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-tweet-embed": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-tweet-embed/-/react-tweet-embed-1.3.1.tgz",
|
||||
"integrity": "sha512-qVAlb3/d3YhYHHB6Y3J/8OCY+a5KOzCnY/qUaBnK8qtEKXK9qWePlpGevDQgryWuKxggwxW1UHPLZ3VpPc7XUQ==",
|
||||
"node_modules/react-twitter-embed": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz",
|
||||
"integrity": "sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==",
|
||||
"dependencies": {
|
||||
"scriptjs": "^2.5.9"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=15"
|
||||
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-youtube": {
|
||||
|
|
@ -10267,6 +10274,11 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/scriptjs": {
|
||||
"version": "2.5.9",
|
||||
"resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
|
||||
"integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg=="
|
||||
},
|
||||
"node_modules/secp256k1": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-4.0.2.tgz",
|
||||
|
|
@ -20442,11 +20454,13 @@
|
|||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"react-tweet-embed": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-tweet-embed/-/react-tweet-embed-1.3.1.tgz",
|
||||
"integrity": "sha512-qVAlb3/d3YhYHHB6Y3J/8OCY+a5KOzCnY/qUaBnK8qtEKXK9qWePlpGevDQgryWuKxggwxW1UHPLZ3VpPc7XUQ==",
|
||||
"requires": {}
|
||||
"react-twitter-embed": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz",
|
||||
"integrity": "sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==",
|
||||
"requires": {
|
||||
"scriptjs": "^2.5.9"
|
||||
}
|
||||
},
|
||||
"react-youtube": {
|
||||
"version": "7.14.0",
|
||||
|
|
@ -20734,6 +20748,11 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"scriptjs": {
|
||||
"version": "2.5.9",
|
||||
"resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
|
||||
"integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg=="
|
||||
},
|
||||
"secp256k1": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-4.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
"react-string-replace": "^0.4.4",
|
||||
"react-syntax-highlighter": "^15.4.3",
|
||||
"react-textarea-autosize": "^8.3.3",
|
||||
"react-tweet-embed": "^1.3.1",
|
||||
"react-twitter-embed": "^4.0.4",
|
||||
"react-youtube": "^7.14.0",
|
||||
"remark-directive": "^2.0.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
|
|
|
|||
|
|
@ -24,4 +24,56 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.twitterContainer {
|
||||
margin-top: .25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.twitterContained {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.twitterShowFull {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tweetsSkeleton {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
max-width: 550px;
|
||||
width: 100%;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.tweetSkeleton {
|
||||
width: 100%;
|
||||
}
|
||||
.tweetSkeleton {
|
||||
border: 0.05rem solid var(--theme-borderColor);
|
||||
border-radius: 12px;
|
||||
height: 200px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.tweetSkeleton .img {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.tweetSkeleton .content1, .tweetSkeleton .content2 {
|
||||
height: 50%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.tweetSkeleton .line {
|
||||
height: 25%;
|
||||
margin: 0.5rem 0;
|
||||
width: 100%;
|
||||
border-radius: .4rem;
|
||||
}
|
||||
.tweetSkeleton .line:last-child {
|
||||
width: 75%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue