forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge pull request #8876 from internet-development/caidanw/app-1399-trending-videos-icon-missing
[APP-1399] trending videos icon missing
+55
-53
+55
-53
src/components/interstitials/TrendingVideos.tsx
+55
-53
src/components/interstitials/TrendingVideos.tsx
···
1
-
import React, {useEffect} from 'react'
1
+
import {useCallback, useEffect, useMemo} from 'react'
2
2
import {ScrollView, View} from 'react-native'
3
3
import {AppBskyEmbedVideo, AtUri} from '@atproto/api'
4
4
import {msg, Trans} from '@lingui/macro'
···
55
55
const {setTrendingVideoDisabled} = useTrendingSettingsApi()
56
56
const trendingPrompt = Prompt.usePromptControl()
57
57
58
-
const onConfirmHide = React.useCallback(() => {
58
+
const onConfirmHide = useCallback(() => {
59
59
setTrendingVideoDisabled(true)
60
60
logEvent('trendingVideos:hide', {context: 'interstitial:discover'})
61
61
}, [setTrendingVideoDisabled])
···
147
147
}: {
148
148
data: Exclude<ReturnType<typeof usePostFeedQuery>['data'], undefined>
149
149
}) {
150
-
const t = useTheme()
151
-
const {_} = useLingui()
152
-
const items = React.useMemo(() => {
150
+
const items = useMemo(() => {
153
151
return data.pages
154
152
.flatMap(page => page.slices)
155
153
.map(slice => slice.items[0])
···
157
155
.filter(item => AppBskyEmbedVideo.isView(item.post.embed))
158
156
.slice(0, 8)
159
157
}, [data])
160
-
const href = React.useMemo(() => {
161
-
const urip = new AtUri(VIDEO_FEED_URI)
162
-
return makeCustomFeedLink(urip.host, urip.rkey, undefined, 'discover')
163
-
}, [])
164
158
165
159
return (
166
160
<>
···
183
177
</View>
184
178
))}
185
179
186
-
<View style={[{width: CARD_WIDTH * 2}]}>
187
-
<Link
188
-
to={href}
189
-
label={_(msg`View more`)}
190
-
style={[
191
-
a.justify_center,
192
-
a.align_center,
193
-
a.flex_1,
194
-
a.rounded_lg,
195
-
a.border,
196
-
t.atoms.border_contrast_low,
197
-
t.atoms.bg,
198
-
t.atoms.shadow_sm,
199
-
]}>
200
-
{({pressed}) => (
201
-
<View
202
-
style={[
203
-
a.flex_row,
204
-
a.align_center,
205
-
a.gap_md,
206
-
{
207
-
opacity: pressed ? 0.6 : 1,
208
-
},
209
-
]}>
210
-
<Text style={[a.text_md]}>
211
-
<Trans>View more</Trans>
212
-
</Text>
213
-
<View
214
-
style={[
215
-
a.align_center,
216
-
a.justify_center,
217
-
a.rounded_full,
218
-
{
219
-
width: 34,
220
-
height: 34,
221
-
backgroundColor: t.palette.primary_500,
222
-
},
223
-
]}>
224
-
<ButtonIcon icon={ChevronRight} />
225
-
</View>
226
-
</View>
227
-
)}
228
-
</Link>
229
-
</View>
180
+
<ViewMoreCard />
230
181
</>
231
182
)
232
183
}
184
+
185
+
function ViewMoreCard() {
186
+
const t = useTheme()
187
+
const {_} = useLingui()
188
+
189
+
const href = useMemo(() => {
190
+
const urip = new AtUri(VIDEO_FEED_URI)
191
+
return makeCustomFeedLink(urip.host, urip.rkey, undefined, 'discover')
192
+
}, [])
193
+
194
+
return (
195
+
<View style={[{width: CARD_WIDTH * 2}]}>
196
+
<Link
197
+
to={href}
198
+
label={_(msg`View more`)}
199
+
style={[
200
+
a.justify_center,
201
+
a.align_center,
202
+
a.flex_1,
203
+
a.rounded_lg,
204
+
a.border,
205
+
t.atoms.border_contrast_low,
206
+
t.atoms.bg,
207
+
t.atoms.shadow_sm,
208
+
]}>
209
+
{({pressed}) => (
210
+
<View
211
+
style={[
212
+
a.flex_row,
213
+
a.align_center,
214
+
a.gap_md,
215
+
{
216
+
opacity: pressed ? 0.6 : 1,
217
+
},
218
+
]}>
219
+
<Text style={[a.text_md]}>
220
+
<Trans>View more</Trans>
221
+
</Text>
222
+
<Button
223
+
color="primary"
224
+
size="small"
225
+
shape="round"
226
+
label={_(msg`View more trending videos`)}>
227
+
<ButtonIcon icon={ChevronRight} />
228
+
</Button>
229
+
</View>
230
+
)}
231
+
</Link>
232
+
</View>
233
+
)
234
+
}