about summary refs log tree commit diff
path: root/src/view/com/util/PostEmbeds
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/util/PostEmbeds')
-rw-r--r--src/view/com/util/PostEmbeds/ExternalLinkEmbed.tsx69
-rw-r--r--src/view/com/util/PostEmbeds/QuoteEmbed.tsx59
-rw-r--r--src/view/com/util/PostEmbeds/YoutubeEmbed.tsx119
-rw-r--r--src/view/com/util/PostEmbeds/index.tsx165
4 files changed, 0 insertions, 412 deletions
diff --git a/src/view/com/util/PostEmbeds/ExternalLinkEmbed.tsx b/src/view/com/util/PostEmbeds/ExternalLinkEmbed.tsx
deleted file mode 100644
index e8c63bdb7..000000000
--- a/src/view/com/util/PostEmbeds/ExternalLinkEmbed.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react'
-import {Text} from '../text/Text'
-import {AutoSizedImage} from '../images/AutoSizedImage'
-import {StyleSheet, View} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {PresentedExternal} from '@atproto/api/dist/client/types/app/bsky/embed/external'
-
-const ExternalLinkEmbed = ({
-  link,
-  onImagePress,
-  imageChild,
-}: {
-  link: PresentedExternal
-  onImagePress?: () => void
-  imageChild?: React.ReactNode
-}) => {
-  const pal = usePalette('default')
-  return (
-    <>
-      {link.thumb ? (
-        <AutoSizedImage
-          uri={link.thumb}
-          style={styles.extImage}
-          onPress={onImagePress}>
-          {imageChild}
-        </AutoSizedImage>
-      ) : undefined}
-      <View style={styles.extInner}>
-        <Text type="md-bold" numberOfLines={2} style={[pal.text]}>
-          {link.title || link.uri}
-        </Text>
-        <Text
-          type="sm"
-          numberOfLines={1}
-          style={[pal.textLight, styles.extUri]}>
-          {link.uri}
-        </Text>
-        {link.description ? (
-          <Text
-            type="sm"
-            numberOfLines={2}
-            style={[pal.text, styles.extDescription]}>
-            {link.description}
-          </Text>
-        ) : undefined}
-      </View>
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  extInner: {
-    padding: 10,
-  },
-  extImage: {
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
-    width: '100%',
-    maxHeight: 200,
-  },
-  extUri: {
-    marginTop: 2,
-  },
-  extDescription: {
-    marginTop: 4,
-  },
-})
-
-export default ExternalLinkEmbed
diff --git a/src/view/com/util/PostEmbeds/QuoteEmbed.tsx b/src/view/com/util/PostEmbeds/QuoteEmbed.tsx
deleted file mode 100644
index fee67c9bc..000000000
--- a/src/view/com/util/PostEmbeds/QuoteEmbed.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import {StyleSheet} from 'react-native'
-import React from 'react'
-import {AtUri} from '../../../../third-party/uri'
-import {PostMeta} from '../PostMeta'
-import {Link} from '../Link'
-import {Text} from '../text/Text'
-import {usePalette} from 'lib/hooks/usePalette'
-import {ComposerOptsQuote} from 'state/models/ui/shell'
-
-const QuoteEmbed = ({quote}: {quote: ComposerOptsQuote}) => {
-  const pal = usePalette('default')
-  const itemUrip = new AtUri(quote.uri)
-  const itemHref = `/profile/${quote.author.handle}/post/${itemUrip.rkey}`
-  const itemTitle = `Post by ${quote.author.handle}`
-  const isEmpty = React.useMemo(
-    () => quote.text.trim().length === 0,
-    [quote.text],
-  )
-  return (
-    <Link
-      style={[styles.container, pal.border]}
-      href={itemHref}
-      title={itemTitle}>
-      <PostMeta
-        authorAvatar={quote.author.avatar}
-        authorHandle={quote.author.handle}
-        authorDisplayName={quote.author.displayName}
-        postHref={itemHref}
-        timestamp={quote.indexedAt}
-      />
-      <Text type="post-text" style={pal.text} numberOfLines={6}>
-        {isEmpty ? (
-          <Text style={pal.link} lineHeight={1.5}>
-            View post
-          </Text>
-        ) : (
-          quote.text
-        )}
-      </Text>
-    </Link>
-  )
-}
-
-export default QuoteEmbed
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 8,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    marginVertical: 8,
-    borderWidth: 1,
-  },
-  quotePost: {
-    flex: 1,
-    paddingLeft: 13,
-    paddingRight: 8,
-  },
-})
diff --git a/src/view/com/util/PostEmbeds/YoutubeEmbed.tsx b/src/view/com/util/PostEmbeds/YoutubeEmbed.tsx
deleted file mode 100644
index d9425fe4e..000000000
--- a/src/view/com/util/PostEmbeds/YoutubeEmbed.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, {useEffect} from 'react'
-import {useState} from 'react'
-import {
-  View,
-  StyleSheet,
-  Pressable,
-  TouchableWithoutFeedback,
-  EmitterSubscription,
-} from 'react-native'
-import YoutubePlayer from 'react-native-youtube-iframe'
-import {usePalette} from 'lib/hooks/usePalette'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import ExternalLinkEmbed from './ExternalLinkEmbed'
-import {PresentedExternal} from '@atproto/api/dist/client/types/app/bsky/embed/external'
-import {useStores} from 'state/index'
-
-const YoutubeEmbed = ({
-  link,
-  videoId,
-}: {
-  videoId: string
-  link: PresentedExternal
-}) => {
-  const store = useStores()
-  const [displayVideoPlayer, setDisplayVideoPlayer] = useState(false)
-  const [playerDimensions, setPlayerDimensions] = useState({
-    width: 0,
-    height: 0,
-  })
-  const pal = usePalette('default')
-  const handlePlayButtonPressed = () => {
-    setDisplayVideoPlayer(true)
-  }
-  const handleOnLayout = (event: {
-    nativeEvent: {layout: {width: any; height: any}}
-  }) => {
-    setPlayerDimensions({
-      width: event.nativeEvent.layout.width,
-      height: event.nativeEvent.layout.height,
-    })
-  }
-  useEffect(() => {
-    let sub: EmitterSubscription
-    if (displayVideoPlayer) {
-      sub = store.onNavigation(() => {
-        setDisplayVideoPlayer(false)
-      })
-    }
-    return () => sub && sub.remove()
-  }, [displayVideoPlayer, store])
-
-  const imageChild = (
-    <Pressable onPress={handlePlayButtonPressed} style={styles.playButton}>
-      <FontAwesomeIcon icon="play" size={24} color="white" />
-    </Pressable>
-  )
-
-  if (!displayVideoPlayer) {
-    return (
-      <View
-        style={[styles.extOuter, pal.view, pal.border]}
-        onLayout={handleOnLayout}>
-        <ExternalLinkEmbed
-          link={link}
-          onImagePress={handlePlayButtonPressed}
-          imageChild={imageChild}
-        />
-      </View>
-    )
-  }
-
-  const height = (playerDimensions.width / 16) * 9
-  const noop = () => {}
-
-  return (
-    <TouchableWithoutFeedback onPress={noop}>
-      <View>
-        {/* Removing the outter View will make tap events propagate to parents */}
-        <YoutubePlayer
-          initialPlayerParams={{
-            modestbranding: true,
-          }}
-          webViewProps={{
-            startInLoadingState: true,
-          }}
-          height={height}
-          videoId={videoId}
-          webViewStyle={styles.webView}
-        />
-      </View>
-    </TouchableWithoutFeedback>
-  )
-}
-
-const styles = StyleSheet.create({
-  extOuter: {
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 4,
-  },
-  playButton: {
-    position: 'absolute',
-    alignSelf: 'center',
-    alignItems: 'center',
-    top: '44%',
-    justifyContent: 'center',
-    backgroundColor: 'black',
-    padding: 10,
-    borderRadius: 50,
-    opacity: 0.8,
-  },
-  webView: {
-    alignItems: 'center',
-    alignContent: 'center',
-    justifyContent: 'center',
-  },
-})
-
-export default YoutubeEmbed
diff --git a/src/view/com/util/PostEmbeds/index.tsx b/src/view/com/util/PostEmbeds/index.tsx
deleted file mode 100644
index 02a8aa90e..000000000
--- a/src/view/com/util/PostEmbeds/index.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import React from 'react'
-import {
-  StyleSheet,
-  StyleProp,
-  View,
-  ViewStyle,
-  Image as RNImage,
-} from 'react-native'
-import {
-  AppBskyEmbedImages,
-  AppBskyEmbedExternal,
-  AppBskyEmbedRecord,
-  AppBskyFeedPost,
-} from '@atproto/api'
-import {Link} from '../Link'
-import {AutoSizedImage} from '../images/AutoSizedImage'
-import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
-import {ImagesLightbox} from 'state/models/ui/shell'
-import {useStores} from 'state/index'
-import {usePalette} from 'lib/hooks/usePalette'
-import {saveImageModal} from 'lib/media/manip'
-import YoutubeEmbed from './YoutubeEmbed'
-import ExternalLinkEmbed from './ExternalLinkEmbed'
-import {getYoutubeVideoId} from 'lib/strings/url-helpers'
-import QuoteEmbed from './QuoteEmbed'
-
-type Embed =
-  | AppBskyEmbedRecord.Presented
-  | AppBskyEmbedImages.Presented
-  | AppBskyEmbedExternal.Presented
-  | {$type: string; [k: string]: unknown}
-
-export function PostEmbeds({
-  embed,
-  style,
-}: {
-  embed?: Embed
-  style?: StyleProp<ViewStyle>
-}) {
-  const pal = usePalette('default')
-  const store = useStores()
-  if (AppBskyEmbedRecord.isPresented(embed)) {
-    if (
-      AppBskyEmbedRecord.isPresentedRecord(embed.record) &&
-      AppBskyFeedPost.isRecord(embed.record.record) &&
-      AppBskyFeedPost.validateRecord(embed.record.record).success
-    ) {
-      return (
-        <QuoteEmbed
-          quote={{
-            author: embed.record.author,
-            cid: embed.record.cid,
-            uri: embed.record.uri,
-            indexedAt: embed.record.record.createdAt, // TODO
-            text: embed.record.record.text,
-          }}
-        />
-      )
-    }
-  }
-  if (AppBskyEmbedImages.isPresented(embed)) {
-    if (embed.images.length > 0) {
-      const uris = embed.images.map(img => img.fullsize)
-      const openLightbox = (index: number) => {
-        store.shell.openLightbox(new ImagesLightbox(uris, index))
-      }
-      const onLongPress = (index: number) => {
-        saveImageModal({uri: uris[index]})
-      }
-      const onPressIn = (index: number) => {
-        const firstImageToShow = uris[index]
-        RNImage.prefetch(firstImageToShow)
-        uris.forEach(uri => {
-          if (firstImageToShow !== uri) {
-            // First image already prefeched above
-            RNImage.prefetch(uri)
-          }
-        })
-      }
-
-      if (embed.images.length === 4) {
-        return (
-          <View style={[styles.imagesContainer, style]}>
-            <ImageLayoutGrid
-              type="four"
-              uris={embed.images.map(img => img.thumb)}
-              onPress={openLightbox}
-              onLongPress={onLongPress}
-              onPressIn={onPressIn}
-            />
-          </View>
-        )
-      } else if (embed.images.length === 3) {
-        return (
-          <View style={[styles.imagesContainer, style]}>
-            <ImageLayoutGrid
-              type="three"
-              uris={embed.images.map(img => img.thumb)}
-              onPress={openLightbox}
-              onLongPress={onLongPress}
-              onPressIn={onPressIn}
-            />
-          </View>
-        )
-      } else if (embed.images.length === 2) {
-        return (
-          <View style={[styles.imagesContainer, style]}>
-            <ImageLayoutGrid
-              type="two"
-              uris={embed.images.map(img => img.thumb)}
-              onPress={openLightbox}
-              onLongPress={onLongPress}
-              onPressIn={onPressIn}
-            />
-          </View>
-        )
-      } else {
-        return (
-          <View style={[styles.imagesContainer, style]}>
-            <AutoSizedImage
-              uri={embed.images[0].thumb}
-              onPress={() => openLightbox(0)}
-              onLongPress={() => onLongPress(0)}
-              onPressIn={() => onPressIn(0)}
-              style={styles.singleImage}
-            />
-          </View>
-        )
-      }
-    }
-  }
-  if (AppBskyEmbedExternal.isPresented(embed)) {
-    const link = embed.external
-    const youtubeVideoId = getYoutubeVideoId(link.uri)
-
-    if (youtubeVideoId) {
-      return <YoutubeEmbed videoId={youtubeVideoId} link={link} />
-    }
-
-    return (
-      <Link
-        style={[styles.extOuter, pal.view, pal.border, style]}
-        href={link.uri}
-        noFeedback>
-        <ExternalLinkEmbed link={link} />
-      </Link>
-    )
-  }
-  return <View />
-}
-
-const styles = StyleSheet.create({
-  imagesContainer: {
-    marginTop: 4,
-  },
-  singleImage: {
-    borderRadius: 8,
-    maxHeight: 500,
-  },
-  extOuter: {
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 4,
-  },
-})