@datocms/astro 0.1.0 → 0.1.1

package/components/Image/buildSrcSet.ts

@@ -0,0 +1,45 @@
+
+const bogusBaseUrl = "https://example.com/";
+
+export const buildSrcSet = (
+  src: string | null | undefined,
+  width: number | undefined,
+  candidateMultipliers: number[]
+) => {
+  if (!(src && width)) {
+    return undefined;
+  }
+
+  return candidateMultipliers
+    .map((multiplier) => {
+      const url = new URL(src, bogusBaseUrl);
+
+      if (multiplier !== 1) {
+        url.searchParams.set("dpr", `${multiplier}`);
+        const maxH = url.searchParams.get("max-h");
+        const maxW = url.searchParams.get("max-w");
+        if (maxH) {
+          url.searchParams.set(
+            "max-h",
+            `${Math.floor(Number.parseInt(maxH) * multiplier)}`
+          );
+        }
+        if (maxW) {
+          url.searchParams.set(
+            "max-w",
+            `${Math.floor(Number.parseInt(maxW) * multiplier)}`
+          );
+        }
+      }
+
+      const finalWidth = Math.floor(width * multiplier);
+
+      if (finalWidth < 50) {
+        return null;
+      }
+
+      return `${url.toString().replace(bogusBaseUrl, "/")} ${finalWidth}w`;
+    })
+    .filter(Boolean)
+    .join(",");
+};

package/components/Image/index.astro

@@ -0,0 +1,115 @@
+---
+import type { ResponsiveImageType } from "../../lib/types";
+import { buildSrcSet } from './buildSrcSet';
+
+type StyleAttribute = astroHTML.JSX.HTMLAttributes['style'];
+type StyleAttributeAsObject = Exclude<StyleAttribute, string>;
+
+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[];
+}
+
+const {
+  data,
+  pictureClass,
+  pictureStyle,
+  imgClass,
+  imgStyle,
+  priority,
+  usePlaceholder,
+  sizes,
+  srcSetCandidates,
+} = Astro.props;
+
+const placeholderStyle: StyleAttributeAsObject | undefined =
+  usePlaceholder && data.base64
+    ? {
+        backgroundImage: `url("${data.base64}")`,
+        backgroundSize: "cover",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "50% 50%",
+        color: "transparent",
+      }
+    : usePlaceholder && data.bgColor
+      ? { backgroundColor: data.bgColor ?? undefined, color: "transparent" }
+      : undefined;
+
+const { width } = data;
+
+const height =
+  data.height ?? Math.round(data.aspectRatio ? width / data.aspectRatio : 0);
+
+const sizingStyle = {
+  aspectRatio: `${width} / ${height}`,
+  width: "100%",
+  maxWidth: `${width}px`,
+  height: "auto",
+};
+---
+
+<picture data-testid="picture" class={pictureClass} style={pictureStyle}>
+  {
+    data.webpSrcSet && (
+      <source
+        srcset={data.webpSrcSet}
+        sizes={sizes ?? data.sizes ?? null}
+        type="image/webp"
+      />
+    )
+  }
+  <source
+    srcset={data.srcSet ??
+      buildSrcSet(data.src, data.width, srcSetCandidates) ??
+      null}
+    sizes={sizes ?? data.sizes ?? null}
+  />
+  {
+    data.src && (
+      <img
+        src={data.src}
+        alt={data.alt ?? ""}
+        title={data.title ?? null}
+        fetchpriority={priority ? "high" : undefined}
+        loading={priority ? undefined : "lazy"}
+        class={imgClass}
+        style={{
+          ...placeholderStyle,
+          ...sizingStyle,
+          ...imgStyle,
+        }}
+        data-testid="img"
+      />
+    )
+  }
+</picture>

package/components/VideoPlayer/index.astro

