Merge pull request #75 from blacksky-algorithms/feature/assembly-embed

Interactive Assembly conversation embeds with verified voting

Author: rudyfraser

src/components/Post/Embed/ExternalEmbed/AssemblyEmbed.tsx

@@ -17,6 +17,7 @@ import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {Link} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import {IS_NATIVE} from '#/env'
+import {AssemblyEmbed} from './AssemblyEmbed'
 import {ExternalGif} from './ExternalGif'
 import {ExternalPlayer} from './ExternalPlayer'
 import {GifEmbed} from './Gif'
@@ -59,6 +60,14 @@ export const ExternalEmbed = ({
     }
   }, [link.uri, playHaptic])
 
+  if (embedPlayerParams?.type === 'assembly_conversation') {
+    return (
+      <View style={style}>
+        <AssemblyEmbed link={link} params={embedPlayerParams} />
+      </View>
+    )
+  }
+
   if (embedPlayerParams?.source === 'tenor') {
     const parsedAlt = parseAltFromGIFDescription(link.description)
     return (

src/components/Post/Embed/ExternalEmbed/index.tsx

@@ -173,7 +173,15 @@ export function useTopic(raw: TrendingTopic): ParsedTrendingTopic {
   return React.useMemo(() => {
     const {topic: displayName, link} = raw
 
-    if (link.startsWith('/search')) {
+    if (link.startsWith('/topic/')) {
+      return {
+        type: 'topic',
+        label: _(msg`Browse posts about ${displayName}`),
+        displayName,
+        uri: undefined,
+        url: link,
+      }
+    } else if (link.startsWith('/search')) {
       return {
         type: 'topic',
         label: _(msg`Browse posts about ${displayName}`),

src/components/TrendingTopics.tsx

@@ -10,8 +10,8 @@ const IFRAME_HOST = IS_WEB
     ? 'http://localhost:8100'
     : 'https://blacksky.community'
   : __DEV__ && !process.env.JEST_WORKER_ID
-  ? 'http://localhost:8100'
-  : 'https://blacksky.community'
+    ? 'http://localhost:8100'
+    : 'https://blacksky.community'
 
 export const embedPlayerSources = [
   'youtube',
@@ -24,6 +24,7 @@ export const embedPlayerSources = [
   'giphy',
   'tenor',
   'flickr',
+  'assembly',
 ] as const
 
 export type EmbedPlayerSource = (typeof embedPlayerSources)[number]
@@ -44,6 +45,7 @@ export type EmbedPlayerType =
   | 'giphy_gif'
   | 'tenor_gif'
   | 'flickr_album'
+  | 'assembly_conversation'
 
 export const externalEmbedLabels: Record<EmbedPlayerSource, string> = {
   youtube: 'YouTube',
@@ -56,6 +58,7 @@ export const externalEmbedLabels: Record<EmbedPlayerSource, string> = {
   appleMusic: 'Apple Music',
   soundcloud: 'SoundCloud',
   flickr: 'Flickr',
+  assembly: "Blacksky People's Assembly",
 }
 
 export interface EmbedPlayerParams {
@@ -459,6 +462,19 @@ export function parseEmbedPlayerFromUrl(
         return undefined
     }
   }
+
+  // Assembly conversations
+  if (urlp.hostname === 'assembly.blacksky.community') {
+    const match = urlp.pathname.match(/^\/([0-9A-Za-z]{5,})$/)
+    if (match) {
+      return {
+        type: 'assembly_conversation' as EmbedPlayerType,
+        source: 'assembly' as EmbedPlayerSource,
+        playerUri: `https://assembly.blacksky.community/${match[1]}`,
+        hideDetails: false,
+      }
+    }
+  }
 }
 
 export function getPlayerAspect({
@@ -498,6 +514,8 @@ export function getPlayerAspect({
       return {height: 165}
     case 'apple_music_song':
       return {height: 150}
+    case 'assembly_conversation':
+      return {height: 320}
     default:
       return {aspectRatio: 16 / 9}
   }

src/lib/strings/embed-player.ts

@@ -221,6 +221,14 @@ function useCategoryDisplayName(
       return _(msg`Video Games`)
     case 'pop-culture':
       return _(msg`Entertainment`)
+    case 'entertainment':
+      return _(msg`Entertainment`)
+    case 'culture':
+      return _(msg`Culture`)
+    case 'music':
+      return _(msg`Music`)
+    case 'community':
+      return _(msg`Community`)
     case 'news':
       return _(msg`News`)
     case 'other':

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -5,6 +5,11 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 import {type NativeStackScreenProps} from '@react-navigation/native-stack'
+import {
+  type InfiniteData,
+  type QueryClient,
+  useInfiniteQuery,
+} from '@tanstack/react-query'
 
 import {HITSLOP_10} from '#/lib/constants'
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
@@ -14,6 +19,7 @@ import {shareUrl} from '#/lib/sharing'
 import {cleanError} from '#/lib/strings/errors'
 import {enforceLen} from '#/lib/strings/helpers'
 import {useSearchPostsQuery} from '#/state/queries/search-posts'
+import {useAgent} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {Pager} from '#/view/com/pager/Pager'
 import {TabBar} from '#/view/com/pager/TabBar'
@@ -25,6 +31,9 @@ import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as Share} from '#/componen
 import * as Layout from '#/components/Layout'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 
+const TOPICS_API = 'https://api.blacksky.community'
+const PAGE_SIZE = 25
+
 const renderItem = ({item}: ListRenderItemInfo<AppBskyFeedDefs.PostView>) => {
   return <Post post={item} />
 }
@@ -36,20 +45,25 @@ const keyExtractor = (item: AppBskyFeedDefs.PostView, index: number) => {
 export default function TopicScreen({
   route,
 }: NativeStackScreenProps<CommonNavigatorParams, 'Topic'>) {
-  const {topic} = route.params
+  const {topic: topicParam} = route.params
   const {_} = useLingui()
 
+  const isTopicId = /^\d+$/.test(topicParam)
+
+  const [topicName, setTopicName] = React.useState(
+    isTopicId ? '' : decodeURIComponent(topicParam),
+  )
+
   const headerTitle = React.useMemo(() => {
-    return enforceLen(decodeURIComponent(topic), 24, true, 'middle')
-  }, [topic])
+    return topicName ? enforceLen(topicName, 30, true, 'middle') : _(msg`Topic`)
+  }, [topicName, _])
 
   const onShare = React.useCallback(() => {
     const url = new URL('https://blacksky.community')
-    url.pathname = `/topic/${topic}`
+    url.pathname = `/topic/${topicParam}`
     shareUrl(url.toString())
-  }, [topic])
+  }, [topicParam])
 
-  const [activeTab, setActiveTab] = React.useState(0)
   const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
@@ -58,6 +72,183 @@ export default function TopicScreen({
     }, [setMinimalShellMode]),
   )
 
+  if (isTopicId) {
+    return (
+      <Layout.Screen>
+        <Layout.Center style={[a.z_10, web([a.sticky, {top: 0}])]}>
+          <Layout.Header.Outer>
+            <Layout.Header.BackButton />
+            <Layout.Header.Content>
+              <Layout.Header.TitleText>{headerTitle}</Layout.Header.TitleText>
+            </Layout.Header.Content>
+            <Layout.Header.Slot>
+              <Button
+                label={_(msg`Share`)}
+                size="small"
+                variant="ghost"
+                color="primary"
+                shape="round"
+                onPress={onShare}
+                hitSlop={HITSLOP_10}
+                style={[{right: -3}]}>
+                <ButtonIcon icon={Share} size="md" />
+              </Button>
+            </Layout.Header.Slot>
+          </Layout.Header.Outer>
+        </Layout.Center>
+        <CuratedTopicFeed topicId={topicParam} onTopicName={setTopicName} />
+      </Layout.Screen>
+    )
+  }
+
+  // Legacy: search-based topic view (non-numeric topic param)
+  return <LegacyTopicScreen topicParam={topicParam} headerTitle={headerTitle} onShare={onShare} />
+}
+
+function CuratedTopicFeed({
+  topicId,
+  onTopicName,
+}: {
+  topicId: string
+  onTopicName: (name: string) => void
+}) {
+  const {_} = useLingui()
+  const initialNumToRender = useInitialNumToRender()
+  const [isPTR, setIsPTR] = React.useState(false)
+  const trackPostView = usePostViewTracking('Topic')
+  const agent = useAgent()
+
+  const {
+    data,
+    isLoading,
+    isFetched,
+    isError,
+    error,
+    refetch,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ['topic-feed', topicId],
+    initialPageParam: undefined as string | undefined,
+    queryFn: async ({pageParam}) => {
+      const params = new URLSearchParams({topicId, limit: String(PAGE_SIZE)})
+      if (pageParam) params.set('cursor', pageParam)
+
+      const res = await fetch(
+        `${TOPICS_API}/xrpc/app.bsky.unspecced.getTopicFeed?${params}`,
+      )
+      if (!res.ok) throw new Error(`getTopicFeed failed: ${res.status}`)
+      const json = (await res.json()) as {
+        posts: string[]
+        topic: {name: string}
+        cursor: string | null
+      }
+
+      if (json.topic?.name) {
+        onTopicName(json.topic.name)
+      }
+
+      if (!json.posts?.length) {
+        return {posts: [] as AppBskyFeedDefs.PostView[], cursor: null}
+      }
+
+      // Hydrate post URIs through the appview (max 25 per call)
+      const hydrated = await agent.getPosts({uris: json.posts.slice(0, 25)})
+      return {
+        posts: hydrated.data.posts,
+        cursor: json.cursor,
+      }
+    },
+    getNextPageParam: lastPage => lastPage?.cursor ?? undefined,
+  })
+
+  const posts = React.useMemo(() => {
+    return data?.pages.flatMap(page => page.posts) ?? []
+  }, [data])
+
+  const onRefresh = React.useCallback(async () => {
+    setIsPTR(true)
+    await refetch()
+    setIsPTR(false)
+  }, [refetch])
+
+  const onEndReached = React.useCallback(() => {
+    if (isFetchingNextPage || !hasNextPage || error) return
+    fetchNextPage()
+  }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])
+
+  return (
+    <>
+      {posts.length < 1 ? (
+        <ListMaybePlaceholder
+          isLoading={isLoading || !isFetched}
+          isError={isError}
+          onRetry={refetch}
+          emptyType="results"
+          emptyMessage={_(msg`We couldn't find any results for that topic.`)}
+        />
+      ) : (
+        <List
+          data={posts}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          refreshing={isPTR}
+          onRefresh={onRefresh}
+          onEndReached={onEndReached}
+          onEndReachedThreshold={4}
+          onItemSeen={trackPostView}
+          // @ts-ignore web only -prf
+          desktopFixedHeight
+          ListFooterComponent={
+            <ListFooter
+              isFetchingNextPage={isFetchingNextPage}
+              error={cleanError(error)}
+              onRetry={fetchNextPage}
+            />
+          }
+          initialNumToRender={initialNumToRender}
+          windowSize={11}
+        />
+      )}
+    </>
+  )
+}
+
+export function* findAllPostsInTopicQueryData(
+  queryClient: QueryClient,
+  uri: string,
+): Generator<AppBskyFeedDefs.PostView, undefined> {
+  type PageData = {posts: AppBskyFeedDefs.PostView[]; cursor: string | null}
+  const queryDatas = queryClient.getQueriesData<InfiniteData<PageData>>({
+    queryKey: ['topic-feed'],
+  })
+  for (const [_queryKey, queryData] of queryDatas) {
+    if (!queryData?.pages) continue
+    for (const page of queryData.pages) {
+      for (const post of page.posts) {
+        if (post.uri === uri) {
+          yield post
+        }
+      }
+    }
+  }
+}
+
+// Legacy search-based topic view for non-numeric topic params
+function LegacyTopicScreen({
+  topicParam,
+  headerTitle,
+  onShare,
+}: {
+  topicParam: string
+  headerTitle: string
+  onShare: () => void
+}) {
+  const {_} = useLingui()
+  const [activeTab, setActiveTab] = React.useState(0)
+  const setMinimalShellMode = useSetMinimalShellMode()
+
   const onPageSelected = React.useCallback(
     (index: number) => {
       setMinimalShellMode(false)
@@ -71,21 +262,25 @@ export default function TopicScreen({
       {
         title: _(msg`Top`),
         component: (
-          <TopicScreenTab topic={topic} sort="top" active={activeTab === 0} />
+          <TopicScreenTab
+            topic={topicParam}
+            sort="top"
+            active={activeTab === 0}
+          />
         ),
       },
       {
         title: _(msg`Latest`),
         component: (
           <TopicScreenTab
-            topic={topic}
+            topic={topicParam}
             sort="latest"
             active={activeTab === 1}
           />
         ),
       },
     ]
-  }, [_, topic, activeTab])
+  }, [_, topicParam, activeTab])
 
   return (
     <Layout.Screen>