https://app.joypixels.com/build/assets/LibraryAnimations-CR_K7SCn.js

1import{n as w,H as N,e as y,o as l,a as t,w as a,c as h,g as C,T as F,A as q,F as E,r as G,a0 as K,b as o,L as Q,R as Z,X as R,N as ee,t as z,u as f,a1 as M,f as V,I as te}from"./app-Bd0jZ4nk.js";import{_ as oe}from"./Index-Bqmr0f2a.js";import{_ as J}from"./WithLabel-BKomwcxA.js";import{u as ae,a as A,_ as se,T as ne,b as ie,c as le,d as P,e as re,r as k,f as ue,g as de,q as S}from"./Index.vue_vue_type_style_index_0_lang-BXOwNcmF.js";import{_ as pe}from"./Emoji-Dty8NzME.js";import{a as me}from"./SegmentedControl-BW1jYnL9.js";import{_ as fe}from"./Tag-AInAO0Ut.js";import{_ as W}from"./PopModal-B6zqYwUx.js";import{_ as U,C as O,t as L}from"./PopToast-BZZuRC-I.js";import{a as T}from"./Icon-Si08zmMr.js";import{_ as ce}from"./SkinTone-CuQ11Id2.js";import{_ as I}from"./Button-D84Q1mQ5.js";import{_ as _e}from"./SelectMenu-BNwg1qJ6.js";import{l as B}from"./HorizontalOverflowContainer.vue_vue_type_style_index_0_lang-CIhknaG_.js";import{_ as ge}from"./ScrollToTopButton-DZNnOI66.js";import"./RibbonBanner-CkdHKRlm.js";import"./MainNavButton-BfX74SfY.js";import"./MainNav-BjCfeZaO.js";import"./MainNavButtonGroup-DFO-w5O0.js";import"./LogoLightDark-CnLC4VEc.js";import"./logo-light-BA9boik_.js";import"./nav-BpqMJbCl.js";import"./Index-D5EV8TH7.js";import"./StatsList-BG0xvu4p.js";import"./SuperToggle-GDoRaR0A.js";import"./ModalMessage-BJqFgtX4.js";import"./Status-ClE7YFZz.js";import"./Footer-qWWuz_xP.js";import"./FieldRegion-BkNFVWr1.js";import"./ComboField-B77ae_tZ.js";import"./Input-CNB85o4u.js";const we={__name:"AnimationItem",props:{gif:{type:String,default:""},index:{type:Number,default:1}},setup(_){const r=_,{inView:s}=ae(),n=w(null),u=w(!1);return N(()=>{n.value&&s(n.value,d=>{u.value=d})}),(d,v)=>(l(),y("div",{class:"library-emoji-animation-item",ref_key:"$el",ref:n},[t(F,null,{default:a(()=>

1[u.value?(l(),h(me,{key:0,url:r.gif},null,8,["url"])):C("",!0)]),_:1})],512))}},ye={__name:"AnimationsList",props:{data:{type:Array,default:()=>[]}},emits:["view"],setup(_,{expose:r,emit:s}){const n=w(null),u=s;return r({$el:n}),(d,v)=>(l(),y("ul",{class:"animations-list",ref_key:"$el",ref:n},[t(K,{duration:{leave:0,enter:300}},{default:a(()=>[(l(!0),y(E,null,G(_.data,(g,p)=>(l(),h(we,{key:g.id,tag:"li",index:p,gif:g.url,onClick:i=>u("view",g.id)},null,8,["index","gif","onClick"]))),128))]),_:1}),q(d.$slots,"default")],512))}},ve={key:0,class:"loading-ui"},H="300px",be={__name:"AnimationsSet",emits:["view","clear"],setup(_,{emit:r}){const s=A(),n=w(null),u=w(null),d=w(null),v=w(H),g=r,p=w(!1);let i=null;const j=()=>new Promise(async $=>{let b=null;i=setTimeout(()=>{p.value=!0},300),b=await s.animations(),clearTimeout(i),p.value=!1,$(b)});N(()=>{j().then($=>{D(()=>n.value=$)})});const D=$=>{var b;if((b=d.value)!=null&&b.$el){const x=d.value.$el.clientHeight;v.value=x>0?x+"px":H}$(),v.value="auto"};return($,b)=>{var x;return l(),y("section",{class:"library-emojis-animations-set category-animations",ref_key:"$el",ref:u},[o("div",{class:"results",style:Q({"--h":(x=n.value)!=null&&x.length?v.value:H})},[t(F,null,{default:a(()=>[p.value?(l(),y("div",ve,[t(pe,{str:"🤔"})])):C("",!0)]),_:1}),t(ye,{ref_key:"$content",ref:d,data:n.value,onView:b[0]||(b[0]=c=>g("view",c))},null,8,["data"])],4)],512)}}},$e={class:"library-emoji-animations"},ke={__name:"Animations",emits:["view"],setup(_,{emit:r}){const s=r;return(n,u)=>(l(),y("section",$e,[t(be,{onView:u[0]||(u[0]=d=>s("view",d))})]))}},xe={__name:"AnimationsSubHeader",props:{tags:{type:Array,default:()=>[]}},setup(_){const r=_,s=w(null);return A(),(n,u)=>(l(),y("div",{class:"library-sub-header animations-sub-header",ref_key:"$el",ref:s},[t(se),_.tags.length?(l(),h(ne,{key:0},{default:a(()=>[(l(!0),y(E,null,G(r.tags,d=>(l(),h(fe,Z({key:d.label},{ref_for:!0},d),null,16))),128))]),_:1})):C("",!0),q(n.$slots,"default")],512))}},Ce={key:0,class:"template-emoji-details __animation"},he={class:"ovr-x-ellipsis"},je={class:"features ff-inter"},Se={class:"premium-features"},Te={class:"buttons"},Ae={key:0,class:"ff-inter"},De={key:1,class:"template-emoji-details__logged-out-footer"},Ve={key:2,class:"template-emoji-details__logged-out-footer"},Le={__name:"IndexAnimation",props:{data:{type:Object,default:null}},setup(_){const r=R(),s=A(),{downloadFile:n,dataURLToBlob:u,findFileExtension:d}=de(),{titleCase:v}=ie(),g=ee("unpop",()=>{emit("unpop")}),p=w(!1),i=_,j=c=>{r.props.auth.user?k.goto.upgrade():k.goto.join()},D=async(c,e)=>{if(!r.props.auth.user||!e)return j(),!1;const m="text/plain";e.startsWith("data:image")?e=u(e):e=e;const X=new ClipboardItem({[m]:e});try{await navigator.clipboard.write([X]),L.pop({props:{title:c.toUpperCase()+" copied successfully!",state:"success"}})}catch(Y){L.pop({props:{state:"error",title:"Failed to copy to clipboard",message:Y.message}})}},$=c=>{if(i.data.downloads.upgraded.locked){j();return}if(s.hasMoreDownloads()){s.incrementDownloads();const e=d(c);n(c,i.data.animation.name+"-"+c.split("/").pop(),e)}else{L.pop({props:{title:"Download limit reached",message:"You have reached your download limit for today. Please upgrade your plan or try again tomorrow.",state:"error"}});return}},b=i.data.downloads.upgraded.options.map(c=>({label:c.label,value:c.url,icon:"crown-simple",action:$})),x=(()=>{var m;const e=r.props.activeSubscription.products.all?(m=r.props.activeSubscription.products)==null?void 0:m.all[0].type:null;return e||"free"})();return(c,e)=>(l(),h(O,{class:"emoji-details __animation use-own-bg"},{default:a(()=>[i.data?(l(),y("div",Ce,[o("header",null,[o("h1",he,z(f(v)(i.data.animation.name)),1),t(J,{label:"Color Mode"},{default:a(()=>[t(M)]),_:1}),t(U,{onClick:f(g)},null,8,["onClick"])]),t(le,{bin:i.data.animation.binary,footerText:i.data.updated},{default:a(()=>[t(M),t(U,{onClick:f(g)},null,8,["onClick"])]),_:1},8,["bin","footerText"]),t(O,{class:"features-container"},{default:a(()=>[o("section",je,[o("section",Se,[t(P,{title:i.data.downloads.upgraded.title},null,8,["title"]),o("div",Te,[t(ce,{placement:"bottom-end",width:"200px",offset:[0,-6],class:"download-menu"},{pop:a(()=>[t(_e,{options:i.data.downloads.upgraded.options.map(m=>({label:m.label,value:m.url,icon:"download-thick"})),onSelect:$},null,8,["options"])]),default:a(()=>[t(I,{theme:"green"},{default:a(()=>[t(T,{name:"crown-simple"}),e[6]||(e[6]=o("label",null,"Downloads",-1)),t(T,{name:"caret-down-thick"})]),_:1,__:[6]})]),_:1}),t(I,{theme:"green",class:"download",onClick:e[0]||(e[0]=m=>p.value=!0)},{default:a(()=>[t(T,{name:"download-bold"}),e[7]||(e[7]=o("label",null,"Download",-1))]),_:1,__:[7]}),t(I,{theme:"green",onClick:e[1]||(e[1]=m=>D("json",_.data.actions["copy-json"]))},{default:a(()=>[t(T,{name:"crown-simple"}),e[8]||(e[8]=o("label",null,"Copy Lottie",-1))]),_:1,__:[8]})])])])]),_:1}),i.data.stats.show?(l(),y("footer",Ae,[t(re,{used:f(s).downloads.used,total:f(s).downloads.total,data:i.data.stats},null,8,["used","total","data"])])):C("",!0)])):C("",!0),f(r).props.auth.user?["free"].includes(f(x))?(l(),y("footer",Ve,[o("p",null,[e[14]||(e[14]=V("Access to animations requires a Premium license or higher. ",-1)),o("a",{onClick:e[4]||(e[4]=(...m)=>f(k).goto.upgrade&&f(k).goto.upgrade(...m))},e[13]||(e[13]=[o("b",null,"Upgrade Now",-1)]))])])):C("",!0):(l(),y("footer",De,[o("p",null,[e[11]||(e[11]=V("To download this animation, please ",-1)),o("a",{onClick:e[2]||(e[2]=(...m)=>f(k).goto.login&&f(k).goto.login(...m))},e[9]||(e[9]=[o("b",null,"Login",-1)])),e[12]||(e[12]=V(" or ",-1)),o("a",{onClick:e[3]||(e[3]=(...m)=>f(k).goto.join&&f(k).goto.join(...m))},e[10]||(e[10]=[o("b",null,"Signup for free",-1)]))])])),t(W,{popped:p.value,onUnpop:e[5]||(e[5]=m=>p.value=!1)},{default:a(()=>[t(ue,{gif:i.data.animation.image,freeOptions:[],premiumOptions:f(b)},{premiumHeader:a(()=>[t(P,{title:i.data.downloads.upgraded.title},null,8,["title"])]),_:1},8,["gif","premiumOptions"])]),_:1},8,["popped"])]),_:1}))}},dt={__name:"LibraryAnimations",setup(_){const r=R(),s=w(!1),n=A(),u=w({}),d=[{icon:"information",label:"Version 3.5",type:"icon"},{icon:"calendar-blank",label:"August 5, 2021",type:"icon"},{icon:"smiley",label:"200 Designs",type:"icon"}],v=async g=>{B.start(),S.set("view",g),u.value=await n.loadDetails("animation",g),n.setDownloadInit(u.value.stats.progress.used,u.value.stats.progress.total),B.stop(),te(()=>{s.value=!0})};return N(()=>{S.get("view")&&v(S.get("view"))}),(g,p)=>(l(),h(oe,{id:"page-library-animations"},{default:a(()=>[o("header",null,[o("h1",null,z(f(r).props.title),1)]),t(xe,{tags:d},{default:a(()=>[p[1]||(p[1]=o("h2",null,"Animations",-1)),p[2]||(p[2]=o("p",null,"Animations 3.5 consists of 200 emoji animated designs based directly on JoyPixels 6.0 signature emoji. Premium file formats include gif, and json. Image sequence formats include png and svg.",-1)),t(J,{label:"Color Mode"},{default:a(()=>[t(M)]),_:1})]),_:1,__:[1,2]}),t(ke,{onView:v}),t(W,{popped:s.value,onUnpop:p[0]||(p[0]=i=>{s.value=!1,f(S).set("view","")}),width:"940px",scroll:"auto"},{default:a(()=>[t(Le,{data:u.value},null,8,["data"])]),_:1},8,["popped"]),t(ge)]),_:1}))}};export{dt as default};