Implement minimalistic EPUB reader

[itegulov]

Changes
Introduces an epubjs powered EPUB reader which supports navigation through pressing left/right arrow keys and closes on ESC. Similarly to photo player, EPUB reader is implemented through a fullscreen dialog component.

[itegulov]

@dkanada I have addressed your comments from jellyfin/jellyfin-plugin-bookshelf#10 (comment) and made book player to use dialogue instead of a separate page.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities (and 0 Security Hotspots to review)
0 Code Smells

No Coverage information
4.9% Duplication

[dkanada]

@MrTimscampi has anyone figured out these plugin classes for the ES6 migration? I spent a bit of time looking into it while I was messing with epub.js but got hung up on plugin quirks.

[dkanada]

@itegulov I managed to figure out the ES6 conversion, do you mind if I push a commit here for the book player? The two things I think we need for an MVP are progress reporting and mobile support in the form of swipe controls. The easiest method would be selectively applying continuous mode for mobile devices, how does that sound? We have a utility to set the layout that can be used for that.

[itegulov]

@dkanada Yeah, go ahead. Continuous mode for mobile devices sounds good although I am worried if we will have problems with determening consistent progress across different devices. I don't know if there is a notion of "absolule" position in epubjs as opposed to page number which is relative to your screen's resolution/your reading mode.

[itegulov]

I went ahead and added table of contents implemented via a pop-up dialogue window. It would look much better if it was a sidebar, but better than nothing. I also tested it on my phone and it works fine there as well. If you need anything else from my part to reach an MVP please feel free to say so.

[dkanada]

Nope this looks like more than enough to me! I'll spend a bit looking into the progress reporting when I get my laptop working again and also convert the player to ES6 but the rest of the code looks fine.

[Artiume]

Tested this on Chrome Mobile. I was able to select a chapter, but I was unable to change pages due to swiping being unresponsive.

[itegulov]

@Artiume yeah swiping does not work on mobile devices right now. I think @dkanada is working on applying continuous flow for mobile devices so you wouldn't need swipes once this is done.

[dkanada]

@ferferga the scroller style changes have caused an issue for the book player, but I'm not sure how you want to solve it. Maybe updating the style in the contstructor and then again once the dialog is closed to revert to the old one?

[ferferga]

@dkanada As specified in OP, this is a dialog, meaning that content that it's behind it is still visible (but behind the book reader). Same situation happens with the video player while loading.

Take a look at how this was solved in the photo player. As there is no way to create an event listener that "rules them all", even future dialog components, you must manually do a class switch when opening and closing the dialog.

That's why I thought originally about creating a function in a scrollbarhelper file called switchScrollbar, so future developers of dialogs will find how this is accomplished more easily. Otherwise, we should remind them of this if they forgot.

There is also a really cool thing: if the dialog is closed unexpectedly due to a crash of the module or because the scrollbar switching hasn't been properly handled by the dev in all situations, the scrollbar will reappear once the user changes between pages in the UI, so in any case the user will be stuck without the possibility to scroll.

[heyhippari]

That's why I thought originally about creating a function in a scrollbarhelper file called switchScrollbar, so future developers of dialogs will find how this is accomplished more easily. Otherwise, we should remind them of this if they forgot.

Hm, why not put it directly in the dialog opening code? If the size wanted is fullscreen, apply the fix and continue.

[heyhippari]

This actually needs format checking in addition to item type in canPlayMediaType, as it will then show up as a player for CBZ, CBR, AZW and other formats of the book type.

[itegulov]

@MrTimscampi

This actually needs format checking in addition to item type in canPlayMediaType, as it will then show up as a player for CBZ, CBR, AZW and other formats of the book type.

Good catch! I could not figure out a way to stop play button to show up for other book types so I added an error dialog saying "This book type is not supported yet" in case someone opens a non-epub book with book player.

I have also fixed a few bugs related to book player not removing event listeners correctly on closure.

[itegulov]

@dkanada just wanted to check in if you are still working on mobile support and progress report? If not, I'll be free on weekend and can look into it.

[dkanada]

I haven't had the time yet, you can definitely tackle it if you want. I looked into it a little, and you'll probably want to generate the CFIs for each book (and maybe cache them) and then save progress on the server as a percentage maybe. Two other features I was looking into were a continuous mode toggle next to the ToC and optional text or background color options. The latter was requested by someone else, but a "realistic" papery beige or a dark mode would be quite nice.

[heyhippari]

I could not figure out a way to stop play button to show up for other book types so I added an error dialog saying "This book type is not supported yet" in case someone opens a non-epub book with book player.

That's pretty much what I had in mind.

The idea is to use this as the player for all book types, calling a different library depending on the book format.

So ideally, setCurrentSrc would work as it does in htmlVideoPlayer (By checking capabilities and selecting a player, so, in this case, checking book format and initializing the player).

Something like setSrcWithEpubjs that would create the mediaElement for EpubJS and initialize it.

The idea being to make it rather generic, so that we can plug in more setSrcWithXYZ into it so support more book formats (I'm thinking pdf.js and comic-reader for now, which I plan to handle once this base PR is merged :) )

Imo, automatic continuous mode on mobile, and progress report are all that is needed for a merge. Further improvements can be done in subsequent PRs.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities (and 0 Security Hotspots to review)
0 Code Smells

No Coverage information
4.8% Duplication

[heyhippari]

@itegulov For format checking, I just figured out that we have a this:

YoutubePlayer.prototype.canPlayItem = function (item) {
    // Does not play server items
    return false;
};

It's used in PlaybackManager to check if a player can handle some items.

We can use this to check if the item is an EPUB directly, without any changes to the player (And remove the checks we have in this currently).

Edit: Here's the one used in the upcoming CBZ/CBR reader, for reference:

    canPlayItem(item) {
        if (item.Path && (item.Path.endsWith('cbz') || item.Path.endsWith('cbr'))) {
            return true;
        }
        return false;
    }

[dkanada]

I think we can address any future improvements in other pull requests :) the code looks very clean and this is a great feature!