Ticket #5548: 5548.patch

src/bp-core/admin/bp-core-settings.php

@@ -185 +185 @@
 <?php
 }
 
+/**
+ * Allow members to use their device's camera
+ *
+ * @since BuddyPress (2.1.0)
+ *
+ * @uses checked() To display the checked attribute
+ */
+function bp_admin_setting_callback_webcam_avatars() {
+?>
+
+        <input id="bp-enable-webcam-avatars" name="bp-enable-webcam-avatars" type="checkbox" value="1" <?php checked( bp_enable_webcam_avatars( false ) ); ?> />
+        <label for="bp-enable-webcam-avatars"><?php _e( 'Allow members to use it to upload their avatars', 'buddypress' ); ?></label>
+
+<?php
+}
+
 /** Groups Section ************************************************************/
 
 /**

src/bp-core/bp-core-admin.php

@@ -398 +398 @@
                     // Allow avatar uploads
                     add_settings_field( 'bp-disable-avatar-uploads', __( 'Avatar Uploads',   'buddypress' ), 'bp_admin_setting_callback_avatar_uploads',   'buddypress', $avatar_setting );
                     register_setting  ( 'buddypress',         'bp-disable-avatar-uploads',   'intval'                                                                                    );
+
+                    if ( 'bp_xprofile' == $avatar_setting ) {
+                                add_settings_field( 'bp-enable-webcam-avatars', __( 'Member's device camera',   'buddypress' ), 'bp_admin_setting_callback_webcam_avatars',   'buddypress', $avatar_setting );
+                        register_setting  ( 'buddypress',               'bp-enable-webcam-avatars',   'intval'                                                                                          );
+                    }
                 }
         }
 

src/bp-core/bp-core-avatars.php

@@ -677 +677 @@
 }
 
 /**
+ * Handle avatar webcam capture.
+ *
+ * @since BuddyPress (2.1.0)
+ *
+ * @param string $data base64 encoded image.
+ * @param int $item_id.
+ * @return bool True on success, false on failure.
+ */
+function bp_core_avatar_handle_capture( $data = '', $item_id = 0 ) {
+        if ( empty( $data ) || empty( $item_id ) ) {
+                return false;
+        }
+
+        $avatar_dir = bp_core_avatar_upload_path() . '/avatars';
+
+        if( ! file_exists( $avatar_dir ) ) {
+                mkdir( $avatar_dir );
+        }
+
+        $avatar_folder_dir = apply_filters( 'bp_core_avatar_folder_dir', $avatar_dir . '/' . $item_id, $item_id, 'user', 'avatars' );
+        
+        if( ! file_exists( $avatar_folder_dir ) ) {
+                mkdir( $avatar_folder_dir );
+        }
+
+        $original_file = $avatar_folder_dir . '/webcam-capture-' . $item_id . '.png';
+
+        if ( file_put_contents( $original_file, $data ) ) {
+                $avatar_to_crop = str_replace( bp_core_avatar_upload_path(), '', $original_file );
+                
+                // Fake a crop
+                $crop_args = array( 'item_id' => $item_id, 'original_file' => $avatar_to_crop, 'crop_x' => 0, 'crop_y' => 0 );
+
+                return bp_core_avatar_handle_crop( $crop_args );
+        } else {
+                return false;
+        }
+}
+
+/**
  * Crop an uploaded avatar.
  *
  * $args has the following parameters:

src/bp-core/bp-core-cssjs.php

@@ -27 +27 @@
         
         // Array of common scripts
         $scripts = apply_filters( 'bp_core_register_common_scripts', array(
-                'bp-confirm'          => 'confirm',
-                'bp-widget-members'   => 'widget-members',
-                'bp-jquery-query'     => 'jquery-query',
-                'bp-jquery-cookie'    => 'jquery-cookie',
-                'bp-jquery-scroll-to' => 'jquery-scroll-to',
+                'bp-confirm'          => array( 'file' => 'confirm',          'footer' => false ),
+                'bp-widget-members'   => array( 'file' => 'widget-members',   'footer' => false ),
+                'bp-jquery-query'     => array( 'file' => 'jquery-query',     'footer' => false ),
+                'bp-jquery-cookie'    => array( 'file' => 'jquery-cookie',    'footer' => false ),
+                'bp-jquery-scroll-to' => array( 'file' => 'jquery-scroll-to', 'footer' => false ),
+                'bp-webcam-avatar'    => array( 'file' => 'webcam-avatar',    'footer' => true  ),
         ) );
 
         // Register scripts commonly used by BuddyPress themes
-        foreach ( $scripts as $id => $file ) {
-                wp_register_script( $id, $url . $file . $min, array( 'jquery' ), $ver );
+        foreach ( $scripts as $id => $script ) {
+                wp_register_script( $id, $url . $script['file'] . $min, array( 'jquery' ), $ver, $script['footer'] );
         }
 }
 add_action( 'bp_enqueue_scripts', 'bp_core_register_common_scripts', 1 );

src/bp-core/bp-core-options.php

@@ -472 +472 @@
 }
 
 /**
+ * Are members able to use their device's camera ?
+ *
+ * @since BuddyPress (2.1.0)
+ *
+ * @uses bp_get_option() To get the avatar uploads option.
+ *
+ * @param bool $default Optional. Fallback value if not found in the database.
+ *        Default: true.
+ * @return bool True if using device's camera is allowed, otherwise false.
+ */
+function bp_enable_webcam_avatars( $default = false ) {
+        return (bool) apply_filters( 'bp_enable_webcam_avatars', (bool) bp_get_option( 'bp-enable-webcam-avatars', $default ) );
+}
+
+/**
  * Are members able to delete their own accounts?
  *
  * @since BuddyPress (1.6.0)

src/bp-core/js/webcam-avatar.js

@@ +1 @@
+/**
+ * WebCam Avatars
+ */
+( function( $ ) {
+
+        var explain = $( 'body.change-avatar div.profile p').first().html(),
+                video = $( '#bp-webcam-video' ).get(0),
+                canvas = $( '#bp-webcam-canvas' ).get(0),
+                videoStream = null,
+                capture_enable = save_enable = false,
+                capture;
+
+        if ( navigator.getUserMedia || navigator.oGetUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia ) {
+                $( 'body.change-avatar div.profile p').first().html( explain + ' ' + BP_WebCam_Avatar.alternative );
+        }
+
+        $( 'body.change-avatar div.profile').on( 'click', '#bp-webcam', function( event ) {
+                event.preventDefault();
+
+                $( '#bp-webcam-form' ).show();
+                useStream();
+        });
+
+
+        function log( text, mclass ) {
+                $( '#bp-webcam-message' ).html( '<p>' + text + '</p>' );
+                $( '#bp-webcam-message' ).prop( 'class', '' );
+                $( '#bp-webcam-message' ).addClass( mclass );
+        }
+
+        $( '#bp-webcam-capture-btn').on( 'click', function( event ){
+                event.preventDefault();
+
+                if( ! capture_enable ) {
+                        log( BP_WebCam_Avatar.loading, 'info' );
+                        return;
+                } else {
+
+                        if ( $( '#bp-canvas-preview' ).length ) {
+                                $( '#bp-canvas-preview' ).remove();
+                                $( '#bp-webcam-canvas' ).addClass( 'noborder' );
+                        }
+
+                        $( '.bp-webcam-canvas-container input[type="submit"]' ).removeClass( 'hide' );
+                        canvas.width = video.videoWidth * 0.234375;
+                        canvas.height = video.videoHeight * 0.3125;
+                        canvas.getContext( '2d' ).drawImage( video, 80, 0, 480, 480, 0, 0, 150, 150 );
+                        capture = canvas.toDataURL( "image/png" );
+                        save_enable = true;
+                        log( BP_WebCam_Avatar.ready, 'success' );
+                        return;
+                }
+        } );
+
+        $( '#bp-webcam-form' ).on( 'submit', function( event ){
+                
+                $( '#bp-webcam-capture' ).val( capture );
+                if ( ! $('#bp-webcam-capture').val().length ) {
+                        event.preventDefault();
+                        log( BP_WebCam_Avatar.nocapture, 'error' );
+                        return;
+                }
+
+        } );
+        
+        function noStream() {
+                log( BP_WebCam_Avatar.noaccess, 'error' );
+        }
+
+        function stop() {
+                capture_enable = false;
+                save_enable = true;
+                if ( videoStream ) {
+                        if (videoStream.stop) videoStream.stop();
+                        else if (videoStream.msStop) videoStream.msStop();
+                        videoStream.onended = null;
+                        videoStream = null;
+                }
+                if ( video ) {
+                        video.onerror = null;
+                        video.pause();
+                        if (video.mozSrcObject) {
+                                video.mozSrcObject = null;
+                        }                               
+                        video.src = "";
+                }
+        }
+
+        function gotStream(stream) {
+                videoStream = stream;
+
+                log( BP_WebCam_Avatar.loaded, 'success' );
+                
+                video.onerror = function () {
+                        log( BP_WebCam_Avatar.videoerror, 'error' );
+                        if (video) stop();
+                };
+
+                stream.onended = noStream;
+
+                if ( window.webkitURL ) {
+                        video.src = window.webkitURL.createObjectURL( stream );
+                } else if ( video.mozSrcObject !== undefined ) {
+                        video.mozSrcObject = stream;
+                        video.play();
+                } else if ( navigator.mozGetUserMedia ) {
+                        video.src = stream;
+                        video.play();
+                } else if ( window.URL ) {
+                        video.src = window.URL.createObjectURL( stream );
+                } else {
+                        video.src = stream;
+                }
+
+                capture_enable = true;
+        }
+
+        function useStream() {
+                if ( ( typeof window === 'undefined') || ( typeof navigator === 'undefined' ) ) {
+                        log( BP_WebCam_Avatar.errormsg, 'error' );
+                } else if ( ! ( video && canvas ) ) {
+                        log( BP_WebCam_Avatar.errormsg, 'error' );
+                } else {
+                        log( BP_WebCam_Avatar.requesting, 'info' );
+                        if (navigator.getUserMedia) navigator.getUserMedia({video:true}, gotStream, noStream);
+                        else if (navigator.oGetUserMedia) navigator.oGetUserMedia({video:true}, gotStream, noStream);
+                        else if (navigator.mozGetUserMedia) navigator.mozGetUserMedia({video:true}, gotStream, noStream);
+                        else if (navigator.webkitGetUserMedia) navigator.webkitGetUserMedia({video:true}, gotStream, noStream);
+                        else if (navigator.msGetUserMedia) navigator.msGetUserMedia({video:true, audio:false}, gotStream, noStream);
+                }
+        }
+
+} )( jQuery );

