@glomex/integration-react 1.1399.0 → 1.1400.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 +11 -1
- package/dist/integration-react.js +5 -1
- package/package.json +3 -3
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.
|
|
3
|
+
"version": "1.1400.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.
|
|
31
|
+
"@glomex/integration-web-component": "^1.1400.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": "
|
|
45
|
+
"gitHead": "833e3dbaaa5e159d3ef7605d46a4c7d486cdc21d"
|
|
46
46
|
}
|