Merge pull request #120 from nebulabroadcast/playout-plugins-in-web-interface

Playout plugins in the web interface

Author: martastain

backend/api/scheduler/scheduler.py

@@ -5,6 +5,7 @@
 from .models import SchedulerResponseModel
 from .utils import delete_events, get_event_at_time, get_events_in_range
 
+
 async def scheduler(
     id_channel: int,
     date: str | None = None,

backend/nebula/helpers/coalescer.py

@@ -17,16 +17,17 @@
 ```
 async def fetch_data(item_id: int):
     print(f"Fetching data for {item_id}...")
-    await asyncio.sleep(2) # Simulate network call
+    await asyncio.sleep(2)  # Simulate network call
     return f"Data for {item_id}"
 
+
 coalescer = Coalescer()
 
 # These calls will be coalesced if made close together
 
 task1 = asyncio.create_task(coalescer(fetch_data, item_id=1))
-task2 = asyncio.create_task(coalescer(fetch_data, item_id=1)) # Will use task1's future
-task3 = asyncio.create_task(coalescer(fetch_data, item_id=2)) # New actual call
+task2 = asyncio.create_task(coalescer(fetch_data, item_id=1))  # Will use task1's future
+task3 = asyncio.create_task(coalescer(fetch_data, item_id=2))  # New actual call
 
 result1 = await task1
 result2 = await task2

backend/nebula/settings/models.py

@@ -124,7 +124,9 @@ class SSOProvider(SettingsModel):
         Field(
             title="Entrypoint",
             description="URL to the SSO provider configuration endpoint",
-            examples=["https://iam.example.com/realms/nebula/.well-known/openid-configuration"],
+            examples=[
+                "https://iam.example.com/realms/nebula/.well-known/openid-configuration"
+            ],
         ),
     ] = None
 

frontend/src/components/Layout.jsx

@@ -52,13 +52,22 @@ const Navbar = styled.nav`
     align-items: center;
   }
 `;
+
 const Spacer = styled.div`
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
 `;
 
+const Section = styled.section`
+  display: flex;
+  padding: 12px;
+  border-radius: 5px;
+  background-color: var(--color-surface-02);
+  border: 1px solid transparent;
+`;
+
 const ToolbarSeparator = styled.div`
   border-left: 1px solid ${getTheme().colors.surface04};
   height: 100%;
@@ -79,4 +88,4 @@ const PanelHeader = styled.h2`
   gap: 8px;
 `;
 
-export { Navbar, Spacer, ToolbarSeparator, PanelHeader };
+export { Navbar, Spacer, ToolbarSeparator, PanelHeader, Section };

frontend/src/components/Select.jsx

@@ -103,7 +103,7 @@ const Select = ({
     );
   }, [dialogVisible]);
 
