Changeset 10496

Timestamp:

02/02/2016 07:59:24 PM (10 years ago)

Author:

imath

Message:

Make sure the Avatar UI behaves the right way in Microsoft Edge & Chrome

• Use, if needed, MS Edge specific attribute for the video stream (srcObject).
• Make sure Plupload Uploader is also ready for MS Edge within the wp-admin/profile screen.
• Make sure the "Browse" button works the right way in MS Edge.
• About the Chrome Browser: only load the webcam script if the website is using ssl.

Fixes #6846 (trunk)

props r-a-y, hnla

Location:

trunk/src/bp-core

Files:

• bp-core-avatars.php (modified) (2 diffs)
• css/avatar-rtl.css (modified) (1 diff)
• css/avatar.css (modified) (1 diff)
• js/avatar.js (modified) (3 diffs)
• js/webcam.js (modified) (2 diffs)

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

@@ -1937 +1937 @@
  */
 function bp_avatar_use_webcam() {
-        global $is_safari, $is_IE;
+        global $is_safari, $is_IE, $is_chrome;
 
         /**
@@ -1952 +1952 @@
          * @see  http://caniuse.com/#feat=stream
          */
-        if ( $is_safari || $is_IE ) {
+        if ( $is_safari || $is_IE || ( $is_chrome && ! is_ssl() ) ) {
                 return false;
         }

trunk/src/bp-core/css/avatar-rtl.css

@@ -171 +171 @@
 }
 
-.drag-drop-inside p.drag-drop-info {margin-top: 0;}
+.drag-drop-inside p.drag-drop-info {
+        margin-top: 0;
+}
+
+@supports (-ms-accelerator:true) {
+        .drag-drop-inside p.drag-drop-info {
+                display: block;
+        }
+}
 
 #avatar-to-crop {

trunk/src/bp-core/css/avatar.css

@@ -171 +171 @@
 }
 
-.drag-drop-inside p.drag-drop-info {margin-top: 0;}
+.drag-drop-inside p.drag-drop-info {
+        margin-top: 0;
+}
+
+@supports (-ms-accelerator:true) {
+        .drag-drop-inside p.drag-drop-info {
+                display: block;
+        }
+}
 
 #avatar-to-crop {

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

@@ -16 +16 @@
         bp.Avatar = {
                 start: function() {
+                        var self = this;
+
                         /**
                          * Remove the bp-legacy UI
@@ -43 +45 @@
                         /**
                          * In Administration screens we're using Thickbox
-                         * We need to make sure to reset the views if it's closed
+                         * We need to make sure to reset the views if it's closed or opened
                          */
                         $( 'body.wp-admin' ).on( 'tb_unload', '#TB_window', function() {
-                                // Reset to the uploader view
-                                bp.Avatar.nav.trigger( 'bp-avatar-view:changed', 'upload' );
-
-                                // Reset to the uploader nav
-                                _.each( bp.Avatar.navItems.models, function( model ) {
-                                        if ( model.id === 'upload' ) {
-                                                model.set( { active: 1 } );
-                                        } else {
-                                                model.set( { active: 0 } );
-                                        }
-                                } );
+                                self.resetViews();
+                        } );
+
+                        $( 'body.wp-admin' ).on( 'click', '.bp-xprofile-avatar-user-edit', function() {
+                                self.resetViews();
                         } );
                 },
@@ -121 +117 @@
                                         break;
                         }
+                },
+
+                resetViews: function() {
+                        // Reset to the uploader view
+                        this.nav.trigger( 'bp-avatar-view:changed', 'upload' );
+
+                        // Reset to the uploader nav
+                        _.each( this.navItems.models, function( model ) {
+                                if ( model.id === 'upload' ) {
+                                        model.set( { active: 1 } );
+                                } else {
+                                        model.set( { active: 0 } );
+                                }
+                        } );
                 },
 

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

@@ -90 +90 @@
                                 video.src = stream;
                                 video.play();
+                        } else if ( video.srcObject !== undefined ) {
+                                video.srcObject = stream;
                         } else if ( window.URL ) {
                                 video.src = window.URL.createObjectURL( stream );
@@ -213 +215 @@
 
                         if ( navigator.getUserMedia ) {
-                                navigator.getUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCams.noStream );
+                                navigator.getUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCam.noStream );
                         }  else if ( navigator.oGetUserMedia ) {
                                 navigator.oGetUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCam.noStream );