Readium blinks each time while loading left & right page, in audio read-aloud mode for fixed layout ebooks.

[piyuesh-dev]

For fixed page layout books with 2 page spreads. Readium blinks each time while loading left & right page, in audio read-aloud mode.

Blink Effect screen recording:
https://drive.google.com/file/d/1sTu1DOkxbtI1oWzVdyY-9yK6tcS3nXPm/view?usp=sharing

Sample ebook File:
https://drive.google.com/file/d/1OYHsR23Faw5OPfSsgGLvzMoyvFsQ3sia/view?usp=sharing

This is effecting all our ebooks.

This is happening in Readium chrome app (2.31.1) and also on readium-js-viewer (0.32.0-alpha)

Any workaround for this ?

[MobileFreelancer]

Hello,

For redium mobile in ios i am facing issue as on next previous or left right moving every time it is loading page and blinks each time how to overcome this?

[piyuesh-dev]

Yes We managed to solve this by editing readium core code.

Clone repo....

Build steps:
Readium Build steps:
# use node 7.10.1 to build readium ...
nvm use 7.10.1
git clone https://github.com/readium/readium-js-viewer.git
cd readium-js-viewer
git submodule update --init --recursive
git checkout master && git submodule foreach --recursive "git checkout master"
# custom step
remove bootstrap, github from package.json devDependencies....
npm run prepare:all
npm install
# custom steps
npm install bootstrap-accessibility-plugin
# custom steps
alter package.json build:scripts like this, build single only....
"build:scripts": "npm run versioning && npm run build:scripts:single",
# custom steps
added underscore js in readium-js-shared/js/globalsSetup.js
cd readium-js/readium-js-shared/
npm run build
# go back to main repo ..... and build it also .....
cd ../../
npm run build
# Now start local web server....
npm run http
# open url in browser http://localhost:8080/dev/index_RequireJS_single-bundle.html?
# do testing and debugging in browser ....

Find this function in readium-js-viewer/readium-js/readium-shared-js/js/views ...

function updatePageViewForItem(pageView, item, context) {

    var dfd = $.Deferred();

    if(!item) {
        if(pageView.isDisplaying()) {
            pageView.remove();
        }

        dfd.resolve();
    }
    else {
        var currItem = pageView.currentSpineItem();

        /*SL3-4236 If we're already displaying that page, then don't reload it..
        this solves our blink issue ...*/
        if (currItem && (item.idref == currItem.idref)) {
            dfd.resolve();
        } else {
            //if(pageView.isDisplaying()) { // always DO (no iframe reuse, as this creates problems with BlobURIs, and navigator history ... just like the reflowable view, we re-create an iframe from the template whenever needed for a new spine item URI)
            pageView.remove();
        
            //if(!pageView.isDisplaying()) { // always TRUE
            _$el.append(pageView.render().element());
            context.isElementAdded = true;
    

            pageView.loadSpineItem(item, function(success, $iframe, spineItem, isNewContentDocumentLoaded, context){

                if(success && isNewContentDocumentLoaded) {

                    //if we a re loading fixed view meta size should be defined
                    if(!pageView.meta_height() || !pageView.meta_width()) {
                        console.error("Invalid document " + spineItem.href + ": viewport is not specified!");
                    }

                    Globals.logEvent("CONTENT_DOCUMENT_LOADED", "EMIT", "fixed_view.js [ " + spineItem.href + " ]");
                    self.emit(Globals.Events.CONTENT_DOCUMENT_LOADED, $iframe, spineItem);
                }

                dfd.resolve();

            }, context);
        }
    }

    return dfd.promise();
}

Now build it again.

This worked at our end.