Add clip player & offline renderer #49
@ -30,7 +30,7 @@ div.recorder-root {
|
|||||||
|
|
||||||
span.ms-Slider-inactive {
|
span.ms-Slider-inactive {
|
||||||
height: 3px;
|
height: 3px;
|
||||||
animation: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,6 +14,7 @@ interface IRecorderProps {
|
|||||||
allTime?: number;
|
allTime?: number;
|
||||||
currentTime?: number;
|
currentTime?: number;
|
||||||
action?: () => void;
|
action?: () => void;
|
||||||
|
valueChange?: (value: number) => any;
|
||||||
}
|
}
|
||||||
|
|
||||||
class Recorder extends Component<IRecorderProps> {
|
class Recorder extends Component<IRecorderProps> {
|
||||||
@ -85,19 +86,38 @@ class Recorder extends Component<IRecorderProps> {
|
|||||||
max={this.props.allFrame}
|
max={this.props.allFrame}
|
||||||
className={"recorder-slider" + (isSliderDisable ? " disable" : "")}
|
className={"recorder-slider" + (isSliderDisable ? " disable" : "")}
|
||||||
showValue={false}
|
showValue={false}
|
||||||
|
onChange={(value) => {
|
||||||
|
if (this.props.valueChange && !isSliderDisable) {
|
||||||
|
this.props.valueChange(value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="recorder-content">
|
<div className="recorder-content">
|
||||||
<div className="time-view">
|
<div className="time-view">
|
||||||
{this.getRecordInfo()}
|
{this.getRecordInfo()}
|
||||||
</div>
|
</div>
|
||||||
<div className="ctrl-button">
|
<div className="ctrl-button">
|
||||||
<div className={"ctrl-action" + (isJumpDisable ? " disable" : "")}>
|
<div
|
||||||
|
className={"ctrl-action" + (isJumpDisable ? " disable" : "")}
|
||||||
|
onClick={() => {
|
||||||
|
if (this.props.valueChange && !isJumpDisable && this.props.currentFrame !== undefined) {
|
||||||
|
this.props.valueChange(this.props.currentFrame - 1);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Icon iconName="Back"/>
|
<Icon iconName="Back"/>
|
||||||
</div>
|
</div>
|
||||||
<div className="ctrl-action ctrl-action-main" onClick={this.props.action}>
|
<div className="ctrl-action ctrl-action-main" onClick={this.props.action}>
|
||||||
<Icon iconName={this.getActionIcon()}/>
|
<Icon iconName={this.getActionIcon()}/>
|
||||||
</div>
|
</div>
|
||||||
<div className={"ctrl-action" + (isJumpDisable ? " disable" : "")}>
|
<div
|
||||||
|
className={"ctrl-action" + (isJumpDisable ? " disable" : "")}
|
||||||
|
onClick={() => {
|
||||||
|
if (this.props.valueChange && !isJumpDisable && this.props.currentFrame !== undefined) {
|
||||||
|
this.props.valueChange(this.props.currentFrame + 1);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Icon iconName="Forward"/>
|
<Icon iconName="Forward"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -217,6 +217,23 @@ class Actuator extends Emitter<IActuatorEvent> {
|
|||||||
|
|
||||||
private playTickerTimer?: number;
|
private playTickerTimer?: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置播放进度
|
||||||
|
*/
|
||||||
|
public setPlayProcess(id: number) {
|
||||||
|
if (this.playClip && id >= 0 && id < this.playClip.frames.length) {
|
||||||
|
|
||||||
|
// 跳转值这帧
|
||||||
|
this.playFrameId = id;
|
||||||
|
this.playFrame = this.playClip.frames[this.playFrameId];
|
||||||
|
this.emit("record", this.playFrame.duration);
|
||||||
|
|
||||||
|
if (this.mod !== ActuatorModel.Play) {
|
||||||
|
this.playClip.play(this.playFrame);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 播放时钟
|
* 播放时钟
|
||||||
*/
|
*/
|
||||||
|
@ -93,6 +93,9 @@ class ClipRecorder extends Component<IMixinStatusProps> {
|
|||||||
console.log("ClipRecorder: Pause start...");
|
console.log("ClipRecorder: Pause start...");
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
valueChange={(value) => {
|
||||||
|
this.props.status?.actuator.setPlayProcess(value);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user