src/bp-templates/bp-legacy/css/buddypress.css

@@ -1441 +1441 @@
         margin: 0;
 }
 
+/* WebCam Avatar */
+#buddypress #bp-webcam-form{
+        width:410px;
+        margin:0 auto;
+        overflow: hidden;
+        display: none;
+}
+
+#buddypress #bp-webcam-form .bp-webcam-video-container,
+#buddypress #bp-webcam-form .bp-webcam-canvas-container {
+        position:relative;
+        float:left;
+        width:200px;
+        margin-right:5px;
+}
+
+#buddypress #bp-webcam-form .bp-webcam-video-container input,
+#buddypress #bp-webcam-form .bp-webcam-canvas-container input {
+        display:block;
+        text-align:center;
+        margin:0 auto;
+}
+
+#buddypress #bp-webcam-form .bp-webcam-canvas-container input.hide {
+        display:none;
+}
+
+#buddypress #bp-webcam-form .bp-webcam-video-container #bp-webcam-mask-left, 
+#buddypress #bp-webcam-form .bp-webcam-video-container #bp-webcam-mask-right{
+        position:absolute;
+        background:#FFF;
+        z-index:10000;
+        width:25px;
+        height:150px;
+        top:0;
+}
+
+#buddypress #bp-webcam-form .bp-webcam-video-container #bp-webcam-mask-left{
+        left:0;
+}
+#buddypress #bp-webcam-form .bp-webcam-video-container #bp-webcam-mask-right{
+        left:175px;
+}
+#buddypress #bp-webcam-form .bp-webcam-video-container #bp-webcam-video{
+        height:150px;
+        margin-bottom:15px;
+}
+#buddypress #bp-webcam-form .bp-webcam-canvas-container #bp-webcam-canvas{
+        width:150px;
+        height:150px;
+        border:dashed 4px #eee;
+        display:block;
+        margin:0 auto;
+        margin-bottom:15px;
+}
+
+#buddypress #bp-webcam-form .bp-webcam-canvas-container #bp-webcam-canvas.noborder {
+        border:none;
+}
+
+#buddypress #bp-webcam-form .bp-webcam-canvas-container #bp-canvas-preview{
+        position:absolute;
+        line-height: 150px;
+        top:0px;
+        text-align:center;
+        width:100%;
+}
+
+#buddypress #bp-webcam-form #bp-webcam-message {
+        margin: 0 0 15px;
+}
+
+#buddypress #bp-webcam-form #bp-webcam-message p {
+        padding: 10px 15px;
+}
+
+#buddypress #bp-webcam-form #bp-webcam-message.info p {
+        background-color: #ffd;
+        border: 1px solid #cb2;
+        color: #440;
+}
+
+#buddypress #bp-webcam-form #bp-webcam-message.error p {
+        background-color: #fdc;
+        border: 1px solid #a00;
+        color: #800;
+}
+
+#buddypress #bp-webcam-form #bp-webcam-message.success p {
+        background-color: #efc;
+        border: 1px solid #591;
+        color: #250;
+}
+
 /*--------------------------------------------------------------
 3.11 - Widgets
 --------------------------------------------------------------*/