@@ -0,0 +1,101 @@
+---
+import "@mux/mux-player";
+import type { Video } from "../../lib/types";
+import type {
+  CmcdTypes,
+  MaxResolutionValue,
+  MinResolutionValue,
+  PlaybackTypes,
+  RenditionOrderValue,
+  StreamTypes,
+} from "@mux/playback-core/.";
+import type MuxPlayerElement from "@mux/mux-player";
+import type { Tokens } from "@mux/mux-player";
+import { useVideoPlayer } from "../../lib";
+import { toHTMLAttrs } from "./toHtmlArgs";
+
+type ValueOf<T> = T[keyof T];
+
+type StyleAttribute = astroHTML.JSX.HTMLAttributes["style"];
+
+interface Props {
+  data: Video;
+  class?: string;
+  style?: StyleAttribute;
+
+  _hlsConfig?: MuxPlayerElement["_hlsConfig"];
+  accentColor?: string;
+  audio?: boolean;
+  autoPlay?: boolean | string;
+  backwardSeekOffset?: number;
+  beaconCollectionDomain?: string;
+  crossOrigin?: string;
+  currentTime?: number;
+  customDomain?: string;
+  debug?: boolean;
+  defaultDuration?: number;
+  defaultHiddenCaptions?: boolean;
+  defaultShowRemainingTime?: boolean;
+  defaultStreamType?: ValueOf<StreamTypes>;
+  disableCookies?: boolean;
+  disablePictureInPicture?: boolean;
+  envKey?: string;
+  extraSourceParams?: Record<string, any>;
+  forwardSeekOffset?: number;
+  hotkeys?: string;
+  loop?: boolean;
+  maxResolution?: MaxResolutionValue;
+  metadata?: Record<string, any>;
+  metadataVideoId?: string;
+  metadataVideoTitle?: string;
+  metadataViewerUserId?: string;
+  minResolution?: MinResolutionValue;
+  muted?: boolean;
+  nohotkeys?: string;
+  noVolumePref?: boolean;
+  paused?: boolean;
+  placeholder?: string;
+  playbackId?: string;
+  playbackRate?: number;
+  playbackRates?: number[];
+  playerSoftwareName?: string;
+  playerSoftwareVersion?: string;
+  playsInline?: boolean;
+  poster?: string;
+  preferCmcd?: CmcdTypes;
+  preferPlayback?: PlaybackTypes;
+  preload?: string;
+  primaryColor?: string;
+  renditionOrder?: RenditionOrderValue;
+  secondaryColor?: string;
+  src?: string;
+  startTime?: number;
+  storyboardSrc?: string;
+  streamType: StreamTypes | "ll-live" | "live:dvr" | "ll-live:dvr";
+  argetLiveWindow?: number;
+  theme?: string;
+  themeProps?: Record<string, any>;
+  thumbnailTime?: number;
+  title?: string;
+  tokens?: Tokens;
+  volume?: number;
+}
+
+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>

package/components/VideoPlayer/toHtmlArgs.ts

@@ -0,0 +1,70 @@
+
+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;
+    },
+    {},
+  );
+};

package/lib/index.ts

@@ -1 +1,4 @@
-export { default as Foobar } from "../components/Foobar.astro";
+export { default as Image } from "../components/Image/index.astro";
+export { default as VideoPlayer } from "../components/VideoPlayer/index.astro";
+export { useVideoPlayer } from './useVideoPlayer';
+

package/lib/types.ts

