sproutcore 1.8.2.1 → 1.9.0

data/lib/frameworks/sproutcore/frameworks/foundation/tests/views/text_field/methods.js

@@ -5,7 +5,7 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-/*global module test htmlbody ok equals same stop start Q$ */
+/*globals module, test, htmlbody, ok, equals, same, stop, start, Q$ */
 
 
 // note: need to test interaction with Validators here
@@ -35,16 +35,16 @@ module("SC.TextFieldView",{
     });
     pane.append(); // make sure there is a layer...
     SC.RunLoop.end();
-    
+
     view  = pane.childViews[0];
     view1 = pane.childViews[1];
     view2 = pane.childViews[2];
   },
-  
+
   teardown: function() {
       pane.remove();
       pane = view = null ;
-    }    
+    }
 });
 
 test("renders an text field input tag with appropriate attributes", function() {
@@ -57,7 +57,7 @@ test("renders an text field input tag with appropriate attributes", function() {
   equals(q.attr('name'), view.get('layerId'), 'should have name as view_layerid');
 });
 
-test("renders an text field with a custom layerId with correct id and name html attributes", function() {  
+test("renders an text field with a custom layerId with correct id and name html attributes", function() {
   equals(view2.$().attr('id'), 'fieldWithCustomId', 'label html element should have the custom id');
   equals(view2.$input().attr('name'), 'fieldWithCustomId', 'input html element should have the custom name');
 });
@@ -65,7 +65,7 @@ test("renders an text field with a custom layerId with correct id and name html
 test("isEnabled=NO should add disabled class", function() {
   SC.RunLoop.begin();
   view.set('isEnabled', NO);
-  SC.RunLoop.end();  
+  SC.RunLoop.end();
   ok(view.$().hasClass('disabled'), 'should have disabled class');
 });
 
@@ -73,7 +73,7 @@ test("isEnabled=NO isEditable=NO should add disabled attribute", function() {
   SC.RunLoop.begin();
   view.set('isEnabled', NO);
   view.set('isEditable', NO);
-  SC.RunLoop.end();  
+  SC.RunLoop.end();
   ok(view.$input().attr('disabled'), 'should have disabled attribute');
   ok(!view.$input().attr('readOnly'), 'should not have readOnly attribute');
 });
@@ -82,7 +82,7 @@ test("isEnabled=NO isEditable=YES should add disabled attribute", function() {
   SC.RunLoop.begin();
   view.set('isEnabled', NO);
   view.set('isEditable', YES);
-  SC.RunLoop.end();  
+  SC.RunLoop.end();
   ok(view.$input().attr('disabled'), 'should have disabled attribute');
   ok(!view.$input().attr('readOnly'), 'should not have readOnly attribute');
 });
@@ -91,7 +91,7 @@ test("isEnabled=YES isEditable=NO should add readOnly attribute", function() {
   SC.RunLoop.begin();
   view.set('isEnabled', YES);
   view.set('isEditable', NO);
-  SC.RunLoop.end();  
+  SC.RunLoop.end();
   ok(!view.$input().attr('disabled'), 'should not have disabled attribute');
   ok(view.$input().attr('readOnly'), 'should have readOnly attribute');
 });
@@ -100,7 +100,7 @@ test("isEnabled=YES isEditable=YES should not add disable or readOnly attribute"
   SC.RunLoop.begin();
   view.set('isEnabled', YES);
   view.set('isEditable', YES);
-  SC.RunLoop.end();  
+  SC.RunLoop.end();
   ok(!view.$input().attr('disabled'), 'should not have disabled attribute');
   ok(!view.$input().attr('readOnly'), 'should not have readOnly attribute');
 });
@@ -153,11 +153,95 @@ test("autoCorrect=null should not add autocorrect", function() {
   ok(!view.$input().attr('autocorrect'), 'should not have an autocorrect attribute set');
 });
 
+/**
+ SC.TextFieldView was extended to make use of interpretKeyEvents, which
+ allows easy actions to be implemented based off of several key "keys".  This
+ test checks that the expected actions are being captured.
+ */
+test("interpretKeyEvents should allow key command methods to be implemented.", function() {
+  var evt,
+    layer,
+    cancelFlag = NO,
+    deleteBackwardFlag = NO,
+    deleteForwardFlag = NO,
+    insertNewlineFlag = NO,
+    insertTabFlag = NO,
+    moveLeftFlag = NO,
+    moveRightFlag = NO,
+    moveUpFlag = NO,
+    moveDownFlag = NO,
+    moveToBeginningOfDocumentFlag = NO,
+    moveToEndOfDocumentFlag = NO,
+    pageDownFlag = NO,
+    pageUpFlag = NO;
+
+  view1.cancel = function() { cancelFlag = YES; return YES; };
+  view1.deleteBackward = function() { deleteBackwardFlag = YES; return YES; };
+  view1.deleteForward = function() { deleteForwardFlag = YES; return YES; };
+  view1.insertNewline = function() { insertNewlineFlag = YES; return YES; };
+  view1.insertTab = function() { insertTabFlag = YES; return YES; };
+  view1.moveLeft = function() { moveLeftFlag = YES; return YES; };
+  view1.moveRight = function() { moveRightFlag = YES; return YES; };
+  view1.moveUp = function() { moveUpFlag = YES; return YES; };
+  view1.moveDown = function() { moveDownFlag = YES; return YES; };
+  view1.moveToBeginningOfDocument = function() { moveToBeginningOfDocumentFlag = YES; return YES; };
+  view1.moveToEndOfDocument = function() { moveToEndOfDocumentFlag = YES; return YES; };
+  view1.pageUp = function() { pageUpFlag = YES; return YES; };
+  view1.pageDown = function() { pageDownFlag = YES; return YES; };
+
+  SC.RunLoop.begin();
+  layer = view1.get('layer');
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_BACKSPACE, keyCode: SC.Event.KEY_BACKSPACE });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_TAB, keyCode: SC.Event.KEY_TAB });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_RETURN, keyCode: SC.Event.KEY_RETURN });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_ESC, keyCode: SC.Event.KEY_ESC });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_LEFT, keyCode: SC.Event.KEY_LEFT });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_UP, keyCode: SC.Event.KEY_UP });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_DOWN, keyCode: SC.Event.KEY_DOWN });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_RIGHT, keyCode: SC.Event.KEY_RIGHT });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_DELETE, keyCode: SC.Event.KEY_DELETE });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_HOME, keyCode: SC.Event.KEY_HOME });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_END, keyCode: SC.Event.KEY_END });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_PAGEUP, keyCode: SC.Event.KEY_PAGEUP });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_PAGEDOWN, keyCode: SC.Event.KEY_PAGEDOWN });
+  view1.keyDown(evt);
+  evt = SC.Event.simulateEvent(layer, 'keydown', { which: SC.Event.KEY_INSERT, keyCode: SC.Event.KEY_INSERT });
+  view1.keyDown(evt);
+  SC.RunLoop.end();
+
+  // Test.
+  ok(deleteBackwardFlag, 'deleteBackward should have been triggered.');
+  ok(insertTabFlag, 'insertTab should have been triggered.');
+  ok(insertNewlineFlag, 'insertNewline should have been triggered.');
+  ok(cancelFlag, 'cancel should have been triggered.');
+  ok(moveLeftFlag, 'moveLeft should have been triggered.');
+  ok(moveUpFlag, 'moveUp should have been triggered.');
+  ok(moveDownFlag, 'moveDown should have been triggered.');
+  ok(moveRightFlag, 'moveRight should have been triggered.');
+  ok(deleteForwardFlag, 'deleteForward should have been triggered.');
+  ok(moveToBeginningOfDocumentFlag, 'moveToBeginningOfDocument should have been triggered.');
+  ok(moveToEndOfDocumentFlag, 'moveToEndOfDocument should have been triggered.');
+  ok(pageUpFlag, 'pageUp should have been triggered.');
+  ok(pageDownFlag, 'pageDown should have been triggered.');
+});
+
 // test("isEnabled=NO should add disabled attr to input", function() {
 //   SC.RunLoop.begin();
 //   view1.set('isEnabled', NO);
