this repo has no description
1import { ASPECT_RATIOS } from '@amp/web-app-components/src/components/Artwork/constants';
2import { ArtworkConfig } from '@amp/web-app-components/config/components/artwork';
3import type { ArtworkProfileMap } from '@amp/web-app-components/config/components/artwork';
4import type { CropCode } from '@amp/web-app-components/src/components/Artwork/types';
5
6const { HD, ONE, THREE_QUARTERS, HD_ASPECT_RATIO } = ASPECT_RATIOS;
7
8const AppIconSize = {
9 DEFAULT: [48],
10 SMALL: [64],
11 MEDIUM: [100],
12 LARGE: [200],
13 XLARGE: [800],
14};
15
16const cardSizes = [525, 525, 490, 394, 738];
17const brickSizes = [520, 400, 450, 450, 300];
18const heroSizes = [1600, 1240, 920, 920, 490];
19
20export type NamedProfile =
21 | 'app-event-detail'
22 | 'app-event-detail-small'
23 | 'app-icon'
24 | 'app-icon-large'
25 | 'app-icon-medium'
26 | 'app-icon-small'
27 | 'app-icon-xlarge'
28 | 'app-icon-pill'
29 | 'app-icon-large-pill'
30 | 'app-icon-medium-pill'
31 | 'app-icon-small-pill'
32 | 'app-icon-river-pill'
33 | 'app-icon-tv-rect'
34 | 'app-icon-large-tv-rect'
35 | 'app-icon-xlarge-tv-rect'
36 | 'app-icon-medium-tv-rect'
37 | 'app-icon-small-tv-rect'
38 | 'app-icon-river-tv-rect'
39 | 'app-icon-river'
40 | 'app-promotion'
41 | 'app-promotion-in-article'
42 | 'app-trailer-lockup-video'
43 | 'brick'
44 | 'brick-app-icon'
45 | 'card'
46 | 'card-horizontal'
47 | 'category-brick'
48 | 'editorial-story-card'
49 | 'in-app-purchase'
50 | 'large-brick'
51 | 'large-hero'
52 | 'large-hero-portrait'
53 | 'large-hero-portrait-iphone'
54 | 'large-hero-breakout'
55 | 'large-hero-breakout-rtl'
56 | 'large-hero-west'
57 | 'large-hero-east'
58 | 'large-hero-story-card'
59 | 'large-hero-story-card-portrait'
60 | 'large-hero-story-card-rtl'
61 | 'large-image-lockup'
62 | 'poster-lockup'
63 | 'poster-title'
64 | 'medium-story-card'
65 | 'screenshot-vision'
66 | 'screenshot-phone'
67 | 'screenshot-phone_portrait'
68 | 'screenshot-iphone_5_8'
69 | 'screenshot-iphone_5_8_portrait'
70 | 'screenshot-iphone_6_5'
71 | 'screenshot-iphone_6_5_portrait'
72 | 'screenshot-iphone_d74'
73 | 'screenshot-iphone_d74_portrait'
74 | 'screenshot-mac'
75 | 'screenshot-tv'
76 | 'screenshot-pad'
77 | 'screenshot-pad-portrait'
78 | 'screenshot-watch'
79 | 'small-brick'
80 | 'small-story-card-portrait'
81 | 'small-story-card'
82 | 'small-story-card-legacy'
83 | 'uber-shelf';
84
85const PROFILES: ArtworkProfileMap<NamedProfile> = new Map([
86 ['app-event-detail', [[480, 336, 336], 9 / 16, 'sr']],
87 ['app-event-detail-small', [[480, 336, 336], HD_ASPECT_RATIO, 'sr']],
88 ['app-icon', [AppIconSize.DEFAULT, ONE, 'bb']],
89 ['app-icon-large', [AppIconSize.LARGE, ONE, 'bb']],
90 ['app-icon-medium', [AppIconSize.MEDIUM, ONE, 'bb']],
91 ['app-icon-small', [AppIconSize.SMALL, ONE, 'bb']],
92 ['app-icon-xlarge', [AppIconSize.XLARGE, ONE, 'bb']],
93 ['app-icon-pill', [AppIconSize.DEFAULT, 4 / 3, 'sr']],
94 ['app-icon-large-pill', [AppIconSize.LARGE, 4 / 3, 'sr']],
95 ['app-icon-medium-pill', [AppIconSize.MEDIUM, 4 / 3, 'sr']],
96 ['app-icon-small-pill', [AppIconSize.SMALL, 4 / 3, 'sr']],
97 ['app-icon-tv-rect', [AppIconSize.DEFAULT, HD, 'sr']],
98 ['app-icon-large-tv-rect', [AppIconSize.LARGE, HD, 'sr']],
99 ['app-icon-xlarge-tv-rect', [AppIconSize.XLARGE, HD, 'sr']],
100 ['app-icon-medium-tv-rect', [AppIconSize.MEDIUM, HD, 'sr']],
101 ['app-icon-small-tv-rect', [AppIconSize.SMALL, HD, 'bb']],
102 ['app-icon-river-tv-rect', [[128, 128, 128, 88, 88], HD, 'bb']],
103 ['app-icon-river', [[128, 128, 128, 88, 88], ONE, 'bb']],
104 ['app-icon-river-pill', [[128, 128, 128, 88, 88], 4 / 3, 'sr']],
105 ['app-promotion', [[385, 330, 400, 450, 298], 16 / 9, 'sr']],
106 ['app-promotion-in-article', [[800, 600], 16 / 9, 'sr']],
107 ['app-trailer-lockup-video', [[385, 330, 400, 450, 298], 16 / 10, 'sr']],
108 ['brick', [brickSizes, HD, 'sr']],
109 ['brick-app-icon', [[83, 60, 60, 60, 50], ONE, 'bb']],
110 ['card', [cardSizes, THREE_QUARTERS, 'sr']],
111 ['card-horizontal', [[1020], HD, 'sr']],
112 ['category-brick', [[368, 368, 368, 208, 288], HD, 'sr']],
113 ['editorial-story-card', [[385, 400, 450], THREE_QUARTERS, 'sr']],
114 ['in-app-purchase', [[153, 160, 160, 140, 168], ONE, 'sr']],
115 ['large-brick', [[520, 610, 450, 298, 298], HD, 'sr']],
116 ['large-hero', [heroSizes, HD, 'sr']],
117 ['large-hero-portrait', [[430], 9 / 16, 'sr']],
118 ['large-hero-portrait-iphone', [[430], THREE_QUARTERS, 'SH.ApCSC01']],
119 ['large-hero-west', [heroSizes, 2.79, 'grav.west']],
120 ['large-hero-east', [heroSizes, 2.79, 'grav.east']],
121 ['large-hero-story-card', [heroSizes, 2.25, 'CC.ApSHW01']],
122 ['large-hero-story-card-rtl', [heroSizes, 2.25, 'sr']],
123 ['large-hero-story-card-portrait', [cardSizes, 3 / 4, 'CC.ApSHT01']],
124 ['large-hero-breakout', [heroSizes, 8 / 3, 'sr']],
125 ['large-image-lockup', [[790, 610, 919, 298, 298], HD, 'sr']],
126 ['poster-lockup', [[520, 520, 400, 450, 300], HD, 'sr']],
127 ['poster-title', [[400, 300, 200], HD, 'bb']],
128 [
129 'large-hero-breakout-rtl',
130 [[1600, 1240, 920, 920, 688], 8 / 3, 'gk' as CropCode],
131 ], // the `rtl` version of `large-hero-breakout` assets max out at 1344px wide
132 ['medium-story-card', [[298, 579, 490, 394], THREE_QUARTERS, 'sr']],
133 ['small-brick', [[300, 300, 300, 200, 300], HD, 'sr']],
134 ['small-story-card-portrait', [[182, 232, 215, 192], THREE_QUARTERS, 'sr']],
135 ['screenshot-vision', [[480, 480, 335, 520, 520], HD, 'sr']],
136 ['screenshot-phone', [[313, 643, 313, 480, 643], 20 / 9, 'w']],
137 ['screenshot-phone_portrait', [[230, 230, 157, 300, 300], 9 / 20, 'w']],
138 ['screenshot-iphone_5_8', [[313, 643, 313, 480, 643], 498 / 230, 'w']],
139 [
140 'screenshot-iphone_5_8_portrait',
141 [[230, 230, 157, 300, 300], 230 / 498, 'w'],
142 ],
143 ['screenshot-iphone_6_5', [[313, 643, 313, 480, 643], 498 / 230, 'w']],
144 [
145 'screenshot-iphone_6_5_portrait',
146 [[230, 230, 157, 300, 300], 230 / 498, 'w'],
147 ],
148 ['screenshot-iphone_d74', [[313, 643, 313, 480, 643], 466 / 215, 'w']],
149 [
150 'screenshot-iphone_d74_portrait',
151 [[230, 230, 157, 300, 300], 215 / 466, 'w'],
152 ],
153 ['screenshot-mac', [[313, 643, 313, 480, 643], 16 / 10, 'w']],
154 ['screenshot-tv', [[313, 643, 313, 480, 643], HD, 'w']],
155 ['screenshot-pad', [[313, 643, 313, 480, 643], 4 / 3, 'w']],
156 ['screenshot-pad-portrait', [[480, 528, 313, 480, 643], 3 / 4, 'w']],
157 ['screenshot-watch', [[300, 157, 230, 230, 230], 4 / 5, 'w']],
158 ['small-story-card', [brickSizes, HD, 'CC.ApSHSC01']],
159 ['small-story-card-legacy', [brickSizes, HD, 'SCS.ApDPCS01']],
160 ['uber-shelf', [[1680, 1680, 1320, 1000, 390], 8 / 3, 'sr']],
161]);
162
163ArtworkConfig.set({ PROFILES });