forked from off-topic/apps.apple.com
init commit
This commit is contained in:
rxliuli
103
shared/components/config/components/artwork.ts
Normal file
103
shared/components/config/components/artwork.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
// default params used by artwork component.
|
||||
import type { Profile } from '@amp/web-app-components/src/components/Artwork/types';
|
||||
import type { Breakpoints } from '@amp/web-app-components/src/types';
|
||||
import { ASPECT_RATIOS } from '@amp/web-app-components/src/components/Artwork/constants';
|
||||
|
||||
export type ArtworkProfileMap<ProfileName extends string = string> = Map<
|
||||
ProfileName,
|
||||
Profile
|
||||
>;
|
||||
export interface ArtworkConfigOptions {
|
||||
BREAKPOINTS?: Breakpoints;
|
||||
PROFILES?: ArtworkProfileMap;
|
||||
}
|
||||
|
||||
interface ArtworkConfig {
|
||||
get: () => ArtworkConfigOptions;
|
||||
set: (obj: ArtworkConfigOptions) => void;
|
||||
}
|
||||
|
||||
function artworkConfig(): ArtworkConfig {
|
||||
const {
|
||||
HD,
|
||||
ONE,
|
||||
HERO,
|
||||
THREE_QUARTERS,
|
||||
SUPER_HERO_WIDE,
|
||||
UBER,
|
||||
ONE_THIRD,
|
||||
HD_ASPECT_RATIO,
|
||||
EDITORIAL_DEFAULT,
|
||||
} = ASPECT_RATIOS;
|
||||
let config: ArtworkConfigOptions = {
|
||||
BREAKPOINTS: {
|
||||
xsmall: {
|
||||
max: 739,
|
||||
},
|
||||
small: {
|
||||
min: 740,
|
||||
max: 999,
|
||||
},
|
||||
medium: {
|
||||
min: 1000,
|
||||
max: 1319,
|
||||
},
|
||||
large: {
|
||||
min: 1320,
|
||||
max: 1679,
|
||||
},
|
||||
xlarge: {
|
||||
min: 1680,
|
||||
},
|
||||
},
|
||||
PROFILES: new Map([
|
||||
['brick', [[340, 340, 290, 290], HD, 'sr']],
|
||||
['brick-sporting-event', [[340, 340, 290, 290], HD, 'sh']],
|
||||
['product', [[500, 500, 300, 270], ONE, 'bb']],
|
||||
['episode', [[330, 330, 305, 295], HD, 'sr']],
|
||||
[
|
||||
'editorial-card',
|
||||
[[530, 530, 480, 300, 300], EDITORIAL_DEFAULT, 'fa'],
|
||||
],
|
||||
['editorial-card-cover-artwork', [[60], ONE, 'cc']],
|
||||
['editorial-card-video-art', [[88], HD_ASPECT_RATIO, 'mv']],
|
||||
['hero', [[530, 530, 600, 450], HERO, 'sr']],
|
||||
['superHeroLockup', [[330, 330, 305, 295], THREE_QUARTERS, 'bb']],
|
||||
['superHeroTall', [[600, 600, 450], THREE_QUARTERS, 'sr']],
|
||||
[
|
||||
'superHeroWide',
|
||||
[[1200, 1200, 900, 600, 450], SUPER_HERO_WIDE, 'sr'],
|
||||
],
|
||||
['uber', [[1200], UBER, 'bb']],
|
||||
['episode-lockup', [[316, 316, 296, 296], ONE, 'cc']],
|
||||
['upsell-artwork', [[94], ONE, 'cc']],
|
||||
['upsell-wordmark', [[140], 140 / 14, 'bb']],
|
||||
['ellipse-lockup', [[243, 243, 220, 190, 160], ONE, 'cc']],
|
||||
['standard', [[243, 243, 220, 190, 160], ONE, 'bb']],
|
||||
['powerswoosh', [[300], ONE, 'cc']],
|
||||
['powerswooshTall', [[600, 450], THREE_QUARTERS, 'sr']],
|
||||
['category-brick', [[1040, 1040, 1040, 680], ONE_THIRD, 'sr']],
|
||||
['info-fullscreen', [[600, 600, 450], ONE, 'bb']],
|
||||
['track-list', [[40], ONE, 'bb']],
|
||||
]),
|
||||
};
|
||||
|
||||
const setConfig = (obj: ArtworkConfigOptions) => {
|
||||
config = {
|
||||
PROFILES: new Map([...config.PROFILES, ...obj.PROFILES]),
|
||||
BREAKPOINTS: {
|
||||
...config.BREAKPOINTS,
|
||||
...(obj?.BREAKPOINTS ?? {}),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const getConfig = (): ArtworkConfigOptions => config;
|
||||
|
||||
return {
|
||||
get: getConfig,
|
||||
set: setConfig,
|
||||
};
|
||||
}
|
||||
|
||||
export const ArtworkConfig = artworkConfig();
|
||||
116
shared/components/config/components/shelf.ts
Normal file
116
shared/components/config/components/shelf.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
/* eslint-disable object-curly-newline */
|
||||
import type { Size } from '@amp/web-app-components/src/types';
|
||||
import type { GridType } from '@amp/web-app-components/src/components/Shelf/types';
|
||||
|
||||
/**
|
||||
* Used to customize the shared shelf
|
||||
*
|
||||
* @param GRID_MAX_CONTENT - Sets the max content size of the column for each viewport
|
||||
* @param GRID_ROW_GAP - Sets the row gap for a shelf in each viewport
|
||||
* @param GRID_COL_GAP - Sets the column gap for a shelf in each viewport
|
||||
* @param GRID_VALUES - Sets the number of items to show in a column of the grid for each viewport
|
||||
*
|
||||
* @example
|
||||
* const ShelvesConfig = {
|
||||
* GRID_MAX_CONTENT: {
|
||||
* FooShelf: { xsmall: '298px' },
|
||||
* },
|
||||
* GRID_COL_GAP: {
|
||||
* FooShelf: { xsmall: '10px', small:'20px', medium:'20px', large:'20px', xlarge: '30px' }
|
||||
* },
|
||||
* GRID_ROW_GAP: {
|
||||
* FooShelf: { xsmall: '10px', small:'20px', medium:'20px', large:'20px', xlarge: '30px' }
|
||||
* },
|
||||
* GRID_VALUES: {
|
||||
* FooShelf: { xsmall: 1, small: 3, medium: 5, large: 6, xlarge: 10 }
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
export interface ShelfConfigOptions {
|
||||
/**
|
||||
* Sets the max size of the column for each viewport
|
||||
* (NOTE: these values will override GRID_VALUES)
|
||||
*/
|
||||
GRID_MAX_CONTENT: {
|
||||
[key in GridType]: { [value in Size]?: string };
|
||||
};
|
||||
/**
|
||||
* Sets the row gap for a shelf in each viewport
|
||||
* - Default for all shelves is { xsmall: '24px', small: '24px', medium: '24px', large: '24px', xlarge: '24px' }
|
||||
*/
|
||||
GRID_ROW_GAP: {
|
||||
[key in GridType]?: { [value in Size]?: number | null };
|
||||
};
|
||||
/**
|
||||
* Sets the column gap for a shelf in each viewport
|
||||
* - Default for all shelves is { xsmall: '10px', small: '20px', medium: '20px', large: '20px', xlarge: '20px' }
|
||||
*/
|
||||
GRID_COL_GAP: {
|
||||
[key in GridType]?: { [value in Size]?: string | null };
|
||||
};
|
||||
/**
|
||||
* Sets the number of columns in the grid for each viewport
|
||||
* (NOTE: this value will be overridden by values in GRID_MAX_CONTENT)
|
||||
*/
|
||||
GRID_VALUES: {
|
||||
[key in GridType]: { [value in Size]: number | null };
|
||||
};
|
||||
}
|
||||
|
||||
// Grid values correspond with dynamic-grids.scss
|
||||
function ShelfConfigInit() {
|
||||
let config: ShelfConfigOptions = {
|
||||
GRID_MAX_CONTENT: {
|
||||
A: { xsmall: '298px' },
|
||||
B: { xsmall: '298px' },
|
||||
C: { xsmall: '200px' },
|
||||
D: { xsmall: '144px' },
|
||||
E: { xsmall: '144px' },
|
||||
F: { xsmall: '270px' },
|
||||
G: { xsmall: '144px' },
|
||||
H: { xsmall: '94px' },
|
||||
I: { xsmall: '144px' },
|
||||
EllipseA: {},
|
||||
Spotlight: {},
|
||||
Single: {},
|
||||
'1-1-2-3': {},
|
||||
'2-2-3-4': { xsmall: '270px' },
|
||||
'1-2-2-2': {},
|
||||
},
|
||||
GRID_COL_GAP: {},
|
||||
GRID_ROW_GAP: {
|
||||
None: { xsmall: 0, small: 0, medium: 0, large: 0, xlarge: 0 },
|
||||
'1-2-2-2': { xsmall: 0, small: 0, medium: 0, large: 0, xlarge: 0 },
|
||||
},
|
||||
GRID_VALUES: {
|
||||
A: { xsmall: null, small: 2, medium: 2, large: 3, xlarge: 3 },
|
||||
B: { xsmall: null, small: 2, medium: 3, large: 4, xlarge: 4 },
|
||||
C: { xsmall: null, small: 3, medium: 4, large: 5, xlarge: 5 },
|
||||
D: { xsmall: null, small: 4, medium: 5, large: 8, xlarge: 8 },
|
||||
E: { xsmall: null, small: 5, medium: 9, large: 10, xlarge: 10 },
|
||||
F: { xsmall: null, small: 2, medium: 3, large: 3, xlarge: 3 },
|
||||
G: { xsmall: null, small: 4, medium: 5, large: 6, xlarge: 6 },
|
||||
H: { xsmall: null, small: 6, medium: 8, large: 10, xlarge: 10 },
|
||||
I: { xsmall: null, small: 5, medium: 6, large: 8, xlarge: 8 },
|
||||
Single: { xsmall: 1, small: 1, medium: 1, large: 1, xlarge: 1 },
|
||||
EllipseA: { xsmall: 2, small: 4, medium: 6, large: 6, xlarge: 6 },
|
||||
Spotlight: { xsmall: 1, small: 1, medium: 1, large: 1, xlarge: 1 },
|
||||
'1-1-2-3': { xsmall: 1, small: 1, medium: 2, large: 3, xlarge: 3 },
|
||||
'2-2-3-4': { xsmall: 2, small: 2, medium: 3, large: 4, xlarge: 4 },
|
||||
'1-2-2-2': { xsmall: 1, small: 2, medium: 2, large: 2, xlarge: 2 },
|
||||
},
|
||||
};
|
||||
|
||||
const get = () => config;
|
||||
|
||||
const set = (obj: ShelfConfigOptions) => {
|
||||
config = { ...config, ...obj };
|
||||
};
|
||||
|
||||
return {
|
||||
set,
|
||||
get,
|
||||
};
|
||||
}
|
||||
|
||||
export const ShelfConfig = ShelfConfigInit();
|
||||
Reference in New Issue
Block a user