Merge pull request #21 from ful1e5/dev

feat: Polish Cursor Cards & API Related fixes

CHANGELOG.md

@@ -14,6 +14,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   More polished UI
 -   Custom `404` (not-found) page
 -   Using `geist` fonts
+-   Button Click Animation added
+-   Using clickgen v2.2.0 for building Cursors
+
+### Fixes
+
+-   Slow animation in Windows Cursors
 
 ## [v1.0.0] - 30 December 2023
 

core/builder/compress.py

@@ -24,7 +24,7 @@ def win_compress(id: str, param: DownloadParams, logger: Logger) -> FileResponse
     errors: List[str] = []
 
     dir = gsubtmp(id)
-    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}"
+    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}-{param.platform}"
     fp = gtmp(id) / f"{name}.zip"
 
     if not fp.exists():
@@ -56,7 +56,7 @@ def png_compress(id: str, param: DownloadParams, logger: Logger) -> FileResponse
     errors: List[str] = []
 
     dir = gsubtmp(id)
-    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}"
+    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}-{param.platform}"
     fp = gtmp(id) / f"{name}.zip"
 
     if not fp.exists():
@@ -81,7 +81,7 @@ def x11_compress(id: str, param: DownloadParams, logger: Logger) -> FileResponse
     errors: List[str] = []
 
     dir = gsubtmp(id)
-    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}"
+    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}-{param.platform}"
     fp = gtmp(id) / f"{name}.tar.gz"
 
     if not fp.exists():

core/builder/cursor.py

@@ -1,9 +1,11 @@
 import os
+from io import BytesIO
 from logging import Logger
 from typing import List
 
 from clickgen.parser import open_blob
 from clickgen.writer import to_win, to_x11
+from PIL import Image
 
 from core.builder.config import configs, gsubtmp
 from core.utils.parser import UploadFormData
@@ -37,42 +39,45 @@ def store_cursors(sid: str, data: UploadFormData, logger: Logger):
 
                 if len(pngs) == 1:
                     f = tmp_dir / f"{name}.png"
-                    f.write_bytes(pngs[0])
+                    logger.info(pngs[0])
+                    img = Image.open(BytesIO(pngs[0]))
+                    img.resize((size, size)).save(f)
                 else:
                     max_digits = len(str(len(pngs)))
                     for i, png in enumerate(pngs):
                         index = f"{i + 1:0{max_digits}}"
                         f = tmp_dir / f"{name}-{index}.png"
-                        f.write_bytes(png)
-            else:
-                blob = open_blob(pngs, (config.x, config.y), [size], delay)
+                        img = Image.open(BytesIO(png))
+                        img.resize((size, size)).save(f)
 
-                if platform == "win" and config.winname:
-                    ext, cur = to_win(blob.frames)
-                    cursor_name = config.winname
+            if platform == "win" and config.winname:
+                blob = open_blob(pngs, (config.x, config.y), [size], 1)
+                ext, cur = to_win(blob.frames)
+                cursor_name = config.winname
 
-                    tmp_dir = gsubtmp(sid) / "cursors"
-                    tmp_dir.mkdir(parents=True, exist_ok=True)
-                    f = tmp_dir / f"{cursor_name}{ext}"
-                    f.write_bytes(cur)
+                tmp_dir = gsubtmp(sid) / "cursors"
+                tmp_dir.mkdir(parents=True, exist_ok=True)
+                f = tmp_dir / f"{cursor_name}{ext}"
+                f.write_bytes(cur)
 
-                if platform == "x11" and config.xname:
-                    cur = to_x11(blob.frames)
-                    cursor_name = config.xname
+            if platform == "x11" and config.xname:
+                blob = open_blob(pngs, (config.x, config.y), [size], delay)
+                cur = to_x11(blob.frames)
+                cursor_name = config.xname
 
-                    tmp_dir = gsubtmp(sid) / "cursors"
-                    tmp_dir.mkdir(parents=True, exist_ok=True)
+                tmp_dir = gsubtmp(sid) / "cursors"
+                tmp_dir.mkdir(parents=True, exist_ok=True)
 
-                    xname = f"{cursor_name}{ext}"
-                    f = tmp_dir / xname
-                    f.write_bytes(cur)
+                xname = f"{cursor_name}{ext}"
+                f = tmp_dir / xname
+                f.write_bytes(cur)
 
