@hyperstream/videoplayer 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +71 -0
  2. package/dist/index.d.mts +47 -0
  3. package/dist/index.d.ts +47 -0
  4. package/dist/index.js +26832 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +26838 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +40 -0
package/README.md ADDED
@@ -0,0 +1,71 @@
1
+ # @hyperstream/videoplayer
2
+
3
+ The official React Video Player component used by Hyperstream.
4
+ It supports HLS streaming, playlists, interactive popups, dual-mode docking, chapters, multi-language transcripts, and advanced analytics.
5
+
6
+ ## Installation
7
+
8
+ ```bash
9
+ npm install @hyperstream/videoplayer
10
+ ```
11
+
12
+ ## Basic Usage
13
+
14
+ The player is designed to be a drop-in component.
15
+
16
+ ### 1. Import the Component & Scoped Styles
17
+
18
+ ```tsx
19
+ import { HyperstreamVideoPlayer } from '@hyperstream/videoplayer';
20
+ // CRITICAL: You must import the CSS to get the player styling
21
+ import '@hyperstream/videoplayer/dist/styles.css';
22
+
23
+ export default function App() {
24
+ return (
25
+ <div style={{ maxWidth: '800px', margin: 'auto' }}>
26
+ <HyperstreamVideoPlayer
27
+ hyperstreamUrl="https://fahs.io/your-hls-stream.m3u8"
28
+ title="Welcome to the Course"
29
+ primaryColor="#6C5CE7"
30
+ autoPlay={true}
31
+ />
32
+ </div>
33
+ );
34
+ }
35
+ ```
36
+
37
+ ## CSS Safety
38
+
39
+ This package is compiled using a zero-preflight strategy. All Tailwind classes are hard-scoped to the `div[data-hyperstream-player]` wrapper.
40
+
41
+ This guarantees that:
42
+ 1. The player will **never** inherit unwanted global styles from your application.
43
+ 2. The player will **never** bleed styles out and accidentally change the styling of your application buttons or typography.
44
+
45
+ ## Props Reference
46
+
47
+ | Prop | Type | Description |
48
+ |------|------|-------------|
49
+ | `hyperstreamUrl` | `string` | The default stream URL, usually pointing to an `.m3u8` playlist. |
50
+ | `playlist` | `object` | An array of tracks for multi-video experiences. |
51
+ | `primaryColor` | `string` | Hex code. Automatically generates a complete UI color palette (dark/light hover states, sliders). |
52
+ | `thumbnail` | `string` | URL to the poster image shown before playback begins. |
53
+ | `autoPlay` | `boolean` | Whether to begin playback immediately (subject to browser policies). |
54
+
55
+ ## Non-React Environments (Wordpress, Webflow, Vanilla HTML)
56
+
57
+ If you are not using React, do **not** install this NPM package. Instead, use our Web Component script which loads an isolated iframe, guaranteeing zero Javascript or CSS conflicts with your CMS.
58
+
59
+ Place this in your HTML `<head>`:
60
+ ```html
61
+ <script src="https://video.flowautomate.com/player.js"></script>
62
+ ```
63
+
64
+ Then drop the tag anywhere on your page:
65
+ ```html
66
+ <hyperstream-video-player
67
+ src="https://fahs.io/your-video.m3u8"
68
+ primary-color="#FF0000"
69
+ title="My Lesson">
70
+ </hyperstream-video-player>
71
+ ```
package/dist/index.d.mts ADDED
@@ -0,0 +1,47 @@
1
+ import React from 'react';
2
+
3
+ /**
4
+ * DockPanel Component
5
+ *
6
+ * Responsive dock panel with chapters and transcript tabs.
7
+ * Extracted from simple-video-player.tsx for better maintainability.
8
+ */
9
+
10
+ interface PlaylistItem {
11
+ id: string;
12
+ title: string;
13
+ description?: string;
14
+ thumbnail?: string;
15
+ duration?: number;
16
+ url: string;
17
+ signature?: string;
18
+ ivhex?: string;
19
+ transcripts?: {
20
+ language: string;
21
+ url: string;
22
+ }[];
23
+ }
24
+ interface PlaylistConfig {
25
+ title?: string;
26
+ items: PlaylistItem[];
27
+ }
28
+
29
+ interface SimpleVideoPlayerProps {
30
+ poster?: string;
31
+ watermark?: string;
32
+ hyperstreamUrl?: string;
33
+ autoplay?: boolean;
34
+ muted?: boolean;
35
+ controls?: boolean;
36
+ objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
37
+ containerWidth?: number;
38
+ isMobile?: boolean;
39
+ brandColor?: string;
40
+ playlist?: PlaylistConfig;
41
+ }
42
+ declare function SimpleVideoPlayer({ poster, watermark, hyperstreamUrl, autoplay, muted, controls, objectFit, containerWidth, isMobile, brandColor, playlist, }: SimpleVideoPlayerProps): React.JSX.Element;
43
+ declare namespace SimpleVideoPlayer {
44
+ var displayName: string;
45
+ }
46
+
47
+ export { SimpleVideoPlayer as HyperstreamVideoPlayer };
package/dist/index.d.ts ADDED
@@ -0,0 +1,47 @@
1
+ import React from 'react';
2
+
3
+ /**
4
+ * DockPanel Component
5
+ *
6
+ * Responsive dock panel with chapters and transcript tabs.
7
+ * Extracted from simple-video-player.tsx for better maintainability.
8
+ */
9
+
10
+ interface PlaylistItem {
11
+ id: string;
12
+ title: string;
13
+ description?: string;
14
+ thumbnail?: string;
15
+ duration?: number;
16
+ url: string;
17
+ signature?: string;
18
+ ivhex?: string;
19
+ transcripts?: {
20
+ language: string;
21
+ url: string;
22
+ }[];
23
+ }
24
+ interface PlaylistConfig {
25
+ title?: string;
26
+ items: PlaylistItem[];
27
+ }
28
+
29
+ interface SimpleVideoPlayerProps {
30
+ poster?: string;
31
+ watermark?: string;
32
+ hyperstreamUrl?: string;
33
+ autoplay?: boolean;
34
+ muted?: boolean;
35
+ controls?: boolean;
36
+ objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
37
+ containerWidth?: number;
38
+ isMobile?: boolean;
39
+ brandColor?: string;
40
+ playlist?: PlaylistConfig;
41
+ }
42
+ declare function SimpleVideoPlayer({ poster, watermark, hyperstreamUrl, autoplay, muted, controls, objectFit, containerWidth, isMobile, brandColor, playlist, }: SimpleVideoPlayerProps): React.JSX.Element;
43
+ declare namespace SimpleVideoPlayer {
44
+ var displayName: string;
45
+ }
46
+
47
+ export { SimpleVideoPlayer as HyperstreamVideoPlayer };