bigbluebutton-html-plugin-sdk
Version:
This repository contains the SDK for developing BigBlueButton plugins. Plugins are React components that can be loaded from external sources by the BigBlueButton HTML5 client to extend its functionalities.
85 lines • 4.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.createDataConsumptionHook = void 0;
var react_1 = require("react");
var enum_1 = require("../../core/enum");
var utils_1 = require("../utils");
var enums_1 = require("../enums");
var updateCustomHookSubscription = function (hookName, handleCustomSubscriptionUpdateEvent, previousQuery, previousVariables, currentQuery, currentVariables) {
window.dispatchEvent(new CustomEvent(enum_1.HookEvents.PLUGIN_UNSUBSCRIBED_FROM_BBB_CORE, {
detail: {
hook: hookName,
hookArguments: {
query: previousQuery,
variables: previousVariables,
},
},
}));
window.dispatchEvent(new CustomEvent(enum_1.HookEvents.PLUGIN_SUBSCRIBED_TO_BBB_CORE, {
detail: {
hook: hookName,
hookArguments: {
query: currentQuery,
variables: currentVariables,
},
},
}));
window.addEventListener(enum_1.HookEvents.BBB_CORE_SENT_NEW_DATA, handleCustomSubscriptionUpdateEvent);
};
var createDataConsumptionHook = function (hookName, hookArguments) {
var _a = (0, react_1.useState)({ loading: true }), hookData = _a[0], setHookData = _a[1];
var prevQueryRef = (0, react_1.useRef)(hookArguments === null || hookArguments === void 0 ? void 0 : hookArguments.query);
var prevVariablesRef = (0, react_1.useRef)(hookArguments === null || hookArguments === void 0 ? void 0 : hookArguments.variables);
var _b = (0, react_1.useState)(hookArguments === null || hookArguments === void 0 ? void 0 : hookArguments.query), queryState = _b[0], setQueryState = _b[1];
var _c = (0, react_1.useState)(hookArguments === null || hookArguments === void 0 ? void 0 : hookArguments.variables), variablesState = _c[0], setVariablesState = _c[1];
var handleCustomSubscriptionUpdateEvent = (function (event) {
var detail = event.detail;
if (hookArguments && event.detail.hook === hookName) {
var dataConsumptionHookArguments = detail.hookArguments;
if (queryState && detail.hookArguments && (0, utils_1.makeCustomHookIdentifierFromArgs)(dataConsumptionHookArguments) === (0, utils_1.makeCustomHookIdentifier)(queryState, variablesState)) {
setHookData(detail.data);
}
}
else if (!hookArguments && event.detail.hook === hookName) {
setHookData(detail.data);
}
});
if ((hookArguments === null || hookArguments === void 0 ? void 0 : hookArguments.query) !== queryState) {
prevQueryRef.current = queryState;
setQueryState(hookArguments === null || hookArguments === void 0 ? void 0 : hookArguments.query);
}
if ((0, utils_1.sortedStringify)(hookArguments === null || hookArguments === void 0 ? void 0 : hookArguments.variables) !== (0, utils_1.sortedStringify)(variablesState)) {
prevVariablesRef.current = variablesState;
setVariablesState(function () { return JSON.parse((0, utils_1.sortedStringify)(hookArguments === null || hookArguments === void 0 ? void 0 : hookArguments.variables)); });
}
(0, react_1.useEffect)(function () {
window.addEventListener(enum_1.HookEvents.BBB_CORE_SENT_NEW_DATA, handleCustomSubscriptionUpdateEvent);
window.dispatchEvent(new CustomEvent(enum_1.HookEvents.PLUGIN_SUBSCRIBED_TO_BBB_CORE, {
detail: {
hook: hookName,
hookArguments: hookArguments,
},
}));
return function () {
window.dispatchEvent(new CustomEvent(enum_1.HookEvents.PLUGIN_UNSUBSCRIBED_FROM_BBB_CORE, {
detail: {
hook: hookName,
hookArguments: {
query: queryState,
variables: variablesState,
},
},
}));
window.removeEventListener(enum_1.HookEvents.BBB_CORE_SENT_NEW_DATA, handleCustomSubscriptionUpdateEvent);
};
}, []);
(0, react_1.useEffect)(function () {
if (hookName === enums_1.DataConsumptionHooks.CUSTOM_SUBSCRIPTION
&& ((prevQueryRef === null || prevQueryRef === void 0 ? void 0 : prevQueryRef.current) !== queryState || prevVariablesRef.current !== variablesState)) {
updateCustomHookSubscription(hookName, handleCustomSubscriptionUpdateEvent, prevQueryRef.current, prevVariablesRef.current, queryState, variablesState);
}
}, [queryState, variablesState]);
return hookData;
};
exports.createDataConsumptionHook = createDataConsumptionHook;
//# sourceMappingURL=hookCreator.js.map