Changeset b4986dc


Ignore:
Timestamp:
06/07/11 17:51:03 (2 years ago)
Author:
yomguy <yomguy@…>
Branches:
master, crem, crem2, dev, dev2, diadems, forma, generic, instru_search, lam, nlivemulti, production, release/1.4.4, security, social, storage, test
Children:
74fa706
Parents:
df4ccbc (diff), f10d7f9 (diff)
Note: this is a merge changeset, the changes displayed below correspond to the merge itself.
Use the (diff) links above to see all the changes relative to each parent.
git-author:
yomguy <yomguy@…> (06/07/11 17:51:03)
git-committer:
yomguy <yomguy@…> (06/07/11 17:51:03)
Message:

add Riccardo JS cleanup

Files:
6 added
10 edited

Legend:

Unmodified
Added
Removed

  • telemeta/htdocs/css/player.css

    r9d5dd4e rf10d7f9  
    1 /** 
    2 * player.css customize the player skin. Note: 
    3 * 1) Some styles will be overridden, namely position and overflow of divs, because otherwise they might break the player layout. 
    4 * 2) .ts-marker and .ts-pointer fontSize should be changed according to .ts-ruler fontSize. In general, change the latter without 
    5 *    specifying a font for the formers, which will inherit it. The player internally calculates a default ruler height before housing 
    6 *    pointer and markers in order to paint its ruler lines. If font sizes of ruler vs. pointer and markers are different, the latters 
    7 *    might overlap vertically. On the other hand, if pointers and markers have strong borders/padding, 
    8 *    playing around with different font size  and line heights might be the solution to avoid vartical overlap 
    9 * 3) canvas (svg) classes (.ts-pointer-canvas, .ts-marker-canvas, .ts-ruler-upper-rect and .ts-ruler-lines) 
    10 *    have specific css syntax (have a look) 
    11 *    In case svg is not supported (IE7-8, as usual, and apparently even 9, according to Raphael function detecting svg support), 
    12 *    a parser inside the player will read class rules and send them to raphael library 
    13 *    in the form of a map (function attr in Raphael. Note that many but not all css properties are supported). 
    14 *    This parser READS ONLY STAND ALONE RULES, SO BE CAREFUL NOT WRITING A CSS RULE LIKE '.aClass .ts-marker-canvas' because 
    15 *    it WILL NOT affect elements with class 'ts-marker-canvas' (watiing for full SVG support, when this mess will be over) 
    16 */ 
    171 
    18 .ts-skin-lab .ts-player { 
     2 
     3/*.ts-skin-lab .ts-player { 
    194    padding: 0; 
    205    clear: both; 
    … …  
    3116    height: 130px; 
    3217    background: transparent; 
    33 } 
     18}*/ 
    3419 
    3520#player_maximized .ts-player .ts-wave,  #player_maximized .ts-player .ts-image { 
    … …  
    3722} 
    3823 
    39 .ts-skin-lab .ts-player .ts-viewer { 
     24/*.ts-skin-lab .ts-player .ts-viewer { 
    4025    margin: 0; 
    4126    border: 0; 
    42 } 
    43 .ts-skin-lab .ts-player .ts-viewer .ts-pointer { 
     27}*/ 
     28/*.ts-skin-lab .ts-player .ts-viewer .ts-pointer { 
    4429    background: #BB0000; 
    4530    color: #DDD; 
    4631    border: solid 1px #BB0000; 
    4732} 
    48 .ts-skin-lab .ts-player .ts-viewer a.ts-pointer { 
     33.ts-skin-lab .ts-player .ts-viewer .ts-pointer { 
    4934    color: #BB0000; 
    5035    background: white; 
    5136    padding: 0 0.5em; 
    52 } 
     37    border: solid 1px #BB0000; 
     38}*/ 
    5339/*class for the canvas (svg) associated to a marker. If svg is not supported, a parser in the palyer 
    5440converts these values (nb: not all are supported) to specigic vml attributes. In this case, however, ONLY CLASSES WRITTEN 
    5541ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED)*/ 
    56 .ts-pointer-canvas { 
     42/*.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line { 
    5743    fill: #BB0000; 
    5844    stroke-width:0; 
    59 } 
    60 .ts-skin-lab .ts-player .ts-viewer .ts-marker { 
     45}*/ 
     46/*.ts-skin-lab .ts-player .ts-viewer .ts-marker { 
    6147    padding: 0 0.5em; 
    6248    background: #e65911; 
    6349    color: #FFF; 
    64 } 
     50}*/ 
    6551/*class for the canvas (svg) associated to a marker. If svg is not supported, a parser in the palyer  
    6652converts these values (nb: not all are supported) to specigic vml attributes. In this case, however, ONLY CLASSES WRITTEN  
    6753ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED)*/ 
    68 .ts-marker-canvas { 
     54/*.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line { 
    6955    fill: #e65911; 
    7056    stroke-width:0; 
    71 } 
    72 .ts-skin-lab .ts-player .ts-ruler .ts-section .ts-label { 
     57}*/ 
     58 
     59/*.ts-skin-lab .ts-player .ts-ruler .ts-section .ts-label { 
    7360    background: #595959; 
    7461    color: white; 
    … …  
    7966    color: #ADADAD; 
    8067    border-bottom: solid 1px #adadad; 
    81 } 
     68}*/ 
    8269 
    8370.ts-skin-lab .ts-player .ts-control { 
    … …  
    8572} 
    8673 
    87 /*.ts-skin-lab .ts-player .ts-control .ts-playback a { 
    88     padding: 28px 0 0 0; 
    89     height :20px;  for IE5/Win only  
    90     margin-right: 0px; 
    91 } 
    92  
    93 .ts-skin-lab .ts-player .ts-control  a { 
    94     height:28px; 
    95     margin-right: 0px; 
    96 } 
    97  
    98 .ts-skin-lab .ts-player .ts-control .ts-layout { 
    99     margin-left: 0px; 
    100 } 
    101 */ 
    10274#player_maximized, #player_minimized { 
    10375    position: relative; 
    … …  
    128100} 
    129101 
    130 #player .ts-visualizer{ 
     102/*#player .ts-visualizer{ 
    131103    margin:5px; 
    132104} 
    133105 
    134 .ts-ruler{ 
    135     color: white; 
    136     background-color: #333; 
    137     font-size: 10px; 
    138 } 
    139  
    140 .ts-ruler{ 
     106.ts-skin-lab .ts-player .ts-ruler{ 
    141107    color: white; 
    142108    background-color: #2E2E2E; 
    … …  
    144110    line-height: 13px; 
    145111} 
    146 /*ruler canvas (svg)"*/ 
    147 .ts-ruler-upper-rect{ 
     112.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-upper-rect{ 
    148113     fill:  #595959; 
    149114    stroke-width:0; 
    150     stroke: #595959; /*to be sure...*/ 
     115    stroke: #595959; to be sure... 
    151116} 
    152 .ts-ruler-lines{ 
     117.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-lines{ 
    153118    stroke-width:1; 
    154119    stroke:#ADADAD; 
    155 } 
     120}*/ 

  • telemeta/htdocs/js/playerLoader.js

    ra35b642 r97dbca2  
    5757} 
    5858 
    59 //end(''): clears loading span, if any 
    60 //end('msg') if loading span is there, clear loading span. If loading span is there, display alert msg 
    61  
    62 function end(optionalErrorMsg){ 
    63     var $ = jQuery; 
    64     var elm = $('#loading_span'); 
    65     if(elm.length<1){ 
    66         return; 
    67     } 
    68     elm.empty().remove(); 
    69     if(optionalErrorMsg){ 
    70         $('#rightcol').hide(); 
    71         alert(optionalErrorMsg); 
    72     } 
    73 } 
     59 
    7460 
    7561function loadPlayer(analizerUrl, soundUrl, itemId, visualizers, currentUserName, isStaffOrSuperuser){ 
    7662    var $J = jQuery; 
    7763    var wdw = window; 
     64 
     65 
     66    //end(''): clears loading span, if any 
     67    //end('msg') if loading span is there, clear loading span. If loading span is there, display alert msg 
     68 
     69    function end(optionalErrorMsg){ 
     70        //var $J = jQuery; 
     71        $J(wdw).ready(function(){ 
     72            var elm = $J('#loading_span'); 
     73            if(elm.length<1){ 
     74                return; 
     75            } 
     76            elm.empty().remove(); 
     77            if(optionalErrorMsg){ 
     78                $J('#rightcol').hide(); 
     79                alert(optionalErrorMsg); 
     80            } 
     81        }); 
     82    } 
     83 
     84 
    7885    //grab the case of soundManager init errors: 
    7986    soundManager.onerror = function() { 
    … …  
    9198    //Ideally, we should not enter here in some cases. For the moment we just catch the case div#player doesnt exist and 
    9299    //we return 
    93     $J(wdw).ready(function(){ 
    94         var maxTime = 10000; 
    95         //if the loading span is still visible in 10 seconds, throw an error: 
    96         setTimeout(function(){ 
    97             end('SoundManager is not responding. Try to:\n - Reload the page\n - Empty the cache (see browser preferences) and reload the page\n - Restart the browser'); 
    98         },maxTime); 
    99100     
    100         //    var playerDiv = $J('#player'); 
    101         //    var markersUI = $J("#markers_div_id"); 
    102  
    103         var playerDiv = '#player'; 
    104         if(!($J(playerDiv).length)){ 
    105             end(); 
    106         } 
     101    var maxTime = 10000; 
     102    //if the loading span is still visible in 10 seconds, throw an error: 
     103    setTimeout(function(){ 
     104        end('SoundManager is not responding. Try to:\n - Reload the page\n - Empty the cache (see browser preferences) and reload the page\n - Restart the browser'); 
     105    },maxTime); 
     106     
     107    //    var playerDiv = $J('#player'); 
     108    //    var markersUI = $J("#markers_div_id"); 
     109 
     110     
    107111         
    108         var markersUI = "#markers_div_id"; 
    109         var msgElm = $J('#loading_span_text').html('Loading sound info...'); 
    110         //var uinqid_ = Timeside.utils.uniqid; //defined in application.js 
    111         var pFloat = parseFloat; 
    112         //load analyser xml and proceed on success: 
    113         $J.ajax({ 
    114             url: analizerUrl, //'analyze/xml', 
    115             dataType: 'xml', 
    116             success: function(data){ 
    117                 //populatetable 
    118                 var content = []; //content is an array which we will transform in table innerHTML via the method join 
    119                 //which is faster in some browsers than string concatenation 
    120                 $J.each($J(data).find('data'),function(index,element){ 
    121                     var elm = $J(element); 
    122                     content.push('<tr><td>'); 
    123                     content.push(elm.attr('name')); 
    124                     content.push('</td><td>'); 
    125                     content.push(elm.attr('value')); 
    126                     content.push('</td><td>'); 
    127                     content.push(elm.attr('unit')); 
    128                     content.push('</td></tr>'); 
    129                 //                tableBody.append('<tr><td>'+elm.attr('name')+'</td><td>'+elm.attr('value')+'</td><td>' 
    130                 //                    +elm.attr('unit')+'</td></tr>'); 
    131                 }); 
    132                  
    133                 $J('#analyzer_div_id').find('table').find('tbody:last').append(content.join("")); 
    134                  
    135  
    136  
    137                 //loaded analizer, loading player 
    138                 msgElm.html('Loading markers...'); 
    139                  
    140                 var duration = $J(data).find('#duration').attr('value'); 
    141                 duration = duration.split(":"); 
    142                 //format duration 
    143                 var pin = parseInt; 
    144                  
    145                 var radix = 10; //REALLY IMPORTANT. IF ANY ELEMENT OF DURATION STARTS WITH '0', THEN THE RADIX IS CONSIDERED EITHER OCTAL OR HEXADECIMAL 
    146                 //WE WANT TO PREVENT NON 10-BASED RADIX PARSING 
    147                 var timeInMSecs=pin(duration[0],radix)*3600+pin(duration[1],radix)*60+pFloat(duration[2],radix); 
    148                 timeInMSecs = Math.round(timeInMSecs*1000); 
    149                 var callbackAfterMarkersLoading = function(data) { 
    150                     var markerMap = []; 
     112     
     113    //var msgElm = $J('#loading_span_text').html('Loading sound info...'); 
     114    //var uinqid_ = Timeside.utils.uniqid; //defined in application.js 
     115    var pFloat = parseFloat; 
     116    //load analyser xml and proceed on success: 
     117    $J.ajax({ 
     118        url: analizerUrl, //'analyze/xml', 
     119        dataType: 'xml', 
     120        error:function(){ 
     121            end('Error loading analyzer'); 
     122        }, 
     123        success: function(data){ 
     124            //populatetable 
     125            var analyzerContentArray = []; //content is an array which we will transform in table innerHTML via the method join 
     126            //which is faster in some browsers than string concatenation 
     127            $J.each($J(data).find('data'),function(index,element){ 
     128                var elm = $J(element); 
     129                analyzerContentArray.push('<tr><td>'); 
     130                analyzerContentArray.push(elm.attr('name')); 
     131                analyzerContentArray.push('</td><td>'); 
     132                analyzerContentArray.push(elm.attr('value')); 
     133                analyzerContentArray.push('</td><td>'); 
     134                analyzerContentArray.push(elm.attr('unit')); 
     135                analyzerContentArray.push('</td></tr>'); 
     136            }); 
     137                 
     138                 
     139 
     140 
     141            //loaded analizer, loading player 
     142            //msgElm.html('Loading markers...'); 
     143                 
     144            var duration = $J(data).find('#duration').attr('value'); 
     145            duration = duration.split(":"); 
     146            //format duration 
     147            var pin = parseInt; 
     148                 
     149            var radix = 10; //REALLY IMPORTANT. IF ANY ELEMENT OF DURATION STARTS WITH '0', THEN THE RADIX IS CONSIDERED EITHER OCTAL OR HEXADECIMAL 
     150            //WE WANT TO PREVENT NON 10-BASED RADIX PARSING 
     151            var timeInMSecs=pin(duration[0],radix)*3600+pin(duration[1],radix)*60+pFloat(duration[2],radix); 
     152            timeInMSecs = Math.round(timeInMSecs*1000); 
     153            //callback to be executed after json gets the markers (see last line below) 
     154            var callbackAfterMarkersLoading = function(data) { 
     155                var markerMap = []; 
    151156             
    152                     if(data && data.result && data.result.length>0){ 
    153                         var result = data.result; 
    154                  
    155                         //add markers to the map. No listeners associated to it (for the moment) 
    156                         //var mapAdd = map.add; 
    157                         for(var i =0; i< result.length; i++){ 
    158  
    159                             var argument = result[i]; 
    160                             var marker = { 
    161                                 id: argument.public_id, 
    162                                 offset: pFloat(argument.time), //IMPORTANT: IT IS A STRING!!!!!! 
    163                                 desc: argument.description, 
    164                                 title: argument.title, 
    165                                 author: argument.author, 
    166                                 isEditable: argument.author === currentUserName || isStaffOrSuperuser, 
    167                                 canBeAddedToPlaylist: currentUserName ? true : false, 
    168                                 isSavedOnServer: true 
     157                if(data && data.result && data.result.length>0){ 
     158                    var result = data.result; 
     159                 
     160                    //add markers to the map. No listeners associated to it (for the moment) 
     161                    //var mapAdd = map.add; 
     162                    for(var i =0; i< result.length; i++){ 
     163 
     164                        var argument = result[i]; 
     165                        var marker = { 
     166                            id: argument.public_id, 
     167                            offset: pFloat(argument.time), //IMPORTANT: IT IS A STRING!!!!!! 
     168                            desc: argument.description, 
     169                            title: argument.title, 
     170                            author: argument.author, 
     171                            isEditable: argument.author === currentUserName || isStaffOrSuperuser, 
     172                            canBeAddedToPlaylist: currentUserName ? true : false, 
     173                            isSavedOnServer: true 
     174                        }; 
     175                        markerMap.push(marker); 
     176                    //mapAdd.apply(map,[result[i]]); 
     177                    } 
     178                //add markers to ruler and div 
     179                //                map.each(function(i,marker){ 
     180                //                    rulerAdd.apply(ruler,[marker, i]); 
     181                //                    mapuiAdd.apply(mapUI,[marker, i]); 
     182                //                }); 
     183 
     184                //tabIndex = result.length>0 ? 1 : 0; 
     185                } 
     186 
     187                //defining the marker callback: 
     188                 
     189                var markerMode = currentUserName || false; 
     190                if(markerMode){ 
     191                    //markerMode becomes a function: 
     192                    markerMode = function(offset){ 
     193                        var m = { 
     194                            //id: uinqid_(), //will be set in markermap 
     195                            offset: pFloat(offset), 
     196                            desc: "", 
     197                            title: "", 
     198                            author: currentUserName, 
     199                            isEditable: true, 
     200                            canBeAddedToPlaylist: true, 
     201                            isSavedOnServer: false 
     202                        }; 
     203                        return m; 
     204                    }; 
     205                } 
     206                //create visualizer select element (append it later, document here could NOT be ready) 
     207                var visualizersSelectElement = $J('<select/>'); 
     208                for(var name in visualizers){ 
     209                    $J('<option/>').html(name).appendTo(visualizersSelectElement); 
     210                } 
     211 
     212                //creating the visualizer <select/> tag 
     213                var imageSrcFcn = function(width,height){ 
     214                    var player_image_url = visualizers[""+visualizersSelectElement.val()]; 
     215                    var _src_ = null; 
     216                    if (player_image_url && (width || height)) { 
     217                        _src_ = player_image_url.replace('WIDTH', width + '').replace('HEIGHT', height + ''); 
     218                    } 
     219                    return _src_; 
     220                }; 
     221 
     222                var playerDiv = '#player'; 
     223                if(!($J(playerDiv).length)){ 
     224                    end(); //stop without raising error messages. If passed within Timeside.load, an error will be thrown 
     225                } 
     226 
     227                //function(container, soundUrl, durationInMsec, visualizers, markerMap, showAddMarkerButton, onError,onReady ){ 
     228                Timeside.load(playerDiv,soundUrl,timeInMSecs,imageSrcFcn,markerMap,markerMode, function(msg){ 
     229                    end(msg); 
     230                }, 
     231                function(player){ 
     232                    //document here is READY 
     233                    var markersUI = "#markers_div_id"; 
     234                    var mapUI = new Timeside.classes.MarkerMapDiv(markersUI); 
     235                    player.getMarkerMap().each(function(i,marker){ 
     236                        mapUI.add(marker,i,false); 
     237                    }); 
     238                    Timeside.markerMapDiv = mapUI; 
     239                    //bind add marker -> markerdiv add: 
     240                    player.bind('markerAdded', function(data){ 
     241                        //select the marker tab: 
     242                        var tab = $J('#tab_markers'); 
     243                        if(tab && tab.length){ 
     244                            tab.trigger('click'); 
     245                        } 
     246                        mapUI.add.apply(mapUI,[data.marker, data.index, true]); 
     247                    }); 
     248                    //bind move marker -> markerdiv move: 
     249                    player.bind('markerMoved', function(data){ 
     250                        mapUI.move.apply(mapUI,[data.fromIndex,data.toIndex,data.marker.offset]); 
     251                    }); 
     252                    //bind move marker -> markerdiv move: 
     253                    player.bind('markerRemoved', function(data){ 
     254                        mapUI.remove.apply(mapUI,[data.index]); 
     255                    }); 
     256 
     257                    //bind remove marker -> player remove -> remove marker 
     258                    //(wait for json success) 
     259                    mapUI.bind('remove',function(data){ 
     260                        var marker = data.marker; 
     261                             
     262                        var functionOnSuccess = function(){ 
     263                            player.removeMarker.apply(player,[data.marker]);//map.remove + fires markerMoved on player 
     264                        }; 
     265                        if(marker.isSavedOnServer){ 
     266                            //json(param,method,onSuccessFcn,onErrorFcn){ 
     267                            json([marker.id], "telemeta.del_marker",functionOnSuccess); 
     268                        }else{ 
     269                            functionOnSuccess(); 
     270                        } 
     271 
     272                    }); 
     273                    //bind save marker -> player save 
     274                    var map = player.getMarkerMap(); 
     275                    if(map){ 
     276                        mapUI.bind('save',function(data){ 
     277                            var marker = data.marker; 
     278                            var idx = map.insertionIndex(marker); 
     279                            if(idx<0 || idx>=map.length){ 
     280                                this.debug('marker not found'); 
     281                                return; 
     282                            } 
     283 
     284                            //var itemid = this.getItemId(); //TODO2: NOt anymore used 
     285                            var isSavedOnServer = marker.isSavedOnServer; 
     286                            var method = isSavedOnServer ? "telemeta.update_marker" : "telemeta.add_marker"; 
     287                            var param = { 
     288                                'item_id':itemId, 
     289                                'public_id': marker.id, 
     290                                'time':marker.offset, 
     291                                'author': marker.author, 
     292                                'title':marker.title, 
     293                                'description':marker.desc 
    169294                            }; 
    170                             markerMap.push(marker); 
    171                         //mapAdd.apply(map,[result[i]]); 
     295 
     296                            //function on success: 
     297                            //go back to the marker div to notify tha tis saved 
     298                            var success = function(){ 
     299                                if(!isSavedOnServer){ 
     300                                    marker.isSavedOnServer = true; 
     301                                } 
     302                                mapUI.setEditMode.apply(mapUI,[idx,false]); 
     303                            }; 
     304                            //json(param,method,onSuccessFcn,onErrorFcn){ 
     305                            json([param], method, success); 
     306                        }); 
     307                    } 
     308                    //bind focus marker - > player focus 
     309                    mapUI.bind('focus', function(data){ 
     310                        if(data && 'index' in data){ 
     311                            if(data.index>=0 && data.index<map.length){ 
     312                                var offset = map.toArray()[data.index].offset; 
     313                                player.setSoundPosition(offset); 
     314                            } 
    172315                        } 
    173                     //add markers to ruler and div 
    174                     //                map.each(function(i,marker){ 
    175                     //                    rulerAdd.apply(ruler,[marker, i]); 
    176                     //                    mapuiAdd.apply(mapUI,[marker, i]); 
    177                     //                }); 
    178  
    179                     //tabIndex = result.length>0 ? 1 : 0; 
    180                     } 
    181  
    182                     //defining the marker callback: 
    183                  
    184                     var markerMode = currentUserName || false; 
    185                     if(markerMode){ 
    186                         //markerMode becomes a function: 
    187                         markerMode = function(offset){ 
    188                             var m = { 
    189                                 //id: uinqid_(), //will be set in markermap 
    190                                 offset: pFloat(offset), 
    191                                 desc: "", 
    192                                 title: "", 
    193                                 author: currentUserName, 
    194                                 isEditable: true, 
    195                                 canBeAddedToPlaylist: true, 
    196                                 isSavedOnServer: false 
    197                             }; 
    198                             return m; 
    199                         }; 
    200                     } 
    201                     msgElm.html('Loading player...'); 
    202                     var visualizersSelectElement = $J('<select/>'); 
    203                     for(var name in visualizers){ 
    204                         $J('<option/>').html(name).appendTo(visualizersSelectElement); 
    205                     } 
    206  
    207                     //creating the visualizer <select/> tag 
    208                     var imageSrcFcn = function(width,height){ 
    209                         var player_image_url = visualizers[""+visualizersSelectElement.val()]; 
    210                         var _src_ = null; 
    211                         if (player_image_url && (width || height)) { 
    212                             _src_ = player_image_url.replace('WIDTH', width + '').replace('HEIGHT', height + ''); 
     316                    }); 
     317                    //last things: 
     318                    //populate the analyzers table 
     319                    $J('#analyzer_div_id').find('table').find('tbody:last').append(analyzerContentArray.join("")); 
     320 
     321                    //setting up the select tag 
     322                    //assigning event on select: 
     323                    visualizersSelectElement.change( 
     324                        function (){ 
     325                            player.refreshImage.apply(player); 
     326                        }); 
     327                    var control = player.getContainer().find('.ts-control'); 
     328                    var ch = control.height(); 
     329                    var margin = 3; 
     330                    visualizersSelectElement.css({ 
     331                        'display':'inline-block', 
     332                        'height':(ch-2*margin)+'px', 
     333                        'position':'absolute', 
     334                        'top':margin+'px', 
     335                        'right':margin, 
     336                        'margin':0 
     337                    }); 
     338                    player.bind('waiting', function(data){ 
     339                        if(data.value){ //is waiting 
     340                            visualizersSelectElement.hide(); 
     341                            return; 
    213342                        } 
    214                         return _src_; 
    215                     }; 
    216  
    217  
    218                     //function(container, soundUrl, durationInMsec, visualizers, markerMap, showAddMarkerButton, onError,onReady ){ 
    219                     Timeside.load(playerDiv,soundUrl,timeInMSecs,imageSrcFcn,markerMap,markerMode, function(msg){ 
    220                         end(msg); 
    221                     }, 
    222                     function(player){ 
    223                         msgElm.html('Setting up player...'); 
    224                         var mapUI = new Timeside.classes.MarkerMapDiv(markersUI); 
    225                         player.getMarkerMap().each(function(i,marker){ 
    226                             mapUI.add(marker,i,false); 
    227                         }); 
    228                         Timeside.markerMapDiv = mapUI; 
    229                         //bind add marker -> markerdiv add: 
    230                         player.bind('markerAdded', function(data){ 
    231                             //select the marker tab: 
    232                             var tab = $J('#tab_markers'); 
    233                             if(tab && tab.length){ 
    234                                 tab.trigger('click'); 
    235                             } 
    236                             mapUI.add.apply(mapUI,[data.marker, data.index, true]); 
    237                         }); 
    238                         //bind move marker -> markerdiv move: 
    239                         player.bind('markerMoved', function(data){ 
    240                             mapUI.move.apply(mapUI,[data.fromIndex,data.toIndex,data.marker.offset]); 
    241                         }); 
    242                         //bind move marker -> markerdiv move: 
    243                         player.bind('markerRemoved', function(data){ 
    244                             mapUI.remove.apply(mapUI,[data.index]); 
    245                         }); 
    246  
    247                         //bind remove marker -> player remove -> remove marker 
    248                         //(wait for json success) 
    249                         mapUI.bind('remove',function(data){ 
    250                             var marker = data.marker; 
    251                              
    252                             var functionOnSuccess = function(){ 
    253                                 player.removeMarker.apply(player,[data.marker]);//map.remove + fires markerMoved on player 
    254                             }; 
    255                             if(marker.isSavedOnServer){ 
    256                                 //json(param,method,onSuccessFcn,onErrorFcn){ 
    257                                 json([marker.id], "telemeta.del_marker",functionOnSuccess); 
    258                             }else{ 
    259                                 functionOnSuccess(); 
    260                             } 
    261  
    262                         }); 
    263                         //bind save marker -> player save 
    264                         var map = player.getMarkerMap(); 
    265                         if(map){ 
    266                             mapUI.bind('save',function(data){ 
    267                                 var marker = data.marker; 
    268                                 var idx = map.insertionIndex(marker); 
    269                                 if(idx<0 || idx>=map.length){ 
    270                                     this.debug('marker not found'); 
    271                                     return; 
    272                                 } 
    273  
    274                                 //var itemid = this.getItemId(); //TODO2: NOt anymore used 
    275                                 var isSavedOnServer = marker.isSavedOnServer; 
    276                                 var method = isSavedOnServer ? "telemeta.update_marker" : "telemeta.add_marker"; 
    277                                 var param = { 
    278                                     'item_id':itemId, 
    279                                     'public_id': marker.id, 
    280                                     'time':marker.offset, 
    281                                     'author': marker.author, 
    282                                     'title':marker.title, 
    283                                     'description':marker.desc 
    284                                 }; 
    285  
    286                                 //function on success: 
    287                                 //go back to the marker div to notify tha tis saved 
    288                                 var success = function(){ 
    289                                     if(!isSavedOnServer){ 
    290                                         marker.isSavedOnServer = true; 
    291                                     } 
    292                                     mapUI.setEditMode.apply(mapUI,[idx,false]); 
    293                                 }; 
    294                                 //json(param,method,onSuccessFcn,onErrorFcn){ 
    295                                 json([param], method, success); 
    296                             }); 
    297                         } 
    298                         //bind focus marker - > player focus 
    299                         mapUI.bind('focus', function(data){ 
    300                             if(data && 'index' in data){ 
    301                                 if(data.index>=0 && data.index<map.length){ 
    302                                     var offset = map.toArray()[data.index].offset; 
    303                                     player.setSoundPosition(offset); 
    304                                 } 
    305                             } 
    306                         }); 
    307                         //last thing: setting up the select tag 
    308                         //assigning event on select: 
    309                         visualizersSelectElement.change( 
    310                             function (){ 
    311                                 player.refreshImage.apply(player); 
    312                             }); 
    313                         var control = player.getContainer().find('.ts-control'); 
    314                         var ch = control.height(); 
    315                         var margin = 3; 
    316                         visualizersSelectElement.css({ 
    317                             'display':'inline-block', 
    318                             'height':(ch-2*margin)+'px', 
    319                             'position':'absolute', 
    320                             'top':margin+'px', 
    321                             'right':margin, 
    322                             'margin':0 
    323                         }); 
    324                         player.bind('waiting', function(data){ 
    325                             if(data.value){ //is waiting 
    326                                 visualizersSelectElement.hide(); 
    327                                 return; 
    328                             } 
    329                             visualizersSelectElement.css('display','inline-block'); 
    330                         }); 
    331                         control.append(visualizersSelectElement); 
    332                         //Eventually, do 3 last things: 
    333                         //1) call end (without arguments simply clears the wait span and avoid subsequent calls to end(msg) to 
    334                         //display error messages) 
    335                         end(); 
    336                         //set a warning leaving the page with unsaved markers: 
    337                         if(map){ 
    338                             var confirmExit = function(){ 
    339                                 var markerUnsaved=0; 
    340                                 map.each(function(i,marker){ 
    341                                     if(!marker.isSavedOnServer){ 
    342                                         markerUnsaved++; 
    343                                     } 
    344                                 }); 
    345                                 if(markerUnsaved>0){ 
    346                                     return gettrans('there is at least one unsaved marker') +' ('+ markerUnsaved+ '). '+ 
    347                                     gettrans('If you exit the page you will loose your changes'); 
    348                                 } 
    349  
    350                             }; 
    351                             wdw.onbeforeunload = confirmExit; 
    352                         } 
    353                         if(map && window.PopupDiv){ 
    354                             var popupdiv = new PopupDiv({ 
    355                                 focusable: false, 
    356                                 titleClass: 'markersdivTitle', 
    357                                 showClose:false, 
    358                                 bounds: { 
    359                                     top:0.4, 
    360                                     left:0.1, 
    361                                     right:0.1, 
    362                                     bottom:0 
    363                                 }, 
    364                                 invoker: player.getContainer().find('.ts-wave'), 
    365                                 defaultCloseOperation: 'hide' 
    366                             }); 
    367                             player.bind('markerCrossed',function(data){ 
    368                                 popupdiv.refresh(data.marker.desc,data.marker.title); 
    369                                 var index = data.index; 
    370                                 if(index+1 == map.length || map.toArray()[index+1].offset-data.marker.offset>3){ 
    371                                     popupdiv.closeLater(3000); 
    372                                 } 
    373                                 //consolelog('firing markercrossed'); 
    374                                 //consolelog(data.marker.title); 
    375                                 if(!popupdiv.isShowing()){ 
    376                                     popupdiv.show(); 
     343                        visualizersSelectElement.css('display','inline-block'); 
     344                    }); 
     345                    control.append(visualizersSelectElement); 
     346                    //Eventually, do 3 last things: 
     347                    //1) call end (without arguments simply clears the wait span and avoid subsequent calls to end(msg) to 
     348                    //display error messages) 
     349                    end(); 
     350                    //set a warning leaving the page with unsaved markers: 
     351                    if(map){ 
     352                        var confirmExit = function(){ 
     353                            var markerUnsaved=0; 
     354                            map.each(function(i,marker){ 
     355                                if(!marker.isSavedOnServer){ 
     356                                    markerUnsaved++; 
    377357                                } 
    378358                            }); 
     359                            if(markerUnsaved>0){ 
     360                                return gettrans('there is at least one unsaved marker') +' ('+ markerUnsaved+ '). '+ 
     361                                gettrans('If you exit the page you will loose your changes'); 
     362                            } 
     363 
     364                        }; 
     365                        wdw.onbeforeunload = confirmExit; 
     366                    } 
     367                    if(map && wdw.PopupDiv){ 
     368                        var popupdiv = new PopupDiv({ 
     369                            focusable: false, 
     370                            titleClass: 'markersdivTitle', 
     371                            showClose:false, 
     372                            bounds: { 
     373                                top:0.4, 
     374                                left:0.1, 
     375                                right:0.1, 
     376                                bottom:0 
     377                            }, 
     378                            invoker: player.getContainer().find('.ts-wave'), 
     379                            defaultCloseOperation: 'hide' 
     380                        }); 
     381                        var closeTimeout = undefined; 
     382                        var ci = clearTimeout; 
     383                        player.bind('markerCrossed',function(data){ 
     384                            if(closeTimeout !== undefined){ 
     385                                cl(closeTimeout); 
     386                            } 
     387                            closeTimeout=undefined; 
     388                            popupdiv.refresh(data.marker.desc,data.marker.title); 
     389                            if(!popupdiv.isShowing()){ 
     390                                popupdiv.show(); 
     391                            } 
     392                            var index = data.index; 
     393                            if(index+1 == map.length || map.toArray()[index+1].offset-data.marker.offset>3){ 
     394                                closeTimeout = popupdiv.setTimeout('close',3000); 
     395                            } 
     396                            //consolelog('firing markercrossed'); 
     397                            //consolelog(data.marker.title); 
     398                             
     399                        }); 
     400                    } 
     401 
     402                    //set up the marker tab 
     403                    var tabIndex = map.length ? 1 : 0; 
     404                    setUpPlayerTabs($J('#tab_analysis').add($J('#tab_markers')), 
     405                        [$J('#analyzer_div_id'), $J('#markers_div_id')], tabIndex, 
     406                        'tab_selected','tab_unselected'); 
     407                    //2)  and selects the current marker if it is present on the url 
     408                    var url = wdw.location.href+""; 
     409                    var lastPart = url.replace(/\/+$/,"").replace(/^.*\/([^\/]*)$/,"$1"); 
     410                    var selOffs = -1; 
     411                    map.each(function(i,marker){ 
     412                        if(marker.id == lastPart){ 
     413                            selOffs = marker.offset; 
    379414                        } 
    380  
    381                         //set up the marker tab 
    382                         var tabIndex = map.length ? 1 : 0; 
    383                         setUpPlayerTabs($J('#tab_analysis').add($J('#tab_markers')), 
    384                             [$J('#analyzer_div_id'), $J('#markers_div_id')], tabIndex, 
    385                             'tab_selected','tab_unselected'); 
    386                         //2)  and selects the current marker if it is present on the url 
    387                         var url = wdw.location.href+""; 
    388                         var lastPart = url.replace(/\/+$/,"").replace(/^.*\/([^\/]*)$/,"$1"); 
    389                         var selOffs = -1; 
    390                         map.each(function(i,marker){ 
    391                             if(marker.id == lastPart){ 
    392                                 selOffs = marker.offset; 
    393                             } 
    394                         }); 
    395                         if(selOffs >= 0){ 
    396                             player.setSoundPosition(selOffs); 
    397                         } 
    398                         //3) assing a binding to the player maximization button: 
    399                         $J('#player_maximized .toggle, #player_minimized .toggle').click(function() { 
    400                             togglePlayerMaximization(); 
    401                             return false; 
    402                         }); 
    403                     } 
    404                     ); 
     415                    }); 
     416                    if(selOffs >= 0){ 
     417                        player.setSoundPosition(selOffs); 
     418                    } 
     419                    //3) assing a binding to the player maximization button: 
     420                    $J('#player_maximized .toggle, #player_minimized .toggle').click(function() { 
     421                        togglePlayerMaximization(); 
     422                        return false; 
     423                    }); 
    405424                } 
    406                 json([itemId],"telemeta.get_markers", callbackAfterMarkersLoading,callbackAfterMarkersLoading); 
    407             //function(container, soundUrl, durationInMsec, visualizers, markerMap, showAddMarkerButton, onError, onReady){ 
    408             //Timeside.load(playerDiv,soundUrl,,timeInMSecs,visualizers,markerMap,) 
    409             //load_player(soundUrl, timeInMSecs, itemId, visualizers, currentUserName); 
    410             }, 
    411             error:function(){ 
    412                 end('Error loading analyzer'); 
     425                ); 
    413426            } 
    414         }); 
     427                 
     428            //execute all the stuff once the document is ready: 
     429            var onSuccess = function(data){ 
     430                $J(wdw).ready(function(){ 
     431                    callbackAfterMarkersLoading(data); 
     432                }); 
     433            } 
     434            //and niow call json method to load markers (load player also onError, no markers will be loaded) 
     435            json([itemId],"telemeta.get_markers", onSuccess,onSuccess); 
     436        //function(container, soundUrl, durationInMsec, visualizers, markerMap, showAddMarkerButton, onError, onReady){ 
     437        //Timeside.load(playerDiv,soundUrl,,timeInMSecs,visualizers,markerMap,) 
     438        //load_player(soundUrl, timeInMSecs, itemId, visualizers, currentUserName); 
     439        } 
    415440    }); 
     441    
    416442} 
    417443 

  • telemeta/htdocs/js/popupdiv.js

    ra35b642 r97dbca2  
    613613        //closeButton.outerWidth should be zero if this.showClose = false 
    614614        //titleInput.outerWidth(true) should be equal to titleInput.width(), as margins borders and padding are zero, however we want to calculate it safely 
    615 //        if(this.showClose || this.title){ 
    616 //            var topDiv = this.getDiv().children().eq(0); 
    617 //            var closeBtn = topDiv.find('a').eq(0); 
    618 //            var titleInput = topDiv.find(':text').eq(0); 
    619 //            var titleW = topDiv.width() - closeBtn.outerWidth(true) - (titleInput.outerWidth(true)-titleInput.width()); 
    620 //            titleInput.css({ 
    621 //                'maxWidth':'', 
    622 //                'width':(titleW)+'px' 
    623 //            }); 
    624 //        } 
     615        //        if(this.showClose || this.title){ 
     616        //            var topDiv = this.getDiv().children().eq(0); 
     617        //            var closeBtn = topDiv.find('a').eq(0); 
     618        //            var titleInput = topDiv.find(':text').eq(0); 
     619        //            var titleW = topDiv.width() - closeBtn.outerWidth(true) - (titleInput.outerWidth(true)-titleInput.width()); 
     620        //            titleInput.css({ 
     621        //                'maxWidth':'', 
     622        //                'width':(titleW)+'px' 
     623        //            }); 
     624        //        } 
    625625 
    626626        this.shadow(); //updates shadow 
    … …  
    645645        } 
    646646 
    647 //        var titleIpt = subdiv.find(':text').hide(); 
    648 //        var titleSpan = subdiv.find('span').css({'display':'inline-block','float':'left'}); 
    649 //        if(title){ 
    650 //            titleSpan.html(title); 
    651 //        }else{ 
    652 //            titleSpan.hide(); 
    653 //        } 
    654 //        var titleSpanWidth = titleSpan.html(title).width(); 
    655 //        titleIpt.val(title).css('width',titleSpanWidth+'px'); 
    656 //        titleSpan.html('').css('display','none'); 
     647    //        var titleIpt = subdiv.find(':text').hide(); 
     648    //        var titleSpan = subdiv.find('span').css({'display':'inline-block','float':'left'}); 
     649    //        if(title){ 
     650    //            titleSpan.html(title); 
     651    //        }else{ 
     652    //            titleSpan.hide(); 
     653    //        } 
     654    //        var titleSpanWidth = titleSpan.html(title).width(); 
     655    //        titleIpt.val(title).css('width',titleSpanWidth+'px'); 
     656    //        titleSpan.html('').css('display','none'); 
    657657    } 
    658658 
    … …  
    715715            if(this.showClose){ 
    716716                closeBtn.css('marginLeft','0.5em').attr('class',this.closeButtonClass).html(this.closeButtonTitle).css({ 
    717                     'display':'inline-block','float':'right' 
     717                    'display':'inline-block', 
     718                    'float':'right' 
    718719                //warning: do NOT use real numbers such as 0.5ex cause browsers round it in a different manner 
    719720                //inline-block in order to retrieve/set width and height on the element 
    … …  
    723724            } 
    724725            //in any case, show titleElement cause even if title="", titleElement is used to position close on the right 
    725 //            titleInput.css({ 
    726 //                'backgroundColor':'transparent', 
    727 //                'padding': '0px', 
    728 //                'margin':'0px', 
    729 //                'border':'0px' 
    730 //            }).attr('readonly','readonly').attr('class',this.titleClass).css({ 
    731 //                'display':'inline-block','float':'left' 
    732 //            //it is too tricky to set the width of the input spanning the whole title (in case of long titles) 
    733 //            //we experienced problems in vertical align with the close button, as stated somewhere above. 
    734 //            //we will use a span (see setTitle below) 
    735 //            }); 
     726            //            titleInput.css({ 
     727            //                'backgroundColor':'transparent', 
     728            //                'padding': '0px', 
     729            //                'margin':'0px', 
     730            //                'border':'0px' 
     731            //            }).attr('readonly','readonly').attr('class',this.titleClass).css({ 
     732            //                'display':'inline-block','float':'left' 
     733            //            //it is too tricky to set the width of the input spanning the whole title (in case of long titles) 
     734            //            //we experienced problems in vertical align with the close button, as stated somewhere above. 
     735            //            //we will use a span (see setTitle below) 
     736            //            }); 
    736737            this.setTitle(this.title); 
    737738        } 
    … …  
    756757        } 
    757758 
    758 //        var centralDiv = $(subdiv[1]); 
    759 //        //reset properties of the central div 
    760 //        centralDiv.css({ 
    761 //            'overflow':'auto', 
    762 //            'maxHeight':'', 
    763 //            'maxWidth':'', 
    764 //            'minHeight':'', 
    765 //            'minWidth':'', 
    766 //            'height':'', 
    767 //            'width':'', 
    768 //            'visibility':'visible' 
    769 //        }).show(); 
     759        //        var centralDiv = $(subdiv[1]); 
     760        //        //reset properties of the central div 
     761        //        centralDiv.css({ 
     762        //            'overflow':'auto', 
     763        //            'maxHeight':'', 
     764        //            'maxWidth':'', 
     765        //            'minHeight':'', 
     766        //            'minWidth':'', 
     767        //            'height':'', 
     768        //            'width':'', 
     769        //            'visibility':'visible' 
     770        //        }).show(); 
    770771 
    771772 
    … …  
    807808        } 
    808809 
    809 //        //set title and close button to span whole width, if necessary 
    810 //        //closeButton.outerWidth should be zero if this.showClose = false 
    811 //        //titleInput.outerWidth(true) should be equal to titleInput.width(), as margins borders and padding are zero, however we want to calculate it safely 
    812 //        if(this.showClose || this.title){ 
    813 //            var titleW = topDiv.width() - closeBtn.outerWidth(true) - (titleInput.outerWidth(true)-titleInput.width()); 
    814 //            titleInput.css({ 
    815 //                'maxWidth':'', 
    816 //                'width':(titleW)+'px' 
    817 //            }); 
    818 //        } 
    819 // 
    820 //        //set central div max height ONLY IF NECESSARY (overflow). Until here, the main popup is sized and placed 
    821 //        //but the central div might overflow 
    822 //        var height = centralDiv.height(); 
    823 //        var maxHeight = (div.height()-topDiv.outerHeight(true)-bottomDiv.outerHeight(true)- 
    824 //            (centralDiv.outerHeight(true)-centralDiv.height())); 
    825 //        if(maxHeight<height){ 
    826 //            centralDiv.css('maxHeight',maxHeight+'px'); 
    827 //        } 
    828 //        //same for width: 
    829 //        var maxWidth = div.width(); 
    830 //        var width = centralDiv.outerWidth(true); 
    831 //        if(maxWidth<width){ 
    832 //            centralDiv.css('maxWidth',maxWidth+'px'); 
    833 //        } 
     810        //        //set title and close button to span whole width, if necessary 
     811        //        //closeButton.outerWidth should be zero if this.showClose = false 
     812        //        //titleInput.outerWidth(true) should be equal to titleInput.width(), as margins borders and padding are zero, however we want to calculate it safely 
     813        //        if(this.showClose || this.title){ 
     814        //            var titleW = topDiv.width() - closeBtn.outerWidth(true) - (titleInput.outerWidth(true)-titleInput.width()); 
     815        //            titleInput.css({ 
     816        //                'maxWidth':'', 
     817        //                'width':(titleW)+'px' 
     818        //            }); 
     819        //        } 
     820        // 
     821        //        //set central div max height ONLY IF NECESSARY (overflow). Until here, the main popup is sized and placed 
     822        //        //but the central div might overflow 
     823        //        var height = centralDiv.height(); 
     824        //        var maxHeight = (div.height()-topDiv.outerHeight(true)-bottomDiv.outerHeight(true)- 
     825        //            (centralDiv.outerHeight(true)-centralDiv.height())); 
     826        //        if(maxHeight<height){ 
     827        //            centralDiv.css('maxHeight',maxHeight+'px'); 
     828        //        } 
     829        //        //same for width: 
     830        //        var maxWidth = div.width(); 
     831        //        var width = centralDiv.outerWidth(true); 
     832        //        if(maxWidth<width){ 
     833        //            centralDiv.css('maxWidth',maxWidth+'px'); 
     834        //        } 
    834835 
    835836        
    … …  
    889890 
    890891        var div = this.getDiv(); 
    891 //        var oldCss= isSizable ?  undefined : this.setSizable(); 
     892        //        var oldCss= isSizable ?  undefined : this.setSizable(); 
    892893 
    893894        var shadowOffset = this.shadowOffset; 
    … …  
    931932        this.postSizeFcn(); 
    932933 
    933 //        if(oldCss){ 
    934 //            div.css({ 
    935 //                'display':oldCss['display'], 
    936 //                'visibility':oldCss['visibility'] 
    937 //            }); 
    938 //        } 
     934    //        if(oldCss){ 
     935    //            div.css({ 
     936    //                'display':oldCss['display'], 
     937    //                'visibility':oldCss['visibility'] 
     938    //            }); 
     939    //        } 
    939940 
    940941    }; 
    … …  
    947948 
    948949        var div = this.getDiv(); 
    949 //        var oldCss = isSizable ?  undefined : this.setSizable(); 
     950        //        var oldCss = isSizable ?  undefined : this.setSizable(); 
    950951         
    951952        this.preSizeFcn(); 
    … …  
    10201021        this.postSizeFcn(); 
    10211022 
    1022 //        if(oldCss){ 
    1023 //            div.css({ 
    1024 //                'display':oldCss['display'], 
    1025 //                'visibility':oldCss['visibility'] 
    1026 //            }); 
    1027 //        } 
     1023    //        if(oldCss){ 
     1024    //            div.css({ 
     1025    //                'display':oldCss['display'], 
     1026    //                'visibility':oldCss['visibility'] 
     1027    //            }); 
     1028    //        } 
    10281029    }; 
    10291030    p.preSizeFcn = function(){ 
    … …  
    10611062        //however, we might have here a width LOWER than the actual div width, so stretch it more if it's lower: 
    10621063         
    1063 //        if(this.showClose || this.title){ 
    1064 //            var closeBtn = topDiv.find('a').eq(0); 
    1065 //            var titleInput = topDiv.find(':text').eq(0); 
    1066 //            var span = topDiv.find('span').eq(0).hide(); 
    1067 //            var titleW = topDiv.width() - closeBtn.outerWidth(true) - (titleInput.outerWidth(true)-titleInput.width()); 
    1068 //            titleInput.html(span.html()).css({ 
    1069 //                'maxWidth':'', 
    1070 //                'width':(titleW)+'px' 
    1071 //            }); 
    1072 //        } 
     1064        //        if(this.showClose || this.title){ 
     1065        //            var closeBtn = topDiv.find('a').eq(0); 
     1066        //            var titleInput = topDiv.find(':text').eq(0); 
     1067        //            var span = topDiv.find('span').eq(0).hide(); 
     1068        //            var titleW = topDiv.width() - closeBtn.outerWidth(true) - (titleInput.outerWidth(true)-titleInput.width()); 
     1069        //            titleInput.html(span.html()).css({ 
     1070        //                'maxWidth':'', 
     1071        //                'width':(titleW)+'px' 
     1072        //            }); 
     1073        //        } 
    10731074 
    10741075        var topBottom = $([]); 
    … …  
    10791080            topBottom = topBottom.add(subdivs.eq(2)); 
    10801081        } 
    1081         topBottom.css({'overflow':'hidden', 'width':'100%'}); //to span the whole width 
     1082        topBottom.css({ 
     1083            'overflow':'hidden', 
     1084            'width':'100%' 
     1085        }); //to span the whole width 
    10821086 
    10831087 
    … …  
    12511255    }; 
    12521256 
    1253     p.closeLater = function(millseconds){ 
     1257    //sets a t=timeout and returns t. eventName can be 'show' or 'close' 
     1258    p.setTimeout = function(eventName, millseconds){ 
    12541259        var me = this; 
    1255         setTimeout(function(){ 
    1256             me.close(); 
    1257         },millseconds); 
     1260        var t=undefined; 
     1261        if(eventName == 'show'){ 
     1262            t=setTimeout(function(){ 
     1263                me.show(); 
     1264            },millseconds); 
     1265        }else if(eventName == 'close'){ 
     1266            t=setTimeout(function(){ 
     1267                me.close(); 
     1268            },millseconds); 
     1269        } 
     1270        return t; 
    12581271    }, 
    12591272 

  • telemeta/htdocs/timeside/js/player.js

    ra35b642 rf10d7f9  
    362362        //"<div class='ts-layout'>", 
    363363        //"<div class='ts-playback'>", 
    364         "<a class='ts-play'></a>", 
    365         "<a class='ts-pause'></a>", 
    366         "<a class='ts-rewind'></a>", 
    367         "<a class='ts-forward'></a>", 
    368         "<a class='ts-set-marker'></a>", 
     364        "<a class='ts-play ts-button'></a>", 
     365        "<a class='ts-pause ts-button'></a>", 
     366        "<a class='ts-rewind ts-button'></a>", 
     367        "<a class='ts-forward ts-button'></a>", 
     368        "<a class='ts-set-marker ts-button'></a>", 
    369369        //        "<a class='ts-volume'></a>", 
    370370 
    371371        //"<div class='ts-volume'>", 
    372         "<a class='ts-volume-speaker'></a>", 
     372        "<a class='ts-volume-speaker ts-button'></a>", 
    373373        "<div class='ts-volume-wrapper-div'>", 
    374374        "<a class='ts-volume-bar-container'>", 

  • telemeta/htdocs/timeside/js/ruler.js

    ra35b642 rf10d7f9  
    133133 
    134134    drawRuler: function(rulerContainer,h,rulerLinesPath){ 
     135        var cssPref = this.cssPrefix; 
     136        var upperRectClass = cssPref + 'svg-' + 'ruler-upper-rect'; 
     137        var rulerLinesClass = cssPref + 'svg-' + 'ruler-lines'; 
     138 
    135139        if(!this.isSvgSupported){ 
    136140            var paper = Raphael(rulerContainer[0], rulerContainer.width(), h); 
    … …  
    138142            var path = paper.path(rulerLinesPath); 
    139143            var attr = this.getVmlAttr; 
    140             rect.attr(attr('ts-ruler-upper-rect')); 
    141             path.attr(attr('ts-ruler-lines')); 
     144            rect.attr(attr(upperRectClass)); 
     145            path.attr(attr(rulerLinesClass)); 
    142146            return; 
    143147        } 
    … …  
    158162        rect.setAttributeNS( null, "width", rulerContainer.width()); 
    159163        rect.setAttributeNS( null, "height", (h/2)); 
    160         rect.setAttributeNS( null, "class", 'ts-ruler-upper-rect'); 
     164        rect.setAttributeNS( null, "class", upperRectClass); 
    161165        svg.appendChild(rect); 
    162166        var lines = d.createElementNS(svgNS, "svg:path"); 
    163167        lines.setAttributeNS( null, "d", rulerLinesPath); 
    164         lines.setAttributeNS( null, "class", 'ts-ruler-lines'); 
     168        lines.setAttributeNS( null, "class", rulerLinesClass); 
    165169        svg.appendChild(lines); 
    166170    }, 

  • telemeta/htdocs/timeside/js/rulermarker.js

    r9d5dd4e rf10d7f9  
    9292 
    9393        var canvas = undefined; 
    94         var canvasClass = cssPref + className+'-canvas'; 
     94        var canvasClass = cssPref + 'svg-'+className+'-line'; 
    9595        if(this.isSvgSupported){ 
    9696            canvas = this.createCanvasSvg(waveImgDiv, arrowBaselineWidth); 

  • telemeta/htdocs/timeside/js/timeside.js

    ra35b642 rf10d7f9  
    198198        this.listenersMap={}; 
    199199    }, 
     200     
     201    cssPrefix : 'ts-', //actually almost uneuseful, still here for backward compatibility with old code (TODO: remove?) 
     202    $J : jQuery, 
     203    debugging : false, 
     204    debug : function(message) { 
     205        if (this.debugging && typeof console != 'undefined' && console.log) { 
     206            console.log(message); 
     207        } 
     208    }, 
    200209 
    201210    /** 
    … …  
    339348    }, 
    340349 
    341     cssPrefix : 'ts-', //actually almost uneuseful, still here for backward compatibility with old code (TODO: remove?) 
    342     $J : jQuery, 
    343     debugging : false, 
    344     debug : function(message) { 
    345         if (this.debugging && typeof console != 'undefined' && console.log) { 
    346             console.log(message); 
    347         } 
    348     }, 
    349  
     350     
    350351    //vml (+css specific functions): Used in ruler.js and RulerMarker.js: 
    351352 

  • telemeta/htdocs/timeside/skins/lab/style.css

    r1a2c12a rf10d7f9  
     1/* 
     2* Style for the timeside player. The skeleton of the player must be embedded inside a div of class C (in this case 
     3* C = 'ts-skin-lab') and reads: 
     4* 
     5* <div class='ts-viewer'> 
     6*     <div class='ts-ruler'></div>               >>RULER CONTAINER 
     7*     <div class='ts-wave'>                      >>PLAYER BODY CONTAINER which includes: 
     8*         <div class='ts-image-canvas'></div>        >>MARKER LINES CONTAINER 
     9*         <div class='ts-image-container'>           >>WAVE IMAGE CONTAINER 
     10*             <img class='ts-image'/> 
     11*         </div> 
     12*     </div> 
     13*  </div> 
     14*  <div class='ts-control'>",                    >>CONTROLS (BUTTONS) CONTAINER 
     15*      <a class='ts-play ts-button'></a> 
     16*      <a class='ts-pause ts-button'></a> 
     17*      <a class='ts-rewind ts-button'></a> 
     18*      <a class='ts-forward ts-button'></a> 
     19*      <a class='ts-set-marker ts-button'></a> 
     20*      <a class='ts-volume-speaker ts-button'></a> 
     21*      <div class='ts-volume-wrapper-div'> 
     22*          <a class='ts-volume-bar-container'> 
     23*              <span class='ts-volume-bar'></span> 
     24*          </a> 
     25*      </div> 
     26*      <div class='ts-wait'></div> 
     27*  </div> 
     28* 
     29* IMPORTANT NOTES: ====================================================== 
     30* 1) Css rules here should deal only with player APPEARENCE, not player LAYOUT and POSITIONING. For instance, some styles properties, 
     31*    namely position and overflow of divs, are unnecessary here, as they will be overridden by javascript code, 
     32*    because otherwise they might break the player layout. 
     33* 2) .ts-marker and .ts-pointer fontSize should be changed according to .ts-ruler fontSize. In general, change the latter without 
     34*    specifying a font for the formers, which will inherit it. The player internally calculates a default ruler height before housing 
     35*    pointer and markers in order to paint its ruler lines. If font sizes of ruler vs. pointer and markers are different, the latters 
     36*    might overlap vertically. On the other hand, if pointers and markers have strong borders/padding, 
     37*    playing around with different font size  and line heights might be the solution to avoid vartical overlap 
     38* 3) canvas classes (classes beginning with '.ts-svg-') have specific svg-css syntax (have a look) 
     39*    Svg is not supported in IE7-8, as usual, and apparently even 9 (it should be, it is not according to Raphael function detecting svg support), 
     40*    In this cases, raphael library will care about building VML canvas, and a parser inside the player will read class rules and send them to raphael library 
     41*    in the form of a map suitable for the 'attr' function in Raphael. Note that: 
     42*       a) Many but not all css properties are supported for conversion. 
     43*       b) The parser READS ONLY STAND ALONE RULES, SO BE CAREFUL: If we want,eg, define css for '.ts-svg-marker-line', write something 
     44*          like: 
     45*            .aClass .ts-marker-canvas'{...} 
     46*          will not be rendered 
     47*/ 
     48 
    149.ts-skin-lab .ts-player { 
     50    padding: 0; 
     51    /*clear: both; 
     52    background: white;*/ 
     53    /*padding-top: 10px; 
     54  padding-bottom: 10px;*/ 
     55    border: solid 1px #ADADAD; 
     56    margin-top: 2px; 
     57} 
     58 
     59.ts-skin-lab .ts-player .ts-viewer { 
     60    margin: 0; 
     61    border: 0; 
     62} 
     63 
     64 
     65 
     66.ts-skin-lab .ts-player .ts-ruler{ 
     67    color: white; 
     68    background-color: #2E2E2E; 
     69    font-size: 10px; 
     70    line-height: 13px; 
     71} 
     72 
     73.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-upper-rect{ 
     74    fill:  #595959; 
     75    stroke-width:0; 
     76    stroke: #595959; /*to be sure...*/ 
     77} 
     78.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-lines{ 
     79    stroke-width:1; 
     80    stroke:#ADADAD; 
     81} 
     82 
     83/*wave:*/ 
     84.ts-skin-lab .ts-player .ts-wave { 
     85    height: 130px; 
     86} 
     87.ts-skin-lab .ts-player .ts-wave .ts-image { 
     88    width: 360px; 
     89    height: 130px; 
     90    background: transparent; 
     91} 
     92 
     93/*.ts-skin-lab .ts-player { 
    294  background: #3c4251; 
    3   padding-top: 10px; 
    4   padding-bottom: 10px; 
     95   
    596  border: solid #b2b2b2 1px; 
    697} 
    … …  
    9100  margin: 0 12px 10px 12px; 
    10101  border: solid 1px white; 
    11 } 
     102}*/ 
    12103 
    13104.ts-skin-lab .ts-player .ts-viewer .ts-marker { 
    14     color: white; 
    15     background: #7290bc; 
    16 } 
    17  
    18 .ts-skin-lab .ts-player .ts-viewer a.ts-marker, .ts-skin-lab .ts-player .ts-viewer a.ts-pointer { 
     105     padding: 0 0.5em; 
     106    background: #e65911; 
     107    color: #FFF; 
    19108    text-decoration: none; 
    20 } 
    21  
    22 .ts-skin-lab .ts-player .ts-viewer { /*.ts-pointer {*/ 
    23     color: #3c4251; 
    24     background: #e7e7e7; 
    25 } 
    26 .ts-pointer{ 
    27     border: 1px solid #a10006 !important; 
    28      -moz-border-radius: 1ex !important; 
    29     -webkit-border-radius: 1ex  !important; 
    30     border-radius: 1ex !important; 
    31     color: #6A0307 !important; 
    32  
    33 } 
    34 .ts-skin-lab .ts-player .ts-ruler .ts-section .ts-label { 
    35     color: #c3c2cc; 
    36     background: #2a3242; 
    37     padding-bottom: 1px; 
    38     padding-left: 2px; 
    39     line-height: 13px; 
    40 } 
    41  
    42 .ts-skin-lab .ts-player .ts-ruler .ts-section .ts-lines { 
    43     background: #384051; 
    44     color: #9498a1; 
    45     border-bottom: solid 1px white; 
    46     line-height: 13px; 
     109    /*color: white; 
     110    background: #7290bc;*/ 
     111} 
     112 
     113.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line { 
     114    fill: #e65911; 
     115    stroke-width:0; 
     116} 
     117 
     118.ts-skin-lab .ts-player .ts-viewer a.ts-pointer { 
     119    color: #BB0000; 
     120    background-color: white; 
     121    padding: 0 0.5em; 
     122    border: solid 1px #BB0000; 
     123 
     124    text-decoration: none; 
     125    /*background-color: #e7e7e7; 
     126    border: 1px solid #3c4251; #a10006 !important;*/ 
     127     -moz-border-radius: .3em !important; 
     128    -webkit-border-radius: .3em  !important; 
     129    border-radius: .3em !important; 
     130    /*color: #3c4251; #6A0307 !important;*/ 
     131} 
     132 
     133.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line { 
     134    fill: #BB0000; 
     135    stroke-width:0; 
    47136} 
    48137 
    … …  
    53142.ts-skin-lab .ts-player .ts-control { 
    54143    background: url('img/controlbg.png'); 
    55 /*    height: 28px; 
    56      border-top: dotted #b2b2b2 1px; */ 
    57 } 
    58  
    59 /*.ts-skin-lab .ts-player .ts-control .ts-layout { 
    60     margin-left: 12px; 
    61     margin-right: 12px; 
    62     padding-top: 0px; 
    63  
    64 .ts-skin-lab .ts-player .ts-control .ts-playback a { 
    65     display: block; 
    66     float: left; 
    67     width: 30px; 
    68     padding: 28px 0 0 0; 
    69     overflow: hidden; 
    70     height: 0px !important;  
    71     margin-right: 0px; 
    72 } 
    73 .ts-skin-lab .ts-player .ts-control .ts-playback a:hover { 
    74     background-position: 0 -28px; 
    75 } 
    76  
    77 .ts-volume, .ts-volume:hover, .ts-volume:visited { 
    78     background-image: url('img/volume.png'); 
    79     background-repeat: no-repeat; 
    80     width:60px !important; 
    81 } 
    82  
    83 .ts-skin-lab .ts-player .ts-control .ts-playback .ts-play { 
    84     background-image: url('img/play.png'); 
    85 } 
    86  
    87 .ts-skin-lab .ts-player .ts-control .ts-playback .ts-pause { 
    88     background-image: url('img/pause.png'); 
    89 } 
    90  
    91 .ts-skin-lab .ts-player .ts-control .ts-playback .ts-rewind { 
    92     background-image: url('img/rewind.png'); 
    93 } 
    94  
    95 .ts-skin-lab .ts-player .ts-control .ts-playback .ts-forward { 
    96     background-image: url('img/forward.png'); 
    97 } 
    98  
    99 .ts-skin-lab .ts-player .ts-control .ts-playback .ts-set-marker { 
    100     background-image: url('img/setmarker.png'); 
    101 } 
    102  
    103 .ts-skin-lab .ts-player .ts-marker-control .ts-set-marker { 
    104     display: block; 
    105     width: 89px; 
    106     padding: 28px 0 0 0; 
    107     overflow: hidden; 
    108     height: 0px !important; 
    109     background-image: url('img/setmarker.gif'); 
    110     margin: 5px auto 0 auto; 
    111 } 
    112  
    113 .ts-skin-lab .ts-player .ts-marker-control .ts-set-marker:hover { 
    114     background-position: 0 -21px; 
    115 } 
    116  
    117 .ts-skin-lab .ts-player .ts-marker-control { 
    118     border-top: dotted #b2b2b2 1px; 
    119     border-bottom: dotted #b2b2b2 1px; 
    120     height: 30px; 
    121 } 
    122  */ 
     144} 
    123145 
    124146 /** display (inline-block) and overflow of a is set inside javascript*/ 
    125 .ts-skin-lab .ts-player .ts-control a { 
     147.ts-skin-lab .ts-player .ts-control .ts-button { 
    126148    background-repeat: no-repeat; 
    127149    height:28px; 
    … …  
    148170} 
    149171 
    150 /*.ts-skin-lab .ts-player .ts-control .ts-volume { 
    151     background-image: url('img/volume.png'); 
    152     width:90px !important; 
    153 }*/ 
    154 /*.ts-skin-lab .ts-player .ts-control .ts-volume-speaker { 
    155     background-image: url('img/volumeon.png'); 
    156 }*/ 
    157172.ts-skin-lab .ts-player .ts-control .ts-volume-speaker-on { 
    158173    background-image: url('img/volumeon.png'); 
    … …  
    168183    background-repeat: repeat-x; 
    169184    height:10px; 
    170     width:56px; 
     185    width:42px; 
    171186    margin-top:9px; 
    172187     -moz-border-radius: 5px; 
    … …  
    197212    font-size: 80%; 
    198213    color:white; 
    199  
    200 } 
    201  
     214} 
     215 
     216 
     217/*.ts-skin-lab .ts-player .ts-ruler{ 
     218    color: #c3c2cc; 
     219    background-color: #2a3242; 
     220}*/ 
     221 
     222/*canvas (svg). If svg is not supported, a parser in the palyer 
     223converts these values (nb: not all are supported) to specigic vml attributes. In this case, however, ONLY CLASSES WRITTEN 
     224ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED)*/ 
     225 
     226/*ruler canvas (svg)"*/ 
     227/*.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-upper-rect{ 
     228     fill:  #2a3242; 
     229    stroke-width:0; 
     230    stroke: #c3c2cc; to be sure... 
     231}*/ 
     232/*.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-lines{ 
     233    stroke-width:1; 
     234    stroke:#9498a1; 
     235}*/ 
     236/*class for the canvas (svg) associated to a marker. 
     237.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line { 
     238    fill: #a10006; 
     239    stroke-width:0; 
     240} */ 
     241 
     242/*class for the canvas (svg) associated to a marker.*/ 
     243/*.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line { 
     244    fill: #7290bc; 
     245    stroke-width:0; 
     246}*/ 

  • telemeta/templates/telemeta_default/mediaitem_detail.html

    r9d5dd4e r97dbca2  
    6262    "{% url telemeta-item-export item.public_id,"mp3" %}", '{{item.id}}', visualizers, CURRENT_USER_NAME, superuser); 
    6363 
    64     var g = 9; 
    6564</script> 
    6665{% endif %} 

  • telemeta/models/media.py

    r29e319b rdf4ccbc  
    7474 
    7575 
    76 collection_published_code_regex   = '[A-Za-z0-9._-]*' 
    77 collection_unpublished_code_regex = '[A-Za-z0-9._-]*' 
     76collection_published_code_regex   = 'CNRSMH_E_[0-9]{4}(?:_[0-9]{3}){2}' 
     77collection_unpublished_code_regex = 'CNRSMH_I_[0-9]{4}_[0-9]{3}' 
    7878collection_code_regex             = '(?:%s|%s)' % (collection_published_code_regex,  
    7979                                                    collection_unpublished_code_regex) 
    … …  
    217217         
    218218 
    219 item_published_code_regex    = '[A-Za-z0-9._-]*' 
    220 item_unpublished_code_regex  = '[A-Za-z0-9._-]*' 
     219item_published_code_regex    = collection_published_code_regex + '(?:_[0-9]{2}){1,2}' 
     220item_unpublished_code_regex  = collection_unpublished_code_regex + '_[0-9]{2,3}(?:_[0-9]{2,3}){0,1,2}' 
    221221item_code_regex              = '(?:%s|%s)' % (item_published_code_regex, item_unpublished_code_regex) 
    222222 
Note: See TracChangeset for help on using the changeset viewer.