aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/nodes/AudioBox.tsx47
-rw-r--r--src/client/views/nodes/VideoBox.tsx6
2 files changed, 26 insertions, 27 deletions
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index b1f09c042..2eb34d27a 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -84,10 +84,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
componentDidMount() {
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.mediaState = this.path ? media_state.Paused : undefined as any as media_state;
-
- this.path && this.setAnchorTime(NumCast(this.layoutDoc.clipStart));
- this.path && this.timecodeChanged();
+ if (this.path) {
+ this.mediaState = media_state.Paused;
+ this.setPlayheadTime(NumCast(this.layoutDoc.clipStart));
+ this.timecodeChanged();
+ } else {
+ this.mediaState = undefined as any as media_state;
+ }
}
getLinkData(l: Doc) {
@@ -151,7 +154,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
this.mediaState = media_state.Playing;
this._play = setTimeout(
() => {
- if (fullPlay) this.setAnchorTime(this.timeline!.trimStart);
+ if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart);
this.Pause();
},
(end - start) * 1000);
@@ -330,12 +333,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
}
}
- playing = () => this.mediaState === media_state.Playing;
- isActiveChild = () => this._isAnyChildContentActive;
+ @action
timelineWhenChildContentsActiveChanged = (isActive: boolean) =>
- this.props.whenChildContentsActiveChanged(
- runInAction(() => (this._isAnyChildContentActive = isActive))
- )
+ this.props.whenChildContentsActiveChanged(this._isAnyChildContentActive = isActive)
timelineScreenToLocal = () =>
this.props
.ScreenToLocalTransform()
@@ -343,18 +343,18 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
-AudioBox.playheadWidth,
(-(100 - AudioBox.heightPercent) / 200) * this.props.PanelHeight()
)
- setAnchorTime = (time: number) => this._ele!.currentTime = this.layoutDoc._currentTimecode = time;
+ setPlayheadTime = (time: number) => this._ele!.currentTime = this.layoutDoc._currentTimecode = time;
+ playing = () => this.mediaState === media_state.Playing;
+ isActiveChild = () => this._isAnyChildContentActive;
timelineWidth = () => this.props.PanelWidth() - AudioBox.playheadWidth;
- timelineHeight = () =>
- (((this.props.PanelHeight() * AudioBox.heightPercent) / 100) *
- AudioBox.heightPercent) / 100 // panelHeight * heightPercent is player height. * heightPercent is timeline height (as per css inline)
-
+ timelineHeight = () => (this.props.PanelHeight() * (AudioBox.heightPercent / 100)) *// panelHeight * heightPercent is player height
+ (AudioBox.heightPercent / 100) // * heightPercent is timeline height (as per css inline)
@undoBatch
finishTrim = () => { // hides trim controls and displays new clip
this.Pause();
- this.setAnchorTime(Math.max(Math.min(this.timeline?.trimEnd || 0, this._ele!.currentTime), this.timeline?.trimStart || 0));
+ this.setPlayheadTime(Math.max(Math.min(this.timeline?.trimEnd || 0, this._ele!.currentTime), this.timeline?.trimStart || 0));
this.timeline?.StopTrimming();
}
@@ -479,7 +479,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
bringToFront={emptyFunction}
CollectionView={undefined}
playFrom={this.playFrom}
- setTime={this.setAnchorTime}
+ setTime={this.setPlayheadTime}
playing={this.playing}
whenChildContentsActiveChanged={this.timelineWhenChildContentsActiveChanged}
moveDocument={this.moveDocument}
@@ -500,13 +500,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
// returns the html audio element
@computed get audio() {
return <audio ref={this.setRef}
- onLoadedData={action(e => {
- const duration = this._ele?.duration;
- if (duration && duration !== Infinity) {
- this.dataDoc[this.fieldKey + "-duration"] = duration;
- }
- })}
- className={`audiobox-control${this.props.isContentActive() ? "-interactive" : ""}`}>
+ className={`audiobox-control${this.props.isContentActive() ? "-interactive" : ""}`}
+ onLoadedData={action(e =>
+ (this._ele?.duration && this._ele?.duration !== Infinity) &&
+ (this.dataDoc[this.fieldKey + "-duration"] = this._ele?.duration)
+ )}
+ >
<source src={this.path} type="audio/mpeg" />
Not supported.
</audio>;
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index eb75754b9..0c4693907 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -405,7 +405,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
this._playing = true;
this._playRegionTimer = setTimeout(
() => {
- if (fullPlay) this.setAnchorTime(this.timeline?.trimStart || 0);
+ if (fullPlay) this.setPlayheadTime(this.timeline?.trimStart || 0);
this.Pause();
}, this._playRegionDuration * 1000);
} else {
@@ -452,7 +452,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
timelineWhenChildContentsActiveChanged = action((isActive: boolean) => this.props.whenChildContentsActiveChanged(this._isAnyChildContentActive = isActive));
timelineScreenToLocal = () => this.props.ScreenToLocalTransform().scale(this.scaling()).translate(0, -this.heightPercent / 100 * this.props.PanelHeight());
- setAnchorTime = (time: number) => this.player!.currentTime = this.layoutDoc._currentTimecode = time;
+ setPlayheadTime = (time: number) => this.player!.currentTime = this.layoutDoc._currentTimecode = time;
timelineHeight = () => this.props.PanelHeight() * (100 - this.heightPercent) / 100;
playing = () => this._playing;
@@ -549,7 +549,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
bringToFront={emptyFunction}
CollectionView={undefined}
playFrom={this.playFrom}
- setTime={this.setAnchorTime}
+ setTime={this.setPlayheadTime}
playing={this.playing}
isAnyChildContentActive={this.isAnyChildContentActive}
whenChildContentsActiveChanged={this.timelineWhenChildContentsActiveChanged}