bmd-videohub: add quad button routing

bbc · Jun 10, 2024 · 79292a2 · 79292a2
1 parent e96a63e
commit 79292a2
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 66 deletions.
diff --git a/src/modules/bmd-videohub/client/components/GroupButton.jsx b/src/modules/bmd-videohub/client/components/GroupButton.jsx
@@ -18,7 +18,13 @@ export default function GroupButton({ panelId, group, onClick, groupType, editMo
             defaultValue: group.label,
         });
         if (result !== false) {
-            if (await AxiosCommand(`/container/${panelId}/groups/rename/${encodeURIComponent(groupType)}/${encodeURIComponent(group.label)}/${encodeURIComponent(result)}`)) {
+            if (
+                await AxiosCommand(
+                    `/container/${panelId}/groups/rename/${encodeURIComponent(groupType)}/${encodeURIComponent(
+                        group.label
+                    )}/${encodeURIComponent(result)}`
+                )
+            ) {
                 sendAlert(`Renamed group: ${group.label} -> ${result}`, { variant: "success" });
             } else {
                 sendAlert(`Failed to rename group: ${group.label}`, { variant: "error" });
@@ -36,38 +42,35 @@ export default function GroupButton({ panelId, group, onClick, groupType, editMo
         onChange();
     };
 
-    return React.useMemo(
-        () => (
-            <BugRouterGroupButton
-                id={`group:${groupType}:${group.index}`}
-                draggable
-                onClick={onClick}
-                item={group}
-                primaryLabel={group.label}
-                selected={group.selected}
-                editMode={editMode}
-                menuItems={[
-                    {
-                        title: groupType === "destination" ? `Edit Destinations` : `Edit Sources`,
-                        icon: <BallotIcon fontSize="small" />,
-                        onClick: onEditButtons,
-                    },
-                    {
-                        title: "-",
-                    },
-                    {
-                        title: "Rename",
-                        icon: <EditIcon fontSize="small" />,
-                        onClick: handleRenameClicked,
-                    },
-                    {
-                        title: "Delete",
-                        icon: <DeleteIcon fontSize="small" />,
-                        onClick: handleDeleteClicked,
-                    },
-                ]}
-            />
-        ),
-        [group.label, group.selected, editMode]
+    return (
+        <BugRouterGroupButton
+            id={`group:${groupType}:${group.index}`}
+            draggable
+            onClick={onClick}
+            item={group}
+            primaryLabel={group.label}
+            selected={group.selected}
+            editMode={editMode}
+            menuItems={[
+                {
+                    title: groupType === "destination" ? `Edit Destinations` : `Edit Sources`,
+                    icon: <BallotIcon fontSize="small" />,
+                    onClick: onEditButtons,
+                },
+                {
+                    title: "-",
+                },
+                {
+                    title: "Rename",
+                    icon: <EditIcon fontSize="small" />,
+                    onClick: handleRenameClicked,
+                },
+                {
+                    title: "Delete",
+                    icon: <DeleteIcon fontSize="small" />,
+                    onClick: handleDeleteClicked,
+                },
+            ]}
+        />
     );
 }
diff --git a/src/modules/bmd-videohub/client/components/GroupButtons.jsx b/src/modules/bmd-videohub/client/components/GroupButtons.jsx
@@ -55,14 +55,11 @@ export default function GroupButtons({
 
     const handleGroupButtonClicked = (groupIndex) => {
         const editText = editMode ? "/edit" : "";
-        const pathItems = window.location.pathname.split("/");
-        const sourceIndex = pathItems[3] ? pathItems[3] : 0;
-        const destinationIndex = pathItems[4] ? pathItems[4] : 0;
 
         if (groupType === "source") {
-            history.push(`/panel/${panelId}${editText}/${groupIndex}/${destinationIndex}`);
+            history.push(`/panel/${panelId}${editText}/${groupIndex}/${destinationGroup}`);
         } else {
-            history.push(`/panel/${panelId}${editText}/${sourceIndex}/${groupIndex}`);
+            history.push(`/panel/${panelId}${editText}/${sourceGroup}/${groupIndex}`);
         }
     };
 
@@ -118,25 +115,23 @@ export default function GroupButtons({
         }
     };
 
-    const renderGroupButtons = () => {
-        return (
-            <>
-                {localButtons.map((group) => (
-                    <GroupButton
-                        key={group.index}
-                        group={group}
-                        onClick={() => handleGroupButtonClicked(group.index)}
-                        editMode={editMode}
-                        panelId={panelId}
-                        groupType={groupType}
-                        onChange={onChange}
-                        onEditButtons={handleEditButtonsClicked}
-                    />
-                ))}
-                {editMode && <AddGroupButton onClick={handleAddGroupClicked} />}
-            </>
-        );
-    };
+    const GroupButtons = () => (
+        <>
+            {localButtons.map((group) => (
+                <GroupButton
+                    key={group.index}
+                    group={group}
+                    onClick={() => handleGroupButtonClicked(group.index)}
+                    editMode={editMode}
+                    panelId={panelId}
+                    groupType={groupType}
+                    onChange={onChange}
+                    onEditButtons={handleEditButtonsClicked}
+                />
+            ))}
+            {editMode && <AddGroupButton onClick={handleAddGroupClicked} />}
+        </>
+    );
 
     if (!localButtons) {
         return <BugLoading />;
@@ -150,7 +145,7 @@ export default function GroupButtons({
                         items={localButtons.map((button) => `group:${groupType}:${button.index}`)}
                         strategy={horizontalListSortingStrategy}
                     >
-                        {renderGroupButtons()}
+                        <GroupButtons />
                     </SortableContext>
                 </DndContext>
             </Box>
@@ -163,7 +158,7 @@ export default function GroupButtons({
                 whiteSpace: "nowrap",
             }}
         >
-            {renderGroupButtons()}
+            <GroupButtons />
         </Box>
     );
 }
diff --git a/src/modules/bmd-videohub/client/components/RouterButton.jsx b/src/modules/bmd-videohub/client/components/RouterButton.jsx
@@ -13,6 +13,7 @@ import { useBugCustomDialog } from "@core/BugCustomDialog";
 import AddGroupDialog from "./AddGroupDialog";
 import CheckIcon from "@mui/icons-material/Check";
 import { useBugConfirmDialog } from "@core/BugConfirmDialog";
+import GridViewIcon from "@mui/icons-material/GridView";
 
 export default function RouterButton({
     panelId,
@@ -105,6 +106,23 @@ export default function RouterButton({
         onChange();
     };
 
+    const handleQuadClicked = async (event, item) => {
+        if (
+            await AxiosCommand(
+                `/container/${panelId}/quad/${button.isQuad ? `unset` : `set`}/${button.index}/${buttonType}`
+            )
+        ) {
+            sendAlert(`${button.isQuad ? `Unset` : `Set`} quad mode on ${buttonType} ${button.index + 1}`, {
+                variant: "success",
+            });
+        } else {
+            sendAlert(`Failed to ${button.isQuad ? `unset` : `set`} quad mode on ${buttonType} ${button.index + 1}`, {
+                variant: "error",
+            });
+        }
+        onChange();
+    };
+
     const handleAddGroupClicked = async (event) => {
         const groupIndexes = await customDialog({
             dialog: <AddGroupDialog groups={groups} />,
@@ -126,6 +144,7 @@ export default function RouterButton({
     const handleClick = (event) => {
         onClick(event);
     };
+
     return (
         <BugRouterButton
             id={`${buttonType}:${button.index}`}
@@ -141,6 +160,15 @@ export default function RouterButton({
             disabled={disabled}
             editMode={editMode}
             locked={button.isLocked}
+            leftIcon={
+                button.isQuad ? (
+                    <GridViewIcon
+                        sx={{
+                            fontSize: "14px !important",
+                        }}
+                    />
+                ) : null
+            }
             menuItems={[
                 {
                     title: "Rename",
@@ -175,6 +203,12 @@ export default function RouterButton({
                     icon: (item) => (item.isLocked ? <CheckIcon fontSize="small" /> : null),
                     onClick: handleLockClicked,
                 },
+                {
+                    title: "Quad",
+                    disabled: button.index % 4 !== 0,
+                    icon: (item) => (item.isQuad ? <CheckIcon fontSize="small" /> : null),
+                    onClick: handleQuadClicked,
+                },
                 {
                     title: "-",
                 },

diff --git a/src/modules/bmd-videohub/container/api/app.js b/src/modules/bmd-videohub/container/api/app.js
@@ -14,6 +14,7 @@ const destinationsRouter = require("@routes/destinations");
 const groupsRouter = require("@routes/groups");
 const validationRouter = require("@routes/validate");
 const capabilitiesRouter = require("@routes/capabilities");
+const quadRouter = require("@routes/quad");
 
 const heapInfo = require("@core/heap-info");
 
@@ -43,6 +44,7 @@ app.use("/api/destinations", destinationsRouter);
 app.use("/api/groups", groupsRouter);
 app.use("/api/validate", validationRouter);
 app.use("/api/capabilities", capabilitiesRouter);
+app.use("/api/quad", quadRouter);
 
 app.use("*", defaultRouter);
 

diff --git a/src/modules/bmd-videohub/container/api/routes/quad.js b/src/modules/bmd-videohub/container/api/routes/quad.js
@@ -0,0 +1,35 @@
+const express = require("express");
+const buttonSetQuad = require("@services/button-setquad");
+const route = express.Router();
+
+route.get("/set/:index/:type", async function (req, res, next) {
+    try {
+        res.json({
+            status: "success",
+            data: await buttonSetQuad(req.params?.type, req.params?.index, true),
+        });
+    } catch (error) {
+        console.log(error);
+        res.json({
+            status: "error",
+            message: "Failed to set quad",
+        });
+    }
+});
+
+route.get("/unset/:index/:type", async function (req, res, next) {
+    try {
+        res.json({
+            status: "success",
+            data: await buttonSetQuad(req.params?.type, req.params?.index, false),
+        });
+    } catch (error) {
+        console.log(error);
+        res.json({
+            status: "error",
+            message: "Failed to unset quad",
+        });
+    }
+});
+
+module.exports = route;
diff --git a/src/modules/bmd-videohub/container/services/button-setquad.js b/src/modules/bmd-videohub/container/services/button-setquad.js
@@ -0,0 +1,24 @@
+"use strict";
+
+const configGet = require("@core/config-get");
+const configPutViaCore = require("@core/config-putviacore");
+
+module.exports = async (type, buttonIndex, value) => {
+    const config = await configGet();
+    if (!config) {
+        return false;
+    }
+
+    // update quad
+    let typeVar = `${type}Quads`;
+    if (!config[typeVar]) {
+        config[typeVar] = [];
+    }
+
+    if (config[typeVar].length < buttonIndex) {
+        config[typeVar].fill(config[typeVar].length, buttonIndex);
+    }
+    config[typeVar][buttonIndex] = value;
+
+    return await configPutViaCore(config);
+};
diff --git a/src/modules/bmd-videohub/container/services/videohub-getdestinations.js b/src/modules/bmd-videohub/container/services/videohub-getdestinations.js
@@ -18,6 +18,7 @@ module.exports = async (groupIndex = null, showExcluded = false) => {
 
     const icons = config.destinationIcons ? config.destinationIcons : [];
     const iconColors = config.destinationIconColors ? config.destinationIconColors : [];
+    const quads = config.destinationQuads ? config.destinationQuads : [];
 
     const dataCollection = await mongoCollection("data");
 
@@ -98,6 +99,7 @@ module.exports = async (groupIndex = null, showExcluded = false) => {
                     isLocked: isLocalLocked || isRemoteLocked,
                     isLocalLocked: isLocalLocked,
                     isRemoteLocked: isRemoteLocked,
+                    isQuad: quads?.[intIndex] === true,
                     icon: icons[intIndex] ? icons[intIndex] : null,
                     iconColor: iconColors[intIndex] ? iconColors[intIndex] : "#ffffff",
                 });

diff --git a/src/modules/bmd-videohub/container/services/videohub-getsources.js b/src/modules/bmd-videohub/container/services/videohub-getsources.js
@@ -18,6 +18,8 @@ module.exports = async (destinationIndex = null, groupIndex = null, showExcluded
 
     const icons = config.sourceIcons ? config.sourceIcons : [];
     const iconColors = config.sourceIconColors ? config.sourceIconColors : [];
+    const sourceQuads = config.sourceQuads ? config.sourceQuads : [];
+    const destinationQuads = config.destinationQuads ? config.destinationQuads : [];
 
     const dataCollection = await mongoCollection("data");
 
@@ -58,8 +60,18 @@ module.exports = async (destinationIndex = null, groupIndex = null, showExcluded
 
     let selectedSourceIndex = null;
     if (destinationIndex !== null) {
-        if (dbOutputRouting && dbOutputRouting["data"][destinationIndex] !== null) {
-            selectedSourceIndex = parseInt(dbOutputRouting["data"][destinationIndex]);
+        // save the selected source index for the currently selected destination
+        if (dbOutputRouting?.["data"]?.[destinationIndex] !== null) {
+            selectedSourceIndex = parseInt(dbOutputRouting?.["data"]?.[destinationIndex]);
+        }
+
+        if (destinationQuads?.[destinationIndex] === true) {
+            // it's a quad destination, so we need to check that the following 3 sources match the following 3 destinations
+            for (let a = 1; a < 4; a++) {
+                if (parseInt(dbOutputRouting?.["data"]?.[parseInt(destinationIndex) + a]) !== selectedSourceIndex + a) {
+                    selectedSourceIndex = null;
+                }
+            }
         }
     }
 
@@ -87,6 +99,7 @@ module.exports = async (destinationIndex = null, groupIndex = null, showExcluded
                     selected: isSelected,
                     hidden: isExcluded,
                     order: order,
+                    isQuad: sourceQuads?.[intIndex] === true,
                     icon: icons[intIndex] ? icons[intIndex] : null,
                     iconColor: iconColors[intIndex] ? iconColors[intIndex] : "#ffffff",
                 });

diff --git a/src/modules/bmd-videohub/container/services/videohub-route.js b/src/modules/bmd-videohub/container/services/videohub-route.js
@@ -16,10 +16,32 @@ module.exports = async (destinatonIndex, sourceIndex) => {
         return false;
     }
 
+    const sourceQuads = config.sourceQuads ? config.sourceQuads : [];
+    const destinationQuads = config.destinationQuads ? config.destinationQuads : [];
+
+    const routeCommands = [];
+    if (destinationQuads?.[destinatonIndex] === true) {
+        // quad destination. Check sources
+        if (sourceQuads?.[sourceIndex] === true) {
+            // bullseye - route all four!
+            for (let a = 0; a < 4; a++) {
+                routeCommands.push(`${parseInt(destinatonIndex) + a} ${parseInt(sourceIndex) + a}`);
+            }
+        } else {
+            // well ... it's not ideal but we should probably route the same source to all four destinations
+            for (let a = 0; a < 4; a++) {
+                routeCommands.push(`${parseInt(destinatonIndex) + a} ${sourceIndex}`);
+            }
+        }
+    } else {
+        // just a normal route - oh well.
+        routeCommands.push(`${destinatonIndex} ${sourceIndex}`);
+    }
+
     try {
         const router = new videohub({ port: config.port, host: config.address });
         await router.connect();
-        await router.send("VIDEO OUTPUT ROUTING", `${destinatonIndex} ${sourceIndex}`);
+        await router.send("VIDEO OUTPUT ROUTING", routeCommands);
         return true;
     } catch (error) {
         logger.error("videohub-route: ", error);