bugfix
This commit is contained in:
parent
77dd35a6ae
commit
f2c3ad98c3
@ -4,9 +4,7 @@ bricks.Svg = class extends bricks.VBox {
|
|||||||
options:{
|
options:{
|
||||||
rate:
|
rate:
|
||||||
url:
|
url:
|
||||||
blink:false
|
|
||||||
color:*
|
color:*
|
||||||
blinkcolor:*
|
|
||||||
blinktime:*
|
blinktime:*
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
@ -20,9 +18,6 @@ bricks.Svg = class extends bricks.VBox {
|
|||||||
if (! this.color) {
|
if (! this.color) {
|
||||||
this.color = bricks.app.get_color();
|
this.color = bricks.app.get_color();
|
||||||
}
|
}
|
||||||
if (!this.blinkcolor){
|
|
||||||
this.blinkcolor = bricks.app.get_bgcolor()
|
|
||||||
}
|
|
||||||
if (opts.url){
|
if (opts.url){
|
||||||
this.set_url(opts.url);
|
this.set_url(opts.url);
|
||||||
}
|
}
|
||||||
@ -39,7 +34,7 @@ bricks.Svg = class extends bricks.VBox {
|
|||||||
if (svgText.startsWith("<svg ")){
|
if (svgText.startsWith("<svg ")){
|
||||||
this.svgText = svgText;
|
this.svgText = svgText;
|
||||||
this.set_colored_svg(this.color);
|
this.set_colored_svg(this.color);
|
||||||
if (this.blink) this.start_blink();
|
if (this.blinktime) this.start_blink();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -51,22 +46,17 @@ bricks.Svg = class extends bricks.VBox {
|
|||||||
this.color = color;
|
this.color = color;
|
||||||
this.set_colored_svg(color);
|
this.set_colored_svg(color);
|
||||||
}
|
}
|
||||||
set_blinkcolor(color){
|
|
||||||
this.blinkcolor = color;
|
|
||||||
this.blinktime = this.blinktime || 0.5;
|
|
||||||
}
|
|
||||||
set_colored_svg(color){
|
set_colored_svg(color){
|
||||||
this.cur_color = color;
|
this.cur_color = color;
|
||||||
var svgText = bricks.obj_fmtstr({color: color}, this.svgText);
|
var this.svg_text = bricks.obj_fmtstr({color: color}, this.svgText);
|
||||||
this.dom_element.innerHTML = svgText;
|
this.dom_element.innerHTML = svg_text;
|
||||||
}
|
}
|
||||||
_blink(){
|
_blink(){
|
||||||
if (this.blinktime && this.blinkcolor) {
|
if (this.blinktime) {
|
||||||
if (this.cur_color == this.color){
|
if (this.dom_element.innerHTML == '')
|
||||||
this.set_colored_svg(this.blinkcolor);
|
this.dom_element.innerHTML = this.svg_text;
|
||||||
} else {
|
else
|
||||||
this.set_colored_svg(this.color);
|
this.dom_element.innerHTML = ''
|
||||||
}
|
|
||||||
this.blink_task = schedule_once(this._blink.bind(this),
|
this.blink_task = schedule_once(this._blink.bind(this),
|
||||||
this.blinktime);
|
this.blinktime);
|
||||||
}
|
}
|
||||||
@ -77,6 +67,8 @@ bricks.Svg = class extends bricks.VBox {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
end_blink(){
|
end_blink(){
|
||||||
|
if (this.blink_task)
|
||||||
|
this.blink_task.cancel();
|
||||||
this.blink_task = null;
|
this.blink_task = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,9 +17,6 @@ bricks.VideoPlayer = class extends bricks.VBox {
|
|||||||
this.set_css('video-container');
|
this.set_css('video-container');
|
||||||
this.dom_element.innerHTML = `<video id="video" class="video-element"></video>
|
this.dom_element.innerHTML = `<video id="video" class="video-element"></video>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<div class="progress-container">
|
|
||||||
<input type="range" class="progress-bar" value="0" step="0.0001" />
|
|
||||||
</div>
|
|
||||||
<div class="controls-bottom">
|
<div class="controls-bottom">
|
||||||
<button class="play-pause">▶</button>
|
<button class="play-pause">▶</button>
|
||||||
<div class="volume-container">
|
<div class="volume-container">
|
||||||
@ -51,7 +48,6 @@ bricks.VideoPlayer = class extends bricks.VBox {
|
|||||||
this.playPauseBtn = this.controls.querySelector('.play-pause');
|
this.playPauseBtn = this.controls.querySelector('.play-pause');
|
||||||
this.muteBtn = this.controls.querySelector('.mute');
|
this.muteBtn = this.controls.querySelector('.mute');
|
||||||
this.volumeInput = this.controls.querySelector('.volume');
|
this.volumeInput = this.controls.querySelector('.volume');
|
||||||
this.progressBar = this.controls.querySelector('.progress-bar');
|
|
||||||
this.timeDisplay = this.controls.querySelector('.time');
|
this.timeDisplay = this.controls.querySelector('.time');
|
||||||
this.speedSelect = this.controls.querySelector('.playback-speed');
|
this.speedSelect = this.controls.querySelector('.playback-speed');
|
||||||
this.audioTrackSelect = this.controls.querySelector('.audio-track-select');
|
this.audioTrackSelect = this.controls.querySelector('.audio-track-select');
|
||||||
@ -151,12 +147,6 @@ bricks.VideoPlayer = class extends bricks.VBox {
|
|||||||
this.updateMuteUI();
|
this.updateMuteUI();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 进度条拖动
|
|
||||||
this.progressBar.addEventListener('input', (e) => {
|
|
||||||
const time = e.target.value * this.video.duration;
|
|
||||||
this.video.currentTime = time;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 播放速度
|
// 播放速度
|
||||||
this.speedSelect.addEventListener('change', (e) => {
|
this.speedSelect.addEventListener('change', (e) => {
|
||||||
this.video.playbackRate = parseFloat(e.target.value);
|
this.video.playbackRate = parseFloat(e.target.value);
|
||||||
@ -212,9 +202,6 @@ bricks.VideoPlayer = class extends bricks.VBox {
|
|||||||
this.video.addEventListener('loadedmetadata', () => {
|
this.video.addEventListener('loadedmetadata', () => {
|
||||||
this.updateAudioTracks();
|
this.updateAudioTracks();
|
||||||
});
|
});
|
||||||
this.video.addEventListener('seeking', () => {
|
|
||||||
this.progressBar.value = this.video.currentTime / this.video.duration;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
updateUI() {
|
updateUI() {
|
||||||
@ -234,7 +221,6 @@ bricks.VideoPlayer = class extends bricks.VBox {
|
|||||||
|
|
||||||
updateProgress() {
|
updateProgress() {
|
||||||
const percent = this.video.duration ? this.video.currentTime / this.video.duration : 0;
|
const percent = this.video.duration ? this.video.currentTime / this.video.duration : 0;
|
||||||
this.progressBar.value = percent;
|
|
||||||
this.timeDisplay.textContent = `${this.formatTime(this.video.currentTime)} / ${this.formatTime(this.video.duration || 0)}`;
|
this.timeDisplay.textContent = `${this.formatTime(this.video.currentTime)} / ${this.formatTime(this.video.duration || 0)}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user