Media-picker work. Add the following to e107_config.php to enable and test. define('e_DEBUG_MEDIAPICKER', true);

e107_admin/image.php

@@ -1329,10 +1329,65 @@ class media_admin_ui extends e_admin_ui
 		return $text;
 	}
 
+	/**
+	 * Media-Manager Tabs (new in v2.1.9)
+	 * Replacement for mediaSelectUpload()
+	 * @return string
+	 */
+	function mediaManagerTabs()
+	{
+		$frm = e107::getForm();
+		$tp = e107::getParser();
 
+		$options = array();
+		$options['bbcode'] = ($this->getQuery('bbcode')=='img') ? 'img' : FALSE;
+
+		if(isset($_GET['from']))
+		{
+			$options['from'] .= intval($_GET['from']);
+		}
+
+		$cat = $this->getQuery('for');
+
+		$tabOptions = array(
+			'core-media-image'   => array('caption'=> $tp->toGlyph('fa-file-photo-o').ADLAN_105,    'text' => $this->imageTab2($cat,$options) ),
+			'core-media-video'   => array('caption'=> $tp->toGlyph('fa-file-video-o').IMALAN_163,   'text' => $this->videoTab()),
+			'core-media-audio'   => array('caption'=> $tp->toGlyph('fa-file-audio-o')."Audio",      'text' => $this->audioTab()),
+			'core-media-youtube' => array('caption'=> $tp->toGlyph('fa-youtube-play')."Youtube",    'text' => $this->youtubeTab() ),
+			'core-media-glyphs'   => array('caption'=> $tp->toGlyph('fa-flag')."Glyphs",             'text' => $this->glyphTab()),
+		);
+
+		$tabs = array();
+
+		// check tab options against URL
+		foreach($tabOptions as $key=>$val)
+		{
+			$id = str_replace('core-media-', '', $key);
+			if($this->getQuery($id) == 1 || $this->getQuery('bbcode') == $id)
+			{
+				$tabs[$key] = $val;
+			}
+
+		}
+
+		if(getperms('A|A1'))
+		{
+			$tabs['core-media-upload']  = array('caption'=> $tp->toGlyph('fa-upload').IMALAN_150, 'text' => $this->uploadTab());
+		}
+
+		return $frm->tabs($tabs, array('id'=>'admin-ui-media-manager', 'class'=>'media-manager'));
+
+	}
+
+	/**
+	 * @deprecated by mediaManagerTabs
+	 * @param string $type
+	 * @return string
+	 */
 	function mediaSelectUpload($type='image') 
 	{
 		$frm = e107::getForm();
+		$tp = e107::getParser();
 
 		if($type === 'video')
 		{
@@ -1343,7 +1398,10 @@ class media_admin_ui extends e_admin_ui
 			return $frm->tabs($tabs, array('class'=>'media-manager'));
 		}
 
-
+		if(deftrue('e_DEBUG_MEDIAPICKER'))
+		{
+			return $this->mediaManagerTabs();
+		}
 
 
 		$youtubeActive = 'inactive';
@@ -1356,11 +1414,11 @@ class media_admin_ui extends e_admin_ui
 		
 		if($this->getQuery('bbcode') != 'video' && $this->getQuery('bbcode') != 'glyph')
 		{
-			$text .= "<li class='active'><a data-toggle='tab' href='#core-media-select'>".IMALAN_151."</a></li>\n";	
+			$text .= "<li class='active'><a data-toggle='tab' href='#core-media-select'>".ADLAN_105."</a></li>\n";
 		}
 		else
 		{
-			if($this->getQuery('bbcode') == 'glyph')
+			if($this->getQuery('bbcode') == 'glyphs')
 			{
 				$glyphActive = 'active';	
 			}
@@ -1372,32 +1430,27 @@ class media_admin_ui extends e_admin_ui
 					
 		}
 		
-		if(getperms('A|A1') && ($this->getQuery('bbcode') != 'video' && $this->getQuery('bbcode') !='glyph'))
+
-		{
-			$text .= "<li><a data-toggle='tab' href='#core-media-upload'>".IMALAN_150."</a></li>";
-		}
 		
 		if(varset($options['bbcode']) == 'img')
 		{
 			$text .= "<li><a data-toggle='tab' href='#core-media-style'>".IMALAN_152."</a></li>\n";
 		}
 
-		if($this->getQuery('glyphs') == 1 || $this->getQuery('bbcode') == 'glyph')
-		{
-			$text .= "<li class='{$glyphActive}'><a data-toggle='tab' href='#core-media-glyphs'>Glyphs</a></li>\n";	
-		}
-		
 		if($this->getQuery('video') == 1 || $this->getQuery('bbcode') == 'video')
 		{
-			$text .= "<li class='{$youtubeActive}'><a data-toggle='tab' href='#core-media-youtube'>Youtube</a></li>\n";
+			$text .= "<li class='{$youtubeActive}'><a data-toggle='tab' href='#core-media-youtube'>"."Youtube</a></li>\n";
-			$text .= "<li class='{$videoActive}'><a data-toggle='tab' href='#core-media-video'>".IMALAN_163."</a></li>\n";
-
 		}
 
-		if($this->getQuery('audio') == 1 || $this->getQuery('bbcode') == 'audio')
-		{
-			$text .= "<li class='{$videoActive}'><a data-toggle='tab' href='#core-media-audio'>Audio</a></li>\n";
 
+		if($this->getQuery('glyphs') == 1 || $this->getQuery('bbcode') == 'glyph')
+		{
+			$text .= "<li class='{$glyphActive}'><a data-toggle='tab' href='#core-media-glyphs'>"."Glyphs</a></li>\n";
+		}
+
+		if(getperms('A|A1') && ($this->getQuery('bbcode') != 'video' && $this->getQuery('bbcode') !='glyph'))
+		{
+			$text .= "<li><a data-toggle='tab' href='#core-media-upload'>".IMALAN_150."</a></li>";
 		}
 
 		
@@ -1447,7 +1500,7 @@ class media_admin_ui extends e_admin_ui
 		 * 
 		 */
 		
-		if($options['bbcode']) //TODO LAN lan_image.php
+		if($options['bbcode']) //TODO move to imagestyleTab();
 		{
 			$text .= "<div class='tab-pane' id='core-media-style'>
 				
@@ -1511,43 +1564,32 @@ class media_admin_ui extends e_admin_ui
 			</div>";
 		}	
 		
-		if($this->getQuery('glyphs') == 1 || $this->getQuery('bbcode') == 'glyph')
-		{
-			//TODO 
-			$text .= "<div class='tab-pane clearfix {$glyphActive}' id='core-media-glyphs' style='font-size:24px'>";
 
-			$text .= $this->glyphTab();
-			
-			$text .= "</div>
-			";
-		
-		
-		}
 		
 		if($this->getQuery('video') || $this->getQuery('bbcode') == 'video')
 		{
 			$text .= "<div class='tab-pane clearfix {$youtubeActive}' id='core-media-youtube' >";
-		//	$text .= "<div class='row-fluid'>";
 			$text .= $this->youtubeTab();
 			$text .= "</div>";
 
-			$text .= "<div class='tab-pane clearfix {$videoActive}' id='core-media-video' >";
-			//	$text .= "<div class='row-fluid'>";
-				$text .= $this->videoTab();
-				$text .= "</div>";
-
-
 		}
 			
 
 		if($this->getQuery('audio') || $this->getQuery('bbcode') == 'audio')
 		{
 				$text .= "<div class='tab-pane clearfix {$videoActive}' id='core-media-audio' >";
-			//	$text .= "<div class='row-fluid'>";
 				$text .= $this->audioTab();
 				$text .= "</div>";
 		}
 
+		if($this->getQuery('glyphs') == 1 || $this->getQuery('bbcode') == 'glyph')
+		{
+			$text .= "<div class='tab-pane clearfix {$glyphActive}' id='core-media-glyphs' style='font-size:24px'>";
+			$text .= $this->glyphTab();
+			$text .= "</div>
+			";
+
+		}
 		
 		
 		$text .= "</div>";
@@ -1654,6 +1696,7 @@ class media_admin_ui extends e_admin_ui
 					'saveValue'		=> $val['media_url'],
 					'thumbUrl'		=> $tp->thumbUrl($val['media_url'], array('w'=>340, 'h'=>220)),
 					'title'			=> $val['media_name'],
+					'tooltip'       => basename($val['media_url'])." (".$val['media_dimensions'].")",
 					'slideCaption'	=> '',
 					'slideCategory'	=> 'bootstrap',
 					'mime'          => $val['media_type']
@@ -1742,7 +1785,7 @@ class media_admin_ui extends e_admin_ui
 	}
 
 
-	function videoTab($parm=array())
+	private function videoTab($parm=array())
 	{
 
 		$tp = e107::getParser();
@@ -1764,13 +1807,18 @@ class media_admin_ui extends e_admin_ui
 
 		$videos = e107::getMedia()->getVideos();
 
+
+
 		foreach($videos as $val)
 		{
+			$size = e107::getFile()->file_size_encode($val['media_size']);
+
 			$items[] = array(
 					'previewHtml'	=> $tp->toVideo($val['media_url'], array('w'=>210, 'h'=>140)), // e_IMAGE_ABS."generic/playlist_120.png",
 					'saveValue'		=> $val['media_url'],
 					'thumbUrl'		=> $val['media_url'],
 					'title'			=> $val['media_name'],
+					'tooltip'       => basename($val['media_url'])." (".$size.")",
 					'slideCaption'	=> '',
 					'slideCategory'	=> 'bootstrap',
 					'mime'          => $val['media_type']
@@ -2053,7 +2101,9 @@ class media_admin_ui extends e_admin_ui
 			else // empty key.
 			{
 			    $link = '<a style="color:black" target="_blank" href="'.e_ADMIN.'image.php?mode=main&action=prefs#/tab2">'.IMALAN_177.'</a>';
-			    $items = "<div class='alert alert-info'><p>".e107::getParser()->lanVars(e107::getParser()->toHTML(IMALAN_174, true), array('x'=>$link))."</p></div>";
+			    $items = "
+					<div class='alert alert-info' style='margin-left: 15px;'><p>".e107::getParser()->lanVars(e107::getParser()->toHTML(IMALAN_174, true), array('x'=>$link))."</p>
+					</div>";
 				
 				
 			}

e107_admin/newspost.php

@@ -1752,15 +1752,8 @@ class news_form_ui extends e_admin_form_ui
 				}
 			}
 
-			if(deftrue('e_DEBUG_MEDIAPICKER'))
-			{
-				$text = $frm->mediapicker('news_thumbnail[0]', varset($thumbTmp[0]),'media=news&image=1&video=1&audio=1');
-			}
-			else
-			{
-				$text = $frm->imagepicker('news_thumbnail[0]', varset($thumbTmp[0]), varset($paths[0]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images');
-			}
 
+			$text = $frm->imagepicker('news_thumbnail[0]', varset($thumbTmp[0]), varset($paths[0]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images');
 			$text .= $frm->imagepicker('news_thumbnail[1]', varset($thumbTmp[1]), varset($paths[1]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images');
 			$text .= $frm->imagepicker('news_thumbnail[2]', varset($thumbTmp[2]), varset($paths[2]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images');
 			$text .= $frm->imagepicker('news_thumbnail[3]', varset($thumbTmp[3]), varset($paths[3]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images');

e107_handlers/e_parse_class.php

@@ -4109,8 +4109,9 @@ class e_parser
 		$idAtt = (!empty($parm['id'])) ? "id='".$parm['id']."' " : '';
 		$style = (!empty($parm['style'])) ? "style='".$parm['style']."' " : '';
 		$class = (!empty($parm['class'])) ? $parm['class']." " : '';
+		$placeholder = isset($parm['placeholder']) ? $parm['placeholder'] : "<!-- -->";
 
-		$text = "<".$tag." {$idAtt}class='".$class.$prefix.$id.$size.$spin.$rotate.$fixedW."' {$style}><!-- --></".$tag.">" ;
+		$text = "<".$tag." {$idAtt}class='".$class.$prefix.$id.$size.$spin.$rotate.$fixedW."' {$style}>".$placeholder."</".$tag.">" ;
 		$text .= ($options !== false) ? $options : "";
 
 		return $text;

e107_handlers/form_handler.php

@@ -512,9 +512,10 @@ class e_form
 	function tabs($array,$options = array())
 	{
 		$initTab = varset($options['active'],false);
+		$id = !empty($options['id']) ? 'id="'.$options['id'].'"' : '';
 		$text  ='
 		<!-- Nav tabs -->
-			<ul class="nav nav-tabs">';
+			<ul '.$id.' class="nav nav-tabs">';
 
 		$c = 0;
 
@@ -998,11 +999,21 @@ class e_form
 			$url .= "&amp;w=".$extras['w'];	
 		}
 
+		if(!empty($extras['image']))
+		{
+			$url .= "&amp;image=1";
+		}
+
 		if(!empty($extras['glyphs']))
 		{
 			$url .= "&amp;glyphs=1";	
 		}
 
+		if(!empty($extras['youtube']))
+		{
+			$url .= "&amp;youtube=1";
+		}
+		
 		if(!empty($extras['video']))
 		{
 			$url .= ($extras['video'] == 2) ? "&amp;video=2" : "&amp;video=1";
@@ -1206,6 +1217,20 @@ class e_form
 	 */
 	function imagepicker($name, $default, $previewURL = '', $sc_parameters = '')
 	{
+
+		if(deftrue('e_DEBUG_MEDIAPICKER'))
+		{
+			$sc_parameters .= '&image=1';
+			if(strpos($sc_parameters, 'video=1')!==false) // bc fix
+			{
+				$sc_parameters .= '&youtube=1';
+			}
+
+			return $this->mediapicker($name, $default, $sc_parameters);
+		}
+
+
+
 		$tp = e107::getParser();
 		$name_id = $this->name2id($name);
 		$meta_id = $name_id."-meta";
@@ -1365,6 +1390,8 @@ class e_form
 	 */
 	function mediapicker($name, $default, $parms = '')
 	{
+
+
 		$tp = e107::getParser();
 		$name_id = $this->name2id($name);
 		$meta_id = $name_id."-meta";
@@ -1379,6 +1406,7 @@ class e_form
 			$parms = array();
 		}
 
+
 		if(empty($parms['media']))
 		{
 			$parms['media'] = '_common';
@@ -1392,7 +1420,7 @@ class e_form
 		// Test Files...
 	//	$default = '{e_MEDIA_VIDEO}2018-07/samplevideo_720x480_2mb.mp4';
 	//	$default = '{e_MEDIA_FILE}2016-03/Colony_Harry_Gregson_Williams.mp3';
-		$default = '{e_PLUGIN}gallery/images/butterfly.jpg';
+	//	$default = '{e_PLUGIN}gallery/images/butterfly.jpg';
 	//	$default = 'NuIAYHVeFYs.youtube';
 	//	$default = ''; // empty
 
@@ -1402,6 +1430,7 @@ class e_form
 
 		switch($type)
 		{
+
 			case "video":
 				$preview = $tp->toVideo($default, array('w'=>$width, 'h'=> ($height - 50)));
 				$previewURL = $tp->toVideo($default, array('mode'=>'url'));
@@ -1434,11 +1463,11 @@ class e_form
 			//	$preview = $tp->toImage($default, array('w'=>$width, 'h'=>$height, 'class'=>'image-selector img-responsive img-fluid'));
 			//	$previewURL = $tp->thumbUrl($default, array('w'=>800));
 				break;
-			/*
+
 			case "glyph":
 				$preview = $tp->toGlyph($default, array('size'=>'3x'));
 				$previewURL = false;
-			break;*/
+			break;
 
 			default: // blank
 

e107_handlers/media_class.php

@@ -1309,7 +1309,8 @@ class e_media
 			'thumbUrl'		=> $defaultThumb,
 			'title'			=> '',
 			'gridClass'		=> 'span2 col-md-2',
-			'bbcode'		=> ''
+			'bbcode'		=> '',
+			'tooltip'       => '',
 			
 		);
 		
@@ -1327,13 +1328,20 @@ class e_media
 		
 		<div class='media-carousel ".$data['gridClass']."'>
 		
-			<div class='well clearfix'>\n";
+			<div class='well clearfix media-carousel-item-container'>\n";
 
 
+				$caption = $data['title'];
+
+				if(!empty($data['tooltip']))
+				{
+					$data['title'] = $data['tooltip'];
+				}
 
 				$linkTag = $this->browserCarouselItemSelector($data);
 
 
+
 				switch($data['type'])
 				{
 					case "video":
@@ -1348,11 +1356,11 @@ class e_media
 							$text .= $tp->toAudio($data['thumbUrl'], array('mime'=>$data['mime']));
 						}
 
-						$text .= "<div class='row' style='margin-top:5px'>
+						$text .= "<div class='row media-carousel-item-controls'>
 									<div class='col-md-8'><small class='media-carousel-item-caption'>";
 
 						$text .= $this->browserCarouselItemSelector($data);
-						$text .= "\n".$data['title'];
+						$text .= "\n".$caption;
 						$text .= "\n</a></small></div>";
 
 						$data['style'] = 'float:right';
@@ -1365,17 +1373,19 @@ class e_media
 						
 
 					case "image":
+
+
 						$text .= $linkTag;
 						$text .= "<span>";
 						$text .= '<img class="img-responsive img-fluid" alt="" src="'.$data['thumbUrl'].'" style="width:100%;display:inline-block" />';
 						$text .= "</span>";
 						$text .= "\n</a>\n\n";
 
-							$text .= "<div class='row' style='margin-top:5px'>
+							$text .= "<div class='row media-carousel-item-controls'>
 									<div class='col-md-8'><small class='media-carousel-item-caption'>";
 
 						$text .= $this->browserCarouselItemSelector($data);
-						$text .= "\n".$data['title'];
+						$text .= "\n".$caption;
 						$text .= "\n</a></small></div>";
 
 						$data['style'] = 'float:right';
@@ -1393,8 +1403,9 @@ class e_media
 
 					case "glyph":
 						$text .= $linkTag;
-						$text .= "\n<span style='margin:7px;display:inline-block;color: inherit'>".$tp->toGlyph($data['thumbUrl'],false)."</span>";
+						$text .= "\n<span style='margin:7px;display:inline-block;color: inherit'>".$tp->toGlyph($data['thumbUrl'],array('placeholder'=>''))."</span>";
 						$text .= "\n</a>\n\n";
+
 						break;
 
 
@@ -1531,7 +1542,7 @@ class e_media
 
 				$text .= '&nbsp;<div class="btn-group" >
 			<a id="'.$carouselID.'-prev" class="btn btn-primary btn-secondary" href="#'.$carouselID.'" data-slide="prev"><i class="fa fa-backward"></i></a>
-			<a id="'.$carouselID.'-index" class="btn btn-primary btn-secondary">1</a>
+			<a id="'.$carouselID.'-index" class="media-carousel-index btn btn-primary btn-secondary">1</a>
 			<a id="'.$carouselID.'-next" class="btn btn-primary btn-secondary" href="#'.$carouselID.'" data-slide="next"><i class="fa fa-forward"></i></a>
 			</div>';
 
@@ -1558,9 +1569,11 @@ class e_media
 				$perPage = vartrue($parm['perPage'],12);
 				
 				$c=0;
+				$count = 0;
 
 				
 				$slides = array();
+				$totalSlides = 0;
 
 				if(is_array($data) && count($data) > 0)
 				{
@@ -1568,21 +1581,24 @@ class e_media
 
 					foreach($data as $key=>$val)
 					{
+
 						if($c == 0)
 						{
 							$active = (count($slides) <1) ? ' active' : '';
+							$totalSlides++;
 
 							$text .= '
 
-							<!-- Start Slide -->
+							<!-- Start Slide '.$parm['action'].' '.$totalSlides.' -->
 							<div class="item'.$active.'">';
 
-							if(count($slides)  > 1)
+							if($totalSlides  > 2)
 							{
-
 								$text .= "<!-- ";
 							}
 
+
+
 							if(vartrue($val['slideCaption']))
 							{
 								$text .= "<h4>".$val['slideCaption']."</h4>";
@@ -1614,9 +1630,12 @@ class e_media
 
 						}
 
-						if($c == $perPage)
+						$count++;
+
+						if($c == $perPage || (count($data) == $count))
 						{
-							if(count($slides) > 1)
+
+							if($totalSlides > 2)
 							{
 								$text .= " -->";
 							}
@@ -1624,9 +1643,7 @@ class e_media
 
 							$text .= '
 							</div>
-							<!-- End Slide -->
+							<!-- End Slide '.$parm['action'].' '.$totalSlides.' -->';
-
-							';
 
 
 

e107_themes/bootstrap3/admin_style.css

@@ -266,13 +266,19 @@ td.right, th.right 			{ text-align:right }
 
 
 /* media picker */
+#media-browser-container-glyph{ margin-left: 15px }
+
 .media-carousel-item-image .well  { height: 200px; overflow:hidden }
 .media-carousel-item-image span  { display:block; height:150px;  }
 .media-carousel-item-image img  { width:100%; max-height: 100%;  }
 .media-carousel-item-video .video-responsive { padding-top: 0; }
 .media-carousel-item-video video { max-width: 100%; max-height: 200px; }
+.media-carousel .well:hover { border:1px solid silver }
 
-
+.media-carousel-item-container { position: relative; min-height:100px; }
+.media-carousel-item-controls { /*position: absolute;bottom:7px; right: 10px */  margin-top:5px;}
+.media-carousel-item-container audio { width: 100% }
+.media-carousel-item-glyph { width: 64px; height:64px; overflow:hidden; margin-right:5px; margin-bottom:5px }
 
 .mediaselector-preview img,
 .mediaselector-preview video,
@@ -1412,7 +1418,7 @@ li.rssRow > div {
 
 /*.media-carousel { margin-bottom:10px }*/
 
-.media-carousel-item-glyph { width: 64px; height:64px; overflow:hidden; margin-left:5px; margin-bottom:5px }
+
 
 .media-manager {padding:20px; min-height:400px }
 

e107_web/js/core/mediaManager.js

@@ -80,12 +80,18 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 			// Ajax keyup search. Used by media-browser.
 			$(context).find('.e-ajax-keyup').once('media-manager-e-ajax-keyup').each(function ()
 			{
+
+
 				$(this).keyup(function ()
 				{
+
 					var that = this;
 
 					e107.callbacks.waitForFinalEvent(function ()
 					{
+
+						$(that).closest('div').find('.media-carousel-index').text('1'); // reset counter when searching.
+
 						e107.mediaManager.eAjaxKeyUp(that);
 					}, 300, "eAjaxKeyUp");
 				});
@@ -611,6 +617,8 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 		var src = $this.attr("data-src");
 		var search = $this.val();
 
+
+
 		if(search !== null)
 		{
 			search = search.replace('https://', 'url:');