fix: Fix HLS live stream subtitle offsets (shaka-project#4586)

Subtitle timing and offsets were not calculated correctly for HLS live
streams. This issue appears to have affected all v4.x releases up to
v4.0.5, v4.1.5, and v4.2.2.

lib/text/vtt_text_parser.js

@@ -105,7 +105,7 @@ shaka.text.VttTextParser = class {
 
         const rolloverSeconds =
             shaka.text.VttTextParser.TS_ROLLOVER_ / mpegTimescale;
-        let segmentStart = time.segmentStart;
+        let segmentStart = time.segmentStart - time.periodStart;
         while (segmentStart >= rolloverSeconds) {
           segmentStart -= rolloverSeconds;
           mpegTime += shaka.text.VttTextParser.TS_ROLLOVER_;

test/text/vtt_text_parser_unit.js

@@ -597,7 +597,7 @@ describe('VttTextParser', () => {
         [
           {startTime: 95443, endTime: 95445, payload: 'Test'},
         ],
-        // 8589870000/900000 = 95443 sec, so expect every timestamp to be 95443
+        // 8589870000/90000 = 95443 sec, so expect every timestamp to be 95443
         // seconds ahead of what is specified.
         'WEBVTT\n' +
         'X-TIMESTAMP-MAP=MPEGTS:8589870000,LOCAL:00:00:00.000\n\n' +
@@ -623,6 +623,28 @@ describe('VttTextParser', () => {
         /* sequenceMode= */ true);
   });
 
+  // A mock-up of HLS live subs as seen in b/253104251.
+  it('handles timestamp rollover and negative offset in HLS live', () => {
+    // Similar to values seen in b/253104251, for a realistic regression test.
+    // When using sequence mode on live HLS, we get negative offsets that
+    // represent the timestamp of our first append in sequence mode.
+    verifyHelper(
+        [
+          {startTime: 3600, endTime: 3602, payload: 'Test'},
+        ],
+        'WEBVTT\n' +
+        'X-TIMESTAMP-MAP=MPEGTS:8355814896,LOCAL:00:00:00.000\n\n' +
+        '00:00:00.000 --> 00:00:02.000 line:0\n' +
+        'Test',
+        {
+          periodStart: -1234567,
+          segmentStart: 3600,
+          segmentEnd: 3610,
+          vttOffset: -1234567,
+        },
+        /* sequenceMode= */ true);
+  });
+
   it('supports global style blocks', () => {
     const textShadow = '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black';
     verifyHelper(