From 768ab508529ab2b7f43a44592e5dc2c9f15a68a5 Mon Sep 17 00:00:00 2001
From: yunahi <60233430+yunahi@users.noreply.github.com>
Date: Sat, 9 Jan 2021 01:31:43 +0900
Subject: spotlight

---
 src/client/views/collections/TabDocView.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'src/client/views/collections/TabDocView.tsx')

diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 530595cd0..b3ad0f82e 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -142,6 +142,16 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 pinDoc.presStartTime = 0;
                 pinDoc.presEndTime = doc.duration;
             }
+            //save position
+            if (pinDoc.isInkMask) {
+                pinDoc.y = doc.y;
+                pinDoc.x = doc.x;
+                pinDoc.presHideAfter = true;
+                pinDoc.presHideBefore = true;
+                pinDoc.title = doc.title + "- Spotlight";
+                pinDoc.presMovement = PresMovement.None;
+
+            }
             if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
             const dview = CollectionDockingView.Instance.props.Document;
             const fieldKey = CollectionDockingView.Instance.props.fieldKey;
-- 
cgit v1.2.3-70-g09d2


From 761596b7bb7b4cab18e1e1df62330a3a11a7af03 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 11 Jan 2021 13:57:14 -0500
Subject: generalized spotlight moving to be available by any document

---
 src/client/views/DocumentButtonBar.tsx          | 11 +++----
 src/client/views/collections/CollectionMenu.tsx |  4 +--
 src/client/views/collections/TabDocView.tsx     | 12 ++++----
 src/client/views/nodes/PresBox.tsx              | 39 ++++++++++++++-----------
 src/mobile/MobileInterface.tsx                  |  2 +-
 5 files changed, 37 insertions(+), 31 deletions(-)

(limited to 'src/client/views/collections/TabDocView.tsx')

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 96f5d78fd..3eabb294d 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -186,20 +186,21 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     @computed
     get pinButton() {
         const targetDoc = this.view0?.props.Document;
-        const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}</div></>}>
+        return !targetDoc ? (null) : <Tooltip title={
+            <div className="dash-tooltip">{SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}</div>}>
             <div className="documentButtonBar-linker"
                 style={{ color: "white" }}
