feat(legacy): visual cue point editor (#2947)

A visual cue point editor in the track editor view. This view displays the track as a waveform and allows you to set where the in- and out-cue points are set. These cue points determine the start and end points of the track.

---------

Co-authored-by: Thomas Göttgens <tgoettgens@mail.com>
Co-authored-by: Kyle Robbertze <paddatrapper@users.noreply.github.com>

legacy/public/css/playlist_builder.css

@@ -658,7 +658,7 @@ li.spl_empty {
 .collapsible-header.visible .arrow-icon {
     transform: rotate(90deg);
 }
-.smart-block-advanced {
+.smart-block-advanced, .visual-waveform-editor {
     display: none;
 }
 .smart-block-form .smart-block-advanced dt {

legacy/public/css/styles.css

@@ -4350,3 +4350,95 @@ body.droppable .artwork-upload .artwork-preview {
   border: 2px dashed lightblue;
   z-index: 9999;
 }
+
+/* Cue editor GUI starts here */
+
+.track-file-details {
+    font-size: 14px;
+    line-height: 2;
+}
+
+.track-window {
+    top: 285px;
+    width: 480px;
+}
+
+/* -webkit-appearance: none;
+-moz-appearance: none;
+-ms-appearance: none;
+appearance: none; */
+textarea,
+input {
+    outline: none;
+}
+
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+    outline: none;
+}
+
+.navtt {
+    margin-bottom: 18px;
+    margin-left: 0;
+    list-style: none;
+}
+
+.navtt > li > a {
+    display: block;
+}
+
+li {
+    line-height: 18px;
+}
+
+.navtt-content.active {
+    display: block;
+}
+
+.navtt-content.hide {
+    display: none;
+}
+
+.btn-control-player {
+    padding: 5px 7px 5px 10px;
+    font-size: 14px;
+    line-height: 18px;
+}
+
+.zoom-container {
+    margin-top: 15px;
+}
+
+.track-toolbar {
+    padding: 0 !important;
+}
+
+.track-timer {
+    border-radius: 5px;
+    background-image: none;
+    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2);
+    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2);
+    /*background-color: #727272;*/
+    outline: 0;
+    border-top-color: #333333;
+    /*background: #246B86;*/
+
+    width: 65px;
+    /*padding: 5px 7px 5px 10px;*/
+    font-size: 14px;
+    line-height: 18px;
+    background-color: #666666;
+}
+
+.track-timer-input {
+    background-color: transparent;
+    border: none;
+    width: 75px;
+    font-size: 14px;
+    color: #ffffff;
+}
+
+/* Track Edit - Cue and Gain editor GUI ends here */