@brightcove/components-embed-code-modal 1.1.1 → 1.1.2

package/build/README.md

@@ -1,109 +0,0 @@
-# studio-components-embed-code-modal
-
-## Usage
-
-### To build
-
-```bash
-npm run build
-```
-
-### Development
-
-To run this module for development clone the repo and run
-
-```bash
-npm install
-npm run demo
-```
-
-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.
-
-Navigate to [https://studio.brightcove.com/products/videocloud/media/dev/sdk:remote](https://studio.brightcove.com/products/videocloud/media/dev/sdk:remote).
-
-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)
-
-The results of the API call to retrieve players will depend on sign in permissions.
-
-## Integrating with modules
-
-This component was built for Marketing Studio modules, such as: [studio-media-module-four](https://bithub.brightcove.com/studio/studio-module-media-four).
-
-Below you will find instructions on how to use the component inside of these modules.
-
-#### Install the package
-
-```bash
-npm i @brightcove/components-embed-code-modal
-```
-
-#### Import the component and required types
-
-```ts
-import {
-  EmbedCodeModal,
-  VideoPayload,
-} from '@brightcove/components-embed-code-modal';
-```
-
-`VideoPayload` is a TypeScript interface which describes an Object that will be accepted as a prop for your `<EmbedCodeModal>` component.
-
-Here is an overview of the `VideoPayload` interface:
-
-```ts
-  videoId: string; // Video id, required
-  videoName: string; // Video title, required
-  accountId: string; // BC account id, required
-  posterUrl?: string; // Video poster url, not required
-  duration: number; // Video duration in seconds, required
-```
-
-#### Component Props
-
-The component currently takes in two props:
-
-```ts
-  language?: 'en' | 'es' | 'fr' | 'ko' | 'ja' | 'zh';
-  video: VideoPayload;
-```
-
-- The `VideoPayload` interface is exported by the component.
-- The `language` prop is optional, if not passed, the component will get the language from `StudioModule.config.lang`. Currently, we use this for testing in our local sandbox.
-
-#### Wiring Up Through the Module
-
-The modal will only render once the `video` prop has been passed into the `EmbedCodeModal` component.
-
-In order to keep our components fully decoupled, we look to our parent module's for wiring up our components together.
-
-Here's an example of how the the Media Module's VideoLibrary is wiring up two separate components in order to open the EmbedCodeModal:
-
-```ts
-const [embedVideo, setEmbedVideo] = useState<VideoPayload>(null);
-
-const handleAction = (event: DataGridAction) => {
-  if (event.type === DataGridEvents.GetCode) {
-    // build VideoPayload for EmbedCodeModal component here
-    // this way we are completely de-coupling the EmbedCodeModal from the module
-    const { payload: video } = event;
-    setEmbedVideo({
-      videoId: video.id,
-      videoName: video.name,
-      accountId: video.account_id,
-      posterUrl: video?.images?.poster?.src,
-      duration: video.duration,
-    });
-  }
-};
-```
-
-1. The Media Module imports both the `DataGrid` & `EmbedCodeModal` components. Neither component are coded to be aware of the other.
-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_.
-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.
-4. This video object is set to the module's local state.
-5. Within our JSX, our EmbedCodeModal should be passing this video object to the component: `<EmbedCodeModal video={embedVideo} />`
-6. Anytime that `embedVideo` updates in the module - it triggers the Embed Code Modal to open.
-
-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.
-
-Likewise, the Embed Code Modal could be triggered by any other number of interfaces, and this abstraction helps us better prepare for the integrations coming in our future.