Commits

Frank Becker committed 4bfdc5a

added Cirlce jPlayer

  • Participants
  • Parent commits efae020

Comments (0)

Files changed (13)

 * add ogg feed
 * add Navigation highlight class="active" css tag
 * add Icons to RSS etc. via Webfont
+* add Tag Cloud
 * Done: Ajax recent episodes badge
 * Later: Parallax scroll w/ logo and foreground
 

File src/project/importthis/templates/base.html

       <link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
 
       <link href="{{ STATIC_URL }}css/bootstrap-responsive.css" rel="stylesheet">
+          <link href="{{ STATIC_URL }}css/circle_player.css" rel="stylesheet">
       {% compress css %}
-          <link href="{{ STATIC_URL }}css/circle_player.css" rel="stylesheet">
-          <link href="{{ STATIC_URL }}css/circle_player.css" rel="stylesheet">
           <link rel="stylesheet" href="{{ STATIC_URL }}css/custom.scss" type="text/x-scss">
       {% endcompress css %}
       {% comment %}
     <script src="{{ STATIC_URL }}js/jquery-1.7.2.min.js"></script>
     <script src="{{ STATIC_URL }}js/bootstrap-transition.js"></script>
     <script src="{{ STATIC_URL }}js/bootstrap-dropdown.js"></script>
-    <script src="{{ STATIC_URL }}js/bootstrap-popover.js"></script>
     <script src="{{ STATIC_URL }}js/bootstrap-button.js"></script>
     <script src="{{ STATIC_URL }}js/bootstrap-collapse.js"></script>
       {% comment %}
+    <script src="{{ STATIC_URL }}js/bootstrap-popover.js"></script>
     <script src="{{ STATIC_URL }}js/bootstrap-tooltip.js"></script>
       <script src="{{ STATIC_URL }}js/bootstrap-alert.js"></script>
       <script src="{{ STATIC_URL }}js/bootstrap-modal.js"></script>
           var scrollorama = $.scrollorama({
               enablePin:false
           });
+              supplied: "m4a, mp3, oga",
+              swfPath: '../js',
           {% endcomment %}
