TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix seekbar preview aspect ratio and cropping

Browse source 
This PR fixes two issue observed with the seekbar preview:
- sometimes images got cropped incorrectly at the end of the video due to image having less frames that server tells us - so calculate it in place;
- set canvas width and height based on actual frame data so it follows the video aspect ratio rather than hard-coded value.
This commit is contained in:
Glen Lowland 2023-05-01 23:06:19 +01:00
parent 2b951bfb5e
commit 25818ae89f
1 changed files with 28 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/VideoPlayer.vue
View file

@ -6,7 +6,7 @@
:class="{ 'player-container': !isEmbed }"
>
<video ref="videoEl" class="w-full" data-shaka-player :autoplay="shouldAutoPlay" :loop="selectedAutoLoop" />
<canvas height="130" width="230" id="preview" />
<canvas id="preview" />
<button
v-if="inSegment"
class="skip-segment-button"
@ -697,24 +697,37 @@ export default {
});
},
async showSeekbarPreview(position) {
let frame = this.getFrame(position);
let originalImage = await this.loadImage(frame.url);
const frame = this.getFrame(position);
const originalImage = await this.loadImage(frame.url);
if (!this.isHoveringTimebar) return;
let seekBar = document.querySelector(".shaka-seek-bar");
let canvas = document.querySelector("#preview");
let ctx = canvas.getContext("2d");
const seekBar = document.querySelector(".shaka-seek-bar");
const canvas = document.querySelector("#preview");
const ctx = canvas.getContext("2d");
// get the new sizes for the image to be drawn into the canvas
const originalWidth = originalImage.naturalWidth;
const originalHeight = originalImage.naturalHeight;
const offsetX = originalWidth * (frame.positionX / frame.framesPerPageX);
const offsetY = originalHeight * (frame.positionY / frame.framesPerPageY);
const newWidth = originalWidth / frame.framesPerPageX;
const newHeight = originalHeight / frame.framesPerPageY;
// image can have less frames than server told us so calculate them ourselves
const imageFramesPerPageX = originalImage.naturalWidth / frame.frameWidth;
const imageFramesPerPageY = originalImage.naturalHeight / frame.frameHeight;
const offsetX = originalWidth * (frame.positionX / imageFramesPerPageX);
const offsetY = originalHeight * (frame.positionY / imageFramesPerPageY);
canvas.width = frame.frameWidth > 100 ? frame.frameWidth : frame.frameWidth * 2;
canvas.height = frame.frameWidth > 100 ? frame.frameHeight : frame.frameHeight * 2;
// draw the thumbnail preview into the canvas by cropping only the relevant part
ctx.drawImage(originalImage, offsetX, offsetY, newWidth, newHeight, 0, 0, canvas.width, canvas.height);
ctx.drawImage(
originalImage,
offsetX,
offsetY,
frame.frameWidth,
frame.frameHeight,
0,
0,
canvas.width,
canvas.height,
);
// calculate the thumbnail preview offset and display it
const seekbarPadding = 2; // percentage of seekbar padding
@ -727,7 +740,7 @@ export default {
// ineffective algorithm to find the thumbnail corresponding to the currently hovered position in the video
getFrame(position) {
let startPosition = 0;
let framePage = this.video.previewFrames.at(-1);
const framePage = this.video.previewFrames.at(-1);
for (let i = 0; i < framePage.urls.length; i++) {
for (let positionY = 0; positionY < framePage.framesPerPageY; positionY++) {
for (let positionX = 0; positionX < framePage.framesPerPageX; positionX++) {
@ -737,8 +750,8 @@ export default {
url: framePage.urls[i],
positionX: positionX,
positionY: positionY,
framesPerPageX: framePage.framesPerPageX,
framesPerPageY: framePage.framesPerPageY,
frameWidth: framePage.frameWidth,
frameHeight: framePage.frameHeight,
};
}
startPosition = endPosition;
@ -750,7 +763,7 @@ export default {
// creates a new image from an URL
loadImage(url) {
return new Promise(r => {
let i = new Image();
const i = new Image();
i.onload = () => r(i);
i.src = url;
});