@rixl/media-solid 0.0.1 → 1.1.1

package/README.md

@@ -0,0 +1,123 @@
+# Rixl Media SDK for Solid
+
+Solid video player, image components, and infinite media feeds for Rixl. `@rixl/media-solid` provides typed reactive Solid props, callbacks, refs, and player context over the shared Rixl media UI.
+
+[Documentation](https://developers.rixl.com/en/sdk/media-solid) · [npm](https://www.npmjs.com/package/@rixl/media-solid) · [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.
+- Solid reactivity, signal integration, and context-based player scopes.
+- Included player styles; no Tailwind CSS or custom-element compiler configuration is required.
+
+## Install
+
+```sh
+npm install @rixl/media-solid
+```
+
+Requires Solid 1.8 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.
+
+```tsx
+import {createSignal, onMount, Show} from "solid-js";
+import {connect} from "@rixl/media-solid/core";
+import {Video} from "@rixl/media-solid/video";
+
+export default function App() {
+  const [ready, setReady] = createSignal(false);
+  const [error, setError] = createSignal("");
+
+  onMount(async () => {
+    try {
+      await connect({baseUrl: "https://api.rixl.com", apiKey: "YOUR_PUBLIC_API_KEY"});
+      setReady(true);
+    } catch {
+      setError("Unable to connect to Rixl.");
+    }
+  });
+
+  return (
+    <div>
+      <Show when={error()}>{(err) => <p role="alert">{err()}</p>}</Show>
+      <Show when={ready()} fallback={<p role="status">Loading media…</p>}>
+        <Video id="YOUR_VIDEO_ID" muted={true} style={{width: "100%", "aspect-ratio": "16 / 9"}} />
+      </Show>
+    </div>
+  );
+}
+```
+
+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:
+
+```tsx
+import {createSignal} from "solid-js";
+import {Image} from "@rixl/media-solid/image";
+import {Feed} from "@rixl/media-solid/feed";
+
+export function MediaGallery() {
+  const [muted, setMuted] = createSignal(true);
+
+  return (
+    <div>
+      <Image id="YOUR_IMAGE_ID" alt="Mountain lake at sunrise" style={{width: "100%", "aspect-ratio": "16 / 9"}} />
+      <Feed feedId="YOUR_FEED_ID" muted={muted()} onMuteChange={setMuted} style={{height: "36rem"}} />
+    </div>
+  );
+}
+```
+
+Production media is resolved by `id` or `feedId` through the SDK.
+
+## Events and custom controls
+
+Video accepts `onPlay`, `onPause`, `onEnded`, `onPausedChange`, `onLoadingChange`, `onTimeUpdate`, `onLoadedMetadata`, `onVolumeChange`, `onRateChange`, `onQualityChange`, and `onError`. Image accepts `onLoadingChange`; Feed accepts `onMuteChange`.
+
+```tsx
+<Video id="YOUR_VIDEO_ID" onPausedChange={(paused) => console.log("Paused:", paused)} />
+```
+
+Use a `ref` prop to access the underlying Lit element. `<VideoPlayer>` shares a player scope with sibling controls; `usePlayerId()` and `useOptionalPlayerId()` are available from `/video`. Playback actions and state live in `/core`.
+
+```tsx
+import {Video, VideoPlayer, usePlayerId} from "@rixl/media-solid/video";
+
+function CustomOverlay() {
+  const playerId = usePlayerId();
+  return <div class="overlay">Player ID: {playerId}</div>;
+}
+
+export function PlayerWithControls() {
+  return (
+    <VideoPlayer>
+      <Video id="YOUR_VIDEO_ID" theme="hideUI" />
+      <CustomOverlay />
+    </VideoPlayer>
+  );
+}
+```
+
+## 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.
+
+In a SolidStart app, mount media inside client-only routes or components and initialize the SDK in the browser. Full server-rendered media markup is not provided by this adapter.
+
+| Import                    | Exports                                                     |
+| ------------------------- | ----------------------------------------------------------- |
+| `@rixl/media-solid/image` | `Image`, `ImageProps`                                       |
+| `@rixl/media-solid/video` | `Video`, `VideoPlayer`, props, and player-context accessors |
+| `@rixl/media-solid/feed`  | `Feed`, `FeedProps`                                         |
+| `@rixl/media-solid/core`  | Headless APIs, stores, utilities, and types                 |
+| `@rixl/media-solid`       | Components and Core exports                                 |
+
+Subpath imports keep an image-only app free of video, feed, and HLS code. See the [Solid guide](https://developers.rixl.com/en/sdk/media-solid) for integration details.

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

@@ -0,0 +1,23 @@
+import { FeedPost, FontFamilyKey, Page, PlayerLanguage } from "@rixl/media-core";
+import { JSX } from "@solidjs/web";
+import { RixlFeed } from "@rixl/media-lit/feed";
+import { Component, Ref } from "solid-js";
+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>;
+  onMuteChange?: (muted: boolean) => void;
+  ref?: Ref<RixlFeed>;
+  class?: string;
+  style?: string | JSX.CSSProperties;
+};
+export declare const Feed: Component<FeedProps>;

package/dist/components/feed/feed.js

@@ -0,0 +1 @@
+import{assignRef as e,bindElementEvents as t,syncElementProps as n}from"../../lib/sync-element.js";import{className as r,effect as i,getOwner as a,readShallow as o,ref as s,style as c,template as l}from"@solidjs/web";import"@rixl/media-lit/feed";import{createEffect as u}from"solid-js";var d=/* @__PURE__ */ l(`<rixl-feed>`,1);function f(e){return{feedId:e.feedId??``,lang:e.lang??`en`,feedFont:e.feedFont,loop:e.loop??!1,autoscroll:e.autoscroll??!1,muted:e.muted,analytics:e.analytics,analyticsPage:e.analyticsPage,safeAreaTabBar:e.safeAreaTabBar,posts:e.posts,initialIndex:e.initialIndex,onFetchMore:e.onFetchMore}}const p=l=>{let p;u(()=>f(l),e=>{p&&n(p,e)}),u(()=>l.onMuteChange,e=>{if(p&&e)return t(p,{"mute-change":t=>{t instanceof CustomEvent&&typeof t.detail?.muted==`boolean`&&e(t.detail.muted)}})});var m=d();return s(()=>t=>{p=t,e(l.ref,t)},m),m._$owner=a(),i(()=>({e:o(l.class),t:o(l.style)}),({e,t},n)=>{r(m,e,n?.e),c(m,t,n?.t)}),m};export{p as Feed};

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

@@ -0,0 +1,19 @@
+import { ImageData, Page } from "@rixl/media-core";
+import { JSX } from "@solidjs/web";
+import { Component, Ref } from "solid-js";
+import { RixlImage } from "@rixl/media-lit/image";
+export type ImageProps = {
+  id?: string;
+  imageData?: ImageData;
+  alt?: string;
+  analytics?: boolean;
+  analyticsPage?: Page;
+  isCurrent?: boolean;
+  feedId?: string;
+  postId?: string;
+  onLoadingChange?: (isLoading: boolean) => void;
+  ref?: Ref<RixlImage>;
+  class?: string;
+  style?: string | JSX.CSSProperties;
+};
+export declare const Image: Component<ImageProps>;

package/dist/components/image/image.js

@@ -0,0 +1 @@
+import{assignRef as e,bindElementEvents as t,syncElementProps as n}from"../../lib/sync-element.js";import{className as r,effect as i,getOwner as a,readShallow as o,ref as s,style as c,template as l}from"@solidjs/web";import{createEffect as u}from"solid-js";import"@rixl/media-lit/image";var d=/* @__PURE__ */ l(`<rixl-image>`,1);function f(e,t){return e===void 0?t?!0:void 0:e}function p(e){return{imageId:e.id,imageData:e.imageData,alt:e.alt,analytics:e.analytics??!0,analyticsPage:e.analyticsPage??`standalone`,isCurrent:f(e.isCurrent,e.id),feedId:e.feedId,postId:e.postId}}const m=l=>{let f;u(()=>p(l),e=>{f&&n(f,e)}),u(()=>l.onLoadingChange,e=>{if(f&&e)return t(f,{"loading-change":t=>{t instanceof CustomEvent&&typeof t.detail==`boolean`&&e(t.detail)}})});var m=d();return s(()=>t=>{f=t,e(l.ref,t)},m),m._$owner=a(),i(()=>({e:o(l.class),t:o(l.style)}),({e,t},n)=>{r(m,e,n?.e),c(m,t,n?.t)}),m};export{m as Image};

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

@@ -0,0 +1,6 @@
+import { JSX } from "@solidjs/web";
+import { ParentComponent } from "solid-js";
+export type VideoPlayerProps = {
+  children?: JSX.Element;
+};
+export declare const VideoPlayer: ParentComponent<VideoPlayerProps>;

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

@@ -0,0 +1 @@
+import{PlayerScopeContext as e}from"../../lib/player-scope.js";import{createComponent as t}from"@solidjs/web";import"solid-js";const n=n=>{let r=crypto.randomUUID();return t(e,{value:r,get children(){return n.children}})};export{n as VideoPlayer};

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

@@ -0,0 +1,61 @@
+import { FeedPost, FontFamilyKey, Page, VideoData, VideoHeatmap, VideoLoadState, VideoTheme } from "@rixl/media-core";
+import { JSX } from "@solidjs/web";
+import { Ref } from "solid-js";
+import { RixlVideo } from "@rixl/media-lit/video";
+export type VideoLoadMode = VideoLoadState;
+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;
+  onPlay?: (event: Event) => void;
+  onPause?: (event: Event) => void;
+  onPausedChange?: (isPaused: boolean) => void;
+  onEnded?: () => void;
+  onTimeUpdate?: (event: Event) => void;
+  onLoadedMetadata?: (event: Event) => void;
+  onError?: (event: Event) => void;
+  onVolumeChange?: (event: Event) => void;
+  onLoadingChange?: (isLoading: boolean) => void;
+  onRateChange?: (event: Event) => void;
+  onQualityChange?: (event: Event) => void;
+  ref?: Ref<RixlVideo>;
+  children?: JSX.Element;
+  class?: string;
+  style?: string | JSX.CSSProperties;
+};

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

