VTT Caption Positioning Fixes #3523

jnatalzia · 2019-11-07T18:22:35Z

This PR will...

Fix positioning in the following ways:

Ensure caption width only extends as far as the words, not the full caption container
Fix the position finding algorithm such that it correct calculates the best place for the caption (previously was selecting the worst)
Fix the position finding algorithm by ensuring it combines both horizontal and vertical axis to position in the true best position

Why is this Pull Request needed?

Using line attribute screws with all the above issues and surfaced quite a few bugs in our caption rendering

Are there any points in the code the reviewer needs to double check?

All of it - this took a lot of research and trial and error to get right. want to be sure i'm not missing something

Are there any Pull Requests open in other repos which need to be merged with this?

Nope

Addresses Issue(s):

JW8-10682

Checklist

Jenkins builds and unit tests are passing
I have reviewed the automated results

Do intersect math based on true width of captions Update pct checker to be accurate

jnatalzia · 2019-11-07T18:23:49Z

src/js/polyfills/webvtt.js

+        let finalPos = bestPosition || specifiedPosition;
+        // If we detect a best position based on one axis, oftentimes combining with the other axis
+        // results in a much better position.
+        // TODO: Make more performant by checking axis permutations above


there is certainly a way to refactor this to be O(n) however the complexity mixed with the amount of time already sunk into this make me believe this option is the best way forward until we want to spend more time on this rendering

Remove margin specific calculations

jwplayer-robot · 2019-11-07T18:25:21Z

❗ MULTI Build for commit 1d50fca did not complete (FAILURE).
🏗️ jwplayer build FAILURE
🏗️ jwplayer unit tests NOT_STARTED
🏗️ jwplayer-commercial build NOT_STARTED
🏗️ jwplayer-commercial unit tests NOT_STARTED
🥒.js Allure Report NOT_STARTED
🥒 Allure Report NOT_STARTED
🍆 Manual Tests
📺 Views

jnatalzia · 2019-11-07T18:26:06Z

src/js/polyfills/webvtt.js

        width: obj.width || width
    };
    return ret;
 };

