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.
105 lines • 5.25 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useChatMessageDomElements = void 0;
var react_1 = require("react");
var enums_1 = require("../../enums");
var enum_1 = require("../../../core/enum");
var utils_1 = require("../../../data-consumption/utils");
var messageIdFromDomElement = function (element) { return ((element === null || element === void 0 ? void 0 : element.getAttribute('data-chat-message-id')) || ''); };
var useChatMessageDomElements = function (messageIds, pluginUuid) {
var _a = (0, react_1.useState)([]), domElements = _a[0], setDomElements = _a[1];
var previousMessageIds = (0, react_1.useRef)([]);
var handleDomElementUpdateEvent = (function (event) {
var _a, _b, _c;
var detail = event.detail;
if (detail.hook === enums_1.DomElementManipulationHooks.CHAT_MESSAGE) {
var pageToUpdate_1 = (_a = detail.data) === null || _a === void 0 ? void 0 : _a.page;
if (pageToUpdate_1 === undefined)
return;
if (((_b = detail.data) === null || _b === void 0 ? void 0 : _b.messages.length) === 0) {
// indicates the page was unmounted in the client
// so we remove all stored elements for that page,
// since they might be invalid.
setDomElements(function (domElementsState) {
var newDomElements = __assign({}, domElementsState);
delete newDomElements[pageToUpdate_1];
return newDomElements;
});
}
var pageDomElementsFromBbbCore_1 = (_c = detail.data) === null || _c === void 0 ? void 0 : _c.messages.map(function (item) { return item.message; });
var receivedAnythingNew = pageDomElementsFromBbbCore_1.some(function (pageDomElement) {
var _a;
return (!((_a = domElements[pageToUpdate_1]) === null || _a === void 0 ? void 0 : _a.includes(pageDomElement)));
});
if (receivedAnythingNew) {
setDomElements(function (domElementsState) {
var _a;
return (__assign(__assign({}, domElementsState), (_a = {}, _a[pageToUpdate_1] = pageDomElementsFromBbbCore_1, _a)));
});
}
}
});
(0, react_1.useEffect)(function () {
window.dispatchEvent(new CustomEvent(enum_1.HookEvents.PLUGIN_SUBSCRIBED_TO_BBB_CORE, {
detail: {
hook: enums_1.DomElementManipulationHooks.CHAT_MESSAGE,
hookArguments: {
messageIds: messageIds,
pluginUuid: pluginUuid,
},
},
}));
window.addEventListener(enum_1.HookEvents.BBB_CORE_SENT_NEW_DATA, handleDomElementUpdateEvent);
return function () {
window.dispatchEvent(new CustomEvent(enum_1.HookEvents.PLUGIN_UNSUBSCRIBED_FROM_BBB_CORE, {
detail: {
hook: enums_1.DomElementManipulationHooks.CHAT_MESSAGE,
hookArguments: {
messageIds: messageIds,
pluginUuid: pluginUuid,
},
},
}));
};
}, []);
(0, react_1.useEffect)(function () {
window.addEventListener(enum_1.HookEvents.BBB_CORE_SENT_NEW_DATA, handleDomElementUpdateEvent);
// Runs on code cleanup
return function () {
// On every `domElements` update, the event listener is removed and re-added to ensure
// the handler has access to the latest `domElements` state value.
window.removeEventListener(enum_1.HookEvents.BBB_CORE_SENT_NEW_DATA, handleDomElementUpdateEvent);
};
}, [domElements]);
var updateRequestedIds = function () {
previousMessageIds.current = messageIds;
window.dispatchEvent(new CustomEvent(enum_1.HookEvents.PLUGIN_SENT_CHANGES_TO_BBB_CORE, {
detail: {
hook: enums_1.DomElementManipulationHooks.CHAT_MESSAGE,
hookArguments: {
messageIds: messageIds,
pluginUuid: pluginUuid,
},
data: undefined,
},
}));
};
if ((0, utils_1.sortedStringify)((messageIds) || []) !== (0, utils_1.sortedStringify)(previousMessageIds.current)) {
updateRequestedIds();
}
var flattenDomElements = (0, react_1.useMemo)(function () { return (Object.values(domElements).filter(function (i) { return Array.isArray(i); }).flat()); }, [domElements]);
return flattenDomElements.filter(function (domElement) { return (messageIds.includes(messageIdFromDomElement(domElement))); });
};
exports.useChatMessageDomElements = useChatMessageDomElements;
//# sourceMappingURL=hooks.js.map