search.html

<!--#set var="title" value="Playdar - search demo" --><!--#include virtual="../inc/header.html" -->

<h2>Search Demo</h2>
<!--#include virtual="demolist.html" -->

<div class="box" id="playdar_stat">Checking for local Playdar service...</div>

<form action="" id="searchForm">
    <fieldset>
        <legend>Track Resolver - Specify artist and track name to (hopefully) find an exact match</legend>
        
        artist:
        <input type="text" id="artist" name="artist" value="" />
        
        <!-- album: -->
        <input type="hidden" id="album"  name="album" value="" />
        
        track:
        <input type="text" id="track"  name="track" value="" />
        
        <input type="submit" value="Resolve!" id="resolveSubmit" disabled="disabled" />
        
        <img src="/static/spinner.gif" id="resolveProgress" style="display: none; vertical-align: middle; margin-left: 5px;" />
    </fieldset>
</form>

<div id="resultsdiv" style="display: none;">
    <span style="float:right; font-size:9px;">
        <a href="#" id="recheckResults">re-check</a>
        <a href="#" id="clearResults">clear</a>
    </span>
    <h3 style="margin: 10px 0 5px 0;">Search Results <span style="background-color:lightyellow; padding: 3px;" id="numresultsspan">0</span></h3>
    <table style="width:100%; font-size:85%;" id="resultstbl"><tr style="font-weight: bold;">
        <td>Score</td> 
        <td>Pref</td> 
        <td style="width:25px;"> </td>
        <td>Artist</td>
        <td>Album</td>
        <td>Track</td>
        <td>Source</td>
        <td>Link</td>
    </tr></table>
    <br/>
</div>

<script type="text/javascript" src="/static/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript">

