Skip to main content
OCLC Support

Embed Internet Archive book reader

Much like the video stream embed example, any external web resource that supports embedding can be pulled into a CONTENTdm item view page if the stored item is a URL to the embed source. The Internet Archive’s Book Reader is a good example of this. If you have stored digitized books with the Internet Archive and like their Book Reader UI, you can pull that into your CONTENTdm site using a JavaScript customization. This customization reuses a generic template for pulling in external content but adapts it specifically for the Internet Archive Book Reader.

(function () {

    var currentInstance = null;

    function IABookReader(url) {
        return new Promise(function (resolve) {
            if (!url) {
                return resolve(false);
            }
            // create iframe for ia book reader
            var html = '<div class="videoWrapper"><iframe src="' + url + '"?ui=embed#mode/2up" width="480px" height="480px"></iframe></div>';
            resolve(html);
        });
    }

    var APIS = {
        'archive.org': IABookReader
    };

    function loadFrame(link) {
        return Promise.resolve(link)
            .then(function (link) {
                var url = new URL(link);
                // find proper api from api list
                const loader = APIS[url.hostname];
                return loader && loader(link);
            })
            .catch(console.warn);
    }

    function CustomVideoView(container) {
        if (!container) {
            return false;
        }
        const anchor = container.querySelector('a');
        if (!anchor || !/archive.org/i.test(anchor.href)) {
            return false;
        }

        var links = [anchor.href];
        // parse metadata
        var rows = document.querySelectorAll('tr[class*=metadatarow]');
        Array.from(rows).forEach(row => {
            // find a description field
            if (row.firstChild.textContent === 'Description') {
                links = links.concat(row.lastChild.textContent.split(','));
            }
        });

        // create container for iFrames
        var frameContainer = document.createElement('div');

        var mount = function () {
            var reqs = links.map(function (link) {
                return loadFrame(link);
            });

            Promise.all(reqs)
                .then(function (reps) {
                    // hide original viewer
                    container.className += ' hide';
                    // add each frames to one root
                    reps.forEach(function (embeddedHTML) {
                        embeddedHTML && (frameContainer.innerHTML += embeddedHTML);
                    });
                    // insert it
                    container.parentNode.insertBefore(frameContainer, container);
                });

        };

        var unmount = function () {
            frameContainer.parentNode && frameContainer.parentNode.removeChild(frameContainer);
        };

        mount();

        return {
            unmount: unmount
        };

    }

    document.addEventListener('cdm-item-page:ready', function () {
        // unmount or remove current video player from DOM if it is exists
        currentInstance && currentInstance.unmount();
        // creates a new instance if it is url item and it is from vimeo.com
        currentInstance = CustomVideoView(document.querySelector('div[class*=itemUrl]'));
    });

    document.addEventListener('cdm-item-page:update', function () {
        currentInstance && currentInstance.unmount();
        // updates an instance if it is url item and it is from vimeo.com
        currentInstance = CustomVideoView(document.querySelector('div[class*=itemUrl]'));
    });

    document.addEventListener('cdm-item-page:leave', function () {
        // unmount or remove current video player from DOM if it is exists
        currentInstance && currentInstance.unmount();
    });

})();

 

  • Was this article helpful?