-                onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, false)))}>
+                onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document /*, { setPosition: true }*/)))}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
-            </div></Tooltip>;
+            </div>
+        </Tooltip>;
     }
 
     @undoBatch
     @action
     pinWithView = (targetDoc: Doc) => {
         if (targetDoc) {
-            TabDocView.PinDoc(targetDoc, false);
+            TabDocView.PinDoc(targetDoc);
             const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1];
             const scrollable: boolean = (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.WEB || targetDoc._viewType === CollectionViewType.Stacking);
             const pannable: boolean = ((targetDoc.type === DocumentType.COL && targetDoc._viewType === CollectionViewType.Freeform) || targetDoc.type === DocumentType.IMG);
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 85fcf6384..5670d45f5 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -389,7 +389,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
         return !targetDoc ? (null) : <Tooltip key="pin" title={<div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div>} placement="top">
             <button className="antimodeMenu-button" style={{ backgroundColor: isPinned ? "121212" : undefined, borderLeft: "1px solid gray" }}
-                onClick={e => TabDocView.PinDoc(targetDoc, isPinned)}>
+                onClick={e => TabDocView.PinDoc(targetDoc, { unpin: isPinned })}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin" />
             </button>
         </Tooltip>;
@@ -399,7 +399,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
     @action
     pinWithView = (targetDoc: Opt<Doc>) => {
         if (targetDoc) {
-            TabDocView.PinDoc(targetDoc, false);
+            TabDocView.PinDoc(targetDoc);
             const presArray: Doc[] = PresBox.Instance?.sortArray();
             const size: number = PresBox.Instance?._selectedArray.size;
             const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 9a0759fe5..09f709a5e 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -24,7 +24,7 @@ import { Transform } from '../../util/Transform';
 import { undoBatch, UndoManager } from "../../util/UndoManager";
 import { DocumentView, DocAfterFocusFunc, DocumentViewProps } from "../nodes/DocumentView";
 import { FieldViewProps } from '../nodes/FieldView';
-import { PresBox, PresMovement } from '../nodes/PresBox';
+import { PresBox, PresMovement, PinProps } from '../nodes/PresBox';
 import { DefaultLayerProvider, DefaultStyleProvider, StyleLayers, StyleProp } from '../StyleProvider';
 import { CollectionDockingView } from './CollectionDockingView';
 import { CollectionDockingViewMenu } from './CollectionDockingViewMenu';
@@ -166,8 +166,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
      * Adds a document to the presentation view
      **/
     @action
-    public static async PinDoc(doc: Doc, unpin = false, audioRange?: boolean) {
-        if (unpin) console.log('TODO: Remove UNPIN from this location');
+    public static async PinDoc(doc: Doc, pinProps?: PinProps) {
+        if (pinProps?.unpin) console.log('TODO: Remove UNPIN from this location');
         //add this new doc to props.Document
         const curPres = CurrentUserUtils.ActivePresentation;
         if (curPres) {
@@ -183,21 +183,21 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             const size: number = PresBox.Instance?._selectedArray.size;
             const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
             Doc.AddDocToList(curPres, "data", pinDoc, presSelected);
-            if (!audioRange && (pinDoc.type === DocumentType.AUDIO || pinDoc.type === DocumentType.VID)) {
+            if (!pinProps?.audioRange && (pinDoc.type === DocumentType.AUDIO || pinDoc.type === DocumentType.VID)) {
                 pinDoc.mediaStart = "manual";
                 pinDoc.mediaStop = "manual";
                 pinDoc.presStartTime = 0;
                 pinDoc.presEndTime = pinDoc.type === DocumentType.AUDIO ? doc.duration : NumCast(doc["data-duration"]);
             }
             //save position
-            if (pinDoc.isInkMask) {
+            if (pinProps?.setPosition || pinDoc.isInkMask) {
+                pinDoc.setPosition = true;
                 pinDoc.y = doc.y;
                 pinDoc.x = doc.x;
                 pinDoc.presHideAfter = true;
                 pinDoc.presHideBefore = true;
                 pinDoc.title = doc.title + "- Spotlight";
                 pinDoc.presMovement = PresMovement.None;
-
             }
             if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
             const dview = CollectionDockingView.Instance.props.Document;
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 90897b8fd..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);
 
@@ -711,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;
                 }
@@ -774,21 +780,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (doc.presPinView || doc.presentationTargetDoc === this.layoutDoc.presCollection) setTimeout(() => this.updateCurrentPresentation(context), 0);
         else this.updateCurrentPresentation(context);
 
-        if (this.targetDoc.isInkMask) {
-            if (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);
-                }
+        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);
             }
         }
     }
@@ -1731,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/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index c4a6433c8..c7e2d02cb 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -512,7 +512,7 @@ export class MobileInterface extends React.Component {
             return <div className="docButton"
                 title={Doc.isDocPinned(this._activeDoc) ? "Unpin from presentation" : "Pin to presentation"}
                 style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
-                onClick={e => TabDocView.PinDoc(this._activeDoc, isPinned)}>
+                onClick={e => TabDocView.PinDoc(this._activeDoc, { unpin: isPinned })}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
             </div>;
         } else return (null);
-- 
cgit v1.2.3-70-g09d2


From 6ce848be82dcb2c3b8bffe69282305b348d639a2 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 14 Jan 2021 11:58:25 -0500
Subject: fixed stacking behavior of what audio regions that have no end

---
 src/client/views/DocumentButtonBar.tsx      |  2 +-
 src/client/views/collections/TabDocView.tsx |  2 +-
 src/client/views/nodes/AudioBox.tsx         | 66 +++++++++++++++--------------
 3 files changed, 36 insertions(+), 34 deletions(-)

(limited to 'src/client/views/collections/TabDocView.tsx')

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 3eabb294d..a2bd0aad9 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -190,7 +190,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
             <div className="dash-tooltip">{SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}</div>}>
             <div className="documentButtonBar-linker"
                 style={{ color: "white" }}
-                onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document /*, { setPosition: true }*/)))}>
+                onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, { setPosition: e.shiftKey ? true : undefined })))}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
             </div>
         </Tooltip>;
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 09f709a5e..5ca069fb9 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -196,7 +196,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 pinDoc.x = doc.x;
                 pinDoc.presHideAfter = true;
                 pinDoc.presHideBefore = true;
