Finally figured out how popcorn's built-in baseplayer works. Now usin…

…g that instead of popcorn.baseplayer.js. Also trivially subclassing it as tutorialplayer.

index.html

@@ -25,7 +25,6 @@
 <script src="codemirror2/mode/htmlmixed/htmlmixed.js"></script>
 <script src="popcorn.js"></script>
 <script src="popcorn.simplecode.js"></script>
-<script src="popcorn.baseplayer.js"></script>
 <script src="popcorn.undoable.js"></script>
 <script src="tutorial.js"></script>
 <script src="tutorial-script.js"></script>

main.js

@@ -34,10 +34,6 @@ function makePlayer(div, pop) {
   });
 
   media.addEventListener("timeupdate", function() {
-    if (this.currentTime >= this.duration) {
-      this.currentTime = this.duration;
-      this.pause();
-    }
     updatePlayerUI();
   });
 }

tutorial.js

@@ -2,11 +2,29 @@
 // tutorial-style interactive experiences that "script" a Webmaking
 // application's behavior.
 
+// Our tutorial player is an almost trivial subclass of Popcorn's baseplayer.
+Popcorn.player("tutorialplayer", {
+  _setup: function() {
+    // By default, the baseplayer won't actually stop the video when
+    // the end has been reached, so we'll have to do that ourselves.
+    var alreadyTryingToPause = false;
+
+    this.addEventListener("timeupdate", function() {
+      if (!alreadyTryingToPause && this.currentTime >= this.duration) {
+        alreadyTryingToPause = true;
+        this.currentTime = this.duration;
+        this.pause();
+        alreadyTryingToPause = false;
+      }
+    });
+  }
+});
+
 var Tutorial = {
   // Internal list of commands/events for the tutorial movie.
   _commands: [],
   // The Popcorn instance representing the tutorial movie.
-  pop: Popcorn(new Popcorn.baseplayer()),
+  pop: Popcorn.tutorialplayer(),
   // The CodeMirror editor instance that will be manipulated over
   // the course of the movie.
   editor: null,