@vindral/web-sdk 3.4.4 → 4.0.0-101-g094c7a1b

package/README.md

@@ -30,13 +30,13 @@ Add the following HTML snippet, set `channelId` to channel id credential, and do
 
 ```html
 <iframe
-  src="https://embed.vindral.com/?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f"
+  src="https://player.vindral.com/?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f"
   frameborder="0"
   allowfullscreen
 ></iframe>
 ```
 
-[See the player in action](https://embed.vindral.com/?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f) or [read more about Embed Player here](https://docs.vindral.com/playout/embeddable-player).
+[See the player in action](https://player.vindral.com/?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f) or [read more about Embed Player here](https://docs.vindral.com/playout/embeddable-player).
 
 ## Installation
 
@@ -52,52 +52,47 @@ or `yarn`:
 yarn add @vindral/web-sdk
 ```
 
-### Player SDK
+### Vindral Player
 
-The Player SDK provides a ready-to-go player with controls - perfect for use cases where the embed solution is not enough, such as when access to the javascript API is needed.
+Vindral Player is our ready-to-go web component-based player for easy integration into your web applications. It is ideal for customizing controls or when the embed solution is not sufficient.
 
 **Example**
 
-This example attaches a player to an element with the id `#root`. The player will take care of activating audio when needed and provides a minimalistic UI for fullscreen, channel switching, language selection, etc.
-
-The example assumes that there is an HTML page that loads this script that has at least a div with `id="#root"`.
+To be able to use the `<vindral-player />` in your HTML you have to call `registerComponents`.
 
 ```javascript
-import { Player } from "@vindral/web-sdk"
-
-const root = document.querySelector("#root")
-
-const player = new Player({
-  url: "https://lb.cdn.vindral.com",
-  channelId: "vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f",
-})
-
-// Starts playback
-player.core.play()
+import { registerComponents } from "@vindral/web-sdk/player"
 
-// Attaches the player view to the DOM
-player.attach(root)
+registerComponents()
 ```
 
-Finally, import `@vindral/web-sdk/style.css` (or `./node_modules/@vindral/web-sdk/style.css` if that doesn't work) into your CSS. This step may differ depending on your build tools, some tools will allow you to import CSS directly in your js:
+Or use vindral-player-component.js is a self-registering variant of the web components player intended to be used from a script tag.
 
-```javascript
-import "@vindral/web-sdk/style.css"
+```html
+<script type="module" async src="https://cdn.jsdelivr.net/npm/@vindral/web-sdk/vindral-player-component.js"></script>
 ```
 
-or, from a CSS file:
+Channel id is the only required attribute when using `<vindral-player />`.
 
-```css
-@import "@vindral/web-sdk/style.css";
+```html
+<vindral-player channelId="vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f"></vindral-player>
 ```
 
-or, in your html file:
+Easy to customize controls with CSS variables.
 
-```html
-<link rel="stylesheet" href="./node_modules/@vindral/web-sdk/style.css" />
+```css
+<style>
+  vindral-player {
+    aspect-ratio: 16 / 9;
+    --vindral-fg-strong: pink;
+    --vindral-mute-button-display: none;
+    --vindral-pip-button-display: none;
+    --vindral-fullscreen-button-display: none;
+  }
+</style>
 ```
 
-We recommend that you consult the documentation for your build tool for more information.
+[Read the full API reference for all the attributes and CSS variables](https://docs.vindral.com/web-sdk/player)
 
 ### Core SDK
 
@@ -167,6 +162,55 @@ button.addEventListener("click", () => {
 })
 ```
 
+### Player SDK
+
+> **Deprecated**: The Player SDK is deprecated and has been replaced with the [Vindral Player](#vindral-player). It can still be used with `@vindral/web-sdk/legacy`.
+
+The Player SDK provides a ready-to-go player with controls - perfect for use cases where the embed solution is not enough, such as when access to the javascript API is needed.
+
+**Example**
+
+This example attaches a player to an element with the id `#root`. The player will take care of activating audio when needed and provides a minimalistic UI for fullscreen, channel switching, language selection, etc.
+
+The example assumes that there is an HTML page that loads this script that has at least a div with `id="#root"`.
+
+```javascript
+import { Player } from "@vindral/web-sdk/legacy"
+
+const root = document.querySelector("#root")
+
+const player = new Player({
+  url: "https://lb.cdn.vindral.com",
+  channelId: "vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f",
+})
+
+// Starts playback
+player.core.play()
+
+// Attaches the player view to the DOM
+player.attach(root)
+```
+
+Finally, import `@vindral/web-sdk/style.css` (or `./node_modules/@vindral/web-sdk/style.css` if that doesn't work) into your CSS. This step may differ depending on your build tools, some tools will allow you to import CSS directly in your js:
+
+```javascript
+import "@vindral/web-sdk/style.css"
+```
+
+or, from a CSS file:
+
+```css
+@import "@vindral/web-sdk/style.css";
+```
+
+or, in your html file:
+
+```html
+<link rel="stylesheet" href="./node_modules/@vindral/web-sdk/style.css" />
+```
+
+We recommend that you consult the documentation for your build tool for more information.
+
 #### License and support
 
 Vindral is a commercial product and requires an active, paid license to access and use. To obtain such a license, or in case you have any questions, do not hesitate to [get in touch](https://vindral.com/inquiries)!

package/api-client.d.ts

@@ -0,0 +1,229 @@
+/**
+ * Channel
+ */
+export interface Channel {
+	/**
+	 * Channel ID for the channel
+	 */
+	channelId: string;
+	/**
+	 * Display name
+	 */
+	name: string;
+	/**
+	 * Indicates whether there is an incoming source feed for the channel
+	 */
+	isLive: boolean;
+	/**
+	 * URLs to fetch thumbnail from
+	 */
+	thumbnailUrls: string[];
+}
+interface ClientOverrides {
+	maxVideoBitRate?: number;
+	minBufferTime?: number;
+	maxBufferTime?: number;
+	burstEnabled?: boolean;
+	sizeBasedResolutionCapEnabled?: boolean;
+	separateVideoSocketEnabled?: boolean;
+	videoCodecs?: string[];
+}
+type AudioCodec = "aac" | "opus" | "mp3";
+type VideoCodec = "h264" | "av1";
+declare const tags: unique symbol;
+type Tagged<BaseType, Tag extends PropertyKey> = BaseType & {
+	[tags]: {
+		[K in Tag]: void;
+	};
+};
+type Namespace = Tagged<Array<string>, "Namespace">;
+interface TrackObject {
+	namespace?: Namespace;
+	name: string;
+	format: string;
+	label?: string;
+	renderGroup?: number;
+	altGroup?: number;
+	initData?: string;
+	initTrack?: string;
+	depends?: Array<string>;
+	temporalId?: number;
+	spatialId?: number;
+	codec?: string;
+	mimeType?: string;
+	framerate?: [
+		number,
+		number
+	];
+	bitrate?: number;
+	width?: number;
+	height?: number;
+	samplerate?: number;
+	channelConfig?: string;
+	displayWidth?: number;
+	displayHeight?: number;
+	language?: string;
+	["com.vindral.variant_uid"]?: string;
+}
+interface CatalogRoot {
+	version: number;
+	streamingFormat?: number;
+	streamingFormatVersion?: string;
+}
+interface TracksCatalog extends CatalogRoot {
+	namespace: Namespace;
+	tracks: Array<TrackObject>;
+}
+interface RenditionProps {
+	id: number;
+	/** */
+	bitRate: number;
+	/** */
+	codecString?: string;
+	/** */
+	language?: string;
+	/** */
+	meta?: Record<string, string>;
+}
+interface VideoRenditionProps {
+	/** */
+	codec: VideoCodec;
+	/** */
+	frameRate: [
+		number,
+		number
+	];
+	/** */
+	width: number;
+	/** */
+	height: number;
+}
+interface AudioRenditionProps {
+	/** */
+	codec: AudioCodec;
+	/** */
+	channels: number;
+	/** */
+	sampleRate: number;
+}
+interface TextRenditionProps {
+	codec: "webvtt";
+	kind: "subtitles" | "captions";
+	label?: string;
+}
+type VideoRendition = VideoRenditionProps & RenditionProps;
+type AudioRendition = AudioRenditionProps & RenditionProps;
+type TextRendition = TextRenditionProps & RenditionProps;
+type Rendition = VideoRendition | AudioRendition | TextRendition;
+interface Telemetry {
+	url: string;
+	probability?: number;
+	includeErrors?: boolean;
+	includeEvents?: boolean;
+	includeStats?: boolean;
+	maxRetries?: number;
+	maxErrorReports?: number;
+	interval?: number;
+}
+interface ChannelWithCatalog extends Channel {
+	catalog: TracksCatalog;
+	renditions: Rendition[];
+	overrides?: ClientOverrides;
+}
+interface ChannelWithRenditions extends Channel {
+	renditions: Rendition[];
+	overrides?: ClientOverrides;
+}
+interface ServerCertificateHash {
+	algorithm: string;
+	value: string;
+}
+interface Edge {
+	moqUrl?: string;
+	moqWsUrl: string;
+	serverCertificateHashes?: ServerCertificateHash[];
+}
+interface MoQConnectInfo {
+	logsUrl?: string;
+	statsUrl?: string;
+	telemetry?: Telemetry;
+	channels: ChannelWithCatalog[];
+	edges: Edge[];
+}
+interface VindralConnectInfo {
+	logsUrl?: string;
+	statsUrl?: string;
+	telemetry?: Telemetry;
+	channels: ChannelWithRenditions[];
+	edges: string[];
+}
+export type ConnectInfo = VindralConnectInfo | MoQConnectInfo;
+/**
+ * ApiClientOptions
+ */
+export interface ApiClientOptions {
+	/**
+	 * String representing the URL to the public CDN API.
+	 */
+	publicEndpoint: string;
+	/**
+	 * Function that should return a string containing a signed authentication token.
+	 */
+	tokenFactory?: AuthorizationTokenFactory;
+}
+/**
+ * Represents what authorization that will be requested.
+ */
+export interface AuthorizationContext {
+	/**
+	 * The channelGroupId that might need authorization.
+	 */
+	channelGroupId?: string;
+	/**
+	 * The channelId that might need authorization.
+	 */
+	channelId?: string;
+}
+interface ConnectOptions {
+	channelGroupId?: string;
+	channelId: string;
+}
+/**
+ * AuthorizationTokenFactory
+ */
+export type AuthorizationTokenFactory = (context: AuthorizationContext) => string | undefined;
+/**
+ * Convenience class to call the public available endpoints of the Vindral Live CDN.
+ */
+export declare class ApiClient {
+	private baseUrl;
+	private tokenFactory?;
+	constructor(options: ApiClientOptions);
+	/**
+	 * @ignore
+	 * Returns everything needed to setup the connection of Vindral instance.
+	 */
+	connect(options: ConnectOptions): Promise<ConnectInfo>;
+	/**
+	 * Fetches information regarding a single channel.
+	 *
+	 * @param channelId the channel to fetch
+	 * @returns a [[Channel]] containing information about the requested channel.
+	 */
+	getChannel(channelId: string): Promise<Channel>;
+	/**
+	 * Fetches channels within a channel group
+	 *
+	 * Note: The returned list includes inactive channels - check isLive to filter out only active channels
+	 *
+	 * @param channelGroupId the channel group to fetch channels from
+	 * @returns an array of [[Channel]] that belong to the channel group
+	 */
+	getChannels(channelGroupId: string): Promise<Channel[]>;
+	private getHeaders;
+	private getAuthToken;
+	private toChannels;
+	private toChannel;
+}
+
+export {};

package/api-client.js

@@ -0,0 +1,4 @@
+import { A as o } from "./C80BN8Qb.js";
+export {
+  o as ApiClient
+};