Fixing & styling player/episode

diff --git a/panikweb_templates/static/css/specifics.css b/panikweb_templates/static/css/specifics.css
index eb75ebd7b867efdd51a94c0c5bffeea93b556fb9..51dfe11b297d620b3c292560e302fb80c307c057 100644 (file)
--- a/panikweb_templates/static/css/specifics.css
+++ b/panikweb_templates/static/css/specifics.css
@@ -127,6 +127,7 @@ button.check:before, a.check:before {
 /****************************************************/
 body{
        background:#333;
+       background: url("data:image/png;base64,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") repeat scroll 0% 0% rgb(51, 51, 51);
        color:white;
 }
 #Main{
@@ -282,7 +283,11 @@ body{
 /****************************************************/
 /**** PLAYER ****/
 /*#Home #player{   float: left; } */
-#player-container{background-color:#ff6633; border-color:#fff;color:white !important;}
+#player-container{
+       -moz-box-shadow: 0px 5px 5px #000;
+       -webkit-box-shadow:  0px 5px 5px #000;
+       box-shadow: 0px 5px 10px #000;
+background-color:#ff6633; border-color:#fff;color:white !important;}
 #player-container *{border-color:#fff; color:white !important;background-color:transparent;}
 #player-container .metas, #player-container img{border-color:#fff;}
 #player-container .padded{padding:1em;}
@@ -377,6 +382,11 @@ body{
        height:1.5em;
        overflow:hidden;
 }
+#player-container #Playlist ol.deploy{
+       height:auto;
+       max-height:12em;
+       overflow:auto;
+}
 #player-container #Playlist ol li{
        line-height:1.5em;
        padding:0;
@@ -401,6 +411,7 @@ body{
 /**** EMISSIONS ****/
 #Emission .emission-detail .title{}
 /*
+*/
 @media screen and (min-width: 800px) {
        #Emissions #Changing .wrapper.sided{
                max-width:1000px;
@@ -425,7 +436,6 @@ body{
                clear:right;
        }
 }
-*/
 /**** Detail   ****/
 .emission-detail .metas {
     float: left;
@@ -436,7 +446,9 @@ body{
        font-family: "RegloBold";
        font-size: 1.3em;
 }
-.emission-detail .logo{max-width:50%;margin-bottom:1em;}
+.emission-detail .logo{
+       max-width:50%;margin-bottom:1em;
+}
 @media screen and (max-width: 300px) {
        .emission-detail .metas {
                float: none;
@@ -451,22 +463,6 @@ body{
        font-size: 17.6px;
        text-transform: inherit;
 }
-.emission-detail .control {
-    text-transform: uppercase;
-    font-family: "Reglo";
-       white-space: nowrap;
-       text-overflow: ellipsis;
-       overflow: hidden;
-}
-.emission-detail .control .symbol{
-       font-size: 6em;
-       line-height: 80%;
-       float:left;
-}
-.emission .control .listen{
-       line-height:5em;
-}
-
 .emission .mainHeader {
     overflow: hidden;
     margin-bottom:1.5em;
@@ -508,10 +504,15 @@ body{
 .episode.resume .title{
        margin-bottom:0.5em;
 }
-.episode.resume .logo,
- .episode.resume .controls{
+.episode.resume .logo{
        float: right;
 }
+.episode.resume .sound.right .icon-download{
+       text-align:center;
+}
+.episode.resume .sound.right .icon-download{
+       display:block;
+}
 .episode.detail .logo.right{
        max-width:50%;
 }

diff --git a/panikweb_templates/static/css/type.css b/panikweb_templates/static/css/type.css
index ebeb436592f4a19af25d44c79b728ec6ceef85a6..77f5b813fe7926d2faee0c1a53923db4f3e4a8b8 100644 (file)
--- a/panikweb_templates/static/css/type.css
+++ b/panikweb_templates/static/css/type.css
@@ -61,8 +61,8 @@
        vertical-align:middle !important;
        display:inline-block !important;
        font-family: 'Symbols' !important;
-       font-size:3em;
        line-height:50% !important;
+       font-size:2em;
 }
 .resymbol.big, .icons.big{
        font-size:5em;
@@ -70,7 +70,6 @@
 .resymbol.huge, .icons.huge{
        font-size:8em;
 }
-
 .info:before,.warning:before,.error:before{
        font-family: FontAwesome;
        display:inline-block;
@@ -86,7 +85,6 @@
        content: "\f056 ";
 }
 .checked:before {
-
        content: "\f056 ";
 }
 

diff --git a/panikweb_templates/static/js/audioPlayer.js b/panikweb_templates/static/js/audioPlayer.js
index 1f091a287605462848decf7e24010e3a88da1b79..07f2509e9f4bc3e1428acd1b247482c34dcb7798 100644 (file)
--- a/panikweb_templates/static/js/audioPlayer.js
+++ b/panikweb_templates/static/js/audioPlayer.js
@@ -19,6 +19,7 @@
                        itemClasses: "",
                        controlContainer: $('<div>'),
                        playlistContainer: $('<ol>'),
+                       onLoad: function(){},
                        onAdd: function(){},
                        onPlay: function(){},
                        onUpdate: function(){},
@@ -28,6 +29,7 @@
                        thePlaylist = this;     
                        this.isActive = false;
                        this.isLastAdd = false;
+                       this.controlButtons = []
                        this.debugContainer = $('<pre>').hide();
                        this.controlContainer = this.options.controlContainer;
                        this.playlistContainer = this.options.playlistContainer;
@@ -38,6 +40,7 @@
                        this.playlist = this.options.playlist;
                        this.buildPlaylistControls();
                        this.loadPlaylist();
+                       this.options.onLoad(this);
                        this._update();
                },
 
@@ -104,12 +107,12 @@
                                thePlaylist.setFocus(container);
                                container.addClass('playing');
                                playpause.addClass('icon-pause').removeClass('icon-play');
-                               thePlaylist.playpause.removeClass('icon-play').addClass('icon-pause');
+                               thePlaylist.controlButtons['playpause'].removeClass('icon-play').addClass('icon-pause');
                                thePlaylist.afterPlay();
                        }).on('pause',function(){
                                $(this).removeClass('playing');
                                playpause.addClass('icon-play').removeClass('icon-pause');
-                               thePlaylist.playpause.removeClass('icon-pause').addClass('icon-play');
+                               thePlaylist.controlButtons['playpause'].removeClass('icon-pause').addClass('icon-play');
                        }).on('stop',function(){
                                $(this).trigger('pause');
                                $(this)[0].currentTime = 0;
@@ -158,31 +161,33 @@
                        if(success){success();}
                        this._update();
                },
+               // Play next sound
+               registerControl: function(name,options) {
+                       this.controlButtons[name] = $('<button>',options);
+                       this.controlContainer.append(this.controlButtons[name]);
+               },
                // Build controls
                buildPlaylistControls: function() {
                        this.controls = $('<div>',{class:'playlistControls controls'});
-                       this.toggleList = $('<button>',{class:"icon-list",click:function(){
+                       this.registerControl('toggleList',{class:"icon-list hidden",click:      function(){ 
                                thePlaylist.playlistContainer.toggle();
-                       }}).hide();
-                       this.clearList = $('<button>',{class:"icon-trash",click:function(){
+                       }});
+                       this.registerControl('clearList',{class:"icon-trash",click:     function(){ 
                                thePlaylist.playlistContainer.empty();
                                thePlaylist._update();
                        }});
- 
-                       this.playpause = $('<button>',{class:"icon-play",click:function(){
-                               thePlaylist.playPauseList();
+                       this.registerControl('previous',{class:"icon-step-backward",click:function(){
+                               thePlaylist.playPrevious();
                        }});
-                       this.stop = $('<button>',{class:"icon-stop",click:function(){
+                       this.registerControl('stop',{class:"icon-stop",click:   function(){ 
                                thePlaylist.stopSounds();
                        }});
-                       this.next = $('<button>',{class:"icon-step-forward",click:function(){
-                               thePlaylist.playNext();
+                       this.registerControl('playpause',{class:"icon-play",click:      function(){ 
+                               thePlaylist.playPauseList();
                        }});
-                       this.previous = $('<button>',{class:"icon-step-backward",click:function(){
-                               thePlaylist.playPrevious();
+                       this.registerControl('next',{class:"icon-step-forward",click:   function(){ 
+                               thePlaylist.playNext();
                        }});
-                       this.controls.append(this.toggleList).append(this.clearList).append(this.previous).append(this.stop).append(this.playpause).append(this.next);
-                       this.controlContainer.append(this.controls);
                        return true;
                },
                // Play next sound
@@ -195,7 +200,7 @@
                },
                // Play next sound
                playPauseList: function() {
-                       if(this.playpause.hasClass('icon-play')){
+                       if(this.controlButtons['playpause'].hasClass('icon-play')){
                                if(this.isActive){
                                        this.isActive.find('audio').trigger('beforePlay').trigger('play');                              
                                }else{

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index f0f342bc7a851c3473e99ff38433580ffa7ad9a0..9fc11f755648bbacfe517248e989a2cfe19bf09e 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -11,6 +11,11 @@ $(function() {
        var $localList = $('#localList').playlist({
                controlContainer: $('<div>',{class:""}).sortable(),
                playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
+               onLoad:function(self){
+                       self.registerControl('showList',{class:"icon-list",click:       function(){ 
+                               self.playlistContainer.toggleClass('deploy');
+                       }});
+               },
                onPlay:function(self){
                        $('#DirectStreamPanik')[0].pause();
                        self.playlistContainer.scrollTo(self.isActive, 800 );
@@ -149,8 +154,8 @@ $(function() {
                        });  
                        activeTab.trigger('load');
                });
-               $('[data-playlist-add]').on('click',function(){
-                       var audio = $($(this).attr('data-playlist-add'));
+               $('[data-player-audio]').on('click',function(){
+                       var audio = $($(this).attr('data-player-audio'));
                        $localList.playlist("registerAudio",audio,doLog(audio.attr('title')+' has been added to your playlist.','ok'));
                });
                $('[data-highlight]').on('check',function(){

diff --git a/panikweb_templates/templates/episodes/resume.html b/panikweb_templates/templates/episodes/resume.html
index dcfa631c52c8a18e921d5ec8829e1160ee4a43a9..8066688446eb4d0576fd0e2aa50b6c8353b11c73 100644 (file)
--- a/panikweb_templates/templates/episodes/resume.html
+++ b/panikweb_templates/templates/episodes/resume.html
@@ -29,6 +29,10 @@
        </div>
        {% endif %}
        <div class="content">
+
+               {% if episode.main_sound %}
+                       <div class="sound right">{% audio sound=episode.main_sound %}</div>
+               {% endif %}
                {% if class = "standalone" %}
                        <h5 class="title ellipsis smooth">
                                <a href="{% url 'emission-view' slug=episode.emission.slug %}">{{ episode.emission.title }}</a>
@@ -37,7 +41,6 @@
                <h5 class="title">
                        <a href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">{{ episode.title }}</a>
                </h5>
-
                {% if model = "inline" %}
                        {% if episode.description %}
                                <div class="description ellipsis">
@@ -48,13 +51,7 @@
                                        {{ episode.text|safe|striptags|truncatewords:20}}
                                </div>
                        {% endif %}
-                       {% if episode.main_sound %}
-                               {% audio sound=episode.main_sound %}
-                       {% endif %}
                {% else %}
-                       {% if episode.main_sound %}
-                               {% audio sound=episode.main_sound %}
-                       {% endif %}
                        {% if episode.description %}
                        <article class="text userContent">
                                {{ episode.description|safe }}

diff --git a/panikweb_templates/templates/includes/audio.html b/panikweb_templates/templates/includes/audio.html
index 92f97b726cb10977dfb26d6a81dad2f77fac78ad..fabf45142b2b1064fa734031c31c19853c6681d4 100644 (file)
--- a/panikweb_templates/templates/includes/audio.html
+++ b/panikweb_templates/templates/includes/audio.html
@@ -1,21 +1,23 @@
 {% load soundfiles %}
 {% load paniktags %}
 {% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
-       <!--
-       <span class="controls audioControls" data-audio-control="Audio-{{ sound.file.url|slugify }}">
-               <button class="add icon-plus">{{ sound.content_types }}</button>
-               <button class="playpause icon-play">{{ sound.content_types }}</button>
-               <button class="icon-eye-open" title="Show/Hidden HTML5 audio player" onclick="$('#Audio-{{ sound.file.url|slugify }}').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;"></button>
-
+       <div class="controls huge">
+               <button class="icon-plus-sign"
+                       title="Add to playlist" 
+                       data-player-audio="#Audio-{{ sound.file.url|slugify }}" 
+                       data-player-method="add" 
+                       id="addToPlaylist-{{ sound.file.url|slugify }}"
+                       ></button>
+               <button class="icon-play-circle"
+                       title="Play" 
+                       data-player-audio="#Audio-{{ sound.file.url|slugify }}" 
+                       data-player-method="play" 
+                       ></button>
                {% if sound|is_format_available:'ogg' %}
-                       <a class="icon-download" href="{{ sound.url }}"> ogg</a>
+                       <a target="_blanck" class="icon-download button" href="{{ sound|format_url:'ogg' }}"
+                               ></a>
                {% endif %}
-               {% if sound|is_format_available:'mp3' %}
-                       <a class="icon-download" href="{{ sound.url }}"> mp3</a>
-               {% endif %}
-       </span>
-       -->
-
+       </div>
        <audio 
                data-player='true'
                class='hidden'
@@ -53,7 +55,7 @@
                }
                </code>
        </audio>
-       <button data-playlist-add="#Audio-{{ sound.file.url|slugify }}" class="icon-plus" id="addToPlaylist-{{ sound.file.url|slugify }}">Add to playlist</button>
+       
 {% else %}
        <div class="error">No sound available!</div>
 {% endif%}