Issue #3200 - Media-Manager Media-picker work-in-progress

e107_admin/image.php

@@ -876,7 +876,7 @@ class media_admin_ui extends e_admin_ui
 				'text'			=> e_MEDIA_FILE,
 				'multipart'		=> e_MEDIA_FILE,
 				'application'	=> e_MEDIA_FILE,
-			//	'audio'			=> e_MEDIA_FILE,
+				'audio'			=> e_MEDIA_FILE,
 				'image'			=> e_MEDIA_IMAGE,
 				'video'			=> e_MEDIA_VIDEO,
 				'other'			=> e_MEDIA_FILE
@@ -1386,6 +1386,12 @@ class media_admin_ui extends e_admin_ui
 
 		}
 
+		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(varset($_GET['from']))
 		{
@@ -1525,7 +1531,7 @@ class media_admin_ui extends e_admin_ui
 
 		}
 			
-		// todo
+
 		if($this->getQuery('audio') || $this->getQuery('bbcode') == 'audio')
 		{
 				$text .= "<div class='tab-pane clearfix {$videoActive}' id='core-media-audio' >";
@@ -1596,7 +1602,57 @@ class media_admin_ui extends e_admin_ui
 		
 	function audioTab($parm=array())
 	{
-		//todo (@see videoTab)
+		$tp = e107::getParser();
+
+		$parms = array(
+			'width'	 	=> 340,
+			'height'	=> 220,
+			'type'		=>'audio',
+			'tagid'		=> $this->getQuery('tagid'),
+			'action'	=>'audio', 	// Used by AJAX to identify correct function.
+			'perPage'	=> 12,
+			'gridClass'	=> 'col-md-2 col-sm-3 media-carousel-item-audio',
+			'bbcode'	=> 'audio',
+			'close'		=> 'true'
+
+		);
+
+		$items = array();
+
+		$audios = e107::getMedia()->getAudios();
+
+		foreach($audios as $val)
+		{
+			$items[] = array(
+					'previewHtml'	=> $tp->toAudio($val['media_url'], array('mime'=>$val['media_type'], 'w'=>210, 'h'=>140)),
+					'saveValue'		=> $val['media_url'],
+					'thumbUrl'		=> $val['media_url'],
+					'title'			=> $val['media_name'],
+					'slideCaption'	=> '',
+					'slideCategory'	=> 'bootstrap',
+					'mime'          => $val['media_type']
+			);
+
+		}
+
+
+		if(!empty($parm['search']))
+		{
+			$filtered = array();
+			if(!empty($items))
+			{
+				foreach($items as $v)
+				{
+					if(strpos($v['title'], $parm['search'])!==false)
+					{
+						$filtered[] = $v;
+					}
+				}
+			}
+			$items = $filtered;
+		}
+
+		return e107::getMedia()->browserCarousel($items, $parms);
 
 	}
 
@@ -1613,7 +1669,7 @@ class media_admin_ui extends e_admin_ui
 			'tagid'		=> $this->getQuery('tagid'),
 			'action'	=>'video', 								// Used by AJAX to identify correct function.
 			'perPage'	=> 12,
-			'gridClass'	=> 'media-carousel-item-video pull-left',
+			'gridClass'	=> 'col-md-2 col-sm-3 admin-ui-grid media-carousel-item-video',
 			'bbcode'	=> 'video',
 			'close'		=> 'true'
 
@@ -1626,9 +1682,9 @@ class media_admin_ui extends e_admin_ui
 		foreach($videos as $val)
 		{
 			$items[] = array(
-					'previewUrl'	=> e_IMAGE_ABS."generic/playlist_120.png", //todo place entire video tag into imagepicker when saving.
+					'previewHtml'	=> $tp->toVideo($val['media_url'], array('w'=>210, 'h'=>140)), // e_IMAGE_ABS."generic/playlist_120.png", //todo place entire video tag into imagepicker when saving.
 					'saveValue'		=> $val['media_url'],
-					'thumbUrl'		=> $tp->replaceConstants($val['media_url']),
+					'thumbUrl'		=> $val['media_url'],
 					'title'			=> $val['media_name'],
 					'slideCaption'	=> '',
 					'slideCategory'	=> 'bootstrap',

e107_handlers/e_parse_class.php

@@ -4635,8 +4635,10 @@ class e_parser
 
 		$file = $this->replaceConstants($file, 'abs');
 
+		$mime = varset($parm['mime'], 'audio/mpeg');
+
 		$text = '<audio controls style="max-width:100%">
-					<source src="'.$file.'" type="audio/mpeg">
+					<source src="'.$file.'" type="'.$mime .'">
 					  Your browser does not support the audio tag.
 				</audio>';
 
@@ -4658,7 +4660,7 @@ class e_parser
 			return false;
 		}
 
-		list($id,$type) = explode(".",$file,2);
+		$type = pathinfo($file, PATHINFO_EXTENSION);
 
 		$thumb = vartrue($parm['thumb']);
 		$mode = varset($parm['mode'],false); // tag, url
@@ -4784,11 +4786,12 @@ class e_parser
 
 			$width = varset($parm['w'], 320);
 			$height = varset($parm['h'], 240);
+			$mime = varset($parm['mime'], 'video/mp4');
 
 			return '
 			<div class="video-responsive">
 			<video width="'.$width.'" height="'.$height.'" controls>
-			  <source src="'.$file.'" type="video/mp4">
+			  <source src="'.$file.'" type="'.$mime.'">
 		
 			  Your browser does not support the video tag.
 			</video>

e107_handlers/form_handler.php

@@ -1008,6 +1008,11 @@ class e_form
 			$url .= ($extras['video'] == 2) ? "&video=2" : "&video=1";
 		}
 
+		if(!empty($extras['audio']))
+		{
+			$url .= "&audio=1";
+		}
+
 		if(!empty($extras['path']) && $extras['path'] == 'plugin')
 		{
 			$url .= "&path=".deftrue('e_CURRENT_PLUGIN');
@@ -1380,14 +1385,14 @@ class e_form
 		}
 
 		$title = !empty($parms['help']) ? "title='".$parms['help']."'" : "";
-		$width = vartrue($parms['w'], 210);
+		$width = vartrue($parms['w'], 220);
 		$height = vartrue($parms['h'], 190);
 	// e107::getDebug()->log($parms);
 
 		// 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
 

e107_handlers/media_class.php

@@ -447,6 +447,12 @@ class e_media
 		return $this->getImages('_common_video', $from, $amount, $search);
 	}
 
