Skip to content

O
officejs
Commit 46e356eb authored by Xiaowu Zhang's avatar Xiaowu Zhang
Browse files
Options

add playlist gadget in audioplayer

parent ff2c196c
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 90 deletions
src/audioplayer/audioplayer.css
View file @ 46e356eb
.progress_volume{ .progress_volume{
position: absolute; position: absolute;
top: 0%; top: 200px;
margin: 30px 0 20px 0; margin: 30px 0 20px 0;
left :-100px;
} }
.title { .title {
position: absolute; position: absolute;
......
src/audioplayer/audioplayer.js
View file @ 46e356eb
...@@ -20,9 +20,11 @@ ...@@ -20,9 +20,11 @@
play_context, play_context,
stop_context, stop_context,
addMusic_context, addMusic_context,
list_context,
currentId = -1, currentId = -1,
initializeFlag = false, initializeFlag = false,
newPage, list,
titleSave,
playlist = []; playlist = [];
function nextId() { function nextId() {
if (totalId === -1) { if (totalId === -1) {
...@@ -74,11 +76,12 @@ ...@@ -74,11 +76,12 @@
time.setMax(value[0]); time.setMax(value[0]);
}) })
.ready(function (g) { .ready(function (g) {
next_context = g.__element.getElementsByTagName('a')[0]; var array = g.__element.getElementsByTagName('a');
play_context = g.__element.getElementsByTagName('a')[1]; next_context = array[0];
stop_context = g.__element.getElementsByTagName('a')[2]; play_context = array[1];
addMusic_context = g.__element.getElementsByTagName('a')[3]; stop_context = array[array.length - 3];
newPage = false; addMusic_context = array[array.length - 2];
list_context = array[array.length - 1];
that = g; that = g;
initializeFlag = false; initializeFlag = false;
RSVP.all([ RSVP.all([
...@@ -102,6 +105,9 @@ ...@@ -102,6 +105,9 @@
), ),
g.getDeclaredGadget( g.getDeclaredGadget(
"error" "error"
),
g.getDeclaredGadget(
"playlist"
) )
]) ])
.then(function (all_param) { .then(function (all_param) {
...@@ -112,10 +118,11 @@ ...@@ -112,10 +118,11 @@
title = all_param[4]; title = all_param[4];
io = all_param[5]; io = all_param[5];
error = all_param[6]; error = all_param[6];
list = all_param[7];
error.noDisplay(); error.noDisplay();
io.noDisplay(); io.noDisplay();
that.display(); that.display();
$(volume.__element).trigger("create"); list.noDisplay();
window.setInterval(function () { window.setInterval(function () {
control.getCurrentTime() control.getCurrentTime()
.then(function (e) { .then(function (e) {
...@@ -152,7 +159,6 @@ ...@@ -152,7 +159,6 @@
rJS(window) rJS(window)
.declareMethod("display", function (options) { .declareMethod("display", function (options) {
io.noDisplay();
title.display(); title.display();
time.display(); time.display();
volume.display(); volume.display();
...@@ -161,11 +167,9 @@ ...@@ -161,11 +167,9 @@
play_context.style.display = ""; play_context.style.display = "";
stop_context.style.display = ""; stop_context.style.display = "";
addMusic_context.style.display = ""; addMusic_context.style.display = "";
list_context.style.display = "";
}) })
.declareMethod("noDisplay", function (options) { .declareMethod("noDisplay", function (options) {
if (options === "addPage") {
io.display();
}
title.noDisplay(); title.noDisplay();
time.noDisplay(); time.noDisplay();
volume.noDisplay(); volume.noDisplay();
...@@ -174,6 +178,7 @@ ...@@ -174,6 +178,7 @@
play_context.style.display = "none"; play_context.style.display = "none";
stop_context.style.display = "none"; stop_context.style.display = "none";
addMusic_context.style.display = "none"; addMusic_context.style.display = "none";
list_context.style.display = "none";
}) })
.declareMethod("showPage", function (param) { .declareMethod("showPage", function (param) {
return this.aq_pleasePublishMyState({page: param}); return this.aq_pleasePublishMyState({page: param});
...@@ -181,12 +186,6 @@ ...@@ -181,12 +186,6 @@
.declareMethod("render", function (options) { .declareMethod("render", function (options) {
var id = nextId(), var id = nextId(),
name = playlist[id]; name = playlist[id];
if (newPage === true) {
newPage = false;
error.noDisplay();
that.display();
return;
}
if (initializeFlag === false) { if (initializeFlag === false) {
return; return;
} }
...@@ -197,48 +196,53 @@ ...@@ -197,48 +196,53 @@
}); });
if (options.page !== undefined) { if (options.page !== undefined) {
if (options.page === "play") { if (options.page === "addMusic") {
control.playSong(); animation.stopAnimation();
animation.showAnimation(); that.noDisplay();
io.display();
return; return;
} }
if (options.page === "stop") {
control.stopSong(); if (options.page === "playlist") {
animation.stopAnimation(); animation.stopAnimation();
that.noDisplay();
list.initList(playlist);
list.display();
return; return;
} }
if (options.page === "addMusic") {
animation.stopAnimation(); error.noDisplay();
control.stopSong() list.noDisplay();
.then(function () { io.noDisplay();
that.noDisplay("addPage"); that.display();
newPage = true;
}); if (options.page === "play") {
control.playSong();
animation.showAnimation();
return; return;
} }
if (options.page === "playlist") { if (options.page === "stop") {
control.stopSong(); control.stopSong();
animation.stopAnimation(); animation.stopAnimation();
newPage = true;
return; return;
} }
if (playlist.indexOf(options.page) === -1) { if (playlist.indexOf(options.page) === -1) {
animation.stopAnimation(); animation.stopAnimation();
control.stopSong() error.display();
.then(function () { that.noDisplay();
error.display(); return;
that.noDisplay(); }
newPage = true; if (titleSave === options.page) {
}) control.playSong();
.fail(function (e) { animation.showAnimation();
console.log("error drop gadget " + e);
});
return; return;
} }
io.getIO(options.page).then(function (file) { io.getIO(options.page).then(function (file) {
control.setSong(URL.createObjectURL(file)).then(function () { control.setSong(URL.createObjectURL(file)).then(function () {
control.playSong(); control.playSong();
title.setMessage(options.page); title.setMessage(options.page);
titleSave = options.page;
animation.showAnimation(); animation.showAnimation();
}); });
}); });
......
src/audioplayer/index.html
View file @ 46e356eb
...@@ -23,68 +23,51 @@ ...@@ -23,68 +23,51 @@
<div data-role="header" data-position="fullscreen"> <div data-role="header" data-position="fullscreen">
<div data-role="navbar"> <div data-role="navbar">
<ul> <ul>
<li> <a class ="next" data-transition="slide" >next</a></li> <li> <a class="next">next</a></li>
<li> <a class ="play" data-transition="slide" >play</a></li> <li> <a class="play">play</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class = "audioplayer"> <div class="audioplayer">
<!-- 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>
<div class = "animation" data-gadget-url="../audioplayer_animation/index.html" data-gadget-scope="animation"> <div class="animation" data-gadget-url="../audioplayer_animation/index.html" data-gadget-scope="animation">
</div> </div>
<div class = "progress_time" data-gadget-url="../audioplayer_progress/index.html" data-gadget-scope="time"> <div class="progress_time" data-gadget-url="../audioplayer_progress/index.html" data-gadget-scope="time">
</div> </div>
<div class = "progress_volume" data-gadget-url="../audioplayer_volume/index.html" data-gadget-scope="volume"> <div class="progress_volume" data-gadget-url="../audioplayer_volume/index.html" data-gadget-scope="volume">
</div> </div>
<div class = "title" data-gadget-url="../audioplayer_title/index.html" data-gadget-scope="title" > <div class="title" data-gadget-url="../audioplayer_title/index.html" data-gadget-scope="title" >
</div> </div>
<div class = "io" data-gadget-url="../audioplayer_io/index.html" data-gadget-scope="io" > <div class="io" data-gadget-url="../audioplayer_io/index.html" data-gadget-scope="io" >
</div> </div>
<div class = "error" data-gadget-url="./error.html" data-gadget-scope="error"> <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>
<div data-role="footer" data-position="fullscreen"> <div data-role="footer" data-position="fullscreen">
<div data-role="navbar"> <div data-role="navbar">
<ul> <ul>
<li> <a class ="stop" data-transition="slide" >stop</a></li> <li> <a class="stop">stop</a></li>
<li> <a class ="addMusic" data-transition="slide">addMusic</a></li> <li> <a class="addMusic">addMusic</a></li>
<li> <a href="#page=playlist">playlist</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<!--
<li> <a href="#page=playlist" data-transition="slide">playlist</a></li>
<div data-role="content">
<h2>music</h2>
<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div> -->
</body> </body>
</html> </html>
src/audioplayer_animation/animation.js
View file @ 46e356eb
...@@ -54,6 +54,8 @@ ...@@ -54,6 +54,8 @@
}; };
that.animationPlayId = window.requestAnimationFrame(drawFrame); that.animationPlayId = window.requestAnimationFrame(drawFrame);
}) })
.declareMethod('stopAnimation', function () { .declareMethod('stopAnimation', function () {
this.play = false; this.play = false;
window.cancelAnimationFrame( window.cancelAnimationFrame(
......
src/audioplayer_playlist/index.html 0 → 100644
View file @ 46e356eb
<!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="../<%= curl.jquerymobilejs.relative_dest %>"></script>
<link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
<!-- custom script -->
<script src="./playlist.js" type="text/javascript"></script>
<body>
<div data-role="content">
<ul data-role="listview" data-autodividers="true" data-filter="true" data-split-icon="gear" data-split-theme="d">
</ul>
</div>
</body>
</html>
src/audioplayer_playlist/playlist.js 0 → 100644
View file @ 46e356eb
/*global window, rJS, RSVP, console, jQuery, $ */
/*jslint maxlen:80, nomen: true */
(function (window, rJS, $) {
"use strict";
var gk = rJS(window);
gk.declareMethod('display', function (attachment) {
this.playlist.style.display = "";
})
.declareMethod('noDisplay', function (attachment) {
this.playlist.style.display = "none";
})
.declareMethod('initList', function (array) {
var i,
docFragment = document.createDocumentFragment(),
li;
// this.list.innerHTML = "";
for (i = 0; i < array.length; i += 1) {
li = document.createElement("li");
li.innerHTML =
"<a href=#page="
+ array[i]
+ ">"
+ array[i]
+ "</a> "
+ " <a href=#page="
+ array[i]
+ "delete "
+ "data-rel=popup "
+ "data-position-to=window "
+ "</a>";
docFragment.appendChild(li);
}
this.list.appendChild(docFragment);
$(this.list).listview("refresh");
});
gk.ready(function (g) {
g.playlist = g.__element.getElementsByTagName('div')[0];
g.list = g.__element.getElementsByTagName('ul')[0];
$(g.__element).trigger("create");
});
}(window, rJS, jQuery));
src/audioplayer_progress/progress.css
View file @ 46e356eb
progress { progress.pro {
height: 25px; height: 25px;
padding: 5px; padding: 5px;
margin: 50px 0 20px 0; margin: 50px 0 20px 0;
......
src/audioplayer_progress/progress.js
View file @ 46e356eb
...@@ -44,9 +44,11 @@ ...@@ -44,9 +44,11 @@
}) })
.declareMethod('display', function (attachment) { .declareMethod('display', function (attachment) {
this.bar.style.display = ""; this.bar.style.display = "";
this.time.style.display = "";
}) })
.declareMethod('noDisplay', function (attachment) { .declareMethod('noDisplay', function (attachment) {
this.bar.style.display = "none"; this.bar.style.display = "none";
this.time.style.display = "none";
}) })
.declareAcquiredMethod("setCurrentTime", "setCurrentTime"); .declareAcquiredMethod("setCurrentTime", "setCurrentTime");
gk.ready(function (g) { gk.ready(function (g) {
......
src/audioplayer_volume/volume.css
View file @ 46e356eb
progress { progress.volume {
height: 25px; height: 25px;
padding: 5px; padding: 5px;
margin: 50px 0 20px 0; margin: 50px 0 20px 0;
width:250px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
-moz-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444; -moz-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
-webkit-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444; -webkit-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
box-shadow: 0 1px 5px #000 inset,0 1px 0 #444; box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
} }
src/audioplayer_volume/volume.js
View file @ 46e356eb
...@@ -27,21 +27,15 @@ ...@@ -27,21 +27,15 @@
.declareAcquiredMethod("getVolume", "getVolume"); //xxxx .declareAcquiredMethod("getVolume", "getVolume"); //xxxx
gk.ready(function (g) { gk.ready(function (g) {
g.bar = g.__element.getElementsByTagName('progress')[0]; g.bar = g.__element.getElementsByTagName('progress')[0];
g.box = g.__element.getElementsByTagName('div')[0];
g.bar.max = 1000; g.bar.max = 1000;
g.bar.style.width = window.screen.availWidth + "px"; // g.bar.style.width = + "px";
g.bar.onclick = function (e) { g.bar.onclick = function (e) {
var posX = e.clientX, var posY = e.clientY,
targetLeft = $(g.bar).offset().left; targetTop = $(g.bar).offset().top;
posX = ((posX - targetLeft) / $(g.bar).width()) * g.bar.max; posY = (($(g.bar).width() - posY + targetTop)
g.setValue(posX); / $(g.bar).width()) * g.bar.max;
g.setVolume(posX); g.setValue(posY);
}; g.setVolume(posY);
g.bar.onmousemove = function (e) {
g.box.style.left = e.clientX + "px";
g.box.style.top = e.clientY + "px";
g.box.style.display = 'block';
g.box.innerHTML = e.clientX;
}; };
}); });
}(window, rJS, jQuery)); }(window, rJS, jQuery));
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