@rixl/media-vue 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,36 @@
-# Temporary Holding Version
+# Rixl Media SDK for Vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Vue 3 media components backed by the shared Lit UI.
+
+## Installation
+
+```sh
+npm install @rixl/media-vue
+```
+
+## Setup & Usage
+
+```vue
+<script setup lang="ts">
+import {onMounted} from "vue";
+import {connect} from "@rixl/media-vue/core";
+import {Image, Video, Feed} from "@rixl/media-vue";
+
+onMounted(async () => {
+  await connect({baseUrl: "https://api.rixl.com", apiKey: "your-api-key"});
+});
+</script>
+
+<template>
+  <Image id="your-image-id" alt="Landscape" />
+  <Video id="your-video-id" :muted="true" />
+  <Feed feedId="your-feed-id" />
+</template>
+```
+
+### Subpath Exports
+
+- `@rixl/media-vue/core` — Headless state stores, API clients, and connection helpers
+- `@rixl/media-vue/image` — `<Image>` component
+- `@rixl/media-vue/video` — `<Video>` and `<VideoPlayer>` components
+- `@rixl/media-vue/feed` — `<Feed>` component

package/dist/components/feed/feed.d.ts

@@ -0,0 +1,22 @@
+import { FeedPost, FontFamilyKey, Page, PlayerLanguage } from "@rixl/media-core";
+import "@rixl/media-lit/feed";
+import { DefineSetupFnComponent } from "vue";
+export type FeedProps = {
+  feedId?: string;
+  lang?: PlayerLanguage;
+  feedFont?: FontFamilyKey;
+  loop?: boolean;
+  autoscroll?: boolean;
+  muted?: boolean;
+  analytics?: boolean;
+  analyticsPage?: Page;
+  safeAreaTabBar?: number;
+  posts?: FeedPost[];
+  initialIndex?: number;
+  onFetchMore?: () => void | Promise<void>;
+};
+export type FeedEmits = {
+  muteChange: (muted: boolean) => boolean;
+  "update:muted": (muted: boolean) => boolean;
+};
+export declare const Feed: DefineSetupFnComponent<FeedProps, FeedEmits>;

package/dist/components/feed/feed.js