-                pinDoc.title = doc.title + "- Spotlight";
+                pinDoc.title = doc.title + " (move)";
                 pinDoc.presMovement = PresMovement.None;
             }
             if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 141f90e83..36df09338 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -17,20 +17,19 @@ import { emptyFunction, formatTime, numberRange, returnFalse, returnTrue, setupM
 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 { DocumentManager } from "../../util/DocumentManager";
+import { computedFn } from "mobx-utils";
 
 declare class MediaRecorder {
     // whatever MediaRecorder has
@@ -46,6 +45,8 @@ 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;
@@ -312,7 +313,6 @@ 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" });
         ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
     }
@@ -409,6 +409,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     // starting the drag event for marker resizing
     @action
     onPointerDownTimeline = (e: React.PointerEvent): void => {
+        this.props.select(false);
         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);
@@ -479,11 +480,11 @@ 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
+    // instantiates a new array of size NUMBER_OF_BUCKETS for marker layout
     markers = () => {
-        const increment = this.audioDuration / 500;
+        const increment = this.audioDuration / AudioBox.NUMBER_OF_BUCKETS;
         this._count = [];
-        for (let i = 0; i < 500; i++) {
+        for (let i = 0; i < AudioBox.NUMBER_OF_BUCKETS; i++) {
             this._count.push([increment * i, 0]);
         }
     }
@@ -495,9 +496,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
             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) {
+        const timelineContentWidth = this.props.PanelWidth() - AudioBox.playheadWidth;
+        const audioEnd = m.audioEnd === undefined ? m.audioStart + 10 / timelineContentWidth * this.audioDuration : m.audioEnd;
+        for (let i = 0; i < AudioBox.NUMBER_OF_BUCKETS; i++) {
+            if (this._count[i][0] >= m.audioStart && this._count[i][0] <= audioEnd) {
                 this._count[i][1]++;
 
                 if (this._count[i][1] > max) {
@@ -506,8 +508,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
             }
         }
 
-        for (let i = 0; i < 500; i++) {
-            if (this._count[i][0] >= m.audioStart && this._count[i][0] <= m.audioEnd) {
+        for (let i = 0; i < AudioBox.NUMBER_OF_BUCKETS; i++) {
+            if (this._count[i][0] >= m.audioStart && this._count[i][0] <= audioEnd) {
                 this._count[i][1] = max;
             }
         }
@@ -561,7 +563,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     labelClickScript = () => AudioBox.LabelScript;
     rangePlayScript = () => AudioBox.RangePlayScript;
     labelPlayScript = () => AudioBox.LabelPlayScript;
-    renderMarker = (mark: Doc, script: undefined | (() => ScriptField), doublescript: undefined | (() => ScriptField), x: number, y: number, width: number, height: number) => {
+    renderMarker = computedFn(function (this: AudioBox, mark: Doc, script: undefined | (() => ScriptField), doublescript: undefined | (() => ScriptField), x: number, y: number, width: number, height: number) {
         return <DocumentView {...this.props}
             Document={mark}
             PanelWidth={() => width}
@@ -578,15 +580,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
             ignoreAutoHeight={false}
             bringToFront={emptyFunction}
             scriptContext={this} />;
-    }
+    });
     render() {
         const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : "";
         this._first = true;  // for indicating the first marker that is rendered
 
-        const heightPercent = 80;
-        const playheadWidth = 30;
-        const timelineContentWidth = this.props.PanelWidth() - playheadWidth;
-        const timelineContentHeight = (this.props.PanelHeight() * heightPercent / 100) * heightPercent / 100; // panelHeight * heightPercent is player height.   * heightPercent is timeline height (as per css inline)
+        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)
         return <div className="audiobox-container"
             onContextMenu={this.specificContextMenu}
             onClick={!this.path && !this._recorder ? this.recordAudioAnnotation : undefined}
@@ -613,9 +613,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                 </div> :
                 <div className="audiobox-controls" >
                     <div className="audiobox-dictation" />
-                    <div className="audiobox-player" style={{ height: `${heightPercent}%` }} >
-                        <div className="audiobox-playhead" style={{ width: 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: `${heightPercent}%` }} ref={this.timelineRef}
+                    <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 => {
                                 if (e.button === 0 && !e.ctrlKey) {
@@ -634,32 +634,34 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                             </div>
                             {this.markerDocs.map((m, i) => {
                                 const isOverlap = this.isOverlap(m);
-                                return !m.isLabel ?
-                                    this.layoutDoc.hideMarkers ? (null) :
+                                const left = AudioBox.playheadWidth + NumCast(m.audioStart) / this.audioDuration * timelineContentWidth;
+                                return this.layoutDoc.hideMarkers ? (null) :
+                                    !m.isLabel ?
                                         <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 * timelineContentWidth}px`,
-                                                top: `${isOverlap * 1 / (this.dataDoc.markerAmount + 1) * timelineContentHeight}px`,
+                                                left: left - AudioBox.playheadWidth,
+                                                top: `${isOverlap / (this.dataDoc.markerAmount + 1) * timelineContentHeight}px`,
                                                 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)} />
                                             {this.renderMarker(m, this.rangeClickScript, this.rangePlayScript,
-                                                playheadWidth + NumCast(m.audioStart) / this.audioDuration * timelineContentWidth,
+                                                left,
                                                 .1 * this.props.PanelHeight() + isOverlap / (this.dataDoc.markerAmount + 1) * timelineContentHeight,
                                                 timelineContentWidth * (NumCast(m.audioEnd) - NumCast(m.audioStart)) / this.audioDuration,
                                                 timelineContentHeight / (this.dataDoc.markerAmount + 1))}
                                             <div className="resizer" onPointerDown={e => this.onPointerDown(e, m, false)} />
                                         </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}%` }}
+                                            style={{
+                                                left: left - AudioBox.playheadWidth,
+                                                top: `${isOverlap * 1 / (this.dataDoc.markerAmount + 1) * timelineContentHeight}px`,
+                                            }}
                                             onClick={e => { this.playFrom(NumCast(m.audioStart)); e.stopPropagation(); }}>
                                             {this.renderMarker(m, this.labelClickScript, this.labelPlayScript,
-                                                playheadWidth + NumCast(m.audioStart) / this.audioDuration * timelineContentWidth,
+                                                left,
                                                 .1 * this.props.PanelHeight(),
                                                 10, 10)}
                                         </div>;
-- 
cgit v1.2.3-70-g09d2