-//   SC.RunLoop.end();  
-//   ok(view1.$input().attr('disabled'), 'should have disabled attr');  
+//   SC.RunLoop.end();
+//   ok(view1.$input().attr('disabled'), 'should have disabled attr');
 //   view1.set('isEditing',YES);
 //   ok(view1.get('value') === 'SproutCore', 'value cannot be changed');
 //   });

data/lib/frameworks/sproutcore/frameworks/foundation/tests/views/text_field/ui.js

@@ -590,6 +590,44 @@ test("Adding both left and right accessory views changes style -- using design()
   ok(!paddingElement.style.left, 'after removing the left accessory view the padding element should have no left style');
 });
 
+test("Accessory views should only be instantiated once", function() {  
+  var view = pane.view('with value');
+  
+  // Test the left accessory view
+  SC.RunLoop.begin();
+  var leftAccessoryViewInitCount = 0;
+  var leftAccessoryView = SC.View.design({
+   layout:  { top:1, left:2, width:16, height:16 },
+   init: function() {
+     sc_super();
+     leftAccessoryViewInitCount++;
+   }
+  });
+  view.set('leftAccessoryView', leftAccessoryView);
+  SC.RunLoop.end();
+  
+  // Check it
+  equals(leftAccessoryViewInitCount, 1, 'the left accessory view should only be initialized once');
+  
+  // Reset to null so it isn't created a second time when rightAccessoryView is set
+  view.set('leftAccessoryView', null);
+  
+  // Test the right accessory view
+  SC.RunLoop.begin();
+  var rightAccessoryViewInitCount = 0;
+  var rightAccessoryView = SC.View.design({
+   layout:  { top:1, right:3, width:17, height:16 },
+    init: function() {
+      sc_super();
+      rightAccessoryViewInitCount++;
+    }
+  });
+  view.set('rightAccessoryView', rightAccessoryView);
+  SC.RunLoop.end();
+  
+  // Check it
+  equals(rightAccessoryViewInitCount, 1, 'the right accessory view should only be initialized once');
+});
 
 
 // ..........................................................