@@ -0,0 +1,5 @@
+import { VideoProps } from "./video-props.js";
+import { ParentComponent } from "solid-js";
+import "@rixl/media-lit/video";
+export declare const Video: ParentComponent<VideoProps>;
+export type { VideoProps };

package/dist/components/video/video.js

@@ -0,0 +1 @@
+import{PlayerScopeContext as e,useOptionalPlayerId as t}from"../../lib/player-scope.js";import{assignRef as n,bindElementEvents as r,syncElementProps as i}from"../../lib/sync-element.js";import{className as a,createComponent as o,effect as s,getOwner as c,insert as l,readShallow as u,ref as d,style as f,template as p}from"@solidjs/web";import{createEffect as m}from"solid-js";import"@rixl/media-lit/video";var h=/* @__PURE__ */ p(`<rixl-video>`,1);function g(e,t){let{id:n,chapters:r,children:i,ref:a,class:o,style:s,onPlay:c,onPause:l,onPausedChange:u,onEnded:d,onTimeUpdate:f,onLoadedMetadata:p,onError:m,onVolumeChange:h,onLoadingChange:g,onRateChange:_,onQualityChange:v,...y}=e;return{...y,videoId:n,playerId:t,showChapters:r}}function _(e){return{play:e.onPlay,pause:e.onPause,"paused-change":e.onPausedChange?t=>{let n=t.detail;typeof n?.paused==`boolean`&&e.onPausedChange?.(n.paused)}:void 0,ended:e.onEnded?()=>e.onEnded?.():void 0,timeupdate:e.onTimeUpdate,"loaded-metadata":e.onLoadedMetadata,error:e.onError,"volume-change":e.onVolumeChange,"loading-change":e.onLoadingChange?t=>{let n=t.detail;typeof n?.loading==`boolean`&&e.onLoadingChange?.(n.loading)}:void 0,"rate-change":e.onRateChange,"quality-change":e.onQualityChange}}const v=p=>{let v=t()??crypto.randomUUID(),y;m(()=>g(p,v),e=>{y&&i(y,e)}),m(()=>_(p),e=>{if(y)return r(y,e)});var b=h();return d(()=>e=>{y=e,n(p.ref,e)},b),b._$owner=c(),l(b,o(e,{value:v,get children(){return p.children}})),s(()=>({e:u(p.class),t:u(p.style)}),({e,t},n)=>{a(b,e,n?.e),f(b,t,n?.t)}),b};export{v as Video};

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 @@
+export{Feed}from"./components/feed/feed.js";

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 @@
+export{Image}from"./components/image/image.js";

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 { VideoLoadMode, VideoPlanType, VideoProps } from "./components/video/video-props.js";
+import { Video } from "./components/video/video.js";
+import { VideoPlayer, VideoPlayerProps } from "./components/video/video-player.js";
+import { PlayerScopeContext, PlayerScopeContextType, useOptionalPlayerId, usePlayerId } from "./lib/player-scope.js";
+import "./video.js";
+export * from "@rixl/media-core";
+export { Feed, type FeedProps, Image, type ImageProps, PlayerScopeContext, type PlayerScopeContextType, Video, type VideoLoadMode, type VideoPlanType, VideoPlayer, type VideoPlayerProps, type VideoProps, useOptionalPlayerId, usePlayerId };

