@internetarchive/ia-book-actions 0.0.29-alpha21 → 0.0.29-alpha22

package/package.json

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

package/src/assets/data/lending-get-status-service.js

@@ -118,7 +118,7 @@ export const canBrowseAndBorrow = {
   loanStartDate: '2021-07-30 09:57:40',
   loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
   maxLoans: 10,
-  secondsLeftOnLoan: 3591,
+  secondsLeftOnLoan: 12,
   shouldProtectImages: true,
   totalWaitlistCount: 0,
   userHasBorrowed: false,

package/src/components/info-icon.js

@@ -49,12 +49,6 @@ export class InfoIcon extends LitElement {
         vertical-align: middle;
         background: white;
       }
-      .more-info-icon.mobile {
-        position: absolute;
-        top: 4px;
-        right: 55px;
-        margin-top: 15px;
-      }
       .hidden {
         display: none;
       }

package/src/components/timer-countdown.js

@@ -58,8 +58,8 @@ export default class TimerCountdown extends LitElement {
   render() {
     return html`
       <svg
-        width="30"
-        height="30"
+        width="16"
+        height="16"
         viewBox="0 0 100 100"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -70,43 +70,40 @@ export default class TimerCountdown extends LitElement {
 
   static get styles() {
     const white = css`var(--white, #fff)`;
-    const secondsLeft = css`var(--secondsLeft, 60s)`;
+    const timerSecondsLeft = css`var(--timerSeconds, 6000s)`;
+    const timerStrokeLeft = css`var(--timerStroke, 315)`;
 
     return css`
       :host {
         right: 5px;
-        font-size: 14px;
         position: absolute;
       }
 
       @keyframes circletimer {
         0% {
-          stroke-dashoffset: 320;
-          stroke-dasharray: 320;
+          stroke-dashoffset: ${timerStrokeLeft};
+          stroke-dasharray: 315;
         }
         100% {
           stroke-dashoffset: 0;
-          stroke-dasharray: 320;
+          stroke-dasharray: 315;
         }
       }
 
       svg {
-        background-color: transparent;
-        position: absolute;
-        top: 50%;
-        right: 0;
+        background-color: ${white};
         border-radius: 50px;
         border: 2px solid ${white};
-        transform: translate(-50%, -50%) rotateZ(-90deg);
+        transform: rotateZ(-90deg);
       }
 
       svg .circle {
-        stroke: ${white};
+        stroke: #000;
         stroke-width: 100px;
-        fill: transparent;
-        stroke-dashoffset: 320;
+        fill: ${white};
+        stroke-dashoffset: 315;
         stroke-dasharray: 0;
-        animation: ${secondsLeft} circletimer linear;
+        animation: ${timerSecondsLeft} circletimer linear;
       }
     `;
   }

package/src/core/services/loan-renew-helper.js

@@ -148,7 +148,7 @@ export class LoanRenewHelper {
    * @returns {Object} Date
    */
   changeTime(date, minutes, op) {
-    if (date === undefined) return nothing;
+    if (date === undefined) return null;
 
     if (op === 'sub') {
       return new Date(date.getTime() - minutes * 1000);

package/src/ia-book-actions.js

@@ -232,9 +232,8 @@ export default class IABookActions extends LitElement {
    */
   bindLoanRenewEvents() {
     // dispatched this event from bookreader page changed
-    window.addEventListener('BookReader:pageChanged', () => {
-      // early return if book is not browsed (1 hour borrow)
-      if (this.borrowType === 'browsed') {
+    window.addEventListener('BookReader:pageChanged', event => {
+      if (this.borrowType === 'browsed' && event.detail.hasPageChanged) {
         this.autoLoanRenewChecker(true);
       }
 
@@ -268,6 +267,7 @@ export default class IABookActions extends LitElement {
     );
 
     await this.loanRenewHelper.handleLoanRenew();
+    console.log(this.loanRenewResult);
     this.loanRenewResult = this.loanRenewHelper.result;
   }
 
@@ -327,12 +327,26 @@ export default class IABookActions extends LitElement {
    * Reset timer animation state after book renewed
    */
   async resetTimerCountState() {
+    const secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
+
     const timerCountdown = this.shadowRoot.querySelector('timer-countdown');
     const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
 
+    // the perimeter of the circle
+    const circleStroke = 315;  // (π * 2 * radius)
+    const strokeDashOffset =
+      (secondsLeft / this.loanRenewConfig.totalTime) *
+      circleStroke;
+
+    // set seconds left in loan expire
+    timerCountdown.style?.setProperty(
+      '--timerSeconds',
+      `${secondsLeft}s`
+    );
+    // set circle stroke offset left in loan expire
     timerCountdown.style?.setProperty(
-      '--secondsLeft',
-      `${Number(this.lendingStatus.secondsLeftOnLoan)}s`
+      '--timerStroke',
+      `${Number(strokeDashOffset)}`
     );
 
     animationCircle.style.animationName = 'none';