Skip to content

Commit 2034c71

Browse files
joedolsonjoedolson
committed
Add new prototypes for syncing sign language & setting button states.
Reduces code duplication.
1 parent bf642db commit 2034c71

2 files changed

Lines changed: 76 additions & 80 deletions

File tree

‎scripts/control.js‎

Lines changed: 75 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,7 @@
1616
this.synth.cancel();
1717
}
1818

19-
if (this.hasSignLanguage && this.signVideo) {
20-
// keep sign languge video in sync
21-
this.signVideo.currentTime = this.startTime;
22-
}
19+
this.syncSignVideo( {'time' : this.startTime } );
2320

2421
if (this.player === 'html5') {
2522
var seekable;
@@ -33,10 +30,7 @@
3330
// this.seeking will be set to false at that point
3431
this.media.currentTime = this.startTime;
3532
this.seekStatus = 'complete';
36-
if (this.hasSignLanguage && this.signVideo) {
37-
// keep sign languge video in sync
38-
this.signVideo.currentTime = this.startTime;
39-
}
33+
this.syncSignVideo( { 'time' : this.startTime } );
4034
}
4135
}
4236
else if (this.player === 'youtube') {
@@ -46,10 +40,7 @@
4640
this.$posterImg.hide();
4741
}
4842
}
49-
if (this.hasSignLanguage && this.signVideo) {
50-
// keep sign languge video in sync
51-
this.signVideo.currentTime = newTime;
52-
}
43+
this.syncSignVideo( {'time' : newTime } );
5344
}
5445
else if (this.player === 'vimeo') {
5546
this.vimeoPlayer.setCurrentTime(newTime).then(function() {
@@ -312,9 +303,7 @@
312303
this.syncSpeechToPlaybackRate(rate);
313304
}
314305

315-
if (this.hasSignLanguage && this.signVideo) {
316-
this.signVideo.playbackRate = rate;
317-
}
306+
this.syncSignVideo( {'rate' : rate } );
318307

319308
if (this.player === 'html5') {
320309
this.media.playbackRate = rate;
@@ -325,9 +314,7 @@
325314
else if (this.player === 'vimeo') {
326315
this.vimeoPlayer.setPlaybackRate(rate);
327316
}
328-
if (this.hasSignLanguage && this.signVideo) {
329-
this.signVideo.playbackRate = rate;
330-
}
317+
this.syncSignVideo( { 'rate' : rate } );
331318
this.playbackRate = rate;
332319
this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x');
333320
};
@@ -369,19 +356,34 @@
369356
}
370357
};
371358

359+
AblePlayer.prototype.syncSignVideo = function(options) {
360+
if (this.hasSignLanguage && this.signVideo) {
361+
if (options && typeof options.time !== 'undefined') {
362+
this.signVideo.currentTime = options.time;
363+
}
364+
if (options && typeof options.rate !== 'undefined') {
365+
this.signVideo.playbackRate = options.rate;
366+
}
367+
if (options && typeof options.pause !== 'undefined') {
368+
this.signVideo.pause(true);
369+
}
370+
if (options && typeof options.play !== 'undefined') {
371+
this.signVideo.play(true);
372+
}
373+
if (options && typeof options.volume !== 'undefined') {
374+
this.signVideo.volume = 0;
375+
}
376+
}
377+
};
378+
372379
AblePlayer.prototype.pauseMedia = function () {
373380

374381
var thisObj = this;
375382

376-
if (this.hasSignLanguage && this.signVideo) {
377-
this.signVideo.pause(true);
378-
}
383+
this.syncSignVideo( { 'pause' : true } );
379384

380385
if (this.player === 'html5') {
381386
this.media.pause(true);
382-
if (this.hasSignLanguage && this.signVideo) {
383-
this.signVideo.pause(true);
384-
}
385387
}
386388
else if (this.player === 'youtube') {
387389
this.youTubePlayer.pauseVideo();
@@ -395,15 +397,10 @@
395397

396398
var thisObj = this;
397399

398-
if (this.hasSignLanguage && this.signVideo) {
399-
this.signVideo.play(true);
400-
}
400+
this.syncSignVideo( { 'play' : true } );
401401

402402
if (this.player === 'html5') {
403403
this.media.play(true);
404-
if (this.hasSignLanguage && this.signVideo) {
405-
this.signVideo.play(true);
406-
}
407404
}
408405
else if (this.player === 'youtube') {
409406

@@ -662,16 +659,13 @@
662659
} // end if context == 'timeline' or 'init'
663660

664661
if (context === 'descriptions' || context == 'init'){
665-
666662
if (this.$descButton) {
667-
if (this.descOn) {
668-
this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions);
669-
this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions);
670-
}
671-
else {
672-
this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions);
673-
this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions);
674-
}
663+
this.toggleButtonState(
664+
this.$descButton,
665+
this.descOn,
666+
this.tt.turnOffDescriptions,
667+
this.tt.turnOnDescriptions,
668+
);
675669
}
676670
}
677671

@@ -681,34 +675,23 @@
681675

682676
captionsCount = this.captions.length;
683677

