ui: minor changes to media

hanzoai · Jun 19, 2024 · 2a55611 · 2a55611
1 parent 136cb33
commit 2a55611
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 8 deletions.
diff --git a/packages/ui/blocks/components/image-block.tsx b/packages/ui/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 

diff --git a/packages/ui/blocks/components/video-block.tsx b/packages/ui/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,

diff --git a/packages/ui/blocks/def/card-block.ts b/packages/ui/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
 }

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.8.24",
+  "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/",

diff --git a/packages/ui/primitives/button.tsx b/packages/ui/primitives/button.tsx
@@ -12,6 +12,7 @@ const variant = {
   ghost: "text-foreground sm:hover:bg-level-1 sm:hover:text-accent whitespace-nowrap font-sans ",
   link: "text-foreground sm:hover:text-muted-1 font-sans ",
   linkFG: "text-foreground sm:hover:text-muted-1 font-sans ", // marker to style nav as regular link
+  linkMuted: "text-muted-1 sm:hover:text-foreground font-sans ",
 }
 
 const size = {

diff --git a/packages/ui/primitives/image.tsx b/packages/ui/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'} 

diff --git a/packages/ui/primitives/step-indicator.tsx b/packages/ui/primitives/step-indicator.tsx
@@ -43,8 +43,8 @@ const StepIndicator: React.FC<{
             style={{width: `${dotSizeRem}rem`, height: `${dotSizeRem}rem`}} 
             className={cn(
               'shrink-0 rounded-full border-[1.5px]', 
-              currentStep === index ? (muted ? 'bg-muted-3 border-muted' : 'bg-level-3 border-foreground') : '',
-              currentStep > index || currentStep === steps.length - 1 ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : ''
+              currentStep >= index ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : '',
+              //currentStep > index || currentStep === steps.length - 1 ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : ''
             )} 
           />
         </>))}

diff --git a/packages/ui/primitives/video-player.tsx b/packages/ui/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} />
     ))} 

diff --git a/packages/ui/types/media-stack-def.ts b/packages/ui/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 {