mirror of
https://github.com/videojs/video.js.git
synced 2025-03-17 21:18:27 +02:00
Removed merge file.
This commit is contained in:
Steve Heffernan
parent
11a9e88d42
commit
c189332ca3
@ -1,850 +0,0 @@
|
||||
/* Control - Base class for all control elements
|
||||
================================================================================ */
|
||||
_V_.Control = _V_.Component.extend({
|
||||
|
||||
buildCSSClass: function(){
|
||||
return "vjs-control " + this._super();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* Control Bar
|
||||
================================================================================ */
|
||||
_V_.ControlBar = _V_.Component.extend({
|
||||
|
||||
options: {
|
||||
loadEvent: "play",
|
||||
components: {
|
||||
"playToggle": {},
|
||||
"fullscreenToggle": {},
|
||||
"currentTimeDisplay": {},
|
||||
"timeDivider": {},
|
||||
"durationDisplay": {},
|
||||
"remainingTimeDisplay": {},
|
||||
"progressControl": {},
|
||||
"volumeControl": {},
|
||||
"muteToggle": {}
|
||||
}
|
||||
},
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
<<<<<<< HEAD
|
||||
player.on("play", this.proxy(function(){
|
||||
=======
|
||||
player.one("play", this.proxy(function(){
|
||||
>>>>>>> hotfix/multiple-control-fades-fix
|
||||
this.fadeIn();
|
||||
this.player.on("mouseover", this.proxy(this.fadeIn));
|
||||
this.player.on("mouseout", this.proxy(this.fadeOut));
|
||||
}));
|
||||
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
return _V_.createElement("div", {
|
||||
className: "vjs-controls"
|
||||
});
|
||||
},
|
||||
|
||||
fadeIn: function(){
|
||||
this._super();
|
||||
this.player.trigger("controlsvisible");
|
||||
},
|
||||
|
||||
fadeOut: function(){
|
||||
this._super();
|
||||
this.player.trigger("controlshidden");
|
||||
},
|
||||
|
||||
lockShowing: function(){
|
||||
this.el.style.opacity = "1";
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* Button - Base class for all buttons
|
||||
================================================================================ */
|
||||
_V_.Button = _V_.Control.extend({
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
this.on("click", this.onClick);
|
||||
this.on("focus", this.onFocus);
|
||||
this.on("blur", this.onBlur);
|
||||
},
|
||||
|
||||
createElement: function(type, attrs){
|
||||
// Add standard Aria and Tabindex info
|
||||
attrs = _V_.merge({
|
||||
className: this.buildCSSClass(),
|
||||
innerHTML: '<div><span class="vjs-control-text">' + (this.buttonText || "Need Text") + '</span></div>',
|
||||
role: "button",
|
||||
tabIndex: 0
|
||||
}, attrs);
|
||||
|
||||
return this._super(type, attrs);
|
||||
},
|
||||
|
||||
// Click - Override with specific functionality for button
|
||||
onClick: function(){},
|
||||
|
||||
// Focus - Add keyboard functionality to element
|
||||
onFocus: function(){
|
||||
_V_.on(document, "keyup", _V_.proxy(this, this.onKeyPress));
|
||||
},
|
||||
|
||||
// KeyPress (document level) - Trigger click when keys are pressed
|
||||
onKeyPress: function(event){
|
||||
// Check for space bar (32) or enter (13) keys
|
||||
if (event.which == 32 || event.which == 13) {
|
||||
event.preventDefault();
|
||||
this.onClick();
|
||||
}
|
||||
},
|
||||
|
||||
// Blur - Remove keyboard triggers
|
||||
onBlur: function(){
|
||||
_V_.off(document, "keyup", _V_.proxy(this, this.onKeyPress));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* Play Button
|
||||
================================================================================ */
|
||||
_V_.PlayButton = _V_.Button.extend({
|
||||
|
||||
buttonText: "Play",
|
||||
|
||||
buildCSSClass: function(){
|
||||
return "vjs-play-button " + this._super();
|
||||
},
|
||||
|
||||
onClick: function(){
|
||||
this.player.play();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* Pause Button
|
||||
================================================================================ */
|
||||
_V_.PauseButton = _V_.Button.extend({
|
||||
|
||||
buttonText: "Pause",
|
||||
|
||||
buildCSSClass: function(){
|
||||
return "vjs-pause-button " + this._super();
|
||||
},
|
||||
|
||||
onClick: function(){
|
||||
this.player.pause();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* Play Toggle - Play or Pause Media
|
||||
================================================================================ */
|
||||
_V_.PlayToggle = _V_.Button.extend({
|
||||
|
||||
buttonText: "Play",
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
player.on("play", _V_.proxy(this, this.onPlay));
|
||||
player.on("pause", _V_.proxy(this, this.onPause));
|
||||
},
|
||||
|
||||
buildCSSClass: function(){
|
||||
return "vjs-play-control " + this._super();
|
||||
},
|
||||
|
||||
// OnClick - Toggle between play and pause
|
||||
onClick: function(){
|
||||
if (this.player.paused()) {
|
||||
this.player.play();
|
||||
} else {
|
||||
this.player.pause();
|
||||
}
|
||||
},
|
||||
|
||||
// OnPlay - Add the vjs-playing class to the element so it can change appearance
|
||||
onPlay: function(){
|
||||
_V_.removeClass(this.el, "vjs-paused");
|
||||
_V_.addClass(this.el, "vjs-playing");
|
||||
},
|
||||
|
||||
// OnPause - Add the vjs-paused class to the element so it can change appearance
|
||||
onPause: function(){
|
||||
_V_.removeClass(this.el, "vjs-playing");
|
||||
_V_.addClass(this.el, "vjs-paused");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* Fullscreen Toggle Behaviors
|
||||
================================================================================ */
|
||||
_V_.FullscreenToggle = _V_.Button.extend({
|
||||
|
||||
buttonText: "Fullscreen",
|
||||
|
||||
buildCSSClass: function(){
|
||||
return "vjs-fullscreen-control " + this._super();
|
||||
},
|
||||
|
||||
onClick: function(){
|
||||
if (!this.player.isFullScreen) {
|
||||
this.player.requestFullScreen();
|
||||
} else {
|
||||
this.player.cancelFullScreen();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* Big Play Button
|
||||
================================================================================ */
|
||||
_V_.BigPlayButton = _V_.Button.extend({
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
player.on("play", _V_.proxy(this, this.hide));
|
||||
player.on("ended", _V_.proxy(this, this.show));
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-big-play-button",
|
||||
innerHTML: "<span></span>"
|
||||
});
|
||||
},
|
||||
|
||||
onClick: function(){
|
||||
// Go back to the beginning if big play button is showing at the end.
|
||||
// Have to check for current time otherwise it might throw a 'not ready' error.
|
||||
if(this.player.currentTime()) {
|
||||
this.player.currentTime(0);
|
||||
}
|
||||
this.player.play();
|
||||
}
|
||||
});
|
||||
|
||||
/* Loading Spinner
|
||||
================================================================================ */
|
||||
_V_.LoadingSpinner = _V_.Component.extend({
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
player.on("canplay", _V_.proxy(this, this.hide));
|
||||
player.on("canplaythrough", _V_.proxy(this, this.hide));
|
||||
player.on("playing", _V_.proxy(this, this.hide));
|
||||
|
||||
player.on("seeking", _V_.proxy(this, this.show));
|
||||
player.on("error", _V_.proxy(this, this.show));
|
||||
|
||||
// Not showing spinner on stalled any more. Browsers may stall and then not trigger any events that would remove the spinner.
|
||||
// Checked in Chrome 16 and Safari 5.1.2. http://help.videojs.com/discussions/problems/883-why-is-the-download-progress-showing
|
||||
// player.on("stalled", _V_.proxy(this, this.show));
|
||||
|
||||
player.on("waiting", _V_.proxy(this, this.show));
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
|
||||
var classNameSpinner, innerHtmlSpinner;
|
||||
|
||||
if ( typeof this.player.el.style.WebkitBorderRadius == "string"
|
||||
|| typeof this.player.el.style.MozBorderRadius == "string"
|
||||
|| typeof this.player.el.style.KhtmlBorderRadius == "string"
|
||||
|| typeof this.player.el.style.borderRadius == "string")
|
||||
{
|
||||
classNameSpinner = "vjs-loading-spinner";
|
||||
innerHtmlSpinner = "<div class='ball1'></div><div class='ball2'></div><div class='ball3'></div><div class='ball4'></div><div class='ball5'></div><div class='ball6'></div><div class='ball7'></div><div class='ball8'></div>";
|
||||
} else {
|
||||
classNameSpinner = "vjs-loading-spinner-fallback";
|
||||
innerHtmlSpinner = "";
|
||||
}
|
||||
|
||||
return this._super("div", {
|
||||
className: classNameSpinner,
|
||||
innerHTML: innerHtmlSpinner
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/* Time
|
||||
================================================================================ */
|
||||
_V_.CurrentTimeDisplay = _V_.Component.extend({
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
player.on("timeupdate", _V_.proxy(this, this.updateContent));
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
var el = this._super("div", {
|
||||
className: "vjs-current-time vjs-time-controls vjs-control"
|
||||
});
|
||||
|
||||
this.content = _V_.createElement("div", {
|
||||
className: "vjs-current-time-display",
|
||||
innerHTML: '0:00'
|
||||
});
|
||||
|
||||
el.appendChild(_V_.createElement("div").appendChild(this.content));
|
||||
return el;
|
||||
},
|
||||
|
||||
updateContent: function(){
|
||||
// Allows for smooth scrubbing, when player can't keep up.
|
||||
var time = (this.player.scrubbing) ? this.player.values.currentTime : this.player.currentTime();
|
||||
this.content.innerHTML = _V_.formatTime(time, this.player.duration());
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
_V_.DurationDisplay = _V_.Component.extend({
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
player.on("timeupdate", _V_.proxy(this, this.updateContent));
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
var el = this._super("div", {
|
||||
className: "vjs-duration vjs-time-controls vjs-control"
|
||||
});
|
||||
|
||||
this.content = _V_.createElement("div", {
|
||||
className: "vjs-duration-display",
|
||||
innerHTML: '0:00'
|
||||
});
|
||||
|
||||
el.appendChild(_V_.createElement("div").appendChild(this.content));
|
||||
return el;
|
||||
},
|
||||
|
||||
updateContent: function(){
|
||||
if (this.player.duration()) { this.content.innerHTML = _V_.formatTime(this.player.duration()); }
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Time Separator (Not used in main skin, but still available, and could be used as a 'spare element')
|
||||
_V_.TimeDivider = _V_.Component.extend({
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-time-divider",
|
||||
innerHTML: '<div><span>/</span></div>'
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
_V_.RemainingTimeDisplay = _V_.Component.extend({
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
player.on("timeupdate", _V_.proxy(this, this.updateContent));
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
var el = this._super("div", {
|
||||
className: "vjs-remaining-time vjs-time-controls vjs-control"
|
||||
});
|
||||
|
||||
this.content = _V_.createElement("div", {
|
||||
className: "vjs-remaining-time-display",
|
||||
innerHTML: '-0:00'
|
||||
});
|
||||
|
||||
el.appendChild(_V_.createElement("div").appendChild(this.content));
|
||||
return el;
|
||||
},
|
||||
|
||||
updateContent: function(){
|
||||
if (this.player.duration()) { this.content.innerHTML = "-"+_V_.formatTime(this.player.remainingTime()); }
|
||||
|
||||
// Allows for smooth scrubbing, when player can't keep up.
|
||||
// var time = (this.player.scrubbing) ? this.player.values.currentTime : this.player.currentTime();
|
||||
// this.content.innerHTML = _V_.formatTime(time, this.player.duration());
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* Slider - Parent for seek bar and volume slider
|
||||
================================================================================ */
|
||||
_V_.Slider = _V_.Component.extend({
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
player.on(this.playerEvent, _V_.proxy(this, this.update));
|
||||
|
||||
this.on("mousedown", this.onMouseDown);
|
||||
this.on("focus", this.onFocus);
|
||||
this.on("blur", this.onBlur);
|
||||
|
||||
this.player.on("controlsvisible", this.proxy(this.update));
|
||||
|
||||
// This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
|
||||
// this.player.one("timeupdate", this.proxy(this.update));
|
||||
|
||||
this.update();
|
||||
},
|
||||
|
||||
createElement: function(type, attrs) {
|
||||
attrs = _V_.merge({
|
||||
role: "slider",
|
||||
"aria-valuenow": 0,
|
||||
"aria-valuemin": 0,
|
||||
"aria-valuemax": 100,
|
||||
tabIndex: 0
|
||||
}, attrs);
|
||||
|
||||
return this._super(type, attrs);
|
||||
},
|
||||
|
||||
onMouseDown: function(event){
|
||||
event.preventDefault();
|
||||
_V_.blockTextSelection();
|
||||
|
||||
_V_.on(document, "mousemove", _V_.proxy(this, this.onMouseMove));
|
||||
_V_.on(document, "mouseup", _V_.proxy(this, this.onMouseUp));
|
||||
|
||||
this.onMouseMove(event);
|
||||
},
|
||||
|
||||
onMouseUp: function(event) {
|
||||
_V_.unblockTextSelection();
|
||||
_V_.off(document, "mousemove", this.onMouseMove, false);
|
||||
_V_.off(document, "mouseup", this.onMouseUp, false);
|
||||
|
||||
this.update();
|
||||
},
|
||||
|
||||
update: function(){
|
||||
// If scrubbing, we could use a cached value to make the handle keep up with the user's mouse.
|
||||
// On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later.
|
||||
// var progress = (this.player.scrubbing) ? this.player.values.currentTime / this.player.duration() : this.player.currentTime() / this.player.duration();
|
||||
|
||||
var barProgress,
|
||||
progress = this.getPercent();
|
||||
handle = this.handle,
|
||||
bar = this.bar;
|
||||
|
||||
// Protect against no duration and other division issues
|
||||
if (isNaN(progress)) { progress = 0; }
|
||||
|
||||
barProgress = progress;
|
||||
|
||||
// If there is a handle, we need to account for the handle in our calculation for progress bar
|
||||
// so that it doesn't fall short of or extend past the handle.
|
||||
if (handle) {
|
||||
|
||||
var box = this.el,
|
||||
boxWidth = box.offsetWidth,
|
||||
|
||||
handleWidth = handle.el.offsetWidth,
|
||||
|
||||
// The width of the handle in percent of the containing box
|
||||
// In IE, widths may not be ready yet causing NaN
|
||||
handlePercent = (handleWidth) ? handleWidth / boxWidth : 0,
|
||||
|
||||
// Get the adjusted size of the box, considering that the handle's center never touches the left or right side.
|
||||
// There is a margin of half the handle's width on both sides.
|
||||
boxAdjustedPercent = 1 - handlePercent;
|
||||
|
||||
// Adjust the progress that we'll use to set widths to the new adjusted box width
|
||||
adjustedProgress = progress * boxAdjustedPercent,
|
||||
|
||||
// The bar does reach the left side, so we need to account for this in the bar's width
|
||||
barProgress = adjustedProgress + (handlePercent / 2);
|
||||
|
||||
// Move the handle from the left based on the adjected progress
|
||||
handle.el.style.left = _V_.round(adjustedProgress * 100, 2) + "%";
|
||||
}
|
||||
|
||||
// Set the new bar width
|
||||
bar.el.style.width = _V_.round(barProgress * 100, 2) + "%";
|
||||
},
|
||||
|
||||
calculateDistance: function(event){
|
||||
var box = this.el,
|
||||
boxX = _V_.findPosX(box),
|
||||
boxW = box.offsetWidth,
|
||||
handle = this.handle;
|
||||
|
||||
if (handle) {
|
||||
var handleW = handle.el.offsetWidth;
|
||||
|
||||
// Adjusted X and Width, so handle doesn't go outside the bar
|
||||
boxX = boxX + (handleW / 2);
|
||||
boxW = boxW - handleW;
|
||||
}
|
||||
|
||||
// Percent that the click is through the adjusted area
|
||||
return Math.max(0, Math.min(1, (event.pageX - boxX) / boxW));
|
||||
},
|
||||
|
||||
onFocus: function(event){
|
||||
_V_.on(document, "keyup", _V_.proxy(this, this.onKeyPress));
|
||||
},
|
||||
|
||||
onKeyPress: function(event){
|
||||
if (event.which == 37) { // Left Arrow
|
||||
event.preventDefault();
|
||||
this.stepBack();
|
||||
} else if (event.which == 39) { // Right Arrow
|
||||
event.preventDefault();
|
||||
this.stepForward();
|
||||
}
|
||||
},
|
||||
|
||||
onBlur: function(event){
|
||||
_V_.off(document, "keyup", _V_.proxy(this, this.onKeyPress));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Progress
|
||||
================================================================================ */
|
||||
|
||||
// Progress Control: Seek, Load Progress, and Play Progress
|
||||
_V_.ProgressControl = _V_.Component.extend({
|
||||
|
||||
options: {
|
||||
components: {
|
||||
"seekBar": {}
|
||||
}
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-progress-control vjs-control"
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Seek Bar and holder for the progress bars
|
||||
_V_.SeekBar = _V_.Slider.extend({
|
||||
|
||||
options: {
|
||||
components: {
|
||||
"loadProgressBar": {},
|
||||
|
||||
// Set property names to bar and handle to match with the parent Slider class is looking for
|
||||
"bar": { componentClass: "PlayProgressBar" },
|
||||
"handle": { componentClass: "SeekHandle" }
|
||||
}
|
||||
},
|
||||
|
||||
playerEvent: "timeupdate",
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-progress-holder"
|
||||
});
|
||||
},
|
||||
|
||||
getPercent: function(){
|
||||
return this.player.currentTime() / this.player.duration();
|
||||
},
|
||||
|
||||
onMouseDown: function(event){
|
||||
this._super(event);
|
||||
|
||||
this.player.scrubbing = true;
|
||||
|
||||
this.videoWasPlaying = !this.player.paused();
|
||||
this.player.pause();
|
||||
},
|
||||
|
||||
onMouseMove: function(event){
|
||||
var newTime = this.calculateDistance(event) * this.player.duration();
|
||||
|
||||
// Don't let video end while scrubbing.
|
||||
if (newTime == this.player.duration()) { newTime = newTime - 0.1; }
|
||||
|
||||
// Set new time (tell player to seek to new time)
|
||||
this.player.currentTime(newTime);
|
||||
},
|
||||
|
||||
onMouseUp: function(event){
|
||||
this._super(event);
|
||||
|
||||
this.player.scrubbing = false;
|
||||
if (this.videoWasPlaying) {
|
||||
this.player.play();
|
||||
}
|
||||
},
|
||||
|
||||
stepForward: function(){
|
||||
this.player.currentTime(this.player.currentTime() + 1);
|
||||
},
|
||||
|
||||
stepBack: function(){
|
||||
this.player.currentTime(this.player.currentTime() - 1);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Load Progress Bar
|
||||
_V_.LoadProgressBar = _V_.Component.extend({
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
player.on("progress", _V_.proxy(this, this.update));
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-load-progress",
|
||||
innerHTML: '<span class="vjs-control-text">Loaded: 0%</span>'
|
||||
});
|
||||
},
|
||||
|
||||
update: function(){
|
||||
if (this.el.style) { this.el.style.width = _V_.round(this.player.bufferedPercent() * 100, 2) + "%"; }
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Play Progress Bar
|
||||
_V_.PlayProgressBar = _V_.Component.extend({
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-play-progress",
|
||||
innerHTML: '<span class="vjs-control-text">Progress: 0%</span>'
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Seek Handle
|
||||
// SeekBar Behavior includes play progress bar, and seek handle
|
||||
// Needed so it can determine seek position based on handle position/size
|
||||
_V_.SeekHandle = _V_.Component.extend({
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-seek-handle",
|
||||
innerHTML: '<span class="vjs-control-text">00:00</span>'
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* Volume Scrubber
|
||||
================================================================================ */
|
||||
// Progress Control: Seek, Load Progress, and Play Progress
|
||||
_V_.VolumeControl = _V_.Component.extend({
|
||||
|
||||
options: {
|
||||
components: {
|
||||
"volumeBar": {}
|
||||
}
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-volume-control vjs-control"
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
_V_.VolumeBar = _V_.Slider.extend({
|
||||
|
||||
options: {
|
||||
components: {
|
||||
"bar": { componentClass: "VolumeLevel" },
|
||||
"handle": { componentClass: "VolumeHandle" }
|
||||
}
|
||||
},
|
||||
|
||||
playerEvent: "volumechange",
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-volume-bar"
|
||||
});
|
||||
},
|
||||
|
||||
onMouseMove: function(event) {
|
||||
this.player.volume(this.calculateDistance(event));
|
||||
},
|
||||
|
||||
getPercent: function(){
|
||||
return this.player.volume();
|
||||
},
|
||||
|
||||
stepForward: function(){
|
||||
this.player.volume(this.player.volume() + 0.1);
|
||||
},
|
||||
|
||||
stepBack: function(){
|
||||
this.player.volume(this.player.volume() - 0.1);
|
||||
}
|
||||
});
|
||||
|
||||
_V_.VolumeLevel = _V_.Component.extend({
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-volume-level",
|
||||
innerHTML: '<span class="vjs-control-text"></span>'
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
_V_.VolumeHandle = _V_.Component.extend({
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-volume-handle",
|
||||
innerHTML: '<span class="vjs-control-text"></span>'
|
||||
// tabindex: 0,
|
||||
// role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
_V_.MuteToggle = _V_.Button.extend({
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
player.on("volumechange", _V_.proxy(this, this.update));
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
return this._super("div", {
|
||||
className: "vjs-mute-control vjs-control",
|
||||
innerHTML: '<div><span class="vjs-control-text">Mute</span></div>'
|
||||
});
|
||||
},
|
||||
|
||||
onClick: function(event){
|
||||
this.player.muted( this.player.muted() ? false : true );
|
||||
},
|
||||
|
||||
update: function(event){
|
||||
var vol = this.player.volume(),
|
||||
level = 3;
|
||||
|
||||
if (vol == 0 || this.player.muted()) {
|
||||
level = 0;
|
||||
} else if (vol < 0.33) {
|
||||
level = 1;
|
||||
} else if (vol < 0.67) {
|
||||
level = 2;
|
||||
}
|
||||
|
||||
/* TODO improve muted icon classes */
|
||||
_V_.each.call(this, [0,1,2,3], function(i){
|
||||
_V_.removeClass(this.el, "vjs-vol-"+i);
|
||||
});
|
||||
_V_.addClass(this.el, "vjs-vol-"+level);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* Poster Image
|
||||
================================================================================ */
|
||||
_V_.PosterImage = _V_.Button.extend({
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
if (!this.player.options.poster) {
|
||||
this.hide();
|
||||
}
|
||||
|
||||
player.on("play", _V_.proxy(this, this.hide));
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
return _V_.createElement("img", {
|
||||
className: "vjs-poster",
|
||||
src: this.player.options.poster,
|
||||
|
||||
// Don't want poster to be tabbable.
|
||||
tabIndex: -1
|
||||
});
|
||||
},
|
||||
|
||||
onClick: function(){
|
||||
this.player.play();
|
||||
}
|
||||
});
|
||||
|
||||
/* Menu
|
||||
================================================================================ */
|
||||
// The base for text track and settings menu buttons.
|
||||
_V_.Menu = _V_.Component.extend({
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
},
|
||||
|
||||
addItem: function(component){
|
||||
this.addComponent(component);
|
||||
component.on("click", this.proxy(function(){
|
||||
this.unlockShowing();
|
||||
}));
|
||||
},
|
||||
|
||||
createElement: function(){
|
||||
return this._super("ul", {
|
||||
className: "vjs-menu"
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
_V_.MenuItem = _V_.Button.extend({
|
||||
|
||||
init: function(player, options){
|
||||
this._super(player, options);
|
||||
|
||||
if (options.selected) {
|
||||
this.addClass("vjs-selected");
|
||||
}
|
||||
},
|
||||
|
||||
createElement: function(type, attrs){
|
||||
return this._super("li", _V_.merge({
|
||||
className: "vjs-menu-item",
|
||||
innerHTML: this.options.label
|
||||
}, attrs));
|
||||
},
|
||||
|
||||
onClick: function(){
|
||||
this.selected(true);
|
||||
},
|
||||
|
||||
selected: function(selected){
|
||||
if (selected) {
|
||||
this.addClass("vjs-selected");
|
||||
} else {
|
||||
this.removeClass("vjs-selected")
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user