684-
// Button has a different title depending on the number of captions.
685-
// If only one caption track, this is "Show captions" and "Hide captions"
686-
// Otherwise, it is just always "Captions"
687-
if (!this.captionsOn) {
688-
this.$ccButton.addClass('buttonOff');
689-
this.$ccButton.attr('aria-pressed', 'false')
690-
if (captionsCount === 1) {
691-
this.$ccButton.attr('aria-label',this.tt.showCaptions);
692-
this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions);
693-
}
694-
}
695-
else {
696-
this.$ccButton.removeClass('buttonOff');
697-
this.$ccButton.attr('aria-pressed', 'true')
698-
if (captionsCount === 1) {
699-
this.$ccButton.attr('aria-label',this.tt.hideCaptions);
700-
this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions);
701-
}
702-
}
703-
704678
if (captionsCount > 1) {
705679
this.$ccButton.attr({
706-
'aria-label': this.tt.captions,
707680
'aria-haspopup': 'true',
708681
'aria-controls': this.mediaId + '-captions-menu'
709682
});
710-
this.$ccButton.find('span.able-clipped').text(this.tt.captions);
711683
}
684+
var ariaLabelOn = ( captionsCount > 1 ) ? this.tt.captions : this.tt.showCaptions;
685+
var ariaLabelOff = ( captionsCount > 1 ) ? this.tt.captions : this.tt.hideCaptions;
686+
var ariaPressed = ( captionsCount > 1 ) ? true : false;
687+
688+
this.toggleButtonState(
689+
this.$ccButton,
690+
this.captionsOn,
691+
ariaLabelOff,
692+
ariaLabelOn,
693+
ariaPressed
694+
);
712695
}
713696
}
714697

@@ -799,8 +782,8 @@
799782
// only scroll once after moving a highlight
800783
if (this.movingHighlight) {
801784
this.$transcriptDiv.scrollTop(newTop);
802-
this.movingHighlight = false;
803-
}
785+
this.movingHighlight = false;
786+
}
804787
}
805788
}
806789
}
@@ -1383,11 +1366,10 @@
13831366
AblePlayer.prototype.handleTranscriptToggle = function () {
13841367

13851368
var thisObj = this;
1386-
1387-
if (this.$transcriptDiv.is(':visible')) {
1369+
var visible = this.$transcriptDiv.is(':visible');
1370+
if ( visible ) {
13881371
this.$transcriptArea.hide();
1389-
this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript);
1390-
this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript);
1372+
this.toggleButtonState( this.$transcriptButton, visible, this.tt.hideTranscript, this.tt.showTranscript );
13911373
this.prefTranscript = 0;
13921374
this.$transcriptButton.trigger('focus').addClass('able-focus');
13931375
// wait briefly before resetting stopgap var
@@ -1404,8 +1386,7 @@
14041386
// showing transcriptArea has a cascading effect of showing all content *within* transcriptArea
14051387
// need to re-hide the popup menu
14061388
this.$transcriptPopup.hide();
1407-
this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript);
1408-
this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript);
1389+
this.toggleButtonState( this.$transcriptButton, visible, this.tt.hideTranscript, this.tt.showTranscript );
14091390
this.prefTranscript = 1;
14101391
// move focus to first focusable element (window options button)
14111392
this.focusNotClick = true;
@@ -1421,11 +1402,10 @@
14211402
AblePlayer.prototype.handleSignToggle = function () {
14221403

14231404
var thisObj = this;
1424-
1425-
if (this.$signWindow.is(':visible')) {
1405+
var visible = this.$signWindow.is(':visible');
1406+
if ( visible ) {
14261407
this.$signWindow.hide();
1427-
this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign);
1428-
this.$signButton.find('span.able-clipped').text(this.tt.showSign);
1408+
this.toggleButtonState( this.$signButton, visible, this.tt.hideSign, this.tt.showSign );
14291409
this.prefSign = 0;
14301410
this.$signButton.trigger('focus').addClass('able-focus');
14311411
// wait briefly before resetting stopgap var
@@ -1440,8 +1420,7 @@
14401420
// showing signWindow has a cascading effect of showing all content *within* signWindow
14411421
// need to re-hide the popup menu
14421422
this.$signPopup.hide();
1443-
this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign);
1444-
this.$signButton.find('span.able-clipped').text(this.tt.hideSign);
1423+
this.toggleButtonState( this.$signButton, visible, this.tt.hideSign, this.tt.showSign );
14451424
this.prefSign = 1;
14461425
this.focusNotClick = true;
14471426
this.$signWindow.find('button').first().trigger('focus');
@@ -1657,6 +1636,27 @@
16571636
this.refreshControls('transcript');
16581637
};
16591638

1639+
AblePlayer.prototype.toggleButtonState = function($button, isOn, onLabel, offLabel, offClass = 'buttonOff', ariaPressed = false, ariaExpanded = false) {
1640+
if (isOn) {
1641+
$button.removeClass(offClass).attr('aria-label', onLabel);
1642+
$button.find('span.able-clipped').text(onLabel);
1643+
if ( ariaPressed ) {
1644+
$button.attr('aria-pressed', 'true');
1645+
}
1646+
if ( ariaExpanded ) {
1647+
$button.attr( 'aria-expanded', 'true' );
1648+
}
1649+
} else {
1650+
$button.addClass(offClass).attr('aria-label', offLabel);
1651+
$button.find('span.able-clipped').text(offLabel);
1652+
if ( ariaPressed ) {
1653+
$button.attr('aria-pressed', 'false');
1654+
}
1655+
if ( ariaExpanded ) {
1656+
$button.attr( 'aria-expanded', 'false' );
1657+
}
1658+
}
1659+
};
16601660

16611661
AblePlayer.prototype.showTooltip = function($tooltip) {
16621662

‎scripts/volume.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -257,15 +257,11 @@
257257
// convert as needed depending on player
258258

259259
var newVolume;
260-
260+
this.syncSignVideo( {'volume' : 0 } );
261261
if (this.player === 'html5') {
262262
// volume is 0 to 1
263263
newVolume = volume / 10;
264264
this.media.volume = newVolume;
265-
266-
if (this.hasSignLanguage && this.signVideo) {
267-
this.signVideo.volume = 0; // always mute
268-
}
269265
}
270266
else if (this.player === 'youtube') {
271267
// volume is 0 to 100

0 commit comments

Comments
 (0)