menismu · menismu · Nov 26, 2019 · Mar 7, 2019 · Mar 11, 2019 · Mar 11, 2019
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,5 @@ dist
 \.\#*
 \#*\#
 package-lock.json
-node_modules
+node_modules
+.env
diff --git a/Makefile b/Makefile
@@ -14,13 +14,14 @@ VERSION ?= $(shell git show -s --pretty=format:%h)
 
 RHINO ?= java -jar ${BUILD_DIR}/js.jar
 
-CLOSURE_COMPILER = ${BUILD_DIR}/google-compiler-20100917.jar
+# CLOSURE_COMPILER = ${BUILD_DIR}/google-compiler-20100917.jar
+CLOSURE_COMPILER = google-closure-compiler
 compile = @@${MINJAR} $(1) \
 	                    --compilation_level SIMPLE_OPTIMIZATIONS \
 	                    --js_output_file $(2)
 
 # minify
-MINJAR ?= java -jar ${CLOSURE_COMPILER}
+MINJAR ?= npx ${CLOSURE_COMPILER}
 
 # source
 POPCORN_SRC = ${PREFIX}/popcorn.js

diff --git a/build/google-compiler-20100917.jar b/build/google-compiler-20100917.jar
diff --git a/package.json b/package.json
@@ -7,7 +7,10 @@
     "url": "https://github.com/menismu/popcorn-js"
   },
   "dependencies": {
-    "express": "^4.16.4"
+    "dotenv": "^6.2.0",
+    "express": "^4.16.4",
+    "google-closure-compiler": "^20191027.0.0",
+    "http-server": "^0.11.1"
   },
   "license": "MIT"
 }
