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

Enable fake zoom image on Safari (WebKit)

Browse source
This commit is contained in:
Dmitry Lyzo 2020-05-08 01:23:17 +03:00
parent f516bee147
commit 1fe17007d6
1 changed files with 13 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,6 +10,12 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
*/ */
const transitionEndEventName = dom.whichTransitionEvent(); const transitionEndEventName = dom.whichTransitionEvent();
/**
* Flag to use fake image to fix blurry zoomed image.
* At least WebKit doesn't restore quality for zoomed images.
*/
const useFakeZoomImage = browser.safari;
/** /**
* Retrieves an item's image URL from the API. * Retrieves an item's image URL from the API.
* @param {object|string} item - Item used to generate the image URL. * @param {object|string} item - Item used to generate the image URL.
@ -327,7 +333,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
swiperInstance.on('autoplayStart', onAutoplayStart); swiperInstance.on('autoplayStart', onAutoplayStart);
swiperInstance.on('autoplayStop', onAutoplayStop); swiperInstance.on('autoplayStop', onAutoplayStop);
if (useFakeZoomImage) {
swiperInstance.on('zoomChange', onZoomChange); swiperInstance.on('zoomChange', onZoomChange);
}
}); });
} }
@ -369,7 +378,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
var html = ''; var html = '';
html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">'; html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">';
html += '<div class="swiper-zoom-container">'; html += '<div class="swiper-zoom-container">';
if (useFakeZoomImage) {
html += `<div class="swiper-zoom-fakeimg swiper-zoom-fakeimg-hidden" style="background-image: url('${item.originalImage}')"></div>`; html += `<div class="swiper-zoom-fakeimg swiper-zoom-fakeimg-hidden" style="background-image: url('${item.originalImage}')"></div>`;
}
html += '<img src="' + item.originalImage + '" class="swiper-slide-img">'; html += '<img src="' + item.originalImage + '" class="swiper-slide-img">';
html += '</div>'; html += '</div>';
if (item.title || item.subtitle) { if (item.title || item.subtitle) {