tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: seek buffer bars.

Browse Source
This commit is contained in:
Chen Lily 2024-04-16 10:39:51 +08:00
parent d91630212f
commit 4e8be83625
2 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/ui/css/media.scss
View File

@ -158,7 +158,17 @@
padding: 4px 0; padding: 4px 0;
cursor: pointer; cursor: pointer;
>.seek-buffers {
position: absolute;
width: 100%;
>.ui-video-buffer {
background-color: #adadad;
}
}
>.ui-video-duration, >.ui-video-duration,
>.seek-buffers>.ui-video-buffer,
>.ui-video-progress { >.ui-video-progress {
position: absolute; position: absolute;
border-radius: 2px; border-radius: 2px;
@ -168,7 +178,7 @@
>.ui-video-duration { >.ui-video-duration {
width: 100%; width: 100%;
background-color: #bbb; background-color: #4e4e4e;
} }
>.ui-video-progress { >.ui-video-progress {
@ -179,10 +189,10 @@
content: '\a0'; content: '\a0';
position: absolute; position: absolute;
right: -6px; right: -6px;
top: -6px; top: -5px;
width: 13px; width: 14px;
height: 13px; height: 14px;
border-radius: 6px; border-radius: 7px;
background-color: #fff; background-color: #fff;
} }
} }

18
lib/ui/media.js
View File

@ -167,6 +167,7 @@ export function createVideoList(urls, options, callback) {
} }
const length = urls.length; const length = urls.length;
const container = createElement('div', 'ui-media-video-container'); const container = createElement('div', 'ui-media-video-container');
let seekBufferBar;
let seekProgressBar; let seekProgressBar;
let playIcon; let playIcon;
let timeLabel; let timeLabel;
@ -219,6 +220,7 @@ export function createVideoList(urls, options, callback) {
}); });
}, },
createElement('div', 'ui-video-duration seek-duration'), createElement('div', 'ui-video-duration seek-duration'),
seekBufferBar = createElement('div', 'seek-buffers'),
seekProgressBar = createElement('div', 'ui-video-progress seek-progress') seekProgressBar = createElement('div', 'ui-video-progress seek-progress')
), ),
playIcon = createElement('div', 'ui-video-icon play-icon', playIcon = createElement('div', 'ui-video-icon play-icon',
@ -355,6 +357,22 @@ export function createVideoList(urls, options, callback) {
} }
} }
}); });
video.addEventListener('progress', () => {
const buffered = video.buffered;
for (let i = 0; i < buffered.length; i += 1) {
let buffer = seekBufferBar.children[i];
if (buffer == null) {
seekBufferBar.append(buffer = createElement('div', 'ui-video-buffer'));
}
const start = buffered.start(i) * 100 / duration;
const end = buffered.end(i) * 100 / duration;
buffer.style.left = `${start.toFixed(2)}%`;
buffer.style.width = `${(end - start).toFixed(2)}%`;
}
for (let i = seekBufferBar.children.length - 1; i >= buffered.length; i -= 1) {
seekBufferBar.children[i].remove();
}
});
video.addEventListener('canplaythrough', () => { video.addEventListener('canplaythrough', () => {
const w = video.parentElement.querySelector('.ui-video-waiting'); const w = video.parentElement.querySelector('.ui-video-waiting');
if (w != null) { if (w != null) {