audioplayer with renderjs history manage

9593da28 · Xiaowu Zhang · e9454c02 · 9593da28 · 9593da28 · 9593da28
Commit 9593da28 authored Jun 02, 2014 by Xiaowu Zhang
Showing with 54 additions and 43 deletions

src/audioplayer/audioplayer.js src/audioplayer/audioplayer.js +40 -35

src/audioplayer/index.html src/audioplayer/index.html +2 -2

src/audioplayer_control/control.js src/audioplayer_control/control.js +12 -6

No files found.
--- a/src/audioplayer/audioplayer.js
+++ b/src/audioplayer/audioplayer.js
 /*global window, rJS, RSVP, console, $, jQuery, URL, location */
 /*jslint nomen: true*/
+
 (function (window, rJS, $) {
  "use strict";
  var control,
@@ -8,11 +9,20 @@
    volume,
    title,
    totalId = 0,
-    initialUrl;
+    that,
+    next_context,
+    command_context,
+    currentId;
  function nextId() {
-    return Math.floor(Math.random() * totalId);
+    var tmp;
+    do {
+      tmp =  Math.floor(Math.random() * totalId);
+    } while (currentId === tmp);
+    currentId = tmp;
+    return tmp;
  }
  rJS(window)
+    .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
    .allowPublicAcquisition("setCurrentTime", function (value) {
      control.setCurrentTime(value);
    })
@@ -32,6 +42,12 @@
    .allowPublicAcquisition("nextToPlay", function () {
      return nextId();
    })
+    .allowPublicAcquisition("nextTitle", function (tab) {
+      this.aq_pleasePublishMyState({page: tab[0]})
+        .then(function (url) {
+          that.pleaseRedirectMyHash(url);
+        });
+    })
    .allowPublicAcquisition("sendTotalId", function (value) {
      totalId = value[0];  //array parameter
    })
@@ -51,11 +67,9 @@
      animation.stopAnimation();
    })
    .ready(function (g) {
-      var  next_context = g.__element.getElementsByTagName('button')[0],
-        command_context = g.__element.getElementsByTagName('button')[1],
-        index;
-      index = location.href.indexOf('#');
-      initialUrl = location.href.slice(0, index);
+      next_context = g.__element.getElementsByTagName('a')[0];
+      command_context = g.__element.getElementsByTagName('a')[1];
+      that = g;
      RSVP.all([
        g.getDeclaredGadget(
          "control"
@@ -86,15 +100,6 @@
              });
          }, 1000);
          volume.setMax(3);
-          next_context.onclick = function () {
-            var id = nextId();
-            control.setSong(id).then(function () {
-              control.playSong();
-              control.getTitle().then(function (value) {
-                window.history.pushState(null, null, initialUrl + "#" + value);
-              });
-            });
-          };
          command_context.onclick = function () {
            control.isPaused().then(function (paused) {
              if (paused) {
@@ -115,28 +120,28 @@
          title.getSize().then(function (size) {
            title.setPosition(size * 2);
          });
-          window.addEventListener("popstate", function (e) {
-            var href = location.href,
-              name,
-              lastIndex = href.lastIndexOf('#') + 1;
-            if (lastIndex !== href.length) {
-              name = href.slice(lastIndex);
-              control.setSong(name).then(function () {
-                control.playSong();
-              });
-            } else {
-              control.stopSong();
-              animation.stopAnimation();
-              title.setMessage("audio player");
-            }
-          }, false);
-          //xxx
-          window.onhashchange = function () {
-            console.log("hash change\n");
-          };
        })
        .fail(function (e) {
          console.log("[ERROR]: " + e);
        });
    });
+
+  rJS(window)
+    .declareMethod("render", function (options) {
+      if (options.page !== undefined) {
+        control.setSong(options.page).then(function () {
+          control.playSong();
+          control.getTitle();
+        });
+      }
+      control.getTitle(nextId()).then(function (title) {
+        if (title === undefined) {
+          title = "start";
+        }
+        that.aq_pleasePublishMyState({page: title})
+          .then(function (result) {
+            next_context.href = result;
+          });
+      });
+    });
 }(window, rJS, jQuery));
--- a/src/audioplayer/index.html
+++ b/src/audioplayer/index.html
@@ -17,8 +17,8 @@
  <body>
    
    <div class = "audioplayer">
-      <button type="button">next</button>
-      <button type="button">play/pause</button>
+      <a class = "next">next</a>
+      <a class = "command">play/pause</a>
      <!-- data-gadget-sandbox="iframe" -->
      <div class = "control" data-gadget-url="../audioplayer_control/index.html" data-gadget-scope="control">
      </div>

--- a/src/audioplayer_control/control.js
+++ b/src/audioplayer_control/control.js
@@ -8,7 +8,11 @@
  gk.declareMethod('setSong', function (id) {  //configure a song
    var gadget = this;
    if (typeof id === "string") {
-      id = gadget.playlist.indexOf(id);
+      if (id === "start") {
+        id = 0;
+      } else {
+        id = gadget.playlist.indexOf(id);
+      }
    }
    if ((id >= gadget.lenght) || (id < 0)) {
      console.log("invalide play id");
@@ -44,8 +48,11 @@
    .declareMethod('getVolume', function () {
      return this.volume;
    })
-    .declareMethod('getTitle', function () {
-      return this.playlist[this.currentPlayId];
+    .declareMethod('getTitle', function (id) {
+      if (id === undefined) {
+        id = this.currentPlayId;
+      }
+      return this.playlist[id];
    })
    .declareMethod('isPaused', function () {
      return this.audio.paused;
@@ -110,6 +117,7 @@
    })
    .declareAcquiredMethod("sendTotalId", "sendTotalId")
    .declareAcquiredMethod("nextToPlay", "nextToPlay")
+    .declareAcquiredMethod("nextTitle", "nextTitle")
    .declareAcquiredMethod("allNotify", "allNotify")
    .declareAcquiredMethod("showAnimation", "showAnimation")
    .declareAcquiredMethod("stopAnimation", "stopAnimation");
@@ -150,9 +158,7 @@
    g.decoded = true;
    g.audio.onended = function () {
      g.nextToPlay().then(function (id) {
-        g.setSong(id).then(function () {
-          g.playSong(id);
-        });
+        g.nextTitle(g.playlist[id]);
      });
    };
    input_context.onchange = function () {