@glomex/integration-react 1.1399.1 → 1.1401.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.
package/README.md CHANGED
@@ -27,7 +27,7 @@ const Player = (props: ComponentProps<typeof Integration>) => {
27
27
  const integrationRef = useRef<ComponentRef<typeof Integration>>(null);
28
28
 
29
29
  const handlePlay = () => {
30
- integrationRef.current?.play();
30
+ integrationRef.current?.ready.then(() => integrationRef.current?.play());
31
31
  };
32
32
 
33
33
  const handleContentStart = () => {
@@ -35,6 +35,16 @@ const Player = (props: ComponentProps<typeof Integration>) => {
35
35
  };
36
36
 
37
37
  useEffect(() => {
38
+ integrationRef.current?.ready.then(() => {
39
+ // interact with the API after initial ready
40
+ if (!integrationRef.current) return;
41
+ // e.g. start at 20 seconds
42
+ integrationRef.current.currentTime = 20;
43
+ // integrationRef.current.volume = 0.1
44
+ // integrationRef.current.muted = true
45
+ // integrationRef.current.play();
46
+ });
47
+ // addEventListener is available immediately (without ready)
38
48
  integrationRef.current?.addEventListener(
39
49
  IntegrationEvent.CONTENT_START,
40
50
  handleContentStart
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { ScriptType, getIntegrationCssUrl, loadIntegrationComponent } from '@glomex/integration-web-component';
2
+ import { ComponentName, ScriptType, getIntegrationCssUrl, loadIntegrationComponent } from '@glomex/integration-web-component';
3
3
  import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
4
4
  import { ExternalMediaItemReact } from './external-media-item-react.js';
5
5
  import { GlomexMediaItemReact } from './glomex-media-item-react.js';
@@ -37,6 +37,10 @@ export const Integration = forwardRef((props, ref) => {
37
37
  useImperativeHandle(ref, () => {
38
38
  const element = elementRef.current;
39
39
  element.extraContext = extraContext;
40
+ // patch ready when integration element was not upgraded yet
41
+ element.ready =
42
+ elementRef.current?.ready ||
43
+ new Promise((resolve) => window.customElements.whenDefined(ComponentName.INTEGRATION).then(() => resolve()));
40
44
  return element;
41
45
  }, [extraContext]);
42
46
  return (_jsxs(_Fragment, { children: [integrationId && _jsx("link", { rel: "stylesheet", href: getIntegrationCssUrl(integrationId) }), _jsxs("glomex-integration", { ref: elementRef, "integration-id": integrationId, "playlist-id": playlistId, index: index, hidden: hidden, "top-level-iframe": topLevelIframe, placement: placement, ...rest, children: [mediaItemComponents, children, configs && (_jsx("script", { type: ScriptType.INTEGRATION_CONFIGS, children: JSON.stringify(configs) }))] })] }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@glomex/integration-react",
3
- "version": "1.1399.1",
3
+ "version": "1.1401.0",
4
4
  "description": "React component to integrate the glomex player",
5
5
  "documentation": "https://docs.glomex.com",
6
6
  "homepage": "https://glomex.com",
@@ -28,7 +28,7 @@
28
28
  "watch": "tsc --build --watch"
29
29
  },
30
30
  "dependencies": {
31
- "@glomex/integration-web-component": "^1.1399.1"
31
+ "@glomex/integration-web-component": "^1.1401.0"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": ">=16.8.0",
@@ -42,5 +42,5 @@
42
42
  "access": "public"
43
43
  },
44
44
  "license": "MIT",
45
- "gitHead": "a4c6453117610387f4436346e84cb336d69d3c81"
45
+ "gitHead": "b883b963c989bc632c6c4dc4b70f12d4dfbebd9f"
46
46
  }