EXT-3649 EXT-3662 : Move media controls to above media face

Review #69
This changes where and how the media controls are laid out, and ensures that all of the media region (the face) is clickable. Also moved the volume slider to below the controls (this took WAY too long to do ​:( ​), and adjusted the window region in which the media controls are allowed to be displayed.

3 files changed, 205 insertions, 144 deletions

diff --git a/indra/newview/llpanelprimmediacontrols.cpp b/indra/newview/llpanelprimmediacontrols.cpp
index 5cc9c1951b..4f539f404d 100644
--- a/indra/newview/llpanelprimmediacontrols.cpp
+++ b/indra/newview/llpanelprimmediacontrols.cpp
@@ -127,7 +127,11 @@ LLPanelPrimMediaControls::LLPanelPrimMediaControls() :
 	mScrollState = SCROLL_NONE;
 
 	mPanelHandle.bind(this);
+	
+	mInactiveTimeout = gSavedSettings.getF32("MediaControlTimeout");
+	mControlFadeTime = gSavedSettings.getF32("MediaControlFadeTime");
 }
+
 LLPanelPrimMediaControls::~LLPanelPrimMediaControls()
 {
 }
@@ -172,6 +176,7 @@ BOOL LLPanelPrimMediaControls::postBuild()
 	LLStringUtil::convertToF32(getString("zoom_near_padding"), mZoomNearPadding);
 	LLStringUtil::convertToF32(getString("zoom_medium_padding"), mZoomMediumPadding);
 	LLStringUtil::convertToF32(getString("zoom_far_padding"), mZoomFarPadding);
+	LLStringUtil::convertToS32(getString("top_world_view_avoid_zone"), mTopWorldViewAvoidZone);
 
 	// These are currently removed...but getChild creates a "dummy" widget.
 	// This class handles them missing.
@@ -207,11 +212,9 @@ BOOL LLPanelPrimMediaControls::postBuild()
 	}
 		
 	mMediaAddress->setFocusReceivedCallback(boost::bind(&LLPanelPrimMediaControls::onInputURL, _1, this ));
-	mInactiveTimeout = gSavedSettings.getF32("MediaControlTimeout");
-	mControlFadeTime = gSavedSettings.getF32("MediaControlFadeTime");
-
+	
 	mCurrentZoom = ZOOM_NONE;
-	// clicks on HUD buttons do not remove keyboard focus from media
+	// clicks on buttons do not remove keyboard focus from media
 	setIsChrome(TRUE);
 	return TRUE;
 }
@@ -373,8 +376,8 @@ void LLPanelPrimMediaControls::updateShape()
 			mVolumeUpCtrl->setVisible(has_focus);
 			mVolumeDownCtrl->setVisible(has_focus);
 			mVolumeCtrl->setEnabled(has_focus);
-			mVolumeSliderCtrl->setEnabled(has_focus && mVolumeSliderVisible > 0);
-			mVolumeSliderCtrl->setVisible(has_focus && mVolumeSliderVisible > 0);
+			mVolumeSliderCtrl->setEnabled(has_focus && shouldVolumeSliderBeVisible());
+			mVolumeSliderCtrl->setVisible(has_focus && shouldVolumeSliderBeVisible());
 			
 			mWhitelistIcon->setVisible(false);
 			mSecureLockIcon->setVisible(false);
@@ -627,36 +630,45 @@ void LLPanelPrimMediaControls::updateShape()
 			update_min_max(min, max, LLVector3(screen_vert.v));
 		}
 		
+		// convert screenspace bbox to pixels (in screen coords)
+		LLRect window_rect = gViewerWindow->getWorldViewRectScaled();
 		LLCoordGL screen_min;
