This commit is contained in:
yumoqing 2025-10-05 18:40:29 +08:00
parent 77dd35a6ae
commit f2c3ad98c3
2 changed files with 10 additions and 32 deletions

View File

@ -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;
} }
} }

View File

@ -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)}`;
} }