Add indicators for the on play mode in the rundown

Signed-off-by: Axel Boberg <[email protected]>

plugins/rundown/app/assets/icons/index.js

@@ -2,11 +2,15 @@
 //
 // SPDX-License-Identifier: MIT
 
+import arrowDownSecondary from './arrow-down-secondary.svg'
+import arrowDownPlay from './arrow-down-play.svg'
 import arrowDown from './arrow-down.svg'
 import warning from './warning.svg'
 import empty from './empty.svg'
 
 export default {
+  arrowDownSecondary,
+  arrowDownPlay,
   arrowDown,
   warning,
   empty

plugins/rundown/app/components/RundownItem/index.jsx

@@ -20,6 +20,11 @@ import { RundownItemProgress } from '../RundownItemProgress'
 import * as Layout from '../Layout'
 import { Icon } from '../Icon'
 
+const ON_PLAY_ENUM = {
+  'SELECT_NEXT_ITEM': '2',
+  'PLAY_NEXT_ITEM': '1' 
+}
+
 /**
  * An index of type properties
  * used for quick returns when
@@ -152,6 +157,14 @@ export function RundownItem ({ index, item }) {
           }
         </div>
         <div className='RundownItem-section RundownItem-section--icons'>
+          {
+            item?.data?.onPlay === ON_PLAY_ENUM.SELECT_NEXT_ITEM &&
+              <span className='RundownItem-icon'><Icon name='arrowDownSecondary' /></span>
+          }
+          {
+            item?.data?.onPlay === ON_PLAY_ENUM.PLAY_NEXT_ITEM &&
+              <span className='RundownItem-icon'><Icon name='arrowDownPlay' /></span>
+          }
           {
             Object.keys(item?.issues ?? {}).length > 0 &&
               <span className='RundownItem-icon'><Icon name='warning' /></span>

plugins/rundown/app/components/RundownItem/style.css

@@ -18,14 +18,23 @@
 }
 
 .RundownItem-section--icons {
-  height: 1em;
+  height: 1.2em;
   width: 100px;
 
   justify-content: flex-end;
 
   overflow: hidden;
 }
 
+.RundownItem-icon {
+  display: inline-block;
+  width: 1.2em;
+}
+
+.RundownItem-icon:not(:last-child) {
+  margin-right: 5px;
+}
+
 .RundownItem-section--right {
   justify-content: flex-end;
 }
@@ -85,7 +94,3 @@
   opacity: 0.3;
   z-index: -1;
 }
-
-.RundownItem-icon {
-  width: 1em;
-}