Line positioning for vertical:rl and vertical:lr cues is inverted

[jonknowles]

Currently vtt.js displays cues with line positioning offsets for both vertical right-growing-left and vertical left-growing-right offset from the incorrect side of the subtitle overlay.

The following cues are currently rendererd approximately like this:

00:00:06.000 --> 00:00:08.000 line:10% vertical:rl
text
________________________________
|    t                           |
|    e                           |
|    x                           |
|    t                           |
|________________________________|

00:00:06.000 --> 00:00:08.000 line:90% vertical:rl
text
________________________________
|                            t   |
|                            e   |
|                            x   |
|                            t   |
|________________________________|

But their positions should be inverted, and likewise for vertical:lr cues with line positioning percentages.

See this issue on the w3c WebVTT github for more information: https://github.com/w3c/webvtt/issues/481

I believe the issue can be solved for cues where snapToLines is false by swapping the "right" and "left" settings here: https://github.com/videojs/vtt.js/blob/d7dfb66716d1cd9b80eb54aac1ee9b0f10add331/lib/process/move-box-to-line-position.js#L111:L120