From 8478b0ed569a3df0c538ecd18256e90a93da1a7c Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Tue, 5 May 2020 23:02:05 +0900
Subject: [PATCH 01/13] basic skeleton for epub reader

---
 package.json                               |  1 +
 src/assets/css/site.css                    |  8 +++++
 src/bundle.js                              |  5 ++++
 src/components/bookplayer/plugin.js        | 35 ++++++++++++++++++++++
 src/components/playback/playbackmanager.js |  6 ++--
 src/scripts/site.js                        |  2 ++
 6 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/components/bookplayer/plugin.js

diff --git a/package.json b/package.json
index 02d0c804d2..8a6ddcf2aa 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "core-js": "^3.6.5",
     "date-fns": "^2.13.0",
     "document-register-element": "^1.14.3",
+    "epubjs": "^0.3.85",
     "fast-text-encoding": "^1.0.1",
     "flv.js": "^1.5.0",
     "headroom.js": "^0.11.0",
diff --git a/src/assets/css/site.css b/src/assets/css/site.css
index 627145abc1..467f48d4fd 100644
--- a/src/assets/css/site.css
+++ b/src/assets/css/site.css
@@ -96,6 +96,14 @@ div[data-role=page] {
     }
 }
 
+#bookPlayer {
+    position: relative;
+    height: 100%;
+    overflow: auto;
+    z-index: 100;
+    background: #fff;
+}
+
 .headerHelpButton {
     margin-left: 1.25em !important;
     padding-bottom: 0.4em !important;
diff --git a/src/bundle.js b/src/bundle.js
index d7ba6c6a51..d4a97247f8 100644
--- a/src/bundle.js
+++ b/src/bundle.js
@@ -102,6 +102,11 @@ _define('jellyfin-noto', function () {
     return noto;
 });
 
+var epubjs = require('epubjs');
+_define('epubjs', function () {
+    return epubjs;
+});
+
 // page.js
 var page = require('page');
 _define('page', function() {
diff --git a/src/components/bookplayer/plugin.js b/src/components/bookplayer/plugin.js
new file mode 100644
index 0000000000..c00b4b7c40
--- /dev/null
+++ b/src/components/bookplayer/plugin.js
@@ -0,0 +1,35 @@
+define(['connectionManager', 'dom'], function (connectionManager, dom) {
+    'use strict';
+
+    function BookPlayer() {
+        var self = this;
+
+        self.name = 'Book Player';
+        self.type = 'mediaplayer';
+        self.id = 'bookplayer';
+        self.priority = 1;
+    }
+
+    BookPlayer.prototype.play = function (values) {
+        var serverId = values.items[0].ServerId
+        var apiClient = connectionManager.getApiClient(serverId);
+        var options = values;
+
+        require(['epubjs', 'appFooter-shared'], function (epubjs, appFooter) {
+            appFooter.element.insertAdjacentHTML('beforebegin', '<div id="bookPlayer"></div>');
+            var element = document.getElementById('bookPlayer');
+
+            var downloadHref = apiClient.getItemDownloadUrl(options.items[0].Id);
+
+            var book = epubjs.default(downloadHref, { openAs: 'epub' });
+            var rendition = book.renderTo(element, { method: "continuous", width: "100%", height: "100%" });
+            var displayed = rendition.display();
+        });
+    };
+
+    BookPlayer.prototype.canPlayMediaType = function (mediaType) {
+        return (mediaType || '').toLowerCase() === 'book';
+    };
+
+    return BookPlayer;
+});
diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js
index dea419c8cc..381ab78693 100644
--- a/src/components/playback/playbackmanager.js
+++ b/src/components/playback/playbackmanager.js
@@ -2182,7 +2182,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         // Only used internally
         self.getCurrentTicks = getCurrentTicks;
 
-        function playPhotos(items, options, user) {
+        function playOther(items, options, user) {
 
             var playStartIndex = options.startIndex || 0;
             var player = getPlayer(items[playStartIndex], options);
@@ -2211,9 +2211,9 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 return Promise.reject();
             }
 
-            if (firstItem.MediaType === 'Photo') {
+            if (firstItem.MediaType === 'Photo' || firstItem.MediaType === 'Book') {
 
-                return playPhotos(items, options, user);
+                return playOther(items, options, user);
             }
 
             var apiClient = connectionManager.getApiClient(firstItem.ServerId);
diff --git a/src/scripts/site.js b/src/scripts/site.js
index ddb152eb4c..0672ae0db5 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -484,6 +484,7 @@ var AppInfo = {};
             'components/htmlAudioPlayer/plugin',
             'components/htmlVideoPlayer/plugin',
             'components/photoPlayer/plugin',
+            'components/bookplayer/plugin',
             'components/youtubeplayer/plugin',
             'components/backdropScreensaver/plugin',
             'components/logoScreensaver/plugin'
@@ -670,6 +671,7 @@ var AppInfo = {};
                     'fetch',
                     'flvjs',
                     'jstree',
+                    'epubjs',
                     'jQuery',
                     'hlsjs',
                     'howler',

From 40e24bcaf0f5b4894c1f3087b9590da21dd2b0f3 Mon Sep 17 00:00:00 2001
From: Daniyar Itegulov <ditegulov@gmail.com>
Date: Sat, 16 May 2020 22:02:52 +1000
Subject: [PATCH 02/13] Implement minimalistic EPUB reader

---
 src/assets/css/site.css             |   8 --
 src/components/bookPlayer/plugin.js | 133 ++++++++++++++++++++++++++++
 src/components/bookPlayer/style.css |  20 +++++
 src/components/bookplayer/plugin.js |  35 --------
 src/scripts/site.js                 |   2 +-
 yarn.lock                           |  94 +++++++++++++++++++-
 6 files changed, 247 insertions(+), 45 deletions(-)
 create mode 100644 src/components/bookPlayer/plugin.js
 create mode 100644 src/components/bookPlayer/style.css
 delete mode 100644 src/components/bookplayer/plugin.js

diff --git a/src/assets/css/site.css b/src/assets/css/site.css
index 467f48d4fd..627145abc1 100644
--- a/src/assets/css/site.css
+++ b/src/assets/css/site.css
@@ -96,14 +96,6 @@ div[data-role=page] {
     }
 }
 
-#bookPlayer {
-    position: relative;
-    height: 100%;
-    overflow: auto;
-    z-index: 100;
-    background: #fff;
-}
-
 .headerHelpButton {
     margin-left: 1.25em !important;
     padding-bottom: 0.4em !important;
diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
new file mode 100644
index 0000000000..d0f040c4fd
--- /dev/null
+++ b/src/components/bookPlayer/plugin.js
@@ -0,0 +1,133 @@
+define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavigation', 'dialogHelper', 'apphost', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (connectionManager, dom, loading, playbackManager, keyboardnavigation, dialogHelper, appHost) {
+    'use strict';
+
+    function BookPlayer() {
+        let self = this;
+
+        self.name = 'Book Player';
+        self.type = 'mediaplayer';
+        self.id = 'bookplayer';
+        self.priority = 1;
+
+        self.play = function (options) {
+            loading.show();
+            let elem = createMediaElement();
+            return setCurrentSrc(elem, options);
+        };
+
+        self.stop = function () {
+            let elem = self._mediaElement;
+            let rendition = self._rendition;
+
+            if (elem && rendition) {
+                rendition.destroy();
+
+                elem.remove();
+                self._mediaElement = null;
+            }
+        };
+
+        function onWindowKeyUp(e) {
+            let key = keyboardnavigation.getKeyName(e);
+            let rendition = self._rendition;
+            let book = rendition.book;
+
+            switch (key) {
+                case 'l':
+                case 'ArrowRight':
+                case 'Right':
+                    book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
+                    break;
+                case 'j':
+                case 'ArrowLeft':
+                case 'Left':
+                    book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
+                    break;
+                case 'Escape':
+                    dialogHelper.close(self._mediaElement);
+                    break;
+            }
+        }
+
+        function onDialogClosed() {
+            self.stop();
+        }
+
+        function createMediaElement() {
+            let elem = self._mediaElement;
+
+            if (elem) {
+                return elem;
+            }
+
+            elem = document.getElementById('bookPlayer');
+
+            if (!elem) {
+                elem = dialogHelper.createDialog({
+                    exitAnimationDuration: 400,
+                    size: 'fullscreen',
+                    autoFocus: false,
+                    scrollY: false,
+                    exitAnimation: 'fadeout',
+                    removeOnClose: true
+                });
+                elem.id = 'bookPlayer';
+
+                let html = '';
+                html += '<div class="topActionButtons">';
+                html += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerExit hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon close"></i></button>';
+                html += '</div>';
+
+                elem.innerHTML = html;
+
+                elem.querySelector('.btnBookplayerExit').addEventListener('click', function () {
+                    dialogHelper.close(elem);
+                });
+
+                dialogHelper.open(elem);
+
+                elem.addEventListener('close', onDialogClosed);
+            }
+
+            self._mediaElement = elem;
+
+            return elem;
+        }
+
+        function setCurrentSrc(elem, options) {
+            let serverId = options.items[0].ServerId;
+            let apiClient = connectionManager.getApiClient(serverId);
+
+            return new Promise(function (resolve, reject) {
+                require(['epubjs'], function (epubjs) {
+                    let downloadHref = apiClient.getItemDownloadUrl(options.items[0].Id);
+                    self._currentSrc = downloadHref;
+
+                    let book = epubjs.default(downloadHref, {openAs: 'epub'});
+
+                    let rendition = book.renderTo(elem, {width: '100%', height: '97%'});
+                    self._rendition = rendition;
+
+                    return rendition.display().then(function () {
+                        document.addEventListener('keyup', onWindowKeyUp);
+                        // FIXME: I don't really get why document keyup event is not triggered when epub is in focus
+                        self._rendition.on('keyup', onWindowKeyUp);
+
+                        loading.hide();
+
+                        return resolve();
+                    }, function () {
+                        console.error('Failed to display epub');
+                        return reject();
+                    });
+                });
+            });
+        }
+    }
+
+    BookPlayer.prototype.canPlayMediaType = function (mediaType) {
+        return (mediaType || '').toLowerCase() === 'book';
+    };
+
+    return BookPlayer;
+});
diff --git a/src/components/bookPlayer/style.css b/src/components/bookPlayer/style.css
new file mode 100644
index 0000000000..295fae5c5b
--- /dev/null
+++ b/src/components/bookPlayer/style.css
@@ -0,0 +1,20 @@
+#bookPlayer {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    z-index: 100;
+    background: #fff;
+}
+
+.topActionButtons {
+    right: 0.5vh;
+    top: 0.5vh;
+    z-index: 1002;
+    position: absolute;
+}
+
+.bookplayerButtonIcon {
+    color: black;
+    opacity: 0.7;
+}
diff --git a/src/components/bookplayer/plugin.js b/src/components/bookplayer/plugin.js
deleted file mode 100644
index c00b4b7c40..0000000000
--- a/src/components/bookplayer/plugin.js
+++ /dev/null
@@ -1,35 +0,0 @@
-define(['connectionManager', 'dom'], function (connectionManager, dom) {
-    'use strict';
-
-    function BookPlayer() {
-        var self = this;
-
-        self.name = 'Book Player';
-        self.type = 'mediaplayer';
-        self.id = 'bookplayer';
-        self.priority = 1;
-    }
-
-    BookPlayer.prototype.play = function (values) {
-        var serverId = values.items[0].ServerId
-        var apiClient = connectionManager.getApiClient(serverId);
-        var options = values;
-
-        require(['epubjs', 'appFooter-shared'], function (epubjs, appFooter) {
-            appFooter.element.insertAdjacentHTML('beforebegin', '<div id="bookPlayer"></div>');
-            var element = document.getElementById('bookPlayer');
-
-            var downloadHref = apiClient.getItemDownloadUrl(options.items[0].Id);
-
-            var book = epubjs.default(downloadHref, { openAs: 'epub' });
-            var rendition = book.renderTo(element, { method: "continuous", width: "100%", height: "100%" });
-            var displayed = rendition.display();
-        });
-    };
-
-    BookPlayer.prototype.canPlayMediaType = function (mediaType) {
-        return (mediaType || '').toLowerCase() === 'book';
-    };
-
-    return BookPlayer;
-});
diff --git a/src/scripts/site.js b/src/scripts/site.js
index 0672ae0db5..dd86701724 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -484,7 +484,7 @@ var AppInfo = {};
             'components/htmlAudioPlayer/plugin',
             'components/htmlVideoPlayer/plugin',
             'components/photoPlayer/plugin',
-            'components/bookplayer/plugin',
+            'components/bookPlayer/plugin',
             'components/youtubeplayer/plugin',
             'components/backdropScreensaver/plugin',
             'components/logoScreensaver/plugin'
diff --git a/yarn.lock b/yarn.lock
index 2be9c6baf9..3dac9c2dfb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -858,6 +858,20 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
   integrity sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==
 
+"@types/jszip@^3.4.1":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@types/jszip/-/jszip-3.4.1.tgz#e7a4059486e494c949ef750933d009684227846f"
+  integrity sha512-TezXjmf3lj+zQ651r6hPqvSScqBLvyPI9FxdXBqpEwBijNGQ2NXpaFW/7joGzveYkKQUil7iiDHLo6LV71Pc0A==
+  dependencies:
+    jszip "*"
+
+"@types/localforage@0.0.34":
+  version "0.0.34"
+  resolved "https://registry.yarnpkg.com/@types/localforage/-/localforage-0.0.34.tgz#5e31c32dd8791ec4b9ff3ef47c9cb55b2d0d9438"
+  integrity sha1-XjHDLdh5HsS5/z70fJy1Wy0NlDg=
+  dependencies:
+    localforage "*"
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -3822,6 +3836,23 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
   integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
 
+epubjs@^0.3.85:
+  version "0.3.87"
+  resolved "https://registry.yarnpkg.com/epubjs/-/epubjs-0.3.87.tgz#0a2a94e59777e04548deff49a1c713ccbf3378fc"
+  integrity sha512-UlzXj04JQaUJ4p6ux/glQcVC4ayBtnpHT7niw4ozGy8EOQTAr8+/z7UZEHUmqQj4yHIoPYC4qGXtmzNqImWx1A==
+  dependencies:
+    "@types/jszip" "^3.4.1"
+    "@types/localforage" "0.0.34"
+    event-emitter "^0.3.5"
+    jszip "^3.4.0"
+    localforage "^1.7.3"
+    lodash "^4.17.15"
+    marks-pane "^1.0.9"
+    path-webpack "0.0.3"
+    stream-browserify "^2.0.1"
+    url-polyfill "^1.1.9"
+    xmldom "^0.1.27"
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -5856,6 +5887,11 @@ imagemin@^7.0.0:
     p-pipe "^3.0.0"
     replace-ext "^1.0.0"
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 immutable@^3:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
@@ -6654,6 +6690,16 @@ jstree@^3.3.7:
   dependencies:
     jquery ">=1.9.1"
 
+jszip@*, jszip@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.4.0.tgz#1a69421fa5f0bb9bc222a46bca88182fba075350"
+  integrity sha512-gZAOYuPl4EhPTXT0GjhI3o+ZAz3su6EhLrKUoAivcKqyqC7laS5JEv4XWZND9BgcDcF83vI85yGbDmDR6UhrIg==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    set-immediate-shim "~1.0.1"
+
 junk@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
@@ -6782,6 +6828,20 @@ levn@^0.3.0, levn@~0.3.0:
   version "4.0.0"
   resolved "https://github.com/jellyfin/JavascriptSubtitlesOctopus#58e9a3f1a7f7883556ee002545f445a430120639"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
 liftoff@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-3.1.0.tgz#c9ba6081f908670607ee79062d700df062c52ed3"
@@ -6874,6 +6934,13 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+localforage@*, localforage@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.7.3.tgz#0082b3ca9734679e1bd534995bdd3b24cf10f204"
+  integrity sha512-1TulyYfc4udS7ECSBT2vwJksWbkwwTX8BzeUIiq8Y07Riy7bDAAnxDaPU/tWyOVmQAcWJIEIFP9lPfBGqVoPgQ==
+  dependencies:
+    lie "3.1.1"
+
 localtunnel@1.9.2:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/localtunnel/-/localtunnel-1.9.2.tgz#0012fcabc29cf964c130a01858768aa2bb65b5af"
@@ -7244,6 +7311,11 @@ markdown-table@^2.0.0:
   dependencies:
     repeat-string "^1.0.0"
 
+marks-pane@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/marks-pane/-/marks-pane-1.0.9.tgz#c0b5ab813384d8cd81faaeb3bbf3397dc809c1b3"
+  integrity sha512-Ahs4oeG90tbdPWwAJkAAoHg2lRR8lAs9mZXETNPO9hYg3AkjUJBKi1NQ4aaIQZVGrig7c/3NUV1jANl8rFTeMg==
+
 matchdep@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/matchdep/-/matchdep-2.0.0.tgz#c6f34834a0d8dbc3b37c27ee8bbcb27c7775582e"
@@ -8312,7 +8384,7 @@ page@^1.11.6:
   dependencies:
     path-to-regexp "~1.2.1"
 
-pako@~1.0.5:
+pako@~1.0.2, pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
@@ -8559,6 +8631,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+path-webpack@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/path-webpack/-/path-webpack-0.0.3.tgz#ff6dec749eec5a94605c04d5f63fc55607a03a16"
+  integrity sha1-/23sdJ7sWpRgXATV9j/FVgegOhY=
+
 pbkdf2@^3.0.3:
   version "3.0.17"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
@@ -10510,6 +10587,11 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
+set-immediate-shim@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+  integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -12188,6 +12270,11 @@ url-parse@^1.4.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+url-polyfill@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.9.tgz#2c8d4224889a5c942800f708f5585368085603d9"
+  integrity sha512-q/R5sowGuRfKHm497swkV+s9cPYtZRkHxzpDjRhqLO58FwdWTIkt6Y/fJlznUD/exaKx/XnDzCYXz0V16ND7ow==
+
 url-to-options@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
@@ -12745,6 +12832,11 @@ x-is-string@^0.1.0:
   resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
   integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
 
+xmldom@^0.1.27:
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
+  integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==
+
 xmlhttprequest-ssl@~1.5.4:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"

From c94add0a623217339f82eb505f1cd85ace6720ff Mon Sep 17 00:00:00 2001
From: Daniyar Itegulov <ditegulov@gmail.com>
Date: Tue, 19 May 2020 16:05:44 +1000
Subject: [PATCH 03/13] Add table of contents to EPUB reader

---
 src/components/bookPlayer/plugin.js | 61 ++++++++++++++++++++++++++++-
 src/components/bookPlayer/style.css | 17 +++++++-
 2 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index d0f040c4fd..1abbf778c8 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -45,6 +45,9 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
                     break;
                 case 'Escape':
                     dialogHelper.close(self._mediaElement);
+                    if (self._tocElement) {
+                        dialogHelper.close(self._tocElement);
+                    }
                     break;
             }
         }
