final fixes

17 files changed, 503 insertions, 466 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index f16d13a4e..93cdbbb09 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -4,7 +4,6 @@
     height: 100%;
     position: inherit;
     display: flex;
-    pointer-events: all;
     position: relative;
     cursor: default;
 
@@ -125,7 +124,6 @@
             margin-top: auto;
             margin-bottom: auto;
             width: 100%;
-            height: 80%;
             position: relative;
             padding-right: 5px;
             display: flex;
@@ -135,7 +133,6 @@
                 margin-top: auto;
                 margin-bottom: auto;
                 margin-right: 2px;
-                width: 30px;
                 height: 25px;
                 padding: 2px;
                 border-radius: 50%;
@@ -163,7 +160,6 @@
 
             .audiobox-timeline {
                 position: relative;
-                height: 80%;
                 width: 100%;
                 background: white;
                 border: gray solid 1px;
@@ -280,16 +276,20 @@
                     }
                 }
 
-                .audiobox-marker-container1,
+                .audiobox-marker-timeline,
                 .audiobox-marker-minicontainer {
                     position: absolute;
                     width: 10px;
                     height: 90%;
                     top: 2.5%;
-                    background: gray;
                     border-radius: 5px;
-                    box-shadow: black 2px 2px 1px;
-                    opacity: 0.3;
+
+                    .left-resizer {
+                        background: dimgrey;     
+                    }
+                    .resizer {
+                        background: dimgrey;
+                    }
 
                     .audiobox-marker {
                         position: relative;
@@ -303,10 +303,12 @@
 
                     .resizer {
                         position: absolute;
+                        top: 0;
                         right: 0;
+                        pointer-events: all;
                         cursor: ew-resize;
                         height: 100%;
-                        width: 2px;
+                        width: 10px;
                         z-index: 100;
                     }
 
@@ -320,14 +322,16 @@
                     .left-resizer {
                         position: absolute;
                         left: 0;
+                        top : 0;
+                        pointer-events: all;
                         cursor: ew-resize;
                         height: 100%;
-                        width: 2px;
+                        width: 10px;
                         z-index: 100;
                     }
                 }
 
-                .audiobox-marker-container1:hover,
+                .audiobox-marker-timeline:hover,
                 .audiobox-marker-minicontainer:hover {
                     opacity: 0.8;
                 }
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 72d504590..77777ff76 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -3,33 +3,32 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import axios from "axios";
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
+import { computedFn } from "mobx-utils";
 import Waveform from "react-audio-waveform";
 import { DateField } from "../../../fields/DateField";
 import { Doc, DocListCast, Opt } from "../../../fields/Doc";
 import { documentSchema } from "../../../fields/documentSchemas";
-import { Id } from "../../../fields/FieldSymbols";
 import { List } from "../../../fields/List";
 import { createSchema, listSpec, makeInterface } from "../../../fields/Schema";
 import { ComputedField, ScriptField } from "../../../fields/ScriptField";
-import { Cast, DateCast, NumCast } from "../../../fields/Types";
+import { Cast, NumCast } from "../../../fields/Types";
 import { AudioField, nullAudio } from "../../../fields/URLField";
-import { emptyFunction, formatTime, numberRange, returnFalse, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils";
+import { emptyFunction, formatTime, numberRange, returnFalse, setupMoveUpEvents, Utils } from "../../../Utils";
 import { Docs, DocUtils } from "../../documents/Documents";
 import { Networking } from "../../Network";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
+import { DocumentManager } from "../../util/DocumentManager";
 import { Scripting } from "../../util/Scripting";
 import { SelectionManager } from "../../util/SelectionManager";
 import { SnappingManager } from "../../util/SnappingManager";
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ViewBoxAnnotatableComponent } from "../DocComponent";
-import { StyleProp } from "../StyleProvider";
-import "./AudioBox.scss";
-import { DocumentView, DocumentViewProps } from "./DocumentView";
+import { DocumentView } from "./DocumentView";
 import { FieldView, FieldViewProps } from './FieldView';
 import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment";
-import { LinkAnchorBox } from "./LinkAnchorBox";
 import { LinkDocPreview } from "./LinkDocPreview";
+import "./AudioBox.scss";
 
 declare class MediaRecorder {
     // whatever MediaRecorder has
@@ -45,15 +44,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); }
     public static Enabled = false;
     public static NUMBER_OF_BUCKETS = 100;
-
+    static playheadWidth = 30; // width of playhead
+    static heightPercent = 80; // height of timeline in percent of height of audioBox.
     static Instance: AudioBox;
     static RangeScript: ScriptField;
     static LabelScript: ScriptField;
+    static RangePlayScript: ScriptField;
+    static LabelPlayScript: ScriptField;
 
-    // _linkPlayDisposer: IReactionDisposer | undefined;
-    // _reactionDisposer: IReactionDisposer | undefined;
-    // _scrubbingDisposer: IReactionDisposer | undefined;
-    private _disposers: { [name: string]: IReactionDisposer } = {};
+    _disposers: { [name: string]: IReactionDisposer } = {};
     _ele: HTMLAudioElement | null = null;
     _recorder: any;
     _recordStart = 0;
@@ -64,145 +63,100 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     _start: number = 0;
     _hold: boolean = false;
     _left: boolean = false;
-    _first: boolean = false;
+    _dragging = false;
     _play: any = null;
-
-    _count: Array<any> = [];
     _audioRef = React.createRef<HTMLDivElement>();
     _timeline: Opt<HTMLDivElement>;
-    _duration = 0;
     _markerStart: number = 0;
-    private _currMarker: any;
+    _currMarker: any;
 
-    @observable _visible: boolean = false;
+    @observable static SelectingRegion: AudioBox | undefined = undefined;
+    @observable static _scrubTime = 0;
     @observable _markerEnd: number = 0;
     @observable _position: number = 0;
     @observable _waveHeight: Opt<number> = this.layoutDoc._height;
-    @observable private _paused: boolean = false;
-    @observable private static _scrubTime = 0;
+    @observable _paused: boolean = false;
     @computed get audioState(): undefined | "recording" | "paused" | "playing" { return this.dataDoc.audioState as (undefined | "recording" | "paused" | "playing"); }
     set audioState(value) { this.dataDoc.audioState = value; }
     public static SetScrubTime = action((timeInMillisFrom1970: number) => { AudioBox._scrubTime = 0; AudioBox._scrubTime = timeInMillisFrom1970; });
     @computed get recordingStart() { return Cast(this.dataDoc[this.props.fieldKey + "-recordingStart"], DateField)?.date.getTime(); }
     @computed get audioDuration() { return NumCast(this.dataDoc.duration); }
