1
0
mirror of https://github.com/e107inc/e107.git synced 2025-07-25 17:01:43 +02:00

Issue #3200 More work on Media-picker. Version changed to 2.1.9 (git)

This commit is contained in:
Cameron
2018-07-18 14:40:29 -07:00
parent 4264dc6f66
commit 6ab8c5c0f3
7 changed files with 252 additions and 20 deletions

View File

@@ -1382,11 +1382,8 @@ class media_admin_ui extends e_admin_ui
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";
if(deftrue('e_DEBUG_VIDEO'))
{
$text .= "<li class='{$videoActive}'><a data-toggle='tab' href='#core-media-video'>Videos</a></li>\n";
}
}
@@ -1520,27 +1517,21 @@ class media_admin_ui extends e_admin_ui
$text .= $this->youtubeTab();
$text .= "</div>";
if(deftrue('e_DEBUG_VIDEO'))
{
$text .= "<div class='tab-pane clearfix {$videoActive}' id='core-media-video' >";
$text .= "<div class='tab-pane clearfix {$videoActive}' id='core-media-video' >";
// $text .= "<div class='row-fluid'>";
$text .= $this->videoTab();
$text .= "</div>";
}
}
// todo
if($this->getQuery('audio') || $this->getQuery('bbcode') == 'audio')
{
if(deftrue('e_DEBUG_AUDIO'))
{
$text .= "<div class='tab-pane clearfix {$videoActive}' id='core-media-audio' >";
// $text .= "<div class='row-fluid'>";
$text .= $this->audioTab();
$text .= "</div>";
}
}

View File