@@ -53,6 +56,19 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
             self.stop();
         }
 
+        function replaceLinks(contents, f) {
+            let links = contents.querySelectorAll('a[href]');
+
+            links.forEach((link) => {
+                let href = link.getAttribute('href');
+
+                link.onclick = function () {
+                    f(href);
+                    return false;
+                };
+            });
+        }
+
         function createMediaElement() {
             let elem = self._mediaElement;
 
@@ -74,9 +90,12 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
                 elem.id = 'bookPlayer';
 
                 let html = '';
-                html += '<div class="topActionButtons">';
+                html += '<div class="topRightActionButtons">';
                 html += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerExit hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon close"></i></button>';
                 html += '</div>';
+                html += '<div class="topLeftActionButtons">';
+                html += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerToc hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon toc"></i></button>';
+                html += '</div>';
 
                 elem.innerHTML = html;
 
@@ -84,6 +103,46 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
                     dialogHelper.close(elem);
                 });
 
+                elem.querySelector('.btnBookplayerToc').addEventListener('click', function () {
+                    let rendition = self._rendition;
+                    if (rendition) {
+                        let tocElement = dialogHelper.createDialog({
+                            size: 'small',
+                            autoFocus: false,
+                            removeOnClose: true
+                        });
+                        tocElement.id = 'dialogToc';
+
+                        let tocHtml = '<div class="topRightActionButtons">';
+                        tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon close"></i></button>';
+                        tocHtml += '</div>';
+                        tocHtml += '<ul class="toc">';
+                        rendition.book.navigation.forEach((chapter) => {
+                            tocHtml += '<li>';
+                            // Remove '../' from href
+                            let link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href;
+                            tocHtml += `<a href="${rendition.book.path.directory + link}">${chapter.label}</a>`;
+                            tocHtml += '</li>';
+                        });
+                        tocHtml += '</ul>';
+                        tocElement.innerHTML = tocHtml;
+
+                        tocElement.querySelector('.btnBookplayerTocClose').addEventListener('click', function () {
+                            dialogHelper.close(tocElement);
+                        });
+
+                        replaceLinks(tocElement, (href) => {
+                            let relative = rendition.book.path.relative(href);
+                            rendition.display(relative);
+                            dialogHelper.close(tocElement);
+                        });
+
+                        self._tocElement = tocElement;
+
+                        dialogHelper.open(tocElement);
+                    }
+                });
+
                 dialogHelper.open(elem);
 
                 elem.addEventListener('close', onDialogClosed);
