Mercurial > public > bravenewsurf

annotate bns_website/templates/music.html @ 60:a0d3bc630ebd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
For issue #8, create a videos application to randomize videos in the playlist. This commit now adds a dependency to the Google Python GData library. The admin enters a playlist URL in the admin. Then the admin uses an admin action to synchronize the playlist with YouTube. This reads the playlist title and retrieves the video list from YouTube. The view function reads all the playlist objects to get the complete list of videos, then shuffles them up. The template generates Javascript to create a YouTube player with the shuffled list. A fixture is included for convenience and for the tests. I also committed a test tool I wrote to prove out this idea in case it is useful for future enhancements or experimentation.
author Brian Neal <bgneal@gmail.com>
date Sat, 19 Nov 2011 14:19:00 -0600
parents 057b0a016b7a
children 1d50a0db4f21
rev   line source
bgneal@9 1 {% extends 'base.html' %}
bgneal@9 2 {% load core_tags %}
bob@51 3
bgneal@9 4 {% block title %}Listen{% endblock %}
bob@51 5
bob@51 6 {% block custom_css %}
bob@51 7 <link type="text/css" href="{{ STATIC_URL }}jplayer_skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
bob@51 8 {% endblock %}
bob@51 9
bob@51 10 {% block custom_js %}
bob@51 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
bob@51 12 <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.jplayer.min.js"></script>
bob@51 13 <script type="text/javascript" src="{{ STATIC_URL }}js/jplayer.playlist.min.js"></script>
bob@51 14 <script type="text/javascript">
bob@51 15 $(document).ready(function(){
bob@51 16
bob@51 17 new jPlayerPlaylist({
bob@51 18 jPlayer: "#jquery_jplayer_1",
bob@51 19 cssSelectorAncestor: "#jp_container_1"},
bob@51 20 [
bob@51 21 {
bob@57 22 artist:"El Supernaut",
bob@57 23 title:"Wonderman from Initiö",
bob@51 24 mp3:"{{ STATIC_URL }}music/1.mp3"
bob@51 25 },
bob@51 26 {
bob@57 27 artist:"Los Twang! Marvels",
bob@57 28 title:"Sea of Glory",
bob@51 29 mp3:"{{ STATIC_URL }}music/2.mp3"
bob@57 30 },
bob@57 31 {
bob@57 32 artist:"El Ray",
bob@57 33 title:"Cherry Cheeks",
bob@57 34 mp3:"{{ STATIC_URL }}music/3.mp3"
bob@57 35 },
bob@57 36 {
bob@57 37 artist:"The Coffin Daggers",
bob@57 38 title:"Borgo Pass",
bob@57 39 mp3:"{{ STATIC_URL }}music/4.mp3"
bob@57 40 },
bob@57 41 {
bob@57 42 artist:"Aqualads",
bob@57 43 title:"Washout",
bob@57 44 mp3:"{{ STATIC_URL }}music/5.mp3"
bob@57 45 },
bob@57 46 {
bob@57 47 artist:"The TomorrowMen",
bob@57 48 title:"Momentium",
bob@57 49 mp3:"{{ STATIC_URL }}music/6.mp3"
bob@57 50 },
bob@57 51 {
bob@57 52 artist:"The Phantom Four",
bob@57 53 title:"El Palmero",
bob@57 54 mp3:"{{ STATIC_URL }}music/7.mp3"
bob@57 55 },
bob@57 56 {
bob@57 57 artist:"Atomic Mosquitos",
bob@57 58 title:"Mosquito Royale",
bob@57 59 mp3:"{{ STATIC_URL }}music/8.mp3"
bob@57 60 },
bob@57 61 {
bob@57 62 artist:"Los Kahunas",
bob@57 63 title:"7 Mares",
bob@57 64 mp3:"{{ STATIC_URL }}music/9.mp3"
bob@57 65 },
bob@57 66 {
bob@57 67 artist:"The Bambi Molesters",
bob@57 68 title:"As the Dark Wave Swells",
bob@57 69 mp3:"{{ STATIC_URL }}music/10.mp3"
bob@57 70 },
bob@57 71 {
bob@57 72 artist:"The Barbwires",
bob@57 73 title:"La Caja del Muerto",
bob@57 74 mp3:"{{ STATIC_URL }}music/11.mp3"
bob@57 75 },
bob@57 76 {
bob@57 77 artist:"Frankie & the Pool Boys:",
bob@57 78 title:"Ewa on the Beach",
bob@57 79 mp3:"{{ STATIC_URL }}music/12.mp3"
bob@57 80 },
bob@57 81 {
bob@57 82 artist:"The Thunderchiefs",
bob@57 83 title:"Estratosfera",
bob@57 84 mp3:"{{ STATIC_URL }}music/13.mp3"
bob@57 85 },
bob@57 86 {
bob@57 87 artist:"The Secret Samurai",
bob@57 88 title:"The Khazar",
bob@57 89 mp3:"{{ STATIC_URL }}music/14.mp3"
bob@57 90 },
bob@57 91 {
bob@57 92 artist:"The Madeira:",
bob@57 93 title:"Witch Doctor",
bob@57 94 mp3:"{{ STATIC_URL }}music/15.mp3"
bob@57 95 },
bob@57 96 {
bob@57 97 artist:"The Eliminators:",
bob@57 98 title:"Walking Tall",
bob@57 99 mp3:"{{ STATIC_URL }}music/16.mp3"
bob@57 100 },
bob@57 101 {
bob@57 102 artist:"Surfer Joe",
bob@57 103 title:"North Swell",
bob@57 104 mp3:"{{ STATIC_URL }}music/17.mp3"
bob@57 105 },
bob@57 106 {
bob@57 107 artist:"The Deadbeats",
bob@57 108 title:"Karabasan",
bob@57 109 mp3:"{{ STATIC_URL }}music/18.mp3"
bob@57 110 },
bob@57 111 {
bob@57 112 artist:"Daikaiju",
bob@57 113 title:"Laser Runner",
bob@57 114 mp3:"{{ STATIC_URL }}music/19.mp3"
bob@57 115 },
bob@57 116 {
bob@57 117 artist:"The Anacondas",
bob@57 118 title:"Floating Home",
bob@57 119 mp3:"{{ STATIC_URL }}music/20.mp3"
bob@51 120 }
bob@51 121 ],
bob@51 122 {
bob@51 123 playlistOptions: {
bob@51 124 enableRemoveControls: true,
bob@51 125 autoPlay: false
bob@51 126 },
bob@51 127 swfPath: "{{ STATIC_URL }}js",
bob@51 128 solution:"html, flash",
bob@54 129 oggSupport: false,
bob@54 130 supplied: "mp3"
bob@51 131 });
bob@51 132 });
bob@51 133 </script>
bob@51 134 {% endblock %}
bob@51 135
bgneal@9 136 {% block content %}
bgneal@9 137 {% navbar 'music' %}
bgneal@9 138 <h1>Listen</h1>
bob@51 139 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
bob@51 140
bob@51 141 <div id="jp_container_1" class="jp-audio">
bob@51 142 <div class="jp-type-playlist">
bob@51 143 <div class="jp-gui jp-interface">
bob@51 144 <ul class="jp-controls">
bob@51 145 <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
bob@51 146 <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
bob@51 147 <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
bob@51 148 <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
bob@51 149 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
bob@51 150 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
bob@51 151 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
bob@51 152 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
bob@51 153 </ul>
bob@51 154 <div class="jp-progress">
bob@51 155 <div class="jp-seek-bar">
bob@51 156 <div class="jp-play-bar"></div>
bob@51 157 </div>
bob@51 158 </div>
bob@51 159 <div class="jp-volume-bar">
bob@51 160 <div class="jp-volume-bar-value"></div>
bob@51 161 </div>
bob@51 162 <div class="jp-time-holder">
bob@51 163 <div class="jp-current-time"></div>
bob@51 164 <div class="jp-duration"></div>
bob@51 165 </div>
bob@51 166 <ul class="jp-toggles">
bob@51 167 <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
bob@51 168 <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
bob@51 169 <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
bob@51 170 <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
bob@51 171 </ul>
bob@51 172 </div>
bob@51 173 <div class="jp-playlist">
bob@51 174 <ul>
bob@51 175 <li></li>
bob@51 176 </ul>
bob@51 177 </div>
bob@51 178 <div class="jp-no-solution">
bob@51 179 <span>Update Required</span>
bob@51 180 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>.
bob@51 181 </div>
bob@51 182 </div>
bob@51 183 </div>
bgneal@9 184 {% endblock %}