diff --git a/plugins/figure/popcorn.figure.html b/plugins/figure/popcorn.figure.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Popcorn Figure Plug-in Demo</title>
+  <script src="../../popcorn.js"></script>
+  <script src="popcorn.figure.js"></script>
+  <script>
+   document.addEventListener( "DOMContentLoaded", function() {
+
+     var p = Popcorn( "#video" )
+       .volume( 0 )
+       .play()
+       .figure({
+      	 // seconds
+         start: 1,
+         // seconds
+         end: 15,
+         href: "http://www.drumbeat.org/",
+         src: "https://www.drumbeat.org/media//figures/drumbeat-logo-splash.png",
+         text: "DRUMBEAT",
+         target: "figurediv"
+       })
+       .figure({
+         id: "testing",
+      	 // seconds
+         start: 5,
+         // seconds
+         end: 45,
+         text: "this is just a cat",
+         // no href
+         src: 'https://cdn.pixabay.com/photo/2017/11/14/13/06/kitty-2948404_960_720.jpg',
+         target: "figurediv"
+       });
+   }, false);
+
+  </script>
+</head>
+<body>
+  <h1 id="qunit-header">Popcorn Figure Plug-in Demo</h1>
+  <p> Two figures will appear at 5 seconds.</p>
+  <p> First one (with an overlayed text) will disappear at 15 seconds.</p>
+  <p> Second one (without an overlayed text) will disappear at 45 seconds.</p>
+  <div>
+    <video id="video"
+      controls
+      width="250px"
+      poster="../../test/poster.png">
+
+      <source id="mp4"
+        src="../../test/trailer.mp4"
+        type='video/mp4; codecs="avc1, mp4a"'>
+
+      <source id="ogv"
+        src="../../test/trailer.ogv"
+        type='video/ogg; codecs="theora, vorbis"'>
+
+      <p>Your user agent does not support the HTML5 Video element.</p>
+
+    </video>
+  </div>
+  <div style="width:400px; height:400px" id="figurediv"></div>
+
+</body>
+</html>
diff --git a/plugins/figure/popcorn.figure.js b/plugins/figure/popcorn.figure.js
@@ -0,0 +1,151 @@
+// PLUGIN: FIGURE
+
+(function ( Popcorn ) {
+
+/**
+ * Figures popcorn plug-in
+ * Shows an figure element
+ * Options parameter will need a start, end, href, target and src.
+ * Start is the time that you want this plug-in to execute
+ * End is the time that you want this plug-in to stop executing
+ * href is the url of the destination of a anchor - optional
+ * Target is the id of the document element that the iframe needs to be attached to,
+ * this target element must exist on the DOM
+ * Src is the url of the image that you want to display
+ * text is the overlayed text on the figure - optional
+ *
+ * @param {Object} options
+ *
+ * Example:
+   var p = Popcorn('#video')
+      .figure({
+        start: 5, // seconds
+        end: 15, // seconds
+        href: 'http://www.drumbeat.org/',
+        src: 'http://www.drumbeat.org/sites/default/files/domain-2/drumbeat_logo.png',
+        text: 'DRUMBEAT',
+        target: 'figurediv'
+      } )
+ *
+ */
+
+  let i=0;
+
+  Popcorn.plugin( "figure", function (options) {
+
+    return {
+      _setup: function( options ) {
+        // console.log(options);
+      let figure = options.figure =  document.createElement( "figure" ),
+          img = document.createElement( "img" ),
+          target = document.getElementById( options.target );
+      figure.appendChild(img);
+      figure.style.display = "none";
+      figure.classList.add("figure-plugin");
+      figure.id = options.id || `popcorn-figure${i}`;
+      i++;
+      if (options.text) {
+        let caption = document.createElement ("figcaption");
+        caption.innerHTML = options.text;
+        figure.appendChild(caption);
+      }
+        // options.anchor = document.createElement( "a" );
+        // options.anchor.style.position = "relative";
+        // options.anchor.style.textDecoration = "none";
+        // options.anchor.style.display = "none";
+
+        // add the widget's div to the target div.
+        // if target is <video> or <audio>, create a container and routinely
+        // update its size/position to be that of the media
+        if ( target ) {
+            target.appendChild( options.figure );
+        }
+
+
+        img.src = options.src;
+
+        // options.toString = function() {
+        //   var string = options.src || options._natives.manifest.options.src[ "default" ],
+        //       match = string // .replace( /.*\//g, "" );
+        //   return match.length ? match : string;
+        // };
+      },
+
+      /**
+       * @member figure
+       * The start function will be executed when the currentTime
+       * of the video  reaches the start time provided by the
+       * options variable
+       */
+    start: function( event, options ) {
+      // options.anchor.style.display = "inline";
+      options.figure.style.display = "block";
+      },
+      /**
+       * @member figure
+       * The end function will be executed when the currentTime
+       * of the video  reaches the end time provided by the
+       * options variable
+       */
+      end: function( event, options ) {
+        options.figure.style.display = "none";
+      },
+      _teardown: function( options ) {
+        if ( options.trackedContainer ) {
+          options.trackedContainer.destroy();
+        }
+        else if ( options.anchor.parentNode ) {
+          options.figure.parentNode.removeChild( options.figure );
+        }
+      }
+    };
+  },
+
+  {
+    about: {
+      name: "Popcorn Figure Plugin",
+      version: "0.1",
+      author: "Scott Downe, Matt Price",
+      website: "http://scottdowne.wordpress.com/"
+    },
+    options: {
+      start: {
+        elem: "input",
+        type: "number",
+        label: "Start"
+      },
+      end: {
+        elem: "input",
+        type: "number",
+        label: "End"
+      },
+      src: {
+        elem: "input",
+        type: "url",
+        label: "Figure URL",
+        "default": "http://mozillapopcorn.org/wp-content/themes/popcorn/images/for_developers.png"
+      },
+      href: {
+        elem: "input",
+        type: "url",
+        label: "Link",
+        "default": "http://mozillapopcorn.org/wp-content/themes/popcorn/images/for_developers.png",
+        optional: true
+      },
+      id: {
+        elem: "input",
+        type: "text",
+        label: "Figure ID",
+        optional: true
+      },
+      target: "figure-container",
+      text: {
+        elem: "input",
+        type: "text",
+        label: "Caption",
+        "default": "popcorn-container",
+        optional: true
+      }
+    }
+  });
+})( Popcorn );
diff --git a/plugins/figure/popcorn.figure.unit.html b/plugins/figure/popcorn.figure.unit.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Popcorn Imageredux Plug-in Test</title>
+  <link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
+  <script src="../../test/qunit/qunit.js"></script>
+  <!--
+    do not move - this must be called immediately prior to
+    popcorn-api-draft.js
+  -->
+  <script src="../../popcorn.js"></script>
+  <script src="popcorn.imageredux.js"></script>
+  <script src="popcorn.imageredux.unit.js"></script>
+  <script src="../../test/inject.js"></script>
+  <script src="../../test/popcorn.inject.js"></script>
+</head>
+<body>
+  <h1 id="qunit-header">Popcorn Imageredux Plug-in Test</h1>
+  <h2 id="qunit-banner"></h2>
+  <div id="qunit-testrunner-toolbar"></div>
+  <h2 id="qunit-userAgent"></h2>
+  <ol id="qunit-tests"></ol>
+  <div id="qunit-fixture">  </div>
+
+  <video id="video"
+    controls
+    width="250px"
+    poster="../../test/poster.png">
+
+    <source id="mp4"
+      src="../../test/trailer.mp4"
+      type='video/mp4; codecs="avc1, mp4a"'>
+
+    <source id="ogv"
+      src="../../test/trailer.ogv"
+      type='video/ogg; codecs="theora, vorbis"'>
+
+    <source idl"webm"
+      src="../../test/trailer.webm"
+      type='video/webm; codecs="vp8, vorbis"'>
+
+    <p>Your user agent does not support the HTML5 Video element.</p>
+
+  </video>
+  <div id="imagereduxdiv"></div>
+  <div id="zerostart"></div>
+  <div style="width:400px; height:400px" id="withsize"></div>
+  <div style="width:400px; height:400px">
+    <div id="withoutsizeinsize"></div>
+  </div>
+</body>
+</html>