@ekg.training/ekg-video-player 1.0.3 → 1.0.5

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 (5) hide show
  1. package/README.md +20 -5
  2. package/README.npm.md +20 -5
  3. package/dist/ekg_video_player.bundle.js +1 -1
  4. package/dist/index.html +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -13,6 +13,7 @@ A customizable React-based video player library, supporting both React and plain
13
13
  - [React](#react)
14
14
  - [ESM (Browser)](#esm-browser)
15
15
  - [UMD (Browser)](#umd-browser)
16
+ - [Limitations](#limitations)
16
17
  - [Player Props Reference](#player-props-reference)
17
18
  - [Top-level Config Object](#top-level-config-object)
18
19
  - [mediaPlayerProps (object)](#mediaplayerprops-object)
@@ -35,6 +36,12 @@ yarn add @ekg.training/ekg-video-player
35
36
 
36
37
  ## Usage
37
38
 
39
+ Below html is common and required for all examples, in which, evp-root class is neccessary to load tailwind styles used by the ekg video player
40
+
41
+ ```html
42
+ <div id="root" class="evp-root"></div>
43
+ ```
44
+
38
45
  ### React
39
46
 
40
47
  ```js
@@ -49,11 +56,11 @@ useEffect(() => {
49
56
  ### ESM (Browser)
50
57
 
51
58
  ```html
59
+ <script src="https://unpkg.com/@ekg.training/ekg-video-player@latest/dist/ekg_video_player.bundle.js"></script>
52
60
  <script type="module">
53
- import { VideoPlayer } from 'https://unpkg.com/@ekg.training/ekg-video-player@latest/dist/ekg_video_player.module.js';
54
- window.React = React;
55
- window.ReactDOM = ReactDOM;
56
- const player = new VideoPlayer('root', { mediaPlayerProps: { src: '...', poster: '...' } });
61
+ const player = new EkgVideoPlayer.VideoPlayer('root', {
62
+ mediaPlayerProps: { src: '...', poster: '...' },
63
+ });
57
64
  player.init();
58
65
  </script>
59
66
  ```
@@ -72,6 +79,10 @@ useEffect(() => {
72
79
  </script>
73
80
  ```
74
81
 
82
+ ## Limitations
83
+
84
+ 1. No UI support for youtube videos.
85
+
75
86
  ## Player Props Reference
76
87
 
77
88
  The configuration object passed to `new VideoPlayer('root', config)` (standalone JS) or as props in React usage supports the following keys. The same structure is used in both approaches.
@@ -102,6 +113,7 @@ For a full working config, see [examples/React/src/App.js](https://github.com/cl
102
113
  - `logLevel` (string): Logging level
103
114
  - `crossOrigin` (boolean): Set crossorigin attribute
104
115
  - `playsInline` (boolean): Play inline on mobile
116
+ - `trackUserPreferences` (boolean): Enable/disable tracking of user preferences
105
117
  - `loop` (boolean): Loop playback
106
118
  - `onPause`, `onPlay`, `onPlaying`, `onLoopChange`, `onTimeUpdate`, `onLoad` (function): Event handlers
107
119
 
@@ -134,14 +146,15 @@ See [`examples/React/src/App.js`](examples/React/src/App.js) or [`examples/Javas
134
146
  `handouts` (array): Downloadable handout objects (`{ language, title, url }`)
135
147
  `quizzes` (array): Quiz objects (see [`examples/React/src/App.js`](examples/React/src/App.js))
136
148
  - `isSkipQuiz` (boolean): Enable/disable quiz skipping
149
+ **Order in which factors are affecting visibility of quiz** - 1. mediaPlayerProps.trackUserPreferences if this flag is true, then isSkipQuiz value in 'custom-pref-storage' localstorage 2. videoLayoutProps.isSkipQuiz 3. default is true (i.e Quiz will not be visible)
137
150
  - `isPseudoFullscreen` (boolean): iOS fullscreen workaround
138
151
  - `toggleSkipQuiz`, `toggleIphoneFullScreen`, `toggleInfo` (function): UI toggles
139
152
  - `isQuizOpen`, `isInfoOpen` (boolean): UI state
140
- - `infoLink` (string): Info link URL
141
153
  - `chapterTracks`, `subtitleTracks` (array): Track arrays (see above)
142
154
  - `windowProps` (object): Window size/orientation
143
155
  - `translations` (object): UI translations
144
156
  - `infoLink` (string): The link (image or video) to player information (e.g. instructions to use player)
157
+ - `allowPiP` (boolean): Enable/disable availability of PIP feature
145
158
 
146
159
  ### audioLayoutProps (object)
147
160
 
@@ -188,6 +201,8 @@ The `translations` object allows you to customize UI text labels and messages. A
188
201
  | minLabel | Minutes label |
189
202
  | showInfoLabel | Show toolbar info label |
190
203
  | hideInfoLabel | Hide toolbar info label |
204
+ | warningLabel | WARNING text |
205
+ | slowInternetSpeedWarning | Slow internet speed warning |
191
206
 
192
207
  See [examples/React/src/App.js](https://github.com/close2realtraining/ekg-video-player/blob/main/examples/React/src/App.js) and [src/index.tsx](https://github.com/close2realtraining/ekg-video-player/blob/main/src/index.tsx) for real-world usage.
193
208
 
package/README.npm.md CHANGED
@@ -13,6 +13,7 @@ A customizable React-based video player library, supporting both React and plain
13
13
  - [React](#react)
14
14
  - [ESM (Browser)](#esm-browser)
15
15
  - [UMD (Browser)](#umd-browser)
16
+ - [Limitations](#limitations)
16
17
  - [Player Props Reference](#player-props-reference)
17
18
  - [Top-level Config Object](#top-level-config-object)
18
19
  - [mediaPlayerProps (object)](#mediaplayerprops-object)
@@ -35,6 +36,12 @@ yarn add @ekg.training/ekg-video-player
35
36
 
36
37
  ## Usage
37
38
 
39
+ Below html is common and required for all examples, in which, evp-root class is neccessary to load tailwind styles used by the ekg video player
40
+
41
+ ```html
42
+ <div id="root" class="evp-root"></div>
43
+ ```
44
+
38
45
  ### React
39
46
 
40
47
  ```js
@@ -49,11 +56,11 @@ useEffect(() => {
49
56
  ### ESM (Browser)
50
57
 
51
58
  ```html
59
+ <script src="https://unpkg.com/@ekg.training/ekg-video-player@latest/dist/ekg_video_player.bundle.js"></script>
52
60
  <script type="module">
53
- import { VideoPlayer } from 'https://unpkg.com/@ekg.training/ekg-video-player@latest/dist/ekg_video_player.module.js';
54
- window.React = React;
55
- window.ReactDOM = ReactDOM;
56
- const player = new VideoPlayer('root', { mediaPlayerProps: { src: '...', poster: '...' } });
61
+ const player = new EkgVideoPlayer.VideoPlayer('root', {
62
+ mediaPlayerProps: { src: '...', poster: '...' },
63
+ });
57
64
  player.init();
58
65
  </script>
59
66
  ```
@@ -72,6 +79,10 @@ useEffect(() => {
72
79
  </script>
73
80
  ```
74
81
 
82
+ ## Limitations
83
+
84
+ 1. No UI support for youtube videos.
85
+
75
86
  ## Player Props Reference
76
87
 
77
88
  The configuration object passed to `new VideoPlayer('root', config)` (standalone JS) or as props in React usage supports the following keys. The same structure is used in both approaches.
@@ -102,6 +113,7 @@ For a full working config, see [examples/React/src/App.js](https://github.com/cl
102
113
  - `logLevel` (string): Logging level
103
114
  - `crossOrigin` (boolean): Set crossorigin attribute
104
115
  - `playsInline` (boolean): Play inline on mobile
116
+ - `trackUserPreferences` (boolean): Enable/disable tracking of user preferences
105
117
  - `loop` (boolean): Loop playback
106
118
  - `onPause`, `onPlay`, `onPlaying`, `onLoopChange`, `onTimeUpdate`, `onLoad` (function): Event handlers
107
119
 
@@ -134,14 +146,15 @@ See [`examples/React/src/App.js`](examples/React/src/App.js) or [`examples/Javas
134
146
  `handouts` (array): Downloadable handout objects (`{ language, title, url }`)
135
147
  `quizzes` (array): Quiz objects (see [`examples/React/src/App.js`](examples/React/src/App.js))
136
148
  - `isSkipQuiz` (boolean): Enable/disable quiz skipping
149
+ **Order in which factors are affecting visibility of quiz** - 1. mediaPlayerProps.trackUserPreferences if this flag is true, then isSkipQuiz value in 'custom-pref-storage' localstorage 2. videoLayoutProps.isSkipQuiz 3. default is true (i.e Quiz will not be visible)
137
150
  - `isPseudoFullscreen` (boolean): iOS fullscreen workaround
138
151
  - `toggleSkipQuiz`, `toggleIphoneFullScreen`, `toggleInfo` (function): UI toggles
139
152
  - `isQuizOpen`, `isInfoOpen` (boolean): UI state
140
- - `infoLink` (string): Info link URL
141
153
  - `chapterTracks`, `subtitleTracks` (array): Track arrays (see above)
142
154
  - `windowProps` (object): Window size/orientation
143
155
  - `translations` (object): UI translations
144
156
  - `infoLink` (string): The link (image or video) to player information (e.g. instructions to use player)
157
+ - `allowPiP` (boolean): Enable/disable availability of PIP feature
145
158
 
146
159
  ### audioLayoutProps (object)
147
160
 
@@ -188,6 +201,8 @@ The `translations` object allows you to customize UI text labels and messages. A
188
201
  | minLabel | Minutes label |
189
202
  | showInfoLabel | Show toolbar info label |
190
203
  | hideInfoLabel | Hide toolbar info label |
204
+ | warningLabel | WARNING text |
205
+ | slowInternetSpeedWarning | Slow internet speed warning |
191
206
 
192
207
  See [examples/React/src/App.js](https://github.com/close2realtraining/ekg-video-player/blob/main/examples/React/src/App.js) and [src/index.tsx](https://github.com/close2realtraining/ekg-video-player/blob/main/src/index.tsx) for real-world usage.
193
208