/**
* @file play-toggle.js
*/
import Button from '../button.js' ;
import Component from '../component.js' ;
import {silencePromesse} from '../utils/promesse' ;
/**
* Bouton permettant de basculer entre la lecture et la pause.
*
* bouton @extends
*/
class PlayToggle extends Button {
/**
* Crée une instance de cette classe.
*
* @param {Player} player
* Le `Player` auquel cette classe doit être attachée.
*
* @param {Objet} [options={}]
* La mémoire clé/valeur des options du lecteur.
*/
constructor(player, options = {}) {
super(player, options) ;
// afficher ou masquer l'icône de rediffusion
options.replay = options.replay === undefined || options.replay ;
this.on(player, 'play', (e) => this.handlePlay(e)) ;
this.on(player, 'pause', (e) => this.handlePause(e)) ;
if (options.replay) {
this.on(player, 'ended', (e) => this.handleEnded(e)) ;
}
}
/**
* Construit le DOM par défaut `className`.
*
* @return {string}
* Le `nom de classe` du DOM pour cet objet.
*/
buildCSSClass() {
return `vjs-play-control ${super.buildCSSClass()}` ;
}
/**
* Cette fonction est appelée lorsqu'un `PlayToggle` est "cliqué". Voir
* {@link ClickableComponent} pour des informations plus détaillées sur ce que peut être un clic.
*
* @param {EventTarget~Event} [event]
* L'événement `keydown`, `tap` ou `click` qui a provoqué l'activation de cette fonction est le suivant
* appelé.
*
* @listens tap
* @listens click
*/
handleClick(event) {
if (this.player_.paused()) {
silencePromesse(this.player_.play()) ;
} else {
ce.joueur_.pause() ;
}
}
/**
* Cette fonction est appelée une fois que la vidéo est terminée et que l'utilisateur cherche à savoir si
* nous pouvons transformer le bouton "replay" en bouton "play".
*
* @param {EventTarget~Event} [event]
* L'événement qui a provoqué l'exécution de cette fonction.
*
* @listens Player#seeked
*/
handleSeeked(event) {
this.removeClass('vjs-ended') ;
if (this.player_.paused()) {
this.handlePause(event) ;
} else {
this.handlePlay(event) ;
}
}
/**
* Ajoutez la classe vjs-playing à l'élément pour qu'il puisse changer d'apparence.
*
* @param {EventTarget~Event} [event]
* L'événement qui a provoqué l'exécution de cette fonction.
*
* @listens Player#play
*/
handlePlay(event) {
this.removeClass('vjs-ended') ;
this.removeClass('vjs-paused') ;
this.addClass('vjs-playing') ;
// changer le texte du bouton en "Pause"
this.controlText('Pause') ;
}
/**
* Ajoutez la classe vjs-paused à l'élément pour qu'il puisse changer d'apparence.
*
* @param {EventTarget~Event} [event]
* L'événement qui a provoqué l'exécution de cette fonction.
*
* @listens Player#pause
*/
handlePause(event) {
this.removeClass('vjs-playing') ;
this.addClass('vjs-paused') ;
// changer le texte du bouton en "Play"
this.controlText('Play') ;
}
/**
* Ajouter la classe vjs-ended à l'élément pour qu'il puisse changer d'apparence
*
* @param {EventTarget~Event} [event]
* L'événement qui a provoqué l'exécution de cette fonction.
*
* @listens Player#ended
*/
handleEnded(event) {
this.removeClass('vjs-playing') ;
this.addClass('vjs-ended') ;
// changer le texte du bouton en "Replay"
this.controlText('Replay') ;
// lors de la prochaine recherche, supprimer le bouton de relecture
this.one(this.player_, 'seeked', (e) => this.handleSeeked(e)) ;
}
}
/**
* Le texte qui doit s'afficher au-dessus des contrôles `PlayToggle`. Ajouté pour la localisation.
*
* @type {string}
* @private
*/
PlayToggle.prototype.controlText_ = 'Play' ;
Component.registerComponent('PlayToggle', PlayToggle) ;
exporter le PlayToggle par défaut ;