Commit 38d20eed authored by Xiaowu Zhang's avatar Xiaowu Zhang

add fragment/combine blob fonctionnality

parent f9bb661c
...@@ -21,6 +21,11 @@ ...@@ -21,6 +21,11 @@
"0": "../audioplayer_control/index.html", "0": "../audioplayer_control/index.html",
"1": "../audioplayer_control/index.html", "1": "../audioplayer_control/index.html",
"2": "../audioplayer_control/index.html" "2": "../audioplayer_control/index.html"
},
video_control: {
"0": "../audioplayer_video_control/index.html",
"1": "../audioplayer_video_control/index.html",
"2": "../audioplayer_video_control/index.html"
} }
}, allStorageType = [ "offline", "localhost", "online" ]; }, allStorageType = [ "offline", "localhost", "online" ];
function storageType(type) { function storageType(type) {
...@@ -182,6 +187,8 @@ ...@@ -182,6 +187,8 @@
if (page_gadget.startService !== undefined) { if (page_gadget.startService !== undefined) {
return page_gadget.startService(options); return page_gadget.startService(options);
} }
}).fail(function(e) {
console.log(e);
}); });
}); });
})(window, rJS, jQuery, RSVP); })(window, rJS, jQuery, RSVP);
\ No newline at end of file
button.loop{width:10em}#visualizer{text-align:center}#video{text-align:center}video#videoControl{width:50%;height:20%}canvas#can{width:50%;height:20%}progress.bar{position:inherit;display:block;height:1em;width:100%;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;-moz-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;-webkit-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444} button.loop{width:10em}#visualizer{text-align:center}canvas#can{width:50%;height:20%}progress.bar{position:inherit;display:block;height:1em;width:100%;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;-moz-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;-webkit-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444}
\ No newline at end of file \ No newline at end of file
This diff is collapsed.
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<script src="../lib/uritemplate.min.js" type="text/javascript"></script> <script src="../lib/uritemplate.min.js" type="text/javascript"></script>
<script src="../lib/jio.js" type="text/javascript"></script> <script src="../lib/jio.js" 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> <script src="http://git.erp5.org/gitweb/dream.git/blob_plain/01bbb0b10edd731fb24898ce8b5e193ecbc989ca:/dream/platform/src/dream/mixin_promise.js?js=1" 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> <link rel="stylesheet" href="./control.css" media="screen" ></link>
...@@ -46,14 +46,6 @@ ...@@ -46,14 +46,6 @@
</audio> </audio>
<div id="video">
<video id="videoControl" class="videoMP4">
<type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="minus"> <div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="minus">
<h1>Equalizer</h1> <h1>Equalizer</h1>
<div data-role="fieldcontain"> <div data-role="fieldcontain">
......
...@@ -8,14 +8,20 @@ ...@@ -8,14 +8,20 @@
<script src="../lib/jquery.js" type="text/javascript"></script> <script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/handlebars.min.js"></script> <script src="../lib/handlebars.min.js"></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="http://git.erp5.org/gitweb/dream.git/blob_plain/01bbb0b10edd731fb24898ce8b5e193ecbc989ca:/dream/platform/src/dream/mixin_promise.js?js=1" type="text/javascript"></script>
<script id="rows-template" type="text/x-handlebars-template"> <script id="rows-template" type="text/x-handlebars-template">
{{#each rows}} {{#each rows}}
<li> <li>
{{#compare this.doc.type "audio/mp3"}}
<a href=#page=control&id={{this.id}}&action=offline> <a href=#page=control&id={{this.id}}&action=offline>
{{this.doc.title}} {{this.doc.title}}
</a> </a>
{{else}}
<a href=#page=video_control&id={{this.id}}&action=offline>
{{this.doc.title}}
</a>
{{/compare}}
<a href=#page=playlist&id={{this.id}}&action=delete> <a href=#page=playlist&id={{this.id}}&action=delete>
data-rel=popup data-rel=popup
data-position-to=window data-position-to=window
......
...@@ -31,6 +31,12 @@ ...@@ -31,6 +31,12 @@
}); });
}).push(function(e) { }).push(function(e) {
var tmp = e.data.rows, i, j, exp; var tmp = e.data.rows, i, j, exp;
Handlebars.registerHelper("compare", function(v1, v2, options) {
if (v1 === v2) {
return options.fn(this);
}
return options.inverse(this);
});
if (options.id !== undefined && options.id !== "offline") { if (options.id !== undefined && options.id !== "offline") {
tmp = []; tmp = [];
for (i = 0, j = 0; i < e.data.rows.length; i += 1) { for (i = 0, j = 0; i < e.data.rows.length; i += 1) {
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<script src="../lib/URI.js" type="text/javascript"></script> <script src="../lib/URI.js" type="text/javascript"></script>
<script src="../lib/uritemplate.min.js" type="text/javascript"></script> <script src="../lib/uritemplate.min.js" type="text/javascript"></script>
<script src="../lib/jio.js" type="text/javascript"></script> <script src="../lib/jio.js" 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> <script src="http://git.erp5.org/gitweb/dream.git/blob_plain/01bbb0b10edd731fb24898ce8b5e193ecbc989ca:/dream/platform/src/dream/mixin_promise.js?js=1" type="text/javascript"></script>
<!-- custom script --> <!-- custom script -->
<script src="./upload.js" type="text/javascript"></script> <script src="./upload.js" type="text/javascript"></script>
......
/*global window, rJS, RSVP, jIO, JSON, promiseEventListener, console, /*global window, rJS, RSVP, jIO, JSON, promiseEventListener, console,
Error*/ Math */
/*jslint nomen: true*/ /*jslint nomen: true*/
(function(window, jIO, rJS) { (function(window, jIO, rJS) {
"use strict"; "use strict";
...@@ -15,15 +15,44 @@ ...@@ -15,15 +15,44 @@
window.location = url; window.location = url;
}); });
} }
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() { gk.declareAcquiredMethod("jio_post", "jio_post").declareAcquiredMethod("jio_putAttachment", "jio_putAttachment").declareAcquiredMethod("jio_remove", "jio_remove").declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash").declareAcquiredMethod("displayThisPage", "displayThisPage").declareAcquiredMethod("displayThisTitle", "displayThisTitle").declareAcquiredMethod("plEnablePage", "plEnablePage").declareAcquiredMethod("plDisablePage", "plDisablePage").declareMethod("render", function() {
return this.displayThisTitle("upload"); return this.displayThisTitle("upload");
}).declareMethod("startService", function() { }).declareMethod("startService", function() {
var g = this, input_context = g.__element.getElementsByTagName("input")[0], info_context = g.__element.getElementsByClassName("info")[0], queue, uploaded = 0, length; var g = this, input_context = g.__element.getElementsByTagName("input")[0], info_context = g.__element.getElementsByClassName("info")[0], queue, uploaded = 0, post, length;
function post() { info_context.innerHTML = "<ul>";
function putAll(id, index, file) {
var blobLength = 2e6, size = blobLength * (index + 1), blob;
if (size > file.size) {
blob = file.slice(blobLength * index, file.size);
} else {
blob = file.slice(blobLength * index, size);
}
return g.jio_putAttachment({
_id: id,
_attachment: "enclosure" + index,
_blob: blob
}, 0).then(function() {
var progress = Math.floor(size / file.size * 100);
if (progress > 100) {
progress = 100;
}
progress += "%";
info_context.innerHTML += "<li>" + file.name + " " + progress + "</li>";
if (size < file.size) {
return putAll(id, index + 1, file);
}
uploaded += 1;
if (uploaded === length) {
return exit(g);
}
queue.push(post);
});
}
post = function() {
var now = new Date(), id;
if (uploaded === length) { if (uploaded === length) {
return; return;
} }
var now = new Date();
return g.jio_post({ return g.jio_post({
title: input_context.files[uploaded].name, title: input_context.files[uploaded].name,
type: input_context.files[uploaded].type, type: input_context.files[uploaded].type,
...@@ -32,26 +61,22 @@ ...@@ -32,26 +61,22 @@
modified: now.toUTCString(), modified: now.toUTCString(),
date: now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() date: now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
}, 0).then(function(res) { }, 0).then(function(res) {
return g.jio_putAttachment({ var tmp = uploaded + 1;
_id: res.id, id = res.id;
_attachment: "enclosure", info_context.innerHTML += "<li>" + input_context.files[uploaded].name + " " + tmp + "/" + length;
_blob: input_context.files[uploaded] return putAll(id, 0, input_context.files[uploaded]);
}, 0);
}).then(function() {
uploaded += 1;
info_context.innerHTML += "<li>" + input_context.files[uploaded - 1].name + " " + uploaded + "/" + length + "</li>";
if (uploaded === length) {
return exit(g);
}
queue.push(post);
}).fail(function(error) { }).fail(function(error) {
if (!(error instanceof RSVP.CancellationError)) { if (!(error instanceof RSVP.CancellationError)) {
info_context.innerHTML += input_context.files[uploaded].name + " failed : storage maybe insufficient"; info_context.innerHTML += input_context.files[uploaded].name + " failed : storage maybe insufficient";
return g.plEnablePage(); //xxx
g.plEnablePage();
return g.jio_remove({
_id: id
});
} }
document.getElementsByTagName("body")[0].textContent = JSON.stringify(error); document.getElementsByTagName("body")[0].textContent = JSON.stringify(error);
}); });
} };
queue = new RSVP.Queue(); queue = new RSVP.Queue();
queue.push(function() { queue.push(function() {
return g.plEnablePage(); return g.plEnablePage();
......
...@@ -15,7 +15,10 @@ ...@@ -15,7 +15,10 @@
"2" : "../audioplayer_playlist_online/index.html"}, "2" : "../audioplayer_playlist_online/index.html"},
"control" : {"0" : "../audioplayer_control/index.html", "control" : {"0" : "../audioplayer_control/index.html",
"1" : "../audioplayer_control/index.html", "1" : "../audioplayer_control/index.html",
"2" : "../audioplayer_control/index.html"} "2" : "../audioplayer_control/index.html"},
"video_control" : {"0" : "../audioplayer_video_control/index.html",
"1" : "../audioplayer_video_control/index.html",
"2" : "../audioplayer_video_control/index.html"}
}, },
allStorageType = ["offline", "localhost", "online"]; allStorageType = ["offline", "localhost", "online"];
function storageType(type) { function storageType(type) {
...@@ -219,6 +222,8 @@ ...@@ -219,6 +222,8 @@
if (page_gadget.startService !== undefined) { if (page_gadget.startService !== undefined) {
return page_gadget.startService(options); return page_gadget.startService(options);
} }
}).fail(function (e) {
console.log(e);
}); });
}); });
}(window, rJS, jQuery, RSVP)); }(window, rJS, jQuery, RSVP));
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
AudioContext = window.AudioContext || window.webkitAudioContext AudioContext = window.AudioContext || window.webkitAudioContext
|| window.mozAudiocontext || window.msAudioContext, || window.mozAudiocontext || window.msAudioContext,
audioCtx = new AudioContext(), audioCtx = new AudioContext(),
MediaSource = window.MediaSource || window.WebKitMediaSource,
myLoopEventListener = function (target, type, callback, myLoopEventListener = function (target, type, callback,
allowDefault) { allowDefault) {
////////////////////////// //////////////////////////
...@@ -84,12 +85,6 @@ ...@@ -84,12 +85,6 @@
gadget.filter.connect(gadget.analyser); gadget.filter.connect(gadget.analyser);
gadget.analyser.connect(gadget.gain); gadget.analyser.connect(gadget.gain);
gadget.gain.connect(audioCtx.destination); gadget.gain.connect(audioCtx.destination);
gadget.audio.src = url;
gadget.audio.load();
if (gadget.type === "video/webm") {
gadget.video.src = url;
gadget.video.load();
}
} }
function promiseRequestAnimation(callback) { function promiseRequestAnimation(callback) {
...@@ -130,7 +125,6 @@ ...@@ -130,7 +125,6 @@
meterNum = 300, meterNum = 300,
array, array,
drawFrame, drawFrame,
showTime,
step, step,
i, i,
value, value,
...@@ -157,21 +151,7 @@ ...@@ -157,21 +151,7 @@
cheight); //the meter cheight); //the meter
} }
}; };
showTime = function () { return promiseRequestAnimation(drawFrame);
bar_context.value = that.audio.currentTime;
time_context.innerHTML = timeFormat(that.audio.duration -
that.audio.currentTime);
that.video.volume = 0;
};
if (that.type !== "video/webm") {
canvas.style.display = "";
that.video.style.display = "none";
return promiseRequestAnimation(drawFrame);
}
that.video.play();
that.video.style.display = "";
canvas.style.display = "none";
return promiseRequestAnimation(showTime);
} }
gk.declareAcquiredMethod("jio_getAttachment", "jio_getAttachment") gk.declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
...@@ -208,7 +188,7 @@ ...@@ -208,7 +188,7 @@
share_context.href = share_context.href =
"https://twitter.com/intent/tweet?hashtags=MusicPlayer&text=" "https://twitter.com/intent/tweet?hashtags=MusicPlayer&text="
+ encodeURI(result.data.title); + encodeURI(result.data.title);
g.type = result.data.type; g.length = Object.keys(result.data._attachment).length;
return g.displayThisTitle(options.action + " : " return g.displayThisTitle(options.action + " : "
+ result.data.title); + result.data.title);
}) })
...@@ -217,25 +197,38 @@ ...@@ -217,25 +197,38 @@
}) })
.push(function (e) { .push(function (e) {
var list = e.data.rows, var list = e.data.rows,
id; id,
index,
control = "control";
if (list.length === 1) { if (list.length === 1) {
id = g.currentId; id = g.currentId;
} else { } else {
do { do {
id = list[Math.floor(Math.random() * list.length)].id; index = Math.floor(Math.random() * list.length);
id = list[index].id;
} while (g.currentId === id); } while (g.currentId === id);
} }
return g.displayThisPage({page: "control", if (list[index].doc.format === "video/webm") {
control = "video_control";
}
return g.displayThisPage({page: control,
id : id, id : id,
action : options.action}); action : options.action});
}) })
.push(function (url) { .push(function (url) {
g.__element.getElementsByClassName("next")[0].href = url; g.__element.getElementsByClassName("next")[0].href = url;
g.index = 0;
g.id = options.id;
return g.jio_getAttachment({"_id" : options.id, return g.jio_getAttachment({"_id" : options.id,
"_attachment" : "enclosure" }); "_attachment" : "enclosure0" });
}) })
.push(function (blob) { .push(function (blob) {
g.url = URL.createObjectURL(blob); g.sourceBuffer = g.mediaSource.addSourceBuffer('audio/mpeg;');
return jIO.util.readBlobAsArrayBuffer(blob).then(function (e) {
g.sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
g.audio.play();
g.fin = true;
});
}) })
.push(undefined, function (error) { .push(undefined, function (error) {
if (!(error instanceof RSVP.CancellationError)) { if (!(error instanceof RSVP.CancellationError)) {
...@@ -259,16 +252,11 @@ ...@@ -259,16 +252,11 @@
filter_type = $('select'), filter_type = $('select'),
loop_context = g.__element.getElementsByClassName("loop")[0], loop_context = g.__element.getElementsByClassName("loop")[0],
loop = false, loop = false,
video = g.__element.getElementsByClassName("videoMP4")[0],
time_context = g.__element.getElementsByClassName("time")[0]; time_context = g.__element.getElementsByClassName("time")[0];
bar_context.value = 0; bar_context.value = 0;
return new RSVP.Queue() return new RSVP.Queue()
.push(function () { .push(function () {
set.call(g, g.url); set.call(g, g.url);
return promiseEventListener(g.audio, "loadedmetadata", false);
})
.push(function () {
bar_context.max = g.audio.duration;
return RSVP.all([ return RSVP.all([
g.plEnablePage(), g.plEnablePage(),
g.plGive("loop"), g.plGive("loop"),
...@@ -291,6 +279,30 @@ ...@@ -291,6 +279,30 @@
time_context.innerHTML = timeFormat(g.audio.duration); time_context.innerHTML = timeFormat(g.audio.duration);
return RSVP.any([ return RSVP.any([
play.call(g), play.call(g),
loopEventListener(g.sourceBuffer, "updateend", false, function () {
if (!g.fin) {
return;
}
g.fin = false;
if (g.index >= g.length - 1) {
g.mediaSource.endOfStream();
bar_context.max = g.audio.duration;
return;
}
g.index += 1;
return g.jio_getAttachment({"_id" : g.id,
"_attachment" : "enclosure" + g.index })
.then(function (blob) {
console.log(g.index);
return jIO.util.readBlobAsArrayBuffer(blob);
})
.then(function (e) {
g.fin = true;
return g.sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
});
}),
loopEventListener(mute_context, "click", false, function () { loopEventListener(mute_context, "click", false, function () {
mute_context.innerHTML = g.gain.gain.value ? mute_context.innerHTML = g.gain.gain.value ?
"mute on" : "mute off"; "mute on" : "mute off";
...@@ -302,38 +314,17 @@ ...@@ -302,38 +314,17 @@
if (loop) { if (loop) {
g.audio.load(); g.audio.load();
g.audio.play(); g.audio.play();
if (g.type === "video/webm") {
g.video.load();
g.video.play();
}
} else { } else {
window.location = g.__element window.location = g.__element
.getElementsByClassName("next")[0].href; .getElementsByClassName("next")[0].href;
} }
}), }),
loopEventListener(g.video, "ended", false, function () {
if (loop) {
g.audio.load();
g.video.load();
g.audio.play();
g.video.play();
} else {
window.location = g.__element
.getElementsByClassName("next")[0].href;
}
}),
loopEventListener(command_context, "click", false, function () { loopEventListener(command_context, "click", false, function () {
if (g.audio.paused) { if (g.audio.paused) {
g.audio.play(); g.audio.play();
if (g.type === "video/webm") {
g.video.currentTime = g.audio.currentTime;
g.video.play();
}
command_context.innerHTML = "stop"; command_context.innerHTML = "stop";
} else { } else {
g.audio.pause(); g.audio.pause();
g.video.pause();
command_context.innerHTML = "play"; command_context.innerHTML = "play";
} }
}), }),
...@@ -342,42 +333,8 @@ ...@@ -342,42 +333,8 @@
g.audio.currentTime = getTime(bar_context, event.clientX); g.audio.currentTime = getTime(bar_context, event.clientX);
bar_context.value = g.audio.currentTime; bar_context.value = g.audio.currentTime;
g.audio.play(); g.audio.play();
if (g.type === "video/webm") {
g.video.currentTime = g.audio.currentTime;
g.video.play();
}
command_context.innerHTML = "stop";
}),
loopEventListener(video, "dblclick", false, function (event) {
var isFullScreen = document.mozFullScreen ||
document.webkitIsFullScreen,
cancelFullScreen = document.webkitCancelFullScreen.bind(document) ||
document.mozCancelFullScreen.bind(document),
requestFullScreen = video.webkitRequestFullScreen.bind(video) ||
video.mozRequestFullScreen.bind(video);
if (isFullScreen) {
cancelFullScreen();
g.audio.currentTime = g.video.currentTime;
g.video.currentTime = g.audio.currentTime;
} else {
requestFullScreen();
}
}),
loopEventListener(video, "play", false, function (event) {
if (g.video.currentTime) {
g.audio.currentTime = g.video.currentTime;
g.audio.play();
g.video.currentTime = g.audio.currentTime;//consistency
}
command_context.innerHTML = "stop"; command_context.innerHTML = "stop";
}), }),
loopEventListener(video, "pause", false, function (event) {
g.audio.pause();
command_context.innerHTML = "play";
}),
loopEventListener(bar_context, "mousemove", loopEventListener(bar_context, "mousemove",
false, function (event) { false, function (event) {
var time = getTime(bar_context, event.clientX); var time = getTime(bar_context, event.clientX);
...@@ -415,7 +372,7 @@ ...@@ -415,7 +372,7 @@
g.gain = audioCtx.createGain(); g.gain = audioCtx.createGain();
g.filter = audioCtx.createBiquadFilter(); g.filter = audioCtx.createBiquadFilter();
g.canvas = g.__element.getElementsByTagName('canvas')[0]; g.canvas = g.__element.getElementsByTagName('canvas')[0];
g.video = g.__element.getElementsByTagName('video')[0]; g.mediaSource = new MediaSource();
g.video.volume = 0; g.audio.src = URL.createObjectURL(g.mediaSource);
}); });
}(window, rJS, RSVP, loopEventListener, jQuery, promiseEventListener)); }(window, rJS, RSVP, loopEventListener, jQuery, promiseEventListener));
...@@ -5,22 +5,11 @@ width : 10em; ...@@ -5,22 +5,11 @@ width : 10em;
text-align: center; text-align: center;
} }
#video {
text-align: center;
}
video#videoControl {
width: 50%;
height: 20%;
}
canvas#can{ canvas#can{
width: 50%; width: 50%;
height: 20%; height: 20%;
} }
//video::-webkit-media-controls-enclosure {
// display: none !important;
//}
progress.bar { progress.bar {
position: inherit; position: inherit;
display: block; display: block;
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<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> <script src="http://git.erp5.org/gitweb/dream.git/blob_plain/01bbb0b10edd731fb24898ce8b5e193ecbc989ca:/dream/platform/src/dream/mixin_promise.js?js=1" 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> <link rel="stylesheet" href="./control.css" media="screen" ></link>
...@@ -46,14 +46,6 @@ ...@@ -46,14 +46,6 @@
</audio> </audio>
<div id="video">
<video id="videoControl" class="videoMP4">
<type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="minus"> <div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="minus">
<h1>Equalizer</h1> <h1>Equalizer</h1>
<div data-role="fieldcontain"> <div data-role="fieldcontain">
......
...@@ -8,14 +8,20 @@ ...@@ -8,14 +8,20 @@
<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="../<%= 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="http://git.erp5.org/gitweb/dream.git/blob_plain/01bbb0b10edd731fb24898ce8b5e193ecbc989ca:/dream/platform/src/dream/mixin_promise.js?js=1" type="text/javascript"></script>
<script id="rows-template" type="text/x-handlebars-template"> <script id="rows-template" type="text/x-handlebars-template">
{{#each rows}} {{#each rows}}
<li> <li>
{{#compare this.doc.type "audio/mp3"}}
<a href=#page=control&id={{this.id}}&action=offline> <a href=#page=control&id={{this.id}}&action=offline>
{{this.doc.title}} {{this.doc.title}}
</a> </a>
{{else}}
<a href=#page=video_control&id={{this.id}}&action=offline>
{{this.doc.title}}
</a>
{{/compare}}
<a href=#page=playlist&id={{this.id}}&action=delete> <a href=#page=playlist&id={{this.id}}&action=delete>
data-rel=popup data-rel=popup
data-position-to=window data-position-to=window
......
...@@ -48,6 +48,12 @@ ...@@ -48,6 +48,12 @@
i, i,
j, j,
exp; exp;
Handlebars.registerHelper("compare", function (v1, v2, options) {
if (v1 === v2) {
return options.fn(this);
}
return options.inverse(this);
});
if (options.id !== undefined && options.id !== "offline") { if (options.id !== undefined && options.id !== "offline") {
tmp = []; tmp = [];
for (i = 0, j = 0; i < e.data.rows.length; i += 1) { for (i = 0, j = 0; i < e.data.rows.length; i += 1) {
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<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> <script src="http://git.erp5.org/gitweb/dream.git/blob_plain/01bbb0b10edd731fb24898ce8b5e193ecbc989ca:/dream/platform/src/dream/mixin_promise.js?js=1" type="text/javascript"></script>
<!-- custom script --> <!-- custom script -->
<script src="./upload.js" type="text/javascript"></script> <script src="./upload.js" type="text/javascript"></script>
......
/*global window, rJS, RSVP, jIO, JSON, promiseEventListener, console, /*global window, rJS, RSVP, jIO, JSON, promiseEventListener, console,
Error*/ Math */
/*jslint nomen: true*/ /*jslint nomen: true*/
(function (window, jIO, rJS) { (function (window, jIO, rJS) {
"use strict"; "use strict";
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
} }
gk.declareAcquiredMethod("jio_post", "jio_post") gk.declareAcquiredMethod("jio_post", "jio_post")
.declareAcquiredMethod("jio_putAttachment", "jio_putAttachment") .declareAcquiredMethod("jio_putAttachment", "jio_putAttachment")
.declareAcquiredMethod("jio_remove", "jio_remove")
.declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash") .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
.declareAcquiredMethod("displayThisPage", "displayThisPage") .declareAcquiredMethod("displayThisPage", "displayThisPage")
.declareAcquiredMethod("displayThisTitle", "displayThisTitle") .declareAcquiredMethod("displayThisTitle", "displayThisTitle")
...@@ -35,48 +36,80 @@ ...@@ -35,48 +36,80 @@
g.__element.getElementsByClassName('info')[0], g.__element.getElementsByClassName('info')[0],
queue, queue,
uploaded = 0, uploaded = 0,
post,
length; length;
function post() { info_context.innerHTML = "<ul>";
function putAll(id, index, file) {
var blobLength = 2000000,
size = blobLength * (index + 1),
blob;
if (size > file.size) {
blob = file.slice(blobLength * index, file.size);
} else {
blob = file.slice(blobLength * index, size);
}
return g.jio_putAttachment({
"_id" : id,
"_attachment" : "enclosure" + index,
"_blob": blob
}, 0)
.then(function () {
var progress = Math.floor((size / file.size) * 100);
if (progress > 100) {
progress = 100;
}
progress += "%";
info_context.innerHTML += "<li>" + file.name
+ " " + progress + "</li>";
if (size < file.size) {
return putAll(id, index + 1, file);
}
uploaded += 1;
if (uploaded === length) {
return exit(g);
}
queue.push(post);
});
}
post = function () {
var now = new Date(),
id;
if (uploaded === length) { if (uploaded === length) {
return; return;
} }
var now = new Date();
return g.jio_post({ "title" : input_context.files[uploaded].name, return g.jio_post({ "title" : input_context.files[uploaded].name,
"type" : input_context.files[uploaded].type, "type" : input_context.files[uploaded].type,
"format" : input_context.files[uploaded].type, "format" : input_context.files[uploaded].type,
"size" : input_context.files[uploaded].size, "size" : input_context.files[uploaded].size,
"modified" : now.toUTCString(), "modified" : now.toUTCString(),
"date" : now.getFullYear() + "-" + "date" : now.getFullYear() + "-" +
(now.getMonth() + 1) + "-" + now.getDate() (now.getMonth() + 1) + "-" + now.getDate()
}, 0) }, 0)
.then(function (res) { .then(function (res) {
return g.jio_putAttachment({ var tmp = uploaded + 1;
"_id" : res.id, id = res.id;
"_attachment" : "enclosure",
"_blob": input_context.files[uploaded]
}, 0);
})
.then(function () {
uploaded += 1;
info_context.innerHTML += "<li>" + info_context.innerHTML += "<li>" +
input_context.files[uploaded - 1].name input_context.files[uploaded].name + " " +
+ " " + uploaded + "/" + length + "</li>"; tmp + "/" + length;
if (uploaded === length) { return putAll(id, 0, input_context.files[uploaded]);
return exit(g);
}
queue.push(post);
}) })
.fail(function (error) { .fail(function (error) {
if (!(error instanceof RSVP.CancellationError)) { if (!(error instanceof RSVP.CancellationError)) {
info_context.innerHTML += info_context.innerHTML +=
input_context.files[uploaded].name + input_context.files[uploaded].name +
" failed : storage maybe insufficient"; " failed : storage maybe insufficient";
return g.plEnablePage(); //xxx
g.plEnablePage();
return g.jio_remove({"_id" : id});
} }
document.getElementsByTagName('body')[0].textContent = document.getElementsByTagName('body')[0].textContent =
JSON.stringify(error); JSON.stringify(error);
}); });
} };
queue = new RSVP.Queue(); queue = new RSVP.Queue();
queue.push(function () { queue.push(function () {
return g.plEnablePage(); return g.plEnablePage();
......
...@@ -3,6 +3,15 @@ ...@@ -3,6 +3,15 @@
Audio, loopEventListener, jQuery, promiseEventListener, Blob*/ Audio, loopEventListener, jQuery, promiseEventListener, Blob*/
/*jslint nomen: true, maxlen:180 */ /*jslint nomen: true, maxlen:180 */
/* The MediaSource API only supports MPEG-DASH and
* VP8 with keyframed segments currently (on Chrome 35).
* more info:
*https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html
*/
(function (window, rJS, RSVP, loopEventListener, $, promiseEventListener) { (function (window, rJS, RSVP, loopEventListener, $, promiseEventListener) {
"use strict"; "use strict";
var gk = rJS(window), var gk = rJS(window),
...@@ -22,19 +31,54 @@ ...@@ -22,19 +31,54 @@
if (options.id) { if (options.id) {
return new RSVP.Queue() return new RSVP.Queue()
.push(function () { .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="
+ encodeURI(result.data.title);
g.length = Object.keys(result.data._attachment).length;
return g.displayThisTitle(options.action + " : "
+ result.data.title);
})
.push(function () {
return g.allDocs({"include_docs": true});
})
.push(function (e) {
var list = e.data.rows,
id,
index,
control = "control";
if (list.length === 1) {
id = g.currentId;
} else {
do {
index = Math.floor(Math.random() * list.length);
id = list[index].id;
} while (g.currentId === id);
}
if (list[index].doc.format === "video/webm") {
control = "video_control";
}
return g.displayThisPage({page: control,
id : id,
action : options.action});
})
.push(function (url) {
g.__element.getElementsByClassName("next")[0].href = url;
g.index = 0;
g.id = options.id;
return g.jio_getAttachment({"_id" : options.id, return g.jio_getAttachment({"_id" : options.id,
"_attachment" : "enclosure" }); "_attachment" : "enclosure0" });
}) })
.push(function (blob) { .push(function (blob) {
g.sourceBuffer = g.mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); g.sourceBuffer = g.mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
g.blob = blob;
g.size = 0;
g.step = Math.ceil(blob.size / 16);
blob = blob.slice(0, g.step);
g.size += g.step;
return jIO.util.readBlobAsArrayBuffer(blob).then(function (e) { return jIO.util.readBlobAsArrayBuffer(blob).then(function (e) {
g.sourceBuffer.appendBuffer(new Uint8Array(e.target.result)); g.sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
g.video.play(); g.video.play();
g.fin = true;
}); });
}) })
.push(undefined, function (error) { .push(undefined, function (error) {
...@@ -50,31 +94,35 @@ ...@@ -50,31 +94,35 @@
} }
}) })
.declareMethod("startService", function () { .declareMethod("startService", function () {
var g = this, var g = this;
video = g.__element.getElementsByClassName("videoMP4")[0];
g.video.play();
return new RSVP.Queue() return new RSVP.Queue()
.push(function () { .push(function () {
return RSVP.any([ return RSVP.any([
loopEventListener(video, "progress", false, function () { loopEventListener(g.sourceBuffer, "updateend", false, function () {
var blob; if (!g.fin) {
if (g.size >= g.blob.size) {
g.mediaSource.endOfStream();
return; return;
} }
if (g.size + g.step < g.blob.size) { g.fin = false;
blob = g.blob.slice(g.size, g.size + g.step); if (g.index >= g.length - 1) {
} else { g.mediaSource.endOfStream();
blob = g.blob.slice(g.size); return;
} }
g.size += g.step; g.index += 1;
return jIO.util.readBlobAsArrayBuffer(blob).then( return g.jio_getAttachment({"_id" : g.id,
function (e) { "_attachment" : "enclosure" + g.index })
.then(function (blob) {
console.log(g.index);
return jIO.util.readBlobAsArrayBuffer(blob);
})
.then(function (e) {
g.fin = true;
return g.sourceBuffer.appendBuffer(new Uint8Array(e.target.result)); return g.sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
} });
);
}) })
]); ]);
})
.push(function (error) {
console.log(error);
}); });
}); });
gk.ready(function (g) { gk.ready(function (g) {
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<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> <script src="http://git.erp5.org/gitweb/dream.git/blob_plain/01bbb0b10edd731fb24898ce8b5e193ecbc989ca:/dream/platform/src/dream/mixin_promise.js?js=1" 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> <link rel="stylesheet" href="./control.css" media="screen" ></link>
......
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