data/lib/frameworks/sproutcore/frameworks/foundation/views/text_field.js

@@ -92,7 +92,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   hint: '',
 
   /**
-    The hint to display while the field is not active.
+    The type attribute of the input.
 
     @type String
     @default "text"
@@ -114,7 +114,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   isBrowserFocusable: YES,
 
   /**
-    Whether the browser should automatically correct the input. 
+    Whether the browser should automatically correct the input.
 
     When `autoCorrect` is set to `null`, the browser will use
     the system defaults.
@@ -806,28 +806,19 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         position, accessoryView, frames, width, layout, offset, frame;
     for (i = 0;  i < numberOfAccessoryViewPositions;  i++) {
       position = accessoryViewPositions[i];
-      accessoryView = this.get(position + 'AccessoryView');
-      if (accessoryView) {
-        // need acessoryView as an instance, not class...
-        if (accessoryView.isClass) {
-          accessoryView = accessoryView.create({
-            layoutView: this
-          });
-        }
-        // sanity check
-        if (accessoryView.get) {
-          frame = accessoryView.get('frame');
-          if (frame) {
-            width = frame.width;
-            if (width) {
-              // Also account for the accessory view's inset.
-              layout = accessoryView.get('layout');
-              if (layout) {
-                offset = layout[position];
-                width += offset;
-              }
-              widths[position] = width;
+      accessoryView = this['_' + position + 'AccessoryView'];
+      if (accessoryView && accessoryView.isObservable) {
+        frame = accessoryView.get('frame');
+        if (frame) {
+          width = frame.width;
+          if (width) {
+            // Also account for the accessory view's inset.
+            layout = accessoryView.get('layout');
+            if (layout) {
+              offset = layout[position];
+              width += offset;
             }
+            widths[position] = width;
           }
         }
       }
@@ -913,7 +904,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // our key/mouse down/up handlers (such as the user choosing Select All
     // from a menu).
     SC.Event.add(input, 'select', this, this._textField_selectionDidChange);
-    
+
     // handle a "paste" from app menu and context menu
     SC.Event.add(input, 'input', this, this._textField_inputDidChange);
   },
@@ -1008,11 +999,11 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
     this.updateHintOnFocus();
   },
-  
+
   /** @private
     Context-menu paste does not trigger fieldValueDidChange normally. To do so, we'll capture the
     input event and avoid duplicating the "fieldValueDidChange" call if it was already issued elsewhere.
-    
+
     I welcome someone else to find a better solution to this problem. However, please make sure that it
     works with pasting via shortcut, context menu and the application menu on *All Browsers*.
    */
