stormcloud-video-player 0.2.4 → 0.2.5

package/lib/index.js

@@ -68,6 +68,8 @@ function createImaController(video, options) {
   let adsLoadedPromise;
   let adsLoadedResolve;
   let adsLoadedReject;
+  let currentAdDuration = 0;
+  let preloadedAds = [];
   function makeAdsRequest(google, vastTagUrl) {
     const adsRequest = new google.ima.AdsRequest();
     adsRequest.adTagUrl = vastTagUrl;
@@ -174,6 +176,7 @@ function createImaController(video, options) {
                     } catch {
                     }
                     adPlaying = false;
+                    currentAdDuration = 0;
                     video.muted = originalMutedState;
                     if (adContainerEl)
                       adContainerEl.style.pointerEvents = "none";
@@ -245,9 +248,22 @@ function createImaController(video, options) {
                     emit("content_resume");
                   }
                 );
+                adsManager.addEventListener(AdEvent.STARTED, (adEvent) => {
+                  console.log("[IMA] Ad started");
+                  try {
+                    const ad = adEvent.getAd();
+                    if (ad && ad.getDuration) {
+                      currentAdDuration = ad.getDuration();
+                      console.log(`[IMA] Ad duration: ${currentAdDuration}s`);
+                    }
+                  } catch (error) {
+                    console.warn("[IMA] Could not get ad duration:", error);
+                  }
+                });
                 adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
                   console.log("[IMA] All ads completed");
                   adPlaying = false;
+                  currentAdDuration = 0;
                   video.muted = originalMutedState;
                   if (adContainerEl) adContainerEl.style.pointerEvents = "none";
                   if (!options?.continueLiveStreamDuringAds) {
@@ -432,6 +448,84 @@ function createImaController(video, options) {
         }
       }
       return 1;
+    },
+    getAdDuration() {
+      return currentAdDuration;
+    },
+    async preloadAds(vastTagUrls) {
+      console.log(`[IMA] Preloading ${vastTagUrls.length} ads`);
+      const adInfos = [];
+      for (const vastTagUrl of vastTagUrls) {
+        try {
+          await ensureImaLoaded();
+          const google = window.google;
+          const tempAdsLoader = new google.ima.AdsLoader(adDisplayContainer);
+          const adInfo = await new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+              reject(new Error("Preload timeout"));
+            }, 5e3);
+            tempAdsLoader.addEventListener(
+              google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+              (evt) => {
+                clearTimeout(timeout);
+                try {
+                  const tempAdsManager = evt.getAdsManager(video);
+                  let duration = 30;
+                  try {
+                    const ads = tempAdsManager.getCuePoints?.() || [];
+                    if (ads.length > 0) {
+                      duration = 15;
+                    }
+                  } catch {
+                  }
+                  tempAdsManager.destroy();
+                  resolve({
+                    duration,
+                    vastTagUrl,
+                    isPreloaded: true
+                  });
+                } catch (error) {
+                  clearTimeout(timeout);
+                  reject(error);
+                }
+              }
+            );
+            tempAdsLoader.addEventListener(
+              google.ima.AdErrorEvent.Type.AD_ERROR,
+              (errorEvent) => {
+                clearTimeout(timeout);
+                console.warn(
+                  `[IMA] Preload error for ${vastTagUrl}:`,
+                  errorEvent.getError()
+                );
+                resolve({
+                  duration: 30,
+                  vastTagUrl,
+                  isPreloaded: false
+                });
+              }
+            );
+            const adsRequest = new google.ima.AdsRequest();
+            adsRequest.adTagUrl = vastTagUrl;
+            tempAdsLoader.requestAds(adsRequest);
+          });
+          adInfos.push(adInfo);
+          tempAdsLoader.destroy();
+        } catch (error) {
+          console.warn(`[IMA] Failed to preload ad ${vastTagUrl}:`, error);
+          adInfos.push({
+            duration: 30,
+            vastTagUrl,
+            isPreloaded: false
+          });
+        }
+      }
+      preloadedAds = adInfos;
+      console.log(
+        `[IMA] Preloaded ${adInfos.length} ads with total duration:`,
+        adInfos.reduce((sum, ad) => sum + ad.duration, 0)
+      );
+      return adInfos;
     }
   };
 }
