tuned-city
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository
path_detail.ejs
text/html

Download raw (4.3 KB)

<!DOCTYPE HTML>

<html>
<head>
    <meta charset="utf-8"/>
    <title>Tuned city</title>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='/stylesheets/reset.css' />
    <link rel='stylesheet' href='/stylesheets/path.css' />
</head>

<body>
<div id="logo">
    Tuned City Archive<br /><a class="previous" href="/path/">liste</a>
</div>

    <section id="path">
        <header>
            <h1><%= path.title %></h1>
        </header>

        <nav id="main-controls">
            <div class="slider"><a class="handle" style="left: 10%"></a></div>
            <span class="btn-play">▸ walk through</span>
            <span class="btn-previous">prev</span>
            <span class="btn-next">next</span>
            <span class="waypoint"><%= path.trackpoints.length %></span>
        </nav>

        <% for(var i = 0; i < (path.trackpoints.length - 1); i++) { %>
        
        <% var current = path.trackpoints[i]; %>
        <% var next = path.trackpoints[i + 1]; %>
        <% var media = current.end.media; %>
        
        <section class="annotation">
            <%= current.annotation %>
        </section>
        
        <section class="media">
        
            <div class="player"
                data-media="<%= media.url %>"
                data-type="<%= media.type %>"
                data-start="<%= current.end.cursor %>"
                data-stop="<%= next.start.cursor %>" > </div>
            
            <aside class="connexion">
                <ul>
                    <li>The Tuning Scores</li>
                </ul>
            </aside>
            
        </section>

        <% } %>
    </section>
    <footer></footer>


    <script src="/js/lib/jquery.js"></script>
    <script src="/javascripts/jquery-ui/js/jquery-ui-1.10.2.custom.js"></script>
    <script src="/javascripts/jquery.jplayer.min.js"></script>
    <script>
    $(document).ready(function(){
        
        var getData = function(attr){
            return this.attr('data-'+attr);
        };
        
        $.fn.getData = getData;
        
        var controller = $('#main-controls');
        
        var players = $('.player');
        players.each(function(idx, el){
            var that = $(this);
            var media = {};
            var mt = that.getData('type').split('/').pop();
            var start = that.getData('start');
            var stop = that.getData('stop');
            media[mt] = that.getData('media');
            
            that.jPlayer({
                ready: function(){ 
                        $(this).jPlayer("setMedia", media); 
                    },
                    swfPath: "/javascripts/Jplayer.swf",
                    supplied: mt,
                    size: {
                        width: "600px",
                    }
            });
            
            var status = that.data('jPlayer').status;
            var player = function(){
                    that.jPlayer.apply(that, arguments);
                };
            
            var parent = that.parent();
            var control_play = $('<div />')
                .addClass('control play')
                .text('play');
            var control_pause = $('<div />')
                .addClass('control pause')
                .text('pause');
            
            
            control_play.on('click', function(evt){
                player('play', Math.max(start, status.currentTime));
            });
            
            control_pause.on('click', function(evt){
                player('pause');
            });
            
            that.on($.jPlayer.event.play, function(){
                control_pause.show();
                control_play.hide();
            });
            
            that.on($.jPlayer.event.pause, function(){
                control_pause.hide();
                control_play.show();
            });
            
            that.on($.jPlayer.event.timeupdate, function(evt){
                if(evt.jPlayer.status.currentTime > stop)
                {
                    player('stop');
                    controller.trigger('play', [idx + 1]);
                }
            });
            
            parent.append(control_play);
            parent.append(control_pause);
            control_pause.hide();
            
        });
        
    });
    </script>
</body>
</html>