-                    if config.links:
-                        oldpwd = os.getcwd()
-                        os.chdir(tmp_dir)
-                        for link in config.links:
-                            os.symlink(xname, link)
-                        os.chdir(oldpwd)
+                if config.links:
+                    oldpwd = os.getcwd()
+                    os.chdir(tmp_dir)
+                    for link in config.links:
+                        os.symlink(xname, link)
+                    os.chdir(oldpwd)
 
     except Exception as e:
         errors.append(str(e))

requirements.txt

@@ -1,4 +1,4 @@
 Flask==3.0.0
 python-dotenv===1.0.0
 PyJWT===2.8.0
-clickgen===2.1.9
+clickgen===2.2.0

src/app/(home)/styles.css

@@ -17,7 +17,7 @@
   @apply text-lg text-center font-light text-white/[.7];
 }
 .heading-button {
-  @apply flex gap-2 px-5 sm:px-12 py-3 sm:py-5 rounded-full uppercase;
+  @apply flex gap-2 px-5 sm:px-12 py-3 sm:py-5 rounded-full uppercase transition active:scale-95;
 }
 
 .selected-button {
@@ -79,7 +79,7 @@
 
 /* Open Source & Libraries */
 .library-card {
-  @apply rounded-3xl p-6 flex flex-col transform hover:scale-105 ease-in-out duration-150 hover:bg-[#8aa8f2]/[.2];
+  @apply rounded-3xl p-6 flex flex-col transform hover:scale-105 ease-in-out duration-150 hover:bg-[#8aa8f2]/[.2] transition active:scale-95;
 }
 .library-card-heading {
   @apply md:text-2xl font-bold;

src/components/ColorPicker/index.tsx

@@ -28,7 +28,7 @@ export const ColorPickerButton: React.FC<Props> = (props) => {
     <button
       className={`p-3 sm:p-7 flex flex-col gap-1 justify-center items-center rounded-3xl transform ring-1 ring-white/[.2] hover:scale-105 hover:bg-white/[.1] ${
         selected ? 'bg-white/[.25] font-black' : 'bg-white/[.03]'
-      } transition-all ease-in-out duration-100`}
+      } transition-all ease-in-out active:scale-90`}
       title={name !== 'Custom' ? `Bibata ${name}` : 'Customize Bibata Colors'}
       disabled={selected && disabled}
       onClick={props.onClick}>

src/components/ColorPicker/modal.tsx

@@ -147,13 +147,13 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
             <div className='flex justify-between text-xs'>
               <div className='inline-flex gap-3'>
                 <button
-                  className='p-2 bg-white/[.1] text-white rounded-lg sm:rounded-2xl hover:bg-green-400 active:bg-green-200 hover:text-black'
+                  className='p-2 bg-white/[.1] text-white rounded-lg sm:rounded-2xl hover:bg-green-400 transition active:bg-green-200 active:scale-90 hover:text-black'
                   onClick={refresh}>
                   <RefreshSVG />
                 </button>
 
                 <button
-                  className={`py-2 px-5 rounded-lg sm:rounded-2xl text-xs sm:text-lg font-bold ${
+                  className={`py-2 px-5 rounded-lg sm:rounded-2xl text-xs sm:text-lg font-bold transition active:scale-90 ${
                     monochromeMode
                       ? 'bg-white/[.2] hover:bg-white/[.6] hover:text-black'
                       : 'bg-white hover:bg-white/[.7] text-black'
@@ -164,7 +164,7 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
               </div>
 
               <button
-                className='p-3 bg-white/[.1] text-white rounded-xl font-bold hover:bg-white hover:text-black'
+                className='p-3 bg-white/[.1] text-white rounded-xl font-bold hover:bg-white hover:text-black transition active:scale-90'
                 onClick={props.onClose}>
                 <CloseSVG />
               </button>
@@ -286,7 +286,7 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
 
             <div className='mt-11 flex justify-center'>
               <button
-                className='w-36 py-3 bg-green-600 text-white font-bold rounded-2xl text-sm sm:text-md hover:bg-green-500'
+                className='w-36 py-3 bg-green-600 text-white font-bold rounded-2xl text-sm sm:text-md hover:bg-green-500 transition active:scale-90'
                 onClick={handleColorPick}>
                 Apply
               </button>

src/components/Cursors/card.tsx

@@ -151,6 +151,11 @@ Report Issue here: https://github.com/ful1e5/bibata/issues`
   return (
     <button
       disabled={!isAnimated}
+      className={
+        isAnimated && !loading
+          ? 'transition hover:scale-105 active:scale-95'
+          : ''
+      }
       onClick={() => {
         if (!loading && frames.length > 0) {
           setDelayX(delayX < Object.keys(DELAYS).length ? delayX + 1 : 1);
@@ -185,14 +190,21 @@ Report Issue here: https://github.com/ful1e5/bibata/issues`
           </div>
 
           {isAnimated && (
-            <div className='absolute right-2 top-2'>
-              <div
-                className='p-1 sm:px-2 sm:py-1 font-black rounded-xl text-[6px] sm:text-sm'
-                style={{
-                  backgroundColor: `color-mix(in srgb, #000000 70%, ${props.color.base})`
-                }}>
-                {`${delayX}x`}
-              </div>
+            <div className='absolute right-2 top-2 grid grid-flow-row gap-1 px-1 py-3 bg-white/[.09] border border-white/[.05] rounded-full'>
+              {Object.entries(DELAYS).map(([i]) => {
+                const selected = delayX === parseInt(i);
+                return (
+                  <div
+                    key={i}
+                    className='sm:p-1 rounded-xl text-[5px] sm:text-sm flex justify-center items-center font-bold tracking-wide'>
+                    {selected ? (
+                      <>{`${i}x`}</>
+                    ) : (
+                      <div className='w-1 h-1 md:w-2 md:h-2 rounded-full bg-white/[.4]' />
+                    )}
+                  </div>
+                );
+              })}
             </div>
           )}
         </div>

src/components/DownloadButton/index.tsx

@@ -44,7 +44,8 @@ export const DownloadButton: React.FC<Props> = (props) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [lock, setLock] = useState<boolean>(false);
 
-  const [loadingText, setLoadingText] = useState<string>('Preparing...');
+  const defaultLoadingText = 'Collecting Bitmaps...';
+  const [loadingText, setLoadingText] = useState<string>(defaultLoadingText);
   const [errorLogs, setErrorLogs] = useState<ErrorLogs>({ text: '' });
 
   const [showDropdown, setShowDropdown] = useState<boolean>(false);
@@ -170,9 +171,13 @@ export const DownloadButton: React.FC<Props> = (props) => {
         printError(upload.error);
         await api.refreshSession(token);
       } else {
-        setLoadingText(
-          `Packaging ${platform === 'win' ? 'Win Cursors' : 'XCursors'} ...`
-        );
+        if (platform === 'win') {
+          setLoadingText('Packaging Windows Cursors ...');
+        } else if (platform === 'png') {
+          setLoadingText('Compressing PNG files ...');
+        } else {
+          setLoadingText('Packaging XCursors ...');
+        }
 
         const file = await api.download(platform, n, props.version);
 
@@ -191,6 +196,7 @@ export const DownloadButton: React.FC<Props> = (props) => {
     }
 
     setLoading(false);
+    setLoadingText(defaultLoadingText);
     setLock(false);
   };
 
@@ -232,9 +238,9 @@ export const DownloadButton: React.FC<Props> = (props) => {
               ? 'Download locked while collecting cursor images.'
               : 'Download'
           }
-          className='relative flex justify-center items-center uppercase gap-2 w-4/5 sm:w-1/3 lg:w-1/5 h-16 sm:h-20 rounded-full bg-green-600 hover:bg-green-500'
-          disabled={props.disabled && !lock && !props.lock}
-          onClick={() => !props.lock && setShowDropdown(!showDropdown)}>
+          className='relative flex justify-center items-center uppercase gap-2 w-4/5 sm:w-1/3 lg:w-1/5 h-16 sm:h-20 rounded-full bg-green-600 transition hover:scale-105 active:scale-90 hover:bg-green-500'
+          disabled={props.disabled && !lock}
+          onClick={() => setShowDropdown(!showDropdown)}>
           {props.lock ? (
             <LockSVG />
           ) : busy ? (
@@ -254,15 +260,13 @@ export const DownloadButton: React.FC<Props> = (props) => {
           <div className='absolute clip-bottom h-2 w-4 bg-white/[.4]' />
           <div className='absolute w-full sm:w-1/2 lg:w-1/4 2xl:w-1/5 h-auto mt-2 z-10 px-6 sm:px-0'>
             <div className='bg-black backdrop-filter backdrop-blur-2xl firefox:bg-opacity-40 bg-opacity-40 border border-white/[.2] text-white rounded-3xl shadow-lg relative'>
-              {loading ? (
-                <>
-                  <div className='flex p-6 justify-center items-center'>
-                    <div className='-ml-1 mr-3 h-4 w-4'>
-                      <ProcessingSVG />
-                    </div>
-                    <p className='text-[10px] sm:text-sm'>{loadingText}</p>
+              {props.lock || loading ? (
+                <div className='flex p-6 justify-center items-center'>
+                  <div className='-ml-1 mr-3 h-4 w-4'>
+                    <ProcessingSVG />
                   </div>
-                </>
+                  <p className='text-[10px] sm:text-sm'>{loadingText}</p>
+                </div>
               ) : (
                 <>
                   <DownloadError

src/components/DownloadButton/sub-buttons.tsx

@@ -22,15 +22,15 @@ export const DownloadSubButtons: React.FC<Props> = (props) => {
       <div className='p-6 grid grid-cols-2 gap-4 diviide-y-2 divide-white/[.1] text-left'>
         <button
           disabled={props.disabled}
-          className='inline-flex flex-col justify-center items-center bg-white/[.1] hover:bg-orange-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center'
+          className='inline-flex flex-col justify-center items-center bg-white/[.1] hover:bg-orange-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center transition active:scale-90'
           onClick={() => props.onClick('x11')}>
           <LinuxDownloadSVG />
           <p className='text-sm font-bold mt-2'>XCursors</p>
           <strong className='text-xs font-extrabold'>(.tar.gz)</strong>
         </button>
         <button
           disabled={props.disabled}
-          className='inline-flex flex-col justify-center items-center bg-white/[.1] hover:bg-blue-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center'
+          className='inline-flex flex-col justify-center items-center bg-white/[.1] hover:bg-blue-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center transition active:scale-90'
           onClick={() => props.onClick('win')}>
           <WindowsDownloadSVG />
           <p className='text-sm font-bold mt-2'>Windows Cursors</p>
@@ -39,7 +39,7 @@ export const DownloadSubButtons: React.FC<Props> = (props) => {
 
         <button
           disabled={props.disabled}
-          className='inline-flex col-span-2 flex-col justify-center items-center bg-white/[.1] hover:bg-violet-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center'
+          className='inline-flex col-span-2 flex-col justify-center items-center bg-white/[.1] hover:bg-violet-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center transition active:scale-90'
           onClick={() => props.onClick('png')}>
           <PNGsDownloadSVG />
           <p className='text-sm font-bold mt-2'>PNGs</p>

src/components/Footer.tsx

@@ -141,7 +141,6 @@ export const Footer: React.FC<Props> = (_props) => {
               <p>
                 (
                 <Link
-                  target='_blank'
                   href={`${refreshUrl}${path}`}
                   className='hover:text-white hover:underline'>
                   {`Switch to ${refreshBranch}`}

src/components/Message.tsx

@@ -13,7 +13,7 @@ type Props = {
 export const Message: React.FC<Props> = (props) => {
   return (
     <div className='text-center py-4 lg:px-4'>
-      <div className='transition hover:scale-105'>
+      <div className='transition hover:scale-105 active:scale-95'>
         <Link className='' href={props.href} target='_blank'>
           <div
             className='p-2 bg-indigo-800 items-center text-indigo-100 leading-none rounded-full flex sm:inline-flex'

src/components/NavBar/index.tsx

@@ -28,7 +28,7 @@ export const NavBar: React.FC<Props> = (_props) => {
           <div className='overflow-hidden flex items-center justify-center gap-2'>
             <span className='inline-flex items-center gap-1'>
               <span
-                className={`hover:text-white/[.8] ${
+                className={`hover:text-white/[.8] transition active:scale-95 ${
                   session?.user?.role === 'PRO' || pathname === '/'
                     ? 'text-[--accent]'
                     : 'text-white'

src/components/NavBar/profile.tsx

@@ -17,7 +17,7 @@ export const Profile: React.FC<Props> = (props) => {
     <div className='inline-flex items-center gap-1'>
       {!props.session ? (
         <button
-          className='inline-flex items-center py-2 sm:py-3 px-3 sm:px-7 text-white ring-1 ring-white/[.4] rounded-full text-lg font-semibold'
+          className='inline-flex items-center py-2 sm:py-3 px-3 sm:px-7 text-white ring-1 ring-white/[.4] rounded-full text-lg font-semibold transition active:scale-95'
           title='Click to Connect your GitHub Account'
           onClick={() => signIn('github', { callbackUrl: '/' })}>
           <GitHubLogo />