Merge pull request #207 from 10up/refactor/edit-video-preview-ux

Adjust position of media details in the modal

Author: Rahmon

assets/js/brightcove-admin.js

@@ -321,6 +321,21 @@ var BrightcoveMediaManagerView = BrightcoveView.extend(
 
 						this.detailsView.render();
 						this.detailsView.$el.toggle( true ); // Always show new view
+						
+						const contentElement = $('.brightcove-modal .media-frame-content').first();
+						
+						if (contentElement.length) {
+							const maxTopValue = $('#brightcove-media-frame-content').outerHeight() - this.detailsView.$el.outerHeight();
+
+							let topValue = contentElement.scrollTop() - $('#brightcove-media-frame-router').outerHeight() + 25;
+	
+							if (topValue > maxTopValue) {
+								topValue = maxTopValue
+							}
+	
+							this.detailsView.$el.css('top', topValue > 0 ? topValue : 0 );
+						}
+
 						this.model.get( 'media-collection-view' ).$el.addClass( 'menu-visible' );
 						mediaView.$el.addClass( 'highlighted' );
 						wpbc.broadcast.trigger( 'toggle:insertButton', 'enabled' );

assets/js/brightcove-admin.js.map

@@ -13,9 +13,9 @@ public function add_templates() {
 
 		<?php /* Used by views/media-manager.js */?>
 		<script type="text/html" id="tmpl-brightcove-media">
-			<div class="brightcove media-frame-router"></div>
+			<div id="brightcove-media-frame-router" class="brightcove media-frame-router"></div>
 			<div class="brightcove-message message hidden"></div>
-			<div class="brightcove media-frame-content">
+			<div id="brightcove-media-frame-content" class="brightcove media-frame-content">
 				<span id="js-media-loading" class="spinner"></span>
 			</div>
 			<div class="brightcove media-frame-menu hidden"></div>