Add timing markers delete options.

src/App.css

@@ -99,20 +99,37 @@ button {
   flex: 1;
   font-size: 0.8em;
 }
+.timing-buttons .delete {
+  max-width: 3em;
+  color: gray;
+  padding-bottom: 2px;
+}
 
 .timing-buttons .intro {
-  border-color: rgba(125, 0, 255, 0.8);
-  color: rgba(125, 0, 255, 0.8);
+  border-color: rgb(125, 0, 255);
+  color: rgb(125, 0, 255);
 }
 
 .timing-buttons .cue {
-  border-color: rgba(0, 100, 0, 0.9);
-  color: rgba(0, 100, 0, 0.9);
+  border-color: rgb(0, 100, 0);
+  color: rgb(0, 100, 0);
 }
 
 .timing-buttons .outro {
-  border-color: rgba(255, 0, 0, 0.7);
-  color: rgba(255, 0, 0, 0.7);
+  border-color: rgb(255, 0, 0);
+  color: rgb(255, 0, 0);
+}
+
+.timing-buttons.text-light > * {
+  color: white;
+}
+
+.timing-buttons.text-light .intro {
+  border-color: rgb(179, 115, 248);
+}
+
+.timing-buttons.text-light .cue {
+  border-color: rgb(0, 255, 0);
 }
 
 .waveform span {

src/showplanner/Player.tsx

@@ -7,6 +7,7 @@ import {
   FaPlay,
   FaPause,
   FaStop,
+  FaTrash,
 } from "react-icons/fa";
 import { omit } from "lodash";
 import { RootState } from "../rootReducer";
@@ -108,14 +109,26 @@ const setTrackCue = (
 function TimingButtons({ id }: { id: number }) {
   const dispatch = useDispatch();
   const state = useSelector((state: RootState) => state.mixer.players[id]);
+  const [showDeleteMenu, setShowDeleteMenu] = useState(false);
+
   return (
-    <div className="timing-buttons">
-      <div className="label">Set Marker:</div>
+    <div
+      className={
+        "timing-buttons" + (showDeleteMenu ? " bg-dark text-light" : "")
+      }
+    >
+      <div className="label">{showDeleteMenu ? "Delete:" : "Set"} Marker:</div>
       <div
         className="intro btn btn-sm btn-outline-secondary rounded-0"
         onClick={() => {
           if (state.loadedItem?.type === "central") {
-            dispatch(setTrackIntro(state.loadedItem, state.timeCurrent, id));
+            dispatch(
+              setTrackIntro(
+                state.loadedItem,
+                showDeleteMenu ? 0 : state.timeCurrent,
+                id
+              )
+            );
           }
         }}
       >
@@ -125,7 +138,13 @@ function TimingButtons({ id }: { id: number }) {
         className="cue btn btn-sm btn-outline-secondary rounded-0"
         onClick={() => {
           if (state.loadedItem && "timeslotitemid" in state.loadedItem) {
-            dispatch(setTrackCue(state.loadedItem, state.timeCurrent, id));
+            dispatch(
+              setTrackCue(
+                state.loadedItem,
+                showDeleteMenu ? 0 : state.timeCurrent,
+                id
+              )
+            );
           }
         }}
       >
@@ -135,12 +154,29 @@ function TimingButtons({ id }: { id: number }) {
         className="outro btn btn-sm btn-outline-secondary rounded-0"
         onClick={() => {
           if (state.loadedItem?.type === "central") {
-            dispatch(setTrackOutro(state.loadedItem, state.timeCurrent, id));
+            dispatch(
+              setTrackOutro(
+                state.loadedItem,
+                showDeleteMenu ? 0 : state.timeCurrent,
+                id
+              )
+            );
           }
         }}
       >
         Outro
       </div>
+      <div
+        className={
+          "delete btn btn-sm btn-outline-secondary rounded-0" +
+          (showDeleteMenu ? " active" : "")
+        }
+        onClick={() => {
+          setShowDeleteMenu(!showDeleteMenu);
+        }}
+      >
+        <FaTrash />
+      </div>
     </div>
   );
 }