-		screen_min.mX = llround((F32)gViewerWindow->getWorldViewWidthScaled() * (min.mV[VX] + 1.f) * 0.5f);
-		screen_min.mY = llround((F32)gViewerWindow->getWorldViewHeightScaled() * (min.mV[VY] + 1.f) * 0.5f);
+		screen_min.mX = llround((F32)window_rect.getWidth() * (min.mV[VX] + 1.f) * 0.5f);
+		screen_min.mY = llround((F32)window_rect.getHeight() * (min.mV[VY] + 1.f) * 0.5f);
 		
 		LLCoordGL screen_max;
-		screen_max.mX = llround((F32)gViewerWindow->getWorldViewWidthScaled() * (max.mV[VX] + 1.f) * 0.5f);
-		screen_max.mY = llround((F32)gViewerWindow->getWorldViewHeightScaled() * (max.mV[VY] + 1.f) * 0.5f);
+		screen_max.mX = llround((F32)window_rect.getWidth() * (max.mV[VX] + 1.f) * 0.5f);
+		screen_max.mY = llround((F32)window_rect.getHeight() * (max.mV[VY] + 1.f) * 0.5f);
 		
-		// grow panel so that screenspace bounding box fits inside "media_region" element of HUD
-		LLRect media_controls_rect;
-		S32 volume_slider_height = mVolumeSliderCtrl->getRect().getHeight() - /*fudge*/ 2;
-		getParent()->screenRectToLocal(LLRect(screen_min.mX, screen_max.mY, screen_max.mX, screen_min.mY), &media_controls_rect);
-		media_controls_rect.mLeft -= mMediaRegion->getRect().mLeft;
-		media_controls_rect.mBottom -= mMediaRegion->getRect().mBottom - volume_slider_height;
-		media_controls_rect.mTop += getRect().getHeight() - mMediaRegion->getRect().mTop;
-		media_controls_rect.mRight += getRect().getWidth() - mMediaRegion->getRect().mRight;
+		// grow panel so that screenspace bounding box fits inside "media_region" element of panel
+		LLRect media_panel_rect;
+		// Get the height of the controls (less the volume slider)
+		S32 controls_height = mMediaControlsStack->getRect().getHeight() - mVolumeSliderCtrl->getRect().getHeight();
+		getParent()->screenRectToLocal(LLRect(screen_min.mX, screen_max.mY, screen_max.mX, screen_min.mY), &media_panel_rect);
+		media_panel_rect.mTop += controls_height;
 		
-		// keep all parts of HUD on-screen
-		LLRect window_rect = getParent()->getLocalRect();
-		media_controls_rect.intersectWith(window_rect);
+		// keep all parts of panel on-screen
+		// Area of the top of the world view to avoid putting the controls
+		window_rect.mTop -= mTopWorldViewAvoidZone;
+		// Don't include "spacing" bookends on left & right of the media controls
+		window_rect.mLeft -= mLeftBookend->getRect().getWidth();
+		window_rect.mRight += mRightBookend->getRect().getWidth();
+		// Don't include the volume slider
+		window_rect.mBottom -= mVolumeSliderCtrl->getRect().getHeight();
+		media_panel_rect.intersectWith(window_rect);
 		
 		// clamp to minimum size, keeping rect inside window
-		S32 centerX = media_controls_rect.getCenterX();
-		S32 centerY = media_controls_rect.getCenterY();
+		S32 centerX = media_panel_rect.getCenterX();
+		S32 centerY = media_panel_rect.getCenterY();
+		// Shrink screen rect by min width and height, to ensure containment
 		window_rect.stretch(-mMinWidth/2, -mMinHeight/2);
 		window_rect.clampPointToRect(centerX, centerY);
-		media_controls_rect.setCenterAndSize(centerX, centerY,
-											 llmax(mMinWidth, media_controls_rect.getWidth()), llmax(mMinHeight, media_controls_rect.getHeight()));
+		media_panel_rect.setCenterAndSize(centerX, centerY, 
+										  llmax(mMinWidth, media_panel_rect.getWidth()),
+										  llmax(mMinHeight, media_panel_rect.getHeight()));
 		