+
+	public function getAudios($from=0, $amount = null, $search = null)
+	{
+		return $this->getImages('_common_audio', $from, $amount, $search);
+	}
+
 	/**
 	 * Return an array of Images in a particular category
 	 * @param string $cat : category name. use + to include _common eg. 'news+'
@@ -1285,6 +1291,7 @@ class e_media
 			'tagid'			=> '',
 			'saveValue'		=> '',
 			'previewUrl'	=> $defaultThumb ,
+			'previewHtml'   => null,
 			'thumbUrl'		=> $defaultThumb,
 			'title'			=> '',
 			'gridClass'		=> 'span2 col-md-2',
@@ -1309,36 +1316,43 @@ class e_media
 		
 			<div class='well clearfix'>\n";
 
-				$linkTag = "<a data-toggle='context' class='e-media-select e-tip".$select."' ".$close." data-id='".$data['id']."' data-width='".$data['width']."' data-height='".$data['height']."' data-src='".$data['previewUrl']."' data-type='".$data['type']."' data-bbcode='".$data['bbcode']."' data-target='".$data['tagid']."' data-path='".$data['saveValue']."' data-preview='".$data['previewUrl']."' title=\"".$data['title']."\" style='float:left' href='#' >";
+				$dataPreview = !empty($data['previewHtml']) ? base64_encode($data['previewHtml']) : $data['previewUrl'];
+
+				$linkTag = "<a data-toggle='context' class='e-media-select e-tip".$select."' ".$close." data-id='".$data['id']."' data-width='".$data['width']."' data-height='".$data['height']."' data-src='".$data['previewUrl']."' data-type='".$data['type']."' data-bbcode='".$data['bbcode']."' data-target='".$data['tagid']."' data-path='".$data['saveValue']."' data-preview='".$dataPreview."'  title=\"".$data['title']."\" style='float:left' href='#' >";
 
 				switch($data['type'])
 				{
 					case "video":
-						$mime = vartrue($data['mime'],"video/mp4");
+						// $mime = vartrue($data['mime'],"video/mp4");
 
-						$text .= '<video width="'.$data['width'].'" height="'.$data['height'].'" controls >
+						$text .= $tp->toVideo($data['thumbUrl'], array('w'=>$data['width'],'h'=>'', 'mime'=>$data['mime']));
+					/*	$text .= '<video width="'.$data['width'].'" height="'.$data['height'].'" controls >
 						  <source src="'.$data['thumbUrl'].'" type="'.$mime.'">
 						  Your browser does not support the video tag.
-						</video>
+						</video>';*/
-						<div class="clearfix" style="text-align:center">';
+
+						$text .= "<div><small class='media-carousel-item-caption'>";
 
 						$text .= $linkTag;
 						$text .= "\n".$data['title'];
-						$text .= "\n</a></div>\n\n";
+						$text .= "\n</a></small></div>\n\n";
 						break;
 
 					case "audio":
-						$mime = vartrue($data['mime'],"audio/mpeg");
+					//	$mime = vartrue($data['mime'],"audio/mpeg");
-						$text .= '<audio controls>
+
+						$text .= $tp->toAudio($data['thumbUrl'], array('mime'=>$data['mime']));
+					/*	$text .= '<audio controls>
 						  <source src="'.$data['thumbUrl'].'" type="'.$mime.'">
 	
 						  Your browser does not support the audio tag.
-						</audio>
+						</audio>';*/
-						<div class="clearfix" style="text-align:center">';
+
+							$text .= "<div><small class='media-carousel-item-caption'>";
 
 						$text .= $linkTag;
 						$text .= "\n".$data['title'];
