{"version":3,"sources":["containers/BrowseStylePage/StyleInfo.js","containers/BrowseStylePage/Breadcrumb.js","containers/BrowseStylePage/index.js","actions/pageMetaAction.js","containers/StylesListPage/CategoryLink.js","containers/StylesListPage/StyleList.js","containers/StylesListPage/Styles.js","containers/StylesListPage/Categories.js","styles/svg-components/SpinnerIconRed.js","containers/StylesListPage/Filter.js"],"names":["heroStyle","style","parent","$","addClass","header_image","backgroundImage","getImgixUrl","backgroundPosition","backgroundSize","removeClass","className","to","slug","id","name","StyleInfo","description","children","length","map","subStyle","index","Breadcrumb","mainStyle","currentState","subStyles","onFilterToggle","width","A","text","BrowseStylePage","props","componentId","requestManager","generateComponentId","state","styleId","params","filter","fetchStyle","then","data","setState","router","push","catch","err","loadData","bind","this","onSetAppliedFilters","location","query","onClaimTracksOwnership","window","addEventListener","onSetNotFiltered","onCancelRequestsByComponent","onUnregisterComponent","onReleaseTracksOwnership","prevProps","search","onFetchStyleTracks","onFetchStyleCollections","energy","vocal","sort","duration","styleFilters","page","onClearTracksState","shouldFetchTopTracks","onFetchAllStyleTracks","hideCollection","hero","breadcrumb","Object","keys","Filter","document","querySelector","classList","add","remove","metaTitle","pageMetaTitle","getPageTitle","meta_title","pageMetaDesc","getPageDesc","meta_description","content","rel","href","getCanonicalUrl","Browse","url","browseStyleId","React","Component","contextTypes","PropTypes","object","mapStateToProps","createStructuredSelector","connect","dispatch","fetchTracks","fetchAllTracks","fetchStyleCollections","locationQuery","setAppliedFilters","setNotFiltered","cancelRequestsByComponent","unregisterComponent","ownerType","claimTracksOwnership","releaseTracksOwnership","clearTracksState","title","fallback","type","start","middle","undefined","desc","metaDesc","subtitle","path","origin","clean","split","charAt","replace","getTrackPageTitle","trackName","artistName","pageTitle","getGeneralPageTitle","is404","getTrackPageDesc","styles","getTags","moods","artist","track","includes","allTags","max","checkPrev","tags","newTag","tag","subtag","styled","Link","StyleList","handleImageLoaded","categoriesBlockHeightPrev","height","css","categoriesBlockHeight","TimelineMax","fromTo","ease","Power0","easeIn","tileImage","image","PLACEHOLDER_IMG_URL","tile_image","tile_svg","dangerouslySetInnerHTML","__html","onLoad","src","alt","CategoryLink","display","Styles","subtractImageTotal","storePlaceholderImages","i","rows","forEach","track_style","Categories","handleCategorySelect","e","preventDefault","targetCategory","target","dataset","category","parseInt","onCategorySelect","categories","onClick","SpinnerIconRed","viewBox","xmlns","fill","strokeWidth","strokeLinecap","cx","cy","r","categoryId","limit","handleCategoryChange","fetchPopularStyles","delay","autoAlpha","Power1","fetchCategories","filterText","fetchCategoryStyles","value","hasStyles"],"mappings":"uTAiCA,SAASA,EAAUC,GACf,GAAIA,EAAMC,QAEN,GADAC,EAAE,QAAQC,SAAS,oBAChBH,EAAMC,OAAOG,aACZ,MAAO,CAAEC,gBAAgB,OAAD,OAASC,YAAYN,EAAMC,OAAOG,aAAc,kBAAhD,KAAsEG,mBAAoB,SAAUC,eAAgB,cAGhJN,EAAE,QAAQO,YAAY,oBAE5B,OAAGT,EAAMI,aACA,CAAEC,gBAAgB,OAAD,OAASC,YAAYN,EAAMI,aAAc,kBAAzC,KAA+DG,mBAAoB,SAAUC,eAAgB,SAEhI,KAGT,SAASP,EAAOD,GACd,OAAIA,EAAMC,OACD,gCAAK,qBAAIS,UAAU,uBAAd,cAAsC,cAAC,IAAD,CAAMC,GAAE,wBAAoBX,EAAMC,OAAOW,KAAOZ,EAAMC,OAAOW,KAAOZ,EAAMC,OAAOY,IAAjF,SAAyFb,EAAMC,OAAOa,UAAiB,qBAAKJ,UAAU,iCAEnL,KAGMK,MAnDG,SAAC,GAAD,IAAGf,EAAH,EAAGA,MAAH,OAChB,qBAAKU,UAAU,gCAAf,SACE,qBAAKV,MAAOD,EAAUC,GAAQU,UAAU,oBAAxC,SACE,sBAAKA,UAAU,mCAAf,UACE,sBAAKA,UAAU,qCAAf,UACGT,EAAOD,GACR,oBAAIU,UAAS,4CAAwCV,EAAMgB,aAAyC,IAA1BhB,EAAMiB,SAASC,OAAkC,GAAnB,kBAAxG,SAAkIlB,EAAMc,OACxI,sBAAMJ,UAAU,aAAhB,SAA8BV,EAAMgB,iBAEtC,qBAAKN,UAAU,mBAAf,SACE,qBAAKA,UAAU,MAAf,SACGV,EAAMiB,UAAYjB,EAAMiB,SAASE,KAAI,SAACC,EAAUC,GAAX,OACpC,qBAAiBX,UAAU,iBAA3B,SACE,qBAAKA,UAAU,8BAAf,SACE,oBAAIA,UAAU,YAAd,SACE,6BACE,cAAC,IAAD,CAAMC,GAAE,wBAAoBS,EAASR,KAAOQ,EAASR,KAAOQ,EAASP,IAArE,SAA6EO,EAASN,cAJpFO,kB,0BCGTC,EAfI,SAAC,GAAD,IAAGC,EAAH,EAAGA,UAAsCC,GAAzC,EAAcC,UAAd,EAAyBC,eAAzB,EAAyCF,cAAzC,OACf,sBAAKd,UAAU,qBAAqBV,MAAO,CAAE2B,MAAO,QAApD,UACI,cAACC,EAAA,EAAD,CAAGlB,UAAU,qCAAqCC,GAAG,UAArD,oBACA,8BACI,+BACI,6BAAI,cAACiB,EAAA,EAAD,CAAGlB,UAAW,0DAA4Dc,EAAaxB,MAAMc,OAASS,EAAUT,KAAO,4BAA8B,IAAKH,GAAE,wBAAmBY,EAAUX,MAAzL,SAAiM,cAAC,IAAD,CAAciB,KAAMN,EAAUT,KAAMI,OAAQ,SAE7OM,EAAaxB,MAAMc,MAAQS,EAAUT,MACrC,6BAAI,cAACc,EAAA,EAAD,CAAGlB,UAAU,yDAAyDC,GAAE,wBAAoBa,EAAaxB,MAAMY,KAAOY,EAAaxB,MAAMY,KAAOY,EAAaxB,MAAMa,IAAnK,SAA0K,cAAC,IAAD,CAAcgB,KAAML,EAAaxB,MAAMc,KAAMI,OAAQ,kB,SCajPY,E,kDACJ,WAAYC,GAAQ,IAAD,8BACjB,cAAMA,IACDC,YAAcC,IAAeC,sBAClC,EAAKC,MAAQ,CACXC,QAAS,EAAKL,MAAMM,OAAOD,QAC3BpC,MAAO,GACPsC,QAAQ,GAEVC,YAAW,EAAKR,MAAMM,OAAOD,SAC1BI,MAAK,SAACC,GACL,EAAKC,SAAS,CAAE1C,MAAOyC,IAEnB,EAAKV,MAAMM,OAAOD,UAAYK,EAAK7B,MAAQ6B,EAAK7B,MAElD,EAAKmB,MAAMY,OAAOC,KAAK,iBAAmBH,EAAK7B,SAGlDiC,OAAM,SAACC,GAAD,OAASA,KAElB,EAAKC,SAAW,EAAKA,SAASC,KAAd,gBAChB,EAAKtB,eAAiB,EAAKA,eAAesB,KAApB,gBApBL,E,sDAuBnB,WACEC,KAAKlB,MAAMmB,oBAAoBD,KAAKlB,MAAMoB,SAASC,OACnDH,KAAKlB,MAAMsB,uBAAuBJ,KAAKjB,YAAa,gB,+BAEtD,WAAqB,IAAD,OAClBsB,OAAOC,iBACL,YACA,WACE,EAAKxB,MAAMmB,oBAAoB,EAAKnB,MAAMoB,SAASC,OACnD,EAAKrB,MAAMyB,sBAEb,K,kCAIJ,WACEP,KAAKlB,MAAM0B,4BAA4BR,KAAKjB,aAC5CiB,KAAKlB,MAAM2B,sBAAsBT,KAAKjB,aACtCiB,KAAKlB,MAAM4B,yBAAyBV,KAAKjB,e,gCAE3C,SAAmB4B,GAAY,IAAD,QAE1BX,KAAKd,MAAMC,UAAYa,KAAKlB,MAAMM,OAAOD,SACxCa,KAAKlB,MAAMoB,SAASU,SAAWD,EAAUT,SAASU,QAClB,KAA/BZ,KAAKlB,MAAMoB,SAASU,UAEtBZ,KAAKP,SAAS,CAAEN,QAASa,KAAKlB,MAAMM,OAAOD,UAC3CG,YAAWU,KAAKlB,MAAMM,OAAOD,SAC1BI,MAAK,SAACC,GACL,EAAKC,SAAS,CAAE1C,MAAOyC,OAExBI,OAAM,SAACC,GAAD,OAASA,KAClBG,KAAKlB,MAAM+B,mBACTb,KAAKlB,MAAMM,OAAOD,QAClB,EACA,EACA,YACA,EACA,GACA,EACAa,KAAKjB,aAEPiB,KAAKlB,MAAMgC,wBACTd,KAAKlB,MAAMM,OAAOD,QAClB,EACA,EACA,YACA,GACA,GAEFa,KAAKlB,MAAMmB,oBAAoBD,KAAKlB,MAAMoB,SAASC,OACnDH,KAAKlB,MAAMyB,sB,sBAIf,SAASQ,EAAQC,EAAOC,EAAMC,EAAUC,EAAcC,GAEpDpB,KAAKlB,MAAM0B,4BAA4BR,KAAKjB,aAG5CiB,KAAKlB,MAAMuC,qBAGTC,YAAqBP,EAAQC,EAAOC,EAAMC,EAAUC,EAAcC,GAElEpB,KAAKlB,MAAM+B,mBACTb,KAAKd,MAAMC,QACX4B,EACAC,EACAC,EACAC,EACAC,EACAC,EACApB,KAAKjB,aAGPiB,KAAKlB,MAAMyC,sBACTvB,KAAKd,MAAMC,QACX4B,EACAC,EACAC,EACAC,EACAC,EACAC,EACApB,KAAKjB,aAITiB,KAAKlB,MAAMgC,wBACTd,KAAKd,MAAMC,QACX4B,EACAC,EACAC,EACAE,EACAC,K,4BAIJ,WACEpB,KAAKP,SAAS,CAAEJ,QAASW,KAAKd,MAAMG,W,oBAGtC,WACE,IAAImC,GAAiB,EACjBC,EAAO,KACPpC,EAAS,KACTqC,EAAa,KACbpD,EAAY0B,KAAKd,MAAMnC,MACvByB,EAAY,GACZwB,KAAKd,MAAMnC,MAAMC,SACnBsB,EAAY0B,KAAKd,MAAMnC,MAAMC,OAC7BwB,EAAYwB,KAAKd,MAAMnC,MAAMC,OAAOgB,SACpCwD,GAAiB,GAGfxB,KAAKd,MAAMnC,MAAMiB,WACnBQ,EAAYwB,KAAKd,MAAMnC,MAAMiB,UAG3B2D,OAAOC,KAAK5B,KAAKd,MAAMnC,OAAOkB,OAAS,IACzCwD,EAAO,cAAC,EAAD,CAAW1E,MAAOiD,KAAKd,MAAMnC,QACpC2E,EACE,cAAC,EAAD,CACEpD,UAAWA,EACXE,UAAWA,EACXC,eAAgBuB,KAAKvB,eACrBF,aAAcyB,KAAKd,SAKrBc,KAAKd,MAAMG,SACbA,EAAS,cAACwC,EAAA,EAAD,KAGqB,IAA5B7B,KAAKd,MAAMnC,MAAMkB,OACnB6D,SAASC,cAAc,QAAQC,UAAUC,IAAI,aAE7CH,SAASC,cAAc,QAAQC,UAAUE,OAAO,aAG9ClC,KAAKd,MAAMC,QAAU,EACvB2C,SAASC,cAAc,QAAQC,UAAUC,IAAI,sBAE7CH,SAASC,cAAc,QAAQC,UAAUE,OAAO,sBAGlD,IAAIC,EAAY,GAEZ7D,EAAUT,MAAQmC,KAAKd,MAAMnC,MAAMc,OAASS,EAAUT,KACxDsE,EAAS,UAAMnC,KAAKd,MAAMnC,MAAMc,KAAvB,YAA+BS,EAAUT,KAAzC,UACAmC,KAAKd,MAAMnC,MAAMc,OAC1BsE,EAAS,UAAMnC,KAAKd,MAAMnC,MAAMc,KAAvB,WAIX,IAAMuE,EAAgBC,YACpBrC,KAAKd,MAAMnC,MAAMuF,WACjBH,EACA,SAEII,EAAeC,YACnBxC,KAAKd,MAAMnC,MAAM0F,iBACjB,CACE5E,KAAMmC,KAAKd,MAAMnC,MAAMc,MAEzB,SAGF,OACE,0BAASD,GAAG,oBAAZ,UACE,eAAC,IAAD,WACE,gCAAQwE,IACR,sBAAMvE,KAAK,cAAc6E,QAASH,IAClC,sBAAMI,IAAI,YAAYC,KAAMC,YAAgB,iBAAD,OAAkB7C,KAAKd,MAAMnC,MAAMY,MAAQqC,KAAKd,MAAMC,eAElGE,EACD,cAACyD,EAAA,EAAD,CACEpB,WAAYA,EACZqB,IAAG,wBAAmB/C,KAAKd,MAAMC,SACjCsC,KAAMA,EACN3B,SAAUE,KAAKF,SACfkD,cAAehD,KAAKd,MAAMC,QAC1BqC,eAAgBA,W,GA/MIyB,IAAMC,WAsNpCrE,EAAgBsE,aAAe,CAC7BzD,OAAQ0D,IAAUC,QAOpB,IAuFMC,EAAkBC,mCAAyB,IAGlCC,sBAAQF,GA1FI,SAACG,GAAD,MAAe,CACxC5C,mBAAoB,SAClB1B,EACA4B,EACAC,EACAC,EACAC,EACAC,EACAC,EACArC,GAEA0E,EACEC,YACE,QACAvE,EACA4B,EACAC,EACAC,EACAC,EACAC,EACAC,EACArC,KAINwC,sBAAuB,SACrBpC,EACA4B,EACAC,EACAC,EACAC,EACAC,EACAC,EACArC,GAEA0E,EACEE,YACE,QACAxE,EACA4B,EACAC,EACAC,EACAC,EACAC,EACAC,EACA,IACC,GACD,EACArC,KAIN+B,wBAAyB,SACvB3B,EACA4B,EACAC,EACAC,EACAE,EACAC,GAEAqC,EACEG,YAAsBzE,EAAS4B,EAAQC,EAAOC,EAAME,EAAcC,KAGtEnB,oBAAqB,SAAC4D,GACpBJ,EAASK,YAAkBD,KAE7BtD,iBAAkB,WAChBkD,EAASM,gBAEXvD,4BAA6B,SAACzB,GAC5B0E,EAASO,YAA0BjF,KAErC0B,sBAAuB,SAAC1B,GACtB0E,EAASQ,YAAoBlF,KAE/BqB,uBAAwB,SAACrB,EAAamF,GACpCT,EAASU,YAAqBpF,EAAamF,KAE7CxD,yBAA0B,SAAC3B,GACzB0E,EAASW,YAAuBrF,KAElCsC,mBAAoB,WAClBoC,EAASY,mBAOEb,CAA6C3E,I,iCCjVrD,SAASwD,EAAaiC,EAAOC,EAAUC,GAC1C,IACIC,EAAQF,EACRG,EAAS,GAGb,GAAIJ,GAAmB,KAAVA,EACP,OAAOA,EAGb,QAAiBK,IAAbJ,GAAuC,KAAbA,EAC1B,MAAO,GAGX,OAAQC,GACJ,IAAK,SACDE,EAAS,6BACT,MACJ,IAAK,aACDA,EAAS,kBACT,MACJ,IAAK,QACL,IAAK,QAGL,IAAK,UACDA,EAAS,kBACT,MACJ,QACIA,EAAS,qCAGjB,MAAM,GAAN,OAAUD,EAAV,YA/BgB,SA+BhB,YAAgCC,EAAhC,YA/BgB,SA+BhB,YA5BU,cA+BP,SAASlC,EAAYoC,EAAML,EAAUC,GACxC,IAAIK,EAAW,GAEf,GAAID,GAAiB,KAATA,EACN,OAAOA,EAGb,QAAiBD,IAAbJ,GAAuC,KAAbA,EAC1B,MAAO,GAGX,OAAQC,GACJ,IAAK,aACGD,GAAYA,EAASK,MAAQL,EAAS1G,KACtCgH,EAAQ,UAAMN,EAASK,KAAf,qBAAgCL,EAAS1G,KAAzC,oBACD0G,GAAYA,EAAS1G,OAC5BgH,EAAQ,6CAAyCN,EAAS1G,KAAlD,gFAEZ,MACJ,IAAK,QACG0G,GAAYA,EAAS1G,OACrBgH,EAAQ,6BAAyBN,EAAS1G,KAAlC,6GAEZ,MACJ,IAAK,SACG0G,GAAYA,EAAS1G,OACrBgH,EAAQ,6BAAyBN,EAAS1G,KAAlC,0GAEZ,MACJ,IAAK,QACG0G,GAAYA,EAAS1G,OACrBgH,EAAQ,kBAAcN,EAAS1G,KAAvB,mEAEZ,MACJ,IAAK,UAEGgH,EADAN,EAASO,SACD,UAAMP,EAAS1G,KAAf,aAAwB0G,EAASO,UAE9BP,EAAS1G,KAExB,MACJ,QACIgH,EAAW,GAGnB,OAAOA,EAKJ,SAAShC,EAAgBkC,GAC5B,IAAMC,EAAS,wBACf,IAAKD,GAAiB,KAATA,EACT,MAAM,GAAN,OAAUC,EAAV,KAEJ,IAAIC,EAAQF,EAAKG,MAAM,KAAK,GAAGA,MAAM,KAAK,GAO1C,MANwB,MAApBD,EAAME,OAAO,KACbF,EAAK,WAAOA,IAEZA,EAAMhH,OAAS,IACfgH,EAAQA,EAAMG,QAAQ,OAAQ,KAE5B,GAAN,OAAUJ,GAAV,OAAmBC,GAGhB,SAASI,EAAkBC,EAAWC,GACzC,IAAIC,EAAY,GAIhB,OAHIF,GAAaC,IACbC,EAAS,UAAMF,EAAN,eAAsBC,EAAtB,8CAENC,EAGJ,SAASC,EAAoBhB,EAAOC,EAAQH,EAAUmB,GACzD,IAAIF,EAAY,GAEhB,GAAIE,EACA,MAAO,mCASX,GANIjB,IACAe,EAAYf,GAEZC,IACAc,GAAS,kBAAUd,IAEL,KAAdc,EAAkB,CAClB,IAAIjB,GAAyB,KAAbA,EAGZ,MAAO,GAFPiB,EAAS,UAAMjB,EAAN,2BAQjB,OAFAiB,GAAa,qBAKV,SAASG,EAAiBnG,GAC7B,IAAIqF,EAAW,GAEXe,EAASC,EAAQrG,EAAKoG,OAAQ,GAC9BE,EAAQD,EAAQrG,EAAKsG,MAAO,EAAGF,GAgBnC,OAZAf,EAAQ,yBAAqBiB,EAAM,GAA3B,gBAAqCA,EAAM,GAA3C,uBAA4DtG,EAAKuG,OAAjE,+BAA8FH,EAAO,GAArG,gBAA+GA,EAAO,GAAtH,iCAAiJpG,EAAKwG,MAAtJ,UAIKC,SAAS,eAEdpB,EADArF,EAAKwG,OAASxG,EAAKuG,OACX,mBAAevG,EAAKwG,MAApB,gBAAiCxG,EAAKuG,OAAtC,kEAEG,IAIZlB,EAGX,SAASgB,EAAQK,EAASC,EAAKC,GAC3B,IAAIC,EAAO,GACPC,GAAS,EAEb,IAAK,IAAIC,KAAOL,EAAS,CACrB,IAAK,IAAIM,KAAUN,EAAQK,GAWvB,GAVAD,EAASJ,EAAQK,GAAKC,GAAQ,GAE1BJ,GACKA,EAAUH,SAASK,IAIxBD,EAAK1G,KAAK2G,GAGVD,EAAKpI,QAAUkI,EACf,MAIR,GAAIE,EAAKpI,QAAUkI,EACf,MAIR,OAAOE,EAvLX,6M,sKCGeI,cAAOC,IAAPD,CAAf,kV,yBCEqBE,E,kDACjB,WAAY7H,GAAQ,IAAD,8BACf,cAAMA,IAED8H,kBAAoB,EAAKA,kBAAkB7G,KAAvB,gBAHV,E,qDAKnB,WACI,IAAI8G,EAA4B5J,EAAE,0BAA0B6J,SAC5D7J,EAAE,0BAA0B8J,IAAI,SAAU,QAC1C,IAAIC,EAAwB/J,EAAE,0BAA0B6J,UAC/C,IAAIG,KACVC,OAAOjK,EAAE,0BAA2B,GAAK,CAAC6J,OAAQD,GAA4B,CAACC,OAAQE,EAAuBG,KAAMC,OAAOC,W,oBAGpI,WACE,IACIC,EADAC,EAAQC,IAgBZ,MAbmC,IAA/BxH,KAAKlB,MAAM/B,MAAM0K,aACnBF,EAAQvH,KAAKlB,MAAM/B,MAAM0K,YAGtBzH,KAAKlB,MAAM/B,MAAM2K,UACpB1H,KAAKlB,MAAM/B,MAAM2K,SAAW1H,KAAKlB,MAAM/B,MAAM2K,SAAStC,QAAQ,eAAgB,IAC9EpF,KAAKlB,MAAM/B,MAAM2K,SAAW1H,KAAKlB,MAAM/B,MAAM2K,SAAStC,QAAQ,wBAAyB,wBAA0BpF,KAAKlB,MAAM/B,MAAMa,IAElI0J,EAAY,mBAAGK,wBAAyB,CAAEC,OAAQ5H,KAAKlB,MAAM/B,MAAM2K,UAAYG,OAAQ7H,KAAK4G,kBAAkB7G,KAAKC,SAEnHsH,EAAY,qBAAKQ,IAAKP,EAAOQ,IAAK/H,KAAKlB,MAAM/B,MAAMc,KAAMgK,OAAQ7H,KAAK4G,kBAAkB7G,KAAKC,QAI7F,qBAAKvC,UAAU,iCAAf,SACE,cAACuK,EAAD,CAActK,GAAE,wBAAoBsC,KAAKlB,MAAM/B,MAAMY,KAAOqC,KAAKlB,MAAM/B,MAAMY,KAAOqC,KAAKlB,MAAM/B,MAAMa,IAAOb,MAAO,CAAEkL,QAAS,SAA9H,SACE,sBAAKxK,UAAU,6CAAf,UACE,qBAAKA,UAAU,gCACb6J,a,GApCyBrE,IAAMC,WCCxBgF,E,4JACnB,WAME,IAJA,IACIC,EAAqB,GADPnI,KAAKlB,MAAM8G,OAAO3H,OAGhCmK,EAAyB,GACrBC,EAAE,EAAGA,EAAEF,EAAoBE,IAAK,CAIpCD,EAAuBzI,KAHR,CACXoD,IAAK,4DAKb,IAAMuF,EAAO,GAWb,MAViC,kBAAtBtI,KAAKlB,MAAM8G,QACpB5F,KAAKlB,MAAM8G,OAAO2C,SAAQ,SAACxL,GACpBA,EAAMyL,YACLF,EAAK3I,KAAK,cAAC,EAAD,CAAW5C,MAAOA,EAAMyL,aAAkBzL,EAAMyL,YAAY5K,KAEtE0K,EAAK3I,KAAK,cAAC,EAAD,CAAW5C,MAAOA,GAAYA,EAAMa,QAMtD,sBAAKH,UAAU,MAAf,UACK6K,EACAF,EAAuBlK,KAAI,SAACqJ,EAAOc,GAAQ,OAAO,qBAAa5K,UAAU,oDAAvB,SAA2E,qBAAKqK,IAAKP,EAAMxE,OAAjFsF,a,GA5BnCpF,IAAMC,WCArBuF,G,wDACnB,WAAY3J,GAAQ,IAAD,8BACjB,cAAMA,IACD4J,qBAAuB,EAAKA,qBAAqB3I,KAA1B,gBAFX,E,wDAKnB,SAAqB4I,GACnBA,EAAEC,iBACF,IAAIC,EAAiBF,EAAEG,OAAOC,QAAQC,SAEf,YAAnBH,IACFA,EAAiBI,SAASJ,IAG5B7I,KAAKlB,MAAMoK,iBAAkBL,GAC7B5L,EAAE,0BAA0BO,YAAY,sBACxCP,EAAE,2BAA2BO,YAAY,UAEzCP,EAAE,sCAAD,OAAuC4L,EAAvC,OAA2D3L,SAAS,sBACrED,EAAE,0CAAD,OAA2C4L,EAA3C,OAA+D3L,SAAS,Y,oBAG3E,WAAU,IAAD,OACP,OACE,sBAAKO,UAAU,aAAf,UACE,sBAAKA,UAAU,+DAAf,UACoC,IAAjCuC,KAAKlB,MAAMqK,WAAWlL,QACvB,cAAC+J,EAAD,CAAcvK,UAAU,cAAc2L,QAASpJ,KAAK0I,qBAAsB9K,GAAI,gCAAiC,gBAAe,UAA9H,qBAEkC,IAAjCoC,KAAKlB,MAAMqK,WAAWlL,QAAgB+B,KAAKlB,MAAMqK,WAAWjL,KAAI,SAAC8K,EAAU5K,GAAX,OAC/D,cAAC4J,EAAD,CAAcvK,UAAU,OAAmBmF,KAAK,IAAIwG,QAAS,EAAKV,qBAAsB9K,GAAE,gCAA2BoL,EAASpL,IAAM,gBAAeoL,EAASpL,GAA5J,SAAiKoL,EAASnL,MAAtIO,SAGxC,qBAAKX,UAAU,mEAAf,SACE,qBAAIA,UAAU,6BAAd,UACoC,IAAjCuC,KAAKlB,MAAMqK,WAAWlL,QACvB,6BAAI,mBAAGR,UAAU,qBAAqB2L,QAASpJ,KAAK0I,qBAAsB9K,GAAI,4BAA6B,gBAAe,UAAtH,uBAE8B,IAAjCoC,KAAKlB,MAAMqK,WAAWlL,QAAgB+B,KAAKlB,MAAMqK,WAAWjL,KAAI,SAAC8K,EAAU5K,GAAX,OAC/D,6BAAgB,mBAAGgL,QAAS,EAAKV,qBAAsB9K,GAAE,4BAAuBoL,EAASpL,IAAM,gBAAeoL,EAASpL,GAAvG,SAA4GoL,EAASnL,QAA5HO,kB,GAvCiB6E,IAAMC,YCHxCmG,G,kKACJ,WACE,OACE,qBAAK5L,UAAU,0BAAf,SACE,qBAAKA,UAAU,eAAeiB,MAAM,OAAOoI,OAAO,OAAOwC,QAAQ,YAAYC,MAAM,6BAAnF,SACE,wBAAQ9L,UAAU,OAAO+L,KAAK,OAAOC,YAAY,IAAIC,cAAc,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,e,GAL1E3G,cAYdmG,ICNMxH,E,kDACnB,WAAY/C,GAAQ,IAAD,8BACjB,cAAMA,IACDI,MAAQ,CACX4K,WAAY,EACZlE,OAAQ,GACRmE,MAAO,EACPZ,WAAY,IAId,EAAKT,qBAAuB,EAAKA,qBAAqB3I,KAA1B,gBAC5B,EAAKiK,qBAAuB,EAAKA,qBAAqBjK,KAA1B,gBAXX,E,qDAenB,WAAqB,IAAD,OAClBkK,cAAqB1K,MAAK,SAACC,GACzB,EAAKC,SAAS,CACZmG,OAAQpG,IAEC,IAAIyH,YAAY,CAAEiD,MAAO,IAEnChD,OAAOjK,EAAE,wBAAyB,GAAK,CAAEkN,UAAW,GAAK,CAAEA,UAAW,EAAGhD,KAAMiD,OAAO/C,YACtFzH,OAAM,SAACC,GAAD,OAASA,KAElBwK,cAAkB9K,MAAK,SAACC,GACF,kBAATA,GACT,EAAKC,SAAS,CACZ0J,WAAY3J,OAGfI,OAAM,SAACC,GAAD,OAASA,O,kCAGpB,SAAqByK,GAAa,IAAD,OACb,WAAdA,EACFL,cAAqB1K,MAAK,SAACC,GACzB,EAAKC,SAAS,CAAEmG,OAAQpG,OACvBI,OAAM,SAACC,GAAD,OAASA,KAElB0K,YAAoBD,EAAYtK,KAAKd,MAAM6K,OAAOxK,MAAK,SAACC,GACtD,EAAKC,SAAS,CAAEmG,OAAQpG,OACvBI,OAAM,SAACC,GAAD,OAASA,O,kCAItB,SAAqB8I,GACnB3I,KAAK0I,qBAAqBC,EAAEG,OAAO0B,S,oBAGrC,WACE,IAAMC,EAAYzK,KAAKd,MAAM0G,OAAO3H,OAAS,EAC7C,OACE,sBAAKR,UAAU,0BAAf,WACIgN,GACA,cAAC,EAAD,IAEF,sBAAKhN,UAAU,yBAAf,UACE,qBAAKA,UAAU,kBAAf,SACE,cAAC,EAAD,CACE0L,WAAYnJ,KAAKd,MAAMiK,WACvBW,WAAY9J,KAAKd,MAAM4K,WACvBZ,iBAAkBlJ,KAAK0I,yBAG3B,qBAAKjL,UAAU,yCAAyCV,MAAO,CAAE,UAAc0N,EAAY,OAAS,KAApG,SACGA,GACC,cAAC,EAAD,CACE7E,OAAQ5F,KAAKd,MAAM0G,qB,GArEC3C,IAAMC","file":"static/js/47.chunk.js?hash=b92f1047","sourcesContent":["import React from 'react';\nimport { Link } from 'react-router';\nimport {getImgixUrl} from \"../../utils/helpers\";\n\nconst StyleInfo = ({ style }) => (\n  <div className=\"d-flex flex-column d-lg-block\">\n    <div style={heroStyle(style)} className=\"hero hero--styles\">\n      <div className=\"hero__main hero__main--secondary\">\n        <div className=\"hero__intro hero__intro--secondary\">\n          {parent(style)}\n          <h1 className={`hero__title hero__title--secondary${!style.description && style.children.length === 0 ? ' no-style-info' : ''}`}>{style.name}</h1>\n          <span className=\"hero__desc\">{style.description}</span>\n        </div>\n        <div className=\"hero__categories\">\n          <div className=\"row\">\n            {style.children && style.children.map((subStyle, index) => (\n              <div key={index} className=\"col-6 col-md-4\">\n                <div className=\"hero__list hero__list--left\">\n                  <ul className=\"list-bare\">\n                    <li>\n                      <Link to={`/browse/style/${ subStyle.slug ? subStyle.slug : subStyle.id }`}>{subStyle.name}</Link>\n                    </li>\n                  </ul>\n                </div>\n              </div>\n                )) }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n);\n\nfunction heroStyle(style) {\n    if (style.parent) {\n        $('body').addClass(\"sub-style-parent\");\n        if(style.parent.header_image) {\n            return { backgroundImage: `url(${getImgixUrl(style.parent.header_image, \"?auto=compress\")})`, backgroundPosition: 'center', backgroundSize: 'cover' };\n        }\n    } else {\n        $('body').removeClass(\"sub-style-parent\");\n    }\n  if(style.header_image) {\n    return { backgroundImage: `url(${getImgixUrl(style.header_image, \"?auto=compress\")})`, backgroundPosition: 'center', backgroundSize: 'cover' };\n  }\n  return null;\n}\n\nfunction parent(style) {\n  if (style.parent) {\n    return <div><h4 className=\"browse-parent__style\"> <Link to={`/browse/style/${ style.parent.slug ? style.parent.slug : style.parent.id }`}>{style.parent.name}</Link></h4><div className=\"browse-parent__style-line\"></div></div>;\n  }\n  return null;\n}\n\nexport default StyleInfo;\n","import React from 'react';\nimport A from 'components/A';\nimport EllipsisText from 'react-ellipsis-text';\n\nconst Breadcrumb = ({ mainStyle, subStyles, onFilterToggle, currentState }) => (\n    <div className=\"filter__categories\" style={{ width: 'auto' }}>\n        <A className=\"filter__title filter__title--first\" to=\"/styles\">Styles</A>\n        <div>\n            <ul>\n                <li><A className={\"filter__styles-dropdown filter__styles-dropdown--main \" + (currentState.style.name === mainStyle.name ? \"filter__breadcrumb-active\" : \"\")} to={`/browse/style/${mainStyle.slug}`}><EllipsisText text={mainStyle.name} length={30} /></A></li>\n                {\n                    currentState.style.name != mainStyle.name &&\n                    <li><A className=\"filter__styles-dropdown--sub filter__breadcrumb-active\" to={`/browse/style/${ currentState.style.slug ? currentState.style.slug : currentState.style.id }`}><EllipsisText text={currentState.style.name} length={30} /></A></li>\n                }\n            </ul>\n        </div>\n    </div>\n);\n\nexport default Breadcrumb;\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport Helmet from \"react-helmet\";\nimport PropTypes from \"prop-types\";\nimport { createStructuredSelector } from \"reselect\";\nimport { fetchStyle } from \"actions/styleAction\";\nimport {\n  fetchTracks,\n  fetchAllTracks,\n  shouldFetchTopTracks,\n  cancelRequestsByComponent,\n  clearTracksState,\n  unregisterComponent,\n  claimTracksOwnership,\n  releaseTracksOwnership,\n} from \"actions/trackAction\";\nimport { fetchStyleCollections } from \"actions/collectionAction\";\nimport { setAppliedFilters, setNotFiltered } from \"actions/browseAction\";\nimport { getPageTitle, getPageDesc, getCanonicalUrl } from \"actions/pageMetaAction\";\nimport requestManager from \"../../utils/requestManager\";\nimport Browse from \"containers/Browse\";\nimport StyleInfo from \"./StyleInfo\";\nimport Breadcrumb from \"./Breadcrumb\";\nimport Filter from \"../StylesListPage/Filter\";\n\nclass BrowseStylePage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.componentId = requestManager.generateComponentId();\n    this.state = {\n      styleId: this.props.params.styleId,\n      style: {},\n      filter: false,\n    };\n    fetchStyle(this.props.params.styleId)\n      .then((data) => {\n        this.setState({ style: data });\n\n        if (this.props.params.styleId !== data.slug && data.slug) {\n          // Change url\n          this.props.router.push(\"/browse/style/\" + data.slug);\n        }\n      })\n      .catch((err) => err);\n\n    this.loadData = this.loadData.bind(this);\n    this.onFilterToggle = this.onFilterToggle.bind(this);\n  }\n\n  componentWillMount() {\n    this.props.onSetAppliedFilters(this.props.location.query);\n    this.props.onClaimTracksOwnership(this.componentId, \"style-page\");\n  }\n  componentDidMount() {\n    window.addEventListener(\n      \"popstate\",\n      () => {\n        this.props.onSetAppliedFilters(this.props.location.query);\n        this.props.onSetNotFiltered();\n      },\n      false\n    );\n  }\n\n  componentWillUnmount() {\n    this.props.onCancelRequestsByComponent(this.componentId);\n    this.props.onUnregisterComponent(this.componentId);\n    this.props.onReleaseTracksOwnership(this.componentId);\n  }\n  componentDidUpdate(prevProps) {\n    if (\n      this.state.styleId !== this.props.params.styleId ||\n      (this.props.location.search !== prevProps.location.search &&\n        this.props.location.search === \"\")\n    ) {\n      this.setState({ styleId: this.props.params.styleId });\n      fetchStyle(this.props.params.styleId)\n        .then((data) => {\n          this.setState({ style: data });\n        })\n        .catch((err) => err);\n      this.props.onFetchStyleTracks(\n        this.props.params.styleId,\n        0,\n        0,\n        \"Relevance\",\n        0,\n        [],\n        1,\n        this.componentId\n      );\n      this.props.onFetchStyleCollections(\n        this.props.params.styleId,\n        0,\n        0,\n        \"Relevance\",\n        [],\n        1\n      );\n      this.props.onSetAppliedFilters(this.props.location.query);\n      this.props.onSetNotFiltered();\n    }\n  }\n\n  loadData(energy, vocal, sort, duration, styleFilters, page) {\n    // Cancel any in-flight requests from this component before starting new ones\n    this.props.onCancelRequestsByComponent(this.componentId);\n\n    // Clear tracks state to show loading indicator\n    this.props.onClearTracksState();\n\n    if (\n      shouldFetchTopTracks(energy, vocal, sort, duration, styleFilters, page)\n    ) {\n      this.props.onFetchStyleTracks(\n        this.state.styleId,\n        energy,\n        vocal,\n        sort,\n        duration,\n        styleFilters,\n        page,\n        this.componentId\n      );\n    } else {\n      this.props.onFetchAllStyleTracks(\n        this.state.styleId,\n        energy,\n        vocal,\n        sort,\n        duration,\n        styleFilters,\n        page,\n        this.componentId\n      );\n    }\n\n    this.props.onFetchStyleCollections(\n      this.state.styleId,\n      energy,\n      vocal,\n      sort,\n      styleFilters,\n      page\n    );\n  }\n\n  onFilterToggle() {\n    this.setState({ filter: !this.state.filter });\n  }\n\n  render() {\n    let hideCollection = false;\n    let hero = null;\n    let filter = null;\n    let breadcrumb = null;\n    let mainStyle = this.state.style;\n    let subStyles = [];\n    if (this.state.style.parent) {\n      mainStyle = this.state.style.parent;\n      subStyles = this.state.style.parent.children;\n      hideCollection = true;\n    }\n\n    if (this.state.style.children) {\n      subStyles = this.state.style.children;\n    }\n\n    if (Object.keys(this.state.style).length > 0) {\n      hero = <StyleInfo style={this.state.style} />;\n      breadcrumb = (\n        <Breadcrumb\n          mainStyle={mainStyle}\n          subStyles={subStyles}\n          onFilterToggle={this.onFilterToggle}\n          currentState={this.state}\n        />\n      );\n    }\n\n    if (this.state.filter) {\n      filter = <Filter />;\n    }\n\n    if (this.state.style.length === 0) {\n      document.querySelector(\"body\").classList.add(\"no-styles\");\n    } else {\n      document.querySelector(\"body\").classList.remove(\"no-styles\");\n    }\n\n    if (this.state.styleId > 0) {\n      document.querySelector(\"body\").classList.add(\"main-styles-active\");\n    } else {\n      document.querySelector(\"body\").classList.remove(\"main-styles-active\");\n    }\n\n    let metaTitle = \"\";\n\n    if (mainStyle.name && this.state.style.name !== mainStyle.name) {\n      metaTitle = `${this.state.style.name} ${mainStyle.name} Music`;\n    } else if (this.state.style.name) {\n      metaTitle = `${this.state.style.name} Music`;\n    }\n\n    // Helmet component params.\n    const pageMetaTitle = getPageTitle(\n      this.state.style.meta_title,\n      metaTitle,\n      \"style\"\n    );\n    const pageMetaDesc = getPageDesc(\n      this.state.style.meta_description,\n      {\n        name: this.state.style.name,\n      },\n      \"style\"\n    );\n\n    return (\n      <section id=\"browse-style-page\">\n        <Helmet>\n          <title>{pageMetaTitle}</title>\n          <meta name=\"description\" content={pageMetaDesc} />\n          <link rel=\"canonical\" href={getCanonicalUrl(`/browse/style/${this.state.style.slug || this.state.styleId}`)} />\n        </Helmet>\n        {filter}\n        <Browse\n          breadcrumb={breadcrumb}\n          url={`/browse/style/${this.state.styleId}`}\n          hero={hero}\n          loadData={this.loadData}\n          browseStyleId={this.state.styleId}\n          hideCollection={hideCollection}\n        />\n      </section>\n    );\n  }\n}\n\nBrowseStylePage.contextTypes = {\n  router: PropTypes.object,\n};\n\nBrowseStylePage.propTypes = {\n  params: PropTypes.object,\n};\n\nconst mapDispatchToProps = (dispatch) => ({\n  onFetchStyleTracks: (\n    styleId,\n    energy,\n    vocal,\n    sort,\n    duration,\n    styleFilters,\n    page,\n    componentId\n  ) => {\n    dispatch(\n      fetchTracks(\n        \"style\",\n        styleId,\n        energy,\n        vocal,\n        sort,\n        duration,\n        styleFilters,\n        page,\n        componentId\n      )\n    );\n  },\n  onFetchAllStyleTracks: (\n    styleId,\n    energy,\n    vocal,\n    sort,\n    duration,\n    styleFilters,\n    page,\n    componentId\n  ) => {\n    dispatch(\n      fetchAllTracks(\n        \"style\",\n        styleId,\n        energy,\n        vocal,\n        sort,\n        duration,\n        styleFilters,\n        page,\n        [],\n        -1,\n        false,\n        componentId\n      )\n    );\n  },\n  onFetchStyleCollections: (\n    styleId,\n    energy,\n    vocal,\n    sort,\n    styleFilters,\n    page\n  ) => {\n    dispatch(\n      fetchStyleCollections(styleId, energy, vocal, sort, styleFilters, page)\n    );\n  },\n  onSetAppliedFilters: (locationQuery) => {\n    dispatch(setAppliedFilters(locationQuery));\n  },\n  onSetNotFiltered: () => {\n    dispatch(setNotFiltered());\n  },\n  onCancelRequestsByComponent: (componentId) => {\n    dispatch(cancelRequestsByComponent(componentId));\n  },\n  onUnregisterComponent: (componentId) => {\n    dispatch(unregisterComponent(componentId));\n  },\n  onClaimTracksOwnership: (componentId, ownerType) => {\n    dispatch(claimTracksOwnership(componentId, ownerType));\n  },\n  onReleaseTracksOwnership: (componentId) => {\n    dispatch(releaseTracksOwnership(componentId));\n  },\n  onClearTracksState: () => {\n    dispatch(clearTracksState());\n  },\n});\n\nconst mapStateToProps = createStructuredSelector({});\n\n// Wrap the component to inject dispatch and state into it\nexport default connect(mapStateToProps, mapDispatchToProps)(BrowseStylePage);\n","export function getPageTitle(title, fallback, type) {\n    let separator = \"•\";\n    let start = fallback;\n    let middle = \"\";\n    let end = \"Music Vine\";\n\n    if (title && title !== \"\") {\n          return title;\n    }\n\n    if (fallback === undefined || fallback === \"\") {\n        return \"\";\n    }\n\n    switch (type) {\n        case 'artist':\n            middle = 'Production Music Licensing';\n            break;\n        case 'collection':\n            middle = 'Music For Video';\n            break;\n        case 'style':\n        case 'track':\n            middle = 'Music Licensing';\n            break;\n        case 'general':\n            middle = 'Music Licensing';\n            break;\n        default:\n            middle = 'Music Licensing For Video And Film';\n    }\n\n    return `${start} ${separator} ${middle} ${separator} ${end}`;\n}\n\nexport function getPageDesc(desc, fallback, type) {\n    let metaDesc = \"\";\n\n    if (desc && desc !== \"\") {\n          return desc;\n    }\n\n    if (fallback === undefined || fallback === \"\") {\n        return \"\";\n    }\n\n    switch (type) {\n        case 'collection':\n            if (fallback && fallback.desc && fallback.name) {\n                metaDesc = `${fallback.desc} Explore '${fallback.name}' on Music Vine.`;\n            } else if (fallback && fallback.name) {\n                metaDesc = `Browse and license tracks from the ${fallback.name} collection — production music for film, TV and video from Music Vine.`;\n            }\n            break;\n        case 'style':\n            if (fallback && fallback.name) {\n                metaDesc = `Browse and license ${fallback.name} music for film, TV and video productions — production music from Music Vine's world-class catalog.`;\n            }\n            break;\n        case 'artist':\n            if (fallback && fallback.name) {\n                metaDesc = `License music from ${fallback.name} on Music Vine — production music for film, TV and video from world-class artists and composers.`;\n            }\n            break;\n        case 'track':\n            if (fallback && fallback.name) {\n                metaDesc = `License ${fallback.name} on Music Vine — production music for film, TV and video.`;\n            }\n            break;\n        case 'general':\n            if (fallback.subtitle) {\n                metaDesc = `${fallback.name}. ${fallback.subtitle}`;\n            } else {\n                metaDesc = fallback.name;\n            }\n            break;\n        default:\n            metaDesc = '';\n    }\n\n    return metaDesc;\n}\n\n// Canonical URLs always point at the production origin (never staging/preview),\n// and drop any query string / hash so faceted variants fold to the base path.\nexport function getCanonicalUrl(path) {\n    const origin = \"https://musicvine.com\";\n    if (!path || path === \"\") {\n        return `${origin}/`;\n    }\n    let clean = path.split(\"?\")[0].split(\"#\")[0];\n    if (clean.charAt(0) !== \"/\") {\n        clean = `/${clean}`;\n    }\n    if (clean.length > 1) {\n        clean = clean.replace(/\\/+$/, \"\");\n    }\n    return `${origin}${clean}`;\n}\n\nexport function getTrackPageTitle(trackName, artistName) {\n    let pageTitle = \"\";\n    if (trackName && artistName) {\n        pageTitle = `${trackName} by ${artistName} • Music Licensing • Music Vine`;\n    }\n    return pageTitle;\n}\n\nexport function getGeneralPageTitle(start, middle, fallback, is404) {\n    let pageTitle = \"\";\n\n    if (is404) {\n        return \"Page not found • Music Vine\";\n    }\n\n    if (start) {\n        pageTitle = start;\n    }\n    if (middle) {\n        pageTitle += ` • ${middle}`\n    }\n    if (pageTitle === \"\") {\n        if (fallback && fallback !== \"\") {\n            pageTitle = `${fallback} • Music Licensing`;\n        } else {\n            return \"\";\n        }\n    }\n\n    pageTitle += \" • Music Vine\";\n\n    return pageTitle;\n}\n\nexport function getTrackPageDesc(data) {\n    let metaDesc = \"\";\n\n    let styles = getTags(data.styles, 2);\n    let moods = getTags(data.moods, 2, styles);\n\n    // Listen to this [Mood 1] and [Mood 2] track from [Artist] that's perfect for [Style 1] and [Style 2] productions. License [Track Name] now.\n    \n    metaDesc = `Listen to this ${moods[0]} and ${moods[1]} track from ${data.artist} that's perfect for ${styles[0]} and ${styles[1]} productions. License ${data.track} now.`;\n\n    // If any tag/field came back undefined, fall back to a simpler description\n    // rather than shipping an empty meta description.\n    if (metaDesc.includes(\"undefined\")) {\n        if (data.track && data.artist) {\n            metaDesc = `License '${data.track}' by ${data.artist} on Music Vine — production music for film, TV and video.`;\n        } else {\n            metaDesc = \"\";\n        }\n    }\n\n    return metaDesc;\n}\n\nfunction getTags(allTags, max, checkPrev){\n    let tags = [];\n    let newTag = false;\n\n    for (var tag in allTags) {\n        for (var subtag in allTags[tag]) {\n            newTag = allTags[tag][subtag][0];\n\n            if (checkPrev) {\n                if (!checkPrev.includes(newTag)) {\n                    tags.push(newTag);\n                }\n            } else {\n                tags.push(newTag);\n            }\n\n            if (tags.length >= max) {\n                break;\n            }\n        }\n\n        if (tags.length >= max) {\n            break;\n        }\n    }\n\n    return tags;\n}","import { Link } from 'react-router';\nimport styled from 'styled-components';\n\nexport default styled(Link)`\n  display: inline-block;\n  text-decoration: none;\n  border-radius: 4px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-touch-callout: none;\n  user-select: none;\n  cursor: pointer;\n  outline: 0;\n  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-weight: bold;\n  font-size: 16px;\n`;\n","import React from 'react';\nimport CategoryLink from './CategoryLink';\nimport { PLACEHOLDER_IMG_URL } from 'components/ImgPlaceholder';\nimport { TimelineMax } from 'gsap';\n\nexport default class StyleList extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleImageLoaded = this.handleImageLoaded.bind(this);\n    }\n    handleImageLoaded() {\n        let categoriesBlockHeightPrev = $('.categories-main-block').height();\n        $('.categories-main-block').css(\"height\", \"auto\");\n        let categoriesBlockHeight = $('.categories-main-block').height();\n        let tl = new TimelineMax();\n        tl.fromTo($('.categories-main-block'), 0.4, {height: categoriesBlockHeightPrev}, {height: categoriesBlockHeight, ease: Power0.easeIn})\n    }\n\n  render() {\n    let image = PLACEHOLDER_IMG_URL;\n    let tileImage;\n\n    if (this.props.style.tile_image != '') {\n      image = this.props.style.tile_image;\n    }\n\n    if ( this.props.style.tile_svg ) {\n      this.props.style.tile_svg = this.props.style.tile_svg.replace('id=\"Capa_1\" ', '');\n      this.props.style.tile_svg = this.props.style.tile_svg.replace(/Degradado_sin_nombre/g, 'Degradado_sin_nombre_' + this.props.style.id);\n\n      tileImage = <i dangerouslySetInnerHTML={{ __html: this.props.style.tile_svg }} onLoad={this.handleImageLoaded.bind(this)} ></i>;\n    } else {\n      tileImage = <img src={image} alt={this.props.style.name} onLoad={this.handleImageLoaded.bind(this)} />;\n    }\n\n    return (\n      <div className=\"col-6 col-lg-5ths styles-tiles\">\n        <CategoryLink to={`/browse/style/${ this.props.style.slug ? this.props.style.slug : this.props.style.id }`} style={{ display: 'block'}}>\n          <div className=\"filter-styles__item categories-image-block\">\n            <div className=\"filter-styles__item-overlay\"></div>\n            { tileImage }\n          </div>\n          {/* <p>{this.props.style.name}</p> */}\n        </CategoryLink>\n      </div>\n    );\n  }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport StyleList from './StyleList';\nimport { PLACEHOLDER_IMG_URL } from 'components/ImgPlaceholder';\n\nexport default class Styles extends React.Component {\n  render() {\n\n    var totalImages = this.props.styles.length;\n    var subtractImageTotal = 15 - totalImages;\n\n    var storePlaceholderImages = [];\n    for(var i=0; i<subtractImageTotal; i++) {\n        var imageObj = {\n            url: 'https://cdn.musicvine.com/images/transparent-square.png'\n        }\n        storePlaceholderImages.push(imageObj);\n    }\n\n    const rows = [];\n    if (typeof this.props.styles === 'object') {\n      this.props.styles.forEach((style) => {\n          if(style.track_style){\n              rows.push(<StyleList style={style.track_style} key={style.track_style.id} />);\n          } else {\n              rows.push(<StyleList style={style} key={style.id} />);\n          }\n      });\n    }\n\n    return (\n      <div className=\"row\">\n          {rows}\n          {storePlaceholderImages.map((image, i) => { return <div key={i} className=\"d-none d-md-block col-lg-5ths styles-tiles spacer\"><img src={image.url} /></div>})}\n      </div>\n    );\n  }\n}","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { fetchCategories } from 'actions/categoryAction';\nimport CategoryLink from './CategoryLink';\nimport Spinner from 'styles/svg-components/Spinner.js';\n\nexport default class Categories extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleCategorySelect = this.handleCategorySelect.bind(this);\n  }\n\n  handleCategorySelect(e) {\n    e.preventDefault();\n    let targetCategory = e.target.dataset.category;\n\n    if (targetCategory !== 'popular') {\n      targetCategory = parseInt(targetCategory);\n    }\n\n    this.props.onCategorySelect( targetCategory );\n    $('.categories__list li a').removeClass('categories__active');\n    $('.categories-filter-sm a').removeClass('active');\n\n    $(`.categories__list a[data-category=\"${targetCategory}\"]`).addClass('categories__active');\n    $(`.categories-filter-sm a[data-category=\"${targetCategory}\"]`).addClass('active');\n  }\n\n  render() {\n    return (\n      <div className=\"categories\">\n        <div className=\"text-center categories-filter-sm collection-filter d-md-none\">\n          {this.props.categories.length !== 0 &&\n          <CategoryLink className=\"active mb-4\" onClick={this.handleCategorySelect} id={'categories___link_mob_popular'} data-category={'popular'}>Popular</CategoryLink>\n          }\n          {this.props.categories.length !== 0 && this.props.categories.map((category, index) => (\n            <CategoryLink className=\"mb-4\" key={index} href=\"#\" onClick={this.handleCategorySelect} id={`categories___link_mob_${category.id}`} data-category={category.id}>{category.name}</CategoryLink>\n          )) }\n        </div>\n        <div className=\"categories__block categories__block--secondary d-none d-md-block\">\n          <ul className=\"list-bare categories__list\">\n            {this.props.categories.length !== 0 &&\n            <li><a className=\"categories__active\" onClick={this.handleCategorySelect} id={'categories___link_popular'} data-category={'popular'}>Popular</a></li>\n            }\n            {this.props.categories.length !== 0 && this.props.categories.map((category, index) => (\n              <li key={index}><a onClick={this.handleCategorySelect} id={`categories___link_${category.id}`} data-category={category.id}>{category.name}</a></li>\n            )) }\n          </ul>\n        </div>\n      </div>\n    );\n  }\n}","import React, { Component } from 'react';\nimport InlineSVG from 'svg-inline-react';\n\nclass SpinnerIconRed extends Component {\n  render() {\n    return (\n      <div className=\"search-loading-icon red\">\n        <svg className=\"spinner-icon\" width=\"40px\" height=\"40px\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"path\" fill=\"none\" strokeWidth=\"6\" strokeLinecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\" />\n        </svg>\n      </div>\n    );\n  }\n}\n\nexport default SpinnerIconRed;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { fetchCategories } from 'actions/categoryAction';\nimport { fetchCategoryStyles, fetchPopularStyles } from 'actions/styleAction';\nimport Styles from './Styles';\nimport Categories from './Categories';\nimport SpinnerIconRed from \"../../styles/svg-components/SpinnerIconRed\";\n\nexport default class Filter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      categoryId: 1,\n      styles: [],\n      limit: 2,\n      categories: [],\n        // more: 0,\n    };\n\n    this.handleCategorySelect = this.handleCategorySelect.bind(this);\n    this.handleCategoryChange = this.handleCategoryChange.bind(this);\n    // this.handleShowMore = this.handleShowMore.bind(this);\n  }\n\n  componentDidMount() {\n    fetchPopularStyles().then((data) => {\n      this.setState({\n        styles: data,\n      });\n      const tl = new TimelineMax({ delay: 1 });\n      tl\n      .fromTo($('.filter-styles__item'), 0.5, { autoAlpha: 0 }, { autoAlpha: 1, ease: Power1.easeIn });\n    }).catch((err) => err);\n\n    fetchCategories().then((data) => {\n      if (typeof data === 'object') {\n        this.setState({\n          categories: data,\n        });\n      }\n    }).catch((err) => err);\n  }\n\n  handleCategorySelect(filterText) {\n    if (filterText == 'popular') {\n      fetchPopularStyles().then((data) => {\n        this.setState({ styles: data });\n      }).catch((err) => err);\n    } else {\n      fetchCategoryStyles(filterText, this.state.limit).then((data) => {\n        this.setState({ styles: data });\n      }).catch((err) => err);\n    }\n  }\n\n  handleCategoryChange(e) {\n    this.handleCategorySelect(e.target.value);\n  }\n\n  render() {\n    const hasStyles = this.state.styles.length > 0;\n    return (\n      <div className=\"browse-filter-container\">\n        {!hasStyles &&\n          <SpinnerIconRed />\n        }\n        <div className=\"row browse-filter-grid\">\n          <div className=\"col-12 col-lg-2\">\n            <Categories\n              categories={this.state.categories}\n              categoryId={this.state.categoryId}\n              onCategorySelect={this.handleCategorySelect}\n            />\n          </div>\n          <div className=\"col-12 col-lg-10 categories-main-block\" style={{ 'minHeight' : hasStyles ? '80vh' : '0'}}>\n            {hasStyles &&\n              <Styles\n                styles={this.state.styles}\n              />\n            }\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nFilter.propTypes = {\n  categoryId: PropTypes.string,\n  categories: PropTypes.array,\n};\n"],"sourceRoot":""}