fixed rendering on mount issue

1 files changed, 3 insertions, 3 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index eb7b9a773..9351bc3be 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -51,7 +51,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     _dropDisposer?: DragManager.DragDropDisposer;
     _disposers: { [name: string]: IReactionDisposer } = {};
     _ele: HTMLAudioElement | null = null;
-    _stackedTimeline = React.createRef<CollectionStackedTimeline>();
     _recorder: any;
     _recordStart = 0;
     _pauseStart = 0;
@@ -60,6 +59,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     _stream: MediaStream | undefined;
     _play: any = null;
 
+    @observable _stackedTimeline: any;
     @observable _finished: boolean = false;
     @observable _volume: number = 1;
     @observable _muted: boolean = false;
@@ -80,7 +80,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     }
     set mediaState(value) { this.layoutDoc.mediaState = value; }
 
-    get timeline() { return this._stackedTimeline.current; } // can't be computed since it's not observable
+    get timeline() { return this._stackedTimeline; } // can't be computed since it's not observable
 
     componentWillUnmount() {
         this.removeCurrentlyPlaying();
@@ -547,7 +547,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @computed get renderTimeline() {
         return (
             <CollectionStackedTimeline
-                ref={this._stackedTimeline}
+                ref={action((r: any) => this._stackedTimeline = r)}
                 {...OmitKeys(this.props, ["CollectionFreeFormDocumentView"]).omit}
                 fieldKey={this.annotationKey}
                 dictationKey={this.fieldKey + "-dictation"}