@flowplayer/spins 0.1.0-rc.10 → 0.1.0-rc.12

package/README.md

@@ -3,13 +3,12 @@
 A TypeScript library for creating Flowplayer playlist components optimized for short-form video content like Reels and Shorts.
 
 ```typescript
-import { spins } from "@flowplayer/spins";
+import { createSpins } from "@flowplayer/spins";
 
-const spinsContainer = spins({ 
+const spinsContainer = createSpins({ 
   playlist: "your-playlist-id",
   token: "your-token",
   lang: "en",
-  ui: { theme: "minimal" }
 });
 document.body.appendChild(spinsContainer);
 ```
@@ -17,7 +16,7 @@ document.body.appendChild(spinsContainer);
 ### React Usage
 
 ```tsx
-import { spins, type SpinsConfig } from "@flowplayer/spins";
+import { createSpins, type SpinsConfig } from "@flowplayer/spins";
 import { useEffect, useRef } from "react";
 
 function SpinsPlayer({ playlistId }: { playlistId: string }) {
@@ -25,11 +24,10 @@ function SpinsPlayer({ playlistId }: { playlistId: string }) {
 
   useEffect(() => {
     if (containerRef.current) {
-      const spinsContainer = spins({ 
+      const spinsContainer = createSpins({ 
         playlist: playlistId,
         token: "your-token",
         lang: "en",
-        ui: { theme: "minimal" }
       });
       containerRef.current.appendChild(spinsContainer);
     }
@@ -63,11 +61,9 @@ import { spins, type SpinsConfig } from "@flowplayer/spins";
 
 // Create a playlist component for short-form content
 const config: SpinsConfig = {
-  playlist: "your-playlist-id", // or array of SpinConfig objects
+  playlist: "your-playlist-id", // or array of SpinItem objects
   token: "your-flowplayer-token",
-  lang: "en",
-  ui: { theme: "minimal" },
-  autoplay: 1
+  lang: "en"
 };
 
 const spinsContainer = spins(config);
@@ -86,7 +82,7 @@ The component automatically handles playlist loading and provides the structure
 
 ## API Reference
 
-### `spins(config: SpinsConfig): SpinsContainer`
+### `createSpins(config: SpinsConfig): SpinsContainer`
 
 Creates a Flowplayer playlist component container optimized for short-form video content.
 
@@ -95,17 +91,12 @@ Creates a Flowplayer playlist component container optimized for short-form video
 - `config.playlist: string | Array<SpinConfig>` - The playlist ID or array of spin configurations
 - `config.token: string` - Your Flowplayer token
 - `config.lang: string` - Language code (e.g., "en", "es")
-- `config.ui: object` - UI configuration options
-- `config.autoplay?: 0 | 1` - Enable/disable autoplay (optional)
-- `config.hls?: HLSConfig` - HLS-specific configuration (optional)
-- `config.ima?: PlayerIMAConfig` - IMA ads configuration (optional)
 
 #### Returns
 
-Returns a `SpinsContainer` (extends `HTMLDivElement`) with event handling capabilities:
+Returns a `SpinsContainer` (extends `HTMLElement`) with event handling capabilities:
 - `on(event, handler)` - Subscribe to events
 - `off(event, handler)` - Unsubscribe from events
-- `emit(event, data)` - Emit custom events (internal use)
 
 #### Events
 
@@ -124,7 +115,7 @@ The function gracefully handles:
 The library exports TypeScript types for full type safety:
 
 ```typescript
-import { type SpinsConfig, type SpinConfig, type SpinsContainer } from "@flowplayer/spins";
+import { type SpinsConfig, type SpinItem, type SpinsContainer } from "@flowplayer/spins";
 ```
 
 ### `SpinsConfig`
@@ -133,38 +124,29 @@ The main configuration interface:
 
 ```typescript
 interface SpinsConfig {
-  playlist: string | Array<SpinConfig>;
+  playlist: string | Array<SpinItem>;
   token: string;
   lang: string;
-  ui: Config["ui"];
-  autoplay?: 0 | 1;
-  hls?: HLSConfig["hls"];
-  ima?: PlayerIMAConfig;
 }
 ```
 
-### `SpinConfig`
+### `SpinItem`
 
 Individual spin configuration:
 
 ```typescript
-interface SpinConfig {
+interface SpinItem {
   src: Config["src"];
   title?: string;
   poster?: string;
   description?: string;
   subtitles?: SubtitlesConfig["subtitles"];
-  thumbnails: ThumbnailsConfig["thumbnails"];
-  ima?: PlayerIMAConfig;
 }
 ```
 
 ## CSS Styling
 
 The component includes default CSS styling optimized for short-form video content. Styles are imported from:
-- `@flowplayer/spins/dist/spins.css` - Component-specific styles
-- Flowplayer CDN - Base player styles loaded automatically
-
 You can override styles by targeting the spins container and its children:
 
 ```css