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

Basic fullscreen feature for photos

Browse source
This commit is contained in:
Thibault Nocchi 2020-11-04 11:26:37 +01:00
parent fcb6ac4a96
commit 891827b242
1 changed files with 57 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/slideshow/slideshow.js
View file

@ -16,6 +16,7 @@ import ServerConnections from '../ServerConnections';
// eslint-disable-next-line import/named, import/namespace // eslint-disable-next-line import/named, import/namespace
import { Swiper } from 'swiper/swiper-bundle.esm'; import { Swiper } from 'swiper/swiper-bundle.esm';
import 'swiper/swiper-bundle.css'; import 'swiper/swiper-bundle.css';
import screenfull from 'screenfull';
/** /**
* Name of transition event. * Name of transition event.
@ -177,6 +178,10 @@ export default function (options) {
if (appHost.supports('sharing')) { if (appHost.supports('sharing')) {
html += getIcon('share', 'btnShare slideshowButton', true); html += getIcon('share', 'btnShare slideshowButton', true);
} }
if (screenfull.isEnabled) {
html += getIcon('fullscreen', 'btnFullscreen', true);
html += getIcon('fullscreen_exit', 'btnFullscreenExit hide', true);
}
} }
html += getIcon('close', 'slideshowButton btnSlideshowExit hide-mouse-idle-tv', false); html += getIcon('close', 'slideshowButton btnSlideshowExit hide-mouse-idle-tv', false);
html += '</div>'; html += '</div>';
@ -191,6 +196,10 @@ export default function (options) {
if (appHost.supports('sharing')) { if (appHost.supports('sharing')) {
html += getIcon('share', 'btnShare slideshowButton', true); html += getIcon('share', 'btnShare slideshowButton', true);
} }
if (screenfull.isEnabled) {
html += getIcon('fullscreen', 'btnFullscreen', true);
html += getIcon('fullscreen_exit', 'btnFullscreenExit hide', true);
}
html += '</div>'; html += '</div>';
} }
@ -219,6 +228,22 @@ export default function (options) {
if (btnShare) { if (btnShare) {
btnShare.addEventListener('click', share); btnShare.addEventListener('click', share);
} }
const btnFullscreen = dialog.querySelector('.btnFullscreen');
if (btnFullscreen) {
btnFullscreen.addEventListener('click', fullscreen);
}
const btnFullscreenExit = dialog.querySelector('.btnFullscreenExit');
if (btnFullscreenExit) {
btnFullscreenExit.addEventListener('click', fullscreenExit);
}
if (screenfull.isEnabled) {
screenfull.on('change', function () {
toggleFullscreenButtons(screenfull.isFullscreen);
});
}
} }
setUserScalable(true); setUserScalable(true);
@ -449,6 +474,35 @@ export default function (options) {
}); });
} }
/**
* Goes to fullscreen using screenfull plugin
*/
function fullscreen() {
if (!screenfull.isFullscreen) screenfull.request();
toggleFullscreenButtons(true);
}
/**
* Exits fullscreen using screenfull plugin
*/
function fullscreenExit() {
if (screenfull.isFullscreen) screenfull.exit();
toggleFullscreenButtons(false);
}
/**
* Updates the display of fullscreen buttons
* @param {boolean} isFullscreen - Whether the wanted state of buttons is fullscreen or not
*/
function toggleFullscreenButtons(isFullscreen) {
const btnFullscreen = dialog.querySelector('.btnFullscreen');
const btnFullscreenExit = dialog.querySelector('.btnFullscreenExit');
if (btnFullscreen)
btnFullscreen.classList.toggle('hide', isFullscreen);
if (btnFullscreenExit)
btnFullscreenExit.classList.toggle('hide', !isFullscreen);
}
/** /**
* Starts the autoplay feature of the Swiper instance. * Starts the autoplay feature of the Swiper instance.
*/ */
@ -483,6 +537,9 @@ export default function (options) {
* Closes the dialog and destroys the Swiper instance. * Closes the dialog and destroys the Swiper instance.
*/ */
function onDialogClosed() { function onDialogClosed() {
// Exits fullscreen
fullscreenExit();
const swiper = swiperInstance; const swiper = swiperInstance;
if (swiper) { if (swiper) {
swiper.destroy(true, true); swiper.destroy(true, true);