Merge pull request #480 from bitmovin/feature/add-replay-button

Add new ReplayButton component

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 - `display` method on `ErrorMessageOverlay` to enable usage for application errors without a player error
+- Replay button which can be used within the controlbar and works also during playback
 
 ### Fixed
 - Unnecessary DOM element creation on release

src/scss/skin-modern/_skin.scss

@@ -32,6 +32,7 @@
 @import 'components/recommendationoverlay';
 @import 'components/clickoverlay';
 @import 'components/hugereplaybutton';
+@import 'components/replaybutton';
 @import 'components/playbacktimelabel';
 @import 'components/bufferingoverlay';
 @import 'components/playbacktoggleoverlay';

src/scss/skin-modern/components/_replaybutton.scss

@@ -0,0 +1,12 @@
+@import '../variables';
+@import '../mixins';
+
+.#{$prefix}-ui-replaybutton {
+  @extend %ui-button;
+
+  background-image: svg('assets/skin-modern/images/replay-nocircle.svg');
+
+  &:hover {
+    @include svg-icon-shadow;
+  }
+}

src/ts/components/replaybutton.ts

@@ -0,0 +1,48 @@
+import { ButtonConfig, Button } from './button';
+import { UIInstanceManager } from '../uimanager';
+import { PlayerAPI } from 'bitmovin-player';
+import { i18n } from '../localization/i18n';
+import { PlayerUtils } from '../playerutils';
+import LiveStreamDetectorEventArgs = PlayerUtils.LiveStreamDetectorEventArgs;
+
+/**
+ * A button to play/replay a video.
+ */
+export class ReplayButton extends Button<ButtonConfig> {
+
+  constructor(config: ButtonConfig = {}) {
+    super(config);
+
+    this.config = this.mergeConfig(config, {
+      cssClass: 'ui-replaybutton',
+      text: i18n.getLocalizer('replay'),
+    }, this.config);
+  }
+
+  configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
+    super.configure(player, uimanager);
+
+    if (player.isLive()) {
+      this.hide();
+    }
+
+    const liveStreamDetector = new PlayerUtils.LiveStreamDetector(player, uimanager);
+    liveStreamDetector.onLiveChanged.subscribe((sender, args: LiveStreamDetectorEventArgs) => {
+      if (args.live) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    });
+
+    this.onClick.subscribe(() => {
+      if (!player.hasEnded()) {
+        player.seek(0);
+        // Not calling `play` will keep the play/pause state as is
+      } else {
+        // If playback has already ended, calling `play` will automatically restart from the beginning
+        player.play('ui');
+      }
+    });
+  }
+}

src/ts/main.ts

@@ -79,6 +79,7 @@ export { SettingsPanelPageBackButton } from './components/settingspanelpagebackb
 export { SettingsPanelPageOpenButton } from './components/settingspanelpageopenbutton';
 export { SubtitleSettingsPanelPage } from './components/subtitlesettings/subtitlesettingspanelpage';
 export { SettingsPanelItem } from './components/settingspanelitem';
+export { ReplayButton } from './components/replaybutton';
 
 // Object.assign polyfill for ES5/IE9
 // https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/assign