@datocms/astro 0.1.5 → 0.1.7

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@datocms/astro",
 	"description": "A set of components and utilities to work faster with DatoCMS in Astro projects.",
 	"type": "module",
-	"version": "0.1.5",
+	"version": "0.1.7",
 	"sideEffects": false,
 	"repository": {
 		"type": "git",

package/src/Image/Image.astro

@@ -1,45 +1,9 @@
 ---
-import type { JSX } from 'astro/jsx-runtime';
-import type { ResponsiveImageType } from './types';
-import { buildSrcSet } from './buildSrcSet';
 
-type StyleAttribute = JSX.HTMLAttributes['style'];
-type StyleAttributeAsObject = Exclude<StyleAttribute, string>;
+import { buildSrcSet } from './buildSrcSet';
+import type { ImageProps } from './types';
 
-interface Props {
-  /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
-  data: ResponsiveImageType;
-  /** Additional CSS class for the root <picture> tag */
-  pictureClass?: string;
-  /** Additional CSS rules to add to the root <picture> tag */
-  pictureStyle?: StyleAttribute;
-  /** Additional CSS class for the <img> tag */
-  imgClass?: string;
-  /** Additional CSS rules to add to the <img> tag */
-  imgStyle?: StyleAttributeAsObject;
-  /**
-   * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
-   * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
-   * Should only be used when the image is visible above the fold.
-   **/
-  priority?: boolean;
-  /** Whether the component should use a blurred image placeholder */
-  usePlaceholder?: boolean;
-  /**
-   * The HTML5 `sizes` attribute for the image
-   *
-   * Learn more about srcset and sizes:
-   * -> https://web.dev/learn/design/responsive-images/#sizes
-   * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
-   **/
-  sizes?: HTMLImageElement["sizes"];
-  /**
-   * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
-   *
-   * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
-   **/
-  srcSetCandidates?: number[];
-}
+interface Props extends ImageProps {};
 
 const {
   data,
@@ -50,10 +14,10 @@ const {
   priority,
   usePlaceholder = true,
   sizes,
-  srcSetCandidates,
+  srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
 } = Astro.props;
 
-const placeholderStyle: StyleAttributeAsObject | undefined =
+const placeholderStyle =
   usePlaceholder && data.base64
     ? {
         backgroundImage: `url("${data.base64}")`,

package/src/Image/buildSrcSet.ts

@@ -10,7 +10,7 @@ export const buildSrcSet = (
     return undefined;
   }
 
-  return candidateMultipliers
+  return (candidateMultipliers || [])
     .map((multiplier) => {
       const url = new URL(src, bogusBaseUrl);
 

package/src/Image/types.ts

@@ -1,3 +1,8 @@
+import type { JSX } from 'astro/jsx-runtime';
+
+type StyleAttribute = JSX.HTMLAttributes['style'];
+type StyleAttributeAsObject = Exclude<StyleAttribute, string>;
+
 type Maybe<T> = T | null;
 
 export type ResponsiveImageType = {
@@ -24,3 +29,38 @@ export type ResponsiveImageType = {
   /** Title attribute (`title`) for the image */
   title?: Maybe<string>;
 };
+
+export type ImageProps = {
+  /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
+  data: ResponsiveImageType;
+  /** Additional CSS class for the root <picture> tag */
+  pictureClass?: string;
+  /** Additional CSS rules to add to the root <picture> tag */
+  pictureStyle?: StyleAttribute;
+  /** Additional CSS class for the <img> tag */
+  imgClass?: string;
+  /** Additional CSS rules to add to the <img> tag */
+  imgStyle?: StyleAttributeAsObject;
+  /**
+   * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
+   * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
+   * Should only be used when the image is visible above the fold.
+   **/
+  priority?: boolean;
+  /** Whether the component should use a blurred image placeholder */
+  usePlaceholder?: boolean;
+  /**
+   * The HTML5 `sizes` attribute for the image
+   *
+   * Learn more about srcset and sizes:
+   * -> https://web.dev/learn/design/responsive-images/#sizes
+   * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+   **/
+  sizes?: HTMLImageElement["sizes"];
+  /**
+   * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
+   *
+   * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+   **/
+  srcSetCandidates?: number[];
+}

package/src/VideoPlayer/VideoPlayer.astro

@@ -0,0 +1,30 @@
+---
+import type { VideoPlayerProps } from "./types";
+import { useVideoPlayer } from "../useVideoPlayer";
+import { toNativeProps } from "./utils";
+
+interface Props extends VideoPlayerProps {}
+
+const {
+  data,
+  disableCookies = true,
+  preload = "metadata",
+  ...otherProps
+} = Astro.props;
+
+const computedProps = {
+  ...useVideoPlayer({ data }),
+  disableCookies,
+  preload,
+};
+---
+
+<mux-player
+  stream-type="on-demand"
+  {...toNativeProps(computedProps)}
+  {...toNativeProps(otherProps)}
+></mux-player>
+
+<script>
+  import "@mux/mux-player";
+</script>

package/src/VideoPlayer/index.ts

@@ -1,2 +1,2 @@
-import Component from "./index.astro";
+import Component from "./VideoPlayer.astro";
 export default Component;

package/src/VideoPlayer/types.ts

@@ -1,20 +1,72 @@
+import type { MuxMediaProps } from "@mux/playback-core";
+import type { JSX } from 'astro/jsx-runtime';
+
+type StyleAttribute = JSX.HTMLAttributes["style"];
+
 type Maybe<T> = T | null;
-type Possibly<T> = Maybe<T> | undefined;
 
 export type Video = {
   /** Title attribute (`title`) for the video */
-  title?: Possibly<string>;
+  title?: Maybe<string>;
   /** The height of the video */
-  height?: Possibly<number>;
+  height?: Maybe<number>;
   /** The width of the video */
-  width?: Possibly<number>;
-  /** The MUX playbaack ID */
-  muxPlaybackId?: Possibly<string>;
-  /** The MUX playbaack ID */
-  playbackId?: Possibly<string>;
+  width?: Maybe<number>;
+  /** The MUX playback ID */
+  muxPlaybackId?: Maybe<string>;
+  /** The MUX playback ID */
+  playbackId?: Maybe<string>;
   /** A data: URI containing a blurhash for the video  */
-  blurUpThumb?: Possibly<string>;
+  blurUpThumb?: Maybe<string>;
   /** Other data can be passed, but they have no effect on rendering the player */
   // biome-ignore lint/suspicious/noExplicitAny: we intentionally want to allow to add any other value to this video object
   [k: string]: any;
+};
+
+// Extracted from mux-player-react
+
+type VideoApiAttributes = {
+  currentTime: number;
+  volume: number;
+  paused: boolean;
+  src: string | null;
+  poster: string;
+  playbackRate: number;
+  playsInline: boolean;
+  preload: string;
+  crossOrigin: string;
+  autoPlay: boolean | string;
+  loop: boolean;
+  muted: boolean;
+  class?: string;
+  style?: StyleAttribute;
+};
+
+// Extracted from mux-player-react
+
+export type MuxPlayerProps = Partial<MuxMediaProps> & Partial<VideoApiAttributes> & {
+  hotkeys?: string;
+  nohotkeys?: boolean;
+  defaultHiddenCaptions?: boolean;
+  forwardSeekOffset?: number;
+  backwardSeekOffset?: number;
+  metadataVideoId?: string;
+  metadataVideoTitle?: string;
+  metadataViewerUserId?: string;
+  primaryColor?: string;
+  secondaryColor?: string;
+  accentColor?: string;
+  placeholder?: string;
+  playbackRates?: number[];
+  defaultShowRemainingTime?: boolean;
+  defaultDuration?: number;
+  noVolumePref?: boolean;
+  thumbnailTime?: number;
+  title?: string;
+  theme?: string;
+  themeProps?: { [k: string]: any };
+};
+
+export type VideoPlayerProps = MuxPlayerProps & {
+  data: Video;
 };

package/src/VideoPlayer/utils.ts

@@ -0,0 +1,50 @@
+// Adapted from mux-player-react
+
+const ReactPropToAttrNameMap = {
+  crossOrigin: 'crossorigin',
+  viewBox: 'viewBox',
+  playsInline: 'playsinline',
+  autoPlay: 'autoplay',
+  playbackRate: 'playbackrate',
+};
+
+type KeyTypes = string | number | symbol;
+type Maybe<T> = T | null | undefined;
+
+const isNil = (x: unknown): x is null | undefined => x === undefined;
+
+// Type Guard to determine if a given key is actually a key of some object of type T
+export const isKeyOf = <T extends {} = any>(k: KeyTypes, o: Maybe<T>): k is keyof T => {
+  if (isNil(o)) return false;
+  return k in o;
+};
+
+const toKebabCase = (string: string) => string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+
+const toNativeAttrName = (propName: string, propValue: any): string | undefined => {
+  if (typeof propValue === 'boolean' && !propValue) return undefined;
+  if (isKeyOf(propName, ReactPropToAttrNameMap)) return ReactPropToAttrNameMap[propName];
+  if (propValue === undefined) return undefined;
+  if (/[A-Z]/.test(propName)) return toKebabCase(propName);
+  return propName;
+};
+
+const toNativeAttrValue = (propValue: any, propName: string) => {
+  if (typeof propValue === 'boolean') return '';
+  return propValue;
+};
+
+export const toNativeProps = (props = {}) => {
+  return Object.entries(props).reduce<{ [k: string]: string }>((transformedProps, [propName, propValue]) => {
+    const attrName = toNativeAttrName(propName, propValue);
+
+    // prop was stripped. Don't add.
+    if (!attrName) {
+      return transformedProps;
+    }
+
+    const attrValue = toNativeAttrValue(propValue, propName);
+    transformedProps[attrName] = attrValue;
+    return transformedProps;
+  }, {});
+};

package/src/useVideoPlayer/index.ts

@@ -1,23 +1,27 @@
-import type { Video } from "VideoPlayer/types";
+import type { MuxPlayerProps, Video } from "../VideoPlayer/types";
 
 type Maybe<T> = T | null;
 type Possibly<T> = Maybe<T> | undefined;
 
-const computedTitle = (title: Maybe<string> | undefined) => {
-  return title ? { title } : undefined;
+function computedTitle(title: Possibly<string>): MuxPlayerProps {
+  return title ? { title } : {};
 };
 
-const computedPlaybackId = (
+function computedPlaybackId(
   muxPlaybackId: Possibly<string>,
   playbackId: Possibly<string>,
-) => {
-  if (!(muxPlaybackId || playbackId)) return undefined;
+): MuxPlayerProps {
+  if (!(muxPlaybackId || playbackId)) {
+    return {};
+  }
 
   return { playbackId: `${muxPlaybackId || playbackId}` };
 };
 
-const computedStyle = (width: Possibly<number>, height: Possibly<number>) => {
-  if (!(width && height)) return undefined;
+function computedStyle(width: Possibly<number>, height: Possibly<number>): MuxPlayerProps {
+  if (!(width && height)) {
+    return {};
+  }
 
   return {
     style: {
@@ -26,17 +30,17 @@ const computedStyle = (width: Possibly<number>, height: Possibly<number>) => {
   };
 };
 
-const computedPlaceholder = (blurUpThumb: Possibly<string>) => {
-  return blurUpThumb ? { placeholder: blurUpThumb } : undefined;
+function computedPlaceholder(blurUpThumb: Possibly<string>): MuxPlayerProps {
+  return blurUpThumb ? { placeholder: blurUpThumb } : {};
 };
 
 type UseVideoPlayerArgs = {
   data?: Video;
 };
 
-export const useVideoPlayer = ({
+export function useVideoPlayer({
   data,
-}: UseVideoPlayerArgs) => {
+}: UseVideoPlayerArgs): MuxPlayerProps {
   const { title, width, height, playbackId, muxPlaybackId, blurUpThumb } =
     data || {};
 

package/src/VideoPlayer/index.astro

@@ -1,38 +0,0 @@
----
-import type { MuxMediaProps } from "@mux/playback-core";
-import { toHTMLAttrs } from "./toHtmlArgs";
-import type { JSX } from 'astro/jsx-runtime';
-import type { Video } from "./types";
-import { useVideoPlayer } from "../useVideoPlayer";
-
-type StyleAttribute = JSX.HTMLAttributes["style"];
-
-interface Props extends Partial<MuxMediaProps> {
-  playbackId: string;
-  data: Video;
-  class?: string;
-  style?: StyleAttribute;
-};
-
-const {
-  data,
-  disableCookies = true,
-  preload = "metadata",
-  ...otherProps
-} = Astro.props;
-
-const computedProps = {
-  ...useVideoPlayer({ data }),
-  disableCookies,
-  preload,
-};
----
-
-<mux-player
-  stream-type="on-demand"
-  {...toHTMLAttrs(computedProps)}
-  {...toHTMLAttrs(otherProps)}></mux-player>
-
-<script>
-  import "@mux/mux-player";
-</script>

package/src/VideoPlayer/toHtmlArgs.ts

@@ -1,71 +0,0 @@
-// Extracted from https://github.com/muxinc/elements/blob/main/packages/mux-player-react/src/common/utils.ts
-
-type KeyTypes = string | number | symbol;
-type Maybe<T> = T | null;
-
-export const isNil = (x: unknown): x is null | undefined => x == undefined;
-
-// Type Guard to determine if a given key is actually a key of some object of type T
-export const isKeyOf = <T extends {} = any>(
-  k: KeyTypes,
-  o: Maybe<T> | undefined,
-): k is keyof T => {
-  if (isNil(o)) return false;
-  return k in o;
-};
-
-const PropToAttrNameMap = {
-  crossOrigin: 'crossorigin',
-  viewBox: 'viewBox',
-  playsInline: 'playsinline',
-  autoPlay: 'autoplay',
-  playbackRate: 'playbackrate',
-  playbackRates: 'playbackrates',
-};
-
-const toKebabCase = (string: string) =>
-  string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-
-export const toNativeAttrName = (
-  propName: string,
-  propValue: any,
-): string | undefined => {
-  if (typeof propValue === 'boolean' && !propValue) return undefined;
-  if (isKeyOf(propName, PropToAttrNameMap)) return PropToAttrNameMap[propName];
-  if (typeof propValue === 'undefined') return undefined;
-  if (/[A-Z]/.test(propName)) return toKebabCase(propName);
-
-  return propName;
-};
-
-export const toNativeAttrValue = (propValue: any, propName: string) => {
-  if (Array.isArray(propValue)) return propValue.join(' ');
-  if (typeof propValue === 'boolean') return propValue;
-
-  return propValue;
-};
-
-export const toHTMLAttrs = (props = {}) => {
-  return Object.entries(props).reduce<{ [k: string]: string }>(
-    (transformedProps, [propName, propValue]) => {
-      const attrName = toNativeAttrName(propName, propValue);
-
-      // Prop was stripped: don't add.
-      if (!attrName) {
-        return transformedProps;
-      }
-
-      const attrValue = toNativeAttrValue(propValue, propName);
-
-      // Prop is undefined: omit it
-      if (attrValue === undefined) {
-        return transformedProps;
-      }
-
-      transformedProps[attrName] = attrValue;
-
-      return transformedProps;
-    },
-    {},
-  );
-};