@@ -664,6 +758,8 @@ var StormcloudVideoPlayer = class {
     this.totalAdsInBreak = 0;
     this.showAds = false;
     this.isLiveStream = false;
+    this.preloadedAdInfo = [];
+    this.cumulativeAdDurationMs = 0;
     this.config = config;
     this.video = config.videoElement;
     this.ima = createImaController(this.video, {
@@ -835,16 +931,28 @@ var StormcloudVideoPlayer = class {
     this.ima.initialize();
     this.ima.on("all_ads_completed", () => {
       if (!this.inAdBreak) return;
+      const actualAdDuration = this.ima.getAdDuration();
+      if (actualAdDuration > 0) {
+        this.cumulativeAdDurationMs += actualAdDuration * 1e3;
+        if (this.config.debugAdTiming) {
+          console.log(
+            `[StormcloudVideoPlayer] Ad completed. Duration: ${actualAdDuration}s, Cumulative: ${this.cumulativeAdDurationMs}ms`
+          );
+        }
+      }
       const remaining = this.getRemainingAdMs();
-      if (remaining > 500 && this.adPodQueue.length > 0) {
+      const shouldContinue = this.shouldContinueAdBreak(remaining);
+      if (shouldContinue && this.adPodQueue.length > 0) {
         const next = this.adPodQueue.shift();
         this.currentAdIndex++;
         this.playSingleAd(next).catch(() => {
         });
+      } else if (shouldContinue && this.canRequestMoreAds()) {
+        this.requestAdditionalAds().catch(() => {
+          this.endAdBreak();
+        });
       } else {
-        this.currentAdIndex = 0;
-        this.totalAdsInBreak = 0;
-        this.showAds = false;
+        this.endAdBreak();
       }
     });
     this.ima.on("ad_error", () => {
@@ -853,11 +961,16 @@ var StormcloudVideoPlayer = class {
       }
       if (!this.inAdBreak) return;
       const remaining = this.getRemainingAdMs();
-      if (remaining > 500 && this.adPodQueue.length > 0) {
+      const shouldContinue = this.shouldContinueAdBreak(remaining);
+      if (shouldContinue && this.adPodQueue.length > 0) {
         const next = this.adPodQueue.shift();
         this.currentAdIndex++;
         this.playSingleAd(next).catch(() => {
         });
+      } else if (shouldContinue && this.canRequestMoreAds()) {
+        this.requestAdditionalAds().catch(() => {
+          this.handleAdFailure();
+        });
       } else {
         this.handleAdFailure();
       }
@@ -1348,6 +1461,25 @@ var StormcloudVideoPlayer = class {
   isShowingAds() {
     return this.showAds;
   }
+  getAdBreakStats() {
+    const remainingDurationMs = this.currentAdBreakTargetDurationMs != null ? Math.max(
+      0,
+      this.currentAdBreakTargetDurationMs - this.cumulativeAdDurationMs
+    ) : void 0;
+    const estimatedFillRate = this.currentAdBreakTargetDurationMs != null && this.currentAdBreakTargetDurationMs > 0 ? this.cumulativeAdDurationMs / this.currentAdBreakTargetDurationMs * 100 : void 0;
+    return {
+      isInAdBreak: this.inAdBreak,
+      currentAdIndex: this.currentAdIndex,
+      totalAdsInBreak: this.totalAdsInBreak,
+      targetDurationMs: this.currentAdBreakTargetDurationMs,
+      cumulativeDurationMs: this.cumulativeAdDurationMs,
+      estimatedFillRate,
+      remainingDurationMs
+    };
+  }
+  getPreloadedAdInfo() {
+    return [...this.preloadedAdInfo];
+  }
   getStreamType() {
     const url = this.config.src.toLowerCase();
     if (url.includes(".m3u8") || url.includes("/hls/") || url.includes("application/vnd.apple.mpegurl")) {
@@ -1382,59 +1514,59 @@ var StormcloudVideoPlayer = class {
       this.apiVastTagUrl = tag;
     }
   }
-  async handleAdStart(_marker) {
+  async handleAdStart(marker) {
     const scheduled = this.findCurrentOrNextBreak(
       this.video.currentTime * 1e3
     );
-    const tags = this.selectVastTagsForBreak(scheduled);
-    let vastTagUrl;
-    let adsNumber = 1;
-    if (this.apiVastTagUrl) {
-      vastTagUrl = this.apiVastTagUrl;
-      if (this.vastConfig) {
-        const isHls = this.config.src.includes(".m3u8") || this.config.src.includes("hls");
-        if (isHls && this.vastConfig.cue_tones?.number_ads) {
-          adsNumber = this.vastConfig.cue_tones.number_ads;
-        } else if (!isHls && this.vastConfig.timer_vod?.number_ads) {
-          adsNumber = this.vastConfig.timer_vod.number_ads;
+    let targetDurationMs = this.expectedAdBreakDurationMs;
+    if (!targetDurationMs && scheduled?.durationMs != null) {
+      targetDurationMs = scheduled.durationMs;
+    }
+    if (!targetDurationMs && marker.durationSeconds != null) {
+      targetDurationMs = marker.durationSeconds * 1e3;
+    }
+    this.currentAdBreakTargetDurationMs = targetDurationMs;
+    this.cumulativeAdDurationMs = 0;
+    if (this.config.debugAdTiming) {
+      console.log(
+        "[StormcloudVideoPlayer] Starting ad break with target duration:",
+        {
+          targetDurationMs,
+          scte35Duration: marker.durationSeconds,
+          scheduledDuration: scheduled?.durationMs
         }
-      }
-      this.adPodQueue = new Array(adsNumber - 1).fill(vastTagUrl);
-      this.currentAdIndex = 0;
-      this.totalAdsInBreak = adsNumber;
-      if (this.config.debugAdTiming) {
-        console.log(
-          `[StormcloudVideoPlayer] Using API VAST tag with ${adsNumber} ads:`,
-          vastTagUrl
-        );
-      }
-    } else if (tags && tags.length > 0) {
-      vastTagUrl = tags[0];
-      const rest = tags.slice(1);
-      this.adPodQueue = rest;
-      this.currentAdIndex = 0;
-      this.totalAdsInBreak = tags.length;
-      if (this.config.debugAdTiming) {
-        console.log(
-          "[StormcloudVideoPlayer] Using scheduled VAST tag:",
-          vastTagUrl
-        );
-      }
-    } else {
+      );
+    }
+    const adQueue = await this.buildAdQueueForDuration(targetDurationMs);
+    if (adQueue.length === 0) {
       if (this.config.debugAdTiming) {
-        console.log("[StormcloudVideoPlayer] No VAST tag available for ad");
+        console.log("[StormcloudVideoPlayer] No ads available for ad break");
       }
       return;
     }
-    if (vastTagUrl) {
-      this.showAds = true;
-      this.currentAdIndex++;
-      await this.playSingleAd(vastTagUrl);
+    this.adPodQueue = adQueue.slice(1);
+    this.preloadedAdInfo = await this.getAdInfoForQueue(adQueue);
+    this.currentAdIndex = 0;
+    this.totalAdsInBreak = adQueue.length;
+    this.showAds = true;
+    if (this.config.debugAdTiming) {
+      const totalEstimatedDuration = this.preloadedAdInfo.reduce(
+        (sum, ad) => sum + ad.duration,
+        0
+      );
+      console.log("[StormcloudVideoPlayer] Ad queue built:", {
+        totalAds: adQueue.length,
+        estimatedTotalDuration: totalEstimatedDuration,
+        targetDuration: targetDurationMs ? targetDurationMs / 1e3 : "unknown",
+        fillRate: targetDurationMs ? totalEstimatedDuration * 1e3 / targetDurationMs : "unknown"
+      });
     }
-    if (this.expectedAdBreakDurationMs == null && scheduled?.durationMs != null) {
-      this.expectedAdBreakDurationMs = scheduled.durationMs;
+    this.currentAdIndex++;
+    await this.playSingleAd(adQueue[0]);
+    if (targetDurationMs != null) {
+      this.expectedAdBreakDurationMs = targetDurationMs;
       this.currentAdBreakStartWallClockMs = this.currentAdBreakStartWallClockMs ?? Date.now();
-      this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
+      this.scheduleAdStopCountdown(targetDurationMs);
     }
   }
   findCurrentOrNextBreak(nowMs) {
@@ -1551,25 +1683,89 @@ var StormcloudVideoPlayer = class {
         "[StormcloudVideoPlayer] Handling ad failure - resuming content"
       );
     }
+    this.endAdBreak();
+    if (this.video.paused) {
+      this.video.play().catch(() => {
+        if (this.config.debugAdTiming) {
+          console.error(
+            "[StormcloudVideoPlayer] Failed to resume video after ad failure"
+          );
+        }
+      });
+    }
+  }
+  endAdBreak() {
+    if (this.config.debugAdTiming) {
+      const targetDuration = this.currentAdBreakTargetDurationMs ? this.currentAdBreakTargetDurationMs / 1e3 : "unknown";
+      const actualDuration = this.cumulativeAdDurationMs / 1e3;
+      const fillRate = this.currentAdBreakTargetDurationMs ? (this.cumulativeAdDurationMs / this.currentAdBreakTargetDurationMs * 100).toFixed(1) : "unknown";
+      console.log("[StormcloudVideoPlayer] Ad break ended:", {
+        targetDurationSeconds: targetDuration,
+        actualDurationSeconds: actualDuration,
+        fillRate: `${fillRate}%`,
+        totalAdsPlayed: this.currentAdIndex
+      });
+    }
     this.inAdBreak = false;
     this.expectedAdBreakDurationMs = void 0;
     this.currentAdBreakStartWallClockMs = void 0;
+    this.currentAdBreakTargetDurationMs = void 0;
+    this.cumulativeAdDurationMs = 0;
     this.clearAdStartTimer();
     this.clearAdStopTimer();
     this.clearAdFailsafeTimer();
     this.adPodQueue = [];
+    this.preloadedAdInfo = [];
     this.showAds = false;
     this.currentAdIndex = 0;
     this.totalAdsInBreak = 0;
-    if (this.video.paused) {
-      this.video.play().catch(() => {
+  }
+  shouldContinueAdBreak(remainingMs) {
+    if (remainingMs > 500) {
+      return true;
+    }
+    if (this.currentAdBreakTargetDurationMs) {
+      const targetRemainingMs = this.currentAdBreakTargetDurationMs - this.cumulativeAdDurationMs;
+      const minAdDuration = this.config.minAdDurationMs ?? 5e3;
+      if (targetRemainingMs > minAdDuration) {
         if (this.config.debugAdTiming) {
-          console.error(
-            "[StormcloudVideoPlayer] Failed to resume video after ad failure"
+          console.log(
+            `[StormcloudVideoPlayer] Target duration not filled, continuing. Remaining: ${targetRemainingMs}ms`
           );
         }
-      });
+        return true;
+      }
+    }
+    return false;
+  }
+  canRequestMoreAds() {
+    const maxAdsPerBreak = this.config.maxAdsPerBreak ?? 10;
+    if (this.currentAdIndex >= maxAdsPerBreak) {
+      return false;
+    }
+    return !!this.apiVastTagUrl;
+  }
+  async requestAdditionalAds() {
+    if (!this.currentAdBreakTargetDurationMs || !this.apiVastTagUrl) {
+      throw new Error(
+        "Cannot request additional ads without target duration and VAST URL"
+      );
     }
+    const remainingDurationMs = this.currentAdBreakTargetDurationMs - this.cumulativeAdDurationMs;
+    const estimatedAdDurationMs = this.getEstimatedAdDuration() * 1e3;
+    if (remainingDurationMs < estimatedAdDurationMs * 0.5) {
+      throw new Error("Not enough time remaining for additional ads");
+    }
+    if (this.config.debugAdTiming) {
+      console.log(
+        `[StormcloudVideoPlayer] Requesting additional ads for remaining ${remainingDurationMs}ms`
+      );
+    }
+    this.adPodQueue.push(this.apiVastTagUrl);
+    this.totalAdsInBreak++;
+    const next = this.adPodQueue.shift();
+    this.currentAdIndex++;
+    await this.playSingleAd(next);
   }
   startAdFailsafeTimer() {
     this.clearAdFailsafeTimer();
@@ -1603,6 +1799,109 @@ var StormcloudVideoPlayer = class {
     }
     return [b.vastTagUrl];
   }
+  async buildAdQueueForDuration(targetDurationMs) {
+    const adQueue = [];
+    let baseVastTagUrl = this.apiVastTagUrl;
+    if (!baseVastTagUrl) {
+      const scheduled = this.findCurrentOrNextBreak(
+        this.video.currentTime * 1e3
+      );
+      const scheduledTags = this.selectVastTagsForBreak(scheduled);
+      if (scheduledTags && scheduledTags.length > 0) {
+        baseVastTagUrl = scheduledTags[0];
+      }
+    }
+    if (!baseVastTagUrl) {
+      return adQueue;
+    }
+    if (!targetDurationMs) {
+      let adsNumber = 1;
+      if (this.vastConfig) {
+        const isHls = this.config.src.includes(".m3u8") || this.config.src.includes("hls");
+        if (isHls && this.vastConfig.cue_tones?.number_ads) {
+          adsNumber = this.vastConfig.cue_tones.number_ads;
+        } else if (!isHls && this.vastConfig.timer_vod?.number_ads) {
+          adsNumber = this.vastConfig.timer_vod.number_ads;
+        }
+      }
+      return new Array(adsNumber).fill(baseVastTagUrl);
+    }
+    const targetDurationSeconds = targetDurationMs / 1e3;
+    let cumulativeDurationSeconds = 0;
+    const maxAdsToTry = 10;
+    let adsAdded = 0;
+    if (this.config.debugAdTiming) {
+      console.log(
+        `[StormcloudVideoPlayer] Attempting to fill ${targetDurationSeconds}s with ads`
+      );
+    }
+    while (cumulativeDurationSeconds < targetDurationSeconds && adsAdded < maxAdsToTry) {
+      adQueue.push(baseVastTagUrl);
+      adsAdded++;
+      const estimatedAdDuration = this.getEstimatedAdDuration();
+      cumulativeDurationSeconds += estimatedAdDuration;
+      if (this.config.debugAdTiming) {
+        console.log(
+          `[StormcloudVideoPlayer] Added ad ${adsAdded}, cumulative duration: ${cumulativeDurationSeconds}s`
+        );
+      }
+      const remainingDuration = targetDurationSeconds - cumulativeDurationSeconds;
+      const toleranceSeconds = (this.config.adBreakGapToleranceMs ?? 2e3) / 1e3;
+      if (remainingDuration < estimatedAdDuration && remainingDuration >= -toleranceSeconds) {
+        if (this.config.debugAdTiming) {
+          console.log(
+            `[StormcloudVideoPlayer] Within tolerance, adding final ad. Overage: ${-remainingDuration}s`
+          );
+        }
+        break;
+      }
+      if (remainingDuration < estimatedAdDuration && remainingDuration < -toleranceSeconds) {
+        if (this.config.debugAdTiming) {
+          console.log(
+            `[StormcloudVideoPlayer] Would exceed duration by too much, stopping at ${adsAdded} ads`
+          );
+        }
+        break;
+      }
+    }
+    return adQueue;
+  }
+  getEstimatedAdDuration() {
+    if (this.vastConfig) {
+      return 15;
+    }
+    return 30;
+  }
+  async getAdInfoForQueue(adQueue) {
+    if (this.config.enableAdPreloading === false) {
+      if (this.config.debugAdTiming) {
+        console.log(
+          "[StormcloudVideoPlayer] Ad preloading disabled, using estimates"
+        );
+      }
+      return adQueue.map((vastTagUrl) => ({
+        duration: this.getEstimatedAdDuration(),
+        vastTagUrl,
+        isPreloaded: false
+      }));
+    }
+    try {
+      const adInfos = await this.ima.preloadAds(adQueue);
+      return adInfos;
+    } catch (error) {
+      if (this.config.debugAdTiming) {
+        console.warn(
+          "[StormcloudVideoPlayer] Failed to preload ads, using estimates:",
+          error
+        );
+      }
+      return adQueue.map((vastTagUrl) => ({
+        duration: this.getEstimatedAdDuration(),
+        vastTagUrl,
+        isPreloaded: false
+      }));
+    }
+  }
   getRemainingAdMs() {
     if (this.expectedAdBreakDurationMs == null || this.currentAdBreakStartWallClockMs == null)
       return 0;
@@ -1782,6 +2081,7 @@ var StormcloudVideoPlayerComponent = React.memo(
     const [isLoading, setIsLoading] = React.useState(true);
     const [isBuffering, setIsBuffering] = React.useState(false);
     const [showCenterPlay, setShowCenterPlay] = React.useState(false);
+    const [showLicenseWarning, setShowLicenseWarning] = React.useState(false);
     const formatTime = (seconds) => {
       if (!isFinite(seconds)) return "0:00:00";
       const hours = Math.floor(seconds / 3600);
@@ -1839,6 +2139,15 @@ var StormcloudVideoPlayerComponent = React.memo(
       if (typeof window === "undefined") return;
       const el = videoRef.current;
       if (!el || !src) return;
+      if (!licenseKey) {
+        setShowLicenseWarning(true);
+        setIsLoading(false);
+        console.warn(
+          "StormcloudVideoPlayer: License key is required but not provided. Please set the licenseKey prop to use the player."
+        );
+        return;
+      }
+      setShowLicenseWarning(false);
       if (playerRef.current) {
         try {
           playerRef.current.destroy();
@@ -2162,7 +2471,60 @@ var StormcloudVideoPlayerComponent = React.memo(
                 )
               }
             ),
-            showCenterPlay && !isLoading && !isBuffering && !adStatus.showAds && /* @__PURE__ */ jsx(
+            showLicenseWarning && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  zIndex: 25,
+                  background: "linear-gradient(135deg, rgba(220, 38, 38, 0.95) 0%, rgba(185, 28, 28, 0.9) 100%)",
+                  color: "white",
+                  padding: "24px 32px",
+                  borderRadius: "16px",
+                  backdropFilter: "blur(20px)",
+                  border: "2px solid rgba(255, 255, 255, 0.2)",
+                  boxShadow: "0 20px 60px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.2)",
+                  textAlign: "center",
+                  maxWidth: "400px",
+                  margin: "0 16px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "20px",
+                        fontWeight: "bold",
+                        marginBottom: "12px",
+                        color: "#ffffff",
+                        textShadow: "0 2px 4px rgba(0, 0, 0, 0.5)"
+                      },
+                      children: "License Key Required"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "14px",
+                        lineHeight: "1.5",
+                        color: "rgba(255, 255, 255, 0.9)",
+                        textShadow: "0 1px 2px rgba(0, 0, 0, 0.3)"
+                      },
+                      children: [
+                        "Please provide a valid license key to use the Stormcloud Video Player.",
+                        /* @__PURE__ */ jsx("br", {}),
+                        "Contact your administrator for licensing information."
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            showCenterPlay && !isLoading && !isBuffering && !showLicenseWarning && !adStatus.showAds && /* @__PURE__ */ jsx(
               "div",
               {
                 onClick: handleCenterPlayClick,
@@ -2213,7 +2575,7 @@ var StormcloudVideoPlayerComponent = React.memo(
                 )
               }
             ),
-            shouldShowEnhancedControls ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+            shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
               "div",
               {
                 style: {
@@ -2678,7 +3040,7 @@ var StormcloudVideoPlayerComponent = React.memo(
                   )
                 ]
               }
-            ) }) : showCustomControls && /* @__PURE__ */ jsxs(
+            ) }) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ jsxs(
               "div",
               {
                 style: {