quilling.dev
An ATproto social media client -- with an independent Appview.
Merge pull request #8702 from internet-development/caidan/app-1328-new-trending-video-interstitial
feat(ui): new trending video design
+32
-19
+3
src/alf/atoms.ts
+3
src/alf/atoms.ts
+13
-4
src/components/VideoPostCard.tsx
+13
-4
src/components/VideoPostCard.tsx
···
411
411
onPressOut={onPressOut}
412
412
style={[
413
413
a.flex_col,
414
+
t.atoms.shadow_sm,
414
415
{
415
416
alignItems: undefined,
416
417
justifyContent: undefined,
···
421
422
<View
422
423
style={[
423
424
a.justify_center,
424
-
a.rounded_md,
425
+
a.rounded_lg,
425
426
a.overflow_hidden,
427
+
a.border,
428
+
t.atoms.border_contrast_low,
426
429
{
427
430
backgroundColor: black,
428
431
aspectRatio: 9 / 16,
···
443
446
a.inset_0,
444
447
a.justify_center,
445
448
a.align_center,
449
+
a.border,
450
+
t.atoms.border_contrast_low,
446
451
{
447
452
backgroundColor: 'black',
448
453
opacity: 0.2,
···
462
467
<View
463
468
style={[
464
469
a.justify_center,
465
-
a.rounded_md,
470
+
a.rounded_lg,
466
471
a.overflow_hidden,
472
+
a.border,
473
+
t.atoms.border_contrast_low,
467
474
{
468
475
backgroundColor: black,
469
476
aspectRatio: 9 / 16,
···
534
541
const black = getBlackColor(t)
535
542
536
543
return (
537
-
<View style={[a.flex_1]}>
544
+
<View style={[a.flex_1, t.atoms.shadow_sm]}>
538
545
<View
539
546
style={[
540
-
a.rounded_md,
547
+
a.rounded_lg,
541
548
a.overflow_hidden,
549
+
a.border,
550
+
t.atoms.border_contrast_low,
542
551
{
543
552
backgroundColor: black,
544
553
aspectRatio: 9 / 16,
+16
-15
src/components/interstitials/TrendingVideos.tsx
+16
-15
src/components/interstitials/TrendingVideos.tsx
···
16
16
import {Button, ButtonIcon} from '#/components/Button'
17
17
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
18
18
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
19
-
import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
20
19
import {Link} from '#/components/Link'
21
20
import * as Prompt from '#/components/Prompt'
22
21
import {Text} from '#/components/Typography'
···
25
24
CompactVideoPostCardPlaceholder,
26
25
} from '#/components/VideoPostCard'
27
26
28
-
const CARD_WIDTH = 100
27
+
const CARD_WIDTH = 108
29
28
30
29
const FEED_DESC = `feedgen|${VIDEO_FEED_URI}`
31
30
const FEED_PARAMS: {
···
68
67
return (
69
68
<View
70
69
style={[
71
-
a.pt_lg,
70
+
a.pt_sm,
72
71
a.pb_lg,
73
72
a.border_t,
73
+
a.overflow_hidden,
74
74
t.atoms.border_contrast_low,
75
75
t.atoms.bg_contrast_25,
76
76
]}>
···
82
82
a.align_center,
83
83
a.justify_between,
84
84
]}>
85
-
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_xs]}>
86
-
<Graph />
87
-
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
88
-
<Trans>Trending Videos</Trans>
89
-
</Text>
90
-
</View>
85
+
<Text style={[a.text_sm, a.font_bold, a.leading_snug]}>
86
+
<Trans>Trending Videos</Trans>
87
+
</Text>
91
88
<Button
92
89
label={_(msg`Dismiss this section`)}
93
90
size="tiny"
94
-
variant="ghost"
91
+
variant="solid"
95
92
color="secondary"
96
-
shape="round"
93
+
shape="square"
97
94
onPress={() => trendingPrompt.open()}>
98
-
<ButtonIcon icon={X} />
95
+
<ButtonIcon icon={X} size="sm" />
99
96
</Button>
100
97
</View>
101
98
···
104
101
horizontal
105
102
showsHorizontalScrollIndicator={false}
106
103
decelerationRate="fast"
107
-
snapToInterval={CARD_WIDTH + a.gap_sm.gap}>
104
+
snapToInterval={CARD_WIDTH + a.gap_md.gap}
105
+
style={[a.overflow_visible]}>
108
106
<View
109
107
style={[
110
108
a.flex_row,
111
-
a.gap_sm,
109
+
a.gap_md,
112
110
{
113
111
paddingLeft: gutters.paddingLeft,
114
112
paddingRight: gutters.paddingRight,
···
193
191
a.justify_center,
194
192
a.align_center,
195
193
a.flex_1,
196
-
a.rounded_md,
194
+
a.rounded_lg,
195
+
a.border,
196
+
t.atoms.border_contrast_low,
197
197
t.atoms.bg,
198
+
t.atoms.shadow_sm,
198
199
]}>
199
200
{({pressed}) => (
200
201
<View