forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2import {msg} from '@lingui/macro'
3import {useLingui} from '@lingui/react'
4
5import {useTrendingSettings} from '#/state/preferences/trending'
6import {atoms as a, useLayoutBreakpoints} from '#/alf'
7import {Button} from '#/components/Button'
8import {DotGrid_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid'
9import {TrendingInterstitial} from '#/components/interstitials/Trending'
10import {LiveEventFeedCardWide} from '#/features/liveEvents/components/LiveEventFeedCardWide'
11import {
12 LiveEventFeedOptionsMenu,
13 useDialogControl,
14} from '#/features/liveEvents/components/LiveEventFeedOptionsMenu'
15import {useUserPreferencedLiveEvents} from '#/features/liveEvents/context'
16import {type LiveEventFeed} from '#/features/liveEvents/types'
17
18export function DiscoverFeedLiveEventFeedsAndTrendingBanner() {
19 const events = useUserPreferencedLiveEvents()
20 const {rightNavVisible} = useLayoutBreakpoints()
21 const {trendingDisabled} = useTrendingSettings()
22
23 if (!events.feeds.length) {
24 if (!rightNavVisible && !trendingDisabled) {
25 // only show trending on mobile when live event banner is not shown
26 return <TrendingInterstitial />
27 } else {
28 // no feed, no trending
29 return null
30 }
31 }
32
33 // On desktop, we show in the sidebar
34 if (rightNavVisible) return null
35
36 return events.feeds.map(feed => <Inner feed={feed} key={feed.id} />)
37}
38
39function Inner({feed}: {feed: LiveEventFeed}) {
40 const {_} = useLingui()
41 const optionsMenuControl = useDialogControl()
42 const layout = feed.layouts.wide
43
44 return (
45 <>
46 <View style={[a.px_lg, a.pt_md, a.pb_xs]}>
47 <View>
48 <LiveEventFeedCardWide feed={feed} metricContext="discover" />
49
50 <Button
51 label={_(msg`Configure live event banner`)}
52 size="tiny"
53 shape="round"
54 style={[a.absolute, a.z_10, {top: 6, right: 6}]}
55 onPress={() => {
56 optionsMenuControl.open()
57 }}>
58 {({hovered, pressed}) => (
59 <>
60 <View
61 style={[
62 a.absolute,
63 a.inset_0,
64 a.rounded_full,
65 {
66 backgroundColor: layout.overlayColor,
67 opacity: hovered || pressed ? 0.8 : 0.6,
68 },
69 ]}
70 />
71 <EllipsisIcon
72 size="sm"
73 fill={layout.textColor}
74 style={[a.z_20]}
75 />
76 </>
77 )}
78 </Button>
79 </View>
80 </View>
81
82 <LiveEventFeedOptionsMenu
83 feed={feed}
84 control={optionsMenuControl}
85 metricContext="discover"
86 />
87 </>
88 )
89}