Skip to content

Commit

Permalink
Update Javascript: Handle media status in web UI (Playing, paused, st…
Browse files Browse the repository at this point in the history 
…opped) for both audio and video
  • Loading branch information
@quarantin
quarantin committed Oct 8, 2018
1 parent b42c685 commit c9d7394
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 32 deletions.
72 changes: 56 additions & 16 deletions siteconfig/static/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,40 @@ function get_media_url(media, action)
}

/*
* Initialize media buttons for the supplied media
* Disable media buttons for the supplied media
*/
function init_media_buttons(media)
function disable_media_buttons(media)
{
$('button#' + media + '-play').removeClass('d-none');
$('button#' + media + '-pause').addClass('d-none');
$('button#' + media + '-rewind').addClass('button-disabled');
$('button#' + media + '-stop').addClass('button-disabled');
$('button#' + media + '-rewind').addClass('button-disabled');
$('button#' + media + '-fast-forward').addClass('button-disabled');
$('button#' + media + '-volume-down').addClass('button-disabled');
$('button#' + media + '-volume-up').addClass('button-disabled');
}

/*
* Enable media buttons for the supplied media
*/
function enable_media_buttons(media, media_status='stopped')
{
if (media_status == 'paused') {
$('button#' + media + '-play').removeClass('d-none');
$('button#' + media + '-pause').addClass('d-none');
}
else {
$('button#' + media + '-play').addClass('d-none');
$('button#' + media + '-pause').removeClass('d-none');
}

$('button#' + media + '-stop').removeClass('button-disabled');
$('button#' + media + '-rewind').removeClass('button-disabled');
$('button#' + media + '-fast-forward').removeClass('button-disabled');
$('button#' + media + '-volume-down').removeClass('button-disabled');
$('button#' + media + '-volume-up').removeClass('button-disabled');
}

/*
* Switch visibility of buttons according to state.
*/
Expand Down Expand Up @@ -99,6 +120,29 @@ function toggle_online_status(raspi)
$('input[name=selected-raspberry-pi-audio]:enabled:first').prop('checked', true);
}

/*
* Toggle media buttons according to selected media state
*/
function toggle_media_buttons(media_type, media_list)
{
selected_media = $('select#selected-' + media_type).val();
if (!selected_media || selected_media === undefined)
return;

for (media_index in media_list) {

media = media_list[media_index];
if (media.slug != selected_media)
continue;

if (media.status == 'stopped')
disable_media_buttons(media_type);

else
enable_media_buttons(media_type, media.status);
}
}

