Fix video thumbnail issue

Gruntfile.js

@@ -32,7 +32,7 @@ module.exports = function ( grunt ) {
 			dist: {
 				options: {
 					style: 'expanded',
-					sourcemap: 'none'
+					sourceMap: false
 				},
 				files: {
 					'app/assets/admin/css/admin.css': 'app/assets/admin/css/sass/admin.scss',
@@ -43,7 +43,7 @@ module.exports = function ( grunt ) {
 			minify: {
 				options: {
 					style: 'compressed',
-					sourcemap: 'none'
+					sourceMap: false
 				},
 				files: {
 					'app/assets/admin/css/admin.min.css': 'app/assets/admin/css/sass/admin.scss',

app/assets/css/rtmedia.css

@@ -3109,6 +3109,10 @@ a.rtmedia-upload-media-link {
   padding: 4px 8px;
   border: none;
   background: rgba(0, 0, 0, 0) url("../../../lib/media-element/mejs-controls.png") no-repeat;
+  width: 20px;
+}
+#buddypress .mejs-controls button:hover, #buddypress .mejs-controls button:focus, #buddypress .mejs-controls button:active {
+  background: rgba(0, 0, 0, 0.2) url("../../../lib/media-element/mejs-controls.png") no-repeat;
 }
 #buddypress .mejs-controls .mejs-play > button {
   background-position: 0 0;

app/assets/css/sass/_media-element.scss

@@ -11,6 +11,11 @@
 			padding: 4px 8px;
 			border: none;
 			background: rgba(0, 0, 0, 0) url('../../../lib/media-element/mejs-controls.png') no-repeat;
+			width: 20px;
+
+			&:hover, &:focus, &:active {
+				background: rgba(0, 0, 0, 0.2) url('../../../lib/media-element/mejs-controls.png') no-repeat;
+			}
 		}
 
 		.mejs-play > button {

app/assets/js/rtMedia.activity.js

@@ -0,0 +1,14 @@
+( function() {
+    if( bp && bp.Nouveau && bp.Nouveau.inject ) {
+        callback = bp.Nouveau.inject;
+
+        // Overwrite the inject function and apply mediaelement library player after adding activity.
+        bp.Nouveau.inject = function( selector, content, method ) {
+            callback( selector, content, method );
+
+            if ( 'function' === typeof rtmedia_on_activity_add ) {
+                rtmedia_on_activity_add();
+            }
+        };
+    }
+})();

app/assets/js/rtMedia.backbone.js

@@ -1751,20 +1751,8 @@ jQuery( document ).ready( function( $ ) {
 						objUploadView.uploader.refresh();
 						$( '#rtmedia-whts-new-upload-container > div' ).css( { 'top': '0', 'left': '0' } );
 						$( '#whats-new-form #rtMedia-update-queue-list' ).html( '' );
-						//$("#div-attache-rtmedia").hide();
+
 						apply_rtMagnificPopup( jQuery( '.rtmedia-list-media, .rtmedia-activity-container ul.rtmedia-list, #bp-media-list,.widget-item-listing,.bp-media-sc-list, li.media.album_updated ul,ul.bp-media-list-media, li.activity-item div.activity-content div.activity-inner div.bp_media_content' ) );
-						jQuery( 'ul.activity-list li.rtmedia_update:first-child .wp-audio-shortcode, ul.activity-list li.rtmedia_update:first-child .wp-video-shortcode' ).mediaelementplayer( {
-							// This is required to work with new MediaElement version.
-                                                        classPrefix: 'mejs-',
-                                                        // If the <video width> is not specified, this is the default
-							defaultVideoWidth: 480,
-							// If the <video height> is not specified, this is the default
-							defaultVideoHeight: 270
-							// If set, overrides <video width>
-							//videoWidth: 1,
-							// if set, overrides <video height>
-							//videoHeight: 1
-						} );
 
 						// For BuddyPress New Template hacks
 						jQuery( '.plupload_filelist_content.rtm-plupload-list' ).html('');
@@ -1776,7 +1764,7 @@ jQuery( document ).ready( function( $ ) {
 						rtmedia_add_media_button_post_update.removeAttr( 'disabled' );
 					}
 
-					rtmedia_on_activity_add();
+					// rtmedia_on_activity_add();
 
 					$( '#whats-new-post-in' ).removeAttr( 'disabled' );
 					if ( ! rtmedia_add_media_button_post_update ) {
@@ -2272,14 +2260,11 @@ function rtmedia_reset_video_and_audio(){
 
 
 function rtmedia_on_activity_add(){
-	setTimeout( function() {
-		rtmedia_activity_stream_comment_media();
-
-		rtmedia_reset_video_and_audio();
+	rtmedia_activity_stream_comment_media();
 
-		rtmedia_apply_popup_to_media();
+	rtmedia_reset_video_and_audio();
 
-	}, 1500 );
+	rtmedia_apply_popup_to_media();
 }
 
 

app/main/RTMedia.php

@@ -449,9 +449,7 @@ public function custom_style_for_activity_image_size() {
 			height: 100% !important;
 			}
 
-			.rtmedia-activity-container li.media-type-video div.rtmedia-item-thumbnail .mejs-video,
-			.rtmedia-activity-container li.media-type-video div.rtmedia-item-thumbnail .mejs-video video,
-			.rtmedia-activity-container li.media-type-video div.rtmedia-item-thumbnail .mejs-video .mejs-overlay-play{
+			.rtmedia-activity-container li.media-type-video div.rtmedia-item-thumbnail .mejs-video video {
 			width: 100% !important;
 			height: 100% !important;
 			}
@@ -1671,6 +1669,17 @@ public function enqueue_scripts_styles() {
 
 			wp_localize_script( 'rtmedia-backbone', 'rtMedia_update_plupload_config', $params );
 		}
+
+		wp_enqueue_script(
+			'rtmedia-activity',
+			RTMEDIA_URL . 'app/assets/js/rtMedia.activity.js',
+			array(
+				'bp-nouveau',
+				'rtmedia-backbone'
+			),
+			RTMEDIA_VERSION,
+			true
+		);
 	}
 
 	/**