@hanzo/ui 3.8.27 → 3.8.29

package/blocks/components/image-block.tsx

@@ -75,6 +75,7 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
         </div>
       )
     }
+      // TODO use constraint
     else if (!specified('mobile-no-scale')) {
       if (props?.style?.width === 'auto' && typeof props.style.height === 'number' ) {
         props.style.height = props.style.height *.75 

package/blocks/components/video-block.tsx

@@ -51,7 +51,7 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
   }
 
   const b = block as VideoBlock
-  const ar = asNum(b.dim.md.w) / asNum(b.dim.md.h)
+  const ar = b.dim.md.w / b.dim.md.h
   if (agent === 'phone') {
     if (b.sizing?.mobile?.vw) {
       // serverside, or at least while the video is loading,
@@ -122,6 +122,10 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
   const videoDims = b.dim as TShirtDimensions
   const dim = ((size && size in videoDims) ? videoDims[size] : videoDims.md) as Dimensions
   const conDim = (constrainTo ? constrain(dim, constrainTo) : dim) 
+  if (b.sources?.[0] === '/assets/commerce/silver/product/luxsilver.mp4') {
+    console.log("VIDEO BLOCK, dim: ", dim)
+    console.log("VIDEO BLOCK, const dim: ", conDim)
+  }
   return usePoster ? (
     <Image src={b.poster!} alt='image' width={conDim.w} height={conDim.h} className={className}/>
   ) : (

package/blocks/def/card-block.ts

@@ -14,7 +14,7 @@ interface CardBlock extends Block {
   byline?: string
   icon?: Icon // for title area
   iconAfter?: boolean
-  media?: ImageBlock | VideoBlock
+  media?: ImageBlock | VideoBlock // TODO: Media Stack
   content?: React.ReactNode
   cta?: CTABlock
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.8.27",
+  "version": "3.8.29",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/primitives/image.tsx

@@ -67,7 +67,6 @@ const Image: React.FC<{
   return (fullWidth) ? (
     <div className='relative flex flex-col items-center justify-center w-full'>
       <NextImage 
-        data-vaul-no-drag 
         src={src} 
         alt={alt} 
         {...toSpread} 
@@ -80,7 +79,6 @@ const Image: React.FC<{
     <NextImage 
       src={src} 
       alt={alt} 
-      data-vaul-no-drag 
       {...toSpread} 
       priority={preload} 
       loading={preload ? 'eager' : 'lazy'} 

package/primitives/video-player.tsx

@@ -12,7 +12,7 @@ const VideoPlayer = React.forwardRef<HTMLVideoElement, VideoProps>(
 }, ref) => {
   
   return (
-    <video ref={ref} {...rest}  data-vaul-no-drag >
+    <video ref={ref} {...rest} >
     {sources.map((source, index) => (  
       <source key={index} src={source} />
     ))} 

package/types/media-stack-def.ts

@@ -18,6 +18,11 @@ interface MediaStackDef {
   video?: VideoDef
   animation?: AnimationDef
   mediaTransform?: MediaTransform
+    /** prefered order of precedence.  
+     * If an type is missing, it will not be used.
+     * default (inMediaStack component): ['a', 'v', 'i']
+     * */ 
+  order?: ('a' | 'v' | 'i')[]  
 }
 
 export type {