mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-25 15:07:21 +00:00
Fix position and visibility issues of the seekbar preview
This commit is contained in:
parent
4a33f57c1a
commit
ba36d4b0da
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user