@rocketsearch/vue-uappi 0.1.3 → 0.1.5

package/README.md

@@ -29,5 +29,6 @@ Use os componentes em PascalCase (`<RocketSearch>`, `<RocketShowcase position="t
 
 Landing page ("Personalizado" no painel): `<RocketLanding>` mostra todas as vitrines da landing, na ordem do
 painel. O identificador vem do nome da rota (`/black-friday` → `black-friday`) ou de `custom-key="..."`.
+Banners da landing: `<RocketBanner page-type="custom" />`, com a mesma regra do identificador.
 
 Documentação completa: https://api.rocketsearch.com.br/sdk/uappi/docs.html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocketsearch/vue-uappi",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Rocket Search para storefronts Uappi em Vue 3 + Vite + Pinia: busca, autocomplete, vitrines, banners e eventos",
   "type": "module",
   "main": "index.js",

package/runtime/banner.js

@@ -101,6 +101,30 @@ export function pickStyles (styles, keys) {
   return out;
 }
 
+// Vídeo no banner (ROC-420): a imagem segue sendo o pôster e o LCP.
+function hasVideo (content) {
+  return !!(content && (content.videoUrl || content.mobileVideoUrl));
+}
+
+/**
+ * URL do vídeo a tocar, ou '' quando a imagem deve ficar sozinha: reduced-motion,
+ * economia de dados ou formato que o navegador não toca. Só no cliente (recebe o window).
+ */
+export function pickVideoUrl (content, win) {
+  if (!win || !hasVideo(content)) return '';
+  const mq = q => !!(win.matchMedia && win.matchMedia(q).matches);
+  const url = (mq(MOBILE_MEDIA) && content.mobileVideoUrl) || content.videoUrl || content.mobileVideoUrl;
+  if (mq('(prefers-reduced-motion: reduce)')) return '';
+  const conn = win.navigator && win.navigator.connection;
+  if (conn && conn.saveData) return '';
+  // Contrato da ROC-418: a chave leva a extensão real (banners/{storeId}/{uuid}.mp4|webm).
+  // Sem extensão conhecida não arrisca: canPlayType('video/mp4') aprovaria um .mov.
+  const ext = /\.(mp4|webm)(?:[?#]|$)/i.exec(url);
+  if (!ext) return '';
+  const probe = win.document.createElement('video');
+  return probe.canPlayType && probe.canPlayType('video/' + ext[1].toLowerCase()) ? url : '';
+}
+
 export function isHeroSlot (position) {
   return /^(hero|fullbanner|header|top)$/i.test(String(position || ''));
 }
@@ -129,6 +153,8 @@ export function bannerTracking (item, opts) {
     slideIndex: o.slideIndex
   };
   if (embedded) tracking.bannerId = item.bannerId;
+  // Tipo do criativo, não do que tocou: com reduced-motion o visitante vê o pôster.
+  if (hasVideo(item.banner)) tracking.mediaType = 'video';
   if (item.experiment) {
     tracking.experimentId = item.experiment.experimentId;
     tracking.variantId = item.experiment.variantId;
@@ -140,6 +166,7 @@ function baseData (t, meta) {
   const data = { vitrine: t.id, showcaseId: t.id, meta };
   if (t.slot) meta.slot = String(t.slot);
   if (t.imageVariant) meta.imageVariant = t.imageVariant;
+  if (t.mediaType) meta.mediaType = t.mediaType;
   if (t.bannerId != null) {
     data.bannerId = t.bannerId;
     meta.bannerId = t.bannerId;

package/runtime/components/RocketBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="['rocket-search', 'rocket-search__banner-slot', { 'rocket-search--empty': !waiting && !banners.length }]"
-    :data-rocket-banner-position="position"
+    :data-rocket-banner-position="position || undefined"
   >
     <!-- Skeleton só com proporção declarada: sem saber a altura, ele é que causaria o pulo. -->
     <div v-if="waiting && ratio" class="rocket-search__banner-skeleton" :style="{ aspectRatio: ratioCss }" aria-hidden="true" />
@@ -30,12 +30,14 @@ import '../css/banner.css';
 import RocketBannerItem from './banner/RocketBannerItem.vue';
 import { exactWidth, isHeroSlot } from '../banner.js';
 
+const positionOf = b => (b && ((b.placement && b.placement.position) || b.position)) || '';
+
 export default {
   name: 'RocketBanner',
   components: { RocketBannerItem },
   props: {
-    // placement.position cadastrada no painel (hero, top, middle...).
-    position: { type: String, required: true },
+    // placement.position cadastrada no painel (hero, top, middle...). Obrigatória fora da landing.
+    position: { type: String, default: '' },
     // eager: busca assim que a página tem contexto (hero/LCP). ondemand: só quando o slot
     // chega perto da viewport.
     loading: {
@@ -45,6 +47,9 @@ export default {
     },
     // Força o pageType; sem ele vem da página atual (currentPageData do tema).
     pageType: { type: String, default: '' },
+    // Landing (page-type="custom"): identificador no painel; sem ele, o nome da rota
+    // (/black-friday -> black-friday). A landing não tem posição: vêm todos os banners dela.
+    customKey: { type: String, default: '' },
     limit: { type: Number, default: 0 },
     // Proporção do slot ("16/9", "3:1") — reserva a caixa e liga o skeleton.
     ratio: { type: String, default: '' },
@@ -63,11 +68,22 @@ export default {
     };
   },
   computed: {
+    landingKey () {
+      if (this.pageType !== 'custom') return '';
+      if (this.customKey) return this.customKey;
+      return ((this.$route && this.$route.path) || location.pathname).split('/').filter(Boolean).pop() || '';
+    },
     ratioCss () {
       return String(this.ratio).trim().replace(':', ' / ');
     }
   },
   watch: {
+    // Mesma página, outra landing (rota dinâmica reaproveita o componente): busca de novo.
+    landingKey () {
+      if (!this.requested) return;
+      this.requested = false;
+      this.tryLoad();
+    },
     // O contexto da página chega pelo currentPageData do tema (o plugin traduz para $rocket.setPage).
     '$rocket.currentPage.value' () {
       if (this.loading === 'eager' || this.visible) this.tryLoad();
@@ -99,16 +115,23 @@ export default {
       if (this.$el && this.$el.clientWidth) {
         this.width = exactWidth(this.$el.clientWidth, window.devicePixelRatio);
       }
-      const list = await this.$rocket.getBannersByContext(this.pageType || undefined, { position: this.position });
-      const mine = list.filter(b => ((b.placement && b.placement.position) || b.position) === this.position);
+      const key = this.landingKey;
+      const list = this.pageType === 'custom'
+        ? (key ? await this.$rocket.getBannersByContext('custom', { customKey: key }) : [])
+        : await this.$rocket.getBannersByContext(this.pageType || undefined, { position: this.position });
+      // Troca rápida de landing: a resposta da anterior não sobrescreve a atual.
+      if (key !== this.landingKey) return;
+      const mine = this.pageType === 'custom' ? list : list.filter(b => positionOf(b) === this.position);
       this.banners = this.limit > 0 ? mine.slice(0, this.limit) : mine;
       this.waiting = false;
     },
 
     itemProps (index) {
-      const hero = isHeroSlot(this.position) && index === 0;
+      // Na landing o slot é a posição do próprio banner.
+      const position = this.position || positionOf(this.banners[index]);
+      const hero = isHeroSlot(position) && index === 0;
       return {
-        position: this.position,
+        position,
         slideIndex: index,
         loading: hero ? 'eager' : 'lazy',
         fetchPriority: hero ? 'high' : '',

package/runtime/components/banner/RocketBannerItem.vue

@@ -25,6 +25,22 @@
         @load="syncRatio"
         @error="onImageError"
       >
+      <!-- Vídeo (ROC-420) por cima do pôster; src e play() só depois do load e na tela. -->
+      <video
+        v-if="videoSrc"
+        ref="video"
+        :key="videoSrc"
+        class="rocket-search__banner__video"
+        :class="{ 'rocket-search__banner__video--playing': videoPlaying }"
+        muted
+        loop
+        playsinline
+        preload="none"
+        aria-hidden="true"
+        :style="imgStyle"
+        @playing="videoPlaying = true"
+        @error="dropVideo"
+      />
     </picture>
     <!-- Texto só quando o lojista marcou showStoreText no dashboard. -->
     <div v-if="content.showStoreText && (content.title || content.subtitle || content.ctaText)" class="rocket-search__banner__caption" :style="captionStyle">
@@ -38,7 +54,7 @@
 <script>
 import {
   MOBILE_MEDIA, cdnResize, buildSrcset, resolveAspectRatio, hasExplicitAspectRatio, pickStyles,
-  highestMilestone, bannerTracking, bannerViewData, bannerClickData
+  highestMilestone, bannerTracking, bannerViewData, bannerClickData, pickVideoUrl
 } from '../../banner.js';
 
 const VIEW_THRESHOLD = 0.5;
@@ -62,7 +78,7 @@ export default {
     aspectRatio: { type: String, default: '' }
   },
   data () {
-    return { naturalRatio: null, resizeFailed: false, mobileMedia: MOBILE_MEDIA };
+    return { naturalRatio: null, resizeFailed: false, mobileMedia: MOBILE_MEDIA, videoSrc: '', videoPlaying: false };
   },
   computed: {
     content () {
@@ -125,11 +141,21 @@ export default {
       else this.onImageError(); // falhou antes do mount
     }
     this.observeImpression();
+    // Codec, reduced-motion e saveData só se sabem no navegador; sem vídeo, fica a imagem.
+    this.setupVideo();
   },
   beforeUnmount () {
     if (this.observer) this.observer.disconnect();
+    this.dropVideo();
     clearTimeout(this.dwellTimer);
   },
+  watch: {
+    // O pai reaproveita o componente sem :key quando a vitrine recarrega (SPA):
+    // o vídeo tem que acompanhar o banner novo, como a imagem já acompanha.
+    content () {
+      this.setupVideo();
+    }
+  },
   methods: {
     // Sem proporção cadastrada, a caixa reservada é um chute (3:1): corrige para a
     // proporção real do arquivo assim que carrega — senão o cover cortaria o banner.
@@ -145,6 +171,55 @@ export default {
       if (this.resize) this.resizeFailed = true;
     },
 
+    // Toca na tela, pausa fora dela. Falha (rede, codec, autoplay bloqueado) tira o vídeo
+    // via v-if e deixa o pôster.
+    watchVideo () {
+      if (!this.videoSrc) return; // caiu entre o setup e o nextTick/load
+      if (!('IntersectionObserver' in window)) return this.startVideo();
+      this.videoObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          const video = this.$refs.video;
+          if (entry.isIntersecting) this.startVideo();
+          else if (video && video.getAttribute('src')) video.pause();
+        });
+      });
+      this.videoObserver.observe(this.$el);
+    },
+
+    // muted/playsinline vêm do template (o Vue aplica muted como propriedade), antes do play().
+    startVideo () {
+      const video = this.$refs.video;
+      if (!video) return;
+      if (!video.getAttribute('src')) video.setAttribute('src', this.videoSrc);
+      const p = video.play();
+      // AbortError = pause() saindo da tela no meio do play(); não é falha.
+      if (p && p.catch) p.catch((err) => { if (!err || err.name !== 'AbortError') this.dropVideo(); });
+    },
+
+    setupVideo () {
+      this.dropVideo();
+      this.videoSrc = pickVideoUrl(this.content, window);
+      if (!this.videoSrc) return;
+      if (document.readyState === 'complete') this.$nextTick(this.watchVideo);
+      else window.addEventListener('load', this.watchVideo, { once: true });
+      // A imagem troca sozinha de variante (<source media>) ao girar a tela; o vídeo não.
+      this.videoMq = window.matchMedia && window.matchMedia(MOBILE_MEDIA);
+      if (this.videoMq && this.videoMq.addEventListener) this.videoMq.addEventListener('change', this.onBreakpoint);
+    },
+
+    // Variante do vídeo deixou de valer: sai e fica o pôster certo.
+    onBreakpoint () {
+      if (pickVideoUrl(this.content, window) !== this.videoSrc) this.dropVideo();
+    },
+
+    dropVideo () {
+      this.videoSrc = '';
+      this.videoPlaying = false;
+      if (this.videoObserver) this.videoObserver.disconnect();
+      window.removeEventListener('load', this.watchVideo);
+      if (this.videoMq && this.videoMq.removeEventListener) this.videoMq.removeEventListener('change', this.onBreakpoint);
+    },
+
     imageVariant () {
       const narrow = window.matchMedia && window.matchMedia(MOBILE_MEDIA).matches;
       if (narrow && this.content.mobileImageUrl) return 'mobile';

package/runtime/css/banner.css

@@ -21,6 +21,7 @@
   color: inherit;
 
   & .rocket-search__banner__media {
+    position: relative;
     display: block;
     width: 100%;
     /* fallback p/ browser sem aspect-ratio: a imagem define a altura */
@@ -36,6 +37,23 @@
     object-fit: cover;
   }
 
+  /* Vídeo (ROC-420) por cima do pôster; só aparece quando começa a tocar, sem quadro preto. */
+  & .rocket-search__banner__video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+  }
+
+  & .rocket-search__banner__video--playing {
+    opacity: 1;
+  }
+
   & .rocket-search__banner__caption {
     position: absolute;
     left: 0;

package/runtime/rocket.js

@@ -332,6 +332,7 @@ export function createRocket (config) {
   };
 
   // Só banners (DTO banner-native). Gated pela flag `banners`: loja sem ela recebe [].
+  // options.customKey: identificador da landing (pageType=custom); sem ele a API responde 400.
   rocket.getBannersByContext = async function (type, options) {
     const pageType = resolvePageType(type);
     if (!pageType) return [];
@@ -339,6 +340,7 @@ export function createRocket (config) {
     try {
       const sessionId = await getSessionIdWithTimeout();
       const params = { storeId: config.storeId, pageType, sessionId, position: opts.position };
+      if (pageType === 'custom') params.customKey = opts.customKey;
       const res = await fetch(config.apiUrl + '/banners/context?' + query(params), { headers: headers() });
       if (!res.ok) return [];
       const banners = await res.json();