fix: various fixes for updater, footerbar and note item (#545)

* fix: don't open book if failed to download book

* fix: various fixes for updater, footerbar and note item
1. now footerbar when invisible won't process pointer events
2. manually check updater won't be prevented by check interval
3. get rid of clamped text in note item

apps/readest-app/src/app/reader/components/FooterBar.tsx

@@ -67,64 +67,73 @@ const FooterBar: React.FC<FooterBarProps> = ({
     }
   };
 
+  const isVisible = hoveredBookKey === bookKey;
   const progressInfo = bookFormat === 'PDF' ? section : pageinfo;
   const progressValid = !!progressInfo;
   const progressFraction = progressValid ? (progressInfo!.current + 1) / progressInfo!.total : 0;
+
   return (
-    <div
-      className={clsx(
-        'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center gap-x-4 px-4',
-        'shadow-xs bg-base-100 transition-opacity duration-300',
-        appService?.hasSafeAreaInset && 'pb-[env(safe-area-inset-bottom)]',
-        appService?.hasRoundedWindow && 'rounded-window-bottom-right',
-        !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
-        isHoveredAnim && 'hover-bar-anim',
-        viewSettings?.vertical && viewSettings?.scrolled ? 'mb-3 !h-6' : '',
-        hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
-      )}
-      dir={viewSettings?.rtl ? 'rtl' : 'ltr'}
-      onMouseEnter={() => setHoveredBookKey(bookKey)}
-      onMouseLeave={() => setHoveredBookKey('')}
-    >
-      <div className='hidden sm:flex'>
+    <>
+      <div
+        className='absolute bottom-0 left-0 z-10 h-12 w-full'
+        onMouseEnter={() => setHoveredBookKey(bookKey)}
+        onTouchStart={() => setHoveredBookKey(bookKey)}
+      />
+      <div
+        className={clsx(
+          'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center gap-x-4 px-4',
+          'shadow-xs bg-base-100 transition-opacity duration-300',
+          appService?.hasSafeAreaInset && 'pb-[env(safe-area-inset-bottom)]',
+          appService?.hasRoundedWindow && 'rounded-window-bottom-right',
+          !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
+          isHoveredAnim && 'hover-bar-anim',
+          viewSettings?.vertical && viewSettings?.scrolled ? 'mb-3 !h-6' : '',
+          isVisible ? `pointer-events-auto opacity-100` : `pointer-events-none opacity-0`,
+        )}
+        dir={viewSettings?.rtl ? 'rtl' : 'ltr'}
+        onMouseLeave={() => setHoveredBookKey('')}
+        aria-hidden={!isVisible}
+      >
+        <div className='hidden sm:flex'>
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowRightWideLine /> : <RiArrowLeftWideLine />}
+            onClick={viewSettings?.rtl ? handleGoNext : handleGoPrev}
+            tooltip={viewSettings?.rtl ? _('Go Right') : _('Go Left')}
+          />
+        </div>
         <Button
-          icon={viewSettings?.rtl ? <RiArrowRightWideLine /> : <RiArrowLeftWideLine />}
-          onClick={viewSettings?.rtl ? handleGoNext : handleGoPrev}
-          tooltip={viewSettings?.rtl ? _('Go Right') : _('Go Left')}
+          icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
+          onClick={viewSettings?.rtl ? handleGoForward : handleGoBack}
+          tooltip={viewSettings?.rtl ? _('Go Forward') : _('Go Back')}
+          disabled={viewSettings?.rtl ? !view?.history.canGoForward : !view?.history.canGoBack}
         />
-      </div>
-      <Button
-        icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
-        onClick={viewSettings?.rtl ? handleGoForward : handleGoBack}
-        tooltip={viewSettings?.rtl ? _('Go Forward') : _('Go Back')}
-        disabled={viewSettings?.rtl ? !view?.history.canGoForward : !view?.history.canGoBack}
-      />
-      <Button
-        icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
-        onClick={viewSettings?.rtl ? handleGoBack : handleGoForward}
-        tooltip={viewSettings?.rtl ? _('Go Back') : _('Go Forward')}
-        disabled={viewSettings?.rtl ? !view?.history.canGoBack : !view?.history.canGoForward}
-      />
-      <span className='mx-2 text-center text-sm'>
-        {progressValid ? `${Math.round(progressFraction * 100)}%` : ''}
-      </span>
-      <input
-        type='range'
-        className='text-base-content mx-2 w-full'
-        min={0}
-        max={100}
-        value={progressValid ? progressFraction * 100 : 0}
-        onChange={(e) => handleProgressChange(e)}
-      />
-      <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
-      <div className='hidden sm:flex'>
         <Button
-          icon={viewSettings?.rtl ? <RiArrowLeftWideLine /> : <RiArrowRightWideLine />}
-          onClick={viewSettings?.rtl ? handleGoPrev : handleGoNext}
-          tooltip={viewSettings?.rtl ? _('Go Left') : _('Go Right')}
+          icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
+          onClick={viewSettings?.rtl ? handleGoBack : handleGoForward}
+          tooltip={viewSettings?.rtl ? _('Go Back') : _('Go Forward')}
+          disabled={viewSettings?.rtl ? !view?.history.canGoBack : !view?.history.canGoForward}
         />
+        <span className='mx-2 text-center text-sm'>
+          {progressValid ? `${Math.round(progressFraction * 100)}%` : ''}
+        </span>
+        <input
+          type='range'
+          className='text-base-content mx-2 w-full'
+          min={0}
+          max={100}
+          value={progressValid ? progressFraction * 100 : 0}
+          onChange={(e) => handleProgressChange(e)}
+        />
+        <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
+        <div className='hidden sm:flex'>
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowLeftWideLine /> : <RiArrowRightWideLine />}
+            onClick={viewSettings?.rtl ? handleGoPrev : handleGoNext}
+            tooltip={viewSettings?.rtl ? _('Go Left') : _('Go Right')}
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx

@@ -90,7 +90,7 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
           {item.note && (
             <div className='my-1 me-2 min-h-full self-stretch border-l-2 border-gray-300'></div>
           )}
-          <div className={clsx('content font-size-sm line-clamp-3', item.note && 'py-2')}>
+          <div className={clsx('content font-size-sm line-clamp-3', item.note && 'my-2')}>
             <span
               className={clsx(
                 'inline',

apps/readest-app/src/components/AboutWindow.tsx

@@ -20,7 +20,7 @@ export const AboutWindow = () => {
   const [isUpdated, setIsUpdated] = React.useState(false);
 
   const handleCheckUpdate = async () => {
-    const update = await checkForAppUpdates(_);
+    const update = await checkForAppUpdates(_, false);
     if (!update) {
       setIsUpdated(true);
     }

apps/readest-app/src/helpers/updater.ts

@@ -6,10 +6,11 @@ import { TranslationFunc } from '@/hooks/useTranslation';
 
 const LAST_CHECK_KEY = 'lastAppUpdateCheck';
 
-export const checkForAppUpdates = async (_: TranslationFunc) => {
+export const checkForAppUpdates = async (_: TranslationFunc, autoCheck = true) => {
   const lastCheck = localStorage.getItem(LAST_CHECK_KEY);
   const now = Date.now();
-  if (lastCheck && now - parseInt(lastCheck, 10) < CHECK_UPDATE_INTERVAL_SEC * 1000) return;
+  if (autoCheck && lastCheck && now - parseInt(lastCheck, 10) < CHECK_UPDATE_INTERVAL_SEC * 1000)
+    return;
   localStorage.setItem(LAST_CHECK_KEY, now.toString());
 
   console.log('Checking for updates');