-
Notifications
You must be signed in to change notification settings - Fork 7.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added a button to select from multiple audio tracks
Added audio icon Extract TrackButton from Audio and TextTrack buttons Add document comments
- Loading branch information
jforbes
committed
Apr 25, 2016
1 parent
2e2dbde
commit d5ce1a0
Showing
7 changed files
with
196 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.video-js .vjs-audio-button { | ||
@extend .vjs-icon-audio; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
src/js/control-bar/audio-track-controls/audio-track-button.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
/** | ||
* @file audio-track-button.js | ||
*/ | ||
import TrackButton from '../track-button.js'; | ||
import Component from '../../component.js'; | ||
import * as Fn from '../../utils/fn.js'; | ||
import AudioTrackMenuItem from './audio-track-menu-item.js'; | ||
|
||
/** | ||
* The base class for buttons that toggle specific text track types (e.g. subtitles) | ||
* | ||
* @param {Player|Object} player | ||
* @param {Object=} options | ||
* @extends TrackButton | ||
* @class AudioTrackButton | ||
*/ | ||
class AudioTrackButton extends TrackButton { | ||
constructor(player, options = {}) { | ||
options.tracks = player.audioTracks && player.audioTracks(); | ||
|
||
super(player, options); | ||
|
||
this.el_.setAttribute('aria-label', 'Audio Menu'); | ||
} | ||
|
||
/** | ||
* Allow sub components to stack CSS class names | ||
* | ||
* @return {String} The constructed class name | ||
* @method buildCSSClass | ||
*/ | ||
buildCSSClass() { | ||
return `vjs-audio-button ${super.buildCSSClass()}`; | ||
} | ||
|
||
/** | ||
* Create a menu item for each audio track | ||
* | ||
* @return {Array} Array of menu items | ||
* @method createItems | ||
*/ | ||
createItems(items = []) { | ||
let tracks = this.player_.audioTracks && this.player_.audioTracks(); | ||
|
||
if (!tracks) { | ||
return items; | ||
} | ||
|
||
for (let i = 0; i < tracks.length; i++) { | ||
let track = tracks[i]; | ||
|
||
items.push(new AudioTrackMenuItem(this.player_, { | ||
// MenuItem is selectable | ||
'selectable': true, | ||
'track': track | ||
})); | ||
} | ||
|
||
return items; | ||
} | ||
} | ||
|
||
Component.registerComponent('AudioTrackButton', AudioTrackButton); | ||
export default AudioTrackButton; |
71 changes: 71 additions & 0 deletions
71
src/js/control-bar/audio-track-controls/audio-track-menu-item.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
/** | ||
* @file audio-track-menu-item.js | ||
*/ | ||
import MenuItem from '../../menu/menu-item.js'; | ||
import Component from '../../component.js'; | ||
import * as Fn from '../../utils/fn.js'; | ||
|
||
/** | ||
* The audio track menu item | ||
* | ||
* @param {Player|Object} player | ||
* @param {Object=} options | ||
* @extends MenuItem | ||
* @class AudioTrackMenuItem | ||
*/ | ||
class AudioTrackMenuItem extends MenuItem { | ||
constructor(player, options) { | ||
let track = options.track; | ||
let tracks = player.audioTracks(); | ||
|
||
// Modify options for parent MenuItem class's init. | ||
options.label = track.label || track.language || 'Unknown'; | ||
options.selected = track.enabled; | ||
|
||
super(player, options); | ||
|
||
this.track = track; | ||
|
||
if (tracks) { | ||
let changeHandler = Fn.bind(this, this.handleTracksChange); | ||
|
||
tracks.addEventListener('change', changeHandler); | ||
this.on('dispose', () => { | ||
tracks.removeEventListener('change', changeHandler); | ||
}); | ||
} | ||
} | ||
|
||
/** | ||
* Handle click on audio track | ||
* | ||
* @method handleClick | ||
*/ | ||
handleClick(event) { | ||
let tracks = this.player_.audioTracks(); | ||
|
||
super.handleClick(event); | ||
|
||
if (!tracks) return; | ||
|
||
for (let i = 0; i < tracks.length; i++) { | ||
let track = tracks[i]; | ||
|
||
if (track === this.track) { | ||
track.enabled = true; | ||
} | ||
} | ||
} | ||
|
||
/** | ||
* Handle audio track change | ||
* | ||
* @method handleTracksChange | ||
*/ | ||
handleTracksChange(event) { | ||
this.selected(this.track.enabled); | ||
} | ||
} | ||
|
||
Component.registerComponent('AudioTrackMenuItem', AudioTrackMenuItem); | ||
export default AudioTrackMenuItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
/** | ||
* @file track-button.js | ||
*/ | ||
import MenuButton from '../menu/menu-button.js'; | ||
import Component from '../component.js'; | ||
import * as Fn from '../utils/fn.js'; | ||
|
||
/** | ||
* The base class for buttons that toggle specific text track types (e.g. subtitles) | ||
* | ||
* @param {Player|Object} player | ||
* @param {Object=} options | ||
* @extends MenuButton | ||
* @class TrackButton | ||
*/ | ||
class TrackButton extends MenuButton { | ||
|
||
constructor(player, options){ | ||
let tracks = options.tracks; | ||
|
||
super(player, options); | ||
|
||
if (this.items.length <= 1) { | ||
this.hide(); | ||
} | ||
|
||
if (!tracks) { | ||
return; | ||
} | ||
|
||
let updateHandler = Fn.bind(this, this.update); | ||
tracks.addEventListener('removetrack', updateHandler); | ||
tracks.addEventListener('addtrack', updateHandler); | ||
|
||
this.player_.on('dispose', function() { | ||
tracks.removeEventListener('removetrack', updateHandler); | ||
tracks.removeEventListener('addtrack', updateHandler); | ||
}); | ||
} | ||
|
||
} | ||
|
||
Component.registerComponent('TrackButton', TrackButton); | ||
export default TrackButton; |