Mercurial > code > home > repos > light9

view light9/ascoltami/index.html @ 1041:a4632a7b2e17

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
upgrade knockout and jquery, simplify the static/ dirs for all web services Ignore-this: 8637b7b61cc5d38e8cf15bb1afd7466c
author Drew Perttula <drewp@bigasterisk.com>
date Wed, 28 May 2014 05:54:23 +0000
parents 9b1df7c06ec2
children d5c87125225e
line wrap: on
line source

<?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" 
      xmlns:py="http://genshi.edgewall.org/">
  <head>
    <title>ascoltami on ${host}</title>
    <script type="text/javascript" src="static/jquery-2.1.1.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>
    <h1>ascoltami on ${host}</h1>
    <div class="songs"/>

    <div class="dimStalled">
      <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>Update freq: requested <span id="updateReq"/>, actual <span id="updateActual"/></div>
      <div>States: <span id="states"/></div>
      <div class="timeRow">
        <div id="timeSlider"/>
      </div>
    </div>
    <div class="commands">
      <button id="cmd-stop" class="playMode">Stop<div class="key">s</div></button>
      <button id="cmd-play" class="playMode">Play <div class="key">p</div></button>
      <button id="cmd-intro">Skip intro <div class="key">i</div></button>
      <button id="cmd-post">Skip to Post <div class="key">t</div></button>
      <button id="cmd-go">Go  <div class="key">space</div></button>

      <button id="cmd-out0">Output 0</button>
      <button id="cmd-out1">Output 1</button>
    </div>
    
    <p>Running on <span id="nav"/></p>
    todo: display next action
    <p><button onclick="window.open('/', '_blank', 'scrollbars=1,resizable=1,titlebar=0,location=0')">reopen this in a simpler window</button></p>
    <p><a href="">reload</a></p>

<script type="text/javascript">
// <![CDATA[
$(function () {

    $("#nav").text(navigator.userAgent);
    var updateFreq = (navigator.userAgent.indexOf("Linux") != -1) ? 10 : 2;
    $("#updateReq").text(updateFreq);

    var times = { // need to get these from server
	intro: 4,
	post: 4
    };

    var currentDuration = 0;
    var currentHighlightedSong = "";
    var lastPlaying;
    function updateCurrent(doneCallback) {
	$.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));
	    $("#states").text(JSON.stringify(data.state));
	    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;
	    }
	    doneCallback();
	});
    }
    function showCurrentSong(uri) {
	$(".songs div").each(function (i, row) {
	    row = $(row);
	    if (row.find("button").data("uri") == uri) {
		row.addClass("currentSong");
	    } else {
		row.removeClass("currentSong");
	    }
	});
	currentHighlightedSong = uri;
    }
    $.getJSON("songs", {}, function (data, status) {
	$.each(data.songs, function (i, song) {
	    var button = $("<button>");
            // link is just for dragging, not clicking
            var link = $("<a>");
            link.append($("<span>").addClass("num").text(song.label.slice(0,2)));
            link.append($("<span>").text(song.label.slice(2)));
            link.attr("href", song.uri);
            link.click(function () { button.click(); return false; }); 
            button.append(link);
	    button.data(song);
	    button.click(function () {
		$.post("song", button.data("uri"), 
		       function (data, textStatus, xhr) {
			   showCurrentSong(song.uri);
		       });
	    });
	    $(".songs").append($("<div>").append(button));
	});
    });

    var tojs = JSON.stringify;

    $(document).keypress(function (ev) {

	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 () {
	$.post("go");
    });
    $("#cmd-out0").click(function () { $.post("output", tojs({sink: "0"})); })
    $("#cmd-out1").click(function () { $.post("output", tojs({sink: "1"})); })

    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;
		   });
	},
    });
    
    var raf = window.requestAnimationFrame ||
	window.mozRequestAnimationFrame || 
	window.webkitRequestAnimationFrame;

    var recentUpdates = [];
    function onUpdate() {
        recentUpdates.push(+new Date());
        recentUpdates = recentUpdates.slice(Math.max(recentUpdates.length - 5, 0));
        refreshUpdateFreqs();
    }

    function refreshUpdateFreqs() {
        if (recentUpdates.length > 1) {
          if (+new Date() - recentUpdates[recentUpdates.length - 1] > 1000) {
            $("#updateActual").text("(stalled)");
            $(".dimStalled").addClass("stalled");
            return;
          }

          var avgMs = (recentUpdates[recentUpdates.length - 1] - recentUpdates[0]) / (recentUpdates.length - 1);
          $("#updateActual").text(Math.round(1000 / avgMs));
        }
    }
    setInterval(refreshUpdateFreqs, 2000);

    function updateLoop() {
	var whenDone = function () {
	    setTimeout(function () { 
		raf(updateLoop);
	    }, 1000 / updateFreq);
	};
        onUpdate();
	updateCurrent(whenDone);
    }
    updateLoop();

});
// ]]>
</script>


  </body>
</html>