Changed the audio cursor width and color to blue (#347)

* changed the audio cursor width and color to blue

* changes for configuring cursorwidth and cursorcolor from config.xml

Co-authored-by: Max Tkachenko <[email protected]>

Author: kaustuk

examples/audio_classification/config.xml

@@ -1,6 +1,6 @@
 <View>
   <Header value="Listen the audio:"></Header>
-  <Audio name="audio" value="$url"></Audio>
+  <Audio name="audio" value="$url" cursorcolor="#FF0000" cursorwidth="4"></Audio>
   <Header value="Select its topic:"></Header>
   <Choices name="label" toName="audio" choice="single-radio" showInline="true">
     <Choice value="Politics"></Choice>

examples/audio_regions/config.xml

@@ -13,7 +13,7 @@
     <Choice value="Pop" />
   </Choices>
   <Header value="Listen the audio:"></Header>
-  <AudioPlus name="audio" value="$url"></AudioPlus>
+  <AudioPlus name="audio" value="$url" cursorcolor="#FF0000" cursorwidth="4"/>
   <Header>How many instruments in this audio?</Header>
   <Number name="overall" toName="audio" defaultValue="2" />
   <View visibleWhen="region-selected">

src/components/Waveform/Waveform.js

@@ -285,6 +285,8 @@ export default class Waveform extends React.Component {
       progressColor: this.state.colors.progressColor,
 
       splitChannels: true,
+      cursorWidth: this.props.cursorWidth,
+      cursorColor: this.props.cursorColor,
       barHeight: 1,
     };
 

src/tags/object/Audio.js

@@ -10,6 +10,7 @@ import Registry from "../../core/Registry";
 import Waveform from "../../components/Waveform/Waveform";
 import { ErrorMessage } from "../../components/ErrorMessage/ErrorMessage";
 import { AnnotationMixin } from "../../mixins/AnnotationMixin";
+import { customTypes } from "../../core/CustomTypes";
 
 /**
  * The Audio tag plays a simple audio file. Use this tag for basic audio annotation tasks such as classification or transcription.
@@ -42,6 +43,8 @@ import { AnnotationMixin } from "../../mixins/AnnotationMixin";
  * @param {string} name Name of the element
  * @param {string} value Data field containing path or a URL to the audio
  * @param {string} hotkey Hotkey used to play or pause audio
+ * @param {string} [cursorwidth=1] - Audio pane cursor width. it's Measured in pixels.
+ * @param {string} [cursorcolor=#333] - Audio pane cursor color. Color should be specify in hex decimal string
  */
 
 const TagAttrs = types.model({
@@ -51,6 +54,8 @@ const TagAttrs = types.model({
   volume: types.optional(types.boolean, false),
   speed: types.optional(types.boolean, false),
   hotkey: types.maybeNull(types.string),
+  cursorwidth: types.optional(types.string, "1"),
+  cursorcolor: types.optional(customTypes.color, "#333"),
 });
 
 const Model = types
@@ -118,6 +123,8 @@ const HtxAudioView = ({ store, item }) => {
         volume={item.volume}
         regions={false}
         height={item.height}
+        cursorColor={item.cursorcolor}
+        cursorWidth={item.cursorwidth}
       />
       <AudioControls item={item} store={store} />
     </ObjectTag>

src/tags/object/AudioPlus.js

@@ -14,6 +14,7 @@ import { guidGenerator, restoreNewsnapshot } from "../../core/Helpers";
 import { ErrorMessage } from "../../components/ErrorMessage/ErrorMessage";
 import { AnnotationMixin } from "../../mixins/AnnotationMixin";
 import { SyncMixin } from "../../mixins/SyncMixin";
+import { customTypes } from "../../core/CustomTypes";
 import { useRef } from "react";
 import { useEffect } from "react";
 import { isDefined } from "../../utils/utilities";
@@ -42,6 +43,8 @@ import { isDefined } from "../../utils/utilities";
  * @param {boolean} [zoom=true] - Whether to show the zoom slider
  * @param {string} [hotkey] - Hotkey used to play or pause audio
  * @param {string} [sync] object name to sync with
+ * @param {string} [cursorwidth=1] - Audio pane cursor width. it's Measured in pixels.
+ * @param {string} [cursorcolor=#333] - Audio pane cursor color. Color should be specify in hex decimal string
  */
 const TagAttrs = types.model({
   name: types.identifier,
@@ -53,6 +56,8 @@ const TagAttrs = types.model({
   showlabels: types.optional(types.boolean, false),
   showscores: types.optional(types.boolean, false),
   height: types.optional(types.string, "128"),
+  cursorwidth: types.optional(types.string, "1"),
+  cursorcolor: types.optional(customTypes.color, "#333"),
 });
 
 const Model = types
@@ -321,6 +326,8 @@ const HtxAudioView = ({ store, item }) => {
           volume={item.volume}
           regions={true}
           height={item.height}
+          cursorColor={item.cursorcolor}
+          cursorWidth={item.cursorwidth}
         />
 
         <AudioControls item={item} store={store} />