Merge pull request #92 from nebulabroadcast/martastain/channel-switcher

Add channel switcher to Navbar

Author: martastain

frontend/src/actions.js

@@ -8,6 +8,7 @@ const initialState = {
   selectedAssets: [],
   focusedAsset: null,
   pageTitle: '',
+  currentChannel: JSON.parse(localStorage.getItem('currentChannel') || 'null'),
 }
 
 const contextSlice = createSlice({
@@ -66,6 +67,13 @@ const contextSlice = createSlice({
       state.sendToIds = undefined
       state.sendToDialogVisible = false
     },
+
+    setCurrentChannel: (state, action) => {
+      console.debug('setCurrentChannel', action.payload)
+      state.currentChannel = action.payload
+      localStorage.setItem('currentChannel', JSON.stringify(action.payload))
+      return state
+    },
   },
 })
 
@@ -79,6 +87,7 @@ export const {
   setPageTitle,
   showSendToDialog,
   hideSendToDialog,
+  setCurrentChannel,
 } = contextSlice.actions
 
 export default contextSlice.reducer

frontend/src/app.jsx

@@ -15,12 +15,14 @@ import ServicesPage from '/src/pages/ServicesPage'
 import ToolPage from '/src/pages/ToolPage'
 import ProfilePage from '/src/pages/ProfilePage'
 import UsersPage from '/src/pages/UsersPage'
+import Dropdown from '/src/components/Dropdown'
 
 const App = () => {
   const [accessToken, setAccessToken] = useLocalStorage('accessToken', null)
   const [errorCode, setErrorCode] = useState(null)
   const [loading, setLoading] = useState(true)
   const [initData, setInitData] = useState(null)
+  const [channels, setChannels] = useState([])
 
   // Ensure server connection
 
@@ -56,6 +58,24 @@ const App = () => {
       .finally(() => setLoading(false))
   }, [accessToken])
 
+  useEffect(() => {
+    if (initData?.settings?.channels) {
+      setChannels(initData.settings.channels)
+      const mostRecentChannel = JSON.parse(
+        localStorage.getItem('currentChannel')
+      )
+      if (mostRecentChannel) {
+        setCurrentChannel(mostRecentChannel)
+      } else if (initData.settings.channels.length > 0) {
+        setCurrentChannel(initData.settings.channels[0])
+      }
+    }
+  }, [initData])
+
+  const handleChannelChange = (channel) => {
+    setCurrentChannel(channel)
+  }
+
   // Render
 
   if (loading) return <LoadingPage />

frontend/src/components/Dropdown.jsx

