[video_player] VTT Support

packages/video_player/video_player/example/assets/sample.vtt

@@ -0,0 +1,40 @@
+WEBVTT
+
+00:00.500 --> 00:01.000
+<v Roger Bingham>We are in New York City
+
+00:01.200 --> 00:02.000
+<v Roger Bingham>We’re actually at the Lucern Hotel, just down the street
+
+00:16.000 --> 00:18.000
+<v Roger Bingham>from the American Museum of Natural History
+
+00:18.000 --> 00:20.000
+<v Roger Bingham>And with me is Neil deGrasse Tyson
+
+00:20.000 --> 00:22.000
+<v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium
+
+00:22.000 --> 00:24.000
+<v Roger Bingham>at the AMNH.
+
+00:24.000 --> 00:26.000
+<v Roger Bingham>Thank you for walking down here.
+
+00:27.000 --> 00:30.000
+<v Roger Bingham>And I want to do a follow-up on the last conversation we did.
+
+00:30.000 --> 00:31.500 align:right size:50%
+<v Roger Bingham>When we e-mailed—
+
+00:30.500 --> 00:32.500 align:left size:50%
+<v Neil deGrasse Tyson>Didn’t we talk about enough in that conversation?
+
+00:32.000 --> 00:35.500 align:right size:50%
+<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos
+
+00:32.500 --> 00:33.500 align:left size:50%
+<v Neil deGrasse Tyson><i>Laughs</i>
+
+00:35.500 --> 00:38.000
+<v Roger Bingham>You know I’m so excited my glasses are falling off here.

packages/video_player/video_player/example/pubspec.yaml

@@ -19,6 +19,7 @@ dev_dependencies:
 flutter:
   uses-material-design: true
   assets:
-   - assets/flutter-mark-square-64.png
-   - assets/Butterfly-209.mp4
-   - assets/bumble_bee_captions.srt
+    - assets/flutter-mark-square-64.png
+    - assets/Butterfly-209.mp4
+    - assets/bumble_bee_captions.srt
+    - assets/sample.vtt

packages/video_player/video_player/lib/src/closed_caption_file.dart

@@ -5,6 +5,9 @@
 import 'sub_rip.dart';
 export 'sub_rip.dart' show SubRipCaptionFile;
 
+import 'web_vtt.dart';
+export 'web_vtt.dart' show WebVTTCaptionFile;
+
 /// A structured representation of a parsed closed caption file.
 ///
 /// A closed caption file includes a list of captions, each with a start and end
@@ -15,6 +18,7 @@ export 'sub_rip.dart' show SubRipCaptionFile;
 ///
 /// See:
 /// * [SubRipCaptionFile].
