Permalink
Browse files

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
  • Loading branch information...
gjanblaszczyk authored and gkatsev committed Nov 2, 2018
1 parent 0060747 commit f1784587f60067c0d7ac0ae24ec9921d449ac4a6
Showing with 68 additions and 3 deletions.
  1. +16 −0 docs/guides/components.md
  2. +9 −3 src/js/control-bar/play-toggle.js
  3. +43 −0 test/unit/controls.test.js
@@ -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}`.
@@ -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);
}
}

/**
@@ -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();

0 comments on commit f178458

Please sign in to comment.