From 8fd286a6a89f98742e6d8916622778df974a5bfd Mon Sep 17 00:00:00 2001 From: dj3c1t Date: Fri, 9 May 2014 23:15:36 +0200 Subject: [PATCH] integration jaudio-player --- app/observers/mw_observer_sourceml.php | 3 + app/out/default/css/actions/sources.css | 72 ++-- app/out/default/css/jaudio-player.1.1.css | 156 +++++++++ .../default/images/jaudio-player/jap-graphics.png | Bin 0 -> 957 bytes .../default/images/jaudio-player/jap-loading.gif | Bin 0 -> 847 bytes app/out/default/js/actions/sources.js | 311 +---------------- app/out/default/js/jaudio-player.1.1.js | 368 +++++++++++++++++++++ app/out/default/views/sources/source.php | 1 + app/out/default/views/sources/source/documents.php | 36 +- app/out/default/views/sources/source/header.php | 7 - app/out/default/views/sources/source/player.php | 41 +++ 11 files changed, 610 insertions(+), 385 deletions(-) create mode 100644 app/out/default/css/jaudio-player.1.1.css create mode 100644 app/out/default/images/jaudio-player/jap-graphics.png create mode 100644 app/out/default/images/jaudio-player/jap-loading.gif create mode 100644 app/out/default/js/jaudio-player.1.1.js create mode 100644 app/out/default/views/sources/source/player.php diff --git a/app/observers/mw_observer_sourceml.php b/app/observers/mw_observer_sourceml.php index f8d8fe3..38c3622 100644 --- a/app/observers/mw_observer_sourceml.php +++ b/app/observers/mw_observer_sourceml.php @@ -40,6 +40,9 @@ $env->add_js_file($env->out_url("js/jquery-ui-1.8.12.custom.min.js")); $env->add_css_file($env->out_url("css/colorbox.css")); $env->add_css_file($env->out_url("css/ui-lightness/jquery-ui-1.8.12.custom.css")); + $env->add_js_file($env->out_url("js/jaudio-player.1.1.js")); + $env->add_css_file($env->out_url("css/jaudio-player.1.1.css")); + } } diff --git a/app/out/default/css/actions/sources.css b/app/out/default/css/actions/sources.css index aea7e08..0befaf6 100644 --- a/app/out/default/css/actions/sources.css +++ b/app/out/default/css/actions/sources.css @@ -94,7 +94,7 @@ ul.groupes li .infos li .description { padding: 15px 50px 15px 50px; - font-size: 0.9em; + font-size: 1em; } .description p @@ -314,65 +314,31 @@ ul.sources li{ text-align: right; } -ul.documents -{ list-style-type: none; -} - -ul.documents li -{ margin: 0px; - padding: 0px; - clear: left; - font-size: 0.8em; -} - -/* ------ player */ - -.loading_player{ - opacity: 0.5; - background-image: url(../../icons/player_loading.gif); - background-position: center; +ul.documents{ + list-style-type: none; + padding-left: 65px; + background-image: url(../../icons/download.png); background-repeat: no-repeat; + background-position: 23px 8px; + min-height: 32px; } -.player_progress -{ width: 100%; - height: 5px; - font-size: 1px; - line-height: 1px; - overflow: hidden; - margin: 0px 0px 0px 0px; - position: relative; - cursor: pointer; -} - -.player_progress .loaded -{ width: 0; - height: 5px; -} - -.player_progress .position -{ width: 0; - height: 5px; - position: absolute; - top: 0px; -} - -.player_controls, .no_player -{ margin: 2px 5px 0 0; +ul.documents li{ + margin: 0px; + padding: 0px; float: left; - width: 40px; -} - -.player_controls a -{ text-decoration: none; + font-size: 1em; + padding: 5px 5px 0 0; } -.player_controls a.pause -{ display: none; +ul.documents li a{ + display: block; + border: solid 1px #c0c0c0; + padding: 3px 10px; } - -.player_controls a.stop -{ display: none; +ul.documents li a:hover{ + background-color: #f5f5f5; + color: #000066; } /* ------ pistes / derivations */ diff --git a/app/out/default/css/jaudio-player.1.1.css b/app/out/default/css/jaudio-player.1.1.css new file mode 100644 index 0000000..2566c2b --- /dev/null +++ b/app/out/default/css/jaudio-player.1.1.css @@ -0,0 +1,156 @@ +/* + jaudioPlayer 1.1 + http://jaudio-player.dj3c1t.com/ + +*/ + +.audio_player{ + position: relative; + margin-bottom: 0.5em; +} + +.audio_player img.loading{ + position: absolute; + top: 2px; + left: 0; + display: none; +} +.with_waveform .audio_player img.loading{ + top: 21px; +} + + +.audio_player .player_controls{ + margin: 0; + position: absolute; + top: 2px; + left: 0px; + width: 42px; +} + +.with_waveform .audio_player .player_controls{ + top: 21px; +} + +.audio_player .player_controls a{ + text-decoration: none; + display: block; + float: right; + width: 16px; + height: 16px; + margin: 0 0 0 5px; +} + +.audio_player .player_controls a span{ + display: none; +} + +.audio_player .player_controls a.play{ + background-position: 0px 0px; +} + +.audio_player .player_controls a.play:hover{ + background-position: -16px 0px; +} + +.audio_player .player_controls a.pause{ + background-position: 0px -16px; + display: none; +} + +.audio_player .player_controls a.pause:hover{ + background-position: -16px -16px; +} + +.audio_player .player_controls a.stop{ + background-position: 0px -32px; + display: none; +} + +.audio_player .player_controls a.stop:hover{ + background-position: -16px -32px; +} + + +.audio_player .player_progress{ + height: 20px; + overflow: hidden; + margin: 0 10em 0 55px; + position: relative; +} + +.audio_player .player_progress div, +.audio_player .player_progress img{ + cursor: pointer; +} + +.audio_player .player_progress .bg{ + background-color: #e5e5e5; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; +} + +.audio_player .player_progress .loaded{ + background-color: #c0c0c0; + width: 0; + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; +} + +.audio_player .player_progress .position{ + background-color: #666666; + width: 0; + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; +} + +.with_waveform .audio_player .player_progress{ + height: 60px; + background-color: transparent; +} + +.with_waveform .audio_player .player_progress img{ + height:100%; +} + +.with_waveform .audio_player .player_progress .bg{ + background-color: transparent; + opacity: 0.4; +} + +.with_waveform .audio_player .player_progress .loaded{ + background-color: transparent; + opacity: 0.4; +} + +.with_waveform .audio_player .player_progress .position{ + background-color: transparent; + opacity: 1; + border-right: solid 2px #333333; +} + +.audio_player .time{ + position: absolute; + top: 0px; + right: 5px; +} + +.with_waveform .audio_player .time{ + top: 22px; +} + +.audio_player .time .duration{ + color: #888888; + border-left: solid 1px #888888; + padding-left: 0.5em; +} diff --git a/app/out/default/images/jaudio-player/jap-graphics.png b/app/out/default/images/jaudio-player/jap-graphics.png new file mode 100644 index 0000000000000000000000000000000000000000..bc965c4bccfa77e2a368252ae3dfe0d4b5f97832 GIT binary patch literal 957 zcmV;u148_XP)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2i*c3 z6*o2BA{&|j000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dakSAh-}0009RNkl*2Wx}Wm!(!4U@ai9T=0>?mK0Dya9cmnth^t9F| z*29P59b@MWS+u9M?#ix5fid7xYkdTK0h+*sFkF{ca%K<3z@FCn%=i5V;+-eJu6$Qo z>#l&$fIZ;5>|to$G0yAQf>o!}c`HT~;P}4Zl=C|R9toSuM^Ti^E8q7UayEy+A8{M9 zfiA$((vk)~iJ=pD=yTwmtWD&jDCz<Em&#PI>pYPEb|PUgnM$OB<> z`F6XV$~#szC|RWJ6m7Ly?~VDoq!>l{cDtR(I})vN#Gcy*!Y~BD^SoJ^>&yA|4K|ez zf&c*5brX3fu22%ir^c_ia-rvWbH?1MxU(m0F7LW-D(?t<2FwBt$yWzZVHo0h-n;?t z1Jl4`Nx}0hJ_rI_*UjXWQAp;1MPM8FA;B_cxUCP&0Iz@@;A31;ufyA=cu{tDAUpgi zQ9c1I$o&x5Nh!sp`J`sl6n9Qbs?@~LkyNj5InAgPuWq^>JKXT7^uVpx17?jk`}tET zDtUS!m(SD#CT#WdsE8gY!YAs1PN&lg!;p=Q4F#~ex;l`uJXJ&wL{ZcWf`GNPH3hJ~ zzCMt$JXKT=qz$v5-_Otkh50l+kd?MY^gv-gQ4ho#ARfkbAw3XlfOr_!|M5zqa#G*} zNfVV4NJ`H7g}8oO?hnnIdSJ%x=a#sz`}v`z2ZrKpJ+J_L$m!=VrJwI4=z-FFk{(!; z-P!$o-stDM8G4`;pQZ<9Qu_IRK|N5Iuk=8r2P!>qJM{p7zr5UwUHo}4;LX<7WSRE^ zUsqPH_z-x#xj9+({XkMLFRBL$^RRCX3Ti~`t{YTS0_%KxNqOS zZQHhe{P^+QxpR*nKVGq7#rpN@8At(&|D>FYQWHy3QxwWGOEMG^vl1(E@)J|^GV{{% z85DoAFmM5lQ~b~E=Nc01>=@u`q-Vg)2o%x**#dGT18abSLSIVeyrl*rIf_~>39Hu5 z5IHtc%CzAF+s%%K=w22Zrp(rWi2|*Rovn-d)@bT9ct-tLq>}Vum&c?D7A-4G)nqF= zO|unjghf78${u~+?*z4%5!sRq1%)p6OFbD{Qb!-GSmB`JT6^HY!D~mEIC`cuq-KZ+ z@f|KlI$B?E`RzKdsAZ)9=nHHN!5+~JF4SY+VADb}iE(C2i8 zt1nx?>)BhLPr!xSeU=1ZCGIiz=tUh=%0dxr@rUg_IU5ygalxp)sM2H`HyJWYHZ-zNH1P zH9x2QZ-80Df@}@QZ@}1F;lSf+C~)YcL~g9a@tqPLJr~+;Xs`=(v6wI^JlD{XSmvgf z=)n*XJcFY#*L2BN#v~VyEo=;{b|xn2aP_G+6c~#oA5q?*{)6|861$0+d4QT$gnolY zPp=BhQdVS3z+soy%IayL(jn0+=WV`;*F%T> zV5e?LvsP2HtCWbqlEbVA#nav0=JHKcBOC28X^OOB!p8W_OR8B7-$3 Hd4d4|dM^*F literal 0 HcmV?d00001 diff --git a/app/out/default/js/actions/sources.js b/app/out/default/js/actions/sources.js index 03a20c0..90a052e 100644 --- a/app/out/default/js/actions/sources.js +++ b/app/out/default/js/actions/sources.js @@ -1,313 +1,36 @@ $(document).ready( function(){ init_show_xml_links(); - init_players("*"); - init_player_listener(); + init_players(""); init_menu_source("body"); + init_album_play_all(); } ); // ----------------------------------------------------------------- -// player audio +// players audio // -var current_document = false; -var autoplay_next = false; - -function init_players(target){ - $(target == "*" ? "audio" : target + " audio").each - ( function() - { var audio_elt = $(this).get(0); - var CAN_PLAY = false; - var id_document = $(this).attr("id").substring(6); - var id_source = null; - if((k = id_document.indexOf("_")) != -1) id_source = id_document.substring(0, k); - if(id_source){ - $(this).find("source").each( - function(){ - if(audio_elt.canPlayType($(this).attr("type"))) CAN_PLAY = true; - } - ); - if(CAN_PLAY){ - audio_elt.addEventListener("ended", track_ended, false); - $("#player_" + id_document + " .play").click(function() { play(id_document); return false; }); - $("#player_" + id_document + " .play").css("display", "inline"); - $("#player_" + id_document + " .pause").click(function() { pause(); return false; }); - $("#player_" + id_document + " .pause").css("display", "none"); - $("#player_" + id_document + " .stop").click(function() { stop(); return false; }); - $("#player_" + id_document + " .stop").css("display", "none"); - $("#document_" + id_document + " .no_player").remove(); - } - } - if(!CAN_PLAY) $("#player_" + id_document).remove(); - } - ); - $(target == "*" ? ".track" : target + " .track").each( - function(){ - if($(this).find(".player").size()){ - var id_source = $(this).attr("id").substring(6); - $(this).find(".player_progress").first().click( - function(e){ - if((progress_width = $(this).width()) != 0){ - play_source_from(id_source, (100 * (e.pageX - this.offsetLeft)) / progress_width); - } - } - ); - } - else $(this).find(".player_progress").first().css("cursor", "default"); - } - ); +function init_players(elt){ + $(elt + " audio").jaudioPlayer({ + "player_graphics": mw_path_url + "plugins/mw_sourceml/app/out/default/images/jaudio-player/jap-graphics.png", + "loading_img": mw_path_url + "plugins/mw_sourceml/app/out/default/images/jaudio-player/jap-loading.gif", + "auto_play_next_track": false, + "loop": false, + "waveform_class": "waveform" + }); } -function init_player_listener(){ - setInterval("player_listener_update()", 300); -} - -function player_listener_update(){ - if( - (current_document != false) - && (source_id = get_current_source_id()) - && (current_audio = $("#audio_" + current_document).get(0)) - && ($("#track_" + source_id + " .player_progress").size()) - ){ - $("#track_" + source_id + " .player_progress .position").not( - "#track_" + source_id + " .pistes .player_progress .position").not( - "#track_" + source_id + " .derivation .player_progress .position").css( - "width", - Math.round((100 * current_audio.currentTime) / current_audio.duration) + "%" - ); - } -} - -function get_current_source_id(){ - if(current_document != false){ - if($("#document_" + current_document).size()){ - var source_document_id = $("#document_" + current_document).attr("id").substring(9); - if((k = source_document_id.indexOf("_")) != -1){ - return source_document_id.substring(0, k); - } - } - } - return false; -} - -function play_all(){ - autoplay_next = play_first_source(); -} - -function play_first_source(){ - var FOUND = false; - $(".track").not(".pistes .track").not(".derivation .track").each( +function init_album_play_all(){ + $("#play_all a").click( function(){ - if(!FOUND){ - $(this).find(".documents li").not(".pistes .documents li").not(".derivation .documents li").each( - function(){ - if(!FOUND){ - var source_document_id = $(this).attr("id").substring(9); - if(source_document_id.length > 0){ - if($("#player_" + source_document_id).size()){ - FOUND = true; - play(source_document_id); - } - } - } - } - ); - } + $("audio").jaudioPlayer("set_option", "auto_play_next_track", true); + $("#audio_wrapper_1 .player_controls .play").trigger("click"); + return false; } ); - return FOUND; -} - -function play_next_source(){ - var FOUND = false; - if(current_document != false){ - if($("#document_" + current_document).size()){ - var current_source_document_id = $("#document_" + current_document).attr("id"); - var current_source_id = get_current_source_id(); - if(current_source_id != false){ - var CURRENT_FOUND = false; - $(".track").not(".pistes .track").not(".derivation .track").each( - function(){ - if(!FOUND){ - if(CURRENT_FOUND){ - $(this).find(".documents li").not(".pistes .documents li").not(".derivation .documents li").each( - function(){ - if(!FOUND){ - var source_document_id = $(this).attr("id").substring(9); - if(source_document_id.length > 0){ - if($("#player_" + source_document_id).size()){ - FOUND = true; - play(source_document_id); - } - } - } - } - ); - } - else{ - if(current_source_id == $(this).attr("id").substring("6")){ - CURRENT_FOUND = true; - } - } - } - } - ); - } - } - } - return FOUND; -} - -function play(id_document){ - if(current_document == id_document){ - if($("#audio_" + current_document).get(0).paused){ - gui_state("playing"); - $("#audio_" + current_document).get(0).play(); - } - } - else{ - if(current_document != false){ - var audio_elt = $("#audio_" + current_document).get(0); - audio_elt.pause(); - audio_elt.currentTime = 0; - gui_state("stoped"); - } - current_document = id_document; - _play(0); - } } -function play_source_from(id_source, position){ - if( - (current_document != false) - && (current_source_id = get_current_source_id()) - && (id_source == current_source_id) - ){ - _play(position); - } - else{ - stop(); - var FOUND = false; - $("#track_" + id_source + " .documents li").each( - function(){ - if(!FOUND){ - var source_document_id = $(this).attr("id").substring(9); - if(source_document_id.length > 0){ - if($("#player_" + source_document_id).size()){ - FOUND = true; - current_document = source_document_id; - _play(position); - } - } - } - } - ); - } -} - -function _play(position){ - if(current_document != false){ - var audio_elt = $("#audio_" + current_document).get(0); - audio_elt.preload = "auto"; - audio_elt.addEventListener("loadeddata", track_loadeddata, false); - audio_elt.addEventListener("canplaythrough", track_canplaythrough, false); - audio_elt.addEventListener("playing", track_playing, false); - gui_state("loading"); - audio_elt.position = position; - audio_elt.load(); - } -} - -function track_loadeddata(event){ - var audio_elt = event.target; - audio_elt.removeEventListener("loadeddata", track_loadeddata, false); - if(current_document != false){ - audio_elt.currentTime = audio_elt.position ? (audio_elt.position * audio_elt.duration) / 100 : 0; - } -} - -function track_canplaythrough(event){ - var audio_elt = event.target; - audio_elt.removeEventListener("canplaythrough", track_canplaythrough, false); - audio_elt.play(); -} - -function track_playing(event){ - var audio_elt = event.target; - audio_elt.removeEventListener("playing", track_playing, false); - gui_state("playing"); -} - -function pause(){ - if(current_document != false){ - var audio_elt = $("#audio_" + current_document).get(0); - audio_elt.pause(); - gui_state("paused"); - } -} - -function stop(){ - if(current_document != false){ - var audio_elt = $("#audio_" + current_document).get(0); - audio_elt.pause(); - audio_elt.currentTime = 0; - gui_state("stoped"); - current_document = false; - } - autoplay_next = false; -} - -function track_ended(){ - gui_state("stoped"); - var current_audio = $("#audio_" + current_document).get(0); - current_audio.pause(); - if(current_audio.currentTime) current_audio.currentTime = 0; - if(autoplay_next) autoplay_next = play_next_source(); -} - -function gui_state(state){ - gui_blur(); - if(current_document != false){ - var source_id = get_current_source_id(); - $("#track_" + source_id).removeClass("loading_player"); - if(state == "playing"){ - $("#player_" + current_document).find(".play").css("display", "none"); - $("#player_" + current_document).find(".pause").css("display", "inline"); - $("#player_" + current_document).find(".stop").css("display", "inline"); -// $("#track_" + source_id).removeClass("track"); - $("#track_" + source_id).addClass("playing_track"); - } - else if(state == "paused"){ - $("#player_" + current_document).find(".play").get(0).style.display = "inline"; - $("#player_" + current_document).find(".pause").get(0).style.display = "none"; - $("#player_" + current_document).find(".stop").get(0).style.display = "inline"; -// $("#track_" + source_id).removeClass("track"); - $("#track_" + source_id).addClass("playing_track"); - } - else if(state == "stoped"){ - $("#player_" + current_document).find(".play").get(0).style.display = "inline"; - $("#player_" + current_document).find(".pause").get(0).style.display = "none"; - $("#player_" + current_document).find(".stop").get(0).style.display = "none"; - $("#track_" + source_id).removeClass("playing_track"); -// $("#track_" + source_id).addClass("track"); - $("#track_" + source_id + " .player_progress .position").not( - "#track_" + source_id + " .pistes .player_progress .position").not( - "#track_" + source_id + " .derivation .player_progress .position").css("width", "0%"); - } - else if(state == "loading"){ - $("#track_" + source_id).addClass("loading_player"); - } - } -} - -function gui_blur(){ - if((current_document != false) && $("#player_" + current_document).size()){ - $("#player_" + current_document).find(".play").get(0).blur(); - $("#player_" + current_document).find(".pause").get(0).blur(); - $("#player_" + current_document).find(".stop").get(0).blur(); - } -} // ----------------------------------------------------------------- // source xml @@ -342,6 +65,7 @@ function toggle_source_list(id_block){ $("#source_list_" + id_block).slideUp(200); $("#source_list_" + id_block + " .pistes").empty(); $("#toggle_sources_list_" + id_block + ".block_list_toggle").html("[+]"); + $("audio").jaudioPlayer("clean_audio_elts"); } else{ $("#source_list_" + id_block).slideDown(200); @@ -365,6 +89,7 @@ function toggle_derivation_list(id_block){ $("#derivation_list_" + id_block).slideUp(200); $("#derivation_list_" + id_block + " .derivation").empty(); $("#toggle_derivation_list_" + id_block + ".block_list_toggle").html("[+]"); + $("audio").jaudioPlayer("clean_audio_elts"); } else{ $("#derivation_list_" + id_block).slideDown(200); diff --git a/app/out/default/js/jaudio-player.1.1.js b/app/out/default/js/jaudio-player.1.1.js new file mode 100644 index 0000000..e3e6ac0 --- /dev/null +++ b/app/out/default/js/jaudio-player.1.1.js @@ -0,0 +1,368 @@ +/* + jaudioPlayer 1.1 + http://jaudio-player.dj3c1t.com/ + +*/ +(function($){ + + // ----------------------------------------------------------------------- + // fonction d'appel du plugin + + $.fn.jaudioPlayer = function(param){ + if(jap_api[param]) return jap_api[param].apply(this, Array.prototype.slice.call(arguments, 1)); + if(typeof param === 'object' || !param) return jap.init.apply(this, arguments); + }; + + // ----------------------------------------------------------------------- + // attributs + + var settings = {}, + audio_elts = {}, + audio_elt_index = 0, + waiting_track = false, + current_track = false, + seek_to_precent = 0; + + // ----------------------------------------------------------------------- + // fonctions publiques + + var jap_api = { + + set_option: function(option_name, value){ + settings[option_name] = value; + }, + + get_option: function(option_name){ + return settings[option_name]; + }, + + resize: function(){ + jap.resize_audio_players(); + }, + + clean_audio_elts: function(){ + for(var i in audio_elts){ + if($("#" + audio_elts[i].attr("id")).size() == 0){ + if(current_track == i){ + try{ + jap.stop(); + } + catch(e){} + current_track = false; + } + delete audio_elts[i]; + } + } + } + + }; + + // ----------------------------------------------------------------------- + // fonctions internes + + var jap = { + + init: function(options){ + settings = $.extend( + { + "waveform_class": "", + "player_graphics": "jaudio-player/jap-graphics.png", + "loading_img": "jaudio-player/jap-loading.gif", + "auto_play_next_track": false, + "loop": false + }, + options + ); + return this.each( + function(){ + var audio_elt = $(this); + if(audio_elt.is("audio")){ + jap.init_player(audio_elt); + } + } + ); + }, + + // ------------------- initialisation + + init_player: function(audio_elt){ + audio_elt_index++; + audio_elts[audio_elt_index] = audio_elt; + var CAN_PLAY = false; + audio_elt.find("source").each( + function(){ + if(audio_elt.get(0).canPlayType($(this).attr("type"))) CAN_PLAY = true; + } + ); + if(CAN_PLAY){ + audio_elt.wrap('
'); + $("#audio_wrapper_" + audio_elt_index).append( + "
" + + " " + + "
" + + " pause" + + " play" + + " stop" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + " 00:00" + + " 00:00" + + "
" + + "
" + ); + if(settings["waveform_class"].length){ + if($("#audio_wrapper_" + audio_elt_index + " ." + settings["waveform_class"]).size()){ + $("#audio_wrapper_" + audio_elt_index).addClass("with_waveform"); + $("#audio_wrapper_" + audio_elt_index + " .player_progress div").html( + "" + ); + } + } + audio_elt.bind('loadedmetadata', function(e){ jap.track_loadedmetadata(e); }) + audio_elt.bind('progress', function(){ jap.track_progress(); }) + audio_elt.bind('canplaythrough', function(){ jap.track_canplaythrough(); }) + audio_elt.bind('timeupdate', function(){ jap.track_timeupdate(); }) + audio_elt.bind('waiting', function(){ jap.track_waiting(); }) + audio_elt.bind('playing', function(){ jap.track_playing(); }) + audio_elt.bind('ended', function(){ jap.track_ended(); }) + $("#audio_wrapper_" + audio_elt_index + " .player_controls a").css("background-image", "url(" + settings["player_graphics"] + ")"); + $("#audio_wrapper_" + audio_elt_index + " .player_controls .play").css("display: block"); + $("#audio_wrapper_" + audio_elt_index + " .player_controls .play").click(function() { jap.play($(this)); return false; }); + $("#audio_wrapper_" + audio_elt_index + " .player_controls .pause").click(function() { jap.pause(); return false; }); + $("#audio_wrapper_" + audio_elt_index + " .player_controls .stop").click(function() { jap.stop(); return false; }); + $("#audio_wrapper_" + audio_elt_index + " .player_progress").click(function(e) { jap.seek(e); }); + jap.resize_audio_players(); + } + }, + + resize_audio_players: function(){ + $(".audio_player .player_progress").each( + function(){ + var progress_width = $(this).width(); + $(this).find("img").css("width", progress_width); + } + ); + }, + + // ------------------- evenements + + track_loadedmetadata: function(e){ + var current_audio = e.target; + var minutes = "" + Math.floor(current_audio.duration / 60); + var secondes = "" + Math.round(current_audio.duration - (minutes * 60)); + if(minutes.length == 1) minutes = "0" + minutes; + if(secondes.length == 1) secondes = "0" + secondes; + $(current_audio).parents(".audio_wrapper").find(".time .duration").html(minutes + ":" + secondes); + }, + + track_progress: function(){ + if(current_track != false){ + var current_audio = audio_elts[current_track].get(0); + if(current_audio.buffered.length){ + var buffered = current_audio.buffered.end(0); + var loaded = parseInt(((buffered / current_audio.duration) * 100), 10); + } + $("#audio_player_" + current_track).find(".loaded").css("width", loaded + "%"); + } + }, + + track_canplaythrough: function(){ + if(waiting_track != false){ + current_track = waiting_track; + waiting_track = false; + setTimeout( + function(){ + var current_audio = audio_elts[current_track].get(0); + current_audio.play(); + jap.gui_state("playing"); + if(seek_to_precent != 0){ + current_audio.currentTime = (current_audio.duration / 100) * seek_to_precent; + seek_to_precent = 0; + } + }, + 500 + ); + } + }, + + track_timeupdate: function(){ + if(current_track != false){ + var current_audio = audio_elts[current_track].get(0); + var progress_bar = $("#audio_player_" + current_track).find(".position").get(0); + if(current_audio && progress_bar){ + progress_bar.style.width = ((100 * current_audio.currentTime) / current_audio.duration) + "%"; + var minutes = "" + Math.floor(current_audio.currentTime / 60); + var secondes = "" + Math.round(current_audio.currentTime - (minutes * 60)); + if(minutes.length == 1) minutes = "0" + minutes; + if(secondes.length == 1) secondes = "0" + secondes; + $("#audio_player_" + current_track + " .time .position").html(minutes + ":" + secondes); + var minutes = "" + Math.floor(current_audio.duration / 60); + var secondes = "" + Math.round(current_audio.duration - (minutes * 60)); + if(minutes.length == 1) minutes = "0" + minutes; + if(secondes.length == 1) secondes = "0" + secondes; + $("#audio_player_" + current_track + " .time .duration").html(minutes + ":" + secondes); + } + } + }, + + track_waiting: function(){ + jap.gui_state("waiting"); + }, + + track_playing: function(){ + jap.gui_state("playing"); + }, + + track_ended: function(){ + if(current_track != false){ + var current_audio = audio_elts[current_track].get(0); + jap.gui_state("stoped"); + if(settings["auto_play_next_track"] || settings["loop"]) jap.play_next_track(); + } + }, + + play_next_track: function(){ + var next_track = false, + first_track = false, + CURRENT_FOUND = false; + for(var track in audio_elts){ + if(!first_track) first_track = track; + if(track == current_track) CURRENT_FOUND = true; + else{ + if(CURRENT_FOUND){ + next_track = track; + break; + } + } + } + if(!next_track && settings["loop"] && first_track) next_track = first_track; + if(next_track){ + if(current_track != false) jap.stop(); + current_track = next_track; + jap.gui_state("waiting"); + current_track = false; + var current_audio = audio_elts[track].get(0); + waiting_track = next_track; + seek_to_precent = 0; + jap.load_track(current_audio); + } + }, + + load_track: function(audio){ + audio.preload = "auto"; + if(audio.readyState == audio.HAVE_ENOUGH_DATA) jap.track_canplaythrough(); + else audio.load(); + }, + + // ------------------- boutons + + play: function(play_elt){ + var track = play_elt.parents(".audio_wrapper").attr("id").substr(14); + if(current_track == track){ + if(audio_elts[track].get(0).paused){ + audio_elts[track].get(0).play(); + } + } + else{ + if(current_track != false) jap.stop(); + current_track = track; + jap.gui_state("waiting"); + current_track = false; + var current_audio = audio_elts[track].get(0); + waiting_track = track; + seek_to_precent = 0; + jap.load_track(current_audio); + } + }, + + seek: function(e){ + var $target = $(e.target); + if(true || $target.is("img")){ + var audio_player_elt = $target.parents(".audio_player"); + var track = audio_player_elt.attr("id").substr(13); + var progress_bar = audio_player_elt.find(".player_progress"); + var current_audio = audio_elts[track].get(0); + seek_to_precent = ((e.pageX - progress_bar.offset().left) * 100) / progress_bar.width(); + if(track){ + if(current_track == false || current_track != track){ + if(current_track != false) jap.stop(); + current_track = track; + jap.gui_state("waiting"); + current_track = false; + waiting_track = track; + jap.load_track(current_audio); + } + else{ + current_audio.currentTime = (current_audio.duration / 100) * seek_to_precent; + } + } + } + }, + + pause: function(){ + if(current_track != false){ + audio_elts[current_track].get(0).pause(); + jap.gui_state("paused"); + } + }, + + stop: function(){ + if(current_track != false){ + var current_audio = audio_elts[current_track].get(0); + current_audio.pause(); + if(current_audio.currentTime) current_audio.currentTime = 0; + jap.gui_state("stoped"); + current_track = false; + } + }, + + // ------------------- interface + + gui_state: function(state){ + if(current_track != false){ + jap.gui_blur(); + if(state == "waiting"){ + $("#audio_player_" + current_track).find(".play").css("display", "none"); + $("#audio_player_" + current_track).find(".pause").css("display", "none"); + $("#audio_player_" + current_track).find(".stop").css("display", "none"); + $("#audio_player_" + current_track).find("img.loading").css("display", "block"); + } + if(state == "playing"){ + $("#audio_player_" + current_track).find("img.loading").css("display", "none"); + $("#audio_player_" + current_track).find(".play").css("display", "none"); + $("#audio_player_" + current_track).find(".pause").css("display", "inline"); + $("#audio_player_" + current_track).find(".stop").css("display", "inline"); + } + else if(state == "paused"){ + $("#audio_player_" + current_track).find("img.loading").css("display", "none"); + $("#audio_player_" + current_track).find(".play").css("display", "inline"); + $("#audio_player_" + current_track).find(".pause").css("display", "none"); + $("#audio_player_" + current_track).find(".stop").css("display", "inline"); + } + else if(state == "stoped"){ + $("#audio_player_" + current_track).find("img.loading").css("display", "none"); + $("#audio_player_" + current_track).find(".play").css("display", "inline"); + $("#audio_player_" + current_track).find(".pause").css("display", "none"); + $("#audio_player_" + current_track).find(".stop").css("display", "none"); + $("#audio_player_" + current_track).find(".position").css("width", "0%"); + $("#audio_player_" + current_track).find(".time .position").html("00:00"); + } + } + }, + + gui_blur: function(){ + if(current_track != false){ + $("#audio_player_" + current_track).find(".play").get(0).blur(); + $("#audio_player_" + current_track).find(".pause").get(0).blur(); + $("#audio_player_" + current_track).find(".stop").get(0).blur(); + } + } + + }; + +})(jQuery); \ No newline at end of file diff --git a/app/out/default/views/sources/source.php b/app/out/default/views/sources/source.php index 2bf3811..ffc1aeb 100644 --- a/app/out/default/views/sources/source.php +++ b/app/out/default/views/sources/source.php @@ -6,6 +6,7 @@ out_file("views/sources/source/header.php"); + require $this->out_file("views/sources/source/player.php"); require $this->out_file("views/sources/source/metas.php"); require $this->out_file("views/sources/source/documents.php"); diff --git a/app/out/default/views/sources/source/documents.php b/app/out/default/views/sources/source/documents.php index 540057a..2396423 100644 --- a/app/out/default/views/sources/source/documents.php +++ b/app/out/default/views/sources/source/documents.php @@ -3,39 +3,13 @@ $documents = $source["reference"] ? $source["reference"]["documents"] : $source["documents"]; if($documents) : $mw_out = $this->helper("mw_helper_out"); + ?>
    - $document) : - $ext = ""; - $audio_type = ""; - if(($k = strrpos($document["url"], ".")) !== false) $ext = strtolower(substr($document["url"], $k + 1)); - switch($ext){ - case "ogg": - $audio_type = "audio/ogg"; - break; - case "mp3": - $audio_type = "audio/mp3"; - break; - } - - ?> - + $document) : ?>
  • "> - -
    "> - " alt="play" /> - " alt="pause" /> - " alt="stop" /> - -
    - -
    " title="esc_attr($document["nom"]); ?>">
    • - - +
-
- + diff --git a/app/out/default/views/sources/source/header.php b/app/out/default/views/sources/source/header.php index 51d654a..c7bc6b6 100644 --- a/app/out/default/views/sources/source/header.php +++ b/app/out/default/views/sources/source/header.php @@ -27,8 +27,6 @@ - -
-
-
-
diff --git a/app/out/default/views/sources/source/player.php b/app/out/default/views/sources/source/player.php new file mode 100644 index 0000000..965618a --- /dev/null +++ b/app/out/default/views/sources/source/player.php @@ -0,0 +1,41 @@ +helper("mw_helper_out"); + $audio_files = array(); + foreach($documents as $id_document => $document){ + $ext = ""; + if(($k = strrpos($document["url"], ".")) !== false) $ext = strtolower(substr($document["url"], $k + 1)); + switch($ext){ + case "ogg": + $audio_files[] = array( + "type" => "audio/ogg", + "src" => $document["url"] + ); + break; + case "mp3": + $audio_files[] = array( + "type" => "audio/mp3", + "src" => $document["url"] + ); + break; + } + } + if($audio_files) : + +?> + + -- 2.1.4