Changeset 10495

Timestamp:

02/02/2016 07:53:52 PM (9 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.

see #6846 (branch 2.4)

props r-a-y, hnla

Location:

branches/2.4/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)

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

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

branches/2.4/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 {

branches/2.4/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 {

branches/2.4/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 } );
+                }
+            } );
         },
 

branches/2.4/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 );