improve interface & respect renderjs use regles

src/audioplayer/audioplayer.css

-.progress_volume{
-    position: absolute;
-    top: 200px;
-    margin: 30px 0 20px 0; 
-    left :-100px; 
-}
-
-input.notice{
-    background: black;
-    color: white;
-    position: absolute;
-    top: 30px;
-}
-
-.progress_time{
-    position: relative;
-    top: -180px;
-    margin: 50px 0 20px 0;
-}
-

src/audioplayer/audioplayer.js

@@ -7,287 +7,120 @@
   $.mobile.linkBindingEnabled = false;
   $.mobile.hashListeningEnabled = false;
   $.mobile.pushStateEnabled = false;
-  var control,
-    animation,
-    time,
-    volume,
-    title,
-    io,
-    error,
-    totalId = -1,
-    that,
-    next_context,
-    play_context,
-    addMusic_context,
-    list_context,
-    currentId = -1,
-    initializeFlag = false,
-    list,
-    titleSave,
-    playlist = {};
-
-  function nextId() {
-    if (totalId <= 0) {
-      return -1;
-    }
-    currentId += 1;
-    currentId %= totalId;
-    return currentId;
-  }
-
-  function orient() {
-    if (window.orientation === 0 || window.orientation === 180) {
-      $("body").attr("class", "portrait");
-      window.orientation = 'portrait';
-      return;
-    }
-    if (window.orientation === 90 || window.orientation === -90) {
-      $("body").attr("class", "landscape");
-      window.orientation = 'landscape';
+  function disablePage(g) {
+    var overlay = document.createElement('div'),
+      loader = document.createElement('div'),
+      controlPanel = g.__element.getElementsByClassName("page")[0],
+      i = 0,
+      circle;
+    overlay.className = 'overlay';
+    loader.className = 'loader';
+    while (i < 5) {
+      circle = document.createElement('div');
+      circle.className = 'circle';
+      loader.appendChild(circle);
+      i += 1;
     }
+    overlay.appendChild(loader);
+    controlPanel.appendChild(overlay);
   }
 
   rJS(window)
     .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
-    .allowPublicAcquisition("setCurrentTime", function (value) {
-      control.setCurrentTime(value[0]);
-    })
-    .allowPublicAcquisition("setVolume", function (value) {
-      control.setVolume(value[0]);
+    .allowPublicAcquisition("plEnablePage", function () {
+      var controlPanel = this.__element.getElementsByClassName('page')[0];
+      while (controlPanel.firstChild) {
+        controlPanel.removeChild(controlPanel.firstChild);
+      }
     })
-    .allowPublicAcquisition("getFFTValue", function () {
-      return control.getFFTValue().then(function (value) {
-        return value;
-      });
+    .allowPublicAcquisition("plDisablePage", function () {
+      disablePage(this);
     })
-    .allowPublicAcquisition("plShowPage", function (param_list) {
-      return this.aq_pleasePublishMyState({page: param_list[0]});
+    .allowPublicAcquisition("displayThisPage", function (param_list) {
+      // Hey, I want to display this page
+      return this.aq_pleasePublishMyState(param_list[0]);
     })
-    .allowPublicAcquisition("nextToPlay", function () {
-      var id = nextId(),
-        name = playlist.url[id];
-      control.setSong("http://localhost:8080/" + name)
-        .then(function () {
-          control.playSong();
-          title.setMessage(playlist.name[id]);
-          animation.showAnimation();
+    .allowPublicAcquisition("allDocs", function (param_list) {
+      return this.getDeclaredGadget("jio")
+        .push(function (jio_gadget) {
+          return jio_gadget.allDocs.apply(jio_gadget, param_list);
         });
-      /*      io.getIO(name).then(function (file) {
-        control.setSong(URL.createObjectURL(file)).then(function () {
-          control.playSong();
-          title.setMessage(playlist.name[id]);
-          animation.showAnimation();
+    })
+    .allowPublicAcquisition("jio_post", function (param_list) {
+      return this.getDeclaredGadget("jio")
+        .push(function (jio_gadget) {
+          return jio_gadget.post.apply(jio_gadget, param_list);
         });
-      });*/
     })
-    .allowPublicAcquisition("sendPlaylist", function (value) {
-      playlist = value[0];
-      totalId =  playlist.url.length;  //array parameter
-      initializeFlag = true;
-      that.render();
+    .allowPublicAcquisition("jio_putAttachment", function (param_list) {
+      return this.getDeclaredGadget("jio")
+        .push(function (jio_gadget) {
+          return jio_gadget.putAttachment.apply(jio_gadget, param_list);
+        });
     })
-    .allowPublicAcquisition("sendTotalTime", function (value) {
-      time.setMax(value[0]);
+    .allowPublicAcquisition("jio_getAttachment", function (param_list) {
+      return this.getDeclaredGadget("jio")
+        .push(function (jio_gadget) {
+          return jio_gadget.getAttachment.apply(jio_gadget, param_list);
+        });
     })
-    .ready(function (g) {
-      var array = g.__element.getElementsByTagName('a');
-      next_context = array[0];
-      play_context = array[1];
-      addMusic_context = array[array.length - 2];
-      list_context = array[array.length - 1];
-      that = g;
-      window.addEventListener("orientationchange", function (e) {
-        orient();
-      });
-      RSVP.all([
-        g.getDeclaredGadget(
-          "control"
-        ),
-        g.getDeclaredGadget(
-          "animation"
-        ),
-        g.getDeclaredGadget(
-          "time"
-        ),
-        g.getDeclaredGadget(
-          "volume"
-        ),
-        g.getDeclaredGadget(
-          "title"
-        ),
-        g.getDeclaredGadget(
-          "io"
-        ),
-        g.getDeclaredGadget(
-          "error"
-        ),
-        g.getDeclaredGadget(
-          "playlist"
-        )
-      ])
-        .then(function (all_param) {
-          control = all_param[0];
-          animation = all_param[1];
-          time = all_param[2];
-          volume = all_param[3];
-          title = all_param[4];
-          io = all_param[5];
-          error = all_param[6];
-          list = all_param[7];
-          error.noDisplay();
-          io.noDisplay();
-          that.display();
-          list.noDisplay();
-          window.setInterval(function () {
-            control.getCurrentTime()
-              .then(function (e) {
-                time.setValue(e);
-              });
-          }, 1000);
-          volume.setMax(3);
-          that.showPage("stop").then(function (result) {
-            play_context.href = result;
-          });
-          that.showPage("addMusic").then(function (result) {
-            addMusic_context.href = result;
-          });
-          //volume configure
-          control.getVolume().then(function (value) {
-            volume.setValue(value);
-          });
-
-
-        //title configure
-          title.setMessage("audio player");
-          title.getSize().then(function (size) {
-            title.setPosition(size * 2);
-          });
-        })
-        .fail(function (e) {
-          console.log("[ERROR]: " + e);
+    .allowPublicAcquisition("jio_get", function (param_list) {
+      return this.getDeclaredGadget("jio")
+        .push(function (jio_gadget) {
+          return jio_gadget.get.apply(jio_gadget, param_list);
         });
+    })
+    .allowPublicAcquisition("displayThisTitle", function (param_list) {
+      var header = this.__element.getElementsByTagName("h1")[0];
+      header.innerHTML = param_list[0];
     });
 
   rJS(window)
-    .declareMethod("display", function (options) {
-      title.display();
-      time.display();
-      volume.display();
-      animation.display();
-      next_context.style.display = "";
-      play_context.style.display = "";
-      addMusic_context.style.display = "";
-      list_context.style.display = "";
-    })
-    .declareMethod("noDisplay", function (options) {
-      title.noDisplay();
-      time.noDisplay();
-      volume.noDisplay();
-      animation.noDisplay();
-      next_context.style.display = "none";
-      play_context.style.display = "none";
-      addMusic_context.style.display = "none";
-      list_context.style.display = "none";
-    })
-    .declareMethod("showPage", function (param) {
-      return this.aq_pleasePublishMyState({page: param});
+    .ready(function (g) {
+      var jio_gadget;
+      return g.getDeclaredGadget("jio")
+        .push(function (gadget) {
+          jio_gadget = gadget;
+          return jio_gadget.createJio(
+            { "type" : "indexeddb",
+              "database": "test"}
+          );
+        });
     })
     .declareMethod("render", function (options) {
-      var id,
-        name,
-        urlDemand;
-      if (initializeFlag === false) {
-        return;
+      var gadget = this,
+        page_gadget,
+        element,
+        page_element;
+      element = gadget.__element
+        .getElementsByClassName("gadget_container")[0];
+      if (options.page === undefined) {
+        // Redirect to the about page
+        return gadget.aq_pleasePublishMyState({page: "playlist"})
+          .push(gadget.pleaseRedirectMyHash.bind(gadget));
       }
-      id = nextId();
-      name = playlist.name[id];
-      that.showPage(name)
-        .then(function (result) {
-          next_context.href = result;
-        });
-
-      if (options.page !== undefined) {
-        if (options.page === "addMusic") {
-          animation.stopAnimation();
-          that.noDisplay();
-          list.noDisplay();
-          io.display();
-          return;
+      return gadget.declareGadget(
+        "../audioplayer_" + options.page + "/index.html"
+      ).push(function (g) {
+        disablePage(gadget);
+        page_gadget = g;
+        return page_gadget.getElement();
+      }).push(function (result) {
+        page_element = result;
+        while (element.firstChild) {
+          element.removeChild(element.firstChild);
         }
-
-        if (options.page === "playlist") {
-          animation.stopAnimation();
-          that.noDisplay();
-          io.noDisplay();
-          list.initList(playlist);
-          list.display();
-          return;
+        element.appendChild(page_element);
+        $(element).trigger('create');
+        if (page_gadget.render !== undefined) {
+          return page_gadget.render(options);
         }
-
-        if (options.id === "delete") {
-          io.removeIO(options.page)
-            .then(function () {
-              list.initList(playlist);
-            });
-          return;
+      }).push(function () {
+        // XXX RenderJS hack to start sub gadget services
+        // Only work if this gadget has no parent.
+        if (page_gadget.startService !== undefined) {
+          return page_gadget.startService(options);
         }
-
-        error.noDisplay();
-        list.noDisplay();
-        io.noDisplay();
-        that.display();
-
-        if (options.page === "play") {
-          that.showPage("stop").then(function (result) {
-            play_context.href = result;
-            play_context.innerHTML = "stop";
-          });
-          control.playSong();
-          animation.showAnimation();
-          return;
-        }
-        if (options.page === "stop") {
-          that.showPage("play").then(function (result) {
-            play_context.href = result;
-            play_context.innerHTML = "play";
-          });
-          control.stopSong();
-          animation.stopAnimation();
-          return;
-        }
-
-        if (playlist.name.indexOf(options.page) === -1) {
-          animation.stopAnimation();
-          error.display();
-          that.noDisplay();
-          return;
-        }
-        if (titleSave === options.page) {
-          control.playSong();
-          animation.showAnimation();
-          return;
-        }
-        urlDemand = playlist.url[
-          playlist.name.indexOf(options.page)
-        ];
-        control.setSong("http://localhost:8080/" +
-                        urlDemand)
-          .then(function () {
-            control.playSong();
-            title.setMessage(options.page);
-            titleSave = options.page;
-            animation.showAnimation();
-          });
-      } else {
-        error.noDisplay();
-        list.noDisplay();
-        io.noDisplay();
-        that.display();
-        control.isPaused().then(function (paused) {
-          if (!paused) {
-            animation.showAnimation();
-          }
-        });
-      }
+      });
     });
 }(window, rJS, jQuery, RSVP));

src/audioplayer/audioplayer.less

+.ui-page{
+//    margin: 0;
+ //   width: 100%;
+  //  height: 100%;
+//    font-family: 'arial';
+//    background-color: #272822;
+//    color: #ddd;
+}
+
+
+
+.page{
+  position: absolute; 
+  top: 30%;
+  left: 50%;
+} 
+.loader{
+    position: relative;
+    
+}
+.loader .circle {
+  position: absolute;
+  width: 2.5em;
+  height: 2.5em;
+  opacity: 0;
+  transform: rotate(225deg);
+  animation-iteration-count: infinite;
+  animation-name: orbit;
+  animation-duration: 5.5s;
+    -webkit-transform: rotate(225deg);
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: orbit;
+  -webkit-animation-duration: 5.5s;
+    -moz-transform: rotate(225deg);
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-name: orbit;
+  -moz-animation-duration: 5.5s;
+}
+.loader .circle:after {
+  content: '';
+  position: absolute;
+  width: 0.3em;
+  height: 0.3em;
+  border-radius: 0.3em;
+  background: #0E0D0D
+ }
+.loader .circle:nth-child(2) {
+  animation-delay: 240ms;
+  -webkit-delay: 240ms;
+  -moz-delay: 240ms;
+}
+.loader .circle:nth-child(3) {
+  animation-delay: 480ms;
+  -webkit-animation-delay: 480ms;
+  -moz-animation-delay: 480ms;
+}
+.loader .circle:nth-child(4) {
+  animation-delay: 720ms;
+  -webkit-animation-delay: 720ms;
+  -moz-animation-delay: 720ms;
+}
+.loader .circle:nth-child(5) {
+  animation-delay: 960ms;
+  -webkit-animation-delay: 960ms;
+  -moz-animation-delay: 960ms;
+}
+@keyframes orbit {
+  0% {
+    transform: rotate(225deg);
+    opacity: 1;
+    animation-timing-function: ease-out;
+  }
+  7% {
+    transform: rotate(345deg);
+    animation-timing-function: linear;
+  }
+  30% {
+    transform: rotate(455deg);
+    animation-timing-function: ease-in-out;
+  }
+  39% {
+    transform: rotate(690deg);
+    animation-timing-function: linear;
+  }
+  70% {
+    transform: rotate(815deg);
+    opacity: 1;
+    animation-timing-function: ease-out;
+  }
+  75% {
+    transform: rotate(945deg);
+    animation-timing-function: ease-out;
+  }
+  76% {
+    transform: rotate(945deg);
+    opacity: 0;
+  }
+  100% {
+    transform: rotate(945deg);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes orbit {
+  0% {
+    -webkit-transform: rotate(225deg);
+    opacity: 1;
+    -webkit-animation-timing-function: ease-out;
+  }
+  7% {
+    -webkit-transform: rotate(345deg);
+    -webkit-animation-timing-function: linear;
+  }
+  30% {
+    -webkit-transform: rotate(455deg);
+    -webkit-animation-timing-function: ease-in-out;
+  }
+  39% {
+    -webkit-transform: rotate(690deg);
+    -webkit-animation-timing-function: linear;
+  }
+  70% {
+    -webkit-transform: rotate(815deg);
+    opacity: 1;
+    -webkit-animation-timing-function: ease-out;
+  }
+  75% {
+    -webkit-transform: rotate(945deg);
+    -webkit-animation-timing-function: ease-out;
+  }
+  76% {
+    -webkit-transform: rotate(945deg);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotate(945deg);
+    opacity: 0;
+  }
+}
+@-moz-keyframes orbit {
+  0% {
+    -moz-transform: rotate(225deg);
+    opacity: 1;
+    -moz-animation-timing-function: ease-out;
+  }
+  7% {
+    -moz-transform: rotate(345deg);
+    -moz-animation-timing-function: linear;
+  }
+  30% {
+    -moz-transform: rotate(455deg);
+    -moz-animation-timing-function: ease-in-out;
+  }
+  39% {
+    -moz-transform: rotate(690deg);
+    -moz-animation-timing-function: linear;
+  }
+  70% {
+    -moz-transform: rotate(815deg);
+    opacity: 1;
+    -moz-animation-timing-function: ease-out;
+  }
+  75% {
+    -moz-transform: rotate(945deg);
+    -moz-animation-timing-function: ease-out;
+  }
+  76% {
+    -moz-transform: rotate(945deg);
+    opacity: 0;
+  }
+  100% {
+    -moz-transform: rotate(945deg);
+    opacity: 0;
+  }
+}

src/audioplayer/index.html

 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>audioPlayer</title>
-    
-
   <!-- renderjs  -->
   <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
   <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
@@ -14,59 +11,22 @@
   
   <!-- custom script -->
   <script src="./audioplayer.js" type="text/javascript"></script>
-  
-  <link rel="stylesheet" href="../../src/audioplayer/audioplayer.css" media="screen" ></link>  
-  </head>
+  <link rel="stylesheet" href="./audioplayer.css" media="screen" ></link>   </head>
   <body>
-
-
-    <div data-role="header" data-position="fullscreen">
-      <div data-role="navbar"> 
-        <ul>
-          <li> <a class="next">next</a></li>
-          <li> <a class="play">stop</a></li>
-        </ul>
-    </div>
+    <div class="nav" data-role="header" data-theme="b">
+      <h1>music player</h1>
+      <a data-icon="plus" href="#page=upload"  >add</a>     
+      <a data-icon="grid" href="#page=playlist" >playlist</a>
     </div>
+
     
-    <div class="audioplayer">
-      <!-- data-gadget-sandbox="iframe" -->
-      <div class="control" data-gadget-url="../audioplayer_control/index.html" data-gadget-scope="control">
-      </div>
-      
-      <div class="animation" data-gadget-url="../audioplayer_animation/index.html" data-gadget-scope="animation">
-      </div> 
-      
-      <div class="progress_time" data-gadget-url="../audioplayer_progress/index.html" data-gadget-scope="time">
-      </div>          
-      
-      
-      <div class="progress_volume" data-gadget-url="../audioplayer_volume/index.html" data-gadget-scope="volume">
-      </div>
-      
-      <div class="title" data-gadget-url="../audioplayer_title/index.html" data-gadget-scope="title" >
-      </div>
-      
-      <div class="io" data-gadget-url="../audioplayer_io/index.html" data-gadget-scope="io" >
-      </div>
+    <div class="page">
+    </div> 
 
-      <div class="error" data-gadget-url="./error.html" data-gadget-scope="error">
-      </div>
- 
-      <div class="playlist" data-gadget-url="../audioplayer_playlist/index.html" data-gadget-scope="playlist">
-      </div>
-      
-     
-      <div data-role="footer" data-position="fullscreen">
-        <div data-role="navbar">
-          <ul>
-            <li> <a class="addMusic">addMusic</a></li>
-            <li> <a href="#page=playlist">playlist</a></li>
-          </ul>
-        </div>
-      </div>
+    
+    <div class="jio" data-gadget-url="../audioplayer_bridge/index.html" data-gadget-scope="jio" >
     </div>
 
-
+      <article class="gadget_container"></article>
   </body>
 </html>

src/audioplayer_bridge/audiogadget.js

+/*global rJS, jIO, console */
+(function (rJS, jIO) {
+  "use strict";
+
+  rJS(window)
+
+    .ready(function (gadget) {
+      // Initialize the gadget local parameters
+      gadget.state_parameter_dict = {};
+    })
+
+    .declareMethod('createJio', function (jio_options) {
+      this.state_parameter_dict.jio_storage = jIO.createJIO(jio_options);
+    })
+    .declareMethod('allDocs', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.allDocs.apply(storage, arguments);
+    })
+    .declareMethod('get', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.get.apply(storage, arguments);
+    })
+    .declareMethod('getAttachment', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.getAttachment.apply(storage, arguments)
+        // XXX Where to put this &@! blob reading
+        .then(function (response) {
+          return response.data;
+          //return jIO.util.readBlobAsText(response.data);
+        });
+      /*
+        .then(function (lala) {
+        console.log(lala.target.result);
+        return lala.target.result;
+        });*/
+    })
+    .declareMethod('putAttachment', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.putAttachment.apply(storage, arguments);
+    })
+    .declareMethod('post', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.post.apply(storage, arguments);
+    });
+
+}(rJS, jIO));

src/audioplayer_bridge/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>Jio Gadget</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="audiogadget.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+  </body>
+</html>

src/audioplayer_control/control.js

-/*global window, rJS, RSVP, console, URL, Math,
-  FileReader, Uint8Array, File, Audio*/
+
+/*global window, rJS, RSVP, console, URL, Math, parseInt, document,
+  Uint8Array, File, Audio, loopEventListener, jQuery, promiseEventListener*/
 /*jslint nomen: true*/
 
-(function (window, rJS) {
+(function (window, rJS, RSVP, loopEventListener, $, promiseEventListener) {
   "use strict";
   var gk = rJS(window),
-    arraytmp = [];
-  gk.declareMethod('setSong', function (url) {  //configure a song
+    audioCtx = new window.AudioContext(),
+    myLoopEventListener = function (target, type, callback,
+                                    allowDefault) {
+      //////////////////////////
+      // Infinite event listener (promise is never resolved)
+      // eventListener is removed when promise is cancelled/rejected
+      //////////////////////////
+      var handle_event_callback,
+        callback_promise;
+      function cancelResolver() {
+        if ((callback_promise !== undefined) &&
+            (typeof callback_promise.cancel === "function")) {
+          callback_promise.cancel();
+        }
+      }
+      function canceller() {
+        if (handle_event_callback !== undefined) {
+          target.unbind(type, handle_event_callback);
+        }
+        cancelResolver();
+      }
+      function itsANonResolvableTrap(resolve, reject) {
+        handle_event_callback = function (evt) {
+          evt.stopPropagation();
+          if (allowDefault !== true) {
+            evt.preventDefault();
+          }
+          cancelResolver();
+          callback_promise = new RSVP.Queue()
+            .push(function () {
+              return callback(evt);
+            })
+            .push(undefined, function (error) {
+              if (!(error instanceof RSVP.CancellationError)) {
+                canceller();
+                reject(error);
+              }
+            });
+        };
+        target.bind(type, handle_event_callback);
+      }
+      return new RSVP.Promise(itsANonResolvableTrap, canceller);
+    };
+
+
+
+  function timeFormat(seconds) {
+    var result = '00:' + Math.round(seconds),
+      min,
+      sec;
+    if (seconds > 59) {
+      min = Math.floor(seconds / 60);
+      sec = Math.floor(seconds % 60);
+      result = (min > 9 ? min : ('0' + min)) +
+        ':' + (sec > 9 ? sec : ('0' + sec));
+    }
+    return result;
+  }
+
+  function getTime(context, x) {
+    var posX = x,
+      targetLeft = $(context).offset().left;
+    posX = ((posX - targetLeft) / $(context).width());
+    return posX * context.max;
+  }
+
+  function getFFTValue(gadget) {
+    var array = new Uint8Array(gadget.analyser.frequencyBinCount);
+    gadget.analyser.getByteFrequencyData(array);
+    return array;
+  }
+  function setSong(url) {  //configure a song
     var gadget = this;
-    gadget.source.connect(gadget.analyser);
+    gadget.source.connect(gadget.filter);
+    gadget.filter.connect(gadget.analyser);
     gadget.analyser.connect(gadget.gain);
-    gadget.gain.gain.value = gadget.volume;
-    gadget.gain.connect(gadget.audioCtx.destination);
+    gadget.gain.connect(audioCtx.destination);
     gadget.audio.src = url;
-    gadget.audio.onloadedmetadata = function () {
-      window.setTimeout(
-        function () {
-          gadget.sendTotalTime(gadget.audio.duration);
-        },
-        3000
-      );
-    };
     gadget.audio.load();
-  })
-    .declareMethod('stopSong', function () {
-      this.audio.pause();
-    })
-    .declareMethod('playSong', function () {
-      this.audio.play();
-    })
-    .declareMethod('setVolume', function (volume) {
-      this.volume = volume;
-      this.gain.gain.value = volume;
-    })
-    .declareMethod('getVolume', function () {
-      return this.volume;
-    })
-    .declareMethod('isPaused', function () {
-      return this.audio.paused;
-    })
-    .declareMethod('getCurrentTime', function () {
-      return this.audio.currentTime;
-    })
-    .declareMethod('setCurrentTime', function (currentTime) {
-      this.audio.currentTime = currentTime;
-      this.audio.play();
-    })
-    .declareMethod('getTotalTime', function () {
-      console.log(this.audio.duration);
-      return this.audio.duration;
-    })
-    .declareMethod('getFFTValue', function () {
-      var gadget = this,
-        tmp = {},
-        i,
-        array = new Uint8Array(gadget.analyser.frequencyBinCount);
-      gadget.analyser.getByteFrequencyData(array);
-      // if fft failed, random value
-      if (array[0] === 0 && array[50] === 0 && array[100] === 0) {
-        for (i = 0; i < 1024; i += 1) {
-          if (Math.floor(Math.random() * 10) > 5) {
-            arraytmp[i] -= 5;
-            if (arraytmp[i] < 0) {
-              arraytmp[i] = 0;
-            }
-          } else {
-            arraytmp[i] += 5;
-            if (arraytmp[i] > 255) {
-              arraytmp[i] = 100;
-            }
-          }
-          array[i] = arraytmp[i];
-        }
+  }
+
+  function promiseRequestAnimation(callback) {
+    var animationId;
+    function canceller() {
+      window.cancelAnimationFrame(animationId);
+    }
+    function resolver(resolve) {
+      animationId = window.requestAnimationFrame(callback);
+    }
+    return new RSVP.Promise(resolver, canceller);
+  }
+
+  function playSong() {
+    var that = this,
+      canvas = that.canvas,
+      canvasCtx = canvas.getContext('2d'),
+      cwidth = canvas.width,
+      cheight = canvas.height - 2,
+      meterWidth = 8, //width of the meters in the spectrum
+      capHeight = 2,
+      meterNum = 300,
+      array,
+      drawFrame,
+      step,
+      i,
+      value,
+      bar_context = that.__element.getElementsByClassName("bar")[0],
+      time_context = that.__element.getElementsByClassName('time')[0],
+      gradient = canvasCtx.createLinearGradient(0, 0, 0, 300);
+    gradient.addColorStop(1, '#0f0');
+    gradient.addColorStop(0.5, '#ff0');
+    gradient.addColorStop(0, '#f00');
+    that.audio.play();
+    drawFrame = function () {
+      array = getFFTValue(that);
+      canvasCtx.clearRect(0, 0, cwidth, cheight);
+      step = Math.round(array.length / meterNum);
+      bar_context.value = that.audio.currentTime;
+      time_context.innerHTML = timeFormat(that.audio.duration -
+                                          that.audio.currentTime);
+      for (i = 0; i < meterNum; i += 1) {
+        value = array[i * step];
+        canvasCtx.fillStyle = gradient;
+        canvasCtx.fillRect(i * 12,
+                           cheight - value + capHeight,
+                           meterWidth,
+                           cheight); //the meter
+      }
+      return promiseRequestAnimation(drawFrame);
+    };
+    return promiseRequestAnimation(drawFrame);
+  }
+  function nextToPlay(g) {
+    return new RSVP.Queue()
+      .push(function () {
+        return g.allDocs({"include_docs": true});
+      })
+      .push(function (e) {
+        var list =  e.data.rows,
+          id;
+        do {
+          id = list[Math.floor(Math.random() * list.length)].id;
+        } while (g.currentId === id);
+        return g.displayThisPage({page: "control",
+                                  id : id});
+      });
+  }
+  gk.declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
+    .declareAcquiredMethod("jio_get", "jio_get")
+    .declareAcquiredMethod("displayThisPage", "displayThisPage")
+    .declareAcquiredMethod("displayThisTitle", "displayThisTitle")
+    .declareAcquiredMethod("allDocs", "allDocs")
+    .declareAcquiredMethod("plEnablePage", "plEnablePage")
+    .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
+    .declareMethod("render", function (options) {
+      var g = this;
+      if (options.id) {
+        return new RSVP.Queue()
+          .push(function () {
+            g.currentId = options.id;
+            return g.jio_get({"_id" : options.id});
+          })
+          .push(function (result) {
+            var share_context = g.__element.getElementsByClassName("share")[0];
+            share_context.href =
+              "https://twitter.com/intent/tweet?hashtags=MusicPlayer&text="
+              + result.data.title;
+            return g.displayThisTitle(result.data.title);
+          })
+          .push(function () {
+            return nextToPlay(g);
+          })
+          .push(function (url) {
+            g.__element.getElementsByClassName("next")[0].href = url;
+            return g.jio_getAttachment({"_id" : options.id,
+                                        "_attachment" : "enclosure" });
+          })
+          .push(function (blob) {
+            g.url = URL.createObjectURL(blob);
+          })
+          .push(undefined, function (error) {
+            throw error;
+          });
       }
-      tmp.array = array;
-      tmp.length = array.length;
-      return tmp;
     })
-    .declareAcquiredMethod("nextToPlay", "nextToPlay")
-    .declareAcquiredMethod("sendTotalTime", "sendTotalTime");
+    .declareMethod("startService", function () {
+      var g = this,
+        command_context = g.__element.getElementsByClassName("command")[0],
+        mute_context = g.__element.getElementsByClassName("mute")[0],
+        bar_context = g.__element.getElementsByClassName("bar")[0],
+        box_context = g.__element.getElementsByClassName("box")[0],
+        filter_context = g.__element.getElementsByClassName("filter")[0],
+        filter_type = $('select'),
+        time_context = g.__element.getElementsByClassName("time")[0];
+      bar_context.value = 0;
+      return new RSVP.Queue()
+        .push(function () {
+          setSong.call(g, g.url);
+          return promiseEventListener(g.audio, "loadedmetadata", false);
+        })
+        .push(function () {
+          return g.plEnablePage();
+        })
+        .push(function () {
+          bar_context.max = g.audio.duration;
+          time_context.style.left = bar_context.style.left;
+          $(time_context).offset().top = $(bar_context).offset().top + 3;
+          time_context.innerHTML = timeFormat(g.audio.duration);
+          return RSVP.any([
+            playSong.call(g),
+            loopEventListener(mute_context, "click", false, function () {
+              g.gain.gain.value = (g.gain.gain.value + 1) % 2;
+            }),
+
+            loopEventListener(g.audio, "ended", false, function () {
+              return nextToPlay(g)
+                .push(function (url) {
+                  window.location = url;
+                });
+            }),
+
+            loopEventListener(command_context, "click", false, function () {
+              if (g.audio.paused) {
+                g.audio.play();
+                command_context.innerHTML = "stop";
+              } else {
+                g.audio.pause();
+                command_context.innerHTML = "play";
+              }
+            }),
+
+            loopEventListener(bar_context, "click", false, function (event) {
+              g.audio.currentTime = getTime(bar_context, event.clientX);
+              bar_context.value = g.audio.currentTime;
+              g.audio.play();
+              command_context.innerHTML = "stop";
+            }),
+
+            loopEventListener(bar_context, "mousemove",
+                              false, function (event) {
+                var time = getTime(bar_context, event.clientX);
+                box_context.style.left = ((event.clientX - 20) / 16) + "em";
+                box_context.style.display = 'block';
+                box_context.innerHTML = timeFormat(time);
+              }),
+            loopEventListener(bar_context, "mouseout",
+                              false, function () {
+                box_context.style.display = "none";
+              }),
+
+            myLoopEventListener($(filter_context), "change", function () {
+              g.filter.frequency.value = filter_context.value;
+            }),
+            myLoopEventListener(filter_type, "change", function () {
+              g.filter.type = parseInt(filter_type.val(), 10);
+            })
+          ]);
+        });
+    });
   gk.ready(function (g) {
-    var i;
-    g.volume = 1;
-    window.AudioContext = window.AudioContext || window.webkitAudioContext
-      || window.mozAudiocontext || window.msAudioContext;
-    try {
-      g.audioCtx = new window.AudioContext();
-    } catch (e) {
-      console.log(
-        "ERROR:[control] " + e
-      );
-    }
-    for (i = 0; i < 1024; i += 1) {
-      arraytmp[i] = Math.floor(Math.random() * 255);
-    }
     g.audio = g.__element.getElementsByTagName('audio')[0];
     g.audio.style.display = "none";
-    g.source = g.audioCtx.createMediaElementSource(g.audio);
-    g.analyser = g.audioCtx.createAnalyser();
-    g.gain = g.audioCtx.createGain();
-    g.audio.onended = function () {
-      g.nextToPlay();
-    };
+    g.source = audioCtx.createMediaElementSource(g.audio);
+    g.analyser = audioCtx.createAnalyser();
+    g.gain = audioCtx.createGain();
+    g.filter = audioCtx.createBiquadFilter();
+    g.filter.type = 0;
+    g.filter.frequency.value = 5000;
+    g.canvas = g.__element.getElementsByTagName('canvas')[0];
   });
-}(window, rJS));
+}(window, rJS, RSVP, loopEventListener, jQuery, promiseEventListener));

src/audioplayer_control/control.less

+#visualizer {
+    text-align: center;
+}
+
+
+canvas#can{
+   width: 50%;
+   height: 20%; 
+}
+
+
+progress.bar {
+    position: inherit;
+    display: block;
+    height: 1em;
+//    padding: 0.5em;
+    width:100%;
+    -moz-border-radius: 0.5em;
+    -webkit-border-radius: 0.5em;
+    border-radius: 0.5em;
+    -moz-box-shadow: 0 0.1em 0.5em #000 inset,0 0.1em 0 #444;
+    -webkit-box-shadow: 0 0.1em 0.5em #000 inset,0 0.1em 0 #444;
+    box-shadow: 0 0.1em 0.5em #000 inset,0 0.1em 0 #444;
+}
\ No newline at end of file

src/audioplayer_control/index.html

@@ -5,18 +5,70 @@
     <!-- renderjs -->
     <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
     <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+  <script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
 
     <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
     <script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
     <script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></script>
 
-    
+    <script src="http://git.erp5.org/gitweb/dream.git/blob_plain/refs/heads/renderjs2:/dream/platform/src2/dream/mixin_promise.js" type="text/javascript"></script>
     <!-- custom script -->
     <script src="./control.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="./control.css" media="screen" ></link> 
   </head>
   <body>
+
+
+    <progress class="bar" style="width: 100%;">
+    </progress>
+    
+    <div class="box" style="display:none;position:absolute;">
+    </div>   
+    <div class="time" style="position:relative;">
+    </div>   
+
+    <div id="visualizer">
+      <canvas id="can" width="800" height="350">
+        !Canvas not supported by your browser
+      </canvas>
+    </div> 
+
+
+
     <audio controls>
       <type="audio/mpeg">
     </audio>
+
+    <div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="minus">
+      <h1>Equalizer</h1>
+      <div data-role="fieldcontain">
+        <select name="type" class="type">
+          <option value="0">lowpass</option>
+          <option value="1">highpass</option>
+          <option value="2">bandpass</option>
+          <option value="3">lowshelf</option>
+          <option value="4">highself</option>
+          <option value="5">peaking</option>
+          <option value="6">notch</option>
+          <option value="7">allpass</option>
+        </select>
+      </div>
+
+      <div data-role="fieldcontain">
+        <input type="range" class="filter" value="5000" max="10000" min="0">
+      </div>
+    </div>
+
+    <!-- data-position="fixed" -->
+    <div data-role="footer" data-position="fixed" data-theme="b">
+      <div data-role="navbar">
+        <ul>
+          <li><a data-role="button" class="mute" data-icon="info" >mute</a></li>
+          <li><a data-role="button" class="command" data-icon="gear">stop</a></li>
+          <li><a data-role="button" class="next" data-icon="arrow-r">next</a></li>
+          <li><a data-role="button" class="share" data-icon="star" target="_blank">share</a></li>
+        </ul>
+      </div><!-- /navbar -->
+    </div><!-- /footer -->
   </body>
 </html>

src/audioplayer_io/index.html

@@ -13,7 +13,7 @@
 
       
     <!-- custom script -->   
-    <script src="./http.js" type="text/javascript"></script>
+    <script src="./io2.js" type="text/javascript"></script>
     
 
   </head>

src/audioplayer_playlist/index.html

 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>title</title>
-    
     <!-- renderjs -->
     <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
     <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
     
     <script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.handlebars.relative_dest%>"></script>
+
+    <script src="http://git.erp5.org/gitweb/dream.git/blob_plain/refs/heads/renderjs2:/dream/platform/src2/dream/mixin_promise.js" type="text/javascript"></script>
 
-    <script src="../<%= curl.jquerymobilejs.relative_dest %>"></script>  
-    <link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
+    <script id="rows-template" type="text/x-handlebars-template">
+      {{#each rows}}
+      <li>
+        <a href=#page=control&id={{this.id}}>
+          {{this.doc.title}} </a></li> 
+      {{/each}}
+    </script>
     
     <!-- custom script -->
     <script src="./playlist.js" type="text/javascript"></script>
     
     <body>
 
-      <div data-role="header" data-position="fullscreen">
-        <div data-role="navbar">
-          <ul>
-            <li><a href="#page" class="home">home</a></li>
-          </ul>
-        </div>
-      </div>
-
+      <input type="search" class="research" placeholder="research..."/>
 
       <div data-role="content">
-        <ul data-role="listview" data-autodividers="true" data-filter="true" data-split-icon="delete" data-split-theme="d">
+        <ul data-role="listview" data-split-theme="d">
         </ul>
       </div>
     </body>

src/audioplayer_playlist/playlist.js

-/*global window, rJS, RSVP, console, jQuery, $ */
+/*global window, rJS, RSVP, console, jQuery, $, JSON, Handlebars,
+  promiseEventListener, RegExp */
 /*jslint maxlen:80, nomen: true */
 
 
-(function (window, rJS, $) {
+(function (window, rJS, $, Handlebars, promiseEventListener) {
   "use strict";
-  var gk = rJS(window);
-  gk.declareMethod('display', function (attachment) {
-    this.playlist.style.display = "";
-    this.home.style.display = "";
-  })
-    .declareMethod('noDisplay', function (attachment) {
-      this.playlist.style.display = "none";
-      this.home.style.display = "none";
+  var gk = rJS(window),
+    rows_template_source = gk.__template_element
+      .getElementById('rows-template').innerHTML,
+    rows_template = Handlebars.compile(rows_template_source);
+  gk.declareAcquiredMethod("allDocs", "allDocs")
+    .declareAcquiredMethod("displayThisPage", "displayThisPage")
+    .declareAcquiredMethod("displayThisTitle", "displayThisTitle")
+    .declareAcquiredMethod("plEnablePage", "plEnablePage")
+    .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
+    .declareMethod('render', function (options) {
+      var gadget = this,
+        list = gadget.__element.getElementsByTagName('ul')[0];
+      return new RSVP.Queue()
+        .push(function () {
+          return gadget.displayThisTitle("playlist");
+        })
+        .push(function () {
+          return gadget.allDocs({"include_docs": true});
+        })
+        .push(function (e) {
+          var tmp = [],
+            i,
+            j,
+            exp;
+          if (options.id !== undefined) {
+            for (i = 0, j = 0; i < e.data.rows.length; i += 1) {
+              exp = new RegExp(options.id, "i");
+              if (e.data.rows[i].doc.title.search(exp) !== -1) {
+                tmp[j] = e.data.rows[i];
+                j += 1;
+              }
+            }
+            e.data.rows = tmp;
+          }
+          gadget.id = options.id;
+          list.innerHTML = rows_template({
+            "rows" : e.data.rows
+          });
+          $(list).listview("refresh");
+        });
     })
-    .declareMethod('initList', function (playlist) {
-      var i,
-        docFragment = document.createDocumentFragment(),
-        li;
-      this.list.innerHTML = "";
-      for (i = 0; i < playlist.url.length; i += 1) {
-        li = document.createElement("li");
-        li.innerHTML =
-          "<a href=#page="
-          + playlist.url[i]
-          + ">"
-          + playlist.name[i]
-          + "</a> "
-          + " <a href=#page="
-          + playlist.name[i]
-          + "&id=delete "
-          + "data-rel=popup "
-          + "data-position-to=window "
-          + "</a>";
-        docFragment.appendChild(li);
+    .declareMethod('startService', function () {
+      var g = this,
+        research = g.__element.getElementsByClassName('research')[0];
+      if (g.id !== undefined) {
+        research.value = g.id;
       }
-      this.list.appendChild(docFragment);
-      $(this.list).listview("refresh");
+      return new RSVP.Queue()
+        .push(function () {
+          return g.plEnablePage();
+        })
+        .push(function () {
+          return promiseEventListener(research, "change", false);
+        })
+        .push(function (e) {
+          return g.displayThisPage({page: "playlist",
+                                    id: research.value});
+        })
+        .push(function (url) {
+          window.location = url;
+        });
     });
-  gk.ready(function (g) {
-    g.playlist = g.__element.getElementsByTagName('div')[2];
-    g.list = g.__element.getElementsByTagName('ul')[1];
-    g.home = g.__element.getElementsByTagName('div')[0];
-    $(g.__element).trigger("create");
-  });
-}(window, rJS, jQuery));
+}(window, rJS, jQuery, Handlebars, promiseEventListener));

src/audioplayer_upload/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>audioplayer io</title>
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    
+    <!-- jio core dependencies  -->
+    <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></script>
+    <script src="http://git.erp5.org/gitweb/dream.git/blob_plain/refs/heads/renderjs2:/dream/platform/src2/dream/mixin_promise.js" type="text/javascript"></script>
+
+    <!-- custom script -->   
+    <script src="./upload.js" type="text/javascript"></script>
+    
+
+  </head>
+  
+
+  <body>
+    <input type="file" multiple /> 
+
+    <ul class="info">
+    </ul>
+  </body>
+</html>

src/audioplayer_upload/upload.js

+/*global window, rJS, RSVP, jIO, JSON, promiseEventListener */
+/*jslint nomen: true*/
+(function (window, jIO, rJS) {
+  "use strict";
+  var gk = rJS(window);
+  gk.declareAcquiredMethod("jio_post", "jio_post")
+    .declareAcquiredMethod("jio_putAttachment", "jio_putAttachment")
+    .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
+    .declareAcquiredMethod("displayThisPage", "displayThisPage")
+    .declareAcquiredMethod("displayThisTitle", "displayThisTitle")
+    .declareAcquiredMethod("plEnablePage", "plEnablePage")
+    .declareAcquiredMethod("plDisablePage", "plDisablePage")
+    .declareMethod("render", function () {
+      this.__element.getElementsByClassName('info')[0]
+        .innerHTML = "";
+      return this.displayThisTitle("upload");
+    })
+    .declareMethod("startService", function () {
+      var g = this,
+        input_context =
+          g.__element.getElementsByTagName('input')[0],
+        info_context =
+          g.__element.getElementsByClassName('info')[0],
+        i,
+        queue,
+        uploaded = 0,
+        length;
+
+
+
+      function post(index) {
+        var now = new Date();
+        return g.jio_post({"title" : input_context.files[index].name,
+                           "type" : "file",
+                           "format" :  input_context.files[index].type,
+                           "size" : input_context.files[index].size,
+                           "modified" : now.toUTCString(),
+                           "date" : now.getFullYear() + "-" +
+                           (now.getMonth() + 1) + "-" + now.getDate()
+                          })
+          .push(function (res) {
+            return g.jio_putAttachment({
+              "_id" : res.id,
+              "_attachment" : "enclosure",
+              "_blob": input_context.files[index]
+            });
+          })
+          .push(function () {
+            uploaded += 1;
+            info_context.innerHTML += "<li>" + input_context.files[index].name
+              + "  uploaded " + uploaded + "/" + length + " </li>";
+            if (uploaded === length) {
+              return g.plEnablePage();
+            }
+          });
+      }
+      queue = new RSVP.Queue();
+      queue.push(function () {
+        return g.plEnablePage();
+      })
+        .push(function () {
+          return promiseEventListener(input_context, "change", false);
+        })
+        .push(function () {
+          return g.plDisablePage();
+        })
+        .push(function () {
+          length = input_context.files.length;
+          for (i = 0; i < length; i += 1) {
+            queue.push(post(i));
+          }
+        });
+      return queue;
+    });
+}(window, jIO, rJS));

src/audioplayer_upload/upload.less

+.info{
+   top: 10%;
+}
\ No newline at end of file