@rixl/media-vue 1.0.2 → 1.1.0

package/README.md

@@ -1,36 +1,120 @@
 # Rixl Media SDK for Vue
 
-Vue 3 media components backed by the shared Lit UI.
+Vue 3 video player, image components, and infinite media feeds for Rixl. `@rixl/media-vue` provides typed Vue props, events, refs, and player context over the shared Rixl media UI.
 
-## Installation
+[Documentation](https://developers.rixl.com/en/sdk/media-vue) · [npm](https://www.npmjs.com/package/@rixl/media-vue) · [Dashboard](https://dash.rixl.com)
+
+## What you get
+
+- Adaptive HLS playback, captions, quality selection, fullscreen, and picture-in-picture.
+- Images with lazy loading and ThumbHash placeholders when available.
+- Vertical media feeds with pagination, looping, and automatic advancement.
+- Vue events and `v-model:muted` support for feeds.
+- Included player styles; no Tailwind CSS or custom-element compiler configuration is required.
+
+## Install
 
 ```sh
 npm install @rixl/media-vue
 ```
 
-## Setup & Usage
+Requires Vue 3.3 or later. Core and Lit are included as dependencies.
+
+## Quick start
+
+Wait for the SDK connection before rendering media. Replace the API key and media ID with your Rixl values.
 
 ```vue
 <script setup lang="ts">
-import {onMounted} from "vue";
+import {onMounted, ref} from "vue";
 import {connect} from "@rixl/media-vue/core";
-import {Image, Video, Feed} from "@rixl/media-vue";
+import {Video} from "@rixl/media-vue/video";
+
+const ready = ref(false);
+const error = ref("");
 
 onMounted(async () => {
-  await connect({baseUrl: "https://api.rixl.com", apiKey: "your-api-key"});
+  try {
+    await connect({baseUrl: "https://api.rixl.com", apiKey: "YOUR_PUBLIC_API_KEY"});
+    ready.value = true;
+  } catch {
+    error.value = "Unable to connect to Rixl.";
+  }
 });
 </script>
 
 <template>
-  <Image id="your-image-id" alt="Landscape" />
-  <Video id="your-video-id" :muted="true" />
-  <Feed feedId="your-feed-id" />
+  <p v-if="error" role="alert">{{ error }}</p>
+  <Video v-else-if="ready" id="YOUR_VIDEO_ID" :muted="true" class="player" />
+  <p v-else role="status">Loading media…</p>
+</template>
+
+<style scoped>
+.player {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+</style>
+```
+
+Use credentials intended for browser access. If your application already authenticates the shared `@rixl/sdk` client, reuse that connection instead.
+
+## Images and feeds
+
+After connecting, import the components you need:
+
+```vue
+<script setup lang="ts">
+import {ref} from "vue";
+import {Image} from "@rixl/media-vue/image";
+import {Feed} from "@rixl/media-vue/feed";
+
+const muted = ref(true);
+</script>
+
+<template>
+  <Image id="YOUR_IMAGE_ID" alt="Mountain lake at sunrise" class="image" />
+  <Feed feedId="YOUR_FEED_ID" v-model:muted="muted" class="feed" />
 </template>
+
+<style scoped>
+.image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+.feed {
+  display: block;
+  height: 36rem;
+}
+</style>
 ```
 
-### Subpath Exports
+Production media is resolved by `id` or `feedId` through the SDK.
+
+## Events and custom controls
+
+Video emits `play`, `pause`, `ended`, `pausedChange`, `loadingChange`, `timeUpdate`, `loadedMetadata`, `volumeChange`, `rateChange`, `qualityChange`, and `error`. Image emits `loadingChange`; Feed emits `muteChange` and `update:muted`.
+
+```vue
+<Video id="YOUR_VIDEO_ID" @paused-change="(paused) => console.log(paused)" />
+```
+
+Use a component template ref to access its exposed `element`, the underlying Lit element. `<VideoPlayer>` shares a player scope with sibling controls; `usePlayerId()` and `useOptionalPlayerId()` are available from `/video` during setup. Playback actions and state live in `/core`.
+
+## Styling, rendering, and imports
+
+The wrappers include Lit's styles inside shadow DOM. Your `class` and `style` affect the host layout; internal player controls are configured through component props.
+
+The examples target browser rendering. In a Nuxt app, mount media inside a client-only boundary and initialize the SDK there. Full server-rendered media markup is not provided by this adapter.
+
+| Import                  | Exports                                                       |
+| ----------------------- | ------------------------------------------------------------- |
+| `@rixl/media-vue/image` | `Image`, `ImageProps`                                         |
+| `@rixl/media-vue/video` | `Video`, `VideoPlayer`, props, and player-context composables |
+| `@rixl/media-vue/feed`  | `Feed`, `FeedProps`                                           |
+| `@rixl/media-vue/core`  | Headless APIs, stores, utilities, and types                   |
+| `@rixl/media-vue`       | Components and Core 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
+Subpath imports keep an image-only app free of video, feed, and HLS code. See the [Vue guide](https://developers.rixl.com/en/sdk/media-vue) for integration details.

package/dist/components/feed/feed.js

@@ -1,93 +1 @@
-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 };
+import{omitUndefined as e}from"../../lib/element-props.js";import"@rixl/media-lit/feed";import{defineComponent as t,h as n,ref as r}from"vue";const i=t({name:`RixlFeed`,props:{feedId:{type:String,default:``},lang:{type:String,default:`en`},feedFont:{type:String,default:void 0},loop:{type:Boolean,default:!1},autoscroll:{type:Boolean,default:!1},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:e=>!0,"update:muted":e=>!0},setup(t,{attrs:i,emit:a,expose:o}){let s=r(null);o({element:s});function c(e){e instanceof CustomEvent&&typeof e.detail?.muted==`boolean`&&(a(`muteChange`,e.detail.muted),a(`update:muted`,e.detail.muted))}return()=>n(`rixl-feed`,{...i,ref:s,...e({feedId:t.feedId,lang:t.lang,feedFont:t.feedFont,loop:t.loop,autoscroll:t.autoscroll,muted:t.muted,analytics:t.analytics,analyticsPage:t.analyticsPage,safeAreaTabBar:t.safeAreaTabBar,posts:t.posts,initialIndex:t.initialIndex,onFetchMore:t.onFetchMore}),"onMute-change":c})}});export{i as Feed};

package/dist/components/image/image.js

@@ -1,71 +1 @@
-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 };
+import{omitUndefined as e}from"../../lib/element-props.js";import{defineComponent as t,h as n,ref as r}from"vue";import"@rixl/media-lit/image";function i(e,t){return e===void 0?t?!0:void 0:e}const a=t({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:!0},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:e=>!0},setup(t,{attrs:a,emit:o,expose:s}){let c=r(null);s({element:c});function l(e){e instanceof CustomEvent&&typeof e.detail==`boolean`&&o(`loadingChange`,e.detail)}return()=>n(`rixl-image`,{...a,ref:c,...e({imageId:t.id,imageData:t.imageData,alt:t.alt,analytics:t.analytics,analyticsPage:t.analyticsPage,isCurrent:i(t.isCurrent,t.id),feedId:t.feedId,postId:t.postId}),"onLoading-change":l})}});export{a as Image};

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