/**
* Toggle lifts according to their state
*/
Expand Down Expand Up @@ -129,6 +173,9 @@ function toggle_all_elements(game)
{
toggle_lifts(game);

toggle_media_buttons('video', game.videos);
toggle_media_buttons('audio', game.audios);

for (var raspi_index in game.raspberrypis) {

var raspi = game.raspberrypis[raspi_index];
Expand Down Expand Up @@ -319,8 +366,8 @@ function game_control_handler(action)
url: '/' + get_language() + '/' + this.value + '/' + action + '/',
success: function() {

init_media_buttons('video');
init_media_buttons('audio');
disable_media_buttons('video');
disable_media_buttons('audio');

refresh_page();

Expand All @@ -339,7 +386,7 @@ function game_control_handler(action)
function media_control_handler(media, action)
{
$('select#selected-' + media).change(function() {
init_media_buttons(media);
refresh_page();
});

$('button#' + media + '-' + action).click(function() {
Expand All @@ -348,23 +395,16 @@ function media_control_handler(media, action)
if (disabled)
return;

if (action == 'play') {
if (action == 'play')
enable_media_buttons(media);

$('button#' + media + '-rewind').removeClass('button-disabled');
$('button#' + media + '-play').addClass('d-none');
$('button#' + media + '-pause').removeClass('d-none');
$('button#' + media + '-stop').removeClass('button-disabled');
$('button#' + media + '-fast-forward').removeClass('button-disabled');
$('button#' + media + '-volume-down').removeClass('button-disabled');
$('button#' + media + '-volume-up').removeClass('button-disabled');
}
else if (action == 'pause' || action == 'stop') {

$('button#' + media + '-play').removeClass('d-none');
$('button#' + media + '-pause').addClass('d-none');

if (action == 'stop')
init_media_buttons(media);
disable_media_buttons(media);
}

var media_url = get_media_url(media, action);
Expand Down
72 changes: 56 additions & 16 deletions static/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,40 @@ function get_media_url(media, action)
}

/*
* Initialize media buttons for the supplied media
* Disable media buttons for the supplied media
*/
function init_media_buttons(media)
function disable_media_buttons(media)
{
$('button#' + media + '-play').removeClass('d-none');
$('button#' + media + '-pause').addClass('d-none');
$('button#' + media + '-rewind').addClass('button-disabled');
$('button#' + media + '-stop').addClass('button-disabled');
$('button#' + media + '-rewind').addClass('button-disabled');
$('button#' + media + '-fast-forward').addClass('button-disabled');
$('button#' + media + '-volume-down').addClass('button-disabled');
$('button#' + media + '-volume-up').addClass('button-disabled');
}

/*
* Enable media buttons for the supplied media
*/
function enable_media_buttons(media, media_status='stopped')
{
if (media_status == 'paused') {
$('button#' + media + '-play').removeClass('d-none');
$('button#' + media + '-pause').addClass('d-none');
}
else {
$('button#' + media + '-play').addClass('d-none');
$('button#' + media + '-pause').removeClass('d-none');
}

$('button#' + media + '-stop').removeClass('button-disabled');
$('button#' + media + '-rewind').removeClass('button-disabled');
$('button#' + media + '-fast-forward').removeClass('button-disabled');
$('button#' + media + '-volume-down').removeClass('button-disabled');
$('button#' + media + '-volume-up').removeClass('button-disabled');
}

/*
* Switch visibility of buttons according to state.
*/
Expand Down Expand Up @@ -99,6 +120,29 @@ function toggle_online_status(raspi)
$('input[name=selected-raspberry-pi-audio]:enabled:first').prop('checked', true);
}

/*
* Toggle media buttons according to selected media state
*/
function toggle_media_buttons(media_type, media_list)
{
selected_media = $('select#selected-' + media_type).val();
if (!selected_media || selected_media === undefined)
return;

for (media_index in media_list) {

media = media_list[media_index];
if (media.slug != selected_media)
continue;

if (media.status == 'stopped')
disable_media_buttons(media_type);

else
enable_media_buttons(media_type, media.status);
}
}

/**
* Toggle lifts according to their state
*/
Expand Down Expand Up @@ -129,6 +173,9 @@ function toggle_all_elements(game)
{
toggle_lifts(game);

toggle_media_buttons('video', game.videos);
toggle_media_buttons('audio', game.audios);

for (var raspi_index in game.raspberrypis) {

var raspi = game.raspberrypis[raspi_index];
Expand Down Expand Up @@ -319,8 +366,8 @@ function game_control_handler(action)
url: '/' + get_language() + '/' + this.value + '/' + action + '/',
success: function() {

init_media_buttons('video');
init_media_buttons('audio');
disable_media_buttons('video');
disable_media_buttons('audio');

refresh_page();

Expand All @@ -339,7 +386,7 @@ function game_control_handler(action)
function media_control_handler(media, action)
{
$('select#selected-' + media).change(function() {
init_media_buttons(media);
refresh_page();
});

$('button#' + media + '-' + action).click(function() {
Expand All @@ -348,23 +395,16 @@ function media_control_handler(media, action)
if (disabled)
return;

if (action == 'play') {
if (action == 'play')
enable_media_buttons(media);

$('button#' + media + '-rewind').removeClass('button-disabled');
$('button#' + media + '-play').addClass('d-none');
$('button#' + media + '-pause').removeClass('d-none');
$('button#' + media + '-stop').removeClass('button-disabled');
$('button#' + media + '-fast-forward').removeClass('button-disabled');
$('button#' + media + '-volume-down').removeClass('button-disabled');
$('button#' + media + '-volume-up').removeClass('button-disabled');
}
else if (action == 'pause' || action == 'stop') {

$('button#' + media + '-play').removeClass('d-none');
$('button#' + media + '-pause').addClass('d-none');

if (action == 'stop')
init_media_buttons(media);
disable_media_buttons(media);
}

var media_url = get_media_url(media, action);
Expand Down

0 comments on commit c9d7394

Please sign in to comment.