var DEMO = {
    set_play_text: function () {
        $('play' + this.sID).update("Play");
    },
    set_pause_text: function () {
        $('play' + this.sID).update("Pause");
    },
    setup_stream: function (result) {
        var sound = Playdar.player.register_stream(result, {
            onplay: DEMO.set_pause_text,
            onpause: DEMO.set_play_text,
            onresume: DEMO.set_pause_text,
            onstop: function () {
                DEMO.set_play_text.apply(this);
            },
            onfinish: function () {
                Playdar.player.stop_current();
                DEMO.set_play_text().apply(this);
            }
        });
        return sound;
    },
    
    build_result_row: function (result) {
        var tr = document.createElement('tr');
        tr.id = result.sid;
        
        var td;
        // Score
        td = new Element('td').update(result.score.toFixed(3));
        tr.insert(td);
        // Preference
        td = new Element('td').update(result.preference);
        tr.insert(td);

        // Play
        td = new Element('td').setStyle({width: "50px"}).update(
            '<a href="#' + result.sid + '" id="play' + result.sid + '" class="play">'
             + "Play"
             + '<\/a>'
        );
        tr.insert(td);
        // Artist
        td = new Element('td').update(result.artist);
        tr.insert(td);
        // Album
        td = new Element('td').update(result.album);
        tr.insert(td);
        // Track
        td = new Element('td').update(result.track);
        tr.insert(td);
        // Source
        td = new Element('td').update(result.source);
        tr.insert(td);
        // Info
        td = new Element('td').update(
            '<a href="' + Playdar.client.get_stream_url(result.sid) + '">dl<\/a> '
            + '<small>('
            + Playdar.Util.mmss(result.duration) + ', '
            + result.mimetype + ', '
            + (result.size/1000000).toFixed(1) + 'MB, '
            + result.bitrate + 'Kbps)<\/small>'
        );
        tr.insert(td);
        return tr;
    },
    
    process_result: function (result) {
        var sound = DEMO.setup_stream(result);
        
        if ($(result.sid)) {
            return;
        }
        var rows = $$('#resultstbl tr');
        // First result
        if (rows.length == 1) {
            $('resultstbl').down('tbody').insert(DEMO.build_result_row(result));
            return;
        }
        // walk rows and insert in score-order
        for (k = 1; k < rows.length; k++) {
            var row = rows[k];
            var rowscore = parseFloat(row.down('td').innerHTML);
            if (rowscore < result.score) {
                row.insert({before: DEMO.build_result_row(result)});
                break;
            }
        }
        // put at the end, lowest so far:
        if (k == rows.length) {
            $('resultstbl').down('tbody').insert(DEMO.build_result_row(result));
        }
    },
    
    // Insert results into the table in order of score:
    results_handler: function (response, final_answer) {
        var qsolved = '';
        if (final_answer) {
            qsolved = response.query.solved ? "solved" : "unsolved";
            qsolved = " (" + qsolved + ")";
            $('resolveProgress').hide();
        } else {
            $('resolveProgress').show();
        }
        $('numresultsspan').update("Found: " + response.results.length + qsolved);
        response.results.each(DEMO.process_result);
    },
    
    clear_results: function () {
        Playdar.player.stop_current();
        $('numresultsspan').innerHTML = '0';
        // clear table of all but first(header) row
        var trs = $$('#resultstbl tr');
        var len = trs.length;
        for (var i = len-1; i > 0; i--) {
            $$('#resultstbl tr')[i].remove();
        }
    },
    
    resolve: function (art, alb, trk) {
        window.location.hash = Object.toQueryString({
            artist: art,
            album: alb,
            track: trk
        });
        
        DEMO.clear_results();
        Playdar.client.resolve(art, alb, trk);
    },
    
    clear_event_handlers: function () {
        $('resolveSubmit').disabled = true;
        $('resultsdiv').hide();
        $('resultstbl').stopObserving('click');
        $('recheckResults').stopObserving('click');
        $('clearResults').stopObserving('click');
        $('searchForm').stopObserving('submit');
    },
    setup_event_handlers: function () {
        $('resolveSubmit').disabled = false;
        $('resultsdiv').show();
        $('resultstbl').observe('click', function (e) {
            var target = e.element();
            if (target.match('a.play')) {
                e.stop();
                var sid = target.hash.substr(1);
                var sound = Playdar.player.play_stream(sid);
            }
        });
        $("recheckResults").observe('click', function (e) {
            e.stop();
            Playdar.client.get_last_results();
        });
        $("clearResults").observe('click', function (e) {
            e.stop();
            DEMO.clear_results();
        });
        $("searchForm").observe("submit", function (e) {
            e.stop();
            DEMO.resolve($('artist').value, $('album').value, $('track').value);
        });
    },
    
    // see if there's a query string in the # part of the url so that
    // we can permalink to a specific search
    parse_hash: function () {
        var hash = location.hash;
        if (hash == "" || hash == "#") {
            return;
        }
        var params = hash.substr(1).toQueryParams();
        if (params.artist && params.track) {
            $('artist').value = params.artist;
            $('track').value = params.track;
            $('album').value = params.album ? params.album : "";
            DEMO.resolve(params.artist, params.album, params.track);
        }
    }
};

// Setup Playdar and Sound Manager
Playdar.setup({
    receiverurl: "http://<!--#echo var="domain" -->/demos/playdarauth.html",
    website: "http://<!--#echo var="domain" -->/demos/",
    name: "Playdar Demos"
});
Playdar.client.register_listeners({
    onStat: function (detected) {
        var text;
        if (detected) {
            text = "<b style='color:green;'>Playdar ready<\/b>";
        } else {
            text = "<b style='color:red;'>Playdar unavailable<\/b><br\/>You need Playdar, the music content resolver, installed and running. See <a href=\"http:\/\/<!--#echo var="domain" -->\/\"><!--#echo var="domain" --><\/a>.";
        }
        $('playdar_stat').innerHTML = text;
    },
    onAuth: function () {
        DEMO.setup_event_handlers();
        DEMO.parse_hash();
    },
    onAuthClear: function () {
        DEMO.clear_event_handlers();
    },
    onResults: DEMO.results_handler
});

soundManager.url = '\/static\/soundmanager2_flash9.swf';
soundManager.flashVersion = 9;
soundManager.onload = function () {
    Playdar.setup_player(soundManager);
    Playdar.client.init();
};
</script>

</body>
</html>