@internetarchive/ia-book-actions 0.1.11-b3 → 0.1.11-b5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.1.11-b3",
+  "version": "0.1.11-b5",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",

package/src/ia-book-actions.js

@@ -534,10 +534,11 @@ export default class IABookActions extends LitElement {
     if (!timerCountdown) return;
 
     const secondsLeft = Number.parseInt((Number(this.lendingStatus.secondsLeftOnLoan)), 10);
-    const strokeDashOffset =
-      (secondsLeft / this.loanRenewTimeConfig.loanTotalTime) * 315;
+    const firstStrokeDashOffset = Number.parseInt(((secondsLeft / this.loanRenewTimeConfig.loanTotalTime) * 315) * 1.5, 10);
+    const actualStrokeDashOffset = firstStrokeDashOffset > 315  ? 315 : firstStrokeDashOffset;
 
-      console.log('resetTimerCountState === ', { secondsLeft, strokeDashOffset});
+
+    console.log('resetTimerCountState === ', { secondsLeft, firstStrokeDashOffset, actualStrokeDashOffset});
 
     // set seconds left in loan expire
     timerCountdown.style?.setProperty('--secondsLeftOnLoan', `${secondsLeft}s`);
@@ -545,7 +546,7 @@ export default class IABookActions extends LitElement {
     // set circle stroke offset left in loan expire
     timerCountdown.style?.setProperty(
       '--strokeLeftOnLoan',
-      `${Number(strokeDashOffset)}` // the perimeter of the circle = (π * 2 * radius)
+      `${actualStrokeDashOffset}` // the perimeter of the circle = (π * 2 * radius)
     );
 
     const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
@@ -574,14 +575,6 @@ export default class IABookActions extends LitElement {
     ></book-title-bar>`;
   }
 
-  get timerCountdownTemplate() {
-    return this.borrowType === 'browsed'
-      ? html`<timer-countdown
-          .secondsLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
-        ></timer-countdown>`
-      : nothing;
-  }
-
   get bookActionBar() {
     return html`
       <collapsible-action-group
@@ -606,7 +599,10 @@ export default class IABookActions extends LitElement {
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
-      ${this.timerCountdownTemplate}
+      <timer-countdown
+        .secondsLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
+        class=${this.borrowType === 'browsed' ? '' : 'hide'}
+      ></timer-countdown>
     `;
   }
 
@@ -952,6 +948,10 @@ export default class IABookActions extends LitElement {
         display: block;
       }
 
+      .hide {
+        display: none;
+      }
+
       .lending-wrapper {
         width: 100%;
         margin: 0 auto;