@interopio/groups-ui-react 2.3.1 → 2.4.1

package/dist/cjs/defaultComponents/channelSelector/utils.d.ts

@@ -1 +1,5 @@
 export declare function IsBlackReadable(color: string): boolean;
+export declare function getChannelDirection(channelRestrictions: {
+    read: boolean;
+    write: boolean;
+}): string;

package/dist/cjs/index.js

@@ -577,10 +577,30 @@
             console.error("Error while checking readable color for '" + color + "'", error);
         }
         return false;
+    }
+    function getChannelDirection(channelRestrictions) {
+        if (!channelRestrictions) {
+            return "";
+        }
+        if (typeof channelRestrictions.read === "boolean" && typeof channelRestrictions.write === "boolean") {
+            if (channelRestrictions.read && channelRestrictions.write) {
+                return "";
+            }
+            if (channelRestrictions.read) {
+                return "subscribe";
+            }
+            if (channelRestrictions.write) {
+                return "publish";
+            }
+            return "";
+        }
+        else {
+            return "";
+        }
     }
 
     var BaseChannelSelector = function (_a) {
-        var outsideClass = _a.outsideClass, contentClass = _a.contentClass, showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
+        var outsideClass = _a.outsideClass, contentClass = _a.contentClass, showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor, direction = _a.direction, channelLabel = _a.channelLabel;
         var ref = React.useRef(null);
         var wrappedOnClick = function () {
             if (!ref.current) {
@@ -607,13 +627,15 @@
         var style = {
             background: selectedChannelColor
         };
-        return React__default["default"].createElement("div", { title: selectedChannel !== null && selectedChannel !== void 0 ? selectedChannel : "", ref: ref, style: style, onClick: wrappedOnClick, className: "t42-buttons " + outsideClass },
-            React__default["default"].createElement("div", { className: className }));
+        return React__default["default"].createElement("div", { title: selectedChannel !== null && selectedChannel !== void 0 ? selectedChannel : "", ref: ref, style: style, onClick: wrappedOnClick, className: "t42-buttons " + outsideClass }, channelLabel ?
+            React__default["default"].createElement("div", { className: className + " icon" },
+                channelLabel,
+                direction && React__default["default"].createElement("i", { className: "icon-" + direction })) : React__default["default"].createElement("div", { className: className }));
     };
 
     var FlatChannelSelector = function (_a) {
-        var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
-        return React__default["default"].createElement(BaseChannelSelector, { outsideClass: "t42-frame-caption-bar-element t42-frame-channel-selector", contentClass: "t42-frame-channel-selector-content", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor });
+        var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor, channelRestrictions = _a.channelRestrictions, channelLabel = _a.channelLabel;
+        return React__default["default"].createElement(BaseChannelSelector, { outsideClass: channelLabel ? "t42-frame-caption-bar-element t42-frame-channel-selector t42-channel-selector-direction" : "t42-frame-caption-bar-element t42-frame-channel-selector", contentClass: !channelLabel ? "t42-frame-channel-selector-content" : "", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor, direction: getChannelDirection(channelRestrictions), channelLabel: channelLabel });
     };
 
     var ExtractButton = function (_a) {
@@ -1771,7 +1793,7 @@
     var FlatCaptionBar = function (_a) {
         var moveAreaId = _a.moveAreaId, caption = _a.caption, channels = _a.channels, captionEditor = _a.captionEditor, notifyCaptionBoundsChanged = _a.notifyCaptionBoundsChanged, rest = __rest(_a, ["moveAreaId", "caption", "channels", "captionEditor", "notifyCaptionBoundsChanged"]);
         return (React__default["default"].createElement("div", { className: "t42-react-caption-bar" },
-            (channels === null || channels === void 0 ? void 0 : channels.visible) && React__default["default"].createElement(FlatChannelSelector, { showSelector: channels === null || channels === void 0 ? void 0 : channels.showSelector, selectedChannel: channels === null || channels === void 0 ? void 0 : channels.selectedChannel, selectedChannelColor: channels === null || channels === void 0 ? void 0 : channels.selectedChannelColor }),
+            (channels === null || channels === void 0 ? void 0 : channels.visible) && React__default["default"].createElement(FlatChannelSelector, { showSelector: channels === null || channels === void 0 ? void 0 : channels.showSelector, selectedChannel: channels === null || channels === void 0 ? void 0 : channels.selectedChannel, selectedChannelColor: channels === null || channels === void 0 ? void 0 : channels.selectedChannelColor, channelRestrictions: channels === null || channels === void 0 ? void 0 : channels.channelRestrictions, channelLabel: channels === null || channels === void 0 ? void 0 : channels.channelLabel }),
             React__default["default"].createElement(FlatMoveArea, { moveAreaId: moveAreaId }, captionEditor.show ? React__default["default"].createElement(FlatCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, frameId: rest.frameId })) : React__default["default"].createElement(FlatCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
             React__default["default"].createElement(FlatButtons, __assign({}, rest))));
     };
@@ -1812,8 +1834,8 @@
     };
 
     var TabChannelSelector = function (_a) {
-        var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
-        return React__default["default"].createElement(BaseChannelSelector, { outsideClass: "t42-tab-bar-element t42-tab-channel-selector", contentClass: "t42-tab-channel-selector-content", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor });
+        var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor, channelRestrictions = _a.channelRestrictions, channelLabel = _a.channelLabel;
+        return React__default["default"].createElement(BaseChannelSelector, { outsideClass: channelLabel ? "t42-tab-bar-element t42-tab-channel-selector t42-channel-selector-direction" : "t42-tab-bar-element t42-tab-channel-selector", contentClass: !channelLabel ? "t42-tab-channel-selector-content" : "", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor, direction: getChannelDirection(channelRestrictions), channelLabel: channelLabel });
     };
 
     var TabCaption = function (_a) {
@@ -3023,7 +3045,9 @@
                     showSelector: showSelector,
                     visible: options.channelSelectorVisible,
                     selectedChannel: options.selectedChannel,
-                    selectedChannelColor: options.selectedChannelColor
+                    selectedChannelColor: options.selectedChannelColor,
+                    channelRestrictions: options.channelRestrictions,
+                    channelLabel: options.channelLabel
                 };
                 var captionEditor = __assign(__assign({}, options.captionEditor), { commitChanges: function (text) {
                         webGroupsManager.commitCaptionEditing(TargetType.Frame, options.targetId, text);
@@ -3141,7 +3165,9 @@
                     showSelector: showSelector,
                     visible: options.channelSelectorVisible,
                     selectedChannel: options.selectedChannel,
-                    selectedChannelColor: (_a = options.selectedChannelColor) !== null && _a !== void 0 ? _a : options.selectedChannel // TODO remove the null check when the variable has been added
+                    selectedChannelColor: (_a = options.selectedChannelColor) !== null && _a !== void 0 ? _a : options.selectedChannel,
+                    channelRestrictions: options.channelRestrictions,
+                    channelLabel: options.channelLabel
                 };
                 var captionEditor = __assign(__assign({}, options.captionEditor), { commitChanges: function (text) {
                         webGroupsManager.commitCaptionEditing(TargetType.Tab, options.targetId, text);