(this["webpackJsonpmusic-vine"]=this["webpackJsonpmusic-vine"]||[]).push([[67],{1344:function(t,e,i){"use strict";i.r(e);var s=i(3),a=i(4),n=i(5),l=i(8),c=i(7),r=i(6),o=i(1),d=i.n(o),p=i(29),h=i(2),u=i.n(h),y=i(252),j=i.n(y),b=(i(66),i(24)),g=i(902),v=i(18),x=i(866),O=i(14),m=i(255),f=i(0),k=function(t){Object(c.a)(i,t);var e=Object(r.a)(i);function i(t){var s;if(Object(a.a)(this,i),(s=e.call(this,t)).state={playlistId:s.props.params.playlistId,isEditing:!1,editingChange:!1,title:"",titleError:"",owner:!1,copyUrl:!1,basePlaylistData:!1},isNaN(s.filterInt(s.props.params.playlistId))){var n=JSON.parse(atob(s.props.params.playlistId));s.state.basePlaylistData=n,s.state.playlistId=parseInt(n.playlist),s.state.title="".concat(n.prefix," ").concat(n.name)}return s.onFetchPlaylist(),s.editPlaylist=s.editPlaylist.bind(Object(l.a)(s)),s.editChange=s.editChange.bind(Object(l.a)(s)),s.editingInactive=s.editingInactive.bind(Object(l.a)(s)),s.saveTitle=s.saveTitle.bind(Object(l.a)(s)),s.copyUrl=s.copyUrl.bind(Object(l.a)(s)),s}return Object(n.a)(i,[{key:"componentWillMount",value:function(){this.props.onFetchPlaylistTracks(this.state.playlistId)}},{key:"componentWillReceiveProps",value:function(t){this.props.isLoggedIn!==t.isLoggedIn&&this.onFetchPlaylist()}},{key:"onFetchPlaylist",value:function(){var t=this;Object(v.e)(this.state.playlistId).then((function(e){var i=!1,s=e.playlist.name;t.props.location.query.edit&&e.owner&&(i=!0),t.state.basePlaylistData&&(s="".concat(parsedData.prefix," ").concat(parsedData.name)),t.setState({playlist:e.playlist,title:s,owner:e.owner,isEditing:i})})).catch((function(t){return t}))}},{key:"filterInt",value:function(t){return/^(-|\+)?(\d+|Infinity)$/.test(t)?Number(t):NaN}},{key:"copyUrl",value:function(){this.setState({copyUrl:!this.state.copyUrl})}},{key:"editPlaylist",value:function(){this.setState({isEditing:!0})}},{key:"editChange",value:function(){this.setState({editingChange:!0})}},{key:"editingInactive",value:function(){this.setState({isEditing:!1})}},{key:"saveTitle",value:function(t){t.preventDefault();var e=t.target.title.value;this.props.onTitleEdit(this.state.playlistId,e),e?(this.setState({title:e,editingChange:!1}),this.setState({titleError:""})):this.setState({titleError:"Please enter a title!"})}},{key:"onPageSelect",value:function(t){var e=this.props.locationQuery;e.page=t.currentTarget.dataset.page;var i=[];Object.entries(e).map((function(t){return i.push("".concat(t[0],"=").concat(t[1]))})),i=i.join("&"),this.context.router.push("".concat(this.props.url,"?").concat(i))}},{key:"render",value:function(){var t="";t=this.state.isEditing&&!1===this.state.editingChange?Object(f.jsxs)("div",{className:"editing-container",children:[Object(f.jsx)("span",{className:"playlist-edit-text",children:"Edit mode"}),Object(f.jsx)("h3",{className:"playlist-title",children:this.state.title}),Object(f.jsx)(b.a,{className:"svg-container svg-xs",onClick:this.editChange,children:Object(f.jsx)(g.a,{})})]}):this.state.editingChange?Object(f.jsxs)("div",{className:"text-center",children:[Object(f.jsx)("span",{className:"playlist-edit-text",children:"Edit mode"}),Object(f.jsx)("span",{className:"playlist-title-error",children:this.state.titleError}),Object(f.jsxs)("form",{className:"editing-form",onSubmit:this.saveTitle,children:[Object(f.jsx)("input",{name:"title",defaultValue:this.state.title,className:"editing-input",type:"text"}),Object(f.jsx)("input",{type:"submit",className:"editing-submit",value:"Save Title"})]})]}):Object(f.jsx)("h3",{className:"playlist-title",children:this.state.title});var e=Object(f.jsx)("div",{className:"playlist-buttons",children:Object(f.jsx)("button",{className:"playlist-button",onClick:this.copyUrl,children:"Get URL"})});return this.state.editingChange?e=null:this.state.isEditing&&!this.state.editingChange?e=Object(f.jsx)("button",{className:"editing-btn",onClick:this.editingInactive,children:"Done Editing!"}):this.state.owner&&(e=Object(f.jsxs)("div",{className:"playlist-buttons",children:[Object(f.jsx)("button",{className:"playlist-button",onClick:this.copyUrl,children:"Get URL"}),Object(f.jsx)("button",{className:"playlist-button",onClick:this.editPlaylist,children:"Edit Playlist"})]})),Object(f.jsxs)("div",{className:"playlist",children:[Object(f.jsxs)(j.a,{children:[Object(f.jsxs)("title",{children:[this.state.title," \u2022 Your Playlists \u2022 Music Vine"]}),Object(f.jsx)("meta",{name:"robots",content:"noindex, nofollow"})]}),Object(f.jsxs)("div",{className:"playlist-nav ".concat(!0===this.state.isEditing?"editing-active":""),children:[this.state.owner&&Object(f.jsxs)(O.a,{to:"/customer/playlists",children:[Object(f.jsx)("span",{className:"playlist-arrow"}),Object(f.jsx)("span",{children:"My Playlists"})]}),!this.state.owner&&Object(f.jsx)("span",{children:"Shared Playlist"})]}),Object(f.jsxs)("div",{className:"playlist-header ".concat(!0===this.state.isEditing?"editing-active":""),children:[t,e,this.state.copyUrl&&Object(f.jsx)("input",{value:window.location.href.split("?")[0],readOnly:"true",className:"editing-input",type:"text"})]}),Object(f.jsx)(x.a,{url:"/playlist/".concat(this.state.playlistId),onPageSelect:this.onPageSelect,onResultClick:!1,isEditing:this.state.isEditing,playlistId:this.state.playlistId})]})}}]),i}(d.a.Component);k.contextTypes={router:u.a.object};e.default=Object(p.b)((function(t){return Object(s.a)({},t.get("userAuth"))}),(function(t){return{onFetchPlaylistTracks:function(e){t(Object(m.c)(e))},onTitleEdit:function(e,i){t(Object(v.j)(e,i))}}}))(k)},902:function(t,e,i){"use strict";var s=i(4),a=i(5),n=i(7),l=i(6),c=i(1),r=i.n(c),o=i(15),d=i.n(o),p=i(0),h=function(t){Object(n.a)(i,t);var e=Object(l.a)(i);function i(){return Object(s.a)(this,i),e.apply(this,arguments)}return Object(a.a)(i,[{key:"render",value:function(){return Object(p.jsx)(d.a,{src:'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n        \t viewBox="0 0 20 22" style="enable-background:new 0 0 20 22;" xml:space="preserve">\n        <style type="text/css">\n        \t.st871{fill:none;stroke:#ffffff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}\n        </style>\n        <g>\n        \t<polygon class="st871" points="11.8,2 15.4,5.6 5.5,15.5 1.9,15.5 1.9,11.9"/>\n        \t<line class="st871" x1="1.9" y1="20" x2="18.1" y2="20"/>\n        </g>\n        </svg>'})}}]),i}(r.a.Component);e.a=h}}]);
//# sourceMappingURL=67.chunk.js.map?hash=30c3bf47