@@ -1,14 +1 @@
-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 };
+import{providePlayerScope as e}from"../../lib/player-scope.js";import{defineComponent as t}from"vue";const n=t({name:`RixlVideoPlayer`,setup(t,{slots:n}){let r=crypto.randomUUID();return e(r),()=>n.default?.()??null}});export{n as VideoPlayer};

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

@@ -1,82 +1 @@
-// 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 };
+const e={type:Boolean,default:void 0},t={type:String,default:void 0},n={type:Number,default:void 0},r={id:t,src:t,videoData:{type:Object,default:void 0},autoPlay:e,muted:e,loop:e,playsInline:e,poster:t,thumbhash:t,volume:n,progressBar:e,heatmap:e,chapters:e,heatmapData:{type:Object,default:void 0},controls:e,hideUI:e,settingsOpen:e,theme:{type:String,default:void 0},autoHideMs:n,allowPlayPause:e,allowFullscreen:e,allowPictureInPicture:e,soundDisabled:e,resumeProgress:e,isCurrent:e,isFeed:e,loadState:{type:String,default:void 0},dataPost:{type:Object,default:void 0},feedFont:{type:String,default:void 0},feedId:t,postId:t,analytics:e,analyticsPage:{type:String,default:void 0},lang:t,planType:{type:String,default:void 0},userId:t,userProperties:{type:Object,default:void 0},hotSegments:e};export{r as videoPropDefinitions};

package/dist/components/video/video.js

