Actually fix plan state to store played status.

src/api.ts

@@ -86,7 +86,6 @@ interface TimeslotItemBase {
   trackid: number;
   clean: boolean;
   cue: number;
-  played: boolean;
 }
 
 interface TimeslotItemCentral {

src/mixer/state.ts

@@ -451,7 +451,9 @@ export const load = (
 
       const state = getState().mixer.players[player];
       if (state.loadedItem != null) {
-        dispatch(setItemPlayed(state.loadedItem.id, true));
+        dispatch(
+          setItemPlayed({ itemId: itemId(state.loadedItem), played: true })
+        );
       }
     });
     playerInstance.on("pause", () => {

src/showplanner/Item.tsx

@@ -57,6 +57,7 @@ export const Item = memo(function Item({
           data-itemid={id}
           className={
             "item " +
+            ("played" in x ? (x.played ? "played " : "") : "") +
             x.type +
             `${
               column >= 0 &&

src/showplanner/index.tsx

@@ -33,6 +33,7 @@ import {
   removeItem,
   setItemPlayed,
   getPlaylists,
+  PlanItemBase,
 } from "./state";
 
 import * as MixerState from "../mixer/state";
@@ -334,7 +335,7 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
       // this is a track from the CML
       // TODO: this is ugly, should be in redux
       const data = CML_CACHE[result.draggableId];
-      const newItem: TimeslotItem = {
+      const newItem: TimeslotItem & PlanItemBase = {
         timeslotitemid: "I" + insertIndex,
         channel: parseInt(result.destination.droppableId, 10),
         weight: result.destination.index,
@@ -348,7 +349,7 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
       // this is an aux resource
       // TODO: this is ugly, should be in redux
       const data = AUX_CACHE[result.draggableId];
-      const newItem: TimeslotItem = {
+      const newItem: TimeslotItem & PlanItemBase = {
         timeslotitemid: "I" + insertIndex,
         channel: parseInt(result.destination.droppableId, 10),
         weight: result.destination.index,
@@ -381,7 +382,7 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
     dispatch(removeItem(timeslotId, data.id));
   }
   async function onCtxUnPlayedClick(e: any, data: { id: string }) {
-    dispatch(setItemPlayed(data.id, false));
+    dispatch(setItemPlayed({ itemId: data.id, played: false }));
   }
 
   // Add support for reloading the show plan from the iFrames.

src/showplanner/state.ts

@@ -17,10 +17,12 @@ export interface ItemGhost {
   cue: number;
   outro: number;
   clean: boolean;
-  played: boolean;
 }
 
-export type PlanItem = TimeslotItem | ItemGhost;
+export interface PlanItemBase {
+  played?: boolean;
+}
+export type PlanItem = (TimeslotItem | ItemGhost) & PlanItemBase;
 
 export type Plan = PlanItem[][];
 
@@ -175,6 +177,16 @@ const showplan = createSlice({
         }
       });
     },
+    // Set the item as being played/unplayed in this session.
+    setItemPlayed(
+      state,
+      action: PayloadAction<{ itemId: string; played: boolean }>
+    ) {
+      const idx = state.plan!.findIndex(
+        (x) => itemId(x) === action.payload.itemId
+      );
+      state.plan![idx].played = action.payload.played;
+    },
     replaceGhost(
       state,
       action: PayloadAction<{ ghostId: string; newItemData: TimeslotItem }>
@@ -201,7 +213,11 @@ const showplan = createSlice({
 
 export default showplan.reducer;
 
-export const { setItemTimings, planSaveError } = showplan.actions;
+export const {
+  setItemTimings,
+  setItemPlayed,
+  planSaveError,
+} = showplan.actions;
 
 export const moveItem = (
   timeslotid: number,
@@ -480,16 +496,6 @@ export const removeItem = (
   dispatch(showplan.actions.setPlanSaving(false));
 };
 
-// Set the item as being played/unplayed in this session.
-export const setItemPlayed = (
-  itemid: string,
-  played: boolean
-): AppThunk => async (dispatch, getState) => {
-  const plan = cloneDeep(getState().showplan.plan!);
-  const item = plan.find((x) => itemId(x) === itemid)!;
-  item.played = played;
-};
-
 export const getShowplan = (timeslotId: number): AppThunk => async (
   dispatch
 ) => {