Skip to content

Fix subtitles disappear when resizing #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 14, 2022
Merged

Fix subtitles disappear when resizing #28

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cad4581
cosmetic: remove whitespace at end of lines
dmitrylyzo May 6, 2022
2b1e507
js: fix subtitles disappear when resizing
dmitrylyzo May 8, 2022
d3ba00d
Fix manual cache reset
dmitrylyzo May 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 30 additions & 26 deletions src/subtitles-octopus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ var SubtitlesOctopus = function (options) {

self.hasAlphaBug = false;

// private
var targetWidth; // Width of render target
var targetHeight; // Height of render target

(function() {
if (typeof ImageData.prototype.constructor === 'function') {
try {
Expand Down Expand Up @@ -119,6 +123,10 @@ var SubtitlesOctopus = function (options) {
self.createCanvas();
self.setVideo(options.video);
self.setSubUrl(options.subUrl);

targetWidth = self.canvas.width;
targetHeight = self.canvas.height;

self.worker.postMessage({
target: 'worker-init',
width: self.canvas.width,
Expand Down Expand Up @@ -418,13 +426,13 @@ var SubtitlesOctopus = function (options) {
if (self.renderAhead > 0) {
var newCache = [];
if (isResizing && self.oneshotState.prevHeight && self.oneshotState.prevWidth) {
if (self.oneshotState.prevHeight == self.canvas.height &&
self.oneshotState.prevWidth == self.canvas.width) return;
if (self.oneshotState.prevHeight === targetHeight &&
self.oneshotState.prevWidth === targetWidth) return;
var timeLimit = 10, sizeLimit = self.renderAhead * 0.3;
if (self.canvas.height >= self.oneshotState.prevHeight * (1.0 - self.resizeVariation) &&
self.canvas.height <= self.oneshotState.prevHeight * (1.0 + self.resizeVariation) &&
self.canvas.width >= self.oneshotState.prevWidth * (1.0 - self.resizeVariation) &&
self.canvas.width <= self.oneshotState.prevWidth * (1.0 + self.resizeVariation)) {
if (targetHeight >= self.oneshotState.prevHeight * (1.0 - self.resizeVariation) &&
targetHeight <= self.oneshotState.prevHeight * (1.0 + self.resizeVariation) &&
targetWidth >= self.oneshotState.prevWidth * (1.0 - self.resizeVariation) &&
targetWidth <= self.oneshotState.prevWidth * (1.0 + self.resizeVariation)) {
console.debug('viewport changes are small, leaving more of prerendered buffer');
timeLimit = 30;
sizeLimit = self.renderAhead * 0.5;
Expand All @@ -445,8 +453,8 @@ var SubtitlesOctopus = function (options) {
self.oneshotState.eventStart = null;
self.oneshotState.iteration++;
self.oneshotState.renderRequested = false;
self.oneshotState.prevHeight = self.canvas.height;
self.oneshotState.prevWidth = self.canvas.width;
self.oneshotState.prevHeight = targetHeight;
self.oneshotState.prevWidth = targetWidth;

if (!self.rafId) self.rafId = window.requestAnimationFrame(oneshotRender);
tryRequestOneshot(undefined, true);
Expand Down Expand Up @@ -742,26 +750,22 @@ var SubtitlesOctopus = function (options) {
return;
}

if (videoSize != null) {
self.canvasParent.style.position = 'relative';
self.canvas.style.display = 'block';
self.canvas.style.position = 'absolute';
self.canvas.style.width = videoSize.width + 'px';
self.canvas.style.height = videoSize.height + 'px';
self.canvas.style.top = top + 'px';
self.canvas.style.left = left + 'px';
self.canvas.style.pointerEvents = 'none';
}

if (
self.canvas.width != width ||
self.canvas.height != height ||
self.canvas.style.top != top ||
self.canvas.style.left != left
) {
if (targetWidth !== width || targetHeight !== height) {
self.canvas.width = width;
self.canvas.height = height;

if (videoSize != null) {
self.canvasParent.style.position = 'relative';
self.canvas.style.display = 'block';
self.canvas.style.position = 'absolute';
self.canvas.style.width = videoSize.width + 'px';
self.canvas.style.height = videoSize.height + 'px';
self.canvas.style.top = top + 'px';
self.canvas.style.left = left + 'px';
self.canvas.style.pointerEvents = 'none';
}
targetWidth = width;
targetHeight = height;

self.worker.postMessage({
target: 'canvas',
Expand Down Expand Up @@ -924,7 +928,7 @@ var SubtitlesOctopus = function (options) {
style: style
});
};

self.getStyles = function (onSuccess, onError) {
self.fetchFromWorker({
target: 'get-styles'
Expand Down