jellyfin-web/dashboard-ui/thirdparty/cordova/imagestore.js

(function () {

    function setImageIntoElement(elem, url) {

        if (elem.tagName === "DIV") {

            elem.style.backgroundImage = "url('" + url + "')";

        } else {
            elem.setAttribute("src", url);
        }
    }

    function onDbOpened(imageStore, db) {

        imageStore._db = db;
        window.ImageStore = imageStore;
    }

    function openDb(imageStore) {

        // Create/open database
        var db = window.sqlitePlugin.openDatabase({ name: "my.db" });

        db.transaction(function (tx) {

            tx.executeSql('CREATE TABLE IF NOT EXISTS images (id text primary key, data text)');
            tx.executeSql('create index if not exists idx_images on images(id)');

            onDbOpened(imageStore, db);
        });
    }

    function sqliteImageStore() {

        var self = this;

        self.addImageToDatabase = function (blob, key) {

            var deferred = DeferredBuilder.Deferred();

            console.log("addImageToDatabase");

            self.db().transaction(function (tx) {

                tx.executeSql("INSERT INTO images (id, data) VALUES (?,?)", [key, blob], function (tx, res) {

                    deferred.resolve();
                }, function (e) {
                    deferred.reject();
                });
            });

            return deferred.promise();
        };

        self.db = function () {

            return self._db;
        };

        self.get = function (key) {

            var deferred = DeferredBuilder.Deferred();

            self.db().transaction(function (tx) {

                tx.executeSql("SELECT data from images where id=?", [key], function (tx, res) {

                    if (res.rows.length) {

                        deferred.resolveWith(null, [res.rows.item(0).data]);
                    } else {
                        deferred.reject();
                    }
                }, function (e) {
                    deferred.reject();
                });
            });

            return deferred.promise();
        };

        self.getImageUrl = function (originalUrl) {

            console.log('getImageUrl:' + originalUrl);

            var key = CryptoJS.SHA1(originalUrl).toString();

            var deferred = DeferredBuilder.Deferred();

            self.get(key).done(function (url) {

                deferred.resolveWith(null, [url]);

            }).fail(function () {

                self.downloadImage(originalUrl, key).done(function () {
                    self.get(key).done(function (url) {

                        deferred.resolveWith(null, [url]);

                    }).fail(function () {

                        deferred.reject();
                    });
                }).fail(function () {

                    deferred.reject();
                });
            });

            return deferred.promise();
        };

        self.downloadImage = function (url, key) {

            var deferred = DeferredBuilder.Deferred();

            console.log('downloadImage:' + url);

            // Create XHR
            var xhr = new XMLHttpRequest();

            xhr.open("GET", url, true);
            // Set the responseType to blob
            xhr.responseType = "arraybuffer";

            xhr.addEventListener("load", function () {

                if (xhr.status === 200) {
                    console.log("Image retrieved");

                    try {

                        var arr = new Uint8Array(this.response);

                        // Convert the int array to a binary string
                        // We have to use apply() as we are converting an *array*
                        // and String.fromCharCode() takes one or more single values, not
                        // an array.
                        var raw = String.fromCharCode.apply(null, arr);

                        // This works!!!
                        var b64 = btoa(raw);
                        var dataURL = "data:image/jpeg;base64," + b64;

                        // Put the received blob into the database
                        self.addImageToDatabase(dataURL, key).done(function () {
                            deferred.resolve();
                        }).fail(function () {
                            deferred.reject();
                        });
                    } catch (err) {
                        console.log("Error adding image to database");
                        deferred.reject();
                    }
                } else {
                    deferred.reject();
                }
            }, false);

            // Send XHR
            xhr.send();
            return deferred.promise();
        };

        self.setImageInto = function (elem, url) {

            function onFail() {
                setImageIntoElement(elem, url);
            }

            self.getImageUrl(url).done(function (localUrl) {
                setImageIntoElement(elem, localUrl);

            }).fail(onFail);
        };

        openDb(self);
    }

    new sqliteImageStore();

})();