-          $("#jquery_jplayer_1").jPlayer({
+          {% for episode in recent_episodes %}
+              {% if episode.enclosure_set.all %}
+              var myCirclePlayer{{ episode.pk }} = new CirclePlayer("#play-e{{ episode.id }}",
+                      {
+                          {% for enclosure in episode.enclosure_set.all %}
+                              {% if enclosure.mime == 'mp3' %}
+                                  mp3: "{{ enclosure.url }}"{% if not enclosure.last %},{% endif %}
+                              {% endif %}
+                              {% if enclosure.mime == 'oga' %}
+                                  oga: "{{ enclosure.url }}"{% if not enclosure.last %},{% endif %}
+                              {% endif %}
+                              {% if enclosure.mime == 'm4a' %}
+                                  m4a: "{{ enclosure.url }}"{% if not enclosure.last %},{% endif %}
+                              {% endif %}
+                          {% endfor %}
+                      }, {
+                          cssSelectorAncestor: "#cp-container-{{ episode.id }}",
+                          wmode: "window",
+                          supplied: "m4a, mp3, oga",
+                          errorAlerts: true,
+                          warningAlerts: false
+                      });
+              {% endif %}
+              {% endfor %}
+          {% comment %}
+                          solution: 'html',
+                          preload: 'metadata',
+                          volume: 0.8,
+                          muted: false,
+          $("#play-e{{ episode.id }}").jPlayer({
               ready: function () {
                   $(this).jPlayer("setMedia", {
-                      m4a: "/media/mysound.mp4",
-                      oga: "/media/mysound.ogg"
+                      {% for enclosure in episode.enclosure_set.all %}
+                          {% if enclosure.mime == 'mp3' %}
+                              mp3: "{{ enclosure.url }}",
+                          {% endif %}
+                      {% endfor %}
                   });
               },
-              swfPath: "/js",
-              supplied: "m4a, oga"
+              supplied: "mp3",
+               solution: 'html',
+               preload: 'metadata',
+               volume: 0.8,
+               muted: false,
+               errorAlerts: true,
+               warningAlerts: true
           });
+          {% endfor %}
+          {% endcomment %}
       });
       $.getJSON("{% url 'episodes_count' %}", function(data) {
         $(document).ready(function() {

File src/project/importthis/templates/css/circle_player.css

 
 .cp-container {
     position: relative;
-    width: 104px; /* 200 - (2 * 48) */
-    height: 104px;
-    background: url("bgr.jpg") 0 0 no-repeat;
-    padding: 48px;
+    width: 64px; /* 200 - (2 * 48) */
+    height: 64px;
+    background: url("../img/bgr.jpg") 0 0 no-repeat;
+    padding: 29px;
     -webkit-tap-highlight-color:rgba(0,0,0,0);
 }
 
     position: absolute;
     top: 0;
     left: 0;
-    width: 104px;
-    height: 104px;
-    clip:rect(0px,52px,104px,0px);
+    width: 62px;
+    height: 62px;
+    /*clip:rect(0px,52px,104px,0px);*/
+    clip:rect(0px,30px,92px,0px);
 
     -moz-border-radius:52px;
     -webkit-border-radius:52px;
 
 .cp-buffer-1,
 .cp-buffer-2 {
-    background: url("buffer.png") 0 0 no-repeat;
+    background: url("../img/buffer.png") 0 0 no-repeat;
 }     
 
 
  */ 
 
 .cp-container .cp-fallback {
-    background: url("progress_sprite.jpg") no-repeat;
-    background-position: 0 104px; 
+    background: url("../img/progress_sprite.jpg") no-repeat;
+    background-position: 0 62px;
 }
 
 .cp-progress-1,
 .cp-progress-2 {
-    background: url("progress.png") 0 0 no-repeat;
+    background: url("../img/progress.png") 0 0 no-repeat;
 } 
 
 .cp-buffer-holder,
 .cp-progress-holder,
 .cp-circle-control {
     position:absolute;
-    width:104px;
-    height:104px;
+    width:62px;
+    height:62px;
 } 
 
 .cp-circle-control {
 
 .cp-buffer-holder,
 .cp-progress-holder {
-    clip:rect(0px,104px,104px,52px);
+    clip:rect(0px,62px,62px,31px);
     display:none;
 }
 
 
 .cp-controls {
     margin:0;
-    padding: 26px;
+    padding: 16px;
 }
 
 .cp-controls li{
 .cp-controls li a{
     position: relative;
     display: block;
-    width:50px;
-    height:50px;
+    width:30px;
+    height:30px;
     text-indent:-9999px;
     z-index:1;      
 }
 
 .cp-controls .cp-play {
-    background: url("controls.jpg") 0 0 no-repeat;
+    background: url("../img/controls.jpg") 0 0 no-repeat;
 }
 
 .cp-controls .cp-play:hover {
-    background: url("controls.jpg") -50px 0 no-repeat;
+    background: url("../img/controls.jpg") -30px 0 no-repeat;
 }
 
 .cp-controls .cp-pause {
-    background: url("controls.jpg") 0 -50px no-repeat;
+    background: url("../img/controls.jpg") 0 -30px no-repeat;
 }
 
 .cp-controls .cp-pause:hover {
-    background: url("controls.jpg") -50px -50px no-repeat;
+    background: url("../img/controls.jpg") -30px -30px no-repeat;
 }
 
 .cp-jplayer {

File src/project/importthis/templates/css/custom.scss

 .episode-list-entry {
   position: relative;
   display: block;
+  ul {
+    list-style-position: inside;
+  }
 }
 
 img.left {

File src/project/importthis/templates/ico/favicon.ico

Old
Old image
New
New image

File src/project/importthis/templates/img/bgr.jpg

Added
New image

File src/project/importthis/templates/img/buffer.png

Added
New image

File src/project/importthis/templates/img/controls.jpg

Added
New image

File src/project/importthis/templates/img/progress.png

Added
New image

File src/project/importthis/templates/img/progress_sprite.jpg

Added
New image

File src/project/importthis/templates/info.html

             <a href="http://twitter.github.com/bootstrap">Twitter Bootstrap</a>
         </li>
         <li>
-            und viele viele mehr
+            <a href="http://auphonic.com/">magical Auphonic</a>
+        </li>
+        <li>
+            <a href="http://jplayer.org/">jPlayer</a>
+        </li>
+        <li>
+            und all den anderen Wesen, welche unserer digitalen Welt Leben einhauchen...
         </li>
     </ul>
     <h3>Coming soon</h3>

File src/project/importthis/templates/podcasting/_episode_detail.html

             <h6>{{ episode.subtitle }}</h6>
 
             {% if episode.description %}
-                <div class="episode-description">{{ episode.description }}</div>
+                <div class="episode-description">{{ episode.description|safe }}</div>
             {% endif %}
             <a class="btn btn-warning btn-large">
               <i class="icon-music icon-white"></i> Zuhören

File src/project/importthis/templates/podcasting/_episode_list.html

 {% if episode_list %}
     <div class="episode-list">
         {% for episode in episode_list %}
-            <div class="podcast-episode mod">
+            <article class="podcast-episode mod">
                 <a href="{{ episode.get_absolute_url }}">
                 <h2 class="ribbon">
                         <span class="title">{{ episode.title }}</span>
                              height="{{ episode.img_episode_sm.height }}"
                              class="left" />
                     </a>
-                    <div class="player">
 
-                    </div>
-                {{ episode.description|truncatewords_html:150 }}
+                    {% if episode.enclosure_set.all %}
+                        <!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
+                        <div id="play-e{{ episode.id }}" class="player cp-player"></div>
+
+                        <!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
+                        <div class="player">
+
+                            <div id="cp-container-{{ episode.pk }}" class="cp-container">
+                                <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
+                                    <div class="cp-buffer-1"></div>
+                                    <div class="cp-buffer-2"></div>
+                                </div>
+                                <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
+                                    <div class="cp-progress-1"></div>
+                                    <div class="cp-progress-2"></div>
+                                </div>
+                                <div class="cp-circle-control"></div>
+                                <ul class="cp-controls">
+                                    <li><a href="#" class="cp-play" tabindex="1">play</a></li>
+                                    <li><a href="#" class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
+                                </ul>
+                            </div>
+                        </div>
+                    {% endif %}
+                {{ episode.description|safe|truncatewords_html:150 }}
                     <div class="meta">
                         {% for enclosure in episode.enclosure_set.all %}
                             {% if enclosure.mime == 'mp3' %}
                         {% endfor %}
                     </div>
                 </div>
-            </div>
+            </article>
         {% endfor %}
     </div>
 {% else %}