Separate _VideoPlayer to its own file. Privatize as much as possible from its API.

Author: ditman

packages/video_player/video_player_web/CHANGELOG.md

@@ -1,8 +1,11 @@
 ## 2.0.8
 
-* Ensures `buffering` state is only removed when the browser reports enough video
-  has been buffered for full playback (`onCanPlayThrough`).
-  Issue [#94630](https://github.com/flutter/flutter/issues/94630).
+* Ensures `buffering` state is only removed when the browser reports enough data
+  has been buffered so that the video can likely play through without stopping
+  (`onCanPlayThrough`). Issue [#94630](https://github.com/flutter/flutter/issues/94630).
+* Move the `VideoPlayer` "private" class to its own file, so it's directly testable
+  without having to go through the `VideoPlayerPlugin`.
+* Ensure tests that listen to the Event Stream fail "fast" (5 second timeout).
 
 ## 2.0.7
 

packages/video_player/video_player_web/example/integration_test/video_player_web_test.dart

@@ -24,7 +24,7 @@ String getUrlForAssetAsNetworkSource(String assetKey) {
       '?raw=true';
 }
 
-// Use WebM for web to allow CI to use Chromium.
+// Use WebM to allow CI to run tests in Chromium.
 const String _videoAssetKey = 'assets/Butterfly-209.webm';
 
 void main() {
@@ -128,7 +128,7 @@ void main() {
       await VideoPlayerPlatform.instance.play(videoPlayerId);
 
       expect(() async {
-        await eventStream.last;
+        await eventStream.timeout(const Duration(seconds: 5)).last;
       }, throwsA(isA<PlatformException>()));
     });
 

packages/video_player/video_player_web/lib/src/video_player.dart

@@ -0,0 +1,244 @@
+// Copyright 2013 The Flutter 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:async';
+import 'dart:html' as html;
+
+import 'package:flutter/foundation.dart' show visibleForTesting;
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:video_player_platform_interface/video_player_platform_interface.dart';
+
+// An error code value to error name Map.
+// See: https://developer.mozilla.org/en-US/docs/Web/API/MediaError/code
+const Map<int, String> _kErrorValueToErrorName = <int, String>{
+  1: 'MEDIA_ERR_ABORTED',
+  2: 'MEDIA_ERR_NETWORK',
+  3: 'MEDIA_ERR_DECODE',
+  4: 'MEDIA_ERR_SRC_NOT_SUPPORTED',
+};
+
+// An error code value to description Map.
+// See: https://developer.mozilla.org/en-US/docs/Web/API/MediaError/code
+const Map<int, String> _kErrorValueToErrorDescription = <int, String>{
+  1: 'The user canceled the fetching of the video.',
+  2: 'A network error occurred while fetching the video, despite having previously been available.',
+  3: 'An error occurred while trying to decode the video, despite having previously been determined to be usable.',
+  4: 'The video has been found to be unsuitable (missing or in a format not supported by your browser).',
+};
+
+// The default error message, when the error is an empty string
+// See: https://developer.mozilla.org/en-US/docs/Web/API/MediaError/message
+const String _kDefaultErrorMessage =
+    'No further diagnostic information can be determined or provided.';
+
+/// Wraps a [html.VideoElement] so its API complies with what is expected by the plugin.
+class VideoPlayer {
+  /// Create a [VideoPlayer] from a [html.VideoElement] instance.
+  VideoPlayer({
+    required html.VideoElement videoElement,
+    @visibleForTesting StreamController<VideoEvent>? eventController,
+  })  : _videoElement = videoElement,
+        _eventController = eventController ?? StreamController<VideoEvent>();
+
+  final StreamController<VideoEvent> _eventController;
+  final html.VideoElement _videoElement;
+
+  bool _isInitialized = false;
+  bool _isBuffering = false;
+
+  /// Returns the [Stream] of [VideoEvent]s from the inner [html.VideoElement].
+  Stream<VideoEvent> get events => _eventController.stream;
+
+  /// Initializes the wrapped [html.VideoElement].
+  ///
+  /// This method sets the required DOM attributes so videos can [play] programmatically,
+  /// and attaches listeners to the internal events from the [html.VideoElement]
+  /// to react to them / expose them through the [VideoPlayer.events] stream.
+  void initialize() {
+    _videoElement
+      ..autoplay = false
+      ..controls = false;
+
+    // Allows Safari iOS to play the video inline
+    _videoElement.setAttribute('playsinline', 'true');
+
+    // Set autoplay to false since most browsers won't autoplay a video unless it is muted
+    _videoElement.setAttribute('autoplay', 'false');
+
+    _videoElement.onCanPlay.listen((dynamic _) {
+      if (!_isInitialized) {
+        _isInitialized = true;
+        _sendInitialized();
+      }
+    });
+
+    _videoElement.onCanPlayThrough.listen((dynamic _) {
+      _setBuffering(false);
+    });
+
+    _videoElement.onPlaying.listen((dynamic _) {
+      _setBuffering(false);
+    });
+
+    _videoElement.onWaiting.listen((dynamic _) {
+      _setBuffering(true);
+      _sendBufferingRangesUpdate();
+    });
+
+    // The error event fires when some form of error occurs while attempting to load or perform the media.
+    _videoElement.onError.listen((html.Event _) {
+      _setBuffering(false);
+      // The Event itself (_) doesn't contain info about the actual error.
+      // We need to look at the HTMLMediaElement.error.
+      // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error
+      final html.MediaError error = _videoElement.error!;
+      _eventController.addError(PlatformException(
+        code: _kErrorValueToErrorName[error.code]!,
+        message: error.message != '' ? error.message : _kDefaultErrorMessage,
+        details: _kErrorValueToErrorDescription[error.code],
+      ));
+    });
+
+    _videoElement.onEnded.listen((dynamic _) {
+      _setBuffering(false);
+      _eventController.add(VideoEvent(eventType: VideoEventType.completed));
+    });
+  }
+
+  /// Attempts to play the video.
+  ///
+  /// If this method is called programmatically (without user interaction), it
+  /// might fail unless the video is completely muted (or it has no Audio tracks).
+  ///
+  /// When called from some user interaction (a tap on a button), the above
+  /// limitation should disappear.
+  Future<void> play() {
+    return _videoElement.play().catchError((Object e) {
+      // play() attempts to begin playback of the media. It returns
+      // a Promise which can get rejected in case of failure to begin
+      // playback for any reason, such as permission issues.
+      // The rejection handler is called with a DomException.
+      // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
+      final html.DomException exception = e as html.DomException;
+      _eventController.addError(PlatformException(
+        code: exception.name,
+        message: exception.message,
+      ));
+    }, test: (Object e) => e is html.DomException);
+  }
+
+  /// Pauses the video in the current position.
+  void pause() {
+    _videoElement.pause();
+  }
+
+  /// Controls whether the video should start again after it finishes.
+  void setLooping(bool value) {
+    _videoElement.loop = value;
+  }
+
+  /// Sets the volume at which the media will be played.
+  ///
+  /// Values must fall between 0 and 1, where 0 is muted and 1 is the loudest.
+  ///
+  /// When volume is set to 0, the `muted` property is also applied to the
+  /// [html.VideoElement]. This is required for auto-play on the web.
+  void setVolume(double volume) {
+    assert(volume >= 0 && volume <= 1);
+
+    // TODO(ditman): Do we need to expose a "muted" API?
+    // https://github.com/flutter/flutter/issues/60721
+    _videoElement.muted = !(volume > 0.0);
+    _videoElement.volume = volume;
+  }
+
+  /// Sets the playback `speed`.
+  ///
+  /// A `speed` of 1.0 is "normal speed," values lower than 1.0 make the media
+  /// play slower than normal, higher values make it play faster.
+  ///
+  /// `speed` cannot be negative.
+  ///
+  /// The audio is muted when the fast forward or slow motion is outside a useful
+  /// range (for example, Gecko mutes the sound outside the range 0.25 to 4.0).
+  ///
+  /// The pitch of the audio is corrected by default.
+  void setPlaybackSpeed(double speed) {
+    assert(speed > 0);
+
+    _videoElement.playbackRate = speed;
+  }
+
+  /// Moves the playback head to a new `position`.
+  ///
+  /// `position` cannot be negative.
+  void seekTo(Duration position) {
+    assert(!position.isNegative);
+
+    _videoElement.currentTime = position.inMilliseconds.toDouble() / 1000;
+  }
+
+  /// Returns the current playback head position as a [Duration].
+  Duration getPosition() {
+    _sendBufferingRangesUpdate();
+    return Duration(milliseconds: (_videoElement.currentTime * 1000).round());
+  }
+
+  /// Disposes of the current [html.VideoElement].
+  void dispose() {
+    _videoElement.removeAttribute('src');
+    _videoElement.load();
+  }
+
+  // Sends an [VideoEventType.initialized] [VideoEvent] with info about the wrapped video.
+  void _sendInitialized() {
+    _eventController.add(
+      VideoEvent(
+        eventType: VideoEventType.initialized,
+        duration: Duration(
+          milliseconds: (_videoElement.duration * 1000).round(),
+        ),
+        size: Size(
+          _videoElement.videoWidth.toDouble(),
+          _videoElement.videoHeight.toDouble(),
+        ),
+      ),
+    );
+  }
+
+  // Caches the current "buffering" state of the video.
+  //
+  // If the current buffering state is different from the previous one
+  // ([_isBuffering]), this dispatches a [VideoEvent].
+  void _setBuffering(bool buffering) {
+    if (_isBuffering != buffering) {
+      _isBuffering = buffering;
+      _eventController.add(VideoEvent(
+          eventType: _isBuffering
+              ? VideoEventType.bufferingStart
+              : VideoEventType.bufferingEnd));
+    }
+  }
+
+  // Broadcasts the [html.VideoElement.buffered] status through the [events] stream.
+  void _sendBufferingRangesUpdate() {
+    _eventController.add(VideoEvent(
+      buffered: _toDurationRange(_videoElement.buffered),
+      eventType: VideoEventType.bufferingUpdate,
+    ));
+  }
+
+  // Converts from [html.TimeRanges] to our own List<DurationRange>.
+  List<DurationRange> _toDurationRange(html.TimeRanges buffered) {
+    final List<DurationRange> durationRange = <DurationRange>[];
+    for (int i = 0; i < buffered.length; i++) {
+      durationRange.add(DurationRange(
+        Duration(milliseconds: (buffered.start(i) * 1000).round()),
+        Duration(milliseconds: (buffered.end(i) * 1000).round()),
+      ));
+    }
+    return durationRange;
+  }
+}