@@ -1 +1,45 @@
-export type Foo = '1';
+type Maybe<T> = T | null;
+type Possibly<T> = Maybe<T> | undefined;
+
+export type ResponsiveImageType = {
+  /** A base64-encoded thumbnail to offer during image loading */
+  base64?: Maybe<string>;
+  /** The height of the image */
+  height?: Maybe<number>;
+  /** The width of the image */
+  width: number;
+  /** The aspect ratio (width/height) of the image */
+  aspectRatio?: number;
+  /** The HTML5 `sizes` attribute for the image */
+  sizes?: Maybe<string>;
+  /** The fallback `src` attribute for the image */
+  src?: Maybe<string>;
+  /** The HTML5 `srcSet` attribute for the image */
+  srcSet?: Maybe<string>;
+  /** The HTML5 `srcSet` attribute for the image in WebP format, for browsers that support the format */
+  webpSrcSet?: Maybe<string>;
+  /** The background color for the image placeholder */
+  bgColor?: Maybe<string>;
+  /** Alternate text (`alt`) for the image */
+  alt?: Maybe<string>;
+  /** Title attribute (`title`) for the image */
+  title?: Maybe<string>;
+};
+
+export type Video = {
+  /** Title attribute (`title`) for the video */
+  title?: Possibly<string>;
+  /** The height of the video */
+  height?: Possibly<number>;
+  /** The width of the video */
+  width?: Possibly<number>;
+  /** The MUX playbaack ID */
+  muxPlaybackId?: Possibly<string>;
+  /** The MUX playbaack ID */
+  playbackId?: Possibly<string>;
+  /** A data: URI containing a blurhash for the video  */
+  blurUpThumb?: Possibly<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;
+};

package/lib/useVideoPlayer/index.ts

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

package/package.json

@@ -1,44 +1,56 @@
 {
-	"name": "@datocms/astro",
-	"description": "A set of components and utilities to work faster with DatoCMS in Astro projects.",
-	"type": "module",
-	"version": "0.1.0",
-	"sideEffects": false,
-	"repository": {
-		"type": "git",
-		"url": "git://github.com/datocms/astro-datocms.git"
-	},
-	"homepage": "https://github.com/datocms/astro-datocms",
-	"license": "MIT",
-	"author": "Stefano Verna <s.verna@datocms.com>",
-	"contributors": ["Silvano Stralla <silvano@datocms.com>"],
-	"keywords": [
-		"astro",
-		"withastro",
-		"astro-component",
-		"datocms",
-		"typescript",
-		"ui"
-	],
-	"exports": {
-		".": "./lib/index.ts",
-		"./types": "./lib/types.ts",
-		"./utils": "./lib/utils.ts"
-	},
-	"typesVersions": {
-		"*": {
-			"*": ["lib/*"]
-		}
-	},
-	"engines": {
-		"node": ">=18.0.0"
-	},
-	"files": ["components", "lib"],
-	"scripts": {
-		"check": "astro check --root components"
-	},
-	"dependencies": {
-		"@astrojs/check": "^0.9.1",
-		"typescript": "^5.5.4"
-	}
+  "name": "@datocms/astro",
+  "description": "A set of components and utilities to work faster with DatoCMS in Astro projects.",
+  "type": "module",
+  "version": "0.1.1",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/datocms/astro-datocms.git"
+  },
+  "homepage": "https://github.com/datocms/astro-datocms",
+  "license": "MIT",
+  "author": "Stefano Verna <s.verna@datocms.com>",
+  "contributors": ["Silvano Stralla <silvano@datocms.com>"],
+  "keywords": [
+    "astro",
+    "withastro",
+    "astro-component",
+    "datocms",
+    "typescript",
+    "ui"
+  ],
+  "exports": {
+    ".": "./lib/index.ts",
+    "./types": "./lib/types.ts",
+    "./utils": "./lib/utils.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["lib/*"]
+    }
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": ["components", "lib"],
+  "scripts": {
+    "check": "astro check --root components"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.1",
+    "typescript": "^5.5.4"
+  },
+  "peerDependencies": {
+    "@mux/mux-player": "*"
+  },
+  "peerDependenciesMeta": {
+    "@mux/mux-player": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@mux/mux-player": "*",
+    "@mux/playback-core": "^0.25.1"
+  }
 }

package/components/Foobar.astro

@@ -1 +0,0 @@
-<h1>Foobar</h1>