diff bns_website/templates/music.html @ 65:4e6a30e35334 bands-experimental-ui

Merging default back into my experimental UI branch for more experimenting.
author Chris Ridgway <ckridgway@gmail.com>
date Wed, 16 Nov 2011 22:57:58 -0600
parents 057b0a016b7a
children 1d50a0db4f21
line wrap: on
line diff
--- a/bns_website/templates/music.html	Mon Nov 14 23:17:58 2011 -0600
+++ b/bns_website/templates/music.html	Wed Nov 16 22:57:58 2011 -0600
@@ -1,8 +1,184 @@
 {% extends 'base.html' %}
 {% load core_tags %}
+
 {% block title %}Listen{% endblock %}
+
+{% block custom_css %}
+<link type="text/css" href="{{ STATIC_URL }}jplayer_skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
+{% endblock %}
+
+{% block custom_js %}
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.jplayer.min.js"></script>
+    <script type="text/javascript" src="{{ STATIC_URL }}js/jplayer.playlist.min.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function(){
+
+            new jPlayerPlaylist({
+                jPlayer: "#jquery_jplayer_1",
+                cssSelectorAncestor: "#jp_container_1"},
+            [
+                {
+                    artist:"El Supernaut",
+                    title:"Wonderman from Initiƶ",
+                    mp3:"{{ STATIC_URL }}music/1.mp3"
+                },
+                {
+                    artist:"Los Twang! Marvels",
+                    title:"Sea of Glory",
+                    mp3:"{{ STATIC_URL }}music/2.mp3"
+                },
+                {
+                    artist:"El Ray",
+                    title:"Cherry Cheeks",
+                    mp3:"{{ STATIC_URL }}music/3.mp3"
+                },
+                {
+                    artist:"The Coffin Daggers",
+                    title:"Borgo Pass",
+                    mp3:"{{ STATIC_URL }}music/4.mp3"
+                },
+                {
+                    artist:"Aqualads",
+                    title:"Washout",
+                    mp3:"{{ STATIC_URL }}music/5.mp3"
+                },
+                {
+                    artist:"The TomorrowMen",
+                    title:"Momentium",
+                    mp3:"{{ STATIC_URL }}music/6.mp3"
+                },
+                {
+                    artist:"The Phantom Four",
+                    title:"El Palmero",
+                    mp3:"{{ STATIC_URL }}music/7.mp3"
+                },
+                {
+                    artist:"Atomic Mosquitos",
+                    title:"Mosquito Royale",
+                    mp3:"{{ STATIC_URL }}music/8.mp3"
+                },
+                {
+                    artist:"Los Kahunas",
+                    title:"7 Mares",
+                    mp3:"{{ STATIC_URL }}music/9.mp3"
+                },
+                {
+                    artist:"The Bambi Molesters",
+                    title:"As the Dark Wave Swells",
+                    mp3:"{{ STATIC_URL }}music/10.mp3"
+                },
+                {
+                    artist:"The Barbwires",
+                    title:"La Caja del Muerto",
+                    mp3:"{{ STATIC_URL }}music/11.mp3"
+                },
+                {
+                    artist:"Frankie & the Pool Boys:",
+                    title:"Ewa on the Beach",
+                    mp3:"{{ STATIC_URL }}music/12.mp3"
+                },
+                {
+                    artist:"The Thunderchiefs",
+                    title:"Estratosfera",
+                    mp3:"{{ STATIC_URL }}music/13.mp3"
+                },
+                {
+                    artist:"The Secret Samurai",
+                    title:"The Khazar",
+                    mp3:"{{ STATIC_URL }}music/14.mp3"
+                },
+                {
+                    artist:"The Madeira:",
+                    title:"Witch Doctor",
+                    mp3:"{{ STATIC_URL }}music/15.mp3"
+                },
+                {
+                    artist:"The Eliminators:",
+                    title:"Walking Tall",
+                    mp3:"{{ STATIC_URL }}music/16.mp3"
+                },
+                {
+                    artist:"Surfer Joe",
+                    title:"North Swell",
+                    mp3:"{{ STATIC_URL }}music/17.mp3"
+                },
+                {
+                    artist:"The Deadbeats",
+                    title:"Karabasan",
+                    mp3:"{{ STATIC_URL }}music/18.mp3"
+                },
+                {
+                    artist:"Daikaiju",
+                    title:"Laser Runner",
+                    mp3:"{{ STATIC_URL }}music/19.mp3"
+                },
+                {
+                    artist:"The Anacondas",
+                    title:"Floating Home",
+                    mp3:"{{ STATIC_URL }}music/20.mp3"
+                }
+            ],
+            {
+                playlistOptions: {
+                    enableRemoveControls: true,
+                    autoPlay: false
+                },
+                swfPath: "{{ STATIC_URL }}js",
+                solution:"html, flash",
+                oggSupport: false,
+                supplied: "mp3"
+            });
+        });
+    </script>
+{% endblock %}
+
 {% block content %}
 {% navbar 'music' %}
 <h1>Listen</h1>
-<p><strong>TODO</strong>: put some kind of music player here. Possibly embed a ReverbNation player, or use jPlayer.</p>
+<div id="jquery_jplayer_1" class="jp-jplayer"></div>
+
+<div id="jp_container_1" class="jp-audio">
+    <div class="jp-type-playlist">
+        <div class="jp-gui jp-interface">
+            <ul class="jp-controls">
+                <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
+                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
+                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
+                <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
+                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
+                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
+                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
+                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
+            </ul>
+            <div class="jp-progress">
+                <div class="jp-seek-bar">
+                    <div class="jp-play-bar"></div>
+                </div>
+            </div>
+            <div class="jp-volume-bar">
+                <div class="jp-volume-bar-value"></div>
+            </div>
+            <div class="jp-time-holder">
+                <div class="jp-current-time"></div>
+                <div class="jp-duration"></div>
+            </div>
+            <ul class="jp-toggles">
+                <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
+                <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
+                <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
+                <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
+            </ul>
+        </div>
+        <div class="jp-playlist">
+            <ul>
+                <li></li>
+            </ul>
+        </div>
+        <div class="jp-no-solution">
+            <span>Update Required</span>
+            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
+        </div>
+    </div>
+</div>
 {% endblock %}