@datocms/astro 0.1.3 → 0.1.4

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.3",
+	"version": "0.1.4",
 	"sideEffects": false,
 	"repository": {
 		"type": "git",
@@ -21,17 +21,16 @@
 		"ui"
 	],
 	"exports": {
-		".": "./lib/index.ts",
-		"./VideoPlayer": "./components/VideoPlayer/index.ts",
-		"./Image": "./components/Image/index.ts"
+		".": "./src/index.ts",
+		"./VideoPlayer": "./src/VideoPlayer/index.ts",
+		"./Image": "./src/Image/index.ts"
 	},
 	"engines": {
 		"node": ">=18.0.0"
 	},
-	"files": ["components", "lib"],
-	"scripts": {},
+	"files": ["src"],
 	"dependencies": {
-		"@astrojs/check": "^0.9.1",
+		"@mux/playback-core": "^0.25.1",
 		"typescript": "^5.5.4"
 	},
 	"peerDependencies": {
@@ -45,7 +44,6 @@
 	},
 	"devDependencies": {
 		"@mux/mux-player": "*",
-		"@mux/playback-core": "^0.25.1",
 		"astro": "^4.13.1"
 	}
 }

package/{components/Image/index.astro → src/Image/Image.astro}

@@ -1,7 +1,7 @@
 ---
-import type { ResponsiveImageType } from "../../lib/types";
-import { buildSrcSet } from './buildSrcSet';
 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>;
@@ -79,7 +79,7 @@ const sizingStyle = {
 };
 ---
 
-<picture data-testid="picture" class={pictureClass} style={pictureStyle}>
+<picture class={pictureClass} style={pictureStyle}>
   {
     data.webpSrcSet && (
       <source

package/src/Image/index.ts

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

package/{lib → src/Image}/types.ts

@@ -1,5 +1,4 @@
 type Maybe<T> = T | null;
-type Possibly<T> = Maybe<T> | undefined;
 
 export type ResponsiveImageType = {
   /** A base64-encoded thumbnail to offer during image loading */
@@ -25,21 +24,3 @@ export type ResponsiveImageType = {
   /** 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/src/VideoPlayer/index.astro

@@ -0,0 +1,37 @@
+---
+import type { MuxMediaProps } from "@mux/playback-core";
+import { toHTMLAttrs } from "./toHtmlArgs";
+import type { JSX } from 'astro/jsx-runtime';
+import { useVideoPlayer } from "useVideoPlayer";
+import type { Video } from "./types";
+
+type StyleAttribute = JSX.HTMLAttributes["style"];
+
+interface Props extends MuxMediaProps {
+  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/{components → src}/VideoPlayer/toHtmlArgs.ts

@@ -1,3 +1,4 @@
+// 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;

package/src/VideoPlayer/types.ts

@@ -0,0 +1,20 @@
+type Maybe<T> = T | null;
+type Possibly<T> = Maybe<T> | undefined;
+
+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/src/index.ts

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

package/{lib → src}/useVideoPlayer/index.ts

@@ -1,4 +1,4 @@
-import type { Video } from '../types';
+import type { Video } from "VideoPlayer/types";
 
 type Maybe<T> = T | null;
 type Possibly<T> = Maybe<T> | undefined;

package/components/VideoPlayer/index.astro

@@ -1,105 +0,0 @@
----
-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";
-import type { JSX } from 'astro/jsx-runtime';
-
-type ValueOf<T> = T[keyof T];
-
-type StyleAttribute = 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>
-
-<script>
-  import "@mux/mux-player";
-</script>

package/components/VideoPlayer/index.ts

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

package/lib/index.ts

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