-		setShape(media_controls_rect, true);
+		// Finally set the size of the panel
+		setShape(media_panel_rect, true);
 		
 		// Test mouse position to see if the cursor is stationary
 		LLCoordWindow cursor_pos_window;
@@ -699,13 +711,13 @@ void LLPanelPrimMediaControls::updateShape()
 /*virtual*/
 void LLPanelPrimMediaControls::draw()
 {
-	F32 alpha = 1.f;
+	F32 alpha = getDrawContext().mAlpha;
 	if(mFadeTimer.getStarted())
 	{
 		F32 time = mFadeTimer.getElapsedTimeF32();
-		alpha = llmax(lerp(1.0, 0.0, time / mControlFadeTime), 0.0f);
+		alpha *= llmax(lerp(1.0, 0.0, time / mControlFadeTime), 0.0f);
 
-		if(mFadeTimer.getElapsedTimeF32() >= mControlFadeTime)
+		if(time >= mControlFadeTime)
 		{
 			if(mClearFaceOnFade)
 			{
@@ -726,27 +738,30 @@ void LLPanelPrimMediaControls::draw()
 	// Build rect for icon area in coord system of this panel
 	// Assumes layout_stack is a direct child of this panel
 	mMediaControlsStack->updateLayout();
-	LLRect icon_area = mMediaControlsStack->getRect();
-
+	
+	// adjust for layout stack spacing
+	S32 space = mMediaControlsStack->getPanelSpacing() + 1;
+	LLRect controls_bg_area = mMediaControlsStack->getRect();
+	
+	controls_bg_area.mTop += space;
+	
 	// adjust to ignore space from volume slider
-	icon_area.mTop -= mVolumeSliderCtrl->getRect().getHeight();
+	controls_bg_area.mBottom += mVolumeSliderCtrl->getRect().getHeight();
 	
 	// adjust to ignore space from left bookend padding
-	icon_area.mLeft += mLeftBookend->getRect().getWidth();
+	controls_bg_area.mLeft += mLeftBookend->getRect().getWidth() - space;
 	
 	// ignore space from right bookend padding
-	icon_area.mRight -= mRightBookend->getRect().getWidth();
+	controls_bg_area.mRight -= mRightBookend->getRect().getWidth() - space;
 		
 	// draw control background UI image
-	mBackgroundImage->draw( icon_area, UI_VERTEX_COLOR % alpha);
+	mBackgroundImage->draw( controls_bg_area, UI_VERTEX_COLOR % alpha);
 	
 	// draw volume slider background UI image
 	if (mVolumeSliderCtrl->getVisible())
 	{
-		LLRect volume_slider_rect = mVolumeSliderCtrl->getRect();
-		// For some reason the rect is not in the right place (??)
-		// This translates the bg to under the slider
-		volume_slider_rect.translate(mVolumeSliderCtrl->getParent()->getRect().mLeft, icon_area.getHeight());
+		LLRect volume_slider_rect;
+		screenRectToLocal(mVolumeSliderCtrl->calcScreenRect(), &volume_slider_rect);
 		mVolumeSliderBackgroundImage->draw(volume_slider_rect, UI_VERTEX_COLOR % alpha);
 	}
 	
@@ -1259,6 +1274,11 @@ void LLPanelPrimMediaControls::onToggleMute()
 		{
 			media_impl->setVolume(0.0);
 		}
+		else if (mVolumeSliderCtrl->getValueF32() == 0.0)
+		{
+			media_impl->setVolume(1.0);
+			mVolumeSliderCtrl->setValue(1.0);
+		}
 		else 
 		{
 			media_impl->setVolume(mVolumeSliderCtrl->getValueF32());
@@ -1271,8 +1291,12 @@ void LLPanelPrimMediaControls::showVolumeSlider()
 	mVolumeSliderVisible++;
 }
 
-
 void LLPanelPrimMediaControls::hideVolumeSlider()
 {
 	mVolumeSliderVisible--;
 }
+
+bool LLPanelPrimMediaControls::shouldVolumeSliderBeVisible()
+{
+	return mVolumeSliderVisible > 0;
+}
diff --git a/indra/newview/llpanelprimmediacontrols.h b/indra/newview/llpanelprimmediacontrols.h
index d899ee4473..419f033628 100644
--- a/indra/newview/llpanelprimmediacontrols.h
+++ b/indra/newview/llpanelprimmediacontrols.h
@@ -111,6 +111,7 @@ private:
 	void onToggleMute();
 	void showVolumeSlider();
 	void hideVolumeSlider();
+	bool shouldVolumeSliderBeVisible();
 	
 	static void onScrollUp(void* user_data);
 	static void onScrollUpHeld(void* user_data);
@@ -171,6 +172,7 @@ private:
 	F32 mZoomNearPadding;
 	F32 mZoomMediumPadding;
 	F32 mZoomFarPadding;
+	S32 mTopWorldViewAvoidZone;
 	
 	LLUICtrl *mMediaPanelScroll;
 	LLButton *mScrollUpCtrl;
diff --git a/indra/newview/skins/default/xui/en/panel_prim_media_controls.xml b/indra/newview/skins/default/xui/en/panel_prim_media_controls.xml
index 677d0de243..4cef1f9c60 100644
--- a/indra/newview/skins/default/xui/en/panel_prim_media_controls.xml
+++ b/indra/newview/skins/default/xui/en/panel_prim_media_controls.xml
@@ -1,54 +1,99 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <panel
 	follows="left|right|top|bottom"
-	name="MediaControls"
+	name="MediaControlsPanel"
 	background_visible="false"
 	height="200"
 	layout="topleft"
 	help_topic="prim_media_controls"
 	mouse_opaque="false"
+	min_width="300"
 	width="800">
   <string name="control_background_image_name">Inspector_Background</string>
   <string name="skip_step">0.2</string>
-  <string name="min_width">400</string>
-  <string name="min_height">120</string>
+  <string name="min_width">300</string>
+  <string name="min_height">75</string>
   <string name="zoom_near_padding">1.0</string>
   <string name="zoom_medium_padding">1.25</string>
   <string name="zoom_far_padding">1.5</string>
-  <panel
-	  name="media_region"
-	  height="100"
-	  follows="left|right|top|bottom"
+  <string name="top_world_view_avoid_zone">50</string>
+  <layout_stack
+	  name="progress_indicator_area"
+	  follows="left|right|top"
+	  height="8"
 	  layout="topleft"
-	  mouse_opaque="false"
-	  top="0" />
+	  animate="false"
+	  left="0"
+	  orientation="horizontal"
+	  top="22">
+	<!-- outer layout_panels center the inner one -->
+	<layout_panel
+		width="0"
+		name="left_bookend_bottom"
+		mouse_opaque="false"
+		layout="topleft"
+		user_resize="false" />
+	<panel
+		name="media_progress_indicator"
+		mouse_opaque="false"
+		follows="left|right|top"
+		height="8"
+		layout="topleft"
+		left="0"
+		top="0"
+		auto_resize="false"
+		user_resize="false"
+		min_width="100"
+		width="200">
+	  <progress_bar
+		  name="media_progress_bar"
+		  color_bg="1 1 1 1"
+		  color_bar="1 1 1 0.96"
+		  follows="left|right|top"
+		  height="8"
+		  layout="topleft"
+		  top="0"
+		  left="0"
+		  tool_tip="Media is Loading"/>
+	</panel>
+	<layout_panel
+		name="right_bookend_bottom"
+		width="0"
+		mouse_opaque="false"
+		layout="topleft"
+		user_resize="false" />
+  </layout_stack>
   <layout_stack
 	  name="media_controls"
-	  follows="left|right"
+	  follows="left|right|top"
 	  animate="false"
 	  height="75"
 	  layout="topleft"
+	  top="0"
 	  left="0"
+	  border_size="1"
 	  mouse_opaque="false"
-	  orientation="horizontal"
-	  top="100">
+	  orientation="horizontal">
 	<!-- outer layout_panels center the inner one -->
 	<layout_panel
 		name="left_bookend"
+		top="0"
 		width="0"
-	  mouse_opaque="false"
+		mouse_opaque="false"
 		layout="topleft"
 		user_resize="false" />
 	<layout_panel
 		name="back"
+		top="0"
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
-	  mouse_opaque="false"
+		mouse_opaque="false"
 		min_width="22"
-		width="22"
-		top="4">
+		width="22">
 	  <button
+		  name="back_btn"
+		  follows="top"
 		  image_overlay="Arrow_Left_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
@@ -56,12 +101,12 @@
 		  image_unselected="PushButton_Off"
 		  hover_glow_amount="0.15"
 		  auto_resize="false"
-		  height="22"
 		  layout="topleft"
 		  tool_tip="Navigate back"
-		  width="22"
+		  top="0"
 		  left="0"
-		  top_delta="4">
+		  width="22"
+		  height="22">
 		<button.commit_callback
 			function="MediaCtrl.Back" />
 	  </button>
@@ -71,22 +116,24 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
-		top="10"
 		min_width="22"
+		top="0"
+		height="22"
 		width="22">
 	  <button
+		  follows="top"
 		  image_overlay="Arrow_Right_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
 		  image_selected="PushButton_Selected"
 		  image_unselected="PushButton_Off"
 		  hover_glow_amount="0.15"
+		  top="0"
 		  height="22"
-		  layout="topleft"
-		  tool_tip="Navigate forward"
-		  top_delta="0"
 		  min_width="22"
-		  width="22">
+		  width="22"
+		  layout="topleft"
+		  tool_tip="Navigate forward">
 		<button.commit_callback
 			function="MediaCtrl.Forward" />
 	  </button>
@@ -96,10 +143,12 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
-		top="-2"
+		top="0"
+		height="22"
 		min_width="22"
 		width="22">
 	  <button
+		  follows="top"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
 		  image_overlay="Home_Off"
@@ -108,6 +157,7 @@
 		  hover_glow_amount="0.15"
 		  layout="topleft"
 		  tool_tip="Home page"
+		  top="0"
 		  height="22"
 		  min_width="22"
 		  width="22">
@@ -120,19 +170,22 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
-		top="2"
+		top="0"
+		height="22"
 		min_width="22"
 		width="22">
 	  <button
+		  follows="top"
 		  image_overlay="Stop_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
 		  image_selected="PushButton_Selected"
 		  image_unselected="PushButton_Off"
 		  hover_glow_amount="0.15"
-		  height="22"
 		  layout="topleft"
 		  tool_tip="Stop media"
+		  top="0"
+		  height="22"
 		  min_width="22"
 		  width="22">
 		<button.commit_callback
@@ -144,11 +197,12 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
-		top="6"
+		top="0"
+		height="22"
 		min_width="22"
 		width="22">
 	  <button
-		  height="22"
+		  follows="top"
 		  image_overlay="Refresh_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
@@ -157,6 +211,8 @@
 		  hover_glow_amount="0.15"
 		  layout="topleft"
 		  tool_tip="Reload"
+		  top="0"
+		  height="22"
 		  min_width="22"
 		  width="22">
 		<button.commit_callback
@@ -168,11 +224,12 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
-		top="10"
+		top="0"
+		height="22"
 		min_width="22"
 		width="22">
 	  <button
-		  height="22"
+		  follows="top"
 		  image_overlay="StopReload_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
@@ -181,6 +238,8 @@
 		  hover_glow_amount="0.15"
 		  layout="topleft"
 		  tool_tip = "Stop loading"
+		  top="0"
+		  height="22"
 		  min_width="22"
 		  width="22">
 		<button.commit_callback
@@ -192,10 +251,12 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
-		top="14"
+		top="0"
+		height="22"
 		min_width="22"
 		width="24">
 	  <button
+		  follows="top"
 		  image_overlay="Play_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
@@ -205,7 +266,7 @@
 		  layout="topleft"
 		  tool_tip = "Play media"
 		  left_delta="2"
-		  top="4"
+		  top="0"
 		  height="22"
 		  min_width="22"
 		  width="22">
@@ -218,10 +279,11 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
-		top="18"
+		top="0"
 		min_width="22"
 		width="24">
 	  <button
+		  follows="top"
 		  image_overlay="Pause_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
@@ -229,10 +291,10 @@
 		  image_unselected="PushButton_Off"
 		  hover_glow_amount="0.15"
 		  layout="topleft"
+		  top="0"
 		  height="22"
 		  width="22"
 		  left_delta="-1"
-		  top="4"
 		  tool_tip = "Pause media">
 		<button.commit_callback
 			function="MediaCtrl.Pause" />
@@ -246,11 +308,12 @@
 		height="24"
 		follows="left|right|bottom"
 		layout="topleft"
+		top="0"
 		width="190"
 		min_width="90">
 	  <line_editor 
 		  name="media_address_url"
-		  follows="left|right" 
+		  follows="top|left|right" 
 		  height="22"
 		  top="0"
 		  tool_tip="Media URL"
@@ -261,17 +324,18 @@
 	  <layout_stack
 		  name="media_address_url_icons"
 		  animate="false"
-		  follows="right"
+		  follows="top|right"
 		  height="20"
 		  width="38"
-		  right="-2"
-		  top="-1"
-     	mouse_opaque="false"
+		  top="0"
+		  right="-1"
+		  border_size="0"
+		  mouse_opaque="false"
 		  orientation="horizontal">
 		<layout_panel
 			layout="topleft"
 			width="16"
-     	mouse_opaque="false"
+			mouse_opaque="false"
 			auto_resize="false"
 			user_resize="false">
 		  <icon
@@ -287,7 +351,7 @@
 		<layout_panel
 			layout="topleft"
 			width="16"
-     	mouse_opaque="false"
+			mouse_opaque="false"
 			auto_resize="false"
 			user_resize="false">
 		  <icon
@@ -305,16 +369,17 @@
 		name="media_play_position"
 		auto_resize="true"
 		user_resize="false"
-		follows="left|right|top|bottom"
+		follows="left|right"
 		layout="topleft"
-		height="16"		
+		top="0"
+		height="22"
 		min_width="100"
 		width="200">
 	  <slider_bar
 		  name="media_play_slider"
 		  follows="left|right|top"
-		  height="20"
-		  bottom="88"
+		  top="0"
+		  height="22"
 		  increment="0.01"
 		  initial_value="0.5"
 		  layout="topleft"
@@ -330,9 +395,11 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
+		top="0"
 		min_width="22"
 		width="22">
 	  <button
+		  follows="top"
 		  image_overlay="SkipBackward_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
@@ -343,7 +410,7 @@
 		  height="22"
 		  layout="topleft"
 		  tool_tip="Step back"
-		  top="-14"
+		  top="0"
 		  width="22"
 		  left="0">
 		<button.commit_callback
@@ -355,9 +422,11 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
+		top="0"
 		min_width="22"
 		width="22">
 	  <button
+		  follows="top"
 		  image_overlay="SkipForward_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
@@ -367,7 +436,7 @@
 		  height="22"
 		  layout="topleft"
 		  tool_tip="Step forward"
-		  top="-14"
+		  top="0"
 		  min_width="22"
 		  width="22">
 		<button.commit_callback
@@ -379,26 +448,28 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
-		top="-50"
+		top="0"
 		height="72"
 		min_width="22"
 		width="22">
 	  <!-- Note: this is not quite right either...the mute button is not the -->
 	  <!-- same as the others because it cannot have the "image_overlay" be  -->
 	  <!-- two different images.  -->
+	  <!-- Note also: the button and the slider must overlap! -->
 	  <button
+		  follows="top"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
 		  image_selected="AudioMute_Off"
 		  image_unselected="Audio_Off"
 		  hover_glow_amount="0.15"
 		  name="media_mute_button"
-		  height="22"
 		  is_toggle="true"
 		  layout="topleft"
 		  scale_image="false" 
 		  tool_tip="Mute This Media"
-		  top="118"
+		  top="0"
+		  height="20"
 		  min_width="22"
 		  width="22" >
 		<button.commit_callback
@@ -411,7 +482,7 @@
 	  <slider
 		  orientation="vertical"
 		  left="0"
-		  top="-2"
+		  top="16"
 		  height="50"
 		  layout="topleft"
 		  increment="0.01"
@@ -428,35 +499,24 @@
 			function="MediaCtrl.HideVolumeSlider" />
 	  </slider>
 	</layout_panel>
-	<panel
-		height="28"
-		layout="topleft"
-		auto_resize="false"
-		min_width="3"
-		width="3">
-	  <icon
-		  height="26"
-		  image_name="media_panel_divider.png"
-		  layout="topleft"
-		  top="0"
-		  min_width="3"
-		  width="3" />
-	</panel>
 	<layout_panel
 		name="zoom_frame"
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
+		top="0"
 		height="28"
 		min_width="22"
 		width="22">
 	  <button
+		  follows="top"
 		  image_overlay="Zoom_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
 		  image_selected="PushButton_Selected"
 		  image_unselected="PushButton_Off"
 		  hover_glow_amount="0.15"
+		  top="0"
 		  height="22"
 		  layout="topleft"
 		  tool_tip="Zoom into media"
@@ -471,15 +531,18 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
+		top="0"
 		min_width="21"
 		width="21" >
 	  <button
+		  follows="top"
 		  image_overlay="UnZoom_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
 		  image_selected="PushButton_Selected"
 		  image_unselected="PushButton_Off"
 		  hover_glow_amount="0.15"
+		  top="0"
 		  height="22"
 		  layout="topleft"
 		  tool_tip ="Zoom Back"
@@ -494,9 +557,11 @@
 		auto_resize="false"
 		user_resize="false"
 		layout="topleft"
+		top="0"
 		min_width="22"
 		width="22">
 	  <button
+		  follows="top"
 		  image_overlay="ExternalBrowser_Off"
 		  image_disabled="PushButton_Disabled"
 		  image_disabled_selected="PushButton_Disabled"
@@ -506,7 +571,7 @@
 		  height="22"
 		  layout="topleft"
 		  tool_tip = "Open URL in browser"
-		  top_delta="-4"
+		  top="0"
 		  min_width="24"
 		  width="24" >
 		<button.commit_callback
@@ -516,46 +581,16 @@
 	<!-- bookend panel -->
 	<layout_panel
 		name="right_bookend"
-		width="0"
-		layout="topleft"
-		user_resize="false" />
-  </layout_stack>
-  <layout_stack
-	  follows="left|right|bottom"
-	  height="20"
-	  layout="topleft"
-	  animate="false"
-	  left="0"
-	  orientation="horizontal"
-	  top="170">
-	<!-- outer layout_panels center the inner one -->
-	<layout_panel
-		width="0"
-		layout="topleft"
-		user_resize="false" />
-	<panel
-		name="media_progress_indicator"
-		height="20"
-		layout="topleft"
-		left="0"
 		top="0"
-		auto_resize="false"
-		user_resize="false"
-		min_width="100"
-		width="200">
-	  <progress_bar
-		  name="media_progress_bar"
-		  color_bar="1 1 1 0.96"
-		  follows="left|right|top"
-		  top="5"
-		  height="8"
-		  layout="topleft"
-		  left="0"
-		  tool_tip="Media is Loading"/>
-	</panel>
-	<layout_panel
 		width="0"
 		layout="topleft"
 		user_resize="false" />
   </layout_stack>
+  <panel
+	  name="media_region"
+	  height="100"
+	  follows="left|right|top|bottom"
+	  layout="topleft"
+	  mouse_opaque="false"
+	  top="30" />
 </panel>