[GSoC] Update - Porting Arianna to Foliate-js

Project Recap

As my Google Summer of Code 2024 journey concludes, I’m excited to share the updates on my project: Porting Arianna to Foliate-js. The main goal was to replace the outdated epub.js with actively maintained Foliate-js. In my previous blog post, I discussed the initial progress on integrating Foliate-js into Arianna, including the implementation of Table of Contents (TOC) and metadata handling.

My work done so far

Overcoming Rendering Challenges

• Rendering Issues: One of the major hurdles was fixing the rendering issues that were causing the book to not be visible on the screen. This was a complex problem, but with the guidance of my mentor,we were able to resolve it successfully, and the book was able to visible on the screen.

• Text Color in Light Theme: I also addressed the text color issues in the light theme mode, ensuring other color can be visible and maintaining visual consistency across different themes.

• Navigation Buttons: Enabled the navigation buttons by setting backend.locationsReady to true when the book is ready. This was a key fix to enhance user navigation within the ebook, to move from one page to another expect through the arrow keys.

• Theme Color Handling: Lastly, I worked on the handling of theme colors to provide a consistent visual experience across different themes.

light: {
  fg: Config.invert ? Kirigami.Theme.backgroundColor.toString() : Kirigami.Theme.textColor.toString(),
  bg: Config.invert ? Kirigami.Theme.textColor.toString() : Kirigami.Theme.backgroundColor.toString()
}

User Experience and Functionality Refinements

• Slider and Progress Percentage: I fixed the slider functionality, making sure it accurately reflects the reading progress.

commit: ee6cae02

I added the line backend.progress = action.payload.fraction; in the relocate case. The relocate event is triggered when the location changes. The event’s detail contains properties such as range, index, and fraction. Here fraction is a number between 0 and 1, indicating the reading progress within the section. By utilizing fraction, the slider can now accurately reflect the user’s position in the ebook.

• Reading Position Accuracy: I also ensured that the slider accurately reflects the reading position when users interact with it, improving the overall usability, issues previously was that when moving the slider didn’t change the position in the book.

To solve this, I implemented the following changes:

QQC2.Slider {
    onValueChanged: {
        if (pressed) {
            backend.progress = value
        }
    }
    onPressedChanged: {
        if (!pressed) {
            backend.progress = value
            view.runJavaScript(`reader.view.goToFraction(${value})`)
        }
    }
}

• Book Progress Display: I resolved issues with the book progress display, update time left calculation, and popup behavior, refining the user interface for a smoother reading experience.

> Reflections and Takeaways

The project has been a significant learning experience. The most challenging part for me was making things work and realizing that not everything is as straightforward as I initially thought. It was daunting to dive into a large codebase and try to understand how everything fits together, but this experience taught me the importance of patience and how to reduce problems so they can be simply solved.

Looking Ahead

While significant progress has been made, many things are left to do:

• Fixing right-click copy and search functionality
• Implementing Ctrl+ shortcut for increasing font size
• Addressing link color and redirect issues
• Features like bookmarking and annotations

What’s next?

While my GSoC journey is coming to an end, my contributions to Arianna and the open-source community will continue.

I’d like to thank my mentor, Carl Schwan, for the guidance and support throughout the project, the KDE community, and the Google Summer of Code program for this opportunity. This experience has not only improved Arianna but has also been a transformative journey for me as a developer.

Thank you for following along with my progress, see you in my next blog with more progress.