-    async slideTemplate() { return (await Cast((await Cast(Doc.UserDoc().slidesBtn, Doc) as Doc).dragFactory, Doc) as Doc); }
+    @computed get markerDocs() { return DocListCast(this.dataDoc[this.annotationKey]); }
+    @computed get links() { return DocListCast(this.dataDoc.links); }
+    @computed get pauseTime() { return this._pauseEnd - this._pauseStart; } // total time paused to update the correct time
 
     constructor(props: Readonly<FieldViewProps>) {
         super(props);
         AudioBox.Instance = this;
 
         // onClick play scripts
-        AudioBox.RangeScript = AudioBox.RangeScript || ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart), (this.audioEnd))`, { scriptContext: "any" })!;
-        AudioBox.LabelScript = AudioBox.LabelScript || ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart))`, { scriptContext: "any" })!;
+        AudioBox.RangeScript = AudioBox.RangeScript || ScriptField.MakeScript(`scriptContext.clickMarker(self, this.audioStart, this.audioEnd)`, { self: Doc.name, scriptContext: "any" })!;
+        AudioBox.LabelScript = AudioBox.LabelScript || ScriptField.MakeScript(`scriptContext.clickMarker(self, this.audioStart)`, { self: Doc.name, scriptContext: "any" })!;
+        AudioBox.RangePlayScript = AudioBox.RangePlayScript || ScriptField.MakeScript(`scriptContext.playOnClick(self, this.audioStart, this.audioEnd)`, { self: Doc.name, scriptContext: "any" })!;
+        AudioBox.LabelPlayScript = AudioBox.LabelPlayScript || ScriptField.MakeScript(`scriptContext.playOnClick(self, this.audioStart)`, { self: Doc.name, scriptContext: "any" })!;
     }
 
     getLinkData(l: Doc) {
         let la1 = l.anchor1 as Doc;
         let la2 = l.anchor2 as Doc;
-        let linkTime = NumCast(l.anchor2_timecode);
+        const linkTime = NumCast(la2.audioStart, NumCast(la1.audioStart));
         if (Doc.AreProtosEqual(la1, this.dataDoc)) {
             la1 = l.anchor2 as Doc;
             la2 = l.anchor1 as Doc;
-            linkTime = NumCast(l.anchor1_timecode);
         }
         return { la1, la2, linkTime };
     }
 
     componentWillUnmount() {
-        this._disposers.reaction?.();
-        this._disposers.linkPlay?.();
-        this._disposers.scrubbing?.();
-        this._disposers.audioStart?.();
+        Object.values(this._disposers).forEach(disposer => disposer?.());
+        const ind = DocUtils.ActiveRecordings.indexOf(this);
+        ind !== -1 && (DocUtils.ActiveRecordings.splice(ind, 1));
+    }
+
+    getAnchor = () => {
+        return this.createMarker(this._ele?.currentTime || Cast(this.props.Document._currentTimecode, "number", null) || (this.audioState === "recording" ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined));
     }
 
     @action
     componentDidMount() {
-        if (!this.dataDoc.markerAmount) {
-            this.dataDoc.markerAmount = 0;
-        }
+        this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
 
         this.audioState = this.path ? "paused" : undefined;
-        this._disposers.linkPlay = reaction(() => this.layoutDoc.scrollToLinkID,
-            scrollLinkId => {
-                if (scrollLinkId) {
-                    DocListCast(this.dataDoc.links).filter(l => l[Id] === scrollLinkId).map(l => {
-                        const { linkTime } = this.getLinkData(l);
-                        setTimeout(() => { this.playFromTime(linkTime); Doc.linkFollowHighlight(l); }, 250);
-                    });
-                    Doc.SetInPlace(this.layoutDoc, "scrollToLinkID", undefined, false);
-                }
-            }, { fireImmediately: true });
-
-        // for play when link is selected
-        this._disposers.reaction = reaction(() => SelectionManager.Views(),
-            selected => {
-                const sel = selected.length ? selected[0].props.Document : undefined;
-                let link;
-                sel && DocListCast(this.dataDoc.links).forEach(l => {
-                    if (l.anchor1 === sel || l.anchor2 === sel && !sel.audioStart) {
-                        link = this.playLink(sel);
-                    }
-                });
-                // for links created during recording 
-                if (!link) {
-                    this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime());
-                    this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause();
-                }
-            });
+
         this._disposers.scrubbing = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime));
 
         this._disposers.audioStart = reaction(
-            () => this.Document._audioStart,
-            (audioStart) => {
-                if (audioStart !== undefined) {
-                    if (this.props.renderDepth !== -1 && !LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc) {
-                        const delay = this._audioRef.current ? 0 : 250; // wait for mainCont and try again to play
-                        const startTime: number = NumCast(this.Document._audioStart);
-                        setTimeout(() => this._audioRef.current && this.playFrom(startTime), delay);
-                        setTimeout(() => { this.Document._currentTimecode = startTime; this.Document._audioStart = undefined; }, 10 + delay);
-                    }
-                }
-            },
+            () => !LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc && this.props.renderDepth !== -1 ? Cast(this.Document._audioStart, "number", null) : undefined,
+            audioStart => audioStart !== undefined && setTimeout(() => {
+                this._audioRef.current && this.playFrom(audioStart);
+                setTimeout(() => {
+                    this.Document._currentTimecode = audioStart;
+                    this.Document._audioStart = undefined;
+                }, 10);
+            }, this._audioRef.current ? 0 : 250), // wait for mainCont and try again to play
             { fireImmediately: true }
         );
 
         this._disposers.audioStop = reaction(
-            () => this.Document._audioStop,
-            (audioStop) => {
-                if (audioStop !== undefined) {
-                    if (this.props.renderDepth !== -1 && !LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc) {
-                        const delay = this._audioRef.current ? 0 : 250; // wait for mainCont and try again to play
-                        setTimeout(() => this._audioRef.current && this.pause(), delay);
-                        setTimeout(() => { this.Document._audioStop = undefined; }, 10 + delay);
-                    }
-                }
-            },
+            () => this.props.renderDepth !== -1 && !LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc ? Cast(this.Document._audioStop, "number", null) : undefined,
+            audioStop => audioStop !== undefined && setTimeout(() => {
+                this._audioRef.current && this.pause();
+                setTimeout(() => this.Document._audioStop = undefined, 10);
+            }, this._audioRef.current ? 0 : 250), // wait for mainCont and try again to play
             { fireImmediately: true }
         );
     }
 
     playLink = (doc: Doc) => {
-        let link = false;
-        !Doc.AreProtosEqual(doc, this.props.Document) && DocListCast(this.props.Document.links).forEach(l => {
-            if (l.anchor1 === doc || l.anchor2 === doc) {
-                const { la1, la2, linkTime } = this.getLinkData(l);
-                let startTime = linkTime;
-                if (la2.audioStart) startTime = NumCast(la2.audioStart);
-                if (la1.audioStart) startTime = NumCast(la1.audioStart);
-
-                let endTime;
-                if (la1.audioEnd) endTime = NumCast(la1.audioEnd);
-                if (la2.audioEnd) endTime = NumCast(la2.audioEnd);
-
-                if (startTime) {
-                    link = true;
-                    this.layoutDoc.playOnSelect && this.recordingStart && (endTime ? this.playFrom(startTime, endTime) : this.playFrom(startTime));
-                }
+        this.links.filter(l => l.anchor1 === doc || l.anchor2 === doc).forEach(l => {
+            const { la1, la2 } = this.getLinkData(l);
+            const startTime = NumCast(la1.audioStart, NumCast(la2.audioStart, null));
+            const endTime = NumCast(la1.audioEnd, NumCast(la2.audioEnd, null));
+            if (startTime !== undefined) {
+                this.layoutDoc.playOnSelect && (endTime ? this.playFrom(startTime, endTime) : this.playFrom(startTime));
             }
         });
-
-        this.layoutDoc.playOnSelect && this.recordingStart && Doc.AreProtosEqual(doc, this.props.Document) && this.pause();
-        return link;
+        doc.annotationOn === this.rootDoc && this.playFrom(NumCast(doc.audioStart), Cast(doc.audioEnd, "number", null));
     }
 
     // for updating the timecode
@@ -210,7 +164,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         const htmlEle = this._ele;
         if (this.audioState !== "recording" && htmlEle) {
             htmlEle.duration && htmlEle.duration !== Infinity && runInAction(() => this.dataDoc.duration = htmlEle.duration);
-            DocListCast(this.dataDoc.links).map(l => {
+            this.links.map(l => {
                 const { la1, linkTime } = this.getLinkData(l);
                 if (linkTime > NumCast(this.layoutDoc._currentTimecode) && linkTime < htmlEle.currentTime) {
                     Doc.linkFollowHighlight(la1);
@@ -226,16 +180,31 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         this.audioState = "paused";
     });
 
-    // play audio for documents created during recording 
+    // play audio for documents created during recording
     playFromTime = (absoluteTime: number) => {
         this.recordingStart && this.playFrom((absoluteTime - this.recordingStart) / 1000);
     }
 
     // play back the audio from time
     @action
+    playOnClick = (anchorDoc: Doc, seekTimeInSeconds: number, endTime: number = this.audioDuration) => {
+        DocumentManager.Instance.getDocumentView(anchorDoc)?.select(false);
+        this.playFrom(seekTimeInSeconds, endTime);
+    }
+
+    // play back the audio from time
+    @action
+    clickMarker = (anchorDoc: Doc, seekTimeInSeconds: number, endTime: number = this.audioDuration) => {
+        if (this.layoutDoc.playOnClick) this.playOnClick(anchorDoc, seekTimeInSeconds, endTime);
+        else {
+            DocumentManager.Instance.getDocumentView(anchorDoc)?.select(false);
+            this._ele && (this._ele.currentTime = this.layoutDoc._currentTimecode = seekTimeInSeconds);
+        }
+    }
+    // play back the audio from time
+    @action
     playFrom = (seekTimeInSeconds: number, endTime: number = this.audioDuration) => {
         clearTimeout(this._play);
-        this._duration = endTime - seekTimeInSeconds;
         if (Number.isNaN(this._ele?.duration)) {
             setTimeout(() => this.playFrom(seekTimeInSeconds, endTime), 500);
         } else if (this._ele && AudioBox.Enabled) {
@@ -250,7 +219,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                 this._ele.play();
                 runInAction(() => this.audioState = "playing");
                 if (endTime !== this.audioDuration) {
-                    this._play = setTimeout(() => this.pause(), (this._duration) * 1000); // use setTimeout to play a specific duration
+                    this._play = setTimeout(() => this.pause(), (endTime - seekTimeInSeconds) * 1000); // use setTimeout to play a specific duration
                 }
             } else {
                 this.pause();
@@ -275,7 +244,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         this._stream = await navigator.mediaDevices.getUserMedia({ audio: true });
         this._recorder = new MediaRecorder(this._stream);
         this.dataDoc[this.props.fieldKey + "-recordingStart"] = new DateField(new Date());
-        DocUtils.ActiveRecordings.push(this.props.Document);
+        DocUtils.ActiveRecordings.push(this);
         this._recorder.ondataavailable = async (e: any) => {
             const [{ result }] = await Networking.UploadFilesToServer(e.data);
             if (!(result instanceof Error)) {
@@ -294,20 +263,19 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         const funcs: ContextMenuProps[] = [];
         funcs.push({ description: (this.layoutDoc.playOnSelect ? "Don't play" : "Play") + " when link is selected", event: () => this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" });
         funcs.push({ description: (this.layoutDoc.hideMarkers ? "Don't hide" : "Hide") + " range markers", event: () => this.layoutDoc.hideMarkers = !this.layoutDoc.hideMarkers, icon: "expand-arrows-alt" });
-        funcs.push({ description: (this.layoutDoc.hideLabels ? "Don't hide" : "Hide") + " label markers", event: () => this.layoutDoc.hideLabels = !this.layoutDoc.hideLabels, icon: "expand-arrows-alt" });
         funcs.push({ description: (this.layoutDoc.playOnClick ? "Don't play" : "Play") + " markers onClick", event: () => this.layoutDoc.playOnClick = !this.layoutDoc.playOnClick, icon: "expand-arrows-alt" });
         funcs.push({ description: (this.layoutDoc.autoPlay ? "Don't auto play" : "Auto play") + " markers onClick", event: () => this.layoutDoc.autoPlay = !this.layoutDoc.autoPlay, icon: "expand-arrows-alt" });
         ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
     }
 
-    // stops the recording 
+    // stops the recording
     stopRecording = action(() => {
         this._recorder.stop();
         this._recorder = undefined;
         this.dataDoc.duration = (new Date().getTime() - this._recordStart - this.pauseTime) / 1000;
         this.audioState = "paused";
         this._stream?.getAudioTracks()[0].stop();
-        const ind = DocUtils.ActiveRecordings.indexOf(this.props.Document);
+        const ind = DocUtils.ActiveRecordings.indexOf(this);
         ind !== -1 && (DocUtils.ActiveRecordings.splice(ind, 1));
     });
 
@@ -371,7 +339,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         this._paused = true;
         this._recorder.pause();
         e.stopPropagation();
-
     }
 
     // continue the recording
@@ -381,52 +348,58 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         this._paused = false;
         this._recorder.resume();
         e.stopPropagation();
-
-    }
-
-    // return the total time paused to update the correct time
-    @computed get pauseTime() {
-        return this._pauseEnd - this._pauseStart;
     }
 
     // starting the drag event for marker resizing
     @action
     onPointerDownTimeline = (e: React.PointerEvent): void => {
-        const rect = (e.target as any).getBoundingClientRect();
-        const toTimeline = (screen_delta: number) => screen_delta / rect.width * this.audioDuration;
-        this._markerStart = this._markerEnd = toTimeline(e.clientX - rect.x);
-        setupMoveUpEvents(this, e,
-            action((e: PointerEvent) => {
-                this._visible = true;
-                this._markerEnd = toTimeline(e.clientX - rect.x);
-                if (this._markerEnd < this._markerStart) {
-                    const tmp = this._markerStart;
-                    this._markerStart = this._markerEnd;
-                    this._markerEnd = tmp;
+        const rect = this._timeline?.getBoundingClientRect();// (e.target as any).getBoundingClientRect();
+        if (rect && e.target !== this._audioRef.current && this.active()) {
+            const wasPaused = this.audioState === "paused";
+            this._ele!.currentTime = this.layoutDoc._currentTimecode = (e.clientX - rect.x) / rect.width * this.audioDuration;
+            wasPaused && this.pause();
+
+            const toTimeline = (screen_delta: number) => screen_delta / rect.width * this.audioDuration;
+            this._markerStart = this._markerEnd = toTimeline(e.clientX - rect.x);
+            AudioBox.SelectingRegion = this;
+            setupMoveUpEvents(this, e,
+                action(e => {
+                    this._markerEnd = toTimeline(e.clientX - rect.x);
+                    return false;
+                }),
+                action((e, movement) => {
+                    this._markerEnd = toTimeline(e.clientX - rect.x);
+                    if (this._markerEnd < this._markerStart) {
+                        const tmp = this._markerStart;
+                        this._markerStart = this._markerEnd;
+                        this._markerEnd = tmp;
+                    }
+                    AudioBox.SelectingRegion === this && (Math.abs(movement[0]) > 15) && this.createMarker(this._markerStart, this._markerEnd);
+                    AudioBox.SelectingRegion = undefined;
+                }),
+                e => {
+                    this.props.select(false);
+                    e.shiftKey && this.createMarker(this._ele!.currentTime);
                 }
-                return false;
-            }),
-            action((e: PointerEvent, movement: number[]) => {
-                (Math.abs(movement[0]) > 15) && this.createMarker(this._markerStart, toTimeline(e.clientX - rect.x));
-                this._visible = false;
-            }),
-            (e: PointerEvent) => e.shiftKey && this.createMarker(this._ele!.currentTime)
-        );
+                , this.props.isSelected(true) || this._isChildActive);
+        }
     }
 
     @action
-    createMarker(audioStart: number, audioEnd?: number) {
+    createMarker(audioStart?: number, audioEnd?: number) {
+        if (audioStart === undefined) return this.rootDoc;
         const marker = Docs.Create.LabelDocument({
-            title: ComputedField.MakeFunction(`formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any, isLabel: audioEnd === undefined,
+            title: ComputedField.MakeFunction(`"#" + formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any,
             useLinkSmallAnchor: true, hideLinkButton: true, audioStart, audioEnd, _showSidebar: false,
+            isLabel: audioEnd === undefined,
             _autoHeight: true, annotationOn: this.props.Document
         });
-        marker.data = ""; // clears out the label's text so that only its border will display
         if (this.dataDoc[this.annotationKey]) {
             this.dataDoc[this.annotationKey].push(marker);
         } else {
             this.dataDoc[this.annotationKey] = new List<Doc>([marker]);
         }
+        return marker;
     }
 
     // starting the drag event for marker resizing
@@ -436,12 +409,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         this._timeline?.setPointerCapture(e.pointerId);
         const toTimeline = (screen_delta: number, width: number) => screen_delta / width * this.audioDuration;
         setupMoveUpEvents(this, e,
-            (e: PointerEvent) => {
+            (e) => {
                 const rect = (e.target as any).getBoundingClientRect();
                 this.changeMarker(this._currMarker, toTimeline(e.clientX - rect.x, rect.width));
                 return false;
             },
-            (e: PointerEvent) => {
+            (e) => {
                 const rect = (e.target as any).getBoundingClientRect();
                 this._ele!.currentTime = this.layoutDoc._currentTimecode = toTimeline(e.clientX - rect.x, rect.width);
                 this._timeline?.releasePointerCapture(e.pointerId);
@@ -452,7 +425,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     // updates the marker with the new time
     @action
     changeMarker = (m: any, time: any) => {
-        DocListCast(this.dataDoc[this.annotationKey]).filter(marker => this.isSame(marker, m)).forEach(marker =>
+        this.markerDocs.filter(marker => this.isSame(marker, m)).forEach(marker =>
             this._left ? marker.audioStart = time : marker.audioEnd = time);
     }
 
@@ -461,48 +434,31 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         return m1.audioStart === m2.audioStart && m1.audioEnd === m2.audioEnd;
     }
 
-    // instantiates a new array of size 500 for marker layout
-    markers = () => {
-        const increment = this.audioDuration / 500;
-        this._count = [];
-        for (let i = 0; i < 500; i++) {
-            this._count.push([increment * i, 0]);
-        }
-    }
-
     // makes sure no markers overlaps each other by setting the correct position and width
-    isOverlap = (m: any) => {
-        if (this._first) {
-            this._first = false;
-            this.markers();
-        }
+    getLevel = (m: any, placed: { audioStart: number, audioEnd: number, level: number }[]) => {
+        const timelineContentWidth = this.props.PanelWidth() - AudioBox.playheadWidth;
+        const x1 = m.audioStart;
+        const x2 = m.audioEnd === undefined ? m.audioStart + 10 / timelineContentWidth * this.audioDuration : m.audioEnd;
         let max = 0;
-
-        for (let i = 0; i < 500; i++) {
-            if (this._count[i][0] >= m.audioStart && this._count[i][0] <= m.audioEnd) {
-                this._count[i][1]++;
-
-                if (this._count[i][1] > max) {
-                    max = this._count[i][1];
-                }
+        const overlappedLevels = new Set(placed.map(p => {
+            const y1 = p.audioStart;
+            const y2 = p.audioEnd;
+            if ((x1 >= y1 && x1 <= y2) || (x2 >= y1 && x2 <= y2) ||
+                (y1 >= x1 && y1 <= x2) || (y2 >= x1 && y2 <= x2)) {
+                max = Math.max(max, p.level);
+                return p.level;
             }
-        }
-
-        for (let i = 0; i < 500; i++) {
-            if (this._count[i][0] >= m.audioStart && this._count[i][0] <= m.audioEnd) {
-                this._count[i][1] = max;
-            }
-        }
+        }));
+        let level = max + 1;
+        for (let j = max; j >= 0; j--) !overlappedLevels.has(j) && (level = j);
 
-        if (this.dataDoc.markerAmount < max) {
-            this.dataDoc.markerAmount = max;
-        }
-        return max - 1;
+        placed.push({ audioStart: x1, audioEnd: x2, level });
+        return level;
     }
 
     @computed get selectionContainer() {
-        return <div className="audiobox-container" style={{
-            left: `${NumCast(this._markerStart) / this.audioDuration * 100}%`,
+        return AudioBox.SelectingRegion !== this ? (null) : <div className="audiobox-container" style={{
+            left: `${Math.min(NumCast(this._markerStart), NumCast(this._markerEnd)) / this.audioDuration * 100}%`,
             width: `${Math.abs(this._markerStart - this._markerEnd) / this.audioDuration * 100}%`, height: "100%", top: "0%"
         }} />;
     }
@@ -515,7 +471,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
             color={"darkblue"}
             height={this._waveHeight}
             barWidth={0.1}
-            // pos={this.layoutDoc._currentTimecode} need to correctly resize parent to make this work (not very necessary for function)
             pos={this.audioDuration}
             duration={this.audioDuration}
             peaks={audioBuckets.length === AudioBox.NUMBER_OF_BUCKETS ? audioBuckets : undefined}
@@ -537,30 +492,55 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
             );
     }
 
-    rangeScript = () => AudioBox.RangeScript;
-    labelScript = () => AudioBox.LabelScript;
-    static audioStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps | FieldViewProps>, property: string) => {
-        if (property === StyleProp.BackgroundColor) return "transparent";
-        if (property === StyleProp.PointerEvents) return "none";
-    }
-    render() {
-        const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : "";
-        this._first = true;  // for indicating the first marker that is rendered
-        const markerDoc = (mark: Doc, script: undefined | (() => ScriptField)) => {
-            return <DocumentView {...this.props}
+    rangeClickScript = () => AudioBox.RangeScript;
+    labelClickScript = () => AudioBox.LabelScript;
+    rangePlayScript = () => AudioBox.RangePlayScript;
+    labelPlayScript = () => AudioBox.LabelPlayScript;
+    renderInner = computedFn(function (this: AudioBox, mark: Doc, script: undefined | (() => ScriptField), doublescript: undefined | (() => ScriptField), x: number, y: number, width: number, height: number) {
+        const marker = observable({ view: undefined as any });
+        return {
+            marker, view: <DocumentView key="view" {...this.props} ref={action((r: DocumentView | null) => marker.view = r)}
                 Document={mark}
-                pointerEvents={"all"}
+                PanelWidth={() => width}
+                PanelHeight={() => height}
+                focus={() => this.playLink(mark)}
                 rootSelected={returnFalse}
                 LayoutTemplate={undefined}
                 ContainingCollectionDoc={this.props.Document}
                 removeDocument={this.removeDocument}
-                parentActive={returnTrue}
-                onClick={this.layoutDoc.playOnClick ? script : undefined}
+                ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().translate(-x - 4, -y - 3)}
+                parentActive={(out) => this.props.isSelected(out) || this._isChildActive}
+                whenActiveChanged={action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive))}
+                onClick={script}
+                onDoubleClick={this.layoutDoc.playOnClick ? undefined : doublescript}
                 ignoreAutoHeight={false}
                 bringToFront={emptyFunction}
-                scriptContext={this} />;
+                scriptContext={this} />
         };
-        return <div className="audiobox-container" onContextMenu={this.specificContextMenu} onClick={!this.path && !this._recorder ? this.recordAudioAnnotation : undefined} style={{ pointerEvents: !interactive ? "none" : undefined }}>
+    });
+    renderMarker = computedFn(function (this: AudioBox, mark: Doc, script: undefined | (() => ScriptField), doublescript: undefined | (() => ScriptField), x: number, y: number, width: number, height: number) {
+        const inner = this.renderInner(mark, script, doublescript, x, y, width, height);
+        return <>
+            {inner.view}
+            {!inner.marker.view || !SelectionManager.IsSelected(inner.marker.view) ? (null) :
+                <>
+                    <div key="left" className="left-resizer" onPointerDown={e => this.onPointerDown(e, mark, true)} />
+                    <div key="right" className="resizer" onPointerDown={e => this.onPointerDown(e, mark, false)} />
+                </>}
+        </>;
+    });
+
+    render() {
+        const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : "";
+        const timelineContentWidth = this.props.PanelWidth() - AudioBox.playheadWidth;
+        const timelineContentHeight = (this.props.PanelHeight() * AudioBox.heightPercent / 100) * AudioBox.heightPercent / 100; // panelHeight * heightPercent is player height.   * heightPercent is timeline height (as per css inline)
+        const overlaps: { audioStart: number, audioEnd: number, level: number }[] = [];
+        const drawMarkers = this.markerDocs.map((m, i) => ({ level: this.getLevel(m, overlaps), marker: m }));
+        const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 2;
+        return <div className="audiobox-container"
+            onContextMenu={this.specificContextMenu}
+            onClick={!this.path && !this._recorder ? this.recordAudioAnnotation : undefined}
+            style={{ pointerEvents: this.props.layerProvider?.(this.layoutDoc) === false ? "none" : undefined }}>
             {!this.path ?
                 <div className="audiobox-buttons">
                     <div className="audiobox-dictation" onClick={this.onFile}>
@@ -569,10 +549,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                     {this.audioState === "recording" || this.audioState === "paused" ?
                         <div className="recording" onClick={e => e.stopPropagation()}>
                             <div className="buttons" onClick={this.recordClick}>
-                                <FontAwesomeIcon style={{ width: "100%" }} icon={"stop"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
+                                <FontAwesomeIcon icon={"stop"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
                             </div>
                             <div className="buttons" onClick={this._paused ? this.recordPlay : this.recordPause}>
-                                <FontAwesomeIcon style={{ width: "100%" }} icon={this._paused ? "play" : "pause"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
+                                <FontAwesomeIcon icon={this._paused ? "play" : "pause"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
                             </div>
                             <div className="time">{formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode)))}</div>
                         </div>
@@ -581,74 +561,33 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                             RECORD
                         </button>}
                 </div> :
-                <div className="audiobox-controls" >
-                    <div className="audiobox-dictation"></div>
-                    <div className="audiobox-player" >
-                        <div className="audiobox-playhead" title={this.audioState === "paused" ? "play" : "pause"} onClick={this.onPlay}> <FontAwesomeIcon style={{ width: "100%", position: "absolute", left: "0px", top: "5px", borderWidth: "thin", borderColor: "white" }} icon={this.audioState === "paused" ? "play" : "pause"} size={"1x"} /></div>
-                        <div className="audiobox-timeline" ref={this.timelineRef} onClick={e => { e.stopPropagation(); e.preventDefault(); }}
-                            onPointerDown={e => {
-                                if (e.button === 0 && !e.ctrlKey) {
-                                    const rect = (e.target as any).getBoundingClientRect();
-
-                                    if (e.target !== this._audioRef.current) {
-                                        const wasPaused = this.audioState === "paused";
-                                        this._ele!.currentTime = this.layoutDoc._currentTimecode = (e.clientX - rect.x) / rect.width * this.audioDuration;
-                                        wasPaused && this.pause();
-                                    }
-
-                                    this.onPointerDownTimeline(e);
-                                }
-                            }}>
+                <div className="audiobox-controls" style={{ pointerEvents: this._isChildActive || this.active() ? "all" : "none" }} >
+                    <div className="audiobox-dictation" />
+                    <div className="audiobox-player" style={{ height: `${AudioBox.heightPercent}%` }} >
+                        <div className="audiobox-playhead" style={{ width: AudioBox.playheadWidth }} title={this.audioState === "paused" ? "play" : "pause"} onClick={this.onPlay}> <FontAwesomeIcon style={{ width: "100%", position: "absolute", left: "0px", top: "5px", borderWidth: "thin", borderColor: "white" }} icon={this.audioState === "paused" ? "play" : "pause"} size={"1x"} /></div>
+                        <div className="audiobox-timeline" style={{ height: `${AudioBox.heightPercent}%` }} ref={this.timelineRef}
+                            onClick={e => { e.stopPropagation(); e.preventDefault(); }}
+                            onPointerDown={e => e.button === 0 && !e.ctrlKey && this.onPointerDownTimeline(e)}>
                             <div className="waveform">
                                 {this.waveform}
                             </div>
-                            {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) =>
-                                (!m.isLabel) ?
-                                    (this.layoutDoc.hideMarkers) ? (null) :
-                                        <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container1`} key={i}
-                                            title={`${formatTime(Math.round(NumCast(m.audioStart)))}` + " - " + `${formatTime(Math.round(NumCast(m.audioEnd)))}`}
-                                            style={{
-                                                left: `${NumCast(m.audioStart) / this.audioDuration * 100}%`,
-                                                top: `${this.isOverlap(m) * 1 / (this.dataDoc.markerAmount + 1) * 100}%`,
-                                                width: `${(NumCast(m.audioEnd) - NumCast(m.audioStart)) / this.audioDuration * 100}%`, height: `${1 / (this.dataDoc.markerAmount + 1) * 100}%`
-                                            }}
-                                            onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} >
-                                            <div className="left-resizer" onPointerDown={e => this.onPointerDown(e, m, true)}></div>
-                                            {markerDoc(m, this.rangeScript)}
-                                            <div className="resizer" onPointerDown={e => this.onPointerDown(e, m, false)}></div>
-                                        </div>
-                                    :
-                                    (this.layoutDoc.hideLabels) ? (null) :
-                                        <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container`} key={i}
-                                            style={{ left: `${NumCast(m.audioStart) / this.audioDuration * 100}%` }}>
-                                            {markerDoc(m, this.labelScript)}
-                                        </div>
-                            )}
-                            {DocListCast(this.dataDoc.links).map((l, i) => {
-                                const { la1, la2, linkTime } = this.getLinkData(l);
-                                let startTime = linkTime;
-                                if (la2.audioStart && !la2.audioEnd) {
-                                    startTime = NumCast(la2.audioStart);
-                                }
-
-                                return !linkTime ? (null) :
-                                    <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container`} key={l[Id]} style={{ left: `${startTime / this.audioDuration * 100}%` }} onClick={e => e.stopPropagation()}>
-                                        <DocumentView {...this.props}
-                                            Document={l}
-                                            rootSelected={returnFalse}
-                                            ContainingCollectionDoc={this.props.Document}
-                                            parentActive={returnTrue}
-                                            bringToFront={emptyFunction}
-                                            styleProvider={AudioBox.audioStyleProvider}
-                                            LayoutTemplate={undefined}
-                                            LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(l, la2)}`)}
-                                        />
-                                        <div key={i} className={`audiobox-marker`} onPointerEnter={() => Doc.linkFollowHighlight(la1)}
-                                            onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { this.playFrom(startTime); e.stopPropagation(); e.preventDefault(); } }} />
+                            {drawMarkers.map((d, i) => {
+                                const m = d.marker;
+                                const left = NumCast(m.audioStart) / this.audioDuration * timelineContentWidth;
+                                const top = d.level / maxLevel * timelineContentHeight;
+                                const timespan = m.audioEnd === undefined ? 10 / timelineContentWidth * this.audioDuration : NumCast(m.audioEnd) - NumCast(m.audioStart);
+                                return this.layoutDoc.hideMarkers ? (null) :
+                                    <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}timeline`} key={i}
+                                        style={{ left, top, width: `${timespan / this.audioDuration * 100}%`, height: `${1 / maxLevel * 100}%` }}
+                                        onClick={e => { this.playFrom(NumCast(m.audioStart), Cast(m.audioEnd, "number", null)); e.stopPropagation(); }} >
+                                        {this.renderMarker(m, this.rangeClickScript, this.rangePlayScript,
+                                            left + AudioBox.playheadWidth,
+                                            (1 - AudioBox.heightPercent / 100) / 2 * this.props.PanelHeight() + top,
+                                            timelineContentWidth * timespan / this.audioDuration,
+                                            timelineContentHeight / maxLevel)}
                                     </div>;
                             })}
-                            {this._visible ? this.selectionContainer : null}
-
+                            {this.selectionContainer}
                             <div className="audiobox-current" ref={this._audioRef} onClick={e => { e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc._currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} />
                             {this.audio}
                         </div>
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index bfb6e8fc8..09d89170c 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -169,6 +169,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         return <div className={"collectionFreeFormDocumentView-container"}
             style={{
                 outline: this.Highlight ? "orange solid 2px" : "",
+                width: this.panelWidth(),
+                height: this.panelHeight(),
                 transform: this.transform,
                 transition: this.props.dataTransition ? this.props.dataTransition : this.dataProvider ? this.dataProvider.transition : StrCast(this.layoutDoc.dataTransition),
                 zIndex: this.ZInd,
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index e7a94580a..2cac2d0b8 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -160,6 +160,8 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             DocumentLinksButton.AnnotationUri = undefined;
             //!this.props.StartLink 
         } else if (startLink !== endLink) {
+            endLink = endLinkView?.docView?._componentView?.getAnchor?.() || endLink;
+            startLink = DocumentLinksButton.StartLinkView?.docView?._componentView?.getAnchor?.() || startLink;
             const linkDoc = DocUtils.MakeLink({ doc: startLink }, { doc: endLink }, DocumentLinksButton.AnnotationId ? "hypothes.is annotation" : "long drag", undefined, undefined, true);
             // this notifies any of the subviews that a document is made so that they can make finer-grained hyperlinks ().  see note above in onLInkButtonMoved
             if (endLinkView) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index e99b0a155..6371ae5fb 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -29,6 +29,7 @@ import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from '../ContextMenuItem';
 import { DocComponent } from "../DocComponent";
 import { EditableView } from '../EditableView';
+import { InkingStroke } from "../InkingStroke";
 import { InkStrokeProperties } from '../InkStrokeProperties';
 import { StyleLayers, StyleProp } from "../StyleProvider";
 import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
@@ -51,6 +52,7 @@ export interface DocumentViewSharedProps {
     fitContentsToDoc?: boolean; // used by freeformview to fit its contents to its panel. corresponds to _fitToBox property on a Document
     ContainingCollectionView: Opt<CollectionView>;
     ContainingCollectionDoc: Opt<Doc>;
+    setContentView?: (view: { getAnchor: () => Doc }) => any;
     CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView;
     PanelWidth: () => number;
     PanelHeight: () => number;
@@ -74,6 +76,7 @@ export interface DocumentViewSharedProps {
     dropAction?: dropActionType;
     dontRegisterView?: boolean;
     ignoreAutoHeight?: boolean;
+    cantBrush?: boolean; // whether the document doesn't show brush highlighting
     pointerEvents?: string;
     scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document
 }
@@ -376,14 +379,16 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                         const func = () => this.onDoubleClickHandler.script.run({
                             this: this.layoutDoc,
                             self: this.rootDoc,
+                            scriptContext: this.props.scriptContext,
                             thisContainer: this.props.ContainingCollectionDoc,
+                            documentView: this.props.DocumentView,
                             shiftKey: e.shiftKey
                         }, console.log);
                         undoBatch(func)();
                     } else if (!Doc.IsSystem(this.props.Document)) {
                         if (this.props.Document.type === DocumentType.INK) {
                             InkStrokeProperties.Instance && (InkStrokeProperties.Instance._controlBtn = true);
-                        } else {
+                        } else if (this.props.Document.type !== DocumentType.LABEL) {
                             UndoManager.RunInBatch(() => {
                                 const fullScreenDoc = Cast(this.props.Document._fullScreenView, Doc, null) || this.props.Document;
                                 this.props.addDocTab(fullScreenDoc, "add");
@@ -411,7 +416,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     } else func();
                 };
                 if (this.onDoubleClickHandler) {
-                    this._timeout = setTimeout(() => { this._timeout = undefined; clickFunc(); }, 500);
+                    this._timeout = setTimeout(() => { this._timeout = undefined; clickFunc(); }, 350);
                 } else clickFunc();
             } else if (this.Document["onClick-rawScript"] && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes("ScriptingBox")) {// bcz: hack? don't edit a script if you're clicking on a scripting box itself
                 this.props.addDocTab(DocUtils.makeCustomViewClicked(Doc.MakeAlias(this.props.Document), undefined, "onClick"), "add:right");
@@ -548,7 +553,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         const linkSource = de.complete.annoDragData ? de.complete.annoDragData.annotationDocument : de.complete.linkDragData ? de.complete.linkDragData.linkSourceDocument : undefined;
         if (linkSource && linkSource !== this.props.Document) {
             e.stopPropagation();
-            de.complete.linkDocument = DocUtils.MakeLink({ doc: linkSource }, { doc: this.props.Document }, "link", undefined, undefined, undefined, [de.x, de.y]);
+            de.complete.linkDocument = DocUtils.MakeLink({ doc: linkSource }, { doc: this._componentView?.getAnchor() || this.rootDoc }, "link", undefined, undefined, undefined, [de.x, de.y]);
         }
     }
 
@@ -592,9 +597,9 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
 
         const customScripts = Cast(this.props.Document.contextMenuScripts, listSpec(ScriptField), []);
         Cast(this.props.Document.contextMenuLabels, listSpec("string"), []).forEach((label, i) =>
-            cm.addItem({ description: label, event: () => customScripts[i]?.script.run({ this: this.layoutDoc, self: this.rootDoc }), icon: "sticky-note" }));
+            cm.addItem({ description: label, event: () => customScripts[i]?.script.run({ this: this.layoutDoc, scriptContext: this.props.scriptContext, self: this.rootDoc }), icon: "sticky-note" }));
         this.props.contextMenuItems?.().forEach(item =>
-            item.label && cm.addItem({ description: item.label, event: () => item.script.script.run({ this: this.layoutDoc, self: this.rootDoc }), icon: "sticky-note" }));
+            item.label && cm.addItem({ description: item.label, event: () => item.script.script.run({ this: this.layoutDoc, scriptContext: this.props.scriptContext, self: this.rootDoc }), icon: "sticky-note" }));
 
         const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layoutKey)], Doc, null);
         const appearance = cm.findByDescription("UI Controls...");
@@ -688,10 +693,11 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin);
     contentScaling = () => this.ContentScale;
     onClickFunc = () => this.onClickHandler;
-    makeLink = () => this.props.DocumentView._link; // pass the link placeholde to child views so they can react to make a specialized anchor.  This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined.
+    makeLink = () => this.props.DocumentView.LinkBeingCreated; // pass the link placeholde to child views so they can react to make a specialized anchor.  This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined.
+    setContentView = (view: { getAnchor: () => Doc }) => this._componentView = view;
     @observable contentsActive: () => boolean = returnFalse;
     @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive;
-
+    _componentView: { getAnchor: () => Doc } | undefined;
     @computed get contents() {
         TraceMobx();
         return <div className="documentView-contentsView"
@@ -700,6 +706,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 height: this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
             }}>
             <DocumentContentsView key={1} {...this.props}
+                setContentView={this.setContentView}
                 scaling={this.contentScaling}
                 PanelHeight={this.panelHeight}
                 contentsActive={this.setContentsActive}
@@ -715,15 +722,6 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         </div>;
     }
 
-    // used to decide whether a link anchor view should be created or not.
-    // if it's a temporal link (currently just for Audio), then the audioBox will display the anchor and we don't want to display it here.
-    // would be good to generalize this some way.
-    isNonTemporalLink = (linkDoc: Doc) => {
-        const anchor = Cast(Doc.AreProtosEqual(this.props.Document, Cast(linkDoc.anchor1, Doc) as Doc) ? linkDoc.anchor1 : linkDoc.anchor2, Doc) as Doc;
-        const ept = Doc.AreProtosEqual(this.props.Document, Cast(linkDoc.anchor1, Doc) as Doc) ? linkDoc.anchor1_timecode : linkDoc.anchor2_timecode;
-        return anchor.type === DocumentType.AUDIO && NumCast(ept) ? false : true;
-    }
-
     @undoBatch
     hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && (doc.hidden = true), true)
     anchorPanelWidth = () => this.props.PanelWidth() || 1;
@@ -738,7 +736,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         if (this.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) return null;
         if (this.layoutDoc.presBox || this.rootDoc.type === DocumentType.LINK || this.props.dontRegisterView) return (null);
 
-        const filtered = DocUtils.FilterDocs(this.directLinks, this.props.docFilters(), []).filter(d => !d.hidden && this.isNonTemporalLink(d));
+        const filtered = DocUtils.FilterDocs(this.directLinks, this.props.docFilters(), []).filter(d => !d.hidden);
         return filtered.map((d, i) =>
             <div className="documentView-anchorCont" key={i + 1}>
                 <DocumentView {...this.props}
@@ -820,7 +818,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             ["transparent", "#65350c", "#65350c", "yellow", "magenta", "cyan", "orange"] :
             ["transparent", "maroon", "maroon", "yellow", "magenta", "cyan", "orange"])[highlightIndex];
         const highlightStyle = ["solid", "dashed", "solid", "solid", "solid", "solid", "solid"][highlightIndex];
-        let highlighting = highlightIndex && ![DocumentType.FONTICON, DocumentType.INK].includes(this.layoutDoc.type as any) && this.layoutDoc._viewType !== CollectionViewType.Linear;
+        let highlighting = !this.props.cantBrush && highlightIndex && ![DocumentType.FONTICON, DocumentType.INK].includes(this.layoutDoc.type as any) && this.layoutDoc._viewType !== CollectionViewType.Linear;
         highlighting = highlighting && this.props.focus !== emptyFunction && this.layoutDoc.title !== "[pres element template]";  // bcz: hack to turn off highlighting onsidebar panel documents.  need to flag a document as not highlightable in a more direct way
 
         const boxShadow = highlighting && this.borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` :
@@ -964,9 +962,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             {!this.props.Document || !this.props.PanelWidth() ? (null) : (
                 <div className="contentFittingDocumentView-previewDoc" ref={this.ContentRef}
                     style={{
+                        position: this.props.Document.isInkMask ? "absolute" : undefined,
                         transform: `translate(${this.centeringX}px, ${this.centeringY}px)`,
-                        width: Math.abs(this.Xshift) > 0.001 ? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(),
-                        height: Math.abs(this.YShift) > 0.001 ? this.props.Document._fitWidth ? `${this.panelHeight}px` : `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(),
+                        width: this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Xshift) > 0.001 ? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(),
+                        height: this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.YShift) > 0.001 ? this.props.Document._fitWidth ? `${this.panelHeight}px` : `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(),
                     }}>
                     <DocumentViewInternal {...this.props} {...internalProps} ref={action((r: DocumentViewInternal | null) => this.docView = r)} />
                 </div>)}
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index 730ae8f10..badacbc5c 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -102,7 +102,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
             if (docRangeFilters) {
                 let index: number;
                 while ((index = docRangeFilters.findIndex(item => item.split(":")[0] === facetHeader)) !== -1) {
-                    docRangeFilters.splice(index, 1);
+                    docRangeFilters.splice(index, 3);
                 }
             }
         } else {
@@ -122,13 +122,13 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
             });
             let newFacet: Opt<Doc>;
             if (facetHeader === "text" || facetValues.rtFields / allCollectionDocs.length > 0.1) {
-                newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true });
+                newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, system: true, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true });
                 Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox
                 newFacet._textBoxPadding = 4;
                 const scriptText = `setDocFilter(this?.target, "${facetHeader}", text, "match")`;
                 newFacet.onTextChanged = ScriptField.MakeScript(scriptText, { this: Doc.name, text: "string" });
             } else if (facetHeader !== "tags" && nonNumbers / facetValues.strings.length < .1) {
-                newFacet = Docs.Create.SliderDocument({ title: facetHeader, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", treeViewOpen: true });
+                newFacet = Docs.Create.SliderDocument({ title: facetHeader, _overflow: "visible", _height: 40, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", treeViewOpen: true });
                 const newFacetField = Doc.LayoutFieldKey(newFacet);
                 const ranged = Doc.readDocRangeFilter(targetDoc, facetHeader);
                 Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox
@@ -146,13 +146,13 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                 newFacet.title = facetHeader;
                 newFacet.treeViewOpen = true;
                 newFacet.type = DocumentType.COL;
-                const capturedVariables = { layoutDoc: targetDoc, _stayInCollection: true, _hideContextMenu: true, dataDoc: (targetDoc.data as any)[0][DataSym] };
+                const capturedVariables = { layoutDoc: targetDoc, system: true, _stayInCollection: true, _hideContextMenu: true, dataDoc: (targetDoc.data as any)[0][DataSym] };
                 newFacet.data = ComputedField.MakeFunction(`readFacetData(layoutDoc, "${facetHeader}")`, {}, capturedVariables);
             }
             newFacet && Doc.AddDocToList(this.dataDoc, this.props.fieldKey, newFacet);
         }
     }
-    filterBackground = () => "rgba(105, 105, 105, 0.432)";
+
     @computed get scriptField() {
         const scriptText = "setDocFilter(this?.target, heading, this.title, checked)";
         const script = ScriptField.MakeScript(scriptText, { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name });
@@ -184,6 +184,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                     DataDoc={Doc.GetProto(facetCollection)}
                     fieldKey={`${this.props.fieldKey}`}
                     CollectionView={undefined}
+                    cantBrush={true}
                     docFilters={returnEmptyFilter}
                     docRangeFilters={returnEmptyFilter}
                     searchFilterDocs={returnEmptyDoclist}
@@ -208,7 +209,8 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                     treeViewHideHeaderFields={true}
                     onCheckedClick={this.scriptField}
                     dontRegisterView={true}
-                    styleProvider={this.filterBackground}
+                    styleProvider={this.props.styleProvider}
+                    scriptContext={this.props.scriptContext}
                     moveDocument={returnFalse}
                     removeDocument={returnFalse}
                     addDocument={returnFalse} />
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 393ba07e6..b0e7f4ce5 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -413,7 +413,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
                 pointerEvents: this.props.layerProvider?.(this.layoutDoc) === false ? "none" : undefined,
                 borderRadius
             }} >
-            <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+            <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
                 renderDepth={this.props.renderDepth + 1}
                 ContainingCollectionDoc={this.props.ContainingCollectionDoc}
                 CollectionView={undefined}
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index bc2090a33..3448a4abd 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -67,6 +67,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps, LabelDocument
         const params = Cast(this.paramsDoc["onClick-paramFieldKeys"], listSpec("string"), []);
         const missingParams = params?.filter(p => !this.paramsDoc[p]);
         params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... 
+        const label = StrCast(this.rootDoc[this.fieldKey], StrCast(this.rootDoc.title));
         return (
             <div className="labelBox-outerDiv"
                 onClick={action(() => this.clicked = !this.clicked)}
@@ -88,7 +89,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps, LabelDocument
                     paddingBottom: NumCast(this.layoutDoc._yPadding),
                     whiteSpace: this.layoutDoc._singleLine ? "pre" : "pre-wrap"
                 }} >
-                    {StrCast(this.rootDoc[this.fieldKey], StrCast(this.rootDoc.title))}
+                    {label.startsWith("#") ? (null) : label}
                 </div>
                 <div className="labelBox-fieldKeyParams" >
                     {!missingParams?.length ? (null) : missingParams.map(m => <div key={m} className="labelBox-missingParam">{m}</div>)}
diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx
index e347d1304..d86dfd7b1 100644
--- a/src/client/views/nodes/LinkAnchorBox.tsx
+++ b/src/client/views/nodes/LinkAnchorBox.tsx
@@ -77,6 +77,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps, LinkAnch
                     LinkManager.FollowLink(this.rootDoc, anchorContainerDoc, this.props, false);
                     this._editing = false;
                 }), 300 - (Date.now() - this._lastTap));
+                e.stopPropagation();
             }
         } else {
             this._timeout && clearTimeout(this._timeout);
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 42462000b..aef776563 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -66,6 +66,12 @@ export enum PresColor {
     SlideBackground = "#d5dce2",
 }
 
+export class PinProps {
+    audioRange?: boolean;
+    unpin?: boolean;
+    setPosition?: boolean;
+}
+
 type PresBoxSchema = makeInterface<[typeof documentSchema]>;
 const PresBoxDocument = makeInterface(documentSchema);
 
@@ -423,8 +429,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         } else if (curDoc.presMovement === PresMovement.Pan && targetDoc) {
             await DocumentManager.Instance.jumpToDocument(targetDoc, false, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection); // documents open in new tab instead of on right
         } else if ((curDoc.presMovement === PresMovement.Zoom || curDoc.presMovement === PresMovement.Jump) && targetDoc) {
-            //awaiting jump so that new scale can be found, since jumping is async
-            await DocumentManager.Instance.jumpToDocument(targetDoc, true, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection); // documents open in new tab instead of on right
+            //awaiting jump so that new scale can be found, since jumping is async     
+            await DocumentManager.Instance.jumpToDocument(targetDoc, true, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection); // documents open in new tab instead of on right    
         }
         // After navigating to the document, if it is added as a presPinView then it will
         // adjust the pan and scale to that of the pinView when it was added.
@@ -433,6 +439,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             this.navigateToView(targetDoc, activeItem);
         }
         // TODO: Add progressivize for navigating web (storing websites for given frames)
+
     }
 
     /**
@@ -536,6 +543,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                         this.next();
                     }
                 }
+
                 await timer(duration); this.next(); // then the created Promise can be awaited
                 if (i === this.childDocs.length - 1) {
                     setTimeout(() => {
@@ -709,7 +717,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     audio.presStartTime = NumCast(doc.audioStart);
                     audio.presEndTime = NumCast(doc.audioEnd);
                     audio.presDuration = NumCast(doc.audioEnd) - NumCast(doc.audioStart);
-                    TabDocView.PinDoc(audio, false, true);
+                    TabDocView.PinDoc(audio, { audioRange: true });
                     setTimeout(() => this.removeDocument(doc), 0);
                     return false;
                 }
@@ -766,11 +774,28 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     //Regular click
     @action
-    selectElement = (doc: Doc) => {
+    selectElement = async (doc: Doc) => {
         const context = Cast(doc.context, Doc, null);
         this.gotoDocument(this.childDocs.indexOf(doc), this.activeItem);
         if (doc.presPinView || doc.presentationTargetDoc === this.layoutDoc.presCollection) setTimeout(() => this.updateCurrentPresentation(context), 0);
         else this.updateCurrentPresentation(context);
+
+        if (this.activeItem.setPosition &&
+            this.activeItem.y !== undefined &&
+            this.activeItem.x !== undefined &&
+            this.targetDoc.x !== undefined &&
+            this.targetDoc.y !== undefined) {
+            const timer = (ms: number) => new Promise(res => this._presTimer = setTimeout(res, ms));
+            const time = 10;
+            const ydiff = NumCast(this.activeItem.y) - NumCast(this.targetDoc.y);
+            const xdiff = NumCast(this.activeItem.x) - NumCast(this.targetDoc.x);
+
+            for (let i = 0; i < time; i++) {
+                this.targetDoc.x = NumCast(this.targetDoc.x) + xdiff / time;
+                this.targetDoc.y = NumCast(this.targetDoc.y) + ydiff / time;
+                await timer(0.1);
+            }
+        }
     }
 
     //Command click
@@ -1711,7 +1736,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             const presData = Cast(this.rootDoc.data, listSpec(Doc));
             if (data && presData) {
                 data.push(doc);
-                TabDocView.PinDoc(doc, false);
+                TabDocView.PinDoc(doc);
                 this.gotoDocument(this.childDocs.length, this.activeItem);
             } else {
                 this.props.addDocTab(doc, "add:right");
diff --git a/src/client/views/nodes/SliderBox-components.tsx b/src/client/views/nodes/SliderBox-components.tsx
index 874a1108f..e19f28f08 100644
--- a/src/client/views/nodes/SliderBox-components.tsx
+++ b/src/client/views/nodes/SliderBox-components.tsx
@@ -11,7 +11,6 @@ const railStyle: React.CSSProperties = {
     position: "absolute",
     width: "100%",
     height: 40,
-    top: -13,
     borderRadius: 7,
     cursor: "pointer",
     opacity: 0.3,
@@ -231,7 +230,7 @@ export function Tick({ tick, count, format = defaultFormat }: TickProps) {
             <div
                 style={{
                     position: "absolute",
-                    marginTop: 17,
+                    marginTop: 20,
                     width: 1,
                     height: 5,
                     backgroundColor: "rgb(200,200,200)",
diff --git a/src/client/views/nodes/SliderBox.scss b/src/client/views/nodes/SliderBox.scss
index 78015bd70..4206a368d 100644
--- a/src/client/views/nodes/SliderBox.scss
+++ b/src/client/views/nodes/SliderBox.scss
@@ -1,7 +1,19 @@
 .sliderBox-outerDiv {
-    width: 100%;
+    width: calc(100% - 14px);   // 14px accounts for handles that are at the max value of the slider that would extend outside the box
     height: 100%;
     border-radius: inherit;
     display: flex;
     flex-direction: column;
+    position: relative;
+    .slider-tracks {
+        top: 7px;
+        position: relative;
+    }
+    .slider-ticks {
+        position: relative;
+    }
+    .slider-handles {
+        top: 7px;
+        position: relative;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/SliderBox.tsx b/src/client/views/nodes/SliderBox.tsx
index 2aa71b2bd..bfe07c22b 100644
--- a/src/client/views/nodes/SliderBox.tsx
+++ b/src/client/views/nodes/SliderBox.tsx
@@ -41,7 +41,10 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps, SliderDocume
     onChange = (values: readonly number[]) => runInAction(() => {
         this.dataDoc[this.minThumbKey] = values[0];
         this.dataDoc[this.maxThumbKey] = values[1];
-        Cast(this.layoutDoc.onThumbChanged, ScriptField, null)?.script.run({ self: this.rootDoc, range: values, this: this.layoutDoc });
+        Cast(this.layoutDoc.onThumbChanged, ScriptField, null)?.script.run({
+            self: this.rootDoc,
+            scriptContext: this.props.scriptContext, range: values, this: this.layoutDoc
+        });
     })
 
     render() {
@@ -50,10 +53,12 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps, SliderDocume
         return domain[1] <= domain[0] ? (null) : (
             <div className="sliderBox-outerDiv" onContextMenu={this.specificContextMenu} onPointerDown={e => e.stopPropagation()}
                 style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}>
-                <div className="sliderBox-mainButton" onContextMenu={this.specificContextMenu} style={{
-                    background: StrCast(this.layoutDoc.backgroundColor), color: StrCast(this.layoutDoc.color, "black"),
-                    fontSize: StrCast(this.layoutDoc._fontSize), letterSpacing: StrCast(this.layoutDoc.letterSpacing)
-                }} >
+                <div className="sliderBox-mainButton"
+                    onContextMenu={this.specificContextMenu} style={{
+                        background: StrCast(this.layoutDoc.backgroundColor),
+                        color: StrCast(this.layoutDoc.color, "black"),
+                        fontSize: StrCast(this.layoutDoc._fontSize), letterSpacing: StrCast(this.layoutDoc.letterSpacing)
+                    }} >
                     <Slider
                         mode={2}
                         step={1}
@@ -101,7 +106,7 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps, SliderDocume
                         </Tracks>
                         <Ticks count={5}>
                             {({ ticks }) => (
-                                <div className="slider-tracks">
+                                <div className="slider-ticks">
                                     {ticks.map((tick) => (
                                         <Tick
                                             key={tick.id}
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 9cdd6465f..76edda847 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -15,12 +15,13 @@
         position: absolute;
         height: 20%;
         width: 100%;
-        bottom: -60px;
+        bottom: 0px;
         background: white;
         border: gray solid 1px;
         border-radius: 3px;
         z-index: 1000;
         overflow: hidden;
+        left: 0px;
 
         .audiobox-current {
             width: 1px;
@@ -70,7 +71,7 @@
             }
         }
 
-        .audiobox-marker-container1,
+        .audiobox-marker-timeline,
         .audiobox-marker-minicontainer {
             position: absolute;
             width: 10px;
@@ -115,6 +116,11 @@
                 width: 2px;
                 z-index: 100;
             }
+            
+            // .contentFittingDocumentView-previewDoc {
+            //     width: 100% !important;
+            //     transform: none !important;
+            // }
         }
 
         .audiobox-marker-container1:hover,
@@ -173,14 +179,14 @@
     pointer-events:all;
 }
 
-.timeline-button {
-    position: absolute;
-    bottom: 15px;
-    right: 17%;
-    color: lightgrey;
-    width: 20px;
+// .timeline-button {
+//     position: absolute;
+//     bottom: 35px;
+//     right: 235px;
+//     color: lightgrey;
+//     width: 20px;
 
-}
+// }
 .videoBox-play {
     width: 25px;
     height: 20px;
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 060953e7b..67e8d74b3 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -28,6 +28,8 @@ import { LinkDocPreview } from "./LinkDocPreview";
 import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment";
 import { Transform } from "../../util/Transform";
 import { StyleProp } from "../StyleProvider";
+import { computedFn } from "mobx-utils";
+import { DocumentManager } from "../../util/DocumentManager";
 const path = require('path');
 
 export const timeSchema = createSchema({
@@ -42,6 +44,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
     static Instance: VideoBox;
     static RangeScript: ScriptField;
     static LabelScript: ScriptField;
+    static RangePlayScript: ScriptField;
+    static LabelPlayScript: ScriptField;
+    static heightPercent = 20; // height of timeline in percent of height of videoBox.
     private _reactionDisposer?: IReactionDisposer;
     private _youtubeReactionDisposer?: IReactionDisposer;
     // private _reactionDisposer?: IReactionDisposer;
@@ -57,11 +62,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
     _audioRef = React.createRef<HTMLDivElement>();
     _markerStart: number = 0;
     _left: boolean = false;
-    _first: boolean = false;
     _count: Array<any> = [];
     _duration = 0;
     _start: boolean = true;
     private _currMarker: any;
+    @observable static SelectingRegion: VideoBox | undefined = undefined;
     @observable _visible: boolean = false;
     @observable _markerEnd: number = 0;
     @observable _forceCreateYouTubeIFrame = false;
@@ -70,6 +75,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
     @observable _playing = false;
     @observable static _showControls: boolean;
     @computed get videoDuration() { return NumCast(this.dataDoc[this.fieldKey + "-duration"]); }
+    @computed get markerDocs() { return DocListCast(this.dataDoc[this.annotationKey]); }
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(VideoBox, fieldKey); }
 
     public get player(): HTMLVideoElement | null {
@@ -81,8 +87,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         VideoBox.Instance = this;
 
         // onClick play scripts
-        VideoBox.RangeScript = VideoBox.RangeScript || ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart), (this.audioEnd))`, { scriptContext: "any" })!;
-        VideoBox.LabelScript = VideoBox.LabelScript || ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart))`, { scriptContext: "any" })!;
+        VideoBox.RangeScript = VideoBox.RangeScript || ScriptField.MakeScript(`scriptContext.clickMarker(self, this.audioStart, this.audioEnd)`, { self: Doc.name, scriptContext: "any" })!;
+        VideoBox.LabelScript = VideoBox.LabelScript || ScriptField.MakeScript(`scriptContext.clickMarker(self, this.audioStart)`, { self: Doc.name, scriptContext: "any" })!;
+        VideoBox.RangePlayScript = VideoBox.RangePlayScript || ScriptField.MakeScript(`scriptContext.playOnClick(self, this.audioStart, this.audioEnd)`, { self: Doc.name, scriptContext: "any" })!;
+        VideoBox.LabelPlayScript = VideoBox.LabelPlayScript || ScriptField.MakeScript(`scriptContext.playOnClick(self, this.audioStart)`, { self: Doc.name, scriptContext: "any" })!;
     }
 
     videoLoad = () => {
@@ -253,10 +261,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
                 this.layoutDoc._height = (this.layoutDoc._width || 0) / youtubeaspect;
             }
         }
-
-        if (!this.dataDoc.markerAmount) {
-            this.dataDoc.markerAmount = 0;
-        }
     }
 
     componentWillUnmount() {
@@ -317,23 +321,29 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         }
     }
 
+    // returns the video and timeline 
     @computed get content() {
         const field = Cast(this.dataDoc[this.fieldKey], VideoField);
         const interactive = Doc.GetSelectedTool() !== InkTool.None || !this.props.isSelected() ? "" : "-interactive";
         const style = "videoBox-content" + (this._fullScreen ? "-fullScreen" : "") + interactive;
+        const h = this.layoutDoc._showTimeline ? `${100 - VideoBox.heightPercent}%` : "100%";
         return !field ? <div>Loading</div> :
-            <div>
-                <video className={`${style}`} key="video" autoPlay={this._screenCapture} ref={this.setVideoRef}
-                    style={{ width: this._screenCapture ? "100%" : undefined, height: this._screenCapture ? "100%" : undefined }}
-                    onCanPlay={this.videoLoad}
-                    controls={VideoBox._showControls}
-                    onPlay={() => this.Play()}
-                    onSeeked={this.updateTimecode}
-                    onPause={() => this.Pause()}
-                    onClick={e => e.preventDefault()}>
-                    <source src={field.url.href} type="video/mp4" />
-                Not supported.
-            </video>
+            <div className="container" style={{ pointerEvents: this._isChildActive || this.active() ? "all" : "none" }}>
+                <div className={`${style}`} style={{ width: "100%", height: h, left: "0px" }}>
+                    <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef}
+                        style={{ height: "100%", width: "auto", display: "flex", margin: "auto" }}
+                        onCanPlay={this.videoLoad}
+                        controls={VideoBox._showControls}
+                        onPlay={() => this.Play()}
+                        onSeeked={this.updateTimecode}
+                        onPause={() => this.Pause()}
+                        onClick={e => e.preventDefault()}>
+                        <source src={field.url.href} type="video/mp4" />
+                    Not supported.
+                    </video>
+                    {this.uIButtons}
+                </div>
+                {this.renderTimeline}
             </div>;
     }
 
@@ -392,7 +402,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         <div className="videoBox-snapshot" key="snap" onPointerDown={this.onSnapshot} >
             <FontAwesomeIcon icon="camera" size="lg" />
         </div>,
-        <div className="timeline-button" key="timeline-button" onPointerDown={this.toggleTimeline}>
+        <div className="timeline-button" key="timeline-button" onPointerDown={this.toggleTimeline} style={{
+            position: "absolute",
+            bottom: "41px",
+            right: this.layoutDoc._showTimeline ? "235px" : "155px",
+            color: "lightgrey",
+            width: "20px"
+        }}>
             <FontAwesomeIcon icon={this.layoutDoc._showTimeline ? "eye-slash" : "eye"} style={{ width: "100%" }} />
         </div>,
         VideoBox._showControls ? (null) : [
@@ -462,7 +478,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         return this.addDocument(doc);
     }
 
-    // play back the audio from time
+    // play back the video from time
     @action
     playFrom = (seekTimeInSeconds: number, endTime: number = this.videoDuration) => {
         clearTimeout(this._play);
@@ -497,29 +513,39 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         this._timeline = timeline;
     }
 
-    // starting the drag event for marker resizing
+    // starting the drag event creating a range marker
     @action
     onPointerDownTimeline = (e: React.PointerEvent): void => {
-        const rect = (e.target as any).getBoundingClientRect();
-        const toTimeline = (screen_delta: number) => screen_delta / rect.width * this.videoDuration;
-        this._markerStart = this._markerEnd = toTimeline(e.clientX - rect.x);
-        setupMoveUpEvents(this, e,
-            action((e: PointerEvent) => {
-                this._visible = true;
-                this._markerEnd = toTimeline(e.clientX - rect.x);
-                if (this._markerEnd < this._markerStart) {
-                    const tmp = this._markerStart;
-                    this._markerStart = this._markerEnd;
-                    this._markerEnd = tmp;
+        const rect = this._timeline?.getBoundingClientRect();// (e.target as any).getBoundingClientRect();
+        if (rect && e.target !== this._audioRef.current && this.active()) {
+            const wasPaused = !this._playing;
+            this.player!.currentTime = this.layoutDoc._currentTimecode = (e.clientX - rect.x) / rect.width * this.videoDuration;
+            wasPaused && this.Pause();
+
+            const toTimeline = (screen_delta: number) => screen_delta / rect.width * this.videoDuration;
+            this._markerStart = this._markerEnd = toTimeline(e.clientX - rect.x);
+            VideoBox.SelectingRegion = this;
+            setupMoveUpEvents(this, e,
+                action(e => {
+                    this._markerEnd = toTimeline(e.clientX - rect.x);
+                    return false;
+                }),
+                action((e, movement) => {
+                    this._markerEnd = toTimeline(e.clientX - rect.x);
+                    if (this._markerEnd < this._markerStart) {
+                        const tmp = this._markerStart;
+                        this._markerStart = this._markerEnd;
+                        this._markerEnd = tmp;
+                    }
+                    VideoBox.SelectingRegion === this && (Math.abs(movement[0]) > 15) && this.createMarker(this._markerStart, this._markerEnd);
+                    VideoBox.SelectingRegion = undefined;
+                }),
+                e => {
+                    this.props.select(false);
+                    e.shiftKey && this.createMarker(this.player!.currentTime);
                 }
-                return false;
-            }),
-            action((e: PointerEvent, movement: number[]) => {
-                (Math.abs(movement[0]) > 15) && this.createMarker(this._markerStart, toTimeline(e.clientX - rect.x));
-                this._visible = false;
-            }),
-            (e: PointerEvent) => e.shiftKey && this.createMarker(this.player!.currentTime)
-        );
+                , this.props.isSelected(true) || this._isChildActive);
+        }
     }
 
     @action
@@ -537,6 +563,23 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         }
     }
 
+    // play back the video from time
+    @action
+    playOnClick = (anchorDoc: Doc, seekTimeInSeconds: number, endTime: number = this.videoDuration) => {
+        DocumentManager.Instance.getDocumentView(anchorDoc)?.select(false);
+        this.playFrom(seekTimeInSeconds, endTime);
+    }
+
+    // play back the video from time
+    @action
+    clickMarker = (anchorDoc: Doc, seekTimeInSeconds: number, endTime: number = this.videoDuration) => {
+        if (this.layoutDoc.playOnClick) this.playOnClick(anchorDoc, seekTimeInSeconds, endTime);
+        else {
+            DocumentManager.Instance.getDocumentView(anchorDoc)?.select(false);
+            this.player && (this.player.currentTime = this.layoutDoc._currentTimecode = seekTimeInSeconds);
+        }
+    }
+
     // starting the drag event for marker resizing
     onPointerDown = (e: React.PointerEvent, m: any, left: boolean): void => {
         this._currMarker = m;
@@ -557,6 +600,98 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
             emptyFunction);
     }
 
+    // makes sure no markers overlaps each other by setting the correct position and width
+    getLevel = (m: any, placed: { audioStart: number, audioEnd: number, level: number }[]) => {
+        const timelineContentWidth = this.props.PanelWidth();
+        const x1 = m.audioStart;
+        const x2 = m.audioEnd === undefined ? m.audioStart + 10 / timelineContentWidth * this.videoDuration : m.audioEnd;
+        let max = 0;
+        const overlappedLevels = new Set(placed.map(p => {
+            const y1 = p.audioStart;
+            const y2 = p.audioEnd;
+            if ((x1 >= y1 && x1 <= y2) || (x2 >= y1 && x2 <= y2) ||
+                (y1 >= x1 && y1 <= x2) || (y2 >= x1 && y2 <= x2)) {
+                max = Math.max(max, p.level);
+                return p.level;
+            }
+        }));
+        let level = max + 1;
+        for (let j = max; j >= 0; j--) !overlappedLevels.has(j) && (level = j);
+
+        placed.push({ audioStart: x1, audioEnd: x2, level });
+        return level;
+    }
+
+    // renders the markers as a document
+    renderInner = computedFn(function (this: VideoBox, mark: Doc, script: undefined | (() => ScriptField), doublescript: undefined | (() => ScriptField), x: number, y: number, width: number, height: number) {
+        const marker = observable({ view: undefined as any });
+        return {
+            marker, view: <DocumentView key="view" {...this.props} ref={action((r: DocumentView | null) => marker.view = r)}
+                Document={mark}
+                PanelWidth={() => width}
+                PanelHeight={() => height}
+                rootSelected={returnFalse}
+                LayoutTemplate={undefined}
+                ContainingCollectionDoc={this.props.Document}
+                removeDocument={this.removeDocument}
+                ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().translate(-x - 4, -y - 3)}
+                parentActive={(out) => this.props.isSelected(out) || this._isChildActive}
+                whenActiveChanged={action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive))}
+                onClick={script}
+                onDoubleClick={this.layoutDoc.playOnClick ? undefined : doublescript}
+                ignoreAutoHeight={false}
+                bringToFront={emptyFunction}
+                scriptContext={this} />
+        };
+    });
+
+    renderMarker = computedFn(function (this: VideoBox, mark: Doc, script: undefined | (() => ScriptField), doublescript: undefined | (() => ScriptField), x: number, y: number, width: number, height: number) {
+        const inner = this.renderInner(mark, script, doublescript, x, y, width, height);
+        return <>
+            {inner.view}
+            {!inner.marker.view || !SelectionManager.IsSelected(inner.marker.view) ? (null) :
+                <>
+                    <div key="left" className="left-resizer" onPointerDown={e => this.onPointerDown(e, mark, true)} />
+                    <div key="right" className="resizer" onPointerDown={e => this.onPointerDown(e, mark, false)} />
+                </>}
+        </>;
+    });
+
+    // returns the timeline
+    @computed get renderTimeline() {
+        const rect = this._timeline?.getBoundingClientRect();
+        const timelineContentWidth = this.props.PanelWidth();
+        //const timelineContentWidth = this.layoutDoc._showTimeline ? this.props.PanelWidth() * 1.25 : this.props.PanelWidth();
+        //const timelineContentWidth = rect ? rect.width : this.props.PanelWidth();
+        const timelineContentHeight = (this.props.PanelHeight() * VideoBox.heightPercent / 100); // panelHeight * heightPercent is player height.   * heightPercent is timeline height (as per css inline)
+        const overlaps: { audioStart: number, audioEnd: number, level: number }[] = [];
+        const drawMarkers = this.markerDocs.map((m, i) => ({ level: this.getLevel(m, overlaps), marker: m }));
+        const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 2;
+        return !this.layoutDoc._showTimeline ? (null) :
+            <div className="audiobox-timeline" ref={this.timelineRef} onClick={e => { e.stopPropagation(); e.preventDefault(); }} style={{ height: `${VideoBox.heightPercent}%` }}
+                onPointerDown={e => e.button === 0 && !e.ctrlKey && this.onPointerDownTimeline(e)}>
+                {drawMarkers.map((d, i) => {
+                    const m = d.marker;
+                    const left = NumCast(m.audioStart) / this.videoDuration;
+                    const l = `${NumCast(m.audioStart) / this.videoDuration * 100}%`;
+                    const top = d.level / maxLevel * timelineContentHeight;
+                    const timespan = m.audioEnd === undefined ? 10 / timelineContentWidth * this.videoDuration : NumCast(m.audioEnd) - NumCast(m.audioStart);
+                    return this.layoutDoc.hideMarkers ? (null) :
+                        <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}timeline`} key={i}
+                            style={{ left: l, top, width: `${timespan / this.videoDuration * 100}%`, height: `${1 / maxLevel * 100}%` }}
+                            onClick={e => { this.playFrom(NumCast(m.audioStart), Cast(m.audioEnd, "number", null)); e.stopPropagation(); }} >
+                            {this.renderMarker(m, this.rangeClickScript, this.rangePlayScript,
+                                left,
+                                top,
+                                timelineContentWidth * timespan / this.videoDuration,
+                                timelineContentHeight / maxLevel)}
+                        </div>;
+                })}
+                {this.selectionContainer}
+                <div className="audiobox-current" ref={this._audioRef} onClick={e => { e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc._currentTimecode) / this.videoDuration * 100}%`, pointerEvents: "none" }} />
+            </div>;
+    }
+
     // updates the marker with the new time
     @action
     changeMarker = (m: any, time: any) => {
@@ -569,48 +704,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         return m1.audioStart === m2.audioStart && m1.audioEnd === m2.audioEnd;
     }
 
-    // instantiates a new array of size 500 for marker layout
-    markers = () => {
-        const increment = this.videoDuration / 500;
-        this._count = [];
-        for (let i = 0; i < 500; i++) {
-            this._count.push([increment * i, 0]);
-        }
-    }
-
-    // makes sure no markers overlaps each other by setting the correct position and width
-    isOverlap = (m: any) => {
-        if (this._first) {
-            this._first = false;
-            this.markers();
-        }
-        let max = 0;
-
-        for (let i = 0; i < 500; i++) {
-            if (this._count[i][0] >= m.audioStart && this._count[i][0] <= m.audioEnd) {
-                this._count[i][1]++;
-
-                if (this._count[i][1] > max) {
-                    max = this._count[i][1];
-                }
-            }
-        }
-
-        for (let i = 0; i < 500; i++) {
-            if (this._count[i][0] >= m.audioStart && this._count[i][0] <= m.audioEnd) {
-                this._count[i][1] = max;
-            }
-        }
-
-        if (this.dataDoc.markerAmount < max) {
-            this.dataDoc.markerAmount = max;
-        }
-        return max - 1;
-    }
-
+    // returns the blue container when dragging
     @computed get selectionContainer() {
-        return <div className="audiobox-container" style={{
-            left: `${NumCast(this._markerStart) / this.videoDuration * 100}%`,
+        return VideoBox.SelectingRegion !== this ? (null) : <div className="audiobox-container" style={{
+            left: `${Math.min(NumCast(this._markerStart), NumCast(this._markerEnd)) / this.videoDuration * 100}%`,
             width: `${Math.abs(this._markerStart - this._markerEnd) / this.videoDuration * 100}%`, height: "100%", top: "0%"
         }} />;
     }
@@ -619,49 +716,34 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         VideoBox.Instance.keyEvents(e);
     }
 
+    // for creating key markers with key events
     @action
     keyEvents = (e: KeyboardEvent) => {
         if (e.target instanceof HTMLInputElement) return;
         if (!this._playing) return; // can't create if video is not playing
         switch (e.key) {
-            case "x":
+            case "x": // currently set to x, but can be a different key
                 const currTime = this.player!.currentTime;
                 if (this._start) {
                     this._markerStart = this.player!.currentTime;
                     this._start = false;
-                    console.log("begin");
                     this._visible = true;
                 } else {
                     this.createMarker(this._markerStart, currTime);
                     this._start = true;
-                    console.log("end");
                     this._visible = false;
                 }
         }
     }
 
-    rangeScript = () => VideoBox.RangeScript;
-    labelScript = () => VideoBox.LabelScript;
+    rangeClickScript = () => VideoBox.RangeScript;
+    labelClickScript = () => VideoBox.LabelScript;
+    rangePlayScript = () => VideoBox.RangePlayScript;
+    labelPlayScript = () => VideoBox.LabelPlayScript;
 
     screenToLocalTransform = () => this.props.ScreenToLocalTransform();
     contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content];
     render() {
-        const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : "";
-        this._first = true;  // for indicating the first marker that is rendered
-        const markerDoc = (mark: Doc, script: undefined | (() => ScriptField)) => {
-            return <DocumentView {...this.props}
-                Document={mark}
-                pointerEvents={"all"}
-                rootSelected={returnFalse}
-                LayoutTemplate={undefined}
-                ContainingCollectionDoc={this.props.Document}
-                removeDocument={this.removeDocument}
-                parentActive={returnTrue}
-                onClick={this.layoutDoc.playOnClick ? script : undefined}
-                ignoreAutoHeight={false}
-                bringToFront={emptyFunction}
-                scriptContext={this} />;
-        };
         const borderRad = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding);
         const borderRadius = borderRad?.includes("px") ? `${Number(borderRad.split("px")[0]) / (this.props.scaling?.() || 1)}px` : borderRad;
         return (<div className="videoBox" onContextMenu={this.specificContextMenu}
@@ -672,7 +754,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
                 borderRadius
             }} >
             <div className="videoBox-viewer" >
-                <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+                <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
                     forceScaling={true}
                     fieldKey={this.annotationKey}
                     isAnnotationOverlay={true}
@@ -689,47 +771,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
                     {this.contentFunc}
                 </CollectionFreeFormView>
             </div>
-            {this.uIButtons}
-            {!this.layoutDoc._showTimeline ? (null) :
-                <div className="audiobox-timeline" ref={this.timelineRef} onClick={e => { e.stopPropagation(); e.preventDefault(); }}
-                    onPointerDown={e => {
-                        if (e.button === 0 && !e.ctrlKey) {
-                            const rect = (e.target as any).getBoundingClientRect();
-
-                            if (e.target !== this._audioRef.current) {
-                                const wasPaused = !this._playing;
-                                this.player!.currentTime = this.layoutDoc._currentTimecode = (e.clientX - rect.x) / rect.width * this.videoDuration;
-                                wasPaused && this.Pause();
-                            }
-                            this.onPointerDownTimeline(e);
-                        }
-                    }}>
-                    {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) =>
-                        (!m.isLabel) ?
-                            (this.layoutDoc.hideMarkers) ? (null) :
-                                <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container1`} key={i}
-                                    title={`${formatTime(Math.round(NumCast(m.audioStart)))}` + " - " + `${formatTime(Math.round(NumCast(m.audioEnd)))}`}
-                                    style={{
-                                        left: `${NumCast(m.audioStart) / this.videoDuration * 100}%`,
-                                        top: `${this.isOverlap(m) * 1 / (this.dataDoc.markerAmount + 1) * 100}%`,
-                                        width: `${(NumCast(m.audioEnd) - NumCast(m.audioStart)) / this.videoDuration * 100}%`, height: `${1 / (this.dataDoc.markerAmount + 1) * 100}%`
-                                    }}
-                                    onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} >
-                                    <div className="left-resizer" onPointerDown={e => this.onPointerDown(e, m, true)}></div>
-                                    {markerDoc(m, this.rangeScript)}
-                                    <div className="resizer" onPointerDown={e => this.onPointerDown(e, m, false)}></div>
-                                </div>
-                            :
-                            (this.layoutDoc.hideLabels) ? (null) :
-                                <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container`} key={i}
-                                    style={{ left: `${NumCast(m.audioStart) / this.videoDuration * 100}%` }}>
-                                    {markerDoc(m, this.labelScript)}
-                                </div>
-                    )}
-                    {this._visible ? this.selectionContainer : null}
-                    <div className="audiobox-current" ref={this._audioRef} onClick={e => { e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc._currentTimecode) / this.videoDuration * 100}%`, pointerEvents: "none" }} />
-                </div>}
-
         </div >);
     }
 }
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 8e824a447..7fb14b0cc 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -689,7 +689,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                         height: NumCast(this.scrollHeight, 50),
                         pointerEvents: inactiveLayer ? "none" : undefined
                     }}>
-                        <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+                        <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
                             renderDepth={this.props.renderDepth + 1}
                             CollectionView={undefined}
                             fieldKey={this.annotationKey}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 2b9910dfb..c129d0204 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -320,12 +320,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             DocListCast(this.dataDoc.links).map((l, i) => {
                 let la1 = l.anchor1 as Doc;
                 let la2 = l.anchor2 as Doc;
-                this._linkTime = NumCast(l.anchor2_timecode);
+                this._linkTime = NumCast(la1.audioStart, NumCast(la2.audioStart));
                 audioState = la2.audioState;
                 if (Doc.AreProtosEqual(la2, this.dataDoc)) {
                     la1 = l.anchor2 as Doc;
                     la2 = l.anchor1 as Doc;
-                    this._linkTime = NumCast(l.anchor1_timecode);
                     audioState = la1.audioState;
                 }
             });