@@ -77,6 +77,7 @@ const Dropdown = ({
   contentStyle = {},
   value = null,
   disabled = false,
+  defaultValue = null,
 }) => {
   if (align === 'right') contentStyle['right'] = 0
 

frontend/src/containers/Navbar.jsx

@@ -1,8 +1,9 @@
 import nebula from '/src/nebula'
 import styled from 'styled-components'
 import { useMemo } from 'react'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import { NavLink, useNavigate } from 'react-router-dom'
+import { setCurrentChannel } from '/src/actions'
 
 import { Navbar, Dropdown } from '/src/components'
 
@@ -83,8 +84,9 @@ const logout = () => {
 
 const NavBar = () => {
   const navigate = useNavigate()
+  const dispatch = useDispatch()
   const focusedAsset = useSelector((state) => state.context.focusedAsset)
-
+  const currentChannel = useSelector((state) => state.context.currentChannel)
   const mamSuffix = focusedAsset ? `?asset=${focusedAsset}` : ''
 
   const mainMenuOptions = useMemo(() => {
@@ -114,6 +116,35 @@ const NavBar = () => {
     return result
   }, [])
 
+  const channelSwitcher = useMemo(() => {
+    if ((nebula.settings?.playout_channels || []).length < 2) {
+      if (nebula.settings?.playout_channels.length === 1) {
+        dispatch(setCurrentChannel(nebula.settings.playout_channels[0].id))
+      }
+      return null
+    }
+
+    if (!nebula.experimental) return null
+
+    const channelOptions = nebula.settings?.playout_channels.map((channel) => ({
+      label: channel.name,
+      onClick: () => dispatch(setCurrentChannel(channel.id)),
+    }))
+
+    const currentChannelName = nebula.settings?.playout_channels.find(
+      (channel) => channel.id === currentChannel
+    )?.name
+
+    return (
+      <Dropdown
+        align="right"
+        options={channelOptions}
+        buttonStyle={{ background: 'none' }}
+        label={currentChannelName}
+      />
+    )
+  }, [nebula.settings?.playout_channels, currentChannel])
+
   return (
     <Navbar>
       <div className="left">
@@ -136,6 +167,7 @@ const NavBar = () => {
         <PageTitle />
       </div>
       <div className="right">
+        {channelSwitcher}
         <Dropdown
           icon="apps"
           align="right"

frontend/src/hooks.jsx

@@ -86,6 +86,19 @@ const useLocalStorage = (key, initialValue) => {
       console.error(error)
     }
   }
+
+  useEffect(() => {
+    const handleStorageChange = () => {
+      const item = window.localStorage.getItem(key)
+      setStoredValue(item ? JSON.parse(item) : initialValue)
+    }
+
+    window.addEventListener('storage', handleStorageChange)
+    return () => {
+      window.removeEventListener('storage', handleStorageChange)
+    }
+  }, [key, initialValue])
+
   return [storedValue, setValue]
 }
 

frontend/src/nebula.js

@@ -63,6 +63,12 @@ const nebula = {
     return result
   },
 
+  getPlayoutChannel(id_channel) {
+    for (const channel of this.settings?.playoutChannels || []) {
+      if (channel.id === id_channel) return channel
+    }
+  },
+
   getFolderName(id_folder) {
     for (const folder of this.settings?.folders || []) {
       if (folder.id === id_folder) return folder.name

frontend/src/pages/Rundown/Rundown.jsx

@@ -1,11 +1,13 @@
 import { useState, useEffect, useMemo } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import nebula from '/src/nebula'
 
 import RundownNav from './RundownNav'
 import RundownTable from './RundownTable'
 
 const Rundown = () => {
   const [startTime, setStartTime] = useState(null)
+  const currentChannel = useSelector((state) => state.context.currentChannel)
   const [rundown, setRundown] = useState(null)
 
   const onResponse = (response) => {
@@ -20,10 +22,10 @@ const Rundown = () => {
     if (!startTime) return
     const requestParams = {
       date: startTime.toISOString().split('T')[0],
-      id_channel: 1,
+      id_channel: currentChannel,
     }
     nebula.request('rundown', requestParams).then(onResponse).catch(onError)
-  }, [startTime])
+  }, [startTime, currentChannel])
 
   return (
     <main className="column">

frontend/src/pages/Scheduler/Scheduler.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { setPageTitle } from '/src/actions'
 import { toast } from 'react-toastify'
 
@@ -15,6 +15,11 @@ const Scheduler = ({ draggedAsset }) => {
   const [startTime, setStartTime] = useState(getWeekStart())
   const [events, setEvents] = useState([])
   const [editorData, setEditorData] = useState(null)
+  const currentChannel = useSelector((state) => state.context.currentChannel)
+
+  const channelConfig = useMemo(() => {
+    return nebula.getPlayoutChannel(currentChannel)
+  }, [currentChannel])
 
   const onResponse = (response) => {
     const events = response.data.events
@@ -33,7 +38,7 @@ const Scheduler = ({ draggedAsset }) => {
   }
 
   const requestParams = {
-    id_channel: 1,
+    id_channel: currentChannel,
     date: DateTime.fromJSDate(startTime).toFormat('yyyy-MM-dd'),
   }
 
@@ -66,7 +71,7 @@ const Scheduler = ({ draggedAsset }) => {
       setEditorData(null)
     }
 
-    for (const field of nebula.settings.playout_channels[0].fields) {
+    for (const field of channelConfig?.fields || []) {
       const key = field.name
       if (event[key] === undefined) continue
       payload.meta[key] = event[key]
@@ -87,13 +92,13 @@ const Scheduler = ({ draggedAsset }) => {
 
   useEffect(() => {
     loadEvents()
-  }, [startTime])
+  }, [startTime, currentChannel])
 
   useEffect(() => {
     // console.log('Week start time changed', startTime)
     const pageTitle = createTitle(startTime)
     dispatch(setPageTitle({ title: pageTitle }))
-  }, [startTime])
+  }, [startTime, currentChannel])
 
   //
   // Context menu