diff options
| author | bobzel <zzzman@gmail.com> | 2021-01-08 10:52:07 -0500 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2021-01-08 10:52:07 -0500 |
| commit | 3b58580fce84d3f1eb3af586041d703f663e8667 (patch) | |
| tree | 4eb42af33176fa5e673ecda53e6413f2eb19db06 | |
| parent | 5a1225bb4f08e28df1434fd26839f020715d1660 (diff) | |
fixed sizing/display of audio box regions
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 14 |
1 files changed, 11 insertions, 3 deletions
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 67d25e525..500d4defa 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -546,10 +546,16 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD 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)) => { + const markerStyle = (doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string): any => { + return property.startsWith("backgroundColor") ? "dimGrey" : this.props.styleProvider?.(doc, props, property); + } + const markerDoc = (mark: Doc, script: undefined | (() => ScriptField), width?: number, height?: number) => { return <DocumentView {...this.props} Document={mark} + PanelWidth={width ? () => width : this.props.PanelWidth} + PanelHeight={height ? () => height : this.props.PanelHeight} focus={() => this.playLink(mark)} + styleProvider={markerStyle} pointerEvents={"all"} rootSelected={returnFalse} LayoutTemplate={undefined} @@ -611,11 +617,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD 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}%` + 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)} + {markerDoc(m, this.rangeScript, this.props.PanelWidth() * (NumCast(m.audioEnd) - NumCast(m.audioStart)) / this.audioDuration, + .64 * this.props.PanelHeight() / (this.dataDoc.markerAmount + 1))} <div className="resizer" onPointerDown={e => this.onPointerDown(e, m, false)}></div> </div> : |