/*1357656545,178142527*/

if (self.CavalryLogger) { CavalryLogger.start_js(["iVEPC"]); }

/** unpublished/js/components/Mercury/attachment/MercuryAttachmentAudioClip.js */
__d("MercuryAttachmentAudioClip",["ReactDOM","MercuryAudioPlayer","ArbiterMixin","ReactButton","ReactContextualDialog","Env","JSLogger","LeftRight","React","ReactLayeredComponentMixin","cx","debounce","goURI","tx"],function(a,b,c,d,e,f){var g=b('ReactDOM'),





h=b('MercuryAudioPlayer'),
i=b('ArbiterMixin'),
j=b('ReactButton'),
k=b('ReactContextualDialog'),
l=b('Env'),
m=b('JSLogger'),
n=b('LeftRight'),
o=b('React'),
p=b('ReactLayeredComponentMixin'),

q=b('cx'),
r=b('debounce'),
s=b('goURI'),
t=b('tx'),

u=m.create('mercury_audio_clip'),







v=o.createComponent
({mixins:[p,i],

getInitialState:function(){

this.subscribe('playing',this.updateTime.bind(this));
this.subscribe('played',this.updateState.shield(this,
{playing:true,started:true}));
this.subscribe('paused',this.updateState.shield(this,{playing:false}));
this.subscribe('finished',this.updateState.shield(this,
{playing:false,started:false,time:this.props.duration}));

this.logged=false;

var w=this.props.downloadOnly?false:
new h(this.props.src,this);


return {time:0,
playing:false,
started:false,
showinfo:false,
duration:this.props.duration,
audioPlayer:w};},



updateTime:function(w,x){
this.updateState({time:x});},


play:function(){
if(this.state.playing){
this.state.audioPlayer.pause();}else{

this.state.audioPlayer.play();
if(!this.logged){

this.logged=true;
u.log('play',{uid:l.user,duration:this.props.duration});}}},





_formatSeconds:function(w){
if(w){
var x=Math.floor(w%60);
if(x<10)x='0'+x;
var y=Math.floor(w/60);
return y+':'+x;}else 

return null;},



debounceEnter:function(){
if(this.debouncedLeave)
this.debouncedLeave.reset();

if(!this.state.showinfo)
this.updateState({showinfo:true});},



debounceLeave:function(){
this.debouncedLeave=r(this.stateUpdater({showinfo:false}),500);
this.debouncedLeave();},


renderLayers:function(){
var w={};
w._ke=true;
w._1miy=true;

var x=
(k
({position:"right",
contextRef:"helpDialogAnchor",
shown:this.state.showinfo,children:
[g.div
({classSet:w,
onMouseEnter:this.debounceEnter.bind(this),
onMouseLeave:this.debounceLeave.bind(this),children:
[g.h3({children:"New! Send voice messages from mobile"}),
g.p({children:"Have more to say? Send friends a voice message with Messenger for mobile"}),
j
({label:"Get the App",
onClick:s.curry('/mobile/messenger?voice_message'),
use:j.USES.special})]})]}));



return {contextual:x};},


render:function(){
var w=this._formatSeconds(this.state.duration),

x=this.props.width||170,

y=null,
z=Math.ceil((this.state.time*(x+2))/
this.state.duration);

if(this.state.audioPlayer&&this.state.audioPlayer.getType()){



var aa=
(g.a
({className:"_1miz",
style:{width:x},
onClick:this.play.bind(this),children:
[g.span({className:"_1mi-",children:
g.i({className:"_1mi_"})}),

g.span({className:"_1mj0",children:
w}),

g.div({className:"_1mj1"})]})),



ba={};
ba._1mj2=true;
ba._1mj3=
this.state.playing&&(this.state.time!=0);

y=
(g.div({classSet:ba,children:
[aa,
g.div
({className:"_1mj4",
posInfo:{w:z},children:
aa})]}));}else 




y=
(g.div({className:"_1mj2",children:
g.div
({className:"_1miz",children:
n({children:
[g.a
({className:"_1mj5",
href:this.props.src,children:
[g.span({className:"_3qi6",children:
g.i({className:"_1mj6"})}),

g.span({className:"_1mj7",children:
"Voice Message"}),

g.span({className:"_1mj8",children:
w})]}),


g.a({href:this.props.src,className:"_1mj9",children:
g.i({className:"_1mja"})})]})})}));







return (g.div({className:"_1mjb",children:
[y,
g.a
({ref:"helpDialogAnchor",
onMouseEnter:this.debounceEnter.bind(this),
onMouseLeave:this.debounceLeave.bind(this),
className:"_1mjc",children:
g.i({className:"_1mjd"})})]}));}});







e.exports=v;});