package/dist/index.js

@@ -0,0 +1 @@
+import{Feed as e}from"./components/feed/feed.js";import{Image as t}from"./components/image/image.js";import{PlayerScopeContext as n,useOptionalPlayerId as r,usePlayerId as i}from"./lib/player-scope.js";import{Video as a}from"./components/video/video.js";import{VideoPlayer as o}from"./components/video/video-player.js";export*from"@rixl/media-core";export{e as Feed,t as Image,n as PlayerScopeContext,a as Video,o as VideoPlayer,r as useOptionalPlayerId,i as usePlayerId};

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

@@ -0,0 +1,8 @@
+import { UUID } from "@rixl/media-core";
+import { Context } from "solid-js";
+export type PlayerScopeContextType = Context<UUID | null> & {
+  Provider: Context<UUID | null>;
+};
+export declare const PlayerScopeContext: PlayerScopeContextType;
+export declare function useOptionalPlayerId(): UUID | null;
+export declare function usePlayerId(): UUID;

package/dist/lib/player-scope.js

@@ -0,0 +1,6 @@
+import{createContext as e,useContext as t}from"solid-js";const n=e(null);n.Provider=n;const r=n;function i(e){return`${e}() must be used inside <Video> or <VideoPlayer>.\n\nFix:
+
+  <VideoPlayer>
+    <Video id="..." theme="hideUI" />
+    <YourControls />
+  </VideoPlayer>`}function a(){return t(r)}function o(){let e=a();if(!e)throw Error(i(`usePlayerId`));return e}export{r as PlayerScopeContext,a as useOptionalPlayerId,o as usePlayerId};