src/bp-xprofile/bp-xprofile-cssjs.php

@@ -42 +42 @@
         }
 }
 add_action( 'admin_enqueue_scripts', 'xprofile_add_admin_js', 1 );
+
+/**
+ * Enqueue the jQuery libraries for handling webcam avatar uploads
+ *
+ * @since BuddyPress (2.1.0)
+ */
+function bp_xprofile_add_webcam_avatar_js() {
+        if ( ! bp_enable_webcam_avatars() || ! bp_is_user_change_avatar() || 'upload-image' != bp_get_avatar_admin_step() ) {
+                return false;
+        }
+
+        wp_enqueue_script( 'bp-webcam-avatar' );
+        wp_localize_script( 'bp-webcam-avatar', 'BP_WebCam_Avatar', array(
+                'alternative' => __( 'You can also use your <a href="#" id="bp-webcam">device&#39;s camera</a>.', 'buddypress' ),
+                'requesting'  => __( 'Requesting video stream, please authorize this website to access to your camera.', 'buddypress'),
+                'loading'     => __( 'Please wait for the video to load.', 'buddypress' ),
+                'loaded'      => __( 'Video stream loaded. You can use the capture button to display the avatar preview.', 'buddypress' ),
+                'noaccess'    => __( 'You denied this website to access to your camera. Please use the upload form.', 'buddypress' ),
+                'errormsg'    => __( 'Your browser is not supported. Please use the upload form.', 'buddypress' ),
+                'videoerror'  => __( 'Video error. Please use the upload form.', 'buddypress' ),
+                'ready'       => __( 'Avatar ready, use the save button to validate.', 'buddypress' ),
+                'preview'     => __( 'Preview', 'buddypress' ),
+                'nocapture'   => __( 'No avatar was captured, please try again.', 'buddypress' ),
+        ) );
+}
+add_action( 'bp_enqueue_scripts', 'bp_xprofile_add_webcam_avatar_js' );

