WIP! feat: add media & html websocket connections

.env.sample

@@ -14,3 +14,6 @@ BCRYPT_SALT_ROUNDS=${BCRYPT_SALT_ROUNDS:-10}
 
 # i18n
 UI_LANG=${UI_LANG:-en}
+
+# Mediaplayer - path on the system controller
+MEDIAPLAYER_PLACEHOLDER=/media/media_placeholder.mp4

package.json

@@ -10,7 +10,7 @@
     "pretty:format": "prettier --write .",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "lint": "next lint",
-    "dev": "./update_gui_version.sh && next dev",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "version:rc": "npm version prerelease --preid=rc",
@@ -32,6 +32,7 @@
     "@sinclair/typebox": "^0.25.24",
     "@tabler/icons": "^2.22.0",
     "@tabler/icons-react": "^2.20.0",
+    "@types/ws": "^8.5.12",
     "bcrypt": "^5.1.0",
     "cron": "^2.3.1",
     "date-fns": "^2.30.0",
@@ -48,7 +49,8 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "tailwind-merge": "^1.13.2",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",

src/api/agileLive/websocket.ts

@@ -0,0 +1,47 @@
+import WebSocket from 'ws';
+
+function createWebSocket(): Promise<WebSocket> {
+  return new Promise((resolve, reject) => {
+    const ws = new WebSocket(`ws://${process.env.AGILE_WEBSOCKET}`);
+    ws.on('error', reject);
+    ws.on('open', () => {
+      // const send = ws.send.bind(ws);
+      // ws.send = (message) => {
+      //   console.debug(`[websocket] sending message: ${message}`);
+      //   send(message);
+      // };
+      resolve(ws);
+    });
+  });
+}
+
+export async function createHtmlWebSocket() {
+  const ws = await createWebSocket();
+  return {
+    create: (input: number) => {
+      ws.send(`html create ${input} 1920 1080`);
+      // delay the loading of the placeholder page to ensure the browser instance is ready
+      setTimeout(() => {
+        ws.send(
+          `html load ${input} ${process.env.NEXTAUTH_URL}/html_input?input=${input}`
+        );
+      }, 1000);
+    },
+    close: (input: number) => {
+      ws.send(`html close ${input}`);
+    }
+  };
+}
+
+export async function createMediaplayerWebSocket() {
+  const ws = await createWebSocket();
+  return {
+    create: (input: number) => {
+      ws.send(`media create ${input} ${process.env.MEDIAPLAYER_PLACEHOLDER}`);
+      ws.send(`media play ${input}`);
+    },
+    close: (input: number) => {
+      ws.send(`media close ${input}`);
+    }
+  };
+}

src/app/html_input/page.tsx

@@ -0,0 +1,10 @@
+import { PageProps } from '../../../.next/types/app/html_input/page';
+
+export default function HtmlInput({ searchParams: { input } }: PageProps) {
+  return (
+    <div className="fixed top-0 left-0 h-screen w-screen bg-white flex flex-col gap-12 justify-center items-center">
+      <p className="text-9xl font-extrabold">HTML INPUT</p>
+      <p className="text-8xl font-bold">{input}</p>
+    </div>
+  );
+}

src/app/production/[id]/page.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState, KeyboardEvent } from 'react';
 import { PageProps } from '../../../../.next/types/app/production/[id]/page';
 import SourceListItem from '../../../components/sourceListItem/SourceListItem';
 import FilterOptions from '../../../components/filter/FilterOptions';
-import { AddSource } from '../../../components/addSource/AddSource';
+import { AddInput } from '../../../components/addInput/AddInput';
 import { IconX } from '@tabler/icons-react';
 import { useSources } from '../../../hooks/sources/useSources';
 import {
@@ -722,14 +722,20 @@ export default function ProductionConfiguration({ params }: PageProps) {
                 )}
               </DndProvider>
             )}
-            <AddSource
+            <AddInput
               disabled={
                 productionSetup?.production_settings === undefined ||
                 productionSetup?.production_settings === null
               }
-              onClick={() => {
+              onClickSource={() => {
                 setInventoryVisible(true);
               }}
+              onClickHtml={() => {
+                /* */
+              }}
+              onClickMediaplayer={() => {
+                /* */
+              }}
             />
           </div>
           <div className="w-full flex gap-2 p-3">

src/components/addInput/AddInput.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  IconBrowserPlus,
+  IconPhotoPlus,
+  IconVideoPlus
+} from '@tabler/icons-react';
+import { useTranslate } from '../../i18n/useTranslate';
+
+type AddInputProps = {
+  onClickSource: () => void;
+  onClickHtml: () => void;
+  onClickMediaplayer: () => void;
+  disabled: boolean;
+};
+export function AddInput({
+  onClickSource,
+  onClickHtml,
+  onClickMediaplayer,
+  disabled
+}: AddInputProps) {
+  const t = useTranslate();
+  return (
+    <div
+      className={`bg-zinc-700 aspect-video m-2 p-2 text-p border-2 border-zinc-300 rounded flex flex-col gap-2 justify-center items-center ${
+        disabled ? 'opacity-10' : 'opacity-100'
+      }`}
+    >
+      <button
+        className="flex bg-button-bg p-2 rounded"
+        onClick={() => {
+          !disabled && onClickSource();
+        }}
+      >
+        <IconVideoPlus className="mr-2" />
+        <span>{t('production.add_source')}</span>
+      </button>
+      <button
+        className="flex bg-button-bg p-2 rounded"
+        onClick={() => {
+          !disabled && onClickHtml();
+        }}
+      >
+        <IconBrowserPlus className="mr-2" />
+        <span>{'Add Html'}</span>
+      </button>
+      <button
+        className="flex bg-button-bg p-2 rounded"
+        onClick={() => {
+          !disabled && onClickMediaplayer();
+        }}
+      >
+        <IconPhotoPlus className="mr-2" />
+        <span>{'Add Mediaplayer'}</span>
+      </button>
+    </div>
+  );
+}

src/hooks/productions.ts

@@ -11,7 +11,8 @@ export function usePostProduction() {
         isActive: false,
         name,
         sources: [],
-        selectedPresetRef: undefined
+        html: [],
+        mediaplayers: []
       })
     });
     if (response.ok) {

src/interfaces/production.ts

@@ -3,11 +3,25 @@ import { SourceReference } from './Source';
 import { ControlConnection } from './controlConnections';
 import { PipelineSettings } from './pipeline';
 
+interface HtmlReference {
+  _id: string;
+  input_slot: number;
+  label: string;
+}
+
+interface MediaplayerReference {
+  _id: string;
+  input_slot: number;
+  label: string;
+}
+
 export interface Production {
   _id: string;
   isActive: boolean;
   name: string;
   sources: SourceReference[];
+  html: HtmlReference[];
+  mediaplayers: MediaplayerReference[];
   production_settings: ProductionSettings;
 }
 

src/middleware.ts

@@ -41,4 +41,4 @@ export default withAuth(function middleware(req) {
   }
 });
 
-export const config = { matcher: ['/', '/((?!api|images).*)/'] };
+export const config = { matcher: ['/', '/((?!api|images|html_input).*)/'] };