@builder.io/sdk-svelte 0.0.1-26 → 0.0.1-29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-26",
+  "version": "0.0.1-29",
   "type": "module",
   "files": [
     "src"

package/src/blocks/video/video.svelte

@@ -1,23 +1,54 @@
 <script>
+  export let autoPlay;
+  export let muted;
+  export let controls;
+  export let loop;
+  export let playsInline;
   export let attributes;
   export let fit;
   export let position;
   export let video;
   export let posterImage;
-  export let autoPlay;
-  export let muted;
-  export let controls;
-  export let loop;
 
   function mitosis_styling(node, vars) {
     Object.entries(vars).forEach(([p, v]) => {
       node.style[p] = v;
     });
   }
+
+  $: videoProps = () => {
+    return {
+      ...(autoPlay === true
+        ? {
+            autoPlay: true,
+          }
+        : {}),
+      ...(muted === true
+        ? {
+            muted: true,
+          }
+        : {}),
+      ...(controls === true
+        ? {
+            controls: true,
+          }
+        : {}),
+      ...(loop === true
+        ? {
+            loop: true,
+          }
+        : {}),
+      ...(playsInline === true
+        ? {
+            playsInline: true,
+          }
+        : {}),
+    };
+  };
 </script>
 
 <video
-  {...attributes}
+  {...videoProps()}
   use:mitosis_styling={{
     width: "100%",
     height: "100%",
@@ -28,11 +59,6 @@
     // not have the video overflow
     borderRadius: 1,
   }}
-  preload="none"
   src={video || "no-src"}
   poster={posterImage}
-  {autoPlay}
-  {muted}
-  {controls}
-  {loop}
 />

package/src/components/render-content/render-content.svelte

@@ -27,6 +27,7 @@
   export let context;
   export let customComponents;
   export let model;
+  export let canTrack;
   export let apiKey;
 
   const processMessage = function processMessage(event) {
@@ -71,6 +72,14 @@
     }
   };
 
+  const onClick = function onClick(_event) {
+    if (useContent() && canTrack !== false) {
+      track("click", {
+        contentId: useContent().id,
+      });
+    }
+  };
+
   const evalExpression = function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
       evaluate({
@@ -203,7 +212,7 @@
         );
       }
 
-      if (useContent()) {
+      if (useContent() && canTrack !== false) {
         track("impression", {
           contentId: useContent().id,
         });
@@ -262,11 +271,9 @@
 {#if useContent()}
   <div
     on:click={(event) => {
-      track("click", {
-        contentId: useContent().id,
-      });
+      onClick(event);
     }}
-    data-builder-content-id={useContent?.()?.id}
+    builder-content-id={useContent?.()?.id}
   >
     {#if shouldRenderContentStyles()}
       <RenderContentStyles