package/dist/lib/sync-element.js

@@ -0,0 +1 @@
+function e(e,t){for(let[n,r]of Object.entries(t))r!==void 0&&Reflect.get(e,n)!==r&&Reflect.set(e,n,r)}function t(e,t){let n=[];for(let[r,i]of Object.entries(t))i&&(e.addEventListener(r,i),n.push([r,i]));return function(){for(let[t,r]of n)e.removeEventListener(t,r)}}function n(e,t){if(typeof e==`function`)e(t);else if(Array.isArray(e))for(let n of e)typeof n==`function`&&n(t);else typeof e==`object`&&e&&`current`in e&&(e.current=t)}export{n as assignRef,t as bindElementEvents,e as syncElementProps};

package/dist/video.d.ts

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

package/dist/video.js

@@ -0,0 +1 @@
+import{Video as e}from"./components/video/video.js";import{VideoPlayer as t}from"./components/video/video-player.js";import{PlayerScopeContext as n,useOptionalPlayerId as r,usePlayerId as i}from"./lib/player-scope.js";export{n as PlayerScopeContext,e as Video,t as VideoPlayer,r as useOptionalPlayerId,i as usePlayerId};

package/package.json

@@ -1,13 +1,56 @@
 {
   "name": "@rixl/media-solid",
-  "version": "0.0.1",
-  "description": "Solid components for Rixl Media SDK",
-  "main": "index.js",
+  "version": "1.1.1",
+  "description": "Solid video player, image components, and infinite media feeds for Rixl, with reactive props, events, and player context.",
+  "keywords": [
+    "feed",
+    "hls",
+    "image",
+    "infinite-scroll",
+    "media-sdk",
+    "rixl",
+    "solid",
+    "solidjs",
+    "typescript",
+    "video",
+    "video-player"
+  ],
+  "homepage": "https://developers.rixl.com/en/sdk/media-solid",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": "Rixl Inc.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rixlhq/mediasdk.git",
+    "directory": "packages/solid"
+  },
+  "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": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vp pack --watch",
+    "pack": "vp pack",
+    "clean": "rimraf dist node_modules"
+  },
+  "dependencies": {
+    "@rixl/media-core": "1.1.1",
+    "@rixl/media-lit": "1.1.1"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs"
+  "peerDependencies": {
+    "@solidjs/web": ">=2.0.0-rc.0",
+    "solid-js": ">=2.0.0-rc.0"
+  }
 }