Archived
99 lines
3.8 KiB
HTML
99 lines
3.8 KiB
HTML
{% load staticfiles %}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Current track</title>
|
|
<link rel="stylesheet" type="text/css" href="{% static 'screen.css' %}" />
|
|
<script type="text/javascript" src="{% static 'jquery-1.6.1.min.js' %}"></script>
|
|
<script type="text/javascript" src="{% static 'jquery.timers-1.2.js' %}"></script>
|
|
<script type="text/javascript" src="{% static 'falling-pieces.js' %}"></script>
|
|
<script type="text/javascript">
|
|
/* Update track and now playing */
|
|
var get_last_track = function() {
|
|
$( '#last_track' ).load('{% url 'last-track' %}');
|
|
};
|
|
var get_now_playing = function() {
|
|
$( '#now_playing' ).load('{% url 'now-playing' %}', function() {
|
|
if( is_tetris_song() ) {
|
|
play_tetris();
|
|
} else {
|
|
dont_play_tetris();
|
|
}
|
|
});
|
|
};
|
|
/* Initial update */
|
|
$( document ).ready( get_last_track );
|
|
$( document ).ready( get_now_playing );
|
|
/* Start timers updating a screen resource. */
|
|
$( document ).everyTime('10s', "last_track", get_last_track );
|
|
$( document ).everyTime('10s', "now_playing", get_now_playing );
|
|
|
|
/* Ajax spinner */
|
|
$( document )
|
|
.ajaxStart(function() {
|
|
$( '#spinner' ).show();
|
|
})
|
|
.ajaxStop( function() {
|
|
$( '#spinner' ).hide();
|
|
});
|
|
|
|
/* Loads the YouTube IFrame Player API code asynchronously. */
|
|
var tag = document.createElement('script');
|
|
tag.src = "https://www.youtube.com/player_api";
|
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
|
|
/* Creates an <iframe> (and YouTube player) after the API code downloads. */
|
|
var ytplayer;
|
|
function onYouTubePlayerAPIReady() {
|
|
/* Initial player */
|
|
new YT.Player('player', {
|
|
width: '1200',
|
|
height: '675',
|
|
videoId: 'dQw4w9WgXcQ', // Mr. Astley?
|
|
playerVars: {
|
|
controls: 0, // no controls
|
|
iv_load_policy: 3, // no annotations
|
|
start: 215 // offset into video (last 2 seconds)
|
|
},
|
|
/* Attach to these events. */
|
|
events: {
|
|
'onReady': onPlayerReady,
|
|
'onStateChange': onPlayerStateChange
|
|
}
|
|
});
|
|
}
|
|
|
|
/* The API will call this function when the video player is ready. */
|
|
function onPlayerReady(event) {
|
|
ytplayer = event.target;
|
|
event.target.playVideo();
|
|
event.target.mute();
|
|
event.target.setPlaybackQuality("hd720");
|
|
}
|
|
|
|
/* The API calls this function when the player's state changes. */
|
|
function onPlayerStateChange(event) {
|
|
if (event.data == YT.PlayerState.ENDED) {
|
|
/* Could do something on this state or others... */
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="spinner"><img src="{% static 'spinner.gif' %}"/></div>
|
|
<div id="container">
|
|
<div id="content">
|
|
<div id="player"></div>
|
|
<div id="now_playing"></div>
|
|
<div id="last_track"></div>
|
|
</div>
|
|
</div>
|
|
<div id="gameContainer">
|
|
<div id="brickContainer"></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|