@@ -0,0 +1,93 @@
+import { omitUndefined } from "../../lib/element-props.js";
+import "@rixl/media-lit/feed";
+import { defineComponent, h, ref } from "vue";
+
+// src/components/feed/feed.ts
+const Feed = defineComponent({
+	name: "RixlFeed",
+	props: {
+		feedId: {
+			type: String,
+			default: ""
+		},
+		lang: {
+			type: String,
+			default: "en"
+		},
+		feedFont: {
+			type: String,
+			default: void 0
+		},
+		loop: {
+			type: Boolean,
+			default: false
+		},
+		autoscroll: {
+			type: Boolean,
+			default: false
+		},
+		muted: {
+			type: Boolean,
+			default: void 0
+		},
+		analytics: {
+			type: Boolean,
+			default: void 0
+		},
+		analyticsPage: {
+			type: String,
+			default: void 0
+		},
+		safeAreaTabBar: {
+			type: Number,
+			default: void 0
+		},
+		posts: {
+			type: Array,
+			default: void 0
+		},
+		initialIndex: {
+			type: Number,
+			default: void 0
+		},
+		onFetchMore: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: {
+		muteChange: (_muted) => true,
+		"update:muted": (_muted) => true
+	},
+	setup(props, { attrs, emit, expose }) {
+		const element = ref(null);
+		expose({ element });
+		function handleMuteChange(event) {
+			if (event instanceof CustomEvent && typeof event.detail?.muted === "boolean") {
+				emit("muteChange", event.detail.muted);
+				emit("update:muted", event.detail.muted);
+			}
+		}
+		return () => h("rixl-feed", {
+			...attrs,
+			ref: element,
+			...omitUndefined({
+				feedId: props.feedId,
+				lang: props.lang,
+				feedFont: props.feedFont,
+				loop: props.loop,
+				autoscroll: props.autoscroll,
+				muted: props.muted,
+				analytics: props.analytics,
+				analyticsPage: props.analyticsPage,
+				safeAreaTabBar: props.safeAreaTabBar,
+				posts: props.posts,
+				initialIndex: props.initialIndex,
+				onFetchMore: props.onFetchMore
+			}),
+			"onMute-change": handleMuteChange
+		});
+	}
+});
+
+export { Feed };

package/dist/components/image/image.d.ts

@@ -0,0 +1,17 @@
+import { ImageData, Page } from "@rixl/media-core";
+import { DefineSetupFnComponent } from "vue";
+import "@rixl/media-lit/image";
+export type ImageProps = {
+  id?: string;
+  imageData?: ImageData;
+  alt?: string;
+  analytics?: boolean;
+  analyticsPage?: Page;
+  isCurrent?: boolean;
+  feedId?: string;
+  postId?: string;
+};
+export type ImageEmits = {
+  loadingChange: (isLoading: boolean) => boolean;
+};
+export declare const Image: DefineSetupFnComponent<ImageProps, ImageEmits>;

package/dist/components/image/image.js

@@ -0,0 +1,71 @@
+import { omitUndefined } from "../../lib/element-props.js";
+import { defineComponent, h, ref } from "vue";
+import "@rixl/media-lit/image";
+
+// src/components/image/image.ts
+function resolveIsCurrent(isCurrent, id) {
+	if (isCurrent !== void 0) return isCurrent;
+	return id ? true : void 0;
+}
+const Image = defineComponent({
+	name: "RixlImage",
+	props: {
+		id: {
+			type: String,
+			default: void 0
+		},
+		imageData: {
+			type: Object,
+			default: void 0
+		},
+		alt: {
+			type: String,
+			default: void 0
+		},
+		analytics: {
+			type: Boolean,
+			default: true
+		},
+		analyticsPage: {
+			type: String,
+			default: "standalone"
+		},
+		isCurrent: {
+			type: Boolean,
+			default: void 0
+		},
+		feedId: {
+			type: String,
+			default: void 0
+		},
+		postId: {
+			type: String,
+			default: void 0
+		}
+	},
+	emits: { loadingChange: (_isLoading) => true },
+	setup(props, { attrs, emit, expose }) {
+		const element = ref(null);
+		expose({ element });
+		function handleLoadingChange(event) {
+			if (event instanceof CustomEvent && typeof event.detail === "boolean") emit("loadingChange", event.detail);
+		}
+		return () => h("rixl-image", {
+			...attrs,
+			ref: element,
+			...omitUndefined({
+				imageId: props.id,
+				imageData: props.imageData,
+				alt: props.alt,
+				analytics: props.analytics,
+				analyticsPage: props.analyticsPage,
+				isCurrent: resolveIsCurrent(props.isCurrent, props.id),
+				feedId: props.feedId,
+				postId: props.postId
+			}),
+			"onLoading-change": handleLoadingChange
+		});
+	}
+});
+
+export { Image };

package/dist/components/video/video-player.d.ts

@@ -0,0 +1,5 @@
+import { DefineSetupFnComponent, SlotsType, VNode } from "vue";
+export type VideoPlayerSlots = SlotsType<{
+  default?: () => VNode[];
+}>;
+export declare const VideoPlayer: DefineSetupFnComponent<Record<string, never>, Record<string, never>, VideoPlayerSlots>;

package/dist/components/video/video-player.js

@@ -0,0 +1,14 @@
+import { providePlayerScope } from "../../lib/player-scope.js";
+import { defineComponent } from "vue";
+
+// src/components/video/video-player.ts
+const VideoPlayer = defineComponent({
+	name: "RixlVideoPlayer",
+	setup(_props, { slots }) {
+		const playerId = crypto.randomUUID();
+		providePlayerScope(playerId);
+		return () => slots.default?.() ?? null;
+	}
+});
+
+export { VideoPlayer };

package/dist/components/video/video-props.d.ts

@@ -0,0 +1,44 @@
+import { FeedPost, FontFamilyKey, Page, VideoData, VideoHeatmap, VideoTheme } from "@rixl/media-core";
+import "vue";
+export type VideoLoadMode = "unloaded" | "idle" | "preloading" | "playing";
+export type VideoPlanType = "free" | "pro" | "pay-as-you-go" | "custom";
+export type VideoProps = {
+  id?: string;
+  src?: string;
+  videoData?: VideoData;
+  autoPlay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  playsInline?: boolean;
+  poster?: string;
+  thumbhash?: string;
+  volume?: number;
+  progressBar?: boolean;
+  heatmap?: boolean;
+  chapters?: boolean;
+  heatmapData?: VideoHeatmap | null;
+  controls?: boolean;
+  hideUI?: boolean;
+  settingsOpen?: boolean;
+  theme?: VideoTheme;
+  autoHideMs?: number;
+  allowPlayPause?: boolean;
+  allowFullscreen?: boolean;
+  allowPictureInPicture?: boolean;
+  soundDisabled?: boolean;
+  resumeProgress?: boolean;
+  isCurrent?: boolean;
+  isFeed?: boolean;
+  loadState?: VideoLoadMode;
+  dataPost?: FeedPost;
+  feedFont?: FontFamilyKey;
+  feedId?: string;
+  postId?: string;
+  analytics?: boolean;
+  analyticsPage?: Page;
+  lang?: string;
+  planType?: VideoPlanType;
+  userId?: string;
+  userProperties?: Record<string, string>;
+  hotSegments?: boolean;
+};

package/dist/components/video/video-props.js

@@ -0,0 +1,82 @@
+// src/components/video/video-props.ts
+const optionalBoolean = {
+	type: Boolean,
+	default: void 0
+};
+const optionalString = {
+	type: String,
+	default: void 0
+};
+const optionalNumber = {
+	type: Number,
+	default: void 0
+};
+const videoPropDefinitions = {
+	id: optionalString,
+	src: optionalString,
+	videoData: {
+		type: Object,
+		default: void 0
+	},
+	autoPlay: optionalBoolean,
+	muted: optionalBoolean,
+	loop: optionalBoolean,
+	playsInline: optionalBoolean,
+	poster: optionalString,
+	thumbhash: optionalString,
+	volume: optionalNumber,
+	progressBar: optionalBoolean,
+	heatmap: optionalBoolean,
+	chapters: optionalBoolean,
+	heatmapData: {
+		type: Object,
+		default: void 0
+	},
+	controls: optionalBoolean,
+	hideUI: optionalBoolean,
+	settingsOpen: optionalBoolean,
+	theme: {
+		type: String,
+		default: void 0
+	},
+	autoHideMs: optionalNumber,
+	allowPlayPause: optionalBoolean,
+	allowFullscreen: optionalBoolean,
+	allowPictureInPicture: optionalBoolean,
+	soundDisabled: optionalBoolean,
+	resumeProgress: optionalBoolean,
+	isCurrent: optionalBoolean,
+	isFeed: optionalBoolean,
+	loadState: {
+		type: String,
+		default: void 0
+	},
+	dataPost: {
+		type: Object,
+		default: void 0
+	},
+	feedFont: {
+		type: String,
+		default: void 0
+	},
+	feedId: optionalString,
+	postId: optionalString,
+	analytics: optionalBoolean,
+	analyticsPage: {
+		type: String,
+		default: void 0
+	},
+	lang: optionalString,
+	planType: {
+		type: String,
+		default: void 0
+	},
+	userId: optionalString,
+	userProperties: {
+		type: Object,
+		default: void 0
+	},
+	hotSegments: optionalBoolean
+};
+
+export { videoPropDefinitions };

package/dist/components/video/video.d.ts

@@ -0,0 +1,21 @@
+import { VideoProps } from "./video-props.js";
+import { DefineSetupFnComponent, SlotsType, VNode } from "vue";
+import "@rixl/media-lit/video";
+export type VideoEmits = {
+  play: (event: Event) => boolean;
+  pause: (event: Event) => boolean;
+  pausedChange: (isPaused: boolean) => boolean;
+  ended: () => boolean;
+  timeUpdate: (event: Event) => boolean;
+  loadedMetadata: (event: Event) => boolean;
+  error: (event: Event) => boolean;
+  volumeChange: (event: Event) => boolean;
+  loadingChange: (isLoading: boolean) => boolean;
+  rateChange: (event: Event) => boolean;
+  qualityChange: (event: Event) => boolean;
+};
+export type VideoSlots = SlotsType<{
+  default?: () => VNode[];
+}>;
+export declare const Video: DefineSetupFnComponent<VideoProps, VideoEmits, VideoSlots>;
+export type { VideoProps };

package/dist/components/video/video.js

@@ -0,0 +1,70 @@
+import { omitUndefined } from "../../lib/element-props.js";
+import { providePlayerScope, useOptionalPlayerId } from "../../lib/player-scope.js";
+import { videoPropDefinitions } from "./video-props.js";
+import { defineComponent, h, ref } from "vue";
+import "@rixl/media-lit/video";
+
+// src/components/video/video.ts
+const videoEmits = {
+	play: (_event) => true,
+	pause: (_event) => true,
+	pausedChange: (_isPaused) => true,
+	ended: () => true,
+	timeUpdate: (_event) => true,
+	loadedMetadata: (_event) => true,
+	error: (_event) => true,
+	volumeChange: (_event) => true,
+	loadingChange: (_isLoading) => true,
+	rateChange: (_event) => true,
+	qualityChange: (_event) => true
+};
+function buildVideoEventListeners(emit) {
+	return {
+		onPlay: (event) => emit("play", event),
+		onPause: (event) => emit("pause", event),
+		"onPaused-change": (event) => {
+			const detail = event.detail;
+			emit("pausedChange", detail.paused);
+		},
+		onEnded: () => emit("ended"),
+		onTimeupdate: (event) => emit("timeUpdate", event),
+		"onLoaded-metadata": (event) => emit("loadedMetadata", event),
+		onError: (event) => emit("error", event),
+		"onVolume-change": (event) => emit("volumeChange", event),
+		"onLoading-change": (event) => {
+			const detail = event.detail;
+			emit("loadingChange", detail.loading);
+		},
+		"onRate-change": (event) => emit("rateChange", event),
+		"onQuality-change": (event) => emit("qualityChange", event)
+	};
+}
+function mapVideoElementProps(props, playerId) {
+	const { id, chapters, ...rest } = props;
+	return omitUndefined({
+		...rest,
+		videoId: id,
+		playerId,
+		showChapters: chapters
+	});
+}
+const Video = defineComponent({
+	name: "RixlVideo",
+	props: videoPropDefinitions,
+	emits: videoEmits,
+	setup(props, { attrs, emit, expose, slots }) {
+		const playerId = useOptionalPlayerId() ?? crypto.randomUUID();
+		providePlayerScope(playerId);
+		const element = ref(null);
+		expose({ element });
+		const listeners = buildVideoEventListeners(emit);
+		return () => h("rixl-video", {
+			...attrs,
+			ref: element,
+			...mapVideoElementProps(props, playerId),
+			...listeners
+		}, slots.default?.());
+	}
+});
+
+export { Video, videoEmits };

package/dist/core.d.ts

@@ -0,0 +1 @@
+export * from "@rixl/media-core";

package/dist/core.js

@@ -0,0 +1 @@
+export * from "@rixl/media-core"

package/dist/feed.d.ts

@@ -0,0 +1,2 @@
+import { Feed, FeedProps } from "./components/feed/feed.js";
+export { Feed, type FeedProps };

package/dist/feed.js

@@ -0,0 +1,3 @@
+import { Feed } from "./components/feed/feed.js";
+
+export { Feed };

package/dist/image.d.ts

@@ -0,0 +1,2 @@
+import { Image, ImageProps } from "./components/image/image.js";
+export { Image, type ImageProps };

package/dist/image.js

@@ -0,0 +1,3 @@
+import { Image } from "./components/image/image.js";
+
+export { Image };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { Feed, FeedProps } from "./components/feed/feed.js";
+import "./feed.js";
+import { Image, ImageProps } from "./components/image/image.js";
+import "./image.js";
+import { VideoProps } from "./components/video/video-props.js";
+import { Video } from "./components/video/video.js";
+import { VideoPlayer } from "./components/video/video-player.js";
+import { useOptionalPlayerId, usePlayerId } from "./lib/player-scope.js";
+import "./video.js";
+export * from "@rixl/media-core";
+export { Feed, type FeedProps, Image, type ImageProps, Video, VideoPlayer, type VideoProps, useOptionalPlayerId, usePlayerId };

package/dist/index.js

@@ -0,0 +1,9 @@
+import { Feed } from "./components/feed/feed.js";
+import { Image } from "./components/image/image.js";
+import { Video } from "./components/video/video.js";
+import { VideoPlayer } from "./components/video/video-player.js";
+import { useOptionalPlayerId, usePlayerId } from "./lib/player-scope.js";
+
+export * from "@rixl/media-core"
+
+export { Feed, Image, Video, VideoPlayer, useOptionalPlayerId, usePlayerId };

package/dist/lib/element-props.js

@@ -0,0 +1,10 @@
+import { toRaw } from "vue";
+
+// src/lib/element-props.ts
+function omitUndefined(record) {
+	const result = {};
+	for (const [key, value] of Object.entries(record)) if (value !== void 0) result[key] = typeof value === "object" && value !== null ? toRaw(value) : value;
+	return result;
+}
+
+export { omitUndefined };

package/dist/lib/player-scope.d.ts

@@ -0,0 +1,3 @@
+import { UUID } from "@rixl/media-core";
+export declare function useOptionalPlayerId(): UUID | null;
+export declare function usePlayerId(): UUID;

package/dist/lib/player-scope.js

@@ -0,0 +1,25 @@
+import { inject, provide } from "vue";
+
+// src/lib/player-scope.ts
+const PLAYER_SCOPE_KEY = Symbol("rixl-player-scope");
+function getOutOfScopeErrorMessage(fnName) {
+	return `${fnName}() must be used inside <Video> or <VideoPlayer>.\n\nFix:
+
+  <VideoPlayer>
+    <Video id="..." theme="hideUI" />
+    <YourControls />
+  </VideoPlayer>`;
+}
+function providePlayerScope(playerId) {
+	provide(PLAYER_SCOPE_KEY, playerId);
+}
+function useOptionalPlayerId() {
+	return inject(PLAYER_SCOPE_KEY, null);
+}
+function usePlayerId() {
+	const playerId = useOptionalPlayerId();
+	if (!playerId) throw new Error(getOutOfScopeErrorMessage("usePlayerId"));
+	return playerId;
+}
+
+export { providePlayerScope, useOptionalPlayerId, usePlayerId };

package/dist/video.d.ts

@@ -0,0 +1,5 @@
+import { VideoProps } from "./components/video/video-props.js";
+import { Video } from "./components/video/video.js";
+import { VideoPlayer } from "./components/video/video-player.js";
+import { useOptionalPlayerId, usePlayerId } from "./lib/player-scope.js";
+export { Video, VideoPlayer, type VideoProps, useOptionalPlayerId, usePlayerId };

package/dist/video.js

@@ -0,0 +1,5 @@
+import { Video } from "./components/video/video.js";
+import { VideoPlayer } from "./components/video/video-player.js";
+import { useOptionalPlayerId, usePlayerId } from "./lib/player-scope.js";
+
+export { Video, VideoPlayer, useOptionalPlayerId, usePlayerId };

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@rixl/media-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.1",
+  "description": "Vue 3 media components for Rixl — adaptive HLS video player, image components with thumbhash, and infinite feeds.",
+  "keywords": [
+    "feed",
+    "hls",
+    "image",
+    "player",
+    "rixl",
+    "sdk",
+    "video",
+    "vue",
+    "vue3",
+    "web"
+  ],
+  "homepage": "https://rixl.com",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": "Rixl Inc.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rixlhq/mediasdk.git",
+    "directory": "packages/vue"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./core": "./dist/core.js",
+    "./image": "./dist/image.js",
+    "./video": "./dist/video.js",
+    "./feed": "./dist/feed.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vp pack --watch",
+    "pack": "vp pack",
+    "clean": "rimraf dist node_modules"
+  },
+  "dependencies": {
+    "@rixl/media-core": "1.0.1",
+    "@rixl/media-lit": "1.0.1"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  }
+}