# Home image Poster redesign MVP

### Requirements

- [x] **The home**
- [x] only use light mode
- [x] **The Logo**
- [x] is on top of the Slide
- [x] color parametrizable
- [x] No action associated
- [x] **The slide**:
- [x] slide will cover all the screen
- [x] The swipe up/dowm action move all the slide
- [x] Could have a link associated
- [x] **The Poster** (content)
- [x] is located in the slide
- [x] has margins defined by the app (client)
- [x] is centered
- [x] use the scaleType nearest to the poster container ( is already like this)
- [x] options parameters: [ scaleType, safeMargins ]
- [x] `scaleType == fill AND safeMargins == null` // required
- [x] `scaleType == fill AND safeMargins == ["top","bottom","left","right"]` // required all combination
- [x] **Image text**: Cannot lose quality
- [x] With layers the problem will be solved for now

### Tech integration

Las homes actuales tienen la siguiente estructura de xmedia:

"xmedias": [
{
  "type": "image",
  "kind": "other",
  "timestamp": "1608725272871",
  "datatype": "xmedia",
  "height": 4475,
  "name": "portrait_0",
  "path": "/contents/mkt/spots/aw20-north-new-in-man/subhome-xmedia-52-2/",
  "set": 2,
  "allowedScreens": [
    "small",
    "large"
  ],
  "width": 3000
},
...
]

### Ampliación de los nodos xmedia (continuísta)

#### Propuesta:

Proponemos que "scaleType" sea un atributo de tres estados
- fill
- fit
- legacy

Al añadir el valor *legacy* estamos añadiendo la posibilidad de que los xMedia con este valor se consuman únicamente en las versiones antiguas, evitando problemas en la visualización de las imágenes (texto mal posicionado, etc).

De igual manera, los xMedia que deban visualizarse en las versiones antiguas deberán estar posicionados al principio del array de xMedias, si scaleType es fit o fill se cunsumirá dicho xMedia en ambas versiones (aplicando márgenes o fullscreen, según corresponda, en la versión nueva)

"xmedias": [
    {
      "type": "image",
      "kind": "other",
      "timestamp": "1608725272871",
      "datatype": "xmedia",
      "height": 4475,
      "name": "portrait_0",
      "path": "/contents/mkt/spots/aw20-north-new-in-man/subhome-xmedia-52-2/",
      "set": 2,
      "scaleType": "legacy|fill|fit", // NEW --> default value: legacy
      "allowedScreens": [
        "small",
        "large"
      ],
      "width": 3000,
      "layers": [ typeof(xmedia) ] // NEW --> default value: []
      ...
    },
    ...
],
"meta": [
  {
    "xmediaName": "portrait_0",
    "color": "#ffffff", // legacy 
    "title": {
      "fontSize": 70,
      "lineHeight": 70,
      "letterSpacing": 0,
      "text": "SALE"
    },
    "subtitle": {
      "fontSize": 19,
      "letterSpacing": 0,
      "text": " "
    },
    "button": {
      "text": "VIEW"
    },
    "enhancement": {
      "active": false,
      "name": "aw20-sales"
    },
    // new
    "logo": {
      "color": "#ffffff"
    },
    // new
    "leftSectionContainer": {
      "color": "#ffffff"
    },
    // new
    "rightSectionContainer": {
      "color": "#ffffff"
    },
    // new
    "topSectionContainer": {
      "color": "#ffffff"
    },
    // new
    "bottomSectionContainer": {
      "color": "#ffffff"
    },
    // new
    "bullets": {
      "color": "#ffffff"
    },
    // new
    "background": {
      "color": "#ffffff"
    },
    // new
    "safeMargins": [ "left","right","top","bottom" ] // default value: []
  },
  ...
]

# HOME redesign Phase II

- [x] el modo de renderizado podría ser fit
- [ ] el contenido se puede anclar por parámetro en el modo fit/fill
- [ ] parametrización del color de fondo a partir de `background.color`
- [ ] renderizado de contenido a partir de los nodos `xmedia` alojados en `fragments`
- [x] `scaleType == fill|fit AND safeMargins == ["top","bottom","left","right"]` // optional all the combination

## opt 1 - extend xmedia

"xmedias": [
{
  "type": "image",
  "kind": "other",
  "timestamp": "1608725272871",
  "datatype": "xmedia",
  "height": 4475,
  "name": "portrait_0",
  "path": "/contents/mkt/spots/aw20-north-new-in-man/subhome-xmedia-52-2/",
  "set": 2,
  "scaleType": "legacy|fill|fit",
  "allowedScreens": [
    "small",
    "large"
  ],
  "width": 3000,
  "layers": [typeof(xmedia)]
  // new
  "fragments": [typeof(xmedia)]
},
...
]

## opt 2 - Nuevo nodo a nivel de slide (sólo interpretable por nuevas versiones) TBD

Crear un sibling al del `xmedias` alojando únicamente la información necesaria para renderizar un cartel a partir de sus `xmedias` con la información de posicionamiento relativa al área de renderizado:

"posters": [
    {
      "datatype": "xmedia",
      "type": "image",
      "kind": "other",
      "name": "portrait_0",
      "path": "/contents/mkt/spots/aw20-north-new-in-man/subhome-xmedia-52-2/",
      "timestamp": "1608725272871",
      "width": 3000,
      "height": 4475,
      "scaleType": "legacy|fill|fit",
      "allowedScreens": [ "small", "large" ],
      "fragments": [typeof(xmedia)]
    },
    ...
]

Los elementos xmedia del array `fragments` contendrán información del posicionamiento dentro del nodo `extraInfo.area`:

  { // Valor porcentuales respecto el width del xmedia
    "x1": 21.86667,
    "y1": 40.02869,
    "x2": 65.6,
    "y2": 42.64706
  }

*NOTA*: A fin de dar compatibilidad con las versiones legacy, el array de xmedia proporcionará en primera posición variantes `fill`. La nueva versión de la app dará prioridad a xmedias `fit` por encima de las `fill`.

# Dudas

## Legacy

_"Javier Blanco Gutierrez, los XMedias que se enviarían al principio, que serían los que las versiones Legacy de la app tomen para pintar las imágenes,¿van a ser igualmente válidos para nueva versiones de la app si en vez de "fit" tiramos por "fill" para el MVP que haremos para el rediseño? Es decir, ¿habrían unos XMedias específicos SOLO para Legacy, o por el contrario también serían aplicables para las nuevas versiones de las apps?"_

De partida se preparan posters en diferentes aspect ratios compatibles para el modo fill donde los operadores tendrán en cuenta los márgenes de seguridad.