@flowplayer/spins 0.8.0 → 0.9.0

package/README.md

@@ -130,6 +130,8 @@ interface SpinsConfig {
   ui?: number;                          // UI configuration bitmask
   ima?: PlayerIMAConfig;                // IMA ads configuration
   adsFrequency?: number;                // Show ads every Nth spin (default: 10)
+  closeButton?: boolean;                // Render a close button overlay (default: false)
+  articleLabel?: string;                // Label for article links (default: "Read more")
   share?: ShareConfig;                  // Share plugin configuration
   consent?: number;                     // Consent plugin configuration
   plugins?: string[];                   // List of plugins to enable
@@ -198,6 +200,9 @@ spinsContainer.addSpins([
   - `detail.spin`: The spin container HTMLElement
   - `detail.index`: Spin index
 
+- `CLOSE` - Fired when the user clicks the close button (requires `closeButton: true`)
+  - No detail payload — the library does not remove the container; the implementor is responsible for teardown
+
 #### Media Events (`mediaEvents`)
 
 - `PLAY` - Playback started/resumed
@@ -279,6 +284,7 @@ interface SpinsConfig {
   ui?: number;
   ima?: PlayerIMAConfig;
   adsFrequency?: number;
+  articleLabel?: string;
   share?: ShareConfig;
   consent?: number;
   plugins?: string[];
@@ -295,6 +301,7 @@ interface SpinItem {
   title?: string;
   poster?: string;
   description?: string;
+  article_url?: string;  // absolute http/https URL rendered as a link pill
   subtitles?: SubtitlesConfig;
 }
 ```
@@ -396,6 +403,51 @@ container.onPlayerEvent(adEvents.AD_COMPLETED, (e) => {
 document.body.appendChild(container);
 ```
 
+### Article Links
+
+Each spin can display a link pill (e.g. "Read more") that opens an associated article. Set `article_url` per item and optionally override the label feed-wide with `articleLabel`.
+
+```typescript
+const container = createSpins({
+  playlist: [
+    {
+      url: "https://example.com/video1.mp4",
+      title: "Breaking news",
+      article_url: "https://example.com/article-1",
+    },
+    {
+      url: "https://example.com/video2.mp4",
+      title: "Follow-up story",
+      article_url: "https://example.com/article-2",
+    },
+  ],
+  token: "your-token",
+  articleLabel: "Go to article",  // default: "Read more"
+});
+```
+
+Only absolute `http`/`https` URLs are accepted. The link renders as a styled pill button above the player controls and opens in a new tab. Customers can restyle it via the `.fp-spin-link` CSS class.
+
+### Overlay with Close Button
+
+The `closeButton` option is designed for overlay patterns where the player covers part or all of the screen. When clicked, it dispatches a `spins:close` event on the container — the library never removes itself, leaving teardown to the implementor.
+
+```typescript
+import { createSpins, spinEvents } from "@flowplayer/spins";
+
+const container = createSpins({
+  playlist: "your-playlist-id",
+  token: "your-token",
+  closeButton: true,
+});
+
+container.addEventListener(spinEvents.CLOSE, () => {
+  container.remove();
+});
+
+document.body.appendChild(container);
+```
+
 ### Advertising Configuration
 
 ```typescript