Vidéo du produit

{%- comment -%}
  Section NAHNAH AI : vidéo du produit en action.
  Source, par ordre de priorité : vidéo choisie dans la section, sinon première vidéo
  du produit (sur la fiche produit). Lecture muette en boucle seulement quand la vidéo
  est à l'écran ; si le visiteur réduit les animations : pas de lecture automatique.
  Chargement différé (preload none) pour rester rapide sur mobile.
{%- endcomment -%}
{{ 'nahnah-sections.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign video = section.settings.video
  if video == blank and product and section.settings.video_produit
    assign video = product.media | where: 'media_type', 'video' | first
  endif
-%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- if video != blank -%}
  <div class="nahnah-video color-{{ section.settings.color_scheme }} gradient">
    <div class="page-width section-{{ section.id }}-padding nahnah-video__grille nahnah-video__grille--{{ section.settings.disposition }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
      {%- if section.settings.titre != blank or section.settings.texte != blank -%}
        <div class="nahnah-video__texte">
          {%- if section.settings.titre != blank -%}
            <h2 class="h1">{{ section.settings.titre | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.texte != blank -%}
            <div class="rte">{{ section.settings.texte }}</div>
          {%- endif -%}
        </div>
      {%- endif -%}
      <div class="nahnah-video__media">
        <nahnah-video-auto>
          {{
            video
            | video_tag: muted: true, loop: true, playsinline: true, preload: 'none', controls: true, class: 'nahnah-video__lecteur'
          }}
        </nahnah-video-auto>
      </div>
    </div>
  </div>
{%- elsif request.design_mode -%}
  <div class="page-width nahnah-vide">Choisis une vidéo (ou ajoute une vidéo au produit).</div>
{%- endif -%}

{% schema %}
{
  "name": "Vidéo du produit",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    { "type": "video", "id": "video", "label": "Vidéo (hébergée sur Shopify)" },
    { "type": "checkbox", "id": "video_produit", "label": "Sinon, utiliser la première vidéo du produit", "default": true },
    { "type": "text", "id": "titre", "label": "Titre", "default": "En action" },
    { "type": "richtext", "id": "texte", "label": "Texte" },
    {
      "type": "select", "id": "disposition", "label": "Disposition",
      "options": [{ "value": "cote", "label": "Texte à côté" }, { "value": "dessus", "label": "Texte au-dessus" }],
      "default": "cote"
    },
    { "type": "color_scheme", "id": "color_scheme", "label": "Couleurs", "default": "scheme-1" },
    { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Marge haute", "default": 36 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Marge basse", "default": 36 }
  ],
  "presets": [{ "name": "Vidéo du produit" }]
}
{% endschema %}