openMixtape/index.html at master · ArnaudLigny/openMixtape · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!--
/**
 * openMixtape
 * https://github.com/ArnaudLigny/openMixtape
 * Copyright 2014 Arnaud Ligny
 * http://opensource.org/licenses/MIT
 */
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>openMixtape</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width = 640">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/openmixtape.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="banner">
        <h1>My mixtape</h1>
        <h2>Let the music play!</h2>
      </div>
      <ol class="playlist" id="playlist">
      <script id="songs-template" type="text/template">
        {{#songs}}
        <li class="song">
          <div class="name">
            <a href="{{file}}" data-src="{{file}}"><span class="artist">{{artist}}</span> - <span class="title">{{title}}</span></a>
          </div>
          <div class="info">
            <strong class="duration"></strong><span class="loaded"></span>
          </div>
          <div class="clock"></div>
        </li>
        {{/songs}}
      </script>
      </ol>
      <div class="footer">
        Powered by <a href="https://github.com/ArnaudLigny/openMixtape">openMixtape</a>
      </div>
    </div>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/hogan-3.0.2.min.js"></script>
    <script type="text/javascript" src="js/audio5.min.js"></script>
    <script>
      $(function() {
        $.when(
          console.log('load settings'),
          $.getJSON('settings.json', function(data) {
            if (data.title != '') {
              $('.banner h1').html(data.title);
            }
            if (data.baseline != '') {
              $('.banner h2').html(data.baseline);
            }
            if (data.background != '') {
              $('div.banner').css('background', data.background);
            }
          })
          .error(function() { alert("error in settings file"); }),
          console.log('load playlist'),
          $.getJSON('playlist.json', function(data) {
            console.log('build template');
            var template = Hogan.compile($('#songs-template').html());
            var output = template.render(data);
            $('#playlist').html(output);
          })
          .error(function() { alert("error in playlist file"); })
        ).done(function(){
          // when template (full DOM) is loaded, load openmixtape script
          $.getScript('js/openmixtape.js');
        });
      });
    </script>
  </body>
</html>