diff options
| -rw-r--r-- | modules/gallery/helpers/gallery_theme.php | 4 | ||||
| -rw-r--r-- | modules/gallery/models/item.php | 72 | ||||
| -rw-r--r-- | modules/gallery/tests/xss_data.txt | 14 | ||||
| -rw-r--r-- | modules/gallery/views/movieplayer-flash.html.php | 50 | ||||
| -rw-r--r-- | modules/gallery/views/movieplayer.html.php | 17 | ||||
| -rw-r--r-- | themes/wind/css/screen.css | 2 |
6 files changed, 66 insertions, 93 deletions
diff --git a/modules/gallery/helpers/gallery_theme.php b/modules/gallery/helpers/gallery_theme.php index 3c6d71e9..e5f6b0b4 100644 --- a/modules/gallery/helpers/gallery_theme.php +++ b/modules/gallery/helpers/gallery_theme.php @@ -49,6 +49,10 @@ class gallery_theme_Core { . $theme->script("l10n_client.js"); } + // Add MediaElementJS library + $buf .= $theme->script("mediaelementjs/mediaelement.js"); + $buf .= $theme->script("mediaelementjs/mediaelementplayer.js"); + $buf .= $theme->css("mediaelementjs/mediaelementplayer.css"); $buf .= $theme->css("uploadify/uploadify.css"); return $buf; } diff --git a/modules/gallery/models/item.php b/modules/gallery/models/item.php index e8afaec3..1e16d307 100644 --- a/modules/gallery/models/item.php +++ b/modules/gallery/models/item.php @@ -737,40 +737,42 @@ class Item_Model_Core extends ORM_MPTT { } /** - * Return a view for movies. By default this is a Flowplayer v3 <script> tag, but - * movie_img events can override this and provide their own player/view. If no player/view - * is found and the movie is unsupported by Flowplayer v3, this returns a simple download link. + * Return a view for movies. By default, this uses MediaElementPlayer on an HTML5-compliant + * <video> object, but movie_img events can override this and provide their own player/view. + * If none are found and the player can't play the movie, this returns a simple download link. * @param array $extra_attrs * @return string */ public function movie_img($extra_attrs) { - $max_size = module::get_var("gallery", "resize_size", 640); + $player_width = module::get_var("gallery", "resize_size", 640); $width = $this->width; $height = $this->height; if ($width == 0 || $height == 0) { - // Not set correctly, likely because ffmpeg isn't available. Making the window 0x0 causes the - // video to be effectively unviewable. So, let's guess: set width to max_size and guess a - // height (using 4:3 aspect ratio). Once the video metadata is loaded, js in - // movieplayer-flash.html.php will correct these values. - $width = $max_size; + // Not set correctly, likely because FFmpeg isn't available. Making the window 0x0 causes the + // player to be unviewable during loading. So, let's guess: set width to player_width and + // guess a height (using 4:3 aspect ratio). Once the video metadata is loaded, the player + // will correct these values. + $width = $player_width; $height = ceil($width * 3/4); } - $attrs = array_merge(array("id" => "g-item-id-{$this->id}"), $extra_attrs, - array("class" => "g-movie")); + $div_attrs = array_merge(array("id" => "g-item-id-{$this->id}"), $extra_attrs, + array("class" => "g-movie", "style" => "width: {$player_width}px;")); // Run movie_img events, which can either: - // - generate a view, which is used in place of the standard Flowplayer v3 player + // - generate a view, which is used in place of the standard MediaElementPlayer // (use view variable) - // - alter the arguments sent to the standard player - // (use fp_flash_params and fp_flash_config variables) + // - change the file sent to the player + // (use width, height, url, and filename variables) + // - alter the arguments sent to the player + // (use video_attrs and player_options variables) $movie_img = new stdClass(); - $movie_img->max_size = $max_size; $movie_img->width = $width; $movie_img->height = $height; - $movie_img->attrs = $attrs; $movie_img->url = $this->file_url(true); - $movie_img->fp_flash_params = array(); // add'l Flowplayer params values (will be json encoded) - $movie_img->fp_flash_config = array(); // add'l Flowplayer config values (will be json encoded) + $movie_img->filename = $this->name; + $movie_img->div_attrs = $div_attrs; // attrs for the outer .g-movie <div> + $movie_img->video_attrs = array(); // add'l <video> attrs + $movie_img->player_options = array(); // add'l MediaElementPlayer options (will be json encoded) $movie_img->view = array(); module::event("movie_img", $movie_img, $this); @@ -778,26 +780,26 @@ class Item_Model_Core extends ORM_MPTT { // View generated - use it $view = implode("\n", $movie_img->view); } else { - // View NOT generated - see if filetype supported by Flowplayer v3 - // Note that the extension list below is hard-coded and doesn't use the legal_file helper - // since anything else will not work in Flowplayer v3. - if (in_array(strtolower(pathinfo($this->name, PATHINFO_EXTENSION)), - array("flv", "mp4", "m4v", "mov", "f4v"))) { - // Filetype supported by Flowplayer v3 - use it (default) - $view = new View("movieplayer-flash.html"); - $view->max_size = $movie_img->max_size; + // View not generated - see if the filetype is supported by MediaElementPlayer. + // Note that the extension list below doesn't use the legal_file helper but rather + // is hard-coded based on player specifications. + $extension = strtolower(pathinfo($movie_img->filename, PATHINFO_EXTENSION)); + if (in_array($extension, array("webm", "ogv", "mp4", "flv", "m4v", "mov", "f4v", "wmv"))) { + // Filetype supported by MediaElementPlayer - use it (default) + $view = new View("movieplayer.html"); $view->width = $movie_img->width; $view->height = $movie_img->height; - $view->attrs = $movie_img->attrs; - $view->url = $movie_img->url; - $view->fp_flash_params = $movie_img->fp_flash_params; - $view->fp_flash_config = $movie_img->fp_flash_config; + $view->div_attrs = $movie_img->div_attrs; + $view->video_attrs = array_merge(array("controls" => "controls", "autoplay" => "autoplay", + "style" => "max-width: 100%"), $movie_img->video_attrs); + $view->source_attrs = array("type" => legal_file::get_movie_types_by_extension($extension), + "src" => $movie_img->url); + $view->player_options = $movie_img->player_options; } else { - // Filetype NOT supported by Flowplayer v3 - display download link - $attrs = array_merge($attrs, array("style" => "width: {$max_size}px;", - "download" => $this->name, // forces download (HTML5 only) - "class" => "g-movie g-movie-download-link")); - $view = html::anchor($this->file_url(true), t("Click here to download item."), $attrs); + // Filetype not supported by MediaElementPlayer - display download link + $div_attrs["class"] .= " g-movie-download-link"; // add class + $div_attrs["download"] = $movie_img->filename; // force download (HTML5 only) + $view = html::anchor($movie_img->url, t("Click here to download item."), $div_attrs); } } return $view; diff --git a/modules/gallery/tests/xss_data.txt b/modules/gallery/tests/xss_data.txt index 9c796999..7e77a70b 100644 --- a/modules/gallery/tests/xss_data.txt +++ b/modules/gallery/tests/xss_data.txt @@ -223,13 +223,13 @@ modules/gallery/views/menu_dialog.html.php 5 DIRTY_JS $menu- modules/gallery/views/menu_link.html.php 3 DIRTY $menu->css_id?"id='{$menu->css_id}'":"" modules/gallery/views/menu_link.html.php 4 DIRTY_ATTR $menu->css_class modules/gallery/views/menu_link.html.php 5 DIRTY_JS $menu->url -modules/gallery/views/movieplayer-flash.html.php 3 DIRTY html::anchor($url,"",$attrs) -modules/gallery/views/movieplayer-flash.html.php 5 DIRTY_JS $attrs["id"] -modules/gallery/views/movieplayer-flash.html.php 6 DIRTY_JS $max_size -modules/gallery/views/movieplayer-flash.html.php 24 DIRTY_JS url::abs_file("lib/flowplayer-flash/flowplayer.swf") -modules/gallery/views/movieplayer-flash.html.php 31 DIRTY_JS url::abs_file("lib/flowplayer-flash/flowplayer.pseudostreaming-byterange.swf") -modules/gallery/views/movieplayer-flash.html.php 49 DIRTY_JS $width -modules/gallery/views/movieplayer-flash.html.php 49 DIRTY_JS $height +modules/gallery/views/movieplayer.html.php 2 DIRTY html::attributes($div_attrs) +modules/gallery/views/movieplayer.html.php 3 DIRTY html::attributes($video_attrs) +modules/gallery/views/movieplayer.html.php 4 DIRTY html::attributes($source_attrs) +modules/gallery/views/movieplayer.html.php 8 DIRTY_JS $div_attrs["id"] +modules/gallery/views/movieplayer.html.php 10 DIRTY_JS $width +modules/gallery/views/movieplayer.html.php 11 DIRTY_JS $height +modules/gallery/views/movieplayer.html.php 14 DIRTY_JS url::abs_file("lib/mediaelementjs/") modules/gallery/views/permissions_browse.html.php 3 DIRTY_JS url::site("permissions/form/__ITEM__") modules/gallery/views/permissions_browse.html.php 16 DIRTY_JS url::site("permissions/change/__CMD__/__GROUP__/__PERM__/__ITEM__?csrf=$csrf") modules/gallery/views/permissions_browse.html.php 43 DIRTY_ATTR $parent->id diff --git a/modules/gallery/views/movieplayer-flash.html.php b/modules/gallery/views/movieplayer-flash.html.php deleted file mode 100644 index 12303bf4..00000000 --- a/modules/gallery/views/movieplayer-flash.html.php +++ /dev/null @@ -1,50 +0,0 @@ -<?php defined("SYSPATH") or die("No direct script access.") ?> -<script type="text/javascript" src="<?= url::file("lib/flowplayer-flash/flowplayer.js") ?>"></script> -<?= html::anchor($url, "", $attrs) ?> -<script type="text/javascript"> - var id = "<?= $attrs["id"] ?>"; - var max_size = <?= $max_size ?>; - // set the size of the movie html anchor, taking into account max_size and height of control bar - function set_movie_size(width, height) { - if((width > max_size) || (height > max_size)) { - if (width > height) { - height = Math.ceil(height * max_size / width); - width = max_size; - } else { - width = Math.ceil(width * max_size / height); - height = max_size; - } - } - height += flowplayer(id).getConfig().plugins.controls.height; - $("#" + id).css({width: width, height: height}); - }; - // setup flowplayer - flowplayer(id, - $.extend(true, { - "src": "<?= url::abs_file("lib/flowplayer-flash/flowplayer.swf") ?>", - "wmode": "transparent", - "provider": "pseudostreaming" - }, <?= json_encode($fp_flash_params) ?>), - $.extend(true, { - "plugins": { - "pseudostreaming": { - "url": "<?= url::abs_file("lib/flowplayer-flash/flowplayer.pseudostreaming-byterange.swf") ?>" - }, - "controls": { - "autoHide": "always", - "hideDelay": 2000, - "height": 24 - } - }, - "clip": { - "scaling": "fit", - "onMetaData": function(clip) { - // set movie size a second time using actual size from metadata - set_movie_size(parseInt(clip.metaData.width), parseInt(clip.metaData.height)); - } - } - }, <?= json_encode($fp_flash_config) ?>) - ).ipad(); - // set movie size using width and height passed from movie_img function - $("document").ready(set_movie_size(<?= $width ?>, <?= $height ?>)); -</script> diff --git a/modules/gallery/views/movieplayer.html.php b/modules/gallery/views/movieplayer.html.php new file mode 100644 index 00000000..f78cc91a --- /dev/null +++ b/modules/gallery/views/movieplayer.html.php @@ -0,0 +1,17 @@ +<?php defined("SYSPATH") or die("No direct script access.") ?> +<div <?= html::attributes($div_attrs) ?>> + <video <?= html::attributes($video_attrs) ?>> + <source <?= html::attributes($source_attrs) ?>> + </video> +</div> +<script type="text/javascript"> + $("#<?= $div_attrs["id"] ?> video").mediaelementplayer( + $.extend(true, { + defaultVideoWidth: <?= $width ?>, + defaultVideoHeight: <?= $height ?>, + startVolume: 1.0, + features: ["playpause", "progress", "current", "duration", "volume", "fullscreen"], + pluginPath: "<?= url::abs_file("lib/mediaelementjs/") ?>" + }, <?= json_encode($player_options) ?>) + ); +</script> diff --git a/themes/wind/css/screen.css b/themes/wind/css/screen.css index cbeaed34..fa1704b0 100644 --- a/themes/wind/css/screen.css +++ b/themes/wind/css/screen.css @@ -531,7 +531,7 @@ td { } #g-item img.g-resize, -#g-item a.g-movie { +#g-item .g-movie { display: block; margin: 0 auto; } |