Files
@ 571d058c9838
Branch filter:
Location: light9/light9/ascoltami/index.html
571d058c9838
4.3 KiB
text/html
vidref refactor, start gui layout
Ignore-this: 68728a495bdaaa1316e70fdddfbfc037
Ignore-this: 68728a495bdaaa1316e70fdddfbfc037
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ascoltami</title>
<script type="text/javascript" src="static/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="static/jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>
<link rel="Stylesheet" type="text/css" href="static/jquery-ui-1.8.2.custom/css/smoothness/jquery-ui-1.8.2.custom.css"/>
<link rel="Stylesheet" type="text/css" href="static/style.css"/>
</head>
<body>
<div class="songs"/>
<div>Song: <span id="currentSong"/></div>
<div>Time: <span id="currentTime"/></div>
<div>Left: <span id="leftTime"/></div>
<div>Until autostop: <span id="leftAutoStopTime"/></div>
<div class="timeRow">
<div id="timeSlider"/>
</div>
<div class="commands">
<button id="cmd-stop" class="playMode">Stop<div class="key">C-s</div></button>
<button id="cmd-play" class="playMode">Play <div class="key">C-p</div></button>
<button id="cmd-intro">Skip intro <div class="key">C-i</div></button>
<button id="cmd-post">Skip to Post <div class="key">C-t</div></button>
<button id="cmd-go">Go <div class="key">space</div></button>
</div>
todo: go button actions, display next action
<a href="">reload</a>
<script type="text/javascript">
// <![CDATA[
$(function () {
var times = { // need to get these from server
intro: 4,
post: 4
};
var currentDuration = 0;
var currentHighlightedSong = "";
var lastPlaying;
function updateCurrent() {
$.getJSON("time", {}, function (data, status) {
$("#currentSong").text(data.song);
if (data.song != currentHighlightedSong) {
showCurrentSong(data.song);
}
$("#currentTime").text(data.t.toFixed(1));
$("#leftTime").text((data.duration - data.t).toFixed(1));
$("#leftAutoStopTime").text(
Math.max(0, data.duration - times.post - data.t).toFixed(1));
currentDuration = data.duration;
$("#timeSlider").slider({value: data.t,
max: data.duration});
if (data.playing != lastPlaying) {
$(".playMode").removeClass("active");
$(data.playing ? "#cmd-play" : "#cmd-stop").addClass("active");
lastPlaying = data.playing;
}
});
}
function showCurrentSong(uri) {
$(".songs div").each(function (i, row) {
row = $(row);
if (row.find("button").data("path") == uri) {
row.addClass("currentSong");
} else {
row.removeClass("currentSong");
}
});
currentHighlightedSong = uri;
}
$.getJSON("songs", {}, function (data, status) {
$.each(data.songs, function (i, song) {
var button = $("<button>");
button.text(song.label);
button.data(song);
button.click(function () {
$.post("song", button.data("path"),
function (data, textStatus, xhr) {
showCurrentSong(song.uri);
});
});
$(".songs").append($("<div>").append(button));
});
});
var tojs = JSON.stringify;
$(document).keypress(function (ev) {
if (1 || ev.ctrlKey) {
if (ev.which == 115) { $("#cmd-stop").click(); return false; }
if (ev.which == 112) { $("#cmd-play").click(); return false; }
if (ev.which == 105) { $("#cmd-intro").click(); return false; }
if (ev.which == 116) { $("#cmd-post").click(); return false; }
}
if (ev.which == 32) { $("#cmd-go").click(); return false; }
return true;
});
$("#cmd-stop").click(function () { $.post("time", tojs({pause: true})); });
$("#cmd-play").click(function () { $.post("time", tojs({resume: true})); });
$("#cmd-intro").click(function () {
$.post("time", tojs({t: times.intro, resume: true}))
});
$("#cmd-post").click(function () {
$.post("time", tojs({t: currentDuration - times.post, resume: true}))
});
$("#cmd-go").click(function () {
// todo
});
var pendingSlide = false;
$("#timeSlider").slider({
step: .01,
slide: function (event, ui) {
if (pendingSlide) {
return;
}
pendingSlide = true;
$.post("time", '{"t" : '+ui.value+'}',
function (data, status, xhr) {
pendingSlide = false;
});
},
});
function updateLoop() {
updateCurrent();
setTimeout(updateLoop, 200);
}
updateLoop();
});
// ]]>
</script>
</body>
</html>
|