diff --git a/src/components/bookPlayer/style.css b/src/components/bookPlayer/style.css
index 295fae5c5b..581438a003 100644
--- a/src/components/bookPlayer/style.css
+++ b/src/components/bookPlayer/style.css
@@ -7,14 +7,29 @@
     background: #fff;
 }
 
-.topActionButtons {
+.topRightActionButtons {
     right: 0.5vh;
     top: 0.5vh;
     z-index: 1002;
     position: absolute;
 }
 
+.topLeftActionButtons {
+    left: 0.5vh;
+    top: 0.5vh;
+    z-index: 1002;
+    position: absolute;
+}
+
 .bookplayerButtonIcon {
     color: black;
     opacity: 0.7;
 }
+
+#dialogToc {
+    background-color: white;
+}
+
+.toc li {
+    margin-bottom: 5px;
+}

From 5b2837f1377a5a0a53b1ee1c9f6f8b4f5f494c1e Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Fri, 22 May 2020 10:39:21 +0900
Subject: [PATCH 04/13] use a class and imports for the book player

---
 package.json                        |  1 +
 src/components/bookPlayer/plugin.js | 92 ++++++++++++++++-------------
 src/components/pluginManager.js     |  2 +-
 3 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index a24030de0d..de95105298 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
           "src/components/playback/mediasession.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
+          "src/components/bookPlayer/plugin.js",
           "src/scripts/dfnshelper.js",
           "src/scripts/dom.js",
           "src/scripts/filesystem.js",
diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index 1abbf778c8..62fbd1a593 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -1,35 +1,44 @@
-define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavigation', 'dialogHelper', 'apphost', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (connectionManager, dom, loading, playbackManager, keyboardnavigation, dialogHelper, appHost) {
-    'use strict';
+import connectionManager from 'connectionManager';
+import dom from 'dom';
+import loading from 'loading';
+import playbackManager from 'playbackManager';
+import keyboardnavigation from 'keyboardnavigation';
+import dialogHelper from 'dialogHelper';
+import appHost from 'apphost';
+import 'css!./style';
+import 'material-icons';
+import 'paper-icon-button-light';
 
