@rocketsearch/vue-uappi 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocketsearch/vue-uappi",
-  "version": "0.1.4",
+  "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/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;