diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 40 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 86 |
2 files changed, 108 insertions, 18 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 0fc66445a..2e9525577 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -553,11 +553,15 @@ export class CollectionStackedTimeline extends CollectionSubView< ); const left = this.props.trimming ? (start / this.duration) * timelineContentWidth - : (start - this.trimStart) / this.props.trimDuration * timelineContentWidth; + : Math.max((start - this.trimStart) / this.props.trimDuration * timelineContentWidth, 0); const top = (d.level / maxLevel) * this.timelineContentHeight(); const timespan = end - start; - const width = (timespan / this.props.trimDuration) * timelineContentWidth; - const height = this.timelineContentHeight() / maxLevel; + let width = (timespan / this.props.trimDuration) * timelineContentWidth; + width = (!this.props.trimming && left == 0) ? + width - ((this.trimStart - start) / this.props.trimDuration * timelineContentWidth) : width; + width = (!this.props.trimming && this.trimEnd < end) ? + width - ((end - this.trimEnd) / this.props.trimDuration * timelineContentWidth) : width; + const height = this.timelineContentHeight() / maxLevel return this.props.Document.hideAnchors ? null : ( <div className={"collectionStackedTimeline-marker-timeline"} @@ -831,21 +835,21 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> {inner.view} {!inner.anchor.view || !SelectionManager.IsSelected(inner.anchor.view) ? null : ( - <> - <div - key="left" - className="collectionStackedTimeline-left-resizer" - onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)} - /> - <div - key="right" - className="collectionStackedTimeline-resizer" - onPointerDown={(e) => - this.onAnchorDown(e, this.props.mark, false) - } - /> - </> - )} + <> + <div + key="left" + className="collectionStackedTimeline-left-resizer" + onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)} + /> + <div + key="right" + className="collectionStackedTimeline-resizer" + onPointerDown={(e) => + this.onAnchorDown(e, this.props.mark, false) + } + /> + </> + )} </> ); } diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index a6494e540..cf9d97128 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -3,6 +3,50 @@ .audiobox-container, .audiobox-container-interactive { + width: 100%; + height: 100%; + position: inherit; + display: flex; + position: relative; + cursor: default; + + .audiobox-buttons { + display: flex; + width: 100%; + align-items: center; + + .audiobox-dictation { + position: relative; + width: 30px; + height: 100%; + align-items: center; + display: inherit; + background: $medium-gray; + left: 0px; + color: $dark-gray; + &:hover { + color: $black; + cursor: pointer; + } + } + } + + .audiobox-control, + .audiobox-control-interactive { + top: 0; + max-height: 32px; + width: 100%; + display: inline-block; + pointer-events: none; + } + + .audiobox-control-interactive { + pointer-events: all; + } + + .audiobox-record-interactive, + .audiobox-record { + pointer-events: all; width: 100%; height: 100%; position: inherit; @@ -10,6 +54,48 @@ position: relative; cursor: default; + .audiobox-record { + pointer-events: none; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: $large-header; + } + + .recording { + margin-top: auto; + margin-bottom: auto; + width: 100%; + height: 100%; + position: relative; + padding-right: 5px; + display: flex; + background-color: $medium-blue; + + .time { + position: relative; + width: 100%; + font-size: $large-header; + text-align: center; + } + + .recording-buttons { + position: relative; + margin-top: auto; + margin-bottom: auto; + color: $dark-gray; + &:hover { + color: $black; + } + } + + .time, .recording-buttons { + display: flex; + align-items: center; + padding: 5px; + } + } .audiobox-buttons { display: flex; width: 100%; |