src/bp-xprofile/bp-xprofile-screens.php

@@ -189 +189 @@
                 }
         }
 
+        $avatar_message = array();
+
+        // Handle the capture of WebCam Avatars
+        if ( ! empty( $_POST['save-webcam-avatar'] ) ) {
+                // Check the nonce
+                check_admin_referer( 'bp_webcam_avatar', '_webcam_avatar_nonce' );
+
+                $webcam_avatar = false;
+
+                if ( ! empty( $_POST['_bp_webcam_capture'] ) ) {
+                        $webcam_avatar = str_replace( array( 'data:image/png;base64,', ' ' ), array( '', '+' ), $_POST['_bp_webcam_capture'] );
+                        $webcam_avatar = base64_decode( $webcam_avatar );
+                }
+
+                if ( ! bp_core_avatar_handle_capture( $webcam_avatar, bp_displayed_user_id() ) ) {
+                        $avatar_message = array( 'error' => __( 'There was a problem saving that avatar, please try again.', 'buddypress' ) );
+                } else {
+                        $avatar_message = array( 'success' => __( 'Your new avatar was uploaded successfully.', 'buddypress' ) );
+                }
+        }
+
         // If the image cropping is done, crop the image and save a full/thumb version
         if ( isset( $_POST['avatar-crop-submit'] ) ) {
 
@@ -205 +226 @@
                 );
 
                 if ( ! bp_core_avatar_handle_crop( $args ) ) {
-                        bp_core_add_message( __( 'There was a problem cropping your avatar.', 'buddypress' ), 'error' );
+                        $avatar_message = array( 'error' => __( 'There was a problem cropping your avatar.', 'buddypress' ) );
                 } else {
+                        $avatar_message = array( 'success' =>  __( 'Your new avatar was uploaded successfully.', 'buddypress' ) );
+                }
+        }
+
+        if ( ! empty( $avatar_message ) ) {
+                if ( ! empty( $avatar_message['success'] ) ) {
                         do_action( 'xprofile_avatar_uploaded' );
-                        bp_core_add_message( __( 'Your new avatar was uploaded successfully.', 'buddypress' ) );
+                        bp_core_add_message( $avatar_message['success'] );
                         bp_core_redirect( bp_displayed_user_domain() );
+                } else {
+                        bp_core_add_message( $avatar_message['error'], 'error' );
                 }
         }
 

src/bp-xprofile/bp-xprofile-template.php