@@ -1138,30 +1129,16 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
 
-  /**
-    Simply allow keyDown & keyUp to pass through to the default web browser
-    implementation.
-   */
+  /** @private */
   keyDown: function (evt) {
+    return this.interpretKeyEvents(evt) || NO;
+  },
+
+  /** @private */
+  insertText: function(chr, evt) {
     var which = evt.which,
         keyCode = evt.keyCode,
-        maxLengthReached = false,
-        value, view;
-
-    // Handle return and escape.  this way they can be passed on to the
-    // responder chain.
-    // If the event is triggered by a return while entering IME input,
-    // don't got through this path.
-    if ((which === SC.Event.KEY_RETURN && !evt.isIMEInput) && !this.get('isTextArea')) { return NO; }
-    if (which === SC.Event.KEY_ESC) { return NO; }
-
-    // handle tab key
-    if ((which === SC.Event.KEY_TAB || keyCode === SC.Event.KEY_TAB) && this.get('defaultTabbingEnabled')) {
-      view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
-      if (view) view.becomeFirstResponder();
-      else evt.allowDefault();
-      return YES ; // handled
-    }
+        maxLengthReached = false;
 
     // maxlength for textareas
     if (!SC.platform.input.maxlength && this.get('isTextArea')) {
@@ -1185,7 +1162,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
     if (this.get('applyImmediately')) {
       // This has gone back and forth several times between invokeLater and setTimeout.
-      // Now we're back to invokeLater, please read the code comment above 
+      // Now we're back to invokeLater, please read the code comment above
       // this._textField_inputDidChange before changing it again.
       this._fieldValueDidChangeTimer = this.invokeLater(this.fieldValueDidChange, 10);
     }
@@ -1193,6 +1170,17 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     return YES;
   },
 
+  /** @private */
+  insertTab: function(evt) {
+    // Don't handle if default tabbing hasn't been enabled.
+    if (!this.get('defaultTabbingEnabled')) return NO;
+    // Otherwise, handle.
+    var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
+    if (view) view.becomeFirstResponder();
+    else evt.allowDefault();
+    return YES ; // handled
+  },
+
   keyUp: function (evt) {
     if (SC.browser.isMozilla &&
         evt.keyCode === SC.Event.KEY_RETURN) { this.fieldValueDidChange(); }
@@ -1259,7 +1247,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   },
 
   /** @private
-    Overridden from SC.FieldView. Provides correct tag name based on the 
+    Overridden from SC.FieldView. Provides correct tag name based on the
     `isTextArea` property.
    */
   _inputElementTagName: function () {
@@ -1269,7 +1257,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       return 'input';
     }
   },
