mirror/php-e107
1
0
Fork 0
mirror of https://github.com/e107inc/e107.git synced 2025-01-17 20:58:30 +01:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cameron 2018-07-19 12:43:04 -07:00
parent 6ab8c5c0f3
commit cd8ddfd54a
6 changed files with 140 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
e107_admin/image.php
View File

@ -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
@ -1385,7 +1385,13 @@ class media_admin_ui extends e_admin_ui
$text .= "<li class='{$videoActive}'><a data-toggle='tab' href='#core-media-video'>Videos</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(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',

9
e107_handlers/e_parse_class.php
View File

@ -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>

11
e107_handlers/form_handler.php
View File

@ -1006,7 +1006,12 @@ class e_form
if(!empty($extras['video']))
{
$url .= ($extras['video'] == 2) ? "&amp;video=2" : "&amp;video=1";
}
}
if(!empty($extras['audio']))
{
$url .= "&amp;audio=1";
}
if(!empty($extras['path']) && $extras['path'] == '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

40
e107_handlers/media_class.php
View File

@ -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>
<div class="clearfix" style="text-align:center">';
</video>';*/
$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");
$text .= '<audio controls>
// $mime = vartrue($data['mime'],"audio/mpeg");
$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>
<div class="clearfix" style="text-align:center">';
</audio>';*/
$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'>";

9
e107_themes/bootstrap3/admin_style.css
View File

@ -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 }

37
e107_web/js/core/mediaManager.js
View File

@ -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)
{