Commit 9593da28 authored by Xiaowu Zhang's avatar Xiaowu Zhang

audioplayer with renderjs history manage

parent e9454c02
/*global window, rJS, RSVP, console, $, jQuery, URL, location */ /*global window, rJS, RSVP, console, $, jQuery, URL, location */
/*jslint nomen: true*/ /*jslint nomen: true*/
(function (window, rJS, $) { (function (window, rJS, $) {
"use strict"; "use strict";
var control, var control,
...@@ -8,11 +9,20 @@ ...@@ -8,11 +9,20 @@
volume, volume,
title, title,
totalId = 0, totalId = 0,
initialUrl; that,
next_context,
command_context,
currentId;
function nextId() { 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) rJS(window)
.declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
.allowPublicAcquisition("setCurrentTime", function (value) { .allowPublicAcquisition("setCurrentTime", function (value) {
control.setCurrentTime(value); control.setCurrentTime(value);
}) })
...@@ -32,6 +42,12 @@ ...@@ -32,6 +42,12 @@
.allowPublicAcquisition("nextToPlay", function () { .allowPublicAcquisition("nextToPlay", function () {
return nextId(); return nextId();
}) })
.allowPublicAcquisition("nextTitle", function (tab) {
this.aq_pleasePublishMyState({page: tab[0]})
.then(function (url) {
that.pleaseRedirectMyHash(url);
});
})
.allowPublicAcquisition("sendTotalId", function (value) { .allowPublicAcquisition("sendTotalId", function (value) {
totalId = value[0]; //array parameter totalId = value[0]; //array parameter
}) })
...@@ -51,11 +67,9 @@ ...@@ -51,11 +67,9 @@
animation.stopAnimation(); animation.stopAnimation();
}) })
.ready(function (g) { .ready(function (g) {
var next_context = g.__element.getElementsByTagName('button')[0], next_context = g.__element.getElementsByTagName('a')[0];
command_context = g.__element.getElementsByTagName('button')[1], command_context = g.__element.getElementsByTagName('a')[1];
index; that = g;
index = location.href.indexOf('#');
initialUrl = location.href.slice(0, index);
RSVP.all([ RSVP.all([
g.getDeclaredGadget( g.getDeclaredGadget(
"control" "control"
...@@ -86,15 +100,6 @@ ...@@ -86,15 +100,6 @@
}); });
}, 1000); }, 1000);
volume.setMax(3); 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 () { command_context.onclick = function () {
control.isPaused().then(function (paused) { control.isPaused().then(function (paused) {
if (paused) { if (paused) {
...@@ -115,28 +120,28 @@ ...@@ -115,28 +120,28 @@
title.getSize().then(function (size) { title.getSize().then(function (size) {
title.setPosition(size * 2); 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) { .fail(function (e) {
console.log("[ERROR]: " + 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)); }(window, rJS, jQuery));
...@@ -17,8 +17,8 @@ ...@@ -17,8 +17,8 @@
<body> <body>
<div class = "audioplayer"> <div class = "audioplayer">
<button type="button">next</button> <a class = "next">next</a>
<button type="button">play/pause</button> <a class = "command">play/pause</a>
<!-- data-gadget-sandbox="iframe" --> <!-- data-gadget-sandbox="iframe" -->
<div class = "control" data-gadget-url="../audioplayer_control/index.html" data-gadget-scope="control"> <div class = "control" data-gadget-url="../audioplayer_control/index.html" data-gadget-scope="control">
</div> </div>
......
...@@ -8,7 +8,11 @@ ...@@ -8,7 +8,11 @@
gk.declareMethod('setSong', function (id) { //configure a song gk.declareMethod('setSong', function (id) { //configure a song
var gadget = this; var gadget = this;
if (typeof id === "string") { 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)) { if ((id >= gadget.lenght) || (id < 0)) {
console.log("invalide play id"); console.log("invalide play id");
...@@ -44,8 +48,11 @@ ...@@ -44,8 +48,11 @@
.declareMethod('getVolume', function () { .declareMethod('getVolume', function () {
return this.volume; return this.volume;
}) })
.declareMethod('getTitle', function () { .declareMethod('getTitle', function (id) {
return this.playlist[this.currentPlayId]; if (id === undefined) {
id = this.currentPlayId;
}
return this.playlist[id];
}) })
.declareMethod('isPaused', function () { .declareMethod('isPaused', function () {
return this.audio.paused; return this.audio.paused;
...@@ -110,6 +117,7 @@ ...@@ -110,6 +117,7 @@
}) })
.declareAcquiredMethod("sendTotalId", "sendTotalId") .declareAcquiredMethod("sendTotalId", "sendTotalId")
.declareAcquiredMethod("nextToPlay", "nextToPlay") .declareAcquiredMethod("nextToPlay", "nextToPlay")
.declareAcquiredMethod("nextTitle", "nextTitle")
.declareAcquiredMethod("allNotify", "allNotify") .declareAcquiredMethod("allNotify", "allNotify")
.declareAcquiredMethod("showAnimation", "showAnimation") .declareAcquiredMethod("showAnimation", "showAnimation")
.declareAcquiredMethod("stopAnimation", "stopAnimation"); .declareAcquiredMethod("stopAnimation", "stopAnimation");
...@@ -150,9 +158,7 @@ ...@@ -150,9 +158,7 @@
g.decoded = true; g.decoded = true;
g.audio.onended = function () { g.audio.onended = function () {
g.nextToPlay().then(function (id) { g.nextToPlay().then(function (id) {
g.setSong(id).then(function () { g.nextTitle(g.playlist[id]);
g.playSong(id);
});
}); });
}; };
input_context.onchange = function () { input_context.onchange = function () {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment