Example of how JetPack could "extend" the suggested Avatar UI i'm working on (see #6290)

JetPack.BP.Avatar.patch

diff --git 3rd-party/buddypress.php 3rd-party/buddypress.php
index 9ae35f3..874ec34 100644
--- 3rd-party/buddypress.php
+++ 3rd-party/buddypress.php
@@ -7,3 +7,94 @@ function blobphoto( $bool ) {
 
 	return $bool;
 }
+
+/**
+ * Example of how JetPack can add its content
+ * in the Suggested Avatar UI for BuddyPress 2.3
+ */
+class Jetpack_BuddyPress {
+
+	public static function start() {
+		$bp = buddypress();
+
+		if ( empty( $bp->jetpack ) ) {
+			$bp->jetpack = new self;
+		}
+
+		return $bp->jetpack;
+	}
+
+	public function __construct() {
+		$this->setup_globals();
+		$this->setup_hooks();
+	}
+
+	public function setup_globals() {
+		$this->version = '0.0.1';
+	}
+
+	public function setup_hooks() {
+		// 1) Register the Jetpack scripts/css needed
+		add_action( 'bp_enqueue_scripts', array( $this, 'register_script' ), 5 );
+
+		// 2) Include the Jetpack script if setting a user avatar
+		add_filter( 'bp_attachment_avatar_script_data', array( $this, 'include_script' ), 10, 1 );
+
+		// 3) Add a Jetpack tab to the BuddyPress Avatar UI
+		add_filter( 'bp_attachments_avatar_nav', array( $this, 'jetpack_nav' ), 10, 1 );
+
+		// 4) Add the needed javascript templates
+		add_action( 'bp_attachments_avatar_main_template', array( $this, 'js_template' ) );
+
+		// Optional add some custom strings
+		add_filter( 'bp_attachments_get_plupload_l10n', array( $this, 'custom_strings' ), 10, 1 );
+	}
+
+	public function register_script() {
+		wp_register_script( 'jetpack-bp-avatar', plugins_url( 'js/jetpack-bp-avatar.js', __FILE__ ), array( 'bp-avatar' ), $this->version, true );
+	}
+
+	public function include_script( $script_data = array() ) {
+		if ( bp_is_user() ) {
+			$script_data['extra_js'][] = 'jetpack-bp-avatar';
+		}
+
+		return $script_data;
+	}
+
+	public function jetpack_nav( $avatar_nav = array() ) {
+		if ( bp_is_user() ) {
+			$avatar_nav['jetpack'] = array(
+				'id' => 'jetpack',
+				'caption' => __( 'JetPack', 'jetpack' ),
+				// After local Uploads, before Camera
+				'order' => 5,
+			);
+		}
+
+		return $avatar_nav;
+	}
+
+	public function js_template() {
+		?>
+		<script id="tmpl-jetpack-avatar" type="text/html">
+			<div><img src="{{data.logo}}" alt="{{data.name}}" style="border:none;box-shadow:none"/></div>
+			<h3>{{data.claim}}</h3>
+			<p><a href="{{data.url}}" title="{{data.name}}" style="color:#FFF"><?php esc_html_e( 'Visit us!', 'jetpack' ) ;?></a></p>
+		</script>
+		<?php
+	}
+
+	public function custom_strings( $strings = array() ) {
+
+		$strings['jetpack'] = array(
+			'name'       => __( 'JetPack', 'jetpack' ),
+			'claim'      => __( 'Your WordPress, Connected.', 'jetpack' ),
+			'url'        => 'http://jetpack.me/',
+			'logo'       => plugins_url( 'images/jetpack-logo.png', dirname( __FILE__ ) ),
+		);
+
+		return $strings;
+	}
+}
+add_action( 'bp_init', array( 'Jetpack_BuddyPress', 'start' ) );
diff --git 3rd-party/js/jetpack-bp-avatar.js 3rd-party/js/jetpack-bp-avatar.js
index e69de29..b1b196d 100644
--- 3rd-party/js/jetpack-bp-avatar.js
+++ 3rd-party/js/jetpack-bp-avatar.js
@@ -0,0 +1,50 @@
+window.bp = window.bp || {};
+
+( function( exports, $ ) {
+
+	// Bail if not set
+	if ( typeof BP_Uploader === 'undefined' ) {
+		return;
+	}
+
+	bp.Models      = bp.Models || {};
+	bp.Collections = bp.Collections || {};
+	bp.Views       = bp.Views || {};
+
+	bp.JetPack = {
+		start: function() {
+			bp.Avatar.nav.on( 'bp-avatar-view:changed', _.bind( this.setView, this ) );
+		},
+
+		setView: function( view ) {
+			if ( 'jetpack' !== view ) {
+				// Stop as this is not JetPack area
+				return;
+			}
+
+			// Create a random model..
+			jetPackView = new bp.Views.JetPackAvatar( { model: new Backbone.Model( 
+				_.pick( BP_Uploader.strings.jetpack, 'name', 'claim', 'url', 'logo' )
+			) } );
+
+			// Add it to Avatar views
+			bp.Avatar.views.add( { id: 'jetpack', view: jetPackView } );
+
+			// Display it
+	        jetPackView.inject( '.bp-avatar' );
+		},
+	};
+
+	// BuddyPress WebCam view
+	bp.Views.JetPackAvatar = bp.View.extend( {
+		tagName: 'div',
+		id: 'bp-jetpack-avatar',
+		template: bp.template( 'jetpack-avatar' ),
+		attributes: {
+			style: 'background:#81a844; margin:1em 0 0; text-align:center; color:#FFF;padding:1em 0 0;overflow:hidden',
+		}
+	} );
+
+	bp.JetPack.start();
+
+})( bp, jQuery );