mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Added toggle for direction and double page view
This commit is contained in:
meet-k-pandya
parent
9b4bc7937f
commit
f683288429
8 changed files with 218 additions and 39 deletions
|
|
@ -5,9 +5,11 @@ import dialogHelper from '../../components/dialogHelper/dialogHelper';
|
|||
import keyboardnavigation from '../../scripts/keyboardNavigation';
|
||||
import { appRouter } from '../../components/appRouter';
|
||||
import ServerConnections from '../../components/ServerConnections';
|
||||
// eslint-disable-next-line import/named, import/namespace
|
||||
import { Swiper } from 'swiper/swiper-bundle.esm';
|
||||
import 'swiper/swiper-bundle.css';
|
||||
import * as userSettings from '../../scripts/settings/userSettings';
|
||||
//eslint-disable-next-line import/no-unresolved
|
||||
import { Swiper } from 'swiper/bundle';
|
||||
//eslint-disable-next-line import/no-unresolved
|
||||
import 'swiper/css/bundle';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
|
|
@ -27,6 +29,9 @@ export class ComicsPlayer {
|
|||
this.currentPage = 0;
|
||||
this.pageCount = 0;
|
||||
|
||||
const mediaSourceId = options.items[0].Id;
|
||||
this.comicsPlayerSettings = userSettings.getComicsPlayerSettings(mediaSourceId);
|
||||
|
||||
const elem = this.createMediaElement();
|
||||
return this.setCurrentSrc(elem, options);
|
||||
}
|
||||
|
|
@ -40,6 +45,9 @@ export class ComicsPlayer {
|
|||
|
||||
Events.trigger(this, 'stopped', [stopInfo]);
|
||||
|
||||
const mediaSourceId = this.item.Id;
|
||||
userSettings.setComicsPlayerSettings(this.comicsPlayerSettings, mediaSourceId);
|
||||
|
||||
this.archiveSource?.release();
|
||||
|
||||
const elem = this.mediaElement;
|
||||
|
|
@ -87,6 +95,85 @@ export class ComicsPlayer {
|
|||
this.stop();
|
||||
}
|
||||
|
||||
onDirChanged = () => {
|
||||
let langDir = this.comicsPlayerSettings.langDir;
|
||||
|
||||
if (!langDir || langDir === 'ltr')
|
||||
langDir = 'rtl';
|
||||
else
|
||||
langDir = 'ltr';
|
||||
|
||||
this.changeLanguageDirection(langDir);
|
||||
|
||||
this.comicsPlayerSettings.langDir = langDir;
|
||||
};
|
||||
|
||||
changeLanguageDirection(langDir) {
|
||||
const currentPage = this.currentPage;
|
||||
|
||||
this.swiperInstance.changeLanguageDirection(langDir);
|
||||
|
||||
const prevIcon = langDir === 'ltr' ? 'arrow_circle_left' : 'arrow_circle_right';
|
||||
this.mediaElement.querySelector('.btnToggleLangDir > span').classList.remove(prevIcon);
|
||||
|
||||
const newIcon = langDir === 'ltr' ? 'arrow_circle_right' : 'arrow_circle_left';
|
||||
this.mediaElement.querySelector('.btnToggleLangDir > span').classList.add(newIcon);
|
||||
|
||||
const dirTitle = langDir === 'ltr' ? 'Right To Left' : 'Left To Right';
|
||||
this.mediaElement.querySelector('.btnToggleLangDir').title = dirTitle;
|
||||
|
||||
this.reload(currentPage);
|
||||
}
|
||||
|
||||
onViewChanged = () => {
|
||||
let view = this.comicsPlayerSettings.pagesPerView;
|
||||
|
||||
if (!view || view === 1)
|
||||
view = 2;
|
||||
else
|
||||
view = 1;
|
||||
|
||||
this.changeView(view);
|
||||
|
||||
this.comicsPlayerSettings.pagesPerView = view;
|
||||
};
|
||||
|
||||
changeView(view) {
|
||||
const currentPage = this.currentPage;
|
||||
|
||||
this.swiperInstance.params.slidesPerView = view;
|
||||
this.swiperInstance.params.slidesPerGroup = view;
|
||||
|
||||
const prevIcon = view === 1 ? 'devices_fold' : 'import_contacts';
|
||||
this.mediaElement.querySelector('.btnToggleView > span').classList.remove(prevIcon);
|
||||
|
||||
const newIcon = view === 1 ? 'import_contacts' : 'devices_fold';
|
||||
this.mediaElement.querySelector('.btnToggleView > span').classList.add(newIcon);
|
||||
|
||||
const viewTitle = view === 1 ? 'Double Page View' : 'Single Page View';
|
||||
this.mediaElement.querySelector('.btnToggleView').title = viewTitle;
|
||||
|
||||
this.reload(currentPage);
|
||||
}
|
||||
|
||||
reload(currentPage) {
|
||||
const effect = this.swiperInstance.params.effect;
|
||||
|
||||
this.swiperInstance.params.effect = 'none';
|
||||
this.swiperInstance.update();
|
||||
|
||||
this.swiperInstance.slideNext();
|
||||
this.swiperInstance.slidePrev();
|
||||
|
||||
if (this.currentPage != currentPage) {
|
||||
this.swiperInstance.slideTo(currentPage);
|
||||
this.swiperInstance.update();
|
||||
}
|
||||
|
||||
this.swiperInstance.params.effect = effect;
|
||||
this.swiperInstance.update();
|
||||
}
|
||||
|
||||
onWindowKeyUp(e) {
|
||||
const key = keyboardnavigation.getKeyName(e);
|
||||
switch (key) {
|
||||
|
|
@ -101,6 +188,8 @@ export class ComicsPlayer {
|
|||
|
||||
elem?.addEventListener('close', this.onDialogClosed, { once: true });
|
||||
elem?.querySelector('.btnExit').addEventListener('click', this.onDialogClosed, { once: true });
|
||||
elem?.querySelector('.btnToggleLangDir').addEventListener('click', this.onDirChanged);
|
||||
elem?.querySelector('.btnToggleView').addEventListener('click', this.onViewChanged);
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
|
|
@ -114,6 +203,8 @@ export class ComicsPlayer {
|
|||
|
||||
elem?.removeEventListener('close', this.onDialogClosed);
|
||||
elem?.querySelector('.btnExit').removeEventListener('click', this.onDialogClosed);
|
||||
elem?.querySelector('.btnToggleLangDir').removeEventListener('click', this.onDirChanged);
|
||||
elem?.querySelector('.btnToggleView').removeEventListener('click', this.onViewChanged);
|
||||
}
|
||||
|
||||
unbindEvents() {
|
||||
|
|
@ -139,18 +230,40 @@ export class ComicsPlayer {
|
|||
removeOnClose: true
|
||||
});
|
||||
|
||||
const viewIcon = this.comicsPlayerSettings.pagesPerView === 1 ? 'import_contacts' : 'devices_fold';
|
||||
const dirIcon = this.comicsPlayerSettings.langDir === 'ltr' ? 'arrow_circle_right' : 'arrow_circle_left';
|
||||
|
||||
elem.id = 'comicsPlayer';
|
||||
elem.classList.add('slideshowDialog');
|
||||
|
||||
elem.innerHTML = `<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>
|
||||
<div class="actionButtons">
|
||||
<button is="paper-icon-button-light" class="autoSize btnExit" tabindex="-1"><span class="material-icons actionButtonIcon close" aria-hidden="true"></span></button>
|
||||
</div>`;
|
||||
elem.innerHTML = `<div dir=${this.comicsPlayerSettings.langDir} class="slideshowSwiperContainer">
|
||||
<div class="swiper-wrapper"></div>
|
||||
<div class="swiper-button-next actionButtonIcon"></div>
|
||||
<div class="swiper-button-prev actionButtonIcon"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
<div class="actionButtons">
|
||||
<button is="paper-icon-button-light" class="autoSize btnToggleLangDir" tabindex="-1">
|
||||
<span class="material-icons actionButtonIcon ${dirIcon}" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="autoSize btnToggleView" tabindex="-1">
|
||||
<span class="material-icons actionButtonIcon ${viewIcon}" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="autoSize btnExit" tabindex="-1">
|
||||
<span class="material-icons actionButtonIcon close" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>`;
|
||||
|
||||
dialogHelper.open(elem);
|
||||
}
|
||||
|
||||
this.mediaElement = elem;
|
||||
|
||||
const dirTitle = this.comicsPlayerSettings.langDir === 'ltr' ? 'Right To Left' : 'Left To Right';
|
||||
this.mediaElement.querySelector('.btnToggleLangDir').title = dirTitle;
|
||||
|
||||
const viewTitle = this.comicsPlayerSettings.pagesPerView === 1 ? 'Double Page View' : 'Single Page View';
|
||||
this.mediaElement.querySelector('.btnToggleView').title = viewTitle;
|
||||
|
||||
this.bindEvents();
|
||||
return elem;
|
||||
}
|
||||
|
|
@ -199,9 +312,19 @@ export class ComicsPlayer {
|
|||
enabled: true
|
||||
},
|
||||
preloadImages: true,
|
||||
slidesPerView: 1,
|
||||
slidesPerView: this.comicsPlayerSettings.pagesPerView,
|
||||
slidesPerGroup: this.comicsPlayerSettings.pagesPerView,
|
||||
slidesPerColumn: 1,
|
||||
initialSlide: this.currentPage,
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
type: 'fraction'
|
||||
},
|
||||
// reduces memory consumption for large libraries while allowing preloading of images
|
||||
virtual: {
|
||||
slides: this.archiveSource.urls,
|
||||
|
|
|
|||
|
|
@ -13,5 +13,22 @@
|
|||
.swiper-slide-img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
width: max-content;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 2px 5px 2px 5px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
text-shadow: 0 0 20px #fff;
|
||||
}
|
||||
|
||||
.actionButtons > button:hover {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue