source: gs3-installations/mars/trunk/sites/mars/collect/amc-essentia/js/av_document.js@ 37029

var AMC_SONG_DURATION = 30;

var currentPosIsZero = true;
var currentPosRunup  = 0;


function AVEnsurePaused()
{
    if (!wavesurfer.backend.isPaused()) {   
    $('#ws-pause-icon').hide();
    $('#ws-play-icon' ).show();
    $('#ws-playpause-label').html("Play");
    }
    
    wavesurfer.pause();
}

function AVPlay()
{
    $('#ws-play-icon' ).hide();
    $('#ws-pause-icon').show();
    $('#ws-playpause-label').html("Pause");

    if (currentPosRunup>0) {
    var skip_amount = -1 * currentPosRunup;
    wavesurfer.skip(skip_amount);
    currentPosRunup = 0;    
    }
    
    wavesurfer.play();
    
}

function AVPlayPause()
{
    if (wavesurfer.backend.isPaused()) {
    AVPlay();
    }
    else {
    AVEnsurePaused();
    }
    
    //return wavesurfer.backend.isPaused() ? wavesurfer.play() : wavesurfer.pause();
}

function AVSeekTo(progressPos)
{
    wavesurfer.seekTo(progressPos);

    if (progressPos == 0) {
    recommendFromStart();
    }
}



/*                
    function playFromOffset(id,frameOffset) 
    {
      var msecOffset = 250 * frameOffset; 
      idElem = document.getElementById(id);
      pagePlayer.handleClick({target:idElem}); // fake a click 
      soundManager.stopAll();
      // soundManager.setPosition(id,5000); 
      soundManager.play(id,{position: msecOffset});
    }
    */
    

function displayClampedCurrentTimeAndAV()
{
    // Note, the Arousal and Valence feature window values used is:
    //   6 secs + 50% overlap
    // So the Weka computed AV values are spaced out:
    //   6s, 9s, 12s, ...
    
    // clamp to ensure >= 6.0 secs 

    var current_time = Math.max(6.0,wavesurfer.getCurrentTime());
    var current_time_1dp = current_time.toFixed(1);
    
    var arousal_val = parseFloat($('#arousal-val').text());
    var valence_val = parseFloat($('#valence-val').text());

    var arousal_val_str = (arousal_val>0) ? "+"+arousal_val : ""+arousal_val;
    var valence_val_str = (valence_val>0) ? "+"+valence_val : ""+valence_val;
    
    $('#makeRecommendationFrom-AV').html(`(@${current_time_1dp} secs: arousal = ${arousal_val_str}, valence = ${valence_val_str})`);

    return current_time;
}

function preSubmit(form) 
{
    // Note, the Arousal and Valence feature window values used is:
    //   6 secs + 50% overlap
    // So the Weka computed AV values are spaced out:
    //   6s, 9s, 12s, ...
    
    // clamp to ensure >= 6.0 secs 
    //var current_time = Math.max(6.0,wavesurfer.getCurrentTime());
    //var current_time_1dp = current_time.toFixed(1);

    var clamped_current_time = displayClampedCurrentTimeAndAV();
    
    AVEnsurePaused();
    
    weka_segment = Math.round(clamped_current_time/3) * 3;
    form.elements["s1.offset"].value = weka_segment;
    
    var arousal_val = parseFloat($('#arousal-val').text());
    var valence_val = parseFloat($('#valence-val').text());

    //$('#makeRecommendationFrom-AV').html(`(@${current_time_1dp} secs: arousal=${arousal_val}, valence=${valence_val})`);

    return submitAVRecommendation(form, arousal_val,valence_val, clamped_current_time);
}

function AVPlotRecommendations()
{
    var $av_recommendations = $('.AVRecommendation');

    var min_arousal_val = +1.0;
    var max_arousal_val = -1.0;

    var min_valence_val = +1.0;
    var max_valence_val = -1.0;

    $av_recommendations.each(function(index_unused) {
    var arousal_val = $(this).data("arousalval");
    var valence_val = $(this).data("valenceval");

    if (arousal_val < min_arousal_val) {
        min_arousal_val = arousal_val;
    }
    if (arousal_val > max_arousal_val) {
        max_arousal_val = arousal_val;
    }

    
    if (valence_val < min_valence_val) {
        min_valence_val = valence_val;
    }
    if (valence_val > max_valence_val) {
        max_valence_val = valence_val;
    }

    });

    console.log(`AVRecommendations Arousal limits: ${min_arousal_val} <-> ${max_arousal_val}`);
    console.log(`AVRecommendations Valence limits: ${min_valence_val} <-> ${max_valence_val}`);

    var av_cluster_x_org = (min_arousal_val + max_arousal_val)/2.0;
    var av_cluster_y_org = (min_valence_val + max_valence_val)/2.0;

    var av_cluster_x_delta = Math.abs(min_arousal_val - max_arousal_val)/2.0;
    var av_cluster_y_delta = Math.abs(min_valence_val - max_valence_val)/2.0;

    //var av_cluster_rad = Math.max(Math.max(av_cluster_x_delta,av_cluster_y_delta),3.0);

    var av_cluster_rad   = Math.max(av_cluster_x_delta,av_cluster_y_delta);
    var disp_cluster_coord = av_to_display_coord(av_cluster_rad,av_cluster_rad);
    var disp_cluster_rad = disp_cluster_coord.x - av_chart_disp_x_mid; // **** **** ????
    var disp_cluster_rad_maxed = Math.max(disp_cluster_rad,3.0);

    var disp_coord = av_to_display_coord(av_cluster_x_org,av_cluster_y_org);
    var disp_x = disp_coord.x;
    var disp_y = disp_coord.y;

    var av_chart_canvas = document.getElementById('av-chart-canvas');
    
    var ctx = av_chart_canvas.getContext("2d");
    ctx.clearRect(0, 0, av_chart_canvas.width, av_chart_canvas.height);
    ctx.beginPath();
    ctx.arc(disp_x/2, disp_y/2, disp_cluster_rad_maxed/2, 0, 2*Math.PI, false);
    ctx.fillStyle = 'rgba(50,50,128,0.5)';
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'rgba(0,0,160,0.5)';
    ctx.stroke();
    
}

function ajaxUpdateDocumentDisplayed()
{
    var $resultsTable = $('#resultsTable');

    var $resultsTable_trs = $resultsTable.find('tr');

    if ($resultsTable_trs.length>0) {
    var $resultsTable_tr1 = $resultsTable_trs.first();
    var div_doc_id = $resultsTable_tr1.attr('id')
    var doc_id = div_doc_id.substring(3);
    
    console.log("first AV recommendation doc id = " + doc_id);

    var $av_recommendation = $resultsTable_tr1.find('.AVRecommendation').first();

    var new_doc_url = $av_recommendation.attr('href');
    var new_doc_url_parts = new_doc_url.split("#");

    var new_doc_metadata_url     = new_doc_url_parts[0] + "&excerptid=metadata-documenttext#" + new_doc_url_parts[1];
    var new_doc_playervisual_url = new_doc_url_parts[0] + "&excerptid=playervisual-documenttext#" + new_doc_url_parts[1];

    //console.log("new doc metadata url = " + new_doc_metadata_url);
    //console.log("new doc playervisual url = " + new_doc_playervisual_url);


    // current URL ends with  collect/amc-essentia/document/ds_51017_15513?p.frameOffset=...
    // Need to remove old '/document/ds_...' and replace with new doc
    
    const current_doc_url_str = window.location.href;
    
    console.log(current_doc_url_str);
    var push_doc_url_str = current_doc_url_str.replace(/document\/\w+\?/,"document/"+doc_id+"?");
    console.log("new doc url str = " + push_doc_url_str);
    const push_doc_url = new URL(push_doc_url_str);
    
    var frameOffset = $av_recommendation.data("frameoffset");       
    push_doc_url.searchParams.set('p.frameOffset', frameOffset);
    push_doc_url.searchParams.set('d', doc_id);     
    window.history.pushState({}, '', push_doc_url);
    //window.history.replaceState({}, '', push_doc_url);


    
    $('#metadata-documenttext').css("cursor","wait");
    $('#playervisual-documenttext').css("cursor","wait");

    $.ajax({
        method: "GET",
        url: new_doc_metadata_url,
    })
        .always(function() {
        $('#metadata-documenttext').css("cursor","revert");
        })

        .fail(function(jqXHR,textStatus) {
        console.error( "metadata-documenttext ajax request failed: " + textStatus);
        })
        .done(function(html_result) {
        $('#metadata-documenttext').replaceWith(html_result);
        });

    
    $.ajax({
        method: "GET",
        url: new_doc_playervisual_url,
    })
        .always(function() {
        $('#playervisual-documenttext').css("cursor","revert");
        })
        .fail(function(jqXHR,textStatus) {
        console.error( "playervisual-documenttext equest failed: " + textStatus);
        })
        .done(function(html_result) {
        
        $('#playervisual-documenttext').replaceWith(html_result);

        gs.cgiParams['p_frameOffset'] = frameOffset;
        gs.documentMetadata["assocfilepath"] = $('#ajax-loaded-assocfilepath').text();
        
        initPlayerVisual();
        initWavesurferPlayer();

        wavesurfer.seekTo(frameOffset/AMC_SONG_DURATION);
        
        postInitWavesurfer(wavesurfer);

        
        });

    
    $resultsTable_tr1.slideUp();
    
    //var arousal_val = $av_recommendation.data("arousalval");
    //var valence_val = $av_recommendation.data("valenceval");

    
    }

}

function submitAVRecommendation(form, arousal_val,valence_val, current_time)
{
    form.elements["s1.arousal"].value = arousal_val;
    form.elements["s1.valence"].value = valence_val;
        
    var args = {
    "a":  "q",
    "rt": "rd",
    "s": "AudioQuery",
    "sa": "",
    "c":  gs.cgiParams["c"],
    "q":  gs.cgiParams["d"],
    "s1.query":       gs.cgiParams["d"],
    "s1.maxDocs":     form.elements["s1.maxDocs"].value,
    "s1.hitsPerPage": form.elements["s1.hitsPerPage"].value,
    "s1.offset":      form.elements["s1.offset"].value,
    "s1.length":      form.elements["s1.length"].value,
    "s1.arousal": arousal_val,
    "s1.valence": valence_val,
    "startPage": 1,
    "excerptid": "resultsArea"
    };

    
    var url = "https://mars.so-we-must-think.space/greenstone3/library";

    $('#recommendationArea').css("cursor","wait");
    $('#resultsAreaDiv').slideDown();
    $('#resultsAreaDiv').html("Retrieving recommendation ...");
    
    $.ajax({
    method: "GET",
    url: url,
    data: args
    })
    .always(function() {
        $('#recommendationArea').css("cursor","revert");
    })
    .fail(function(jqXHR,textStatus) {
        console.error( "Request failed: " + textStatus);
    })
    .done(function(html_result) {
        $('#resultsAreaDiv').html("<div>Recommendations:</div>"+html_result);
        $('#av-chart-div').show();

        AVPlotRecommendations();
        
        if (current_time) {
        const updated_url = new URL(window.location);
        updated_url.searchParams.set('p.frameOffset', current_time);
        //window.history.pushState({}, '', url + "?p.frameOffset=" + current_time);
        //window.history.pushState({}, '', updated_url);
        window.history.replaceState({}, '', updated_url);
        }
        else {
        // The result of a click on the AV-chart
        ajaxUpdateDocumentDisplayed();
        }
    });
    
    // stop submit
    return false;

    // force GET method request to go ahead
    //return true;
}



function recommendFromStart()
{    
    currentPosIsZero = true;
    $('#makeRecommendationFrom').html("Based on the start of this musical/sound art work: ");
}


function recommendFromPos()
{
    currentPosIsZero = false;
    $('#makeRecommendationFrom').html("Based on the current timeline position of this musical/sound art work: ");
}



function postInitWavesurfer(wavesurfer)
{
    console.log("postInitWavesurfer called with wavesufer = " + wavesurfer);
    
    wavesurfer.load(gs.variables.mp3url);
    
    wavesurfer.on('audioprocess', function () {
    var current_time = wavesurfer.getCurrentTime();
    var current_time_rounded = Math.round(current_time * 10) / 10
    var current_time_rounded = current_time.toFixed(1);
    $('#audioCurrentPos').html(current_time_rounded + " secs");
    
    if (current_time == 0) {
        recommendFromStart();
    }
    else if ((currentPosIsZero) && (current_time > 0)) {
        recommendFromPos();
    }
    displayClampedCurrentTimeAndAV();
    });

    wavesurfer.on('ready', function () {

    console.log("**** wavesurfer ready()");
    
    if ('p_frameOffset' in gs.cgiParams) {
        var frameOffset = gs.cgiParams['p_frameOffset'];
        //console.log("**** starting play @ " + frameOffset);
        //wavesurfer.play(frameOffset);
        //console.log("**** setting play seek @ " + frameOffset);
        wavesurfer.seekTo(frameOffset/AMC_SONG_DURATION);
        recommendFromPos();
        displayClampedCurrentTimeAndAV();
        
        console.log("av_document.js: **** Keeping 'currentPosRunup' at 0 for now!");
        /*if (frameOffset>1.0) {
        currentPosRunup = 1.0; // 1 second
        }*/
    }
    else {
        recommendFromStart();
        displayClampedCurrentTimeAndAV();
    }
    });

}