-						$text .= "\n</a></div>\n\n";
+						$text .= "\n</a></small></div>\n\n";
 
 						break;
 
@@ -1456,7 +1470,7 @@ class e_media
 			/* Fix for Bootstrap2 margin-left issue when wrapping */
 		e107::css('inline','
 				
-		.media-carousel { margin-bottom:15px }
+		
 		
 		.row-fluid .media-carousel.span6:nth-child(2n + 3) { margin-left : 0px; }
 		.row-fluid .media-carousel.span4:nth-child(3n + 4) { margin-left : 0px; }
@@ -1497,7 +1511,7 @@ class e_media
 			
 				$text .= '<div id="'.$carouselID.'"  class="carousel slide" data-interval="false">';
 				$text .= '{INDICATORS}';
-				$text .= '<div style="margin-top:10px" class="carousel-inner">';	
+				$text .= '<div style="margin-top:10px" class="row admingrid carousel-inner">';
 			
 			
 			//	$text .= "<div class='item active'>";

e107_themes/bootstrap3/admin_style.css

@@ -266,6 +266,10 @@ td.right, th.right 			{ text-align:right }
 
 
 /* media picker */
+.media-carousel-item-video .video-responsive { padding-top: 0; }
+.media-carousel-item-video video { max-width: 100%; max-height: 200px; }
+
+
 
 .mediaselector-preview img,
 .mediaselector-preview video,
@@ -1402,7 +1406,10 @@ li.rssRow > div {
 	padding-top:8px; white-space:nowrap; display:inline-block; width:100%; overflow:hidden;
 }
 
-.media-carousel-item-glyph { width: 64px; height:64px; overflow:hidden; margin-right:5px; margin-bottom:0px }
+
+/*.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

@@ -313,6 +313,8 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 		var $preview = $('#preview');
 		var $path = $('#path');
 
+
+
 		// Remove "selected" class from elements.
 		$('.e-media-select').removeClass('media-select-active');
 
@@ -320,25 +322,25 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 		$this.addClass('media-select-active');
 		$this.closest('img').addClass('active');
 
-		if(bbcode == "file" && $bbcodeHolder.length > 0) // not needed for Tinymce
+		if(bbcode === "file" && $bbcodeHolder.length > 0) // not needed for Tinymce
 		{
 			bbpath = '[file=' + id + ']' + name + '[/file]';
 			$bbcodeHolder.val(bbpath);
 			return;
 		}
 
-		if(bbcode == "video" && $bbcodeHolder.length > 0)
+		if(bbcode === "video" && $bbcodeHolder.length > 0)
 		{
 			bbpath = '[' + bbcode + ']' + path + '[/' + bbcode + ']';
 			$bbcodeHolder.val(bbpath);
 		}
 
-		if(bbcode == "glyph" && $bbcodeHolder.length > 0)
+		if(bbcode === "glyph" && $bbcodeHolder.length > 0)
 		{
 			var $target = $('div#' + target + "_prev", window.top.document);
 
 			// Only if  the triggering element is not an icon-picker.
-			if($target.length == 0 || !$target.hasClass('image-selector'))
+			if($target.length === 0 || !$target.hasClass('image-selector'))
 			{
 				bbpath = '[' + bbcode + ']' + path + '[/' + bbcode + ']';
 				$bbcodeHolder.val(bbpath);
@@ -367,7 +369,7 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 
 		$('img#' + target + "_prev", window.top.document).attr('src', preview); // set new value
 
-		if(type == 'glyph')
+		if(type === 'glyph')
 		{
 			preview = "<span class='" + src + "'>&nbsp;</span>";
 
@@ -381,11 +383,22 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 				$path.attr('value', path);
 			}
 		}
-		else if(type == 'file')
+		else if(type === 'file')
 		{
 			preview = name;
 		}
-		else // image and video
+		else if(type === 'video' || type === 'audio') // mediapicker() method. 
+		{
+			console.log("Preview 392: "+preview);
+
+			if($htmlHolder.length > 0)
+			{
+				$htmlHolder.val(preview);
+			}
+
+			preview = atob(preview).trim();
+		}
+		else // image
 		{
 			e107.mediaManager.eMediaAttribute($this, bbcode);
 
@@ -402,14 +415,20 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
 			{
 				preview = preview.replace(e107_plugins_directory, '');
 			}
-
+			console.log("Mode: Image/Video");
 		}
 
+
+		console.log("Preview: "+preview);
+		console.log("Save Path: "+path);
+
+
+
 		$('div#' + target + "_prev", window.top.document).html(preview); // set new value
 		$('span#' + target + "_prev", window.top.document).html(preview); // set new value
 
 		// @see $frm->filepicker()
-		if(target != '')
+		if(target !== '')
 		{
 			if($('input#' + target) !== undefined)
 			{