TeamPiped-mirror
/
Piped
mirror of https://github.com/TeamPiped/Piped.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2322 from Bnyro/master 

Fix position and visibility issues of the seekbar preview
This commit is contained in:
Bnyro 2023-04-22 11:34:23 +02:00 committed by GitHub
parent 4a33f57c1a ba36d4b0da
commit 6726f3de50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/VideoPlayer.vue
View File

@ -64,6 +64,7 @@ export default {
initialSeekComplete: false, initialSeekComplete: false,
destroying: false, destroying: false,
inSegment: false, inSegment: false,
isHoveringTimebar: false,
}; };
}, },
computed: { computed: {
@ -718,11 +719,13 @@ export default {
let seekBar = document.querySelector(".shaka-seek-bar"); let seekBar = document.querySelector(".shaka-seek-bar");
// load the thumbnail preview when the user moves over the seekbar // load the thumbnail preview when the user moves over the seekbar
seekBar.addEventListener("mousemove", e => { seekBar.addEventListener("mousemove", e => {
this.isHoveringTimebar = true;
const position = (e.offsetX / e.target.offsetWidth) * this.video.duration; const position = (e.offsetX / e.target.offsetWidth) * this.video.duration;
this.showSeekbarPreview(position * 1000); this.showSeekbarPreview(position * 1000);
}); });
// hide the preview when the user stops hovering the seekbar // hide the preview when the user stops hovering the seekbar
seekBar.addEventListener("mouseout", () => { seekBar.addEventListener("mouseout", () => {
this.isHoveringTimebar = false;
let canvas = document.querySelector("#preview"); let canvas = document.querySelector("#preview");
canvas.style.display = "none"; canvas.style.display = "none";
}); });
@ -730,7 +733,9 @@ export default {
async showSeekbarPreview(position) { async showSeekbarPreview(position) {
let frame = this.getFrame(position); let frame = this.getFrame(position);
let originalImage = await this.loadImage(frame.url); let originalImage = await this.loadImage(frame.url);
let seekBar = document.querySelector(".shaka-seek-bar-container"); if (!this.isHoveringTimebar) return;
let seekBar = document.querySelector(".shaka-seek-bar");
let canvas = document.querySelector("#preview"); let canvas = document.querySelector("#preview");
let ctx = canvas.getContext("2d"); let ctx = canvas.getContext("2d");
@ -746,9 +751,11 @@ export default {
ctx.drawImage(originalImage, offsetX, offsetY, newWidth, newHeight, 0, 0, canvas.width, canvas.height); ctx.drawImage(originalImage, offsetX, offsetY, newWidth, newHeight, 0, 0, canvas.width, canvas.height);
// calculate the thumbnail preview offset and display it // calculate the thumbnail preview offset and display it
const seekbarPadding = 2; // percentage of seekbar padding
const centerOffset = position / this.video.duration / 10; const centerOffset = position / this.video.duration / 10;
const left = centerOffset - (canvas.width / seekBar.clientWidth / 1.3) * 100; const left = centerOffset - ((0.5 * canvas.width) / seekBar.clientWidth) * 100;
canvas.style.left = `max(2%, min(${left}%, 90%))`; const maxLeft = ((seekBar.clientWidth - canvas.clientWidth) / seekBar.clientWidth) * 100 - seekbarPadding;
canvas.style.left = `max(${seekbarPadding}%, min(${left}%, ${maxLeft}%))`;
canvas.style.display = "block"; canvas.style.display = "block";
}, },
// ineffective algorithm to find the thumbnail corresponding to the currently hovered position in the video // ineffective algorithm to find the thumbnail corresponding to the currently hovered position in the video