-  
+
   /** @private
     This observer makes sure to hide the hint when a value is entered, or
     show it if it becomes empty.

data/lib/frameworks/sproutcore/frameworks/jquery/jquery-buffer.js

@@ -361,8 +361,12 @@ jQuery.Buffer = function() {
 
   Buffer.prototype.removeClass = function(value) {
     var context = this.bufferedCommand("flushClassNames");
-    if (!context.classNames) context.classNames = this._hashFromClassNames(this._el.className);
-    context.classNames[value] = false;
+    if (value === undefined) {
+      context.classNames = {};
+    } else {
+      if (!context.classNames) context.classNames = this._hashFromClassNames(this._el.className);
+      context.classNames[value] = false;
+    }
   };
 
   Buffer.prototype.resetClassNames = function(value) {

data/lib/frameworks/sproutcore/frameworks/media/media_capabilities.js

@@ -0,0 +1,211 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2012 Michael Krotscheck and contributors.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+ * @class
+ * 
+ * An easy-to-reference list of media capabilities which the current running
+ * browser supports such as HTML5 and Plugin detection. It is modeled after
+ * Flash Player's browser capabilities class, with all the non-media related
+ * properties removed. Rather than performing specific browser checks, we
+ * instead test by creating some basic DOM elements. It's both more reliable and
+ * easier to maintain than browser version checks.
+ * 
+ * To see whether your target browser will support what you're trying to do,
+ * check http://caniuse.com/
+ * 
+ * @see http://caniuse.com/
+ * @since SproutCore 1.8.1
+ * @author Michael Krotscheck
+ */
+SC.mediaCapabilities = SC.Object.create({});
+
+/**
+ * Automatic detection of various browser media capabilities.
+ */
+(function() {
+  /**
+   * Specifies whether the browser supports the HTML5 <audio> tag.
+   * 
+   * @name SC.mediaCapabilities.isHTML5AudioSupported
+   * @type Boolean
+   */
+  SC.mediaCapabilities.isHTML5AudioSupported = NO;
+  try {
+    // Firefox 3.6 doesn't support the W3C API. Disable support.
+    if(SC.browser.isMozilla && SC.browser.compare(SC.browser.mozilla, "3.6") <= 0) {
+      throw new Error('Browser not supported');
+    }
+    
+    var doc = document.createElement('audio');
+    isAudioSupported = !!doc.canPlayType;
+    delete doc;
+    SC.mediaCapabilities.isHTML5AudioSupported = YES;
+    
+  } catch(e) {
+  }
+  
+  /**
+   * Specifies whether the browser supports the HTML5 <video> tag.
+   * 
+   * @name SC.mediaCapabilities.isHTML5AudioSupported
+   * @type Boolean
+   */
+  SC.mediaCapabilities.isHTML5VideoSupported = NO;
+  try {
+    // Firefox 3.6 doesn't support the W3C API. Disable support.
+    if(SC.browser.isMozilla && SC.browser.compare(SC.browser.mozilla, "3.6") <= 0) {
+      throw new Error('Browser not supported');
+    }
+    
+    var doc = document.createElement('video');
+    isVideoSupported = !!doc.canPlayType;
+    delete doc;
+    SC.mediaCapabilities.isHTML5VideoSupported = YES;
+  } catch(e) {
+  }
+  
+  /**
+   * Specifies whether the browser supports the Adobe Flash plugin.
+   * 
+   * @name SC.mediaCapabilities.isHTML5AudioSupported
+   * @type Boolean
+   */
+  SC.mediaCapabilities.isFlashSupported = NO;
+  // Non-IE detection
+  if(navigator.plugins) {
+    for( var i = 0; i < navigator.plugins.length; i++) {
+      if(navigator.plugins[i].name.indexOf("Shockwave Flash") >= 0) {
+        SC.mediaCapabilities.isFlashSupported = YES;
+      }
+    }
+  }
+  // IE ActiveX detection
+  if(window.ActiveXObject) {
+    try {
+      var control = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
+      delete control;
+      SC.mediaCapabilities.isFlashSupported = YES;
+    } catch(e) {
+      // Do nothing- The ActiveX object isn't available.
+    }
+  }
+  
+  /**
+   * Specifies whether the browser supports quicktime media playback.
+   * 
+   * @type Boolean
+   */
+  SC.mediaCapabilities.isQuicktimeSupported = NO;
+  
+  // Non-IE detection
+  if(navigator.plugins) {
+    for( var i = 0; i < navigator.plugins.length; i++) {
+      if(navigator.plugins[i].name.indexOf("QuickTime") >= 0) {
+        SC.mediaCapabilities.isQuicktimeSupported = YES;
+      }
+    }
+  }
+  // IE ActiveX detection
+  if(window.ActiveXObject) {
+    var control = null;
+    try {
+      control = new ActiveXObject('QuickTime.QuickTime');
+      delete control;
+      SC.mediaCapabilities.isQuicktimeSupported = YES;
+    } catch(e) {
+      // Do nothing- the ActiveX object isn't available.
+    }
+    
+    try {
+      // This generates a user prompt in Internet Explorer 7
+      control = new ActiveXObject('QuickTimeCheckObject.QuickTimeCheck');
+      delete control;
+      SC.mediaCapabilities.isQuicktimeSupported = YES;
+    } catch(e) {
+      // Do nothing- The ActiveX object isn't available.
+    }
+  }
+  
+  /**
+   * Specifies whether the browser supports the HTML5 getUserMedia/Stream API.
+   * 
+   * NOTE: As of February 2012, this feature is still in Draft status and is
+   * likely to change frequently. It's included here for the sake of
+   * completeness, however concrete implementations don't yet exist.
+   * 
+   * @name SC.mediaCapabilities.isHTML5StreamApiSupported
+   * @type Boolean
+   */
+  SC.mediaCapabilities.isHTML5StreamApiSupported = !!navigator.getUserMedia;
+  
+  /**
+   * Specifies whether the browser supports audio recording via the HTML5 stream
+   * API or the Adobe Flash plugin.
+   * 
+   * @name SC.mediaCapabilities.hasMicrophone
+   * @type Boolean
+   */
+  SC.mediaCapabilities.hasMicrophone = SC.mediaCapabilities.isHTML5StreamApiSupported || SC.mediaCapabilities.isFlashSupported;
+  
+  /**
+   * Specifies whether the browser supports video recording via the HTML5 stream
+   * API or the Adobe Flash Plugin.
+   * 
+   * @name SC.mediaCapabilities.hasMicrophone
+   * @type Boolean
+   */
+  SC.mediaCapabilities.hasVideoCamera = SC.mediaCapabilities.isHTML5StreamApiSupported || SC.mediaCapabilities.isFlashSupported;
+  
+  /**
+   * Specifies whether the browser has audio playback capabilities.
+   * 
+   * @name SC.mediaCapabilities.hasAudioPlayback
+   * @type Boolean
+   */
+  SC.mediaCapabilities.hasAudioPlayback = SC.mediaCapabilities.isHTML5AudioSupported || SC.mediaCapabilities.isQuicktimeSupported || SC.mediaCapabilities.isFlashSupported;
+  
+  /**
+   * Specifies whether the browser has video playback capabilities.
+   * 
+   * @name SC.mediaCapabilities.hasVideoPlayback
+   * @type Boolean
+   */
+  SC.mediaCapabilities.hasVideoPlayback = SC.mediaCapabilities.isHTML5VideoSupported || SC.mediaCapabilities.isQuicktimeSupported || SC.mediaCapabilities.isFlashSupported;
+  
+  /**
+   * Specifies whether the browser supports Ogg Vorbis.
+   * 
+   * @name SC.mediaCapabilities.isOggSupported
+   * @type Boolean
+   */
+  SC.mediaCapabilities.isOggSupported = SC.mediaCapabilities.hasVideoPlayback && (SC.browser.isMozilla || SC.browser.isChrome || SC.browser.isOpera);
+  
+  /**
+   * Specifies whether the browser supports the WebM/VP8 Video format.
+   * 
+   * @name SC.mediaCapabilities.isWebMSupported
+   * @type Boolean
+   */
+  SC.mediaCapabilities.isWebMSupported = SC.mediaCapabilities.hasVideoPlayback && (SC.browser.isMozilla || SC.browser.isChrome || SC.browser.isOpera);
+  
+  /**
+   * Specifies whether the browser supports the Adobe FLV compression format.
+   * 
+   * @name isFLVSupported
+   * @type Boolean
+   */
+  SC.mediaCapabilities.isFLVSupported = SC.mediaCapabilities.isFlashSupported;
+  
+  /**
+   * Specifies whether the browser supports the MPEG-4/H.264 Video format
+   * 
+   * @name isMP4Supported
+   * @type Boolean
+   */
+  SC.mediaCapabilities.isMP4Supported = SC.mediaCapabilities.hasVideoPlayback && (SC.browser.isIE || SC.browser.isChrome || SC.browser.isSafari);
+  
+})();