feat: add 'replay' option to the PlayToggle component. (#5531)

The `PlayToggle` has one option `replay` which can show or hide replay icon. This can be set by passing `{replay: false}` as the default behavior replay icon is shown after video end playback.

Example of how to hide a replay icon
 ```js
let player = videojs('myplayer', {
  controlBar: {
    playToggle: {
      replay: false
    }
  }
});
```

Fixes #4802

docs/guides/components.md

@@ -319,6 +319,22 @@ Player
 
 ## Specific Component Details
 
+### Play Toggle
+
+The `PlayToggle` has one option `replay` which can show or hide replay icon. This can be set by passing `{replay: false}` as the default behavior replay icon is shown after video end playback.
+
+Example of how to hide a replay icon
+
+```js
+let player = videojs('myplayer', {
+  controlBar: {
+    playToggle: {
+      replay: false
+    }
+  }
+});
+```
+
 ### Volume Panel
 
 The `VolumePanel` includes the `MuteToggle` and the `VolumeControl` Components, which will be hidden if volume changes are not supported. There is one important option for the `VolumePanel` which can make your `VolumeControl` appear vertically over the `MuteToggle`. This can be set by passing `VolumePanel` `{inline: false}` as the default behavior is a horizontal `VolumeControl` with `{inline: true}`.

src/js/control-bar/play-toggle.js

@@ -17,15 +17,21 @@ class PlayToggle extends Button {
    * @param {Player} player
    *        The `Player` that this class should be attached to.
    *
-   * @param {Object} [options]
+   * @param {Object} [options={}]
    *        The key/value store of player options.
    */
-  constructor(player, options) {
+  constructor(player, options = {}) {
     super(player, options);
 
+    // show or hide replay icon
+    options.replay = options.replay === undefined || options.replay;
+
     this.on(player, 'play', this.handlePlay);
     this.on(player, 'pause', this.handlePause);
-    this.on(player, 'ended', this.handleEnded);
+
+    if (options.replay) {
+      this.on(player, 'ended', this.handleEnded);
+    }
   }
 
   /**

test/unit/controls.test.js

@@ -2,6 +2,7 @@
 import VolumeControl from '../../src/js/control-bar/volume-control/volume-control.js';
 import MuteToggle from '../../src/js/control-bar/mute-toggle.js';
 import VolumeBar from '../../src/js/control-bar/volume-control/volume-bar.js';
+import PlayToggle from '../../src/js/control-bar/play-toggle.js';
 import PlaybackRateMenuButton from '../../src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js';
 import Slider from '../../src/js/slider/slider.js';
 import FullscreenToggle from '../../src/js/control-bar/fullscreen-toggle.js';
@@ -35,6 +36,48 @@ QUnit.test('should hide volume and mute toggle control if it\'s not supported',
   player.dispose();
 });
 
+QUnit.test('should show replay icon when video playback ended', function(assert) {
+  assert.expect(1);
+
+  const player = TestHelpers.makePlayer();
+
+  const playToggle = new PlayToggle(player);
+
+  player.trigger('ended');
+
+  assert.ok(playToggle.hasClass('vjs-ended'), 'playToogle is in the ended state');
+
+  player.dispose();
+});
+
+QUnit.test('should show replay icon when video playback ended and replay option is set to true', function(assert) {
+  assert.expect(1);
+
+  const player = TestHelpers.makePlayer();
+
+  const playToggle = new PlayToggle(player, {replay: true});
+
+  player.trigger('ended');
+
+  assert.ok(playToggle.hasClass('vjs-ended'), 'playToogle is in the ended state');
+
+  player.dispose();
+});
+
+QUnit.test('should not show the replay icon when video playback ended', function(assert) {
+  assert.expect(1);
+
+  const player = TestHelpers.makePlayer();
+
+  const playToggle = new PlayToggle(player, {replay: false});
+
+  player.trigger('ended');
+
+  assert.equal(playToggle.hasClass('vjs-ended'), false, 'playToogle is not in the ended state');
+
+  player.dispose();
+});
+
 QUnit.test('should test and toggle volume control on `loadstart`', function(assert) {
   const player = TestHelpers.makePlayer();