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{
position: absolute;
top: 0%;
top: 200px;
margin: 30px 0 20px 0;
left :-100px;
}
.title {
position: absolute;
......
src/audioplayer/audioplayer.js
View file @ 46e356eb
......@@ -20,9 +20,11 @@
play_context,
stop_context,
addMusic_context,
list_context,
currentId = -1,
initializeFlag = false,
newPage,
list,
titleSave,
playlist = [];
function nextId() {
if (totalId === -1) {
......@@ -74,11 +76,12 @@
time.setMax(value[0]);
})
.ready(function (g) {
next_context = g.__element.getElementsByTagName('a')[0];
play_context = g.__element.getElementsByTagName('a')[1];
stop_context = g.__element.getElementsByTagName('a')[2];
addMusic_context = g.__element.getElementsByTagName('a')[3];
newPage = false;
var array = g.__element.getElementsByTagName('a');
next_context = array[0];
play_context = array[1];
stop_context = array[array.length - 3];
addMusic_context = array[array.length - 2];
list_context = array[array.length - 1];
that = g;
initializeFlag = false;
RSVP.all([
......@@ -102,6 +105,9 @@
),
g.getDeclaredGadget(
"error"
),
g.getDeclaredGadget(
"playlist"
)
])
.then(function (all_param) {
......@@ -112,10 +118,11 @@
title = all_param[4];
io = all_param[5];
error = all_param[6];
list = all_param[7];
error.noDisplay();
io.noDisplay();
that.display();
$(volume.__element).trigger("create");
list.noDisplay();
window.setInterval(function () {
control.getCurrentTime()
.then(function (e) {
......@@ -152,7 +159,6 @@
rJS(window)
.declareMethod("display", function (options) {
io.noDisplay();
title.display();
time.display();
volume.display();
......@@ -161,11 +167,9 @@
play_context.style.display = "";
stop_context.style.display = "";
addMusic_context.style.display = "";
list_context.style.display = "";
})
.declareMethod("noDisplay", function (options) {
if (options === "addPage") {
io.display();
}
title.noDisplay();
time.noDisplay();
volume.noDisplay();
......@@ -174,6 +178,7 @@
play_context.style.display = "none";
stop_context.style.display = "none";
addMusic_context.style.display = "none";
list_context.style.display = "none";
})
.declareMethod("showPage", function (param) {
return this.aq_pleasePublishMyState({page: param});
......@@ -181,12 +186,6 @@
.declareMethod("render", function (options) {
var id = nextId(),
name = playlist[id];
if (newPage === true) {
newPage = false;
error.noDisplay();
that.display();
return;
}
if (initializeFlag === false) {
return;
}
......@@ -197,48 +196,53 @@
});
if (options.page !== undefined) {
if (options.page === "play") {
control.playSong();
animation.showAnimation();
if (options.page === "addMusic") {
animation.stopAnimation();
that.noDisplay();
io.display();
return;
}
if (options.page === "stop") {
control.stopSong();
if (options.page === "playlist") {
animation.stopAnimation();
that.noDisplay();
list.initList(playlist);
list.display();
return;
}
if (options.page === "addMusic") {
animation.stopAnimation();
control.stopSong()
.then(function () {
that.noDisplay("addPage");
newPage = true;
});
error.noDisplay();
list.noDisplay();
io.noDisplay();
that.display();
if (options.page === "play") {
control.playSong();
animation.showAnimation();
return;
}
if (options.page === "playlist") {
if (options.page === "stop") {
control.stopSong();
animation.stopAnimation();
newPage = true;
return;
}
if (playlist.indexOf(options.page) === -1) {
animation.stopAnimation();
control.stopSong()
.then(function () {
error.display();
that.noDisplay();
newPage = true;
})
.fail(function (e) {
console.log("error drop gadget " + e);
});
error.display();
that.noDisplay();
return;
}
if (titleSave === options.page) {
control.playSong();
animation.showAnimation();
return;
}
io.getIO(options.page).then(function (file) {
control.setSong(URL.createObjectURL(file)).then(function () {
control.playSong();
title.setMessage(options.page);
titleSave = options.page;
animation.showAnimation();
});
});
......
src/audioplayer/index.html
View file @ 46e356eb
......@@ -23,68 +23,51 @@
<div data-role="header" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li> <a class ="next" data-transition="slide" >next</a></li>
<li> <a class ="play" data-transition="slide" >play</a></li>
<li> <a class="next">next</a></li>
<li> <a class="play">play</a></li>
</ul>
</div>
</div>
<div class = "audioplayer">
<div class="audioplayer">
<!-- 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 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 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 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 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 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 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 data-role="footer" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li> <a class ="stop" data-transition="slide" >stop</a></li>
<li> <a class ="addMusic" data-transition="slide">addMusic</a></li>
<li> <a class="stop">stop</a></li>
<li> <a class="addMusic">addMusic</a></li>
<li> <a href="#page=playlist">playlist</a></li>
</ul>
</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>
</html>
src/audioplayer_animation/animation.js
View file @ 46e356eb
......@@ -54,6 +54,8 @@
};
that.animationPlayId = window.requestAnimationFrame(drawFrame);
})
.declareMethod('stopAnimation', function () {
this.play = false;
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;
padding: 5px;
margin: 50px 0 20px 0;
......
src/audioplayer_progress/progress.js
View file @ 46e356eb
......@@ -44,9 +44,11 @@
})
.declareMethod('display', function (attachment) {
this.bar.style.display = "";
this.time.style.display = "";
})
.declareMethod('noDisplay', function (attachment) {
this.bar.style.display = "none";
this.time.style.display = "none";
})
.declareAcquiredMethod("setCurrentTime", "setCurrentTime");
gk.ready(function (g) {
......
src/audioplayer_volume/volume.css
View file @ 46e356eb
progress {
progress.volume {
height: 25px;
padding: 5px;
margin: 50px 0 20px 0;
width:250px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-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;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
src/audioplayer_volume/volume.js
View file @ 46e356eb
......@@ -27,21 +27,15 @@
.declareAcquiredMethod("getVolume", "getVolume"); //xxxx
gk.ready(function (g) {
g.bar = g.__element.getElementsByTagName('progress')[0];
g.box = g.__element.getElementsByTagName('div')[0];
g.bar.max = 1000;
g.bar.style.width = window.screen.availWidth + "px";
// g.bar.style.width = + "px";
g.bar.onclick = function (e) {
var posX = e.clientX,
targetLeft = $(g.bar).offset().left;
posX = ((posX - targetLeft) / $(g.bar).width()) * g.bar.max;
g.setValue(posX);
g.setVolume(posX);
};
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;
var posY = e.clientY,
targetTop = $(g.bar).offset().top;
posY = (($(g.bar).width() - posY + targetTop)
/ $(g.bar).width()) * g.bar.max;
g.setValue(posY);
g.setVolume(posY);
};
});
}(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