fixing up audioboxes little by little.

1 files changed, 19 insertions, 4 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index be6ae630f..689d44a2f 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -4,22 +4,37 @@ import { observer } from "mobx-react";
 import "./AudioBox.scss";
 import { Cast } from "../../../new_fields/Types";
 import { AudioField } from "../../../new_fields/URLField";
+import { DocStaticComponent } from "../DocComponent";
+import { makeInterface } from "../../../new_fields/Schema";
+import { documentSchema } from "./DocumentView";
+import { InkingControl } from "../InkingControl";
 
+type AudioDocument = makeInterface<[typeof documentSchema]>;
+const AudioDocument = makeInterface(documentSchema);
 const defaultField: AudioField = new AudioField(new URL("http://techslides.com/demos/samples/sample.mp3"));
+
 @observer
-export class AudioBox extends React.Component<FieldViewProps> {
+export class AudioBox extends DocStaticComponent<FieldViewProps, AudioDocument>(AudioDocument) {
 
     public static LayoutString() { return FieldView.LayoutString(AudioBox); }
+    _ref = React.createRef<HTMLAudioElement>();
+
+    componentDidMount() {
+        if (this._ref.current) this._ref.current.currentTime = 1;
+    }
 
     render() {
         let field = Cast(this.props.Document[this.props.fieldKey], AudioField, defaultField);
         let path = field.url.href;
 
+        let interactive = this.active() ? "-interactive" : "";
         return (
-            <audio controls className="audiobox-cont" style={{ pointerEvents: "all" }}>
-                <source src={path} type="audio/mpeg" />
-                Not supported.
+            <div className="audiobox-container">
+                <audio controls ref={this._ref} className={`audiobox-control${interactive}`}>
+                    <source src={path} type="audio/mpeg" />
+                    Not supported.
                 </audio>
+            </div>
         );
     }
 }
\ No newline at end of file