-  if (selectionMode === 'single' && options.length < 10) {
+  if (selectionMode === 'single' && options.length < 20) {
     return (
       <StyledHTMLSelect
         value={value || ''}
@@ -112,7 +112,7 @@ const Select = ({
         }}
         style={style}
       >
-        <option value={null}></option>
+        <option value={''}></option>
         {options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.title}

frontend/src/components/Timestamp.jsx

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 import { getTheme } from './theme';
+import { dateToDateString } from '/src/utils';
+import { dateToTimeString } from '/src/utils';
 
 const TimestampWrapper = styled.div`
   display: flex;
@@ -18,18 +20,8 @@ const TimestampWrapper = styled.div`
 const Timestamp = ({ timestamp, mode, ...props }) => {
   if (!timestamp) return <></>;
   const localDateTime = new Date(timestamp * 1000);
-
-  const yy = localDateTime.getFullYear();
-  const mm = localDateTime.getMonth() + 1; // Months are zero-based
-  const dd = localDateTime.getDate();
-
-  const hh = localDateTime.getHours();
-  const min = localDateTime.getMinutes();
-  const ss = localDateTime.getSeconds();
-
-  const pad = (n) => String(n).padStart(2, '0');
-  const dateStr = `${yy}-${pad(mm)}-${pad(dd)}`;
-  const timeStr = `${hh}:${pad(min)}:${pad(ss)}`;
+  const dateStr = dateToDateString(localDateTime);
+  const timeStr = dateToTimeString(localDateTime);
 
   return (
     <TimestampWrapper {...props}>

frontend/src/components/index.jsx

@@ -24,4 +24,4 @@ export { default as Timestamp } from './Timestamp';
 
 export { Form, FormRow } from './Form';
 export { Loader, LoaderWrapper } from './Loader';
-export { Navbar, Spacer, ToolbarSeparator, PanelHeader } from './Layout';
+export { Navbar, Spacer, ToolbarSeparator, PanelHeader, Section } from './Layout';

frontend/src/containers/Browser/Browser.jsx

@@ -5,7 +5,7 @@ import { debounce } from 'lodash';
 import clsx from 'clsx';
 
 import nebula from '/src/nebula';
-import { Table } from '/src/components';
+import { Table, Section } from '/src/components';
 import Pagination from '/src/containers/Pagination';
 import { setCurrentView, setSelectedAssets, setFocusedAsset } from '/src/actions';
 import { useLocalStorage, useDialog } from '/src/hooks';
@@ -269,7 +269,7 @@ const BrowserTable = ({ isDragging }) => {
 
   return (
     <>
-      <section className="grow">
+      <Section className="grow">
         <Table
           data={data}
           columns={columns}
@@ -289,7 +289,7 @@ const BrowserTable = ({ isDragging }) => {
             setSortDirection(sortDirection);
           }}
         />
-      </section>
+      </Section>
       <Pagination page={page} setPage={setPage} hasMore={hasMore} />
     </>
   );

frontend/src/containers/Calendar/Calendar.jsx

@@ -13,6 +13,7 @@ import drawMarks from './drawMarks';
 import drawEvents from './drawEvents';
 
 import { useLocalStorage } from '/src/hooks';
+import { dateToDateString } from '/src/utils';
 
 const CalendarCanvas = styled.canvas`
   background-color: #24202e;
@@ -91,7 +92,7 @@ const Calendar = ({
     return { x, y };
   };
 
-  const eventAtPos = () => {
+  const eventAtPos = useCallback(() => {
     if (!cursorTime.current) return null;
     const currentTs = cursorTime.current.getTime() / 1000;
 
@@ -127,7 +128,7 @@ const Calendar = ({
     }
     // no valid event under the cursor
     return null;
-  };
+  }, [events, dayStartOffsetSeconds]);
 
   // Update drawParams reference
 
@@ -139,6 +140,7 @@ const Calendar = ({
     drawParams.current.pos2time = pos2time;
     drawParams.current.time2pos = time2pos;
     drawParams.current.startTime = startTime;
+    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [drawParams.current, dayRef.current, zoom, startTime]);
 
   //
@@ -204,6 +206,7 @@ const Calendar = ({
 
   useEffect(() => {
     drawCalendar();
+    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cursorTime.current, events]);
 
   // Event handlers
@@ -256,7 +259,8 @@ const Calendar = ({
     const basePath = '/mam/rundown';
     const searchParams = new URLSearchParams(location.search);
     const startTs = event.start - dayStartOffsetSeconds;
-    const targetDate = new Date(startTs * 1000).toISOString().slice(0, 10);
+    const localDateTime = new Date(startTs * 1000);
+    const targetDate = dateToDateString(localDateTime);
     searchParams.set('date', targetDate);
     const hash = `#${event.id}`;
     const fullPath = `${basePath}?${searchParams.toString()}${hash}`;
@@ -330,6 +334,7 @@ const Calendar = ({
       calendarRef.current.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
     };
+    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarRef.current, startTime]);
 
   //
@@ -408,7 +413,7 @@ const Calendar = ({
       const dayStartTs = weekStartTs + i * 24 * 3600;
       // get date in YYYY-MM-DD format
       const jsDate = new Date(dayStartTs * 1000);
-      const date = jsDate.toISOString().slice(0, 10);
+      const date = dateToDateString(jsDate);
       const dayName = jsDate.toLocaleDateString(nebula.locale, {
         day: 'numeric',
         month: 'short',
@@ -433,12 +438,12 @@ const Calendar = ({
       });
     }
     return dayStyles;
-  }, [startTime]);
+  }, [startTime, dayStartOffsetSeconds]);
 
   // yes. this is very ugly, but i need that reference to one day
   // to get its width
   return (
-    <CalendarWrapper scrollbarWidth={scrollbarWidth} clockWidth={CLOCK_WIDTH}>
+    <CalendarWrapper scrollbarwidth={scrollbarWidth} clockwidth={CLOCK_WIDTH}>
       <div className="calendar-header">
         {dstyles.map((d, i) => {
           const r = i === 0 ? dayRef : null;

frontend/src/containers/Calendar/CalendarWrapper.jsx

@@ -12,9 +12,9 @@ const CalendarWrapper = styled.div`
     user-drag: none;
     display: flex;
     margin-right: ${(props) =>
-      props.scrollbarWidth}px; /* Dynamic padding to account for scrollbar */
+      props.scrollbarwidth}px; /* Dynamic padding to account for scrollbar */
     margin-left: ${(props) =>
-      props.clockWidth}px; /* Dynamic padding to account for scrollbar */
+      props.clockwidth}px; /* Dynamic padding to account for scrollbar */
 
     .calendar-day {
       flex: 1;