@@ -1752,7 +1752,15 @@ class news_form_ui extends e_admin_form_ui
}
}
$text = $frm->imagepicker('news_thumbnail[0]', varset($thumbTmp[0]), varset($paths[0]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images');
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[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');

View File

@@ -10,6 +10,6 @@
if (!defined('e107_INIT')) { exit; }
$e107info['e107_version'] = "2.1.8 (git)";
$e107info['e107_version'] = "2.1.9 (git)";
?>

View File

@@ -4624,6 +4624,27 @@ class e_parser
return ($ext === 'jpg' || $ext === 'png' || $ext === 'gif' || $ext === 'jpeg') ? true : false;
}
/**
* @param $file
* @param array $parm
* @return string
*/
public function toAudio($file, $parm=array())
{
$file = $this->replaceConstants($file, 'abs');
$text = '<audio controls style="max-width:100%">
<source src="'.$file.'" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>';
return $text;
}
/**
* Display a Video file.
@@ -4640,6 +4661,8 @@ class e_parser
list($id,$type) = explode(".",$file,2);
$thumb = vartrue($parm['thumb']);
$mode = varset($parm['mode'],false); // tag, url
$pref = e107::getPref();
@@ -4670,6 +4693,13 @@ class e_parser
// $thumbSrc = "https://i1.ytimg.com/vi/".$id."/0.jpg";
$thumbSrc = "https://i1.ytimg.com/vi/".$id."/mqdefault.jpg";
$video = '<iframe class="embed-responsive-item" width="560" height="315" src="//www.youtube.com/embed/'.$id.'?'.$ytqry.'" style="background-size: 100%;background-image: url('.$thumbSrc.');border:0px" allowfullscreen></iframe>';
$url = 'http://youtu.be/'.$id;
if($mode === 'url')
{
return $url;
}
if($thumb === 'tag')
@@ -4682,7 +4712,7 @@ class e_parser
$thumbSrc = "http://i1.ytimg.com/vi/".$id."/maxresdefault.jpg"; // 640 x 480
$filename = 'temp/yt-thumb-'.md5($id).".jpg";
$filepath = e_MEDIA.$filename;
$url = 'http://youtu.be/'.$id;
if(!file_exists($filepath))
{
@@ -4742,11 +4772,22 @@ class e_parser
return '<div class="'.$defClass.' '.vartrue($parm['class']).'">'.$video.'</div>';
}
if($type === 'mp4') //TODO FIXME
if($type === 'mp4')
{
$file = $this->replaceConstants($file, 'abs');
if($mode === 'url')
{
return $file;
}
$width = varset($parm['w'], 320);
$height = varset($parm['h'], 240);
return '
<div class="video-responsive">
<video width="320" height="240" controls>
<video width="'.$width.'" height="'.$height.'" controls>
<source src="'.$file.'" type="video/mp4">
Your browser does not support the video tag.

View File

@@ -1342,6 +1342,146 @@ class e_form
}
/**
* Media Picker
* @param string $name input name
* @param string $default default value
* @param string $parms shortcode parameters
* --- SC Parameter list ---
* - media: if present - load from media category table
* - w: preview width in pixels
* - h: preview height in pixels
* - help: tooltip
* - video: when set to true, will enable the Youtube (video) tab.
* @example $frm->imagepicker('banner_image', $_POST['banner_image'], '', 'banner'); // all images from category 'banner_image' + common images.
* @example $frm->imagepicker('banner_image', $_POST['banner_image'], '', 'media=banner&w=600');
* @return string html output
*/
function mediapicker($name, $default, $parms = '')
{
$tp = e107::getParser();
$name_id = $this->name2id($name);
$meta_id = $name_id."-meta";
if(is_string($parms))
{
if(strpos($parms, '=') === false) $parms = 'media='.$parms;
parse_str($parms, $parms);
}
elseif(empty($parms))
{
$parms = array();
}
if(empty($parms['media']))
{
$parms['media'] = '_common';
}
$title = !empty($parms['help']) ? "title='".$parms['help']."'" : "";
$width = vartrue($parms['w'], 210);
$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 = 'NuIAYHVeFYs.youtube';
// $default = ''; // empty
$type = e107::getMedia()->detectType($default);
$class = '';
switch($type)
{
case "video":
$preview = $tp->toVideo($default, array('w'=>$width, 'h'=> ($height - 50)));
$previewURL = $tp->toVideo($default, array('mode'=>'url'));
break;
case "audio":
$preview = $tp->toAudio($default);
$previewURL = false;
break;
case "image":
/*
if('{' != $default[0]) // legacy path or one without {}
{
list($default_thumb,$default) = $this->imagepickerDefault($default, $parms);
}
$default = $tp->replaceConstants($default, 'abs');
*/
$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 "application": // file.
// $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;*/
default: // blank
}
$cat = $tp->toDB(vartrue($parms['media']));
$ret = "<div class='mediaselector-container e-tip well well-small ".$class."' {$title} style='position:relative;vertical-align:top;margin-right:25px; display:inline-block; width:".$width."px;min-height:".$height."px;'>";
$ret .= "<div id='{$name_id}_prev' class='mediaselector-preview'>";
$parms['class'] = 'btn btn-sm btn-default';
if(empty($preview))
{
$parms['title'] = LAN_ADD;
$editIcon = $this->mediaUrl($cat, $tp->toGlyph('fa-plus', array('fw'=>1)), $name_id,$parms);
$previewIcon = '';
// @todo drag-n-drop upload code in here.
}
else
{
$editIcon = $this->mediaUrl($cat, $tp->toGlyph('fa-edit', array('fw'=>1)), $name_id,$parms);
$previewIcon = "<a title='".LAN_PREVIEW."' class='btn btn-sm btn-default btn-secondary e-modal' data-modal-caption='".LAN_PREVIEW."' href='".$previewURL."'>".$tp->toGlyph('fa-search', array('fw'=>1))."</a>";
}
$ret .= $preview; // image, video. audo tag etc.
$ret .= '</div><div class="overlay">
<div class="text">'.$editIcon.$previewIcon.'</div>
</div>';
$ret .= "</div>\n";
$ret .= "<input type='hidden' name='{$name}' id='{$name_id}' value='{$default}' />";
$ret .= "<input type='hidden' name='mediameta_{$name}' id='{$meta_id}' value='' />";
return $ret;
}
private function imagepickerDefault($path, $parms=array())
{

View File

@@ -29,6 +29,17 @@ class e_media
'video' => e_MEDIA_VIDEO,
'other' => e_MEDIA_FILE
);
protected $mimeExtensions = array(
'text' => array('txt'),
'multipart' => array(),
'application' => array('zip','doc','gz'),
'audio' => array('mp3','wav'),
'image' => array('jpeg','jpg','png','gif', 'svg'),
'video' => array('mp4', 'youtube','youtubepl'),
'other' => array(),
// 'glyph' => array('glyph')
);
function __construct()
{
@@ -1063,9 +1074,31 @@ class e_media
}
return $dir;
}
/**
* detected Media Type from Media URL
* @param $file
* @return int|string
*/
public function detectType($mediaURL)
{
list($id,$type) = explode(".",$mediaURL,2);
foreach($this->mimeExtensions as $key=>$exts)
{
if(!in_array($type, $exts))
{
continue;
}
return $key;
}
return null;
}
public function mediaData($sc_path)
{
if(!$sc_path) return array();

View File

@@ -265,6 +265,25 @@ td.right, th.right { text-align:right }
.chzn-container { border: 1px solid #ddd; }
/* media picker */
.mediaselector-preview img,
.mediaselector-preview video,
.mediaselector-preview audio { max-width: 100% }
.mediaselector-preview video { position: absolute; top: 0; }
.mediaselector-preview audio { height: 70px }
.mediaselector-preview i { padding: 20% 40%; }
.mediaselector-container .overlay {
position: absolute;
bottom: 5px;
text-align: right;
display: block;
width: 100%;
right: 10px;
}
/* image picker */
.imgselector-container {