@@ -1,70 +1 @@
-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 };
+import{omitUndefined as e}from"../../lib/element-props.js";import{providePlayerScope as t,useOptionalPlayerId as n}from"../../lib/player-scope.js";import{videoPropDefinitions as r}from"./video-props.js";import{defineComponent as i,h as a,ref as o}from"vue";import"@rixl/media-lit/video";const s={play:e=>!0,pause:e=>!0,pausedChange:e=>!0,ended:()=>!0,timeUpdate:e=>!0,loadedMetadata:e=>!0,error:e=>!0,volumeChange:e=>!0,loadingChange:e=>!0,rateChange:e=>!0,qualityChange:e=>!0};function c(e){return{onPlay:t=>e(`play`,t),onPause:t=>e(`pause`,t),"onPaused-change":t=>{let n=t.detail;e(`pausedChange`,n.paused)},onEnded:()=>e(`ended`),onTimeupdate:t=>e(`timeUpdate`,t),"onLoaded-metadata":t=>e(`loadedMetadata`,t),onError:t=>e(`error`,t),"onVolume-change":t=>e(`volumeChange`,t),"onLoading-change":t=>{let n=t.detail;e(`loadingChange`,n.loading)},"onRate-change":t=>e(`rateChange`,t),"onQuality-change":t=>e(`qualityChange`,t)}}function l(t,n){let{id:r,chapters:i,...a}=t;return e({...a,videoId:r,playerId:n,showChapters:i})}const u=i({name:`RixlVideo`,props:r,emits:s,setup(e,{attrs:r,emit:i,expose:s,slots:u}){let d=n()??crypto.randomUUID();t(d);let f=o(null);s({element:f});let p=c(i);return()=>a(`rixl-video`,{...r,ref:f,...l(e,d),...p},u.default?.())}});export{u as Video,s as videoEmits};

package/dist/core.js

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

package/dist/feed.js

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

package/dist/image.js

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

package/dist/index.js

@@ -1,9 +1 @@
-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 };
+import{Feed as e}from"./components/feed/feed.js";import{Image as t}from"./components/image/image.js";import{Video as n}from"./components/video/video.js";import{VideoPlayer as r}from"./components/video/video-player.js";import{useOptionalPlayerId as i,usePlayerId as a}from"./lib/player-scope.js";export*from"@rixl/media-core";export{e as Feed,t as Image,n as Video,r as VideoPlayer,i as useOptionalPlayerId,a as usePlayerId};

package/dist/lib/element-props.js

@@ -1,10 +1 @@
-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 };
+import{toRaw as e}from"vue";function t(t){let n={};for(let[r,i]of Object.entries(t))i!==void 0&&(n[r]=typeof i==`object`&&i?e(i):i);return n}export{t as omitUndefined};

package/dist/lib/player-scope.js

@@ -1,25 +1,6 @@
-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:
+import{inject as e,provide as t}from"vue";const n=Symbol(`rixl-player-scope`);function r(e){return`${e}() 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 };
+  </VideoPlayer>`}function i(e){t(n,e)}function a(){return e(n,null)}function o(){let e=a();if(!e)throw Error(r(`usePlayerId`));return e}export{i as providePlayerScope,a as useOptionalPlayerId,o as usePlayerId};

package/dist/video.js

@@ -1,5 +1 @@
-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 };
+import{Video as e}from"./components/video/video.js";import{VideoPlayer as t}from"./components/video/video-player.js";import{useOptionalPlayerId as n,usePlayerId as r}from"./lib/player-scope.js";export{e as Video,t as VideoPlayer,n as useOptionalPlayerId,r as usePlayerId};

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@rixl/media-vue",
-  "version": "1.0.2",
-  "description": "Vue 3 media components for Rixl — adaptive HLS video player, image components with thumbhash, and infinite feeds.",
+  "version": "1.1.0",
+  "description": "Vue 3 video player, image components, and infinite media feeds for Rixl, with TypeScript props, events, and player context.",
   "keywords": [
     "feed",
     "hls",
     "image",
-    "player",
+    "infinite-scroll",
+    "media-sdk",
     "rixl",
-    "sdk",
+    "typescript",
     "video",
+    "video-player",
     "vue",
-    "vue3",
-    "web"
+    "vue3"
   ],
-  "homepage": "https://rixl.com",
+  "homepage": "https://developers.rixl.com/en/sdk/media-vue",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Rixl Inc.",
   "repository": {
@@ -45,8 +46,8 @@
     "clean": "rimraf dist node_modules"
   },
   "dependencies": {
-    "@rixl/media-core": "1.0.2",
-    "@rixl/media-lit": "1.0.2"
+    "@rixl/media-core": "1.1.0",
+    "@rixl/media-lit": "1.1.0"
   },
   "peerDependencies": {
     "vue": ">=3.3.0"