Merge pull request #94 from nebulabroadcast/93-rundown-edit

Experimental: Rundown editing in the web interface

Author: martastain

backend/api/init/init_request.py

@@ -70,7 +70,9 @@ class InitResponseModel(ResponseModel):
         ),
     ] = None
 
-    experimental: Annotated[bool | None, Field(title="Enable experimental features")] = None
+    experimental: Annotated[
+        bool | None, Field(title="Enable experimental features")
+    ] = None
 
 
 class InitRequest(APIRequest):

backend/schema/meta-aliases-cs.json

@@ -100,7 +100,7 @@
   ["source"                 , "Zdroj"                  , null                , ""],
   ["id_folder"              , "Složka"                 , null                , ""],
   ["is_admin"               , "Admin"                  , null                , ""],
-  ["run_mode"               , "Run mode"               , null                , "Režim odbavení příspěvků"],
+  ["run_mode"               , "Režim"                  , "Režim"             , "Režim odbavení příspěvků"],
   ["summary"                , "Perex"                  , null                , ""],
   ["description"            , "Popis"                  , null                , ""],
   ["file/format"            , "Formát souboru"         , null                , ""],

backend/schema/meta-aliases-en.json

@@ -100,7 +100,7 @@
   ["source"                 , "Source"                 , null                , ""],
   ["id_folder"              , "Folder"                 , null                , ""],
   ["is_admin"               , "Admin"                  , null                , ""],
-  ["run_mode"               , "Run mode"               , null                , ""],
+  ["run_mode"               , "Run mode"               , "Mode"              , ""],
   ["summary"                , "Summary"                , null                , ""],
   ["description"            , "Description"            , null                , ""],
   ["file/format"            , "File format"            , null                , ""],

frontend/src/actions.js

@@ -1,5 +1,6 @@
 import nebula from '/src/nebula'
 import { createSlice } from '@reduxjs/toolkit'
+import { isNaN } from 'lodash'
 
 const initialState = {
   browserRefresh: 0,
@@ -49,6 +50,7 @@ const contextSlice = createSlice({
     },
 
     setFocusedAsset: (state, action) => {
+      if (isNaN(action.payload)) return
       state.focusedAsset = action.payload
     },
 

frontend/src/app.jsx

@@ -6,7 +6,7 @@ import { useLocalStorage } from '/src/hooks'
 import { Routes, Route, Navigate, BrowserRouter } from 'react-router-dom'
 
 import WebsocketListener from '/src/websocket'
-import NavBar from '/src/containers/Navbar'
+import MainNavbar from '/src/containers/MainNavbar'
 import LoginPage from '/src/pages/LoginPage'
 import LoadingPage from '/src/pages/LoadingPage'
 import MAMPage from '/src/pages/MAMPage'
@@ -15,14 +15,12 @@ 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
 
@@ -58,28 +56,9 @@ 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 />
-
   if (errorCode > 401) return <main className="center">server unavailable</main>
 
   if (!initData.installed)
@@ -92,7 +71,7 @@ const App = () => {
     <Suspense fallback={<LoadingPage />}>
       <WebsocketListener />
       <BrowserRouter>
-        <NavBar />
+        <MainNavbar />
         <Routes>
           <Route
             path="/"

frontend/src/components/ContextMenu.jsx

@@ -8,13 +8,13 @@ const ContextMenuWrapper = styled.div`
 
   background-color: var(--color-surface-02);
   min-width: 100px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
+  box-shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.7);
   z-index: 1;
 
   hr {
     margin: 0;
     border: none;
-    border-top: 2px solid var(--color-surface-03);
+    border-top: 2px solid var(--color-surface-05);
   }
 
   button {

frontend/src/components/Dialog.jsx

@@ -82,6 +82,7 @@ const Dialog = ({
   headerStyle,
   bodyStyle,
   footerStyle,
+  open = true,
 }) => {
   const dialogRef = useRef(null)
 

frontend/src/components/Dropdown.jsx

@@ -5,13 +5,14 @@ import clsx from 'clsx'
 const DropdownContainer = styled.div`
   position: relative;
   display: inline-block;
+  z-index: 999;
 
   .dropdown-content {
     display: none;
     position: absolute;
     background-color: var(--color-surface-02);
     min-width: 100px;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
+    box-shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.7);
     z-index: 1;
 
     hr {

frontend/src/components/Form.jsx

@@ -21,6 +21,8 @@ const Form = styled.div`
       min-width: 200px;
       max-width: 200px;
       padding-top: 0.5rem;
+      user-select: none;
+      user-drag: none;
     }
 
     .form-control {

frontend/src/components/Progress.jsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import defaultTheme from './theme'
 
@@ -10,18 +11,36 @@ const BaseProgress = styled.div`
 
   div {
     height: 100%;
-    transition: width 0.3s linear;
     background: ${(props) => props.theme.colors.cyan};
+    border-radius: ${(props) => props.theme.inputBorderRadius};
+    transition: ${(props) =>
+      props.disableTransition ? 'none' : 'width 0.3s linear'};
   }
 `
 BaseProgress.defaultProps = {
   theme: defaultTheme,
 }
 
 const Progress = ({ value, ...props }) => {
+  const [prevValue, setPrevValue] = useState(value)
+  const [disableTransition, setDisableTransition] = useState(false)
+
+  useEffect(() => {
+    if (value < prevValue) {
+      setDisableTransition(true)
+    } else {
+      setDisableTransition(false)
+    }
+    setPrevValue(value)
+  }, [value, prevValue])
+
   return (
-    <BaseProgress {...props}>
-      <div style={{ width: `${value}%` }} />
+    <BaseProgress {...props} disableTransition={disableTransition}>
+      <div
+        className="progress"
+        style={{ width: `${value}%` }}
+        key={disableTransition ? 'no-transition' : 'transition'}
+      />
     </BaseProgress>
   )
 }