summaryrefslogtreecommitdiff
path: root/shared/components/config
diff options
context:
space:
mode:
Diffstat (limited to 'shared/components/config')
-rw-r--r--shared/components/config/components/artwork.ts103
-rw-r--r--shared/components/config/components/shelf.ts116
2 files changed, 219 insertions, 0 deletions
diff --git a/shared/components/config/components/artwork.ts b/shared/components/config/components/artwork.ts
new file mode 100644
index 0000000..daca473
--- /dev/null
+++ b/shared/components/config/components/artwork.ts
@@ -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();
diff --git a/shared/components/config/components/shelf.ts b/shared/components/config/components/shelf.ts
new file mode 100644
index 0000000..1146e3d
--- /dev/null
+++ b/shared/components/config/components/shelf.ts
@@ -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();
generated by cgit v1.2.3 (git 2.46.0) at 2026-05-04 20:39:35 +0000