From 18f38f0dff93665267bd1497b196d9270fdbdc88 Mon Sep 17 00:00:00 2001
From: shadlaws <shad@shadlaws.com>
Date: Sat, 9 Mar 2013 12:51:45 +0100
Subject: #2046 - Change Gallery over to using MediaElementJS as its movie
 player.

---
 modules/gallery/helpers/gallery_theme.php        |  4 ++
 modules/gallery/models/item.php                  | 72 ++++++++++++------------
 modules/gallery/tests/xss_data.txt               | 14 ++---
 modules/gallery/views/movieplayer-flash.html.php | 50 ----------------
 modules/gallery/views/movieplayer.html.php       | 17 ++++++
 themes/wind/css/screen.css                       |  2 +-
 6 files changed, 66 insertions(+), 93 deletions(-)
 delete mode 100644 modules/gallery/views/movieplayer-flash.html.php
 create mode 100644 modules/gallery/views/movieplayer.html.php

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;
 }
-- 
cgit v1.2.3