mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add table of contents to EPUB reader

Browse source
This commit is contained in:
Daniyar Itegulov 2020-05-19 16:05:44 +10:00
parent 40e24bcaf0
commit c94add0a62
No known key found for this signature in database
GPG key ID: 4DB862B7839037FD
2 changed files with 76 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/components/bookPlayer/plugin.js
View file

@ -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);