-    function BookPlayer() {
-        let self = this;
+/* eslint-disable indent */
+export class BookPlayer {
+        constructor() {
+            this.name = 'Book Player';
+            this.type = 'mediaplayer';
+            this.id = 'bookplayer';
+            this.priority = 1;
+        }
 
-        self.name = 'Book Player';
-        self.type = 'mediaplayer';
-        self.id = 'bookplayer';
-        self.priority = 1;
-
-        self.play = function (options) {
+        play(options) {
             loading.show();
-            let elem = createMediaElement();
-            return setCurrentSrc(elem, options);
-        };
+            let elem = this.createMediaElement();
+            return this.setCurrentSrc(elem, options);
+        }
 
-        self.stop = function () {
-            let elem = self._mediaElement;
-            let rendition = self._rendition;
+        stop() {
+            let elem = this._mediaElement;
+            let rendition = this._rendition;
 
             if (elem && rendition) {
                 rendition.destroy();
 
                 elem.remove();
-                self._mediaElement = null;
+                this._mediaElement = null;
             }
-        };
+        }
 
-        function onWindowKeyUp(e) {
+        onWindowKeyUp(e) {
             let key = keyboardnavigation.getKeyName(e);
-            let rendition = self._rendition;
+            let rendition = this._rendition;
             let book = rendition.book;
 
             switch (key) {
@@ -44,19 +53,19 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
                     book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
                     break;
                 case 'Escape':
-                    dialogHelper.close(self._mediaElement);
-                    if (self._tocElement) {
-                        dialogHelper.close(self._tocElement);
+                    dialogHelper.close(this._mediaElement);
+                    if (this._tocElement) {
+                        dialogHelper.close(this._tocElement);
                     }
                     break;
             }
         }
 
-        function onDialogClosed() {
-            self.stop();
+        onDialogClosed() {
+            this.stop();
         }
 
-        function replaceLinks(contents, f) {
+        replaceLinks(contents, f) {
             let links = contents.querySelectorAll('a[href]');
 
             links.forEach((link) => {
@@ -69,8 +78,8 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
             });
         }
 
-        function createMediaElement() {
-            let elem = self._mediaElement;
+        createMediaElement() {
+            let elem = this._mediaElement;
 
             if (elem) {
                 return elem;
@@ -104,7 +113,7 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
                 });
 
                 elem.querySelector('.btnBookplayerToc').addEventListener('click', function () {
-                    let rendition = self._rendition;
+                    let rendition = this._rendition;
                     if (rendition) {
                         let tocElement = dialogHelper.createDialog({
                             size: 'small',
@@ -131,13 +140,13 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
                             dialogHelper.close(tocElement);
                         });
 
-                        replaceLinks(tocElement, (href) => {
+                        this.replaceLinks(tocElement, (href) => {
                             let relative = rendition.book.path.relative(href);
                             rendition.display(relative);
                             dialogHelper.close(tocElement);
                         });
 
-                        self._tocElement = tocElement;
+                        this._tocElement = tocElement;
 
                         dialogHelper.open(tocElement);
                     }
@@ -145,18 +154,19 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
 
                 dialogHelper.open(elem);
 
-                elem.addEventListener('close', onDialogClosed);
+                elem.addEventListener('close', this.onDialogClosed.bind(this));
             }
 
-            self._mediaElement = elem;
+            this._mediaElement = elem;
 
             return elem;
         }
 
-        function setCurrentSrc(elem, options) {
+        setCurrentSrc(elem, options) {
             let serverId = options.items[0].ServerId;
             let apiClient = connectionManager.getApiClient(serverId);
 
+            const self = this;
             return new Promise(function (resolve, reject) {
                 require(['epubjs'], function (epubjs) {
                     let downloadHref = apiClient.getItemDownloadUrl(options.items[0].Id);
@@ -168,9 +178,9 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
                     self._rendition = rendition;
 
                     return rendition.display().then(function () {
-                        document.addEventListener('keyup', onWindowKeyUp);
+                        document.addEventListener('keyup', self.onWindowKeyUp.bind(self));
                         // FIXME: I don't really get why document keyup event is not triggered when epub is in focus
-                        self._rendition.on('keyup', onWindowKeyUp);
+                        self._rendition.on('keyup', self.onWindowKeyUp.bind(self));
 
                         loading.hide();
 
@@ -182,11 +192,11 @@ define(['connectionManager', 'dom', 'loading', 'playbackManager', 'keyboardnavig
                 });
             });
         }
-    }
 
-    BookPlayer.prototype.canPlayMediaType = function (mediaType) {
+    canPlayMediaType(mediaType) {
         return (mediaType || '').toLowerCase() === 'book';
-    };
+    }
+}
 
-    return BookPlayer;
-});
+/* eslint-enable indent */
+export default BookPlayer;
diff --git a/src/components/pluginManager.js b/src/components/pluginManager.js
index 6cb56d767b..fd35d344bf 100644
--- a/src/components/pluginManager.js
+++ b/src/components/pluginManager.js
@@ -58,7 +58,7 @@ define(['events', 'globalize'], function (events, globalize) {
 
             return new Promise(function (resolve, reject) {
                 require([pluginSpec], (pluginFactory) => {
-                    var plugin = new pluginFactory();
+                    var plugin = pluginFactory.default ? new pluginFactory.default() : new pluginFactory();
 
                     // See if it's already installed
                     var existing = instance.pluginsList.filter(function (p) {

From 512f33a7fb30b2f36eb214cc78d2724788d9405f Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Fri, 22 May 2020 10:42:58 +0900
Subject: [PATCH 05/13] fix all indentation issues in book player

---
 src/components/bookPlayer/plugin.js | 324 ++++++++++++++--------------
 1 file changed, 161 insertions(+), 163 deletions(-)

diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index 62fbd1a593..557e3aa427 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -9,194 +9,192 @@ import 'css!./style';
 import 'material-icons';
 import 'paper-icon-button-light';
 
-/* eslint-disable indent */
 export class BookPlayer {
-        constructor() {
-            this.name = 'Book Player';
-            this.type = 'mediaplayer';
-            this.id = 'bookplayer';
-            this.priority = 1;
+    constructor() {
+        this.name = 'Book Player';
+        this.type = 'mediaplayer';
+        this.id = 'bookplayer';
+        this.priority = 1;
+    }
+
+    play(options) {
+        loading.show();
+        let elem = this.createMediaElement();
+        return this.setCurrentSrc(elem, options);
+    }
+
+    stop() {
+        let elem = this._mediaElement;
+        let rendition = this._rendition;
+
+        if (elem && rendition) {
+            rendition.destroy();
+
+            elem.remove();
+            this._mediaElement = null;
         }
+    }
 
-        play(options) {
-            loading.show();
-            let elem = this.createMediaElement();
-            return this.setCurrentSrc(elem, options);
+    onWindowKeyUp(e) {
+        let key = keyboardnavigation.getKeyName(e);
+        let rendition = this._rendition;
+        let book = rendition.book;
+
+        switch (key) {
+            case 'l':
+            case 'ArrowRight':
+            case 'Right':
+                book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
+                break;
+            case 'j':
+            case 'ArrowLeft':
+            case 'Left':
+                book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
+                break;
+            case 'Escape':
+                dialogHelper.close(this._mediaElement);
+                if (this._tocElement) {
+                    dialogHelper.close(this._tocElement);
+                }
+                break;
         }
+    }
 
-        stop() {
-            let elem = this._mediaElement;
-            let rendition = this._rendition;
+    onDialogClosed() {
+        this.stop();
+    }
 
-            if (elem && rendition) {
-                rendition.destroy();
+    replaceLinks(contents, f) {
+        let links = contents.querySelectorAll('a[href]');
 
-                elem.remove();
-                this._mediaElement = null;
-            }
-        }
+        links.forEach((link) => {
+            let href = link.getAttribute('href');
 
-        onWindowKeyUp(e) {
-            let key = keyboardnavigation.getKeyName(e);
-            let rendition = this._rendition;
-            let book = rendition.book;
+            link.onclick = function () {
+                f(href);
+                return false;
+            };
+        });
+    }
 
-            switch (key) {
-                case 'l':
-                case 'ArrowRight':
-                case 'Right':
-                    book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
-                    break;
-                case 'j':
-                case 'ArrowLeft':
-                case 'Left':
-                    book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
-                    break;
-                case 'Escape':
-                    dialogHelper.close(this._mediaElement);
-                    if (this._tocElement) {
-                        dialogHelper.close(this._tocElement);
-                    }
-                    break;
-            }
-        }
-
-        onDialogClosed() {
-            this.stop();
-        }
-
-        replaceLinks(contents, f) {
-            let links = contents.querySelectorAll('a[href]');
-
-            links.forEach((link) => {
-                let href = link.getAttribute('href');
-
-                link.onclick = function () {
-                    f(href);
-                    return false;
-                };
-            });
-        }
-
-        createMediaElement() {
-            let elem = this._mediaElement;
-
-            if (elem) {
-                return elem;
-            }
-
-            elem = document.getElementById('bookPlayer');
-
-            if (!elem) {
-                elem = dialogHelper.createDialog({
-                    exitAnimationDuration: 400,
-                    size: 'fullscreen',
-                    autoFocus: false,
-                    scrollY: false,
-                    exitAnimation: 'fadeout',
-                    removeOnClose: true
-                });
-                elem.id = 'bookPlayer';
-
-                let html = '';
-                html += '<div class="topRightActionButtons">';
-                html += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerExit hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon close"></i></button>';
-                html += '</div>';
-                html += '<div class="topLeftActionButtons">';
-                html += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerToc hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon toc"></i></button>';
-                html += '</div>';
-
-                elem.innerHTML = html;
-
-                elem.querySelector('.btnBookplayerExit').addEventListener('click', function () {
-                    dialogHelper.close(elem);
-                });
-
-                elem.querySelector('.btnBookplayerToc').addEventListener('click', function () {
-                    let rendition = this._rendition;
-                    if (rendition) {
-                        let tocElement = dialogHelper.createDialog({
-                            size: 'small',
-                            autoFocus: false,
-                            removeOnClose: true
-                        });
-                        tocElement.id = 'dialogToc';
-
-                        let tocHtml = '<div class="topRightActionButtons">';
-                        tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon close"></i></button>';
-                        tocHtml += '</div>';
-                        tocHtml += '<ul class="toc">';
-                        rendition.book.navigation.forEach((chapter) => {
-                            tocHtml += '<li>';
-                            // Remove '../' from href
-                            let link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href;
-                            tocHtml += `<a href="${rendition.book.path.directory + link}">${chapter.label}</a>`;
-                            tocHtml += '</li>';
-                        });
-                        tocHtml += '</ul>';
-                        tocElement.innerHTML = tocHtml;
-
-                        tocElement.querySelector('.btnBookplayerTocClose').addEventListener('click', function () {
-                            dialogHelper.close(tocElement);
-                        });
-
-                        this.replaceLinks(tocElement, (href) => {
-                            let relative = rendition.book.path.relative(href);
-                            rendition.display(relative);
-                            dialogHelper.close(tocElement);
-                        });
-
-                        this._tocElement = tocElement;
-
-                        dialogHelper.open(tocElement);
-                    }
-                });
-
-                dialogHelper.open(elem);
-
-                elem.addEventListener('close', this.onDialogClosed.bind(this));
-            }
-
-            this._mediaElement = elem;
+    createMediaElement() {
+        let elem = this._mediaElement;
 
+        if (elem) {
             return elem;
         }
 
-        setCurrentSrc(elem, options) {
-            let serverId = options.items[0].ServerId;
-            let apiClient = connectionManager.getApiClient(serverId);
+        elem = document.getElementById('bookPlayer');
 
-            const self = this;
-            return new Promise(function (resolve, reject) {
-                require(['epubjs'], function (epubjs) {
-                    let downloadHref = apiClient.getItemDownloadUrl(options.items[0].Id);
-                    self._currentSrc = downloadHref;
+        if (!elem) {
+            elem = dialogHelper.createDialog({
+                exitAnimationDuration: 400,
+                size: 'fullscreen',
+                autoFocus: false,
+                scrollY: false,
+                exitAnimation: 'fadeout',
+                removeOnClose: true
+            });
+            elem.id = 'bookPlayer';
 
-                    let book = epubjs.default(downloadHref, {openAs: 'epub'});
+            let html = '';
+            html += '<div class="topRightActionButtons">';
+            html += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerExit hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon close"></i></button>';
+            html += '</div>';
+            html += '<div class="topLeftActionButtons">';
+            html += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerToc hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon toc"></i></button>';
+            html += '</div>';
 
-                    let rendition = book.renderTo(elem, {width: '100%', height: '97%'});
-                    self._rendition = rendition;
+            elem.innerHTML = html;
 
-                    return rendition.display().then(function () {
-                        document.addEventListener('keyup', self.onWindowKeyUp.bind(self));
-                        // FIXME: I don't really get why document keyup event is not triggered when epub is in focus
-                        self._rendition.on('keyup', self.onWindowKeyUp.bind(self));
+            elem.querySelector('.btnBookplayerExit').addEventListener('click', function () {
+                dialogHelper.close(elem);
+            });
 
-                        loading.hide();
-
-                        return resolve();
-                    }, function () {
-                        console.error('Failed to display epub');
-                        return reject();
+            elem.querySelector('.btnBookplayerToc').addEventListener('click', function () {
+                let rendition = this._rendition;
+                if (rendition) {
+                    let tocElement = dialogHelper.createDialog({
+                        size: 'small',
+                        autoFocus: false,
+                        removeOnClose: true
                     });
+                    tocElement.id = 'dialogToc';
+
+                    let tocHtml = '<div class="topRightActionButtons">';
+                    tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon close"></i></button>';
+                    tocHtml += '</div>';
+                    tocHtml += '<ul class="toc">';
+                    rendition.book.navigation.forEach((chapter) => {
+                        tocHtml += '<li>';
+                        // Remove '../' from href
+                        let link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href;
+                        tocHtml += `<a href="${rendition.book.path.directory + link}">${chapter.label}</a>`;
+                        tocHtml += '</li>';
+                    });
+                    tocHtml += '</ul>';
+                    tocElement.innerHTML = tocHtml;
+
+                    tocElement.querySelector('.btnBookplayerTocClose').addEventListener('click', function () {
+                        dialogHelper.close(tocElement);
+                    });
+
+                    this.replaceLinks(tocElement, (href) => {
+                        let relative = rendition.book.path.relative(href);
+                        rendition.display(relative);
+                        dialogHelper.close(tocElement);
+                    });
+
+                    this._tocElement = tocElement;
+
+                    dialogHelper.open(tocElement);
+                }
+            });
+
+            dialogHelper.open(elem);
+
+            elem.addEventListener('close', this.onDialogClosed.bind(this));
+        }
+
+        this._mediaElement = elem;
+
+        return elem;
+    }
+
+    setCurrentSrc(elem, options) {
+        let serverId = options.items[0].ServerId;
+        let apiClient = connectionManager.getApiClient(serverId);
+
+        const self = this;
+        return new Promise(function (resolve, reject) {
+            require(['epubjs'], function (epubjs) {
+                let downloadHref = apiClient.getItemDownloadUrl(options.items[0].Id);
+                self._currentSrc = downloadHref;
+
+                let book = epubjs.default(downloadHref, {openAs: 'epub'});
+
+                let rendition = book.renderTo(elem, {width: '100%', height: '97%'});
+                self._rendition = rendition;
+
+                return rendition.display().then(function () {
+                    document.addEventListener('keyup', self.onWindowKeyUp.bind(self));
+                    // FIXME: I don't really get why document keyup event is not triggered when epub is in focus
+                    self._rendition.on('keyup', self.onWindowKeyUp.bind(self));
+
+                    loading.hide();
+
+                    return resolve();
+                }, function () {
+                    console.error('Failed to display epub');
+                    return reject();
                 });
             });
-        }
+        });
+    }
 
     canPlayMediaType(mediaType) {
         return (mediaType || '').toLowerCase() === 'book';
     }
 }
 
-/* eslint-enable indent */
 export default BookPlayer;

From f7f778b3532bd288e68f8f2e17bb8241a98030c8 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Fri, 22 May 2020 10:55:34 +0900
Subject: [PATCH 06/13] fix toc button for new book player class

---
 src/components/bookPlayer/plugin.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index 557e3aa427..9b33ee5ab6 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -149,7 +149,7 @@ export class BookPlayer {
 
                     dialogHelper.open(tocElement);
                 }
-            });
+            }.bind(this));
 
             dialogHelper.open(elem);
 
@@ -169,20 +169,18 @@ export class BookPlayer {
         return new Promise(function (resolve, reject) {
             require(['epubjs'], function (epubjs) {
                 let downloadHref = apiClient.getItemDownloadUrl(options.items[0].Id);
-                self._currentSrc = downloadHref;
-
                 let book = epubjs.default(downloadHref, {openAs: 'epub'});
-
                 let rendition = book.renderTo(elem, {width: '100%', height: '97%'});
-                self._rendition = rendition;
 
+                self._currentSrc = downloadHref;
+                self._rendition = rendition;
                 return rendition.display().then(function () {
                     document.addEventListener('keyup', self.onWindowKeyUp.bind(self));
+
                     // FIXME: I don't really get why document keyup event is not triggered when epub is in focus
                     self._rendition.on('keyup', self.onWindowKeyUp.bind(self));
 
                     loading.hide();
-
                     return resolve();
                 }, function () {
                     console.error('Failed to display epub');

From 696776f175bec4ef186ff4582d1cc503bc231de6 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Wed, 27 May 2020 21:12:33 +0900
Subject: [PATCH 07/13] add code suggestions

Co-authored-by: Julien Machiels <julien.machiels@protonmail.com>
---
 src/components/bookPlayer/plugin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index 9b33ee5ab6..44153d4438 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -122,7 +122,7 @@ export class BookPlayer {
                     tocElement.id = 'dialogToc';
 
                     let tocHtml = '<div class="topRightActionButtons">';
-                    tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><i class="material-icons bookplayerButtonIcon close"></i></button>';
+                    tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><span class="material-icons bookplayerButtonIcon close"></span></button>';
                     tocHtml += '</div>';
                     tocHtml += '<ul class="toc">';
                     rendition.book.navigation.forEach((chapter) => {

From 2201d693e22d3b29299a7d05b94811bb27691510 Mon Sep 17 00:00:00 2001
From: Daniyar Itegulov <ditegulov@gmail.com>
Date: Thu, 28 May 2020 18:38:13 +1000
Subject: [PATCH 08/13] Make book player plugin exit gracefully

---
 src/components/bookPlayer/plugin.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index 44153d4438..3893d7ada6 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -25,14 +25,22 @@ export class BookPlayer {
 
     stop() {
         let elem = this._mediaElement;
+        let tocElement = this._tocElement;
         let rendition = this._rendition;
 
-        if (elem && rendition) {
-            rendition.destroy();
-
-            elem.remove();
+        if (elem) {
+            dialogHelper.close(elem);
             this._mediaElement = null;
         }
+
+        if (tocElement) {
+            dialogHelper.close(tocElement);
+            this._tocElement = null;
+        }
+
+        if (rendition) {
+            rendition.destroy();
+        }
     }
 
     onWindowKeyUp(e) {

From c7a89ae74be89ffea13e92a087d5959c7bd56cf2 Mon Sep 17 00:00:00 2001
From: Daniyar Itegulov <ditegulov@gmail.com>
Date: Thu, 28 May 2020 18:39:49 +1000
Subject: [PATCH 09/13] Make book player display an error on non-epub books

---
 src/components/bookPlayer/plugin.js | 23 +++++++++++++++++++++--
 src/components/bookPlayer/style.css |  4 ++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index 3893d7ada6..55b358306d 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -170,13 +170,32 @@ export class BookPlayer {
     }
 
     setCurrentSrc(elem, options) {
-        let serverId = options.items[0].ServerId;
+        let item = options.items[0];
+        if (!item.Path.endsWith('.epub')) {
+            return new Promise((resolve, reject) => {
+                let errorDialog = dialogHelper.createDialog({
+                    size: 'small',
+                    autoFocus: false,
+                    removeOnClose: true
+                });
+
+                errorDialog.innerHTML = '<h1 class="bookplayerErrorMsg">This book type is not supported yet</h1>';
+
+                this.stop();
+
+                dialogHelper.open(errorDialog);
+                loading.hide();
+
+                return resolve();
+            });
+        }
+        let serverId = item.ServerId;
         let apiClient = connectionManager.getApiClient(serverId);
 
         const self = this;
         return new Promise(function (resolve, reject) {
             require(['epubjs'], function (epubjs) {
-                let downloadHref = apiClient.getItemDownloadUrl(options.items[0].Id);
+                let downloadHref = apiClient.getItemDownloadUrl(item.Id);
                 let book = epubjs.default(downloadHref, {openAs: 'epub'});
                 let rendition = book.renderTo(elem, {width: '100%', height: '97%'});
 
diff --git a/src/components/bookPlayer/style.css b/src/components/bookPlayer/style.css
index 581438a003..e37b995f31 100644
--- a/src/components/bookPlayer/style.css
+++ b/src/components/bookPlayer/style.css
@@ -33,3 +33,7 @@
 .toc li {
     margin-bottom: 5px;
 }
+
+.bookplayerErrorMsg {
+    text-align: center;
+}

From 063ef77ff1c3241f35ba38edae46e81f42a48709 Mon Sep 17 00:00:00 2001
From: Daniyar Itegulov <ditegulov@gmail.com>
Date: Thu, 28 May 2020 18:45:28 +1000
Subject: [PATCH 10/13] Refactor book player to make use of lambdas and get rid
 of `self`

---
 src/components/bookPlayer/plugin.js | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index 55b358306d..6c111843fd 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -78,7 +78,7 @@ export class BookPlayer {
         links.forEach((link) => {
             let href = link.getAttribute('href');
 
-            link.onclick = function () {
+            link.onclick = () => {
                 f(href);
                 return false;
             };
@@ -115,11 +115,11 @@ export class BookPlayer {
 
             elem.innerHTML = html;
 
-            elem.querySelector('.btnBookplayerExit').addEventListener('click', function () {
+            elem.querySelector('.btnBookplayerExit').addEventListener('click', () => {
                 dialogHelper.close(elem);
             });
 
-            elem.querySelector('.btnBookplayerToc').addEventListener('click', function () {
+            elem.querySelector('.btnBookplayerToc').addEventListener('click', () => {
                 let rendition = this._rendition;
                 if (rendition) {
                     let tocElement = dialogHelper.createDialog({
@@ -143,7 +143,7 @@ export class BookPlayer {
                     tocHtml += '</ul>';
                     tocElement.innerHTML = tocHtml;
 
-                    tocElement.querySelector('.btnBookplayerTocClose').addEventListener('click', function () {
+                    tocElement.querySelector('.btnBookplayerTocClose').addEventListener('click', () => {
                         dialogHelper.close(tocElement);
                     });
 
@@ -157,7 +157,7 @@ export class BookPlayer {
 
                     dialogHelper.open(tocElement);
                 }
-            }.bind(this));
+            });
 
             dialogHelper.open(elem);
 
@@ -192,24 +192,23 @@ export class BookPlayer {
         let serverId = item.ServerId;
         let apiClient = connectionManager.getApiClient(serverId);
 
-        const self = this;
-        return new Promise(function (resolve, reject) {
-            require(['epubjs'], function (epubjs) {
+        return new Promise((resolve, reject) => {
+            require(['epubjs'], (epubjs) => {
                 let downloadHref = apiClient.getItemDownloadUrl(item.Id);
                 let book = epubjs.default(downloadHref, {openAs: 'epub'});
                 let rendition = book.renderTo(elem, {width: '100%', height: '97%'});
 
-                self._currentSrc = downloadHref;
-                self._rendition = rendition;
-                return rendition.display().then(function () {
-                    document.addEventListener('keyup', self.onWindowKeyUp.bind(self));
+                this._currentSrc = downloadHref;
+                this._rendition = rendition;
+                return rendition.display().then(() => {
+                    document.addEventListener('keyup', this.onWindowKeyUp.bind(this));
 
                     // FIXME: I don't really get why document keyup event is not triggered when epub is in focus
-                    self._rendition.on('keyup', self.onWindowKeyUp.bind(self));
+                    this._rendition.on('keyup', this.onWindowKeyUp.bind(this));
 
                     loading.hide();
                     return resolve();
-                }, function () {
+                }, () => {
                     console.error('Failed to display epub');
                     return reject();
                 });

From a711c8e9f7a6693cf86a8579e828618a03a4ce4c Mon Sep 17 00:00:00 2001
From: Daniyar Itegulov <ditegulov@gmail.com>
Date: Thu, 28 May 2020 21:14:25 +1000
Subject: [PATCH 11/13] Refactor table of contents into its own class

---
 package.json                                |   1 +
 src/components/bookPlayer/plugin.js         | 111 +++++++++-----------
 src/components/bookPlayer/tableOfContent.js |  90 ++++++++++++++++
 3 files changed, 140 insertions(+), 62 deletions(-)
 create mode 100644 src/components/bookPlayer/tableOfContent.js

diff --git a/package.json b/package.json
index 40e59e9c98..fdb2d7f15a 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
           "src/components/bookPlayer/plugin.js",
+          "src/components/bookPlayer/tableOfContent.js",
           "src/components/syncplay/playbackPermissionManager.js",
           "src/components/syncplay/groupSelectionMenu.js",
           "src/components/syncplay/timeSyncManager.js",
diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index 6c111843fd..9e997efdef 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -9,12 +9,18 @@ import 'css!./style';
 import 'material-icons';
 import 'paper-icon-button-light';
 
+import TableOfContent from './tableOfContent';
+
 export class BookPlayer {
     constructor() {
         this.name = 'Book Player';
         this.type = 'mediaplayer';
         this.id = 'bookplayer';
         this.priority = 1;
+
+        this.onDialogClosed = this.onDialogClosed.bind(this);
+        this.openTableOfContents = this.openTableOfContents.bind(this);
+        this.onWindowKeyUp = this.onWindowKeyUp.bind(this);
     }
 
     play(options) {
@@ -24,6 +30,8 @@ export class BookPlayer {
     }
 
     stop() {
+        this.unbindEvents();
+
         let elem = this._mediaElement;
         let tocElement = this._tocElement;
         let rendition = this._rendition;
@@ -34,7 +42,7 @@ export class BookPlayer {
         }
 
         if (tocElement) {
-            dialogHelper.close(tocElement);
+            tocElement.destroy();
             this._tocElement = null;
         }
 
@@ -60,9 +68,12 @@ export class BookPlayer {
                 book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
                 break;
             case 'Escape':
-                dialogHelper.close(this._mediaElement);
                 if (this._tocElement) {
-                    dialogHelper.close(this._tocElement);
+                    // Close table of contents on ESC if it is open
+                    this._tocElement.destroy();
+                } else {
+                    // Otherwise stop the entire book player
+                    this.stop();
                 }
                 break;
         }
@@ -72,17 +83,42 @@ export class BookPlayer {
         this.stop();
     }
 
-    replaceLinks(contents, f) {
-        let links = contents.querySelectorAll('a[href]');
+    bindMediaElementEvents() {
+        let elem = this._mediaElement;
 
-        links.forEach((link) => {
-            let href = link.getAttribute('href');
+        elem.addEventListener('close', this.onDialogClosed, {once: true});
+        elem.querySelector('.btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true});
+        elem.querySelector('.btnBookplayerToc').addEventListener('click', this.openTableOfContents);
+    }
 
-            link.onclick = () => {
-                f(href);
-                return false;
-            };
-        });
+    bindEvents() {
+        this.bindMediaElementEvents();
+
+        document.addEventListener('keyup', this.onWindowKeyUp);
+        // FIXME: I don't really get why document keyup event is not triggered when epub is in focus
+        this._rendition.on('keyup', this.onWindowKeyUp);
+    }
+
+    unbindMediaElementEvents() {
+        let elem = this._mediaElement;
+
+        elem.removeEventListener('close', this.onDialogClosed);
+        elem.querySelector('.btnBookplayerExit').removeEventListener('click', this.onDialogClosed);
+        elem.querySelector('.btnBookplayerToc').removeEventListener('click', this.openTableOfContents);
+    }
+
+    unbindEvents() {
+        if (this._mediaElement) {
+            this.unbindMediaElementEvents();
+        }
+        document.removeEventListener('keyup', this.onWindowKeyUp);
+        if (this._rendition) {
+            this._rendition.off('keyup', this.onWindowKeyUp);
+        }
+    }
+
+    openTableOfContents() {
+        this._tocElement = new TableOfContent(this);
     }
 
     createMediaElement() {
@@ -115,53 +151,7 @@ export class BookPlayer {
 
             elem.innerHTML = html;
 
-            elem.querySelector('.btnBookplayerExit').addEventListener('click', () => {
-                dialogHelper.close(elem);
-            });
-
-            elem.querySelector('.btnBookplayerToc').addEventListener('click', () => {
-                let rendition = this._rendition;
-                if (rendition) {
-                    let tocElement = dialogHelper.createDialog({
-                        size: 'small',
-                        autoFocus: false,
-                        removeOnClose: true
-                    });
-                    tocElement.id = 'dialogToc';
-
-                    let tocHtml = '<div class="topRightActionButtons">';
-                    tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><span class="material-icons bookplayerButtonIcon close"></span></button>';
-                    tocHtml += '</div>';
-                    tocHtml += '<ul class="toc">';
-                    rendition.book.navigation.forEach((chapter) => {
-                        tocHtml += '<li>';
-                        // Remove '../' from href
-                        let link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href;
-                        tocHtml += `<a href="${rendition.book.path.directory + link}">${chapter.label}</a>`;
-                        tocHtml += '</li>';
-                    });
-                    tocHtml += '</ul>';
-                    tocElement.innerHTML = tocHtml;
-
-                    tocElement.querySelector('.btnBookplayerTocClose').addEventListener('click', () => {
-                        dialogHelper.close(tocElement);
-                    });
-
-                    this.replaceLinks(tocElement, (href) => {
-                        let relative = rendition.book.path.relative(href);
-                        rendition.display(relative);
-                        dialogHelper.close(tocElement);
-                    });
-
-                    this._tocElement = tocElement;
-
-                    dialogHelper.open(tocElement);
-                }
-            });
-
             dialogHelper.open(elem);
-
-            elem.addEventListener('close', this.onDialogClosed.bind(this));
         }
 
         this._mediaElement = elem;
@@ -201,10 +191,7 @@ export class BookPlayer {
                 this._currentSrc = downloadHref;
                 this._rendition = rendition;
                 return rendition.display().then(() => {
-                    document.addEventListener('keyup', this.onWindowKeyUp.bind(this));
-
-                    // FIXME: I don't really get why document keyup event is not triggered when epub is in focus
-                    this._rendition.on('keyup', this.onWindowKeyUp.bind(this));
+                    this.bindEvents();
 
                     loading.hide();
                     return resolve();
diff --git a/src/components/bookPlayer/tableOfContent.js b/src/components/bookPlayer/tableOfContent.js
new file mode 100644
index 0000000000..6a35966b1b
--- /dev/null
+++ b/src/components/bookPlayer/tableOfContent.js
@@ -0,0 +1,90 @@
+import dialogHelper from 'dialogHelper';
+
+export default class TableOfContent {
+    constructor(bookPlayer) {
+        this._bookPlayer = bookPlayer;
+        this._rendition = bookPlayer._rendition;
+
+        this.onDialogClosed = this.onDialogClosed.bind(this);
+
+        this.createMediaElement();
+    }
+
+    destroy() {
+        let elem = this._elem;
+        if (elem) {
+            this.unbindEvents();
+            dialogHelper.close(elem);
+        }
+
+        this._bookPlayer._tocElement = null;
+    }
+
+    bindEvents() {
+        let elem = this._elem;
+
+        elem.addEventListener('close', this.onDialogClosed, {once: true});
+        elem.querySelector('.btnBookplayerTocClose').addEventListener('click', this.onDialogClosed, {once: true});
+    }
+
+    unbindEvents() {
+        let elem = this._elem;
+
+        elem.removeEventListener('close', this.onDialogClosed);
+        elem.querySelector('.btnBookplayerTocClose').removeEventListener('click', this.onDialogClosed);
+    }
+
+    onDialogClosed() {
+        this.destroy();
+    }
+
+    replaceLinks(contents, f) {
+        let links = contents.querySelectorAll('a[href]');
+
+        links.forEach((link) => {
+            let href = link.getAttribute('href');
+
+            link.onclick = () => {
+                f(href);
+                return false;
+            };
+        });
+    }
+
+    createMediaElement() {
+        let rendition = this._rendition;
+
+        let elem = dialogHelper.createDialog({
+            size: 'small',
+            autoFocus: false,
+            removeOnClose: true
+        });
+        elem.id = 'dialogToc';
+
+        let tocHtml = '<div class="topRightActionButtons">';
+        tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><span class="material-icons bookplayerButtonIcon close"></span></button>';
+        tocHtml += '</div>';
+        tocHtml += '<ul class="toc">';
+        rendition.book.navigation.forEach((chapter) => {
+            tocHtml += '<li>';
+            // Remove '../' from href
+            let link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href;
+            tocHtml += `<a href="${rendition.book.path.directory + link}">${chapter.label}</a>`;
+            tocHtml += '</li>';
+        });
+        tocHtml += '</ul>';
+        elem.innerHTML = tocHtml;
+
+        this.replaceLinks(elem, (href) => {
+            let relative = rendition.book.path.relative(href);
+            rendition.display(relative);
+            this.destroy();
+        });
+
+        this._elem = elem;
+
+        this.bindEvents();
+
+        dialogHelper.open(elem);
+    }
+}

From 8d51ae6fb48d78d2e4bbb1359767e8bb7cfca69d Mon Sep 17 00:00:00 2001
From: Daniyar Itegulov <ditegulov@gmail.com>
Date: Thu, 28 May 2020 21:19:19 +1000
Subject: [PATCH 12/13] Remove unused imports from book player

---
 src/components/bookPlayer/plugin.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index 9e997efdef..302ed6bd18 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -1,10 +1,7 @@
 import connectionManager from 'connectionManager';
-import dom from 'dom';
 import loading from 'loading';
-import playbackManager from 'playbackManager';
 import keyboardnavigation from 'keyboardnavigation';
 import dialogHelper from 'dialogHelper';
-import appHost from 'apphost';
 import 'css!./style';
 import 'material-icons';
 import 'paper-icon-button-light';

From fe9a825aa15fc8f0538aa1b1f93fb156345b0ced Mon Sep 17 00:00:00 2001
From: Daniyar Itegulov <ditegulov@gmail.com>
Date: Fri, 29 May 2020 19:13:02 +1000
Subject: [PATCH 13/13] Make book player report percentage progress based on
 CFI location

---
 src/components/bookPlayer/plugin.js | 90 +++++++++++++++++++++++++++--
 1 file changed, 85 insertions(+), 5 deletions(-)

diff --git a/src/components/bookPlayer/plugin.js b/src/components/bookPlayer/plugin.js
index 302ed6bd18..66bcb46973 100644
--- a/src/components/bookPlayer/plugin.js
+++ b/src/components/bookPlayer/plugin.js
@@ -2,6 +2,7 @@ import connectionManager from 'connectionManager';
 import loading from 'loading';
 import keyboardnavigation from 'keyboardnavigation';
 import dialogHelper from 'dialogHelper';
+import events from 'events';
 import 'css!./style';
 import 'material-icons';
 import 'paper-icon-button-light';
@@ -21,6 +22,9 @@ export class BookPlayer {
     }
 
     play(options) {
+        this._progress = 0;
+        this._loaded = false;
+
         loading.show();
         let elem = this.createMediaElement();
         return this.setCurrentSrc(elem, options);
@@ -46,6 +50,45 @@ export class BookPlayer {
         if (rendition) {
             rendition.destroy();
         }
+
+        // Hide loader in case player was not fully loaded yet
+        loading.hide();
+        this._cancellationToken.shouldCancel = true;
+    }
+
+    currentItem() {
+        return this._currentItem;
+    }
+
+    currentTime() {
+        return this._progress * 1000;
+    }
+
+    duration() {
+        return 1000;
+    }
+
+    getBufferedRanges() {
+        return [{
+            start: 0,
+            end: 10000000
+        }];
+    }
+
+    volume() {
+        return 100;
+    }
+
+    isMuted() {
+        return false;
+    }
+
+    paused() {
+        return false;
+    }
+
+    seekable() {
+        return true;
     }
 
     onWindowKeyUp(e) {
@@ -57,12 +100,16 @@ export class BookPlayer {
             case 'l':
             case 'ArrowRight':
             case 'Right':
-                book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
+                if (this._loaded) {
+                    book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
+                }
                 break;
             case 'j':
             case 'ArrowLeft':
             case 'Left':
-                book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
+                if (this._loaded) {
+                    book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
+                }
                 break;
             case 'Escape':
                 if (this._tocElement) {
@@ -115,7 +162,9 @@ export class BookPlayer {
     }
 
     openTableOfContents() {
-        this._tocElement = new TableOfContent(this);
+        if (this._loaded) {
+            this._tocElement = new TableOfContent(this);
+        }
     }
 
     createMediaElement() {
@@ -158,6 +207,14 @@ export class BookPlayer {
 
     setCurrentSrc(elem, options) {
         let item = options.items[0];
+        this._currentItem = item;
+        this.streamInfo = {
+            started: true,
+            ended: false,
+            mediaSource: {
+                Id: item.Id
+            }
+        };
         if (!item.Path.endsWith('.epub')) {
             return new Promise((resolve, reject) => {
                 let errorDialog = dialogHelper.createDialog({
@@ -187,11 +244,34 @@ export class BookPlayer {
 
                 this._currentSrc = downloadHref;
                 this._rendition = rendition;
+                let cancellationToken = {
+                    shouldCancel: false
+                };
+                this._cancellationToken = cancellationToken;
+
                 return rendition.display().then(() => {
+                    let epubElem = document.querySelector('.epub-container');
+                    epubElem.style.display = 'none';
+
                     this.bindEvents();
 
-                    loading.hide();
-                    return resolve();
+                    return this._rendition.book.locations.generate(1024).then(() => {
+                        if (cancellationToken.shouldCancel) {
+                            return reject();
+                        }
+
+                        this._loaded = true;
+                        epubElem.style.display = 'block';
+                        rendition.on('relocated', (locations) => {
+                            this._progress = book.locations.percentageFromCfi(locations.start.cfi);
+
+                            events.trigger(this, 'timeupdate');
+                        });
+
+                        loading.hide();
+
+                        return resolve();
+                    });
                 }, () => {
                     console.error('Failed to display epub');
                     return reject();