Skip to content

O
officejs
Commit 1cb4047f authored by Xiaowu Zhang's avatar Xiaowu Zhang
Browse files
Options

improve interface & respect renderjs use regles

parent a4f9ad46
Hide whitespace changes
Inline Side-by-side
Showing with 867 additions and 476 deletions
src/audioplayer/audioplayer.css deleted 100644 → 0
View file @ a4f9ad46
.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
View file @ 1cb4047f
...@@ -7,287 +7,120 @@ ...@@ -7,287 +7,120 @@
$.mobile.linkBindingEnabled = false; $.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false; $.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false; $.mobile.pushStateEnabled = false;
var control, function disablePage(g) {
animation, var overlay = document.createElement('div'),
time, loader = document.createElement('div'),
volume, controlPanel = g.__element.getElementsByClassName("page")[0],
title, i = 0,
io, circle;
error, overlay.className = 'overlay';
totalId = -1, loader.className = 'loader';
that, while (i < 5) {
next_context, circle = document.createElement('div');
play_context, circle.className = 'circle';
addMusic_context, loader.appendChild(circle);
list_context, i += 1;
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';
} }
overlay.appendChild(loader);
controlPanel.appendChild(overlay);
} }
rJS(window) rJS(window)
.declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash") .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
.allowPublicAcquisition("setCurrentTime", function (value) { .allowPublicAcquisition("plEnablePage", function () {
control.setCurrentTime(value[0]); var controlPanel = this.__element.getElementsByClassName('page')[0];
}) while (controlPanel.firstChild) {
.allowPublicAcquisition("setVolume", function (value) { controlPanel.removeChild(controlPanel.firstChild);
control.setVolume(value[0]); }
}) })
.allowPublicAcquisition("getFFTValue", function () { .allowPublicAcquisition("plDisablePage", function () {
return control.getFFTValue().then(function (value) { disablePage(this);
return value;
});
}) })
.allowPublicAcquisition("plShowPage", function (param_list) { .allowPublicAcquisition("displayThisPage", function (param_list) {
return this.aq_pleasePublishMyState({page: param_list[0]}); // Hey, I want to display this page
return this.aq_pleasePublishMyState(param_list[0]);
}) })
.allowPublicAcquisition("nextToPlay", function () { .allowPublicAcquisition("allDocs", function (param_list) {
var id = nextId(), return this.getDeclaredGadget("jio")
name = playlist.url[id]; .push(function (jio_gadget) {
control.setSong("http://localhost:8080/" + name) return jio_gadget.allDocs.apply(jio_gadget, param_list);
.then(function () {
control.playSong();
title.setMessage(playlist.name[id]);
animation.showAnimation();
}); });
/* io.getIO(name).then(function (file) { })
control.setSong(URL.createObjectURL(file)).then(function () { .allowPublicAcquisition("jio_post", function (param_list) {
control.playSong(); return this.getDeclaredGadget("jio")
title.setMessage(playlist.name[id]); .push(function (jio_gadget) {
animation.showAnimation(); return jio_gadget.post.apply(jio_gadget, param_list);
}); });
});*/
}) })
.allowPublicAcquisition("sendPlaylist", function (value) { .allowPublicAcquisition("jio_putAttachment", function (param_list) {
playlist = value[0]; return this.getDeclaredGadget("jio")
totalId = playlist.url.length; //array parameter .push(function (jio_gadget) {
initializeFlag = true; return jio_gadget.putAttachment.apply(jio_gadget, param_list);
that.render(); });
}) })
.allowPublicAcquisition("sendTotalTime", function (value) { .allowPublicAcquisition("jio_getAttachment", function (param_list) {
time.setMax(value[0]); return this.getDeclaredGadget("jio")
.push(function (jio_gadget) {
return jio_gadget.getAttachment.apply(jio_gadget, param_list);
});
}) })
.ready(function (g) { .allowPublicAcquisition("jio_get", function (param_list) {
var array = g.__element.getElementsByTagName('a'); return this.getDeclaredGadget("jio")
next_context = array[0]; .push(function (jio_gadget) {
play_context = array[1]; return jio_gadget.get.apply(jio_gadget, param_list);
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("displayThisTitle", function (param_list) {
var header = this.__element.getElementsByTagName("h1")[0];
header.innerHTML = param_list[0];
}); });
rJS(window) rJS(window)
.declareMethod("display", function (options) { .ready(function (g) {
title.display(); var jio_gadget;
time.display(); return g.getDeclaredGadget("jio")
volume.display(); .push(function (gadget) {
animation.display(); jio_gadget = gadget;
next_context.style.display = ""; return jio_gadget.createJio(
play_context.style.display = ""; { "type" : "indexeddb",
addMusic_context.style.display = ""; "database": "test"}
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});
}) })
.declareMethod("render", function (options) { .declareMethod("render", function (options) {
var id, var gadget = this,
name, page_gadget,
urlDemand; element,
if (initializeFlag === false) { page_element;
return; 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(); return gadget.declareGadget(
name = playlist.name[id]; "../audioplayer_" + options.page + "/index.html"
that.showPage(name) ).push(function (g) {
.then(function (result) { disablePage(gadget);
next_context.href = result; page_gadget = g;
}); return page_gadget.getElement();
}).push(function (result) {
if (options.page !== undefined) { page_element = result;
if (options.page === "addMusic") { while (element.firstChild) {
animation.stopAnimation(); element.removeChild(element.firstChild);
that.noDisplay();
list.noDisplay();
io.display();
return;
} }
element.appendChild(page_element);
if (options.page === "playlist") { $(element).trigger('create');
animation.stopAnimation(); if (page_gadget.render !== undefined) {
that.noDisplay(); return page_gadget.render(options);
io.noDisplay();
list.initList(playlist);
list.display();
return;
} }
}).push(function () {
if (options.id === "delete") { // XXX RenderJS hack to start sub gadget services
io.removeIO(options.page) // Only work if this gadget has no parent.
.then(function () { if (page_gadget.startService !== undefined) {
list.initList(playlist); return page_gadget.startService(options);
});
return;
} }
});
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)); }(window, rJS, jQuery, RSVP));
src/audioplayer/audioplayer.less 0 → 100644
View file @ 1cb4047f
.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
View file @ 1cb4047f
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>audioPlayer</title>
<!-- renderjs --> <!-- renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script> <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script> <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
...@@ -14,59 +11,22 @@ ...@@ -14,59 +11,22 @@
<!-- custom script --> <!-- custom script -->
<script src="./audioplayer.js" type="text/javascript"></script> <script src="./audioplayer.js" type="text/javascript"></script>
<link rel="stylesheet" href="./audioplayer.css" media="screen" ></link> </head>
<link rel="stylesheet" href="../../src/audioplayer/audioplayer.css" media="screen" ></link>
</head>
<body> <body>
<div class="nav" data-role="header" data-theme="b">
<h1>music player</h1>
<div data-role="header" data-position="fullscreen"> <a data-icon="plus" href="#page=upload" >add</a>
<div data-role="navbar"> <a data-icon="grid" href="#page=playlist" >playlist</a>
<ul>
<li> <a class="next">next</a></li>
<li> <a class="play">stop</a></li>
</ul>
</div>
</div> </div>
<div class="audioplayer"> <div class="page">
<!-- data-gadget-sandbox="iframe" --> </div>
<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="error" data-gadget-url="./error.html" data-gadget-scope="error">
</div> <div class="jio" data-gadget-url="../audioplayer_bridge/index.html" data-gadget-scope="jio" >
<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> </div>
<article class="gadget_container"></article>
</body> </body>
</html> </html>
src/audioplayer_bridge/audiogadget.js 0 → 100644
View file @ 1cb4047f
/*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 0 → 100644
View file @ 1cb4047f
<!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
View file @ 1cb4047f
/*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*/ /*jslint nomen: true*/
(function (window, rJS) { (function (window, rJS, RSVP, loopEventListener, $, promiseEventListener) {
"use strict"; "use strict";
var gk = rJS(window), var gk = rJS(window),
arraytmp = []; audioCtx = new window.AudioContext(),
gk.declareMethod('setSong', function (url) { //configure a song 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; var gadget = this;
gadget.source.connect(gadget.analyser); gadget.source.connect(gadget.filter);
gadget.filter.connect(gadget.analyser);
gadget.analyser.connect(gadget.gain); gadget.analyser.connect(gadget.gain);
gadget.gain.gain.value = gadget.volume; gadget.gain.connect(audioCtx.destination);
gadget.gain.connect(gadget.audioCtx.destination);
gadget.audio.src = url; gadget.audio.src = url;
gadget.audio.onloadedmetadata = function () {
window.setTimeout(
function () {
gadget.sendTotalTime(gadget.audio.duration);
},
3000
);
};
gadget.audio.load(); gadget.audio.load();
}) }
.declareMethod('stopSong', function () {
this.audio.pause(); function promiseRequestAnimation(callback) {
}) var animationId;
.declareMethod('playSong', function () { function canceller() {
this.audio.play(); window.cancelAnimationFrame(animationId);
}) }
.declareMethod('setVolume', function (volume) { function resolver(resolve) {
this.volume = volume; animationId = window.requestAnimationFrame(callback);
this.gain.gain.value = volume; }
}) return new RSVP.Promise(resolver, canceller);
.declareMethod('getVolume', function () { }
return this.volume;
}) function playSong() {
.declareMethod('isPaused', function () { var that = this,
return this.audio.paused; canvas = that.canvas,
}) canvasCtx = canvas.getContext('2d'),
.declareMethod('getCurrentTime', function () { cwidth = canvas.width,
return this.audio.currentTime; cheight = canvas.height - 2,
}) meterWidth = 8, //width of the meters in the spectrum
.declareMethod('setCurrentTime', function (currentTime) { capHeight = 2,
this.audio.currentTime = currentTime; meterNum = 300,
this.audio.play(); array,
}) drawFrame,
.declareMethod('getTotalTime', function () { step,
console.log(this.audio.duration); i,
return this.audio.duration; value,
}) bar_context = that.__element.getElementsByClassName("bar")[0],
.declareMethod('getFFTValue', function () { time_context = that.__element.getElementsByClassName('time')[0],
var gadget = this, gradient = canvasCtx.createLinearGradient(0, 0, 0, 300);
tmp = {}, gradient.addColorStop(1, '#0f0');
i, gradient.addColorStop(0.5, '#ff0');
array = new Uint8Array(gadget.analyser.frequencyBinCount); gradient.addColorStop(0, '#f00');
gadget.analyser.getByteFrequencyData(array); that.audio.play();
// if fft failed, random value drawFrame = function () {
if (array[0] === 0 && array[50] === 0 && array[100] === 0) { array = getFFTValue(that);
for (i = 0; i < 1024; i += 1) { canvasCtx.clearRect(0, 0, cwidth, cheight);
if (Math.floor(Math.random() * 10) > 5) { step = Math.round(array.length / meterNum);
arraytmp[i] -= 5; bar_context.value = that.audio.currentTime;
if (arraytmp[i] < 0) { time_context.innerHTML = timeFormat(that.audio.duration -
arraytmp[i] = 0; that.audio.currentTime);
} for (i = 0; i < meterNum; i += 1) {
} else { value = array[i * step];
arraytmp[i] += 5; canvasCtx.fillStyle = gradient;
if (arraytmp[i] > 255) { canvasCtx.fillRect(i * 12,
arraytmp[i] = 100; cheight - value + capHeight,
} meterWidth,
} cheight); //the meter
array[i] = arraytmp[i]; }
} 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") .declareMethod("startService", function () {
.declareAcquiredMethod("sendTotalTime", "sendTotalTime"); 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) { 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 = g.__element.getElementsByTagName('audio')[0];
g.audio.style.display = "none"; g.audio.style.display = "none";
g.source = g.audioCtx.createMediaElementSource(g.audio); g.source = audioCtx.createMediaElementSource(g.audio);
g.analyser = g.audioCtx.createAnalyser(); g.analyser = audioCtx.createAnalyser();
g.gain = g.audioCtx.createGain(); g.gain = audioCtx.createGain();
g.audio.onended = function () { g.filter = audioCtx.createBiquadFilter();
g.nextToPlay(); 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 0 → 100644
View file @ 1cb4047f
#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
View file @ 1cb4047f
...@@ -5,18 +5,70 @@ ...@@ -5,18 +5,70 @@
<!-- renderjs --> <!-- renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script> <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.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.uri.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.uritemplate.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="../<%= 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 --> <!-- custom script -->
<script src="./control.js" type="text/javascript"></script> <script src="./control.js" type="text/javascript"></script>
<link rel="stylesheet" href="./control.css" media="screen" ></link>
</head> </head>
<body> <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> <audio controls>
<type="audio/mpeg"> <type="audio/mpeg">
</audio> </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> </body>
</html> </html>
src/audioplayer_io/index.html
View file @ 1cb4047f
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<!-- custom script --> <!-- custom script -->
<script src="./http.js" type="text/javascript"></script> <script src="./io2.js" type="text/javascript"></script>
</head> </head>
......
src/audioplayer_playlist/index.html
View file @ 1cb4047f
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>title</title>
<!-- renderjs --> <!-- renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script> <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.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="../<%= 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> <script id="rows-template" type="text/x-handlebars-template">
<link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>"> {{#each rows}}
<li>
<a href=#page=control&id={{this.id}}>
{{this.doc.title}} </a></li>
{{/each}}
</script>
<!-- custom script --> <!-- custom script -->
<script src="./playlist.js" type="text/javascript"></script> <script src="./playlist.js" type="text/javascript"></script>
<body> <body>
<div data-role="header" data-position="fullscreen"> <input type="search" class="research" placeholder="research..."/>
<div data-role="navbar">
<ul>
<li><a href="#page" class="home">home</a></li>
</ul>
</div>
</div>
<div data-role="content"> <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> </ul>
</div> </div>
</body> </body>
......
src/audioplayer_playlist/playlist.js
View file @ 1cb4047f
/*global window, rJS, RSVP, console, jQuery, $ */ /*global window, rJS, RSVP, console, jQuery, $, JSON, Handlebars,
promiseEventListener, RegExp */
/*jslint maxlen:80, nomen: true */ /*jslint maxlen:80, nomen: true */
(function (window, rJS, $) { (function (window, rJS, $, Handlebars, promiseEventListener) {
"use strict"; "use strict";
var gk = rJS(window); var gk = rJS(window),
gk.declareMethod('display', function (attachment) { rows_template_source = gk.__template_element
this.playlist.style.display = ""; .getElementById('rows-template').innerHTML,
this.home.style.display = ""; rows_template = Handlebars.compile(rows_template_source);
}) gk.declareAcquiredMethod("allDocs", "allDocs")
.declareMethod('noDisplay', function (attachment) { .declareAcquiredMethod("displayThisPage", "displayThisPage")
this.playlist.style.display = "none"; .declareAcquiredMethod("displayThisTitle", "displayThisTitle")
this.home.style.display = "none"; .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) { .declareMethod('startService', function () {
var i, var g = this,
docFragment = document.createDocumentFragment(), research = g.__element.getElementsByClassName('research')[0];
li; if (g.id !== undefined) {
this.list.innerHTML = ""; research.value = g.id;
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);
} }
this.list.appendChild(docFragment); return new RSVP.Queue()
$(this.list).listview("refresh"); .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) { }(window, rJS, jQuery, Handlebars, promiseEventListener));
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));
src/audioplayer_upload/index.html 0 → 100644
View file @ 1cb4047f
<!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 0 → 100644
View file @ 1cb4047f
/*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 0 → 100644
View file @ 1cb4047f
.info{
top: 10%;
}
\ No newline at end of file
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7