@@ -627 +627 @@
                 return apply_filters( 'bp_get_profile_group_name', $group->name );
         }
 
-function bp_avatar_upload_form() {
-        global $bp;
-
-        if ( !(int) $bp->site_options['bp-disable-avatar-uploads'] )
-                bp_core_avatar_admin( null, bp_loggedin_user_domain() . $bp->profile->slug . '/change-avatar/', bp_loggedin_user_domain() . $bp->profile->slug . '/delete-avatar/' );
-        else
-                _e( 'Avatar uploads are currently disabled. Why not use a <a href="http://gravatar.com" target="_blank">gravatar</a> instead?', 'buddypress' );
-}
-
 function bp_profile_last_updated() {
 
         $last_updated = bp_get_profile_last_updated();
@@ -666 +657 @@
                 return apply_filters( 'bp_get_current_profile_group_id', $profile_group_id ); // admin/profile/edit/[group-id]
         }
 
-function bp_avatar_delete_link() {
-        echo bp_get_avatar_delete_link();
-}
-        function bp_get_avatar_delete_link() {
-                global $bp;
-
-                return apply_filters( 'bp_get_avatar_delete_link', wp_nonce_url( bp_displayed_user_domain() . $bp->profile->slug . '/change-avatar/delete-avatar/', 'bp_delete_avatar_link' ) );
-        }
-
 function bp_edit_profile_button() {
         global $bp;
 
@@ -815 +797 @@
                 // Output the dropdown list
                 return apply_filters( 'bp_profile_settings_visibility_select', $retval, $r, $args );
         }
+
+
+/** Avatars ****************************************************************/
+
+function bp_avatar_upload_form() {
+        global $bp;
+
+        if ( !(int) $bp->site_options['bp-disable-avatar-uploads'] )
+                bp_core_avatar_admin( null, bp_loggedin_user_domain() . $bp->profile->slug . '/change-avatar/', bp_loggedin_user_domain() . $bp->profile->slug . '/delete-avatar/' );
+        else
+                _e( 'Avatar uploads are currently disabled. Why not use a <a href="http://gravatar.com" target="_blank">gravatar</a> instead?', 'buddypress' );
+}
+
+function bp_avatar_delete_link() {
+        echo bp_get_avatar_delete_link();
+}
+        function bp_get_avatar_delete_link() {
+                global $bp;
+
+                return apply_filters( 'bp_get_avatar_delete_link', wp_nonce_url( bp_displayed_user_domain() . $bp->profile->slug . '/change-avatar/delete-avatar/', 'bp_delete_avatar_link' ) );
+        }
+
+function bp_avatar_webcam() {
+        echo bp_get_avatar_webcam();
+}
+add_action( 'bp_after_profile_avatar_upload_content', 'bp_avatar_webcam' );
+
+        function bp_get_avatar_webcam() {
+                if ( ! bp_enable_webcam_avatars() || ! bp_is_user_change_avatar() || 'upload-image' != bp_get_avatar_admin_step() ) {
+                        return false;
+                }
+
+                $output = '<form action="" method="post" id="bp-webcam-form" class="standard-form">' . "\n";
+                $output .= '<div id="bp-webcam-message"></div>' . "\n";
+                $output .= '<div class="bp-webcam-video-container">' . "\n";
+                $output .= '<video id="bp-webcam-video" autoplay="autoplay"></video>' . "\n";
+                $output .= '<div id="bp-webcam-mask-left"></div>' . "\n";
+                $output .= '<div id="bp-webcam-mask-right"></div>' . "\n";
+                $output .= '<input type="button" id="bp-webcam-capture-btn" class="bp-primary-action" value="' . esc_html__( 'Capture', 'buddypress' ) .'"/>' . "\n";
+                $output .= '</div>' . "\n";
+
+                $output .= '<div class="bp-webcam-canvas-container">';
+                $output .= '<canvas id="bp-webcam-canvas"></canvas>';
+                $output .= '<div id="bp-canvas-preview">'. esc_html__( 'Preview', 'buddypress' ) .'</div>';
+                $output .= '<input type="submit" name="save-webcam-avatar" class="bp-primary-action hide" value="' . esc_html__( 'Save', 'buddypress' ) .'"/>' . "\n";
+                $output .= '<input type="hidden" id="bp-webcam-capture" name="_bp_webcam_capture"/>';
+                $output .= wp_nonce_field( 'bp_webcam_avatar', '_webcam_avatar_nonce', true , false );
+                $output .= '</div>';
+                $output .= '</form>';
+                
+                return apply_filters( 'bp_get_avatar_webcam', $output );
+        }