Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Removed merge file.

  • Loading branch information...
commit c189332ca3ee2ccef9869042cd93b715a2d11171 1 parent 11a9e88
@heff heff authored
Showing with 0 additions and 850 deletions.
  1. +0 −850 src/controls.js.orig
View
850 src/controls.js.orig
@@ -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")
- }
- }
-
-});
Please sign in to comment.
Something went wrong with that request. Please try again.