+// Helper function for visualizing box position
+// Helpful when debugging
+function drawBox(b, container, color) { // eslint-disable-line no-unused-vars


this is not used by the code so would get shipped with the player however the utility of this function in debugging these captions box positions is worth the extra couple kb of delivery imo

How do you execute it? Why does it need to be part of the player/this code, vs a snippet in your browser or a global method in one of our test pages?

fair questions - you would have to call it yourself below. i suppose it's more confusing than anything leaving it in - i just found it extremely helpful. might add as a window global

src/js/polyfills/webvtt.js

jwplayer-robot · 2019-11-07T19:12:20Z

⚠️ MULTI Build for commit 5f9ccd1 is unstable (FAILURE).
🏗️ jwplayer build SUCCESS
🏗️ jwplayer unit tests SUCCESS
🏗️ jwplayer-commercial build SUCCESS
🏗️ jwplayer-commercial unit tests SUCCESS
🥒.js Allure Report FAILURE
🥒 Allure Report UNSTABLE
🍆 Manual Tests
📺 Views

jnatalzia · 2019-11-07T19:26:26Z

src/js/polyfills/webvtt.js

@@ -454,19 +455,22 @@ function CueStyleBox(window, cue) {
    // https://w3c.github.io/webvtt/#ref-for-enumdef-positionalignsetting-1
    // The cue.align property is settable and other browsers use it as the offset from which the cue.position
    // value is applied.
+    let transform = '';


transform ensures that we respect the cue alignment when determining position. now that these are inline-block elements the size is not known at time of instantiation. this new code adds a transform to properly place the cue based on alignment and then removes it when the stylebox is finally moved to prevent it from being applied twice (once during exact px calculations and then after when we go to display)

jwplayer-robot · 2019-11-07T19:30:21Z

❗ MULTI Build for commit f472575 did not complete (FAILURE).
🏗️ jwplayer build FAILURE
🏗️ jwplayer unit tests NOT_STARTED
🏗️ jwplayer-commercial build NOT_STARTED
🏗️ jwplayer-commercial unit tests NOT_STARTED
🥒.js Allure Report NOT_STARTED
🥒 Allure Report NOT_STARTED
🍆 Manual Tests
📺 Views

jwplayer-robot · 2019-11-07T20:45:41Z

⚠️ MULTI Build for commit e7e512f is unstable (FAILURE).
🏗️ jwplayer build SUCCESS
🏗️ jwplayer unit tests SUCCESS
🏗️ jwplayer-commercial build SUCCESS
🏗️ jwplayer-commercial unit tests SUCCESS
🥒.js Allure Report FAILURE
🥒 Allure Report UNSTABLE
🍆 Manual Tests
📺 Views

jwplayer-robot · 2019-11-08T19:34:48Z

❗ MULTI Build for commit a64ae3e did not complete (FAILURE).
🏗️ jwplayer build FAILURE

@jnatalzia

$ eslint './src/js'

/var/lib/jenkins-slave/workspace/jw7-opensource/src/js/polyfills/webvtt.js
  705:17  error    'drawBox' is not defined        no-undef
  726:79  warning  Infix operators must be spaced  space-infix-ops
  728:9   error    'drawBox' is not defined        no-undef

/var/lib/jenkins-slave/workspace/jw7-opensource/src/js/view/controls/controls.js
  113:17  warning  Expected an assignment or function call and instead saw an expression  no-unused-expressions

✖ 4 problems (2 errors, 2 warnings)
  0 errors and 1 warning potentially fixable with the `--fix` option.

jwplayer-robot · 2019-11-08T20:04:47Z

❗ MULTI Build for commit 3a68a92 did not complete (FAILURE).
🏗️ jwplayer build SUCCESS
🏗️ jwplayer unit tests SUCCESS
🏗️ jwplayer-commercial build FAILURE

There's a lint issue in the commercial test changes:

/var/lib/jenkins-slave/workspace/jw7-commercial/test/assets/harness.js
   463:16  warning  Identifier 'console_log' is not in camel case  camelcase
  1147:9   error    Unexpected let declaration                     es5/no-block-scoping
  1148:9   error    Unexpected let declaration                     es5/no-block-scoping

/var/lib/jenkins-slave/workspace/jw7-commercial/test/assets/capture_console_log.js
  3:12  warning  Identifier 'console_log' is not in camel case  camelcase

✖ 4 problems (2 errors, 2 warnings)

jnatalzia · 2019-11-08T20:07:13Z

test this please

robwalch · 2019-11-08T20:08:39Z

test this please

Click ❗️to go to the job and then "Rebuild"

jwplayer-robot · 2019-11-08T20:54:52Z

⚠️ MULTI Build for commit 3a68a92 is unstable (FAILURE).
🏗️ jwplayer build SUCCESS
🏗️ jwplayer unit tests SUCCESS
🏗️ jwplayer-commercial build SUCCESS
🏗️ jwplayer-commercial unit tests SUCCESS
🥒.js Allure Report FAILURE
🥒 Allure Report UNSTABLE
🍆 Manual Tests
📺 Views

jnatalzia added 2 commits November 6, 2019 13:13

JW8-10683 Initial set of fixes

29d8339

Do intersect math based on true width of captions Update pct checker to be accurate

Fix position calculation for offscreen elements

b986ded

jnatalzia requested a review from robwalch as a code owner November 7, 2019 18:22

jnatalzia added this to the 8.11.8 milestone Nov 7, 2019

jnatalzia commented Nov 7, 2019

View reviewed changes

Fix positioning for position found automatically

5f9ccd1

Remove margin specific calculations

jnatalzia force-pushed the bugfix/vtt_line_alignment branch from 1d50fca to 5f9ccd1 Compare November 7, 2019 18:25

jnatalzia commented Nov 7, 2019

View reviewed changes

src/js/polyfills/webvtt.js Outdated Show resolved Hide resolved

jnatalzia commented Nov 7, 2019

View reviewed changes

jnatalzia force-pushed the bugfix/vtt_line_alignment branch from 77cbe1e to f472575 Compare November 7, 2019 19:26

Ensure alignment of boxes is based on cue alignment

e7e512f

jnatalzia force-pushed the bugfix/vtt_line_alignment branch from f472575 to e7e512f Compare November 7, 2019 20:08

Remove draw box from OS code

3a68a92

jnatalzia force-pushed the bugfix/vtt_line_alignment branch from a64ae3e to 3a68a92 Compare November 8, 2019 19:55

zetagame approved these changes Nov 8, 2019

View reviewed changes

robwalch approved these changes Nov 8, 2019

View reviewed changes

jnatalzia merged commit 9ada232 into master Nov 8, 2019

jnatalzia deleted the bugfix/vtt_line_alignment branch November 8, 2019 21:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VTT Caption Positioning Fixes #3523

VTT Caption Positioning Fixes #3523

jnatalzia commented Nov 7, 2019

jnatalzia Nov 7, 2019

jwplayer-robot commented Nov 7, 2019

jnatalzia Nov 7, 2019

robwalch Nov 8, 2019 •

edited

jnatalzia Nov 8, 2019

jwplayer-robot commented Nov 7, 2019

jnatalzia Nov 7, 2019

jwplayer-robot commented Nov 7, 2019

jwplayer-robot commented Nov 7, 2019

jwplayer-robot commented Nov 8, 2019 •

edited by robwalch

jwplayer-robot commented Nov 8, 2019 •

edited by robwalch

jnatalzia commented Nov 8, 2019

robwalch commented Nov 8, 2019

jwplayer-robot commented Nov 8, 2019

VTT Caption Positioning Fixes #3523

VTT Caption Positioning Fixes #3523

Conversation

jnatalzia commented Nov 7, 2019

This PR will...

Why is this Pull Request needed?

Are there any points in the code the reviewer needs to double check?

Are there any Pull Requests open in other repos which need to be merged with this?

Addresses Issue(s):

Checklist

jnatalzia Nov 7, 2019

Choose a reason for hiding this comment

jwplayer-robot commented Nov 7, 2019

jnatalzia Nov 7, 2019

Choose a reason for hiding this comment

robwalch Nov 8, 2019 • edited

Choose a reason for hiding this comment

jnatalzia Nov 8, 2019

Choose a reason for hiding this comment

jwplayer-robot commented Nov 7, 2019

jnatalzia Nov 7, 2019

Choose a reason for hiding this comment

jwplayer-robot commented Nov 7, 2019

jwplayer-robot commented Nov 7, 2019

jwplayer-robot commented Nov 8, 2019 • edited by robwalch

jwplayer-robot commented Nov 8, 2019 • edited by robwalch

jnatalzia commented Nov 8, 2019

robwalch commented Nov 8, 2019

jwplayer-robot commented Nov 8, 2019

robwalch Nov 8, 2019 •

edited

jwplayer-robot commented Nov 8, 2019 •

edited by robwalch

jwplayer-robot commented Nov 8, 2019 •

edited by robwalch