@brightcove/components-embed-code-modal 0.1.24 → 0.1.26
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.
- package/README.md +13 -7
- package/__tests__/InteractivityProject.test.d.ts +2 -0
- package/__tests__/InteractivityProject.test.d.ts.map +1 -0
- package/index.js +2 -2
- package/index.js.map +1 -1
- package/package.json +2 -2
- package/src/index.d.ts +3 -2
- package/src/index.d.ts.map +1 -1
- package/src/js/EmbedCodeModal.d.ts +2 -2
- package/src/js/EmbedCodeModal.d.ts.map +1 -1
- package/src/js/components/EmbedCopySection.d.ts.map +1 -1
- package/src/js/components/ModalContainer.d.ts +1 -1
- package/src/js/components/ModalContainer.d.ts.map +1 -1
- package/src/js/components/PlayerPreview.d.ts +1 -1
- package/src/js/components/PlayerPreview.d.ts.map +1 -1
- package/src/js/components/PlayersDropdown.d.ts +3 -1
- package/src/js/components/PlayersDropdown.d.ts.map +1 -1
- package/src/js/components/TabsSection.d.ts +1 -0
- package/src/js/components/TabsSection.d.ts.map +1 -1
- package/src/js/components/TitleWithTooltip.d.ts +3 -3
- package/src/js/components/TitleWithTooltip.d.ts.map +1 -1
- package/src/js/components/VideoPlayer.d.ts +5 -2
- package/src/js/components/VideoPlayer.d.ts.map +1 -1
- package/src/js/constants/pluginsRegistry.d.ts +1 -0
- package/src/js/constants/pluginsRegistry.d.ts.map +1 -1
- package/src/js/types/EmbedCodeModalProps.d.ts +12 -3
- package/src/js/types/EmbedCodeModalProps.d.ts.map +1 -1
- package/src/js/types/studioModule.d.ts +1 -9
- package/src/js/types/studioModule.d.ts.map +1 -1
- package/src/js/utils/addPluginsDataToPlayers.d.ts +2 -1
- package/src/js/utils/addPluginsDataToPlayers.d.ts.map +1 -1
- package/src/js/utils/call.d.ts +7 -3
- package/src/js/utils/call.d.ts.map +1 -1
- package/src/js/utils/util.d.ts +8 -1
- package/src/js/utils/util.d.ts.map +1 -1
- package/src/module.d.ts +2 -0
- package/src/module.d.ts.map +1 -0
- package/src/types/studio.d.ts +170 -0
- package/src/types/studio.d.ts.map +1 -0
- package/__tests__/EmbedCodeModalComponent.spec.d.ts +0 -2
- package/__tests__/EmbedCodeModalComponent.spec.d.ts.map +0 -1
- package/src/js/EmbedCode.d.ts +0 -4
- package/src/js/EmbedCode.d.ts.map +0 -1
- package/src/js/EmbedCodeModalComponent.d.ts +0 -4
- package/src/js/EmbedCodeModalComponent.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -17,7 +17,13 @@ npm install
|
|
|
17
17
|
npm run demo
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
Sign in to Studio with a Studio UI (Marketing Studio) enabled account. If necessary, click the Profile icon and then the Switch to Studio link.
|
|
21
|
+
|
|
22
|
+
Navigate to [https://studio.brightcove.com/products/videocloud/media/dev/sdk:remote](https://studio.brightcove.com/products/videocloud/media/dev/sdk:remote).
|
|
23
|
+
|
|
24
|
+
The App runs at [https://localhost.brightcove.com:12345/js/app.js](https://localhost.brightcove.com:12345/js/app.js) as described in [Creating a Module](https://brightcove.atlassian.net/wiki/spaces/APPS/pages/2287471973/Creating+A+Module#How-does-that-dev%2Fsdk%3Aremote-URL-work%3F)
|
|
25
|
+
|
|
26
|
+
The results of the API call to retrieve players will depend on sign in permissions.
|
|
21
27
|
|
|
22
28
|
## Integrating with modules
|
|
23
29
|
|
|
@@ -91,12 +97,12 @@ const handleAction = (event: DataGridAction) => {
|
|
|
91
97
|
};
|
|
92
98
|
```
|
|
93
99
|
|
|
94
|
-
1
|
|
95
|
-
2
|
|
96
|
-
3
|
|
97
|
-
4
|
|
98
|
-
5
|
|
99
|
-
6
|
|
100
|
+
1. The Media Module imports both the `DataGrid` & `EmbedCodeModal` components. Neither component are coded to be aware of the other.
|
|
101
|
+
2. The `DataGrid` component dispatches the `GetCode` action to tell its parent module: _I would like to retrieve some code, go and do that, however your module handles this action_.
|
|
102
|
+
3. The Media Module handles this action by creating a new payload with the video information handed off by the DataGrid. It knows that it wants to open the EmbedCodeModal, so it will look to the `VideoPayload` interface to create what it needs.
|
|
103
|
+
4. This video object is set to the module's local state.
|
|
104
|
+
5. Within our JSX, our EmbedCodeModal should be passing this video object to the component: `<EmbedCodeModal video={embedVideo} />`
|
|
105
|
+
6. Anytime that `embedVideo` updates in the module - it triggers the Embed Code Modal to open.
|
|
100
106
|
|
|
101
107
|
The reasons we have wired things up this way has been to achieve our goals of keeping micro-frontends decoupled. The EmbedCodeModal & the DataGrid are not interacting directly with each other. The DataGrid is providing video data that is being used, but when it triggers a `Get Code` event, it can just send an entire Video Object along with it. It doesn't need to know exactly what information the Embed Code Modal needs in order to successfully operate.
|
|
102
108
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractivityProject.test.d.ts","sourceRoot":"","sources":["../../__tests__/InteractivityProject.test.tsx"],"names":[],"mappings":""}
|