/*

y-top: 146

Centre: 412,443

y-bot:735

x-left: 120

x-right 710


Full image:
  911 x 825 pxs



  AV centre: 412,443
  
delta x/y: from centre: 292 <-> 298
-1 <-> 0 <-> +1
   295   295


SVG:

  241 x 248 
    scaled 
    0.26458

*/

var av_chart_orig_r = 295;

var av_chart_orig_x_org = 412;
var av_chart_orig_y_org = 443;

var av_chart_orig_x_dim = 911;
var av_chart_orig_y_dim = 825;

var av_chart_disp_x_dim = 300; // ****
var av_chart_disp_x_mid = av_chart_disp_x_dim/2.0;

var av_chart_scale = av_chart_orig_x_dim / av_chart_disp_x_dim;

function display_to_av_coord(disp_x,disp_y)
{
    var scaled_disp_x = disp_x * av_chart_scale;
    var scaled_disp_y = disp_y * av_chart_scale;

    var orig_av_x = scaled_disp_x - av_chart_orig_x_org; 
    var orig_av_y = -1 * (scaled_disp_y - av_chart_orig_y_org); // flip y axis

    var av_x = orig_av_x / av_chart_orig_r;
    var av_y = orig_av_y / av_chart_orig_r;
    
    var capped_av_x = Math.max(Math.min(av_x,1.0),-1.0);
    var capped_av_y = Math.max(Math.min(av_y,1.0),-1.0);

    return { "x": capped_av_x, "y": capped_av_y };
}


function av_to_display_coord(av_x,av_y)
{
    //var capped_av_x = Math.max(Math.min(av_x,1.0),-1.0);
    //var capped_av_y = Math.max(Math.min(av_y,1.0),-1.0);

    // transform the coord system from av [-1,1] to be the original SVG AV chart size
    var orig_av_x = av_x * av_chart_orig_r;
    var orig_av_y = av_y * av_chart_orig_r;

    // tranform the coord system to be expressed from the top-left as the origin
    var scaled_disp_x = orig_av_x + av_chart_orig_x_org;
    var scaled_disp_y = (-1 * orig_av_y) + av_chart_orig_y_org;
    
    var disp_x = scaled_disp_x / av_chart_scale;
    var disp_y = scaled_disp_y / av_chart_scale;
    
    return { "x": disp_x, "y": disp_y };
}


function av_chart_click(elem,e)
{
    var offset = $(elem).offset();

    var elem_x_org = offset.left;
    var elem_y_org = offset.top;

    var disp_x = e.pageX - elem_x_org;
    var disp_y = e.pageY - elem_y_org;

    //console.log(`(disp_x,disp_y) = (${disp_x},${disp_y})`);
    var av_coord = display_to_av_coord(disp_x,disp_y);
    var capped_av_x = av_coord.x;
    var capped_av_y = av_coord.y;
    
    console.log(`av x,y: (${capped_av_x},${capped_av_y})`);

    //var disp_coord = av_to_display_coord(capped_av_x,capped_av_y);
    //var reconverted_disp_x = disp_coord.x;
    //var reconverted_disp_y = disp_coord.y;
    
    //console.log(`reconverted (disp_x,disp_y) = (${reconverted_disp_x},${reconverted_disp_y})`);
    
    var form = $('#av-query-form')[0];
    
    submitAVRecommendation(form, capped_av_x, capped_av_y, null);
    
}

function initPlayerVisual() {

    const doc_url = new URL(window.location);
    var renderWave = doc_url.searchParams.get('renderWave');

    if (renderWave && (renderWave == 1)) {
    // showing the waveform => offer link to spectrogram
    const sts_url = new URL(window.location);
    sts_url.searchParams.set('renderWave', 0);
    $('#switch-to-spectrogram').attr("href",sts_url);
    $('#switch-to-waveform').hide();

    $('#av-timelinebar-help').hide();
    }
    else {
    // show the spectrogram => offer link to waveform
    
    const stw_url = new URL(window.location);
    stw_url.searchParams.set('renderWave', 1);
    $('#switch-to-waveform').attr("href",stw_url);
    $('#switch-to-spectrogram').hide();

    $('#av-timelinebar-help').show();   
    }
}

function showAVChart()
{
    $('#av-chart-outerdiv').slideDown();
    $('#show-av-chart').hide();
    $('#hide-av-chart').show();

    return false;
}

function hideAVChart()
{
    $('#av-chart-outerdiv').slideUp();
    $('#hide-av-chart').hide();
    $('#show-av-chart').show();

    return false;
}

$(document).ready(function() {

    initPlayerVisual();
    
    $('#av-chart-img').on("click",function(e) { av_chart_click(this,e) } );
});