Hailey
fedb94dd70
* Implement embed player for YT, spotify, and twitch * fix: handle blur event * fix: use video dimensions for twitch * fix: remove hack (?) * fix: remove origin whitelist (?) * fix: prevent ads from opening in browser * fix: handle embeds that don't have a thumb * feat: handle dark/light mode * fix: ts warning * fix: adjust height of no-thumb label * fix: adjust height of no-thumb label * fix: remove debug log, set collapsable to false for player view * fix: fix dimensions "flash" * chore: remove old youtube link test * tests: add tests * fix: thumbless embed position when loading * fix: remove background from webview * cleanup embeds (almost) * more refactoring - Use separate layers for player and overlay to prevent weird sizing issues - Be sure the image is not visible under the player - Clean up some * cleanup styles * parse youtube shorts urls * remove debug * add soundcloud tracks and sets (playlists) * move logic into `ExternalLinkEmbed` * border radius for yt player on native * fix styling on web * allow scrolling in webview on android * remove unnecessary check * autoplay yt on web * fix tests after adding autoplay * move `useNavigation` to top of component --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
103 lines
2.6 KiB
TypeScript
103 lines
2.6 KiB
TypeScript
import React from 'react'
|
|
import {Image} from 'expo-image'
|
|
import {Text} from '../text/Text'
|
|
import {StyleSheet, View} from 'react-native'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
import {AppBskyEmbedExternal} from '@atproto/api'
|
|
import {toNiceDomain} from 'lib/strings/url-helpers'
|
|
import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player'
|
|
import {ExternalPlayer} from 'view/com/util/post-embeds/ExternalPlayerEmbed'
|
|
|
|
export const ExternalLinkEmbed = ({
|
|
link,
|
|
}: {
|
|
link: AppBskyEmbedExternal.ViewExternal
|
|
}) => {
|
|
const pal = usePalette('default')
|
|
const {isMobile} = useWebMediaQueries()
|
|
|
|
const embedPlayerParams = React.useMemo(
|
|
() => parseEmbedPlayerFromUrl(link.uri),
|
|
[link.uri],
|
|
)
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: !isMobile && !embedPlayerParams ? 'row' : 'column',
|
|
}}>
|
|
{link.thumb && !embedPlayerParams ? (
|
|
<View
|
|
style={
|
|
!isMobile
|
|
? {
|
|
borderTopLeftRadius: 6,
|
|
borderBottomLeftRadius: 6,
|
|
width: 120,
|
|
aspectRatio: 1,
|
|
overflow: 'hidden',
|
|
}
|
|
: {
|
|
borderTopLeftRadius: 6,
|
|
borderTopRightRadius: 6,
|
|
width: '100%',
|
|
height: 200,
|
|
overflow: 'hidden',
|
|
}
|
|
}>
|
|
<Image
|
|
style={styles.extImage}
|
|
source={{uri: link.thumb}}
|
|
accessibilityIgnoresInvertColors
|
|
/>
|
|
</View>
|
|
) : undefined}
|
|
{embedPlayerParams && (
|
|
<ExternalPlayer link={link} params={embedPlayerParams} />
|
|
)}
|
|
<View
|
|
style={{
|
|
paddingHorizontal: isMobile ? 10 : 14,
|
|
paddingTop: 8,
|
|
paddingBottom: 10,
|
|
flex: !isMobile ? 1 : undefined,
|
|
}}>
|
|
<Text
|
|
type="sm"
|
|
numberOfLines={1}
|
|
style={[pal.textLight, styles.extUri]}>
|
|
{toNiceDomain(link.uri)}
|
|
</Text>
|
|
<Text
|
|
type="lg-bold"
|
|
numberOfLines={isMobile ? 4 : 2}
|
|
style={[pal.text]}>
|
|
{link.title || link.uri}
|
|
</Text>
|
|
{link.description ? (
|
|
<Text
|
|
type="md"
|
|
numberOfLines={isMobile ? 4 : 2}
|
|
style={[pal.text, styles.extDescription]}>
|
|
{link.description}
|
|
</Text>
|
|
) : undefined}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
extImage: {
|
|
width: '100%',
|
|
height: 200,
|
|
},
|
|
extUri: {
|
|
marginTop: 2,
|
|
},
|
|
extDescription: {
|
|
marginTop: 4,
|
|
},
|
|
})
|