@ekg.training/ekg-video-player 1.1.1 → 1.3.0

package/README.md

@@ -155,7 +155,10 @@ See [`examples/React/src/App.js`](examples/React/src/App.js) or [`examples/Javas
 -   `translations` (object): UI translations
 -   `infoLink` (string): The link (image or video) to player information (e.g. instructions to use player)
 -   `ecgLinks` (string or array): Array of an ECG image links or url of single ECG image link
+-   `ecgNotes` (object): `{ title, content }` for ECG Notes
 -   `allowPiP` (boolean): Enable/disable availability of PIP feature
+-   `allowAnalytics` (boolean): Enable/disable Analytics to track user interaction with the video player by using Amplitude
+-   `amplitudeApiKey` (string): API key for Amplitude
 
 ### thumbnails (object)
 
@@ -210,11 +213,127 @@ The `translations` object allows you to customize UI text labels and messages. A
 | hideInfoLabel               | Hide toolbar info label                     |
 | hideECGLabel                | Hide ECG                                    |
 | showECGLabel                | Show ECG                                    |
+| ekgGraphLabel               | ECG                                         |
+| openECGNotesLbl             | Open Notes                                  |
+| closeECGNotesLbl            | Close Notes                                 |
 | warningLabel                | WARNING text                                |
 | slowInternetSpeedWarning    | Slow internet speed warning                 |
+| popupBlockedWarning         | Popup or redirects blocked warning          |
+| pipBlockedWarning           | PiP blocked warning                         |
+| thumbnailsLabel             | Thumbnails                                  |
+| onLabel                     | On                                          |
+| offLabel                    | Off                                         |
 
 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.
 
+### Amplitude for Product Analytics
+
+-   `cc_text_toggled` (boolean): tracks whether closed captions (CC) are toggled on or off.
+-   `thumbnail_toggled` (boolean): tracks whether the thumbnail preview is toggled on or off.
+-   `info_popup_toggled` (boolean): tracks whether the info popup is opened or closed.
+-   `in_vid_quiz_toggled` (boolean): tracks whether in-video quizzes are toggled on or off.
+-   `ecg_popup_toggled` (boolean): tracks whether the ECG popup is opened or closed.
+-   `ecg_notes_toggled` (boolean): tracks whether ECG notes visibility is toggled on or off.
+-   `chapter_popup_toggled` (boolean): tracks whether the chapter popup is opened or closed.
+-   `chapter_changed` (string): tracks the name of the chapter the user switched to.
+-   `pip_mode_toggled` (boolean): tracks whether Picture-in-Picture (PiP) mode is toggled on or off.
+-   `fullscreen_mode_toggled` (boolean): tracks whether fullscreen mode is toggled on or off.
+-   `handout_popup_toggled` (boolean): tracks whether the handout popup is opened or closed.
+-   `handout_file` (string): tracks which handout file the user clicked.
+-   `settings_popup_toggled` (boolean): tracks whether the settings popup is opened or closed.
+-   `playback_speed_changed` (number): tracks the playback speed chosen by the user.
+-   `volume_level_changed` (number): tracks the volume level set by the user.
+
+### ecgNotes (object)
+
+#### Extended ECG Notes Format (With JSON-driven UI Support)
+
+The `ecgNotes.content` field supports a dynamic JSON structure used by **ContentDrivenUI**.
+
+Example supported keys inside `content`:
+
+-   **text**: WhatsApp-style rich text (`*bold*`, `_italic_`, `~strike~`, code blocks, links, `
+`, `	`)
+-   **html**: Raw HTML rendered using `dangerouslySetInnerHTML`
+-   **tabs**: Array of tab objects (`{ id, label, content }`)
+-   **accordion**: Accordion sections (`{ head, content }`)
+-   **content**: Nested container enabling recursive structure (content → tabs → accordion → content → …)
+
+Example:
+
+```json
+{
+    "ecgNotes": {
+        "title": "ECG Interpretation Notes",
+        "content": {
+            "text": "*Bold text*, _italic_, and a link: https://example.com",
+            "html": "<div style='color:red'>Important alert</div>",
+            "tabs": [
+                {
+                    "id": "tab1",
+                    "label": "Overview",
+                    "content": { "text": "Overview content" }
+                }
+            ],
+            "accordion": {
+                "head": "Detailed Analysis",
+                "content": {
+                    "text": "Nested details",
+                    "html": "<span>More info</span>"
+                }
+            }
+        }
+    }
+}
+```
+
+<details>
+<summary><strong>WhatsApp Text Markup Reference</strong></summary>
+
+### WhatsApp-style Markup Table
+
+| Format        | Example      | Output     |
+| ------------- | ------------ | ---------- |
+| Bold          | `*text*`     | **text**   |
+| Italic        | `_text_`     | _text_     |
+| Strikethrough | `~text~`     | ~~text~~   |
+| Inline Code   | `` `code` `` | `code`     |
+| Newline       | `\n`         | line break |
+| Tab           | `\t`         | 4 spaces   |
+
+---
+
+**Example 1 — Links**
+
+```
+Check this: https://example.com
+Or visit [Google](https://google.com)
+Or [[https://openai.com|OpenAI]]
+```
+
+Output: <br/>
+Check this: https://example.com
+Or visit [Google](https://google.com)
+Or [OpenAI](https://openai.com)
+
+---
+
+**Example 2 — Newlines & Tabs**
+
+```
+Line 1\nLine 2\n\tIndented Line
+```
+
+Output:
+
+```
+Line 1
+Line 2
+    Indented Line
+```
+
+</details>
+
 ---
 
 ## Documentation & Examples

package/README.npm.md

@@ -155,7 +155,10 @@ See [`examples/React/src/App.js`](examples/React/src/App.js) or [`examples/Javas
 -   `translations` (object): UI translations
 -   `infoLink` (string): The link (image or video) to player information (e.g. instructions to use player)
 -   `ecgLinks` (string or array): Array of an ECG image links or url of single ECG image link
+-   `ecgNotes` (object): `{ title, content }` for ECG Notes
 -   `allowPiP` (boolean): Enable/disable availability of PIP feature
+-   `allowAnalytics` (boolean): Enable/disable Analytics to track user interaction with the video player by using Amplitude
+-   `amplitudeApiKey` (string): API key for Amplitude
 
 ### thumbnails (object)
 
@@ -210,11 +213,127 @@ The `translations` object allows you to customize UI text labels and messages. A
 | hideInfoLabel               | Hide toolbar info label                     |
 | hideECGLabel                | Hide ECG                                    |
 | showECGLabel                | Show ECG                                    |
+| ekgGraphLabel               | ECG                                         |
+| openECGNotesLbl             | Open Notes                                  |
+| closeECGNotesLbl            | Close Notes                                 |
 | warningLabel                | WARNING text                                |
 | slowInternetSpeedWarning    | Slow internet speed warning                 |
+| popupBlockedWarning         | Popup or redirects blocked warning          |
+| pipBlockedWarning           | PiP blocked warning                         |
+| thumbnailsLabel             | Thumbnails                                  |
+| onLabel                     | On                                          |
+| offLabel                    | Off                                         |
 
 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.
 
+### Amplitude for Product Analytics
+
+-   `cc_text_toggled` (boolean): tracks whether closed captions (CC) are toggled on or off.
+-   `thumbnail_toggled` (boolean): tracks whether the thumbnail preview is toggled on or off.
+-   `info_popup_toggled` (boolean): tracks whether the info popup is opened or closed.
+-   `in_vid_quiz_toggled` (boolean): tracks whether in-video quizzes are toggled on or off.
+-   `ecg_popup_toggled` (boolean): tracks whether the ECG popup is opened or closed.
+-   `ecg_notes_toggled` (boolean): tracks whether ECG notes visibility is toggled on or off.
+-   `chapter_popup_toggled` (boolean): tracks whether the chapter popup is opened or closed.
+-   `chapter_changed` (string): tracks the name of the chapter the user switched to.
+-   `pip_mode_toggled` (boolean): tracks whether Picture-in-Picture (PiP) mode is toggled on or off.
+-   `fullscreen_mode_toggled` (boolean): tracks whether fullscreen mode is toggled on or off.
+-   `handout_popup_toggled` (boolean): tracks whether the handout popup is opened or closed.
+-   `handout_file` (string): tracks which handout file the user clicked.
+-   `settings_popup_toggled` (boolean): tracks whether the settings popup is opened or closed.
+-   `playback_speed_changed` (number): tracks the playback speed chosen by the user.
+-   `volume_level_changed` (number): tracks the volume level set by the user.
+
+### ecgNotes (object)
+
+#### Extended ECG Notes Format (With JSON-driven UI Support)
+
+The `ecgNotes.content` field supports a dynamic JSON structure used by **ContentDrivenUI**.
+
+Example supported keys inside `content`:
+
+-   **text**: WhatsApp-style rich text (`*bold*`, `_italic_`, `~strike~`, code blocks, links, `
+`, `	`)
+-   **html**: Raw HTML rendered using `dangerouslySetInnerHTML`
+-   **tabs**: Array of tab objects (`{ id, label, content }`)
+-   **accordion**: Accordion sections (`{ head, content }`)
+-   **content**: Nested container enabling recursive structure (content → tabs → accordion → content → …)
+
+Example:
+
+```json
+{
+    "ecgNotes": {
+        "title": "ECG Interpretation Notes",
+        "content": {
+            "text": "*Bold text*, _italic_, and a link: https://example.com",
+            "html": "<div style='color:red'>Important alert</div>",
+            "tabs": [
+                {
+                    "id": "tab1",
+                    "label": "Overview",
+                    "content": { "text": "Overview content" }
+                }
+            ],
+            "accordion": {
+                "head": "Detailed Analysis",
+                "content": {
+                    "text": "Nested details",
+                    "html": "<span>More info</span>"
+                }
+            }
+        }
+    }
+}
+```
+
+<details>
+<summary><strong>WhatsApp Text Markup Reference</strong></summary>
+
+### WhatsApp-style Markup Table
+
+| Format        | Example      | Output     |
+| ------------- | ------------ | ---------- |
+| Bold          | `*text*`     | **text**   |
+| Italic        | `_text_`     | _text_     |
+| Strikethrough | `~text~`     | ~~text~~   |
+| Inline Code   | `` `code` `` | `code`     |
+| Newline       | `\n`         | line break |
+| Tab           | `\t`         | 4 spaces   |
+
+---
+
+**Example 1 — Links**
+
+```
+Check this: https://example.com
+Or visit [Google](https://google.com)
+Or [[https://openai.com|OpenAI]]
+```
+
+Output: <br/>
+Check this: https://example.com
+Or visit [Google](https://google.com)
+Or [OpenAI](https://openai.com)
+
+---
+
+**Example 2 — Newlines & Tabs**
+
+```
+Line 1\nLine 2\n\tIndented Line
+```
+
+Output:
+
+```
+Line 1
+Line 2
+    Indented Line
+```
+
+</details>
+
 ---
 
 ## Documentation & Examples

package/dist/3rdparty-licenses.txt

@@ -1,3 +1,203 @@
+@amplitude/analytics-browser
+MIT
+MIT License
+
+Copyright (c) 2022 Amplitude Analytics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+@amplitude/analytics-connector
+MIT
+MIT License
+
+Copyright (c) 2020 Amplitude Analytics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+@amplitude/analytics-core
+MIT
+MIT License
+
+Copyright (c) 2022 Amplitude Analytics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+@amplitude/plugin-autocapture-browser
+MIT
+MIT License
+
+Copyright (c) 2022 Amplitude Analytics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+@amplitude/plugin-network-capture-browser
+MIT
+MIT License
+
+Copyright (c) 2022 Amplitude Analytics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+@amplitude/plugin-page-url-enrichment-browser
+MIT
+MIT License
+
+Copyright (c) 2022 Amplitude Analytics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+@amplitude/plugin-page-view-tracking-browser
+MIT
+MIT License
+
+Copyright (c) 2022 Amplitude Analytics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+@amplitude/plugin-web-vitals-browser
+MIT
+MIT License
+
+Copyright (c) 2022 Amplitude Analytics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
 @vidstack/react
 MIT
 MIT License
@@ -272,3 +472,28 @@ IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
+zen-observable-ts
+MIT
+The MIT License (MIT)
+
+Copyright (c) 2021 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.