+/// * [WebVTTCaptionFile].
 abstract class ClosedCaptionFile {
   /// The full list of captions from a given file.
   ///

packages/video_player/video_player/lib/src/web_vtt.dart

@@ -0,0 +1,168 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:convert';
+
+import 'closed_caption_file.dart';
+import 'package:html/parser.dart';
+
+/// Represents a [ClosedCaptionFile], parsed from the WebVTT file format.
+/// See: https://en.wikipedia.org/wiki/WebVTT
+class WebVTTCaptionFile extends ClosedCaptionFile {
+  /// Parses a string into a [ClosedCaptionFile], assuming [fileContents] is in
+  /// the WebVTT file format.
+  /// * See: https://en.wikipedia.org/wiki/WebVTT
+  WebVTTCaptionFile(this.fileContents)
+      : _captions = _parseCaptionsFromWebVTTString(fileContents);
+
+  /// The entire body of the VTT file.
+  final String fileContents;
+
+  @override
+  List<Caption> get captions => _captions;
+
+  final List<Caption> _captions;
+}
+
+List<Caption> _parseCaptionsFromWebVTTString(String file) {
+  final List<Caption> captions = <Caption>[];
+  int number = 1;
+  for (List<String> captionLines in _readWebVTTFile(file)) {
+    if (captionLines.length < 2) continue;
+    print(captionLines);
+
+    final int captionNumber = number;
+    final _StartAndEnd startAndEnd =
+        _StartAndEnd.fromWebVTTString(captionLines[0]);
+
+    final String text = captionLines.sublist(1).join('\n');
+
+    //TODO: Handle text format
+    final String textWithoutFormat = _parseHtmlString(text);
+
+    final Caption newCaption = Caption(
+      number: captionNumber,
+      start: startAndEnd.start,
+      end: startAndEnd.end,
+      text: textWithoutFormat,
+    );
+
+    if (newCaption.start != null && newCaption.end != null) {
+      captions.add(newCaption);
+      number++;
+    }
+  }
+
+  return captions;
+}
+
+class _StartAndEnd {
+  final Duration start;
+  final Duration end;
+
+  _StartAndEnd(this.start, this.end);
+
+  // Assumes format from an VTT file.
+  // For example:
+  // 00:09.000 --> 00:11.000
+  static _StartAndEnd fromWebVTTString(String line) {
+    final RegExp format =
+        RegExp(_webVTTTimeStamp + _webVTTArrow + _webVTTTimeStamp);
+
+    if (!format.hasMatch(line)) {
+      return _StartAndEnd(null, null);
+    }
+
+    final List<String> times = line.split(_webVTTArrow);
+
+    final Duration start = _parseWebVTTTimestamp(times[0]);
+    final Duration end = _parseWebVTTTimestamp(times[1]);
+
+    return _StartAndEnd(start, end);
+  }
+}
+
+String _parseHtmlString(String htmlString) {
+  var document = parse(htmlString);
+  String parsedString = parse(document.body.text).documentElement.text;
+  return parsedString;
+}
+
+// Parses a time stamp in an VTT file into a Duration.
+// For example:
+//
+// _parseWebVTTimestamp('00:01:08.430')
+// returns
+// Duration(hours: 0, minutes: 1, seconds: 8, milliseconds: 430)
+Duration _parseWebVTTTimestamp(String timestampString) {
+  if (!RegExp(_webVTTTimeStamp).hasMatch(timestampString)) {
+    return null;
+  }
+
+  final List<String> dotSections = timestampString.split('.');
+  final List<String> hoursMinutesSeconds = dotSections[0].split(':');
+
+  int hours = 0;
+  int minutes = 0;
+  int seconds = 0;
+  List<String> styles;
+
+  if (hoursMinutesSeconds.length > 2) {
+    // Timestamp takes the form of [hours]:[minutes]:[seconds].[milliseconds]
+    hours = int.parse(hoursMinutesSeconds[0]);
+    minutes = int.parse(hoursMinutesSeconds[1]);
+    seconds = int.parse(hoursMinutesSeconds[2]);
+  } else if (int.parse(hoursMinutesSeconds[0]) > 59) {
+    // Timestamp takes the form of [hours]:[minutes].[milliseconds]
+    // First position is hours as it's over 59.
+    hours = int.parse(hoursMinutesSeconds[0]);
+    minutes = int.parse(hoursMinutesSeconds[1]);
+  } else {
+    // Timestamp takes the form of [minutes]:[seconds].[milliseconds]
+    minutes = int.parse(hoursMinutesSeconds[0]);
+    seconds = int.parse(hoursMinutesSeconds[1]);
+  }
+
+  List<String> milisecondsStyles = dotSections[1].split(" ");
+  //TODO: Handle styles data on timestamp
+  if (milisecondsStyles.length > 1) {
+    styles = milisecondsStyles.sublist(1);
+  }
+  int milliseconds = int.parse(milisecondsStyles[0]);
+
+  return Duration(
+    hours: hours,
+    minutes: minutes,
+    seconds: seconds,
+    milliseconds: milliseconds,
+  );
+}
+
+// Reads on VTT file and splits it into Lists of strings where each list is one
+// caption.
+List<List<String>> _readWebVTTFile(String file) {
+  final List<String> lines = LineSplitter.split(file).toList();
+
+  final List<List<String>> captionStrings = <List<String>>[];
+  List<String> currentCaption = <String>[];
+  int lineIndex = 0;
+  for (final String line in lines) {
+    final bool isLineBlank = line.trim().isEmpty;
+    if (!isLineBlank) {
+      currentCaption.add(line);
+    }
+
+    if (isLineBlank || lineIndex == lines.length - 1) {
+      captionStrings.add(currentCaption);
+      currentCaption = <String>[];
+    }
+
+    lineIndex += 1;
+  }
+
+  return captionStrings;
+}
+
+const String _webVTTTimeStamp = r'(\d+):(\d{2})(:\d{2})?\.(\d{3})';
+const String _webVTTArrow = r' --> ';

packages/video_player/video_player/pubspec.yaml

@@ -26,7 +26,8 @@ dependencies:
   # validation, so we set a ^ constraint.
   # TODO(amirh): Revisit this (either update this part in the  design or the pub tool).
   # https://github.com/flutter/flutter/issues/46264
-  video_player_web: '>=0.1.1 <2.0.0'
+  video_player_web: ">=0.1.1 <2.0.0"
+  html: ^0.14.0+3
 
   flutter:
     sdk: flutter

packages/video_player/video_player/test/web_vtt.test.dart

@@ -0,0 +1,119 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:video_player/src/closed_caption_file.dart';
+import 'package:video_player/video_player.dart';
+
+void main() {
+  test('Parses VTT file', () {
+    final WebVTTCaptionFile parsedFile = WebVTTCaptionFile(_validVTT);
+
+    expect(parsedFile.captions.length, 13);
+
+    final Caption firstCaption = parsedFile.captions.first;
+    expect(firstCaption.number, 1);
+    expect(firstCaption.start, Duration(seconds: 9));
+    expect(firstCaption.end, Duration(seconds: 11, milliseconds: 430));
+    expect(firstCaption.text, 'We are in New York City');
+
+    final Caption secondCaption = parsedFile.captions[1];
+    expect(secondCaption.number, 2);
+    expect(
+      secondCaption.start,
+      Duration(minutes: 0, seconds: 13, milliseconds: 0),
+    );
+    expect(
+      secondCaption.end,
+      Duration(minutes: 0, seconds: 16, milliseconds: 0),
+    );
+    expect(secondCaption.text,
+        "We're actually at the Lucern Hotel, just down the street");
+
+    //With styles on timestamp
+    final Caption lastCaption = parsedFile.captions[12];
+    expect(lastCaption.number, 13);
+    expect(
+      lastCaption.start,
+      Duration(minutes: 0, seconds: 35, milliseconds: 500),
+    );
+    expect(
+      lastCaption.end,
+      Duration(minutes: 0, seconds: 38, milliseconds: 0),
+    );
+    expect(lastCaption.text,
+        "You know I'm so excited my glasses are falling off here.");
+  });
+
+  test('Parses VTT file with malformed input', () {
+    final ClosedCaptionFile parsedFile = WebVTTCaptionFile(_malformedVTT);
+
+    expect(parsedFile.captions.length, 1);
+
+    final Caption firstCaption = parsedFile.captions.single;
+    expect(firstCaption.number, 1);
+    expect(firstCaption.start, Duration(seconds: 13));
+    expect(firstCaption.end, Duration(seconds: 16, milliseconds: 0));
+    expect(firstCaption.text, 'Valid');
+  });
+}
+
+const String _validVTT = '''
+WEBVTT Kind: captions; Language: en
+
+00:09.000 --> 00:11.430
+<v Roger Bingham>We are in New York City
+
+00:13.000 --> 00:16.000
+<v Roger Bingham>We're actually at the Lucern Hotel, just down the street
+
+00:16.000 --> 00:18.000
+<v Roger Bingham>from the American Museum of Natural History
+
+00:18.000 --> 00:20.000
+<v Roger Bingham>And with me is Neil deGrasse Tyson
+
+00:20.000 --> 00:22.000
+<v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium
+
+00:22.000 --> 00:24.000
+<v Roger Bingham>at the AMNH.
+
+00:24.000 --> 00:26.000
+<v Roger Bingham>Thank you for walking down here.
+
+00:27.000 --> 00:30.000
+<v Roger Bingham>And I want to do a follow-up on the last conversation we did.
+
+00:30.000 --> 00:31.500 align:end size:50%
+<v Roger Bingham>When we e-mailed—
+
+00:30.500 --> 00:32.500 align:start size:50%
+<v Neil deGrasse Tyson>Didn't we talk about enough in that conversation?
+
+00:32.000 --> 00:35.500 align:end size:50%
+<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos
+
+00:32.500 --> 00:33.500 align:start size:50%
+<v Neil deGrasse Tyson><i>Laughs</i>
+
+00:35.500 --> 00:38.000 align:start size:50%
+<v Roger Bingham>You know I'm so excited my glasses are falling off here.
+
+''';
+
+const String _malformedVTT = '''
+
+WEBVTT Kind: captions; Language: en
+
+00:09.000--> 00:11.430
+<Test>This one should be ignored because the arrow needs a space.
+
+00:13.000 --> 00:16.000
+<Test>Valid
+
+00:16.000 --> 00:8.000
+<Test>This one should be ignored because the time is missing a digit.
+
+''';