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

update slideshow

Browse source
This commit is contained in:
Luke Pulverenti 2016-04-18 01:58:08 -04:00
parent 1c296d8d87
commit 658f5052da
32 changed files with 834 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

382
dashboard-ui/bower_components/emby-webcomponents/slideshow/slideshow.js vendored
View file

@ -1,16 +1,117 @@
define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'css!./style', 'html!./icons', 'iron-icon-set', 'paper-fab', 'paper-icon-button', 'paper-spinner'], function (dialogHelper, inputmanager, connectionManager, layoutManager) {
define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'apphost', 'css!./style', 'html!./icons', 'iron-icon-set', 'paper-icon-button', 'paper-spinner'], function (dialogHelper, inputmanager, connectionManager, layoutManager, focusManager, appHost) {
function getImageUrl(item, options, apiClient) {
options = options || {};
options.type = options.type || "Primary";
if (typeof (item) === 'string') {
return apiClient.getScaledImageUrl(item, options);
}
if (item.ImageTags && item.ImageTags[options.type]) {
options.tag = item.ImageTags[options.type];
return apiClient.getScaledImageUrl(item.Id, options);
}
if (options.type == 'Primary') {
if (item.AlbumId && item.AlbumPrimaryImageTag) {
options.tag = item.AlbumPrimaryImageTag;
return apiClient.getScaledImageUrl(item.AlbumId, options);
}
//else if (item.AlbumId && item.SeriesPrimaryImageTag) {
// imgUrl = ApiClient.getScaledImageUrl(item.SeriesId, {
// type: "Primary",
// width: downloadWidth,
// tag: item.SeriesPrimaryImageTag,
// minScale: minScale
// });
//}
//else if (item.ParentPrimaryImageTag) {
// imgUrl = ApiClient.getImageUrl(item.ParentPrimaryImageItemId, {
// type: "Primary",
// width: downloadWidth,
// tag: item.ParentPrimaryImageTag,
// minScale: minScale
// });
//}
}
return null;
}
function getBackdropImageUrl(item, options, apiClient) {
options = options || {};
options.type = options.type || "Backdrop";
options.width = null;
delete options.width;
options.maxWidth = null;
delete options.maxWidth;
options.maxHeight = null;
delete options.maxHeight;
options.height = null;
delete options.height;
// If not resizing, get the original image
if (!options.maxWidth && !options.width && !options.maxHeight && !options.height) {
options.quality = 100;
}
if (item.BackdropImageTags && item.BackdropImageTags.length) {
options.tag = item.BackdropImageTags[0];
return apiClient.getScaledImageUrl(item.Id, options);
}
return null;
}
function getImgUrl(item, original) {
var apiClient = connectionManager.getApiClient(item.ServerId);
var imageOptions = {};
if (!original) {
imageOptions.maxWidth = screen.availWidth;
}
if (item.BackdropImageTags && item.BackdropImageTags.length) {
return getBackdropImageUrl(item, imageOptions, apiClient);
} else {
if (item.MediaType == 'Photo' && original) {
return apiClient.getUrl("Items/" + item.Id + "/Download", {
api_key: apiClient.accessToken()
});
}
imageOptions.type = "Primary";
return getImageUrl(item, imageOptions, apiClient);
}
}
return function (options) {
var self = this;
var swiperInstance;
var dlg;
var currentTimeout;
var currentIntervalMs;
var currentOptions;
var currentIndex;
function createElements(options) {
dlg = dialogHelper.createDialog({
exitAnimationDuration: options.interactive ? 400 : 800,
size: 'fullscreen'
size: 'fullscreen',
autoFocus: false
});
dlg.classList.add('slideshowDialog');
@ -22,13 +123,21 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
html += '<div>';
html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
html += '<paper-fab mini icon="slideshow:arrow-back" class="btnSlideshowExit" tabindex="-1"></paper-fab>';
html += '<paper-icon-button icon="slideshow:keyboard-arrow-left" class="btnSlideshowPrevious slideshowButton" tabindex="-1"></paper-icon-button>';
html += '<paper-icon-button icon="slideshow:keyboard-arrow-right" class="btnSlideshowNext slideshowButton" tabindex="-1"></paper-icon-button>';
html += '<div class="slideshowControlBar">';
html += '<paper-icon-button icon="slideshow:skip-previous" class="btnSlideshowPrevious slideshowButton"></paper-icon-button>';
html += '<paper-icon-button icon="slideshow:close" class="btnSlideshowExit" tabindex="-1"></paper-icon-button>';
html += '<div class="slideshowBottomBar hide">';
//html += '<paper-icon-button icon="slideshow:share" class="btnShare slideshowButton"></paper-icon-button>';
html += '<paper-icon-button icon="slideshow:pause" class="btnSlideshowPause slideshowButton" autoFocus></paper-icon-button>';
html += '<paper-icon-button icon="slideshow:skip-next" class="btnSlideshowNext slideshowButton"></paper-icon-button>';
if (appHost.supports('filedownload')) {
html += '<paper-icon-button icon="slideshow:file-download" class="btnDownload slideshowButton"></paper-icon-button>';
}
html += '</div>';
html += '</div>';
} else {
@ -44,7 +153,21 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
});
dlg.querySelector('.btnSlideshowNext').addEventListener('click', nextImage);
dlg.querySelector('.btnSlideshowPrevious').addEventListener('click', previousImage);
dlg.querySelector('.btnSlideshowPause').addEventListener('click', playPause);
var btnPause = dlg.querySelector('.btnSlideshowPause');
if (btnPause) {
btnPause.addEventListener('click', playPause);
}
var btnDownload = dlg.querySelector('.btnDownload');
if (btnDownload) {
btnDownload.addEventListener('click', download);
}
var btnShare = dlg.querySelector('.btnShare');
if (btnShare) {
btnShare.addEventListener('click', share);
}
}
document.body.appendChild(dlg);
@ -56,6 +179,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
});
inputmanager.on(window, onInputCommand);
document.addEventListener('mousemove', onMouseMove);
dlg.addEventListener('close', onDialogClosed);
@ -101,7 +225,8 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
function getSwiperSlideHtmlFromItem(item) {
return getSwiperSlideHtmlFromSlide({
imageUrl: getImgUrl(item)
imageUrl: getImgUrl(item),
originalImage: getImgUrl(item, true)
//title: item.Name,
//description: item.Overview
});
@ -128,7 +253,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
function getSwiperSlideHtmlFromSlide(item) {
var html = '';
html += '<div class="swiper-slide">';
html += '<div class="swiper-slide" data-original="' + item.originalImage + '">';
html += '<img data-src="' + item.imageUrl + '" class="swiper-lazy">';
html += '<paper-spinner></paper-spinner>';
if (item.title || item.subtitle) {
@ -179,6 +304,32 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
}
}
function getCurrentImageUrl() {
if (swiperInstance) {
return document.querySelector('.swiper-slide-active').getAttribute('data-original');
} else {
return null;
}
}
function download() {
var url = getCurrentImageUrl();
require(['fileDownloader'], function (fileDownloader) {
fileDownloader.download([
{
url: url
}]);
});
}
function share() {
}
function play() {
dlg.querySelector('.btnSlideshowPause').icon = "slideshow:pause";
@ -212,13 +363,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
}
inputmanager.off(window, onInputCommand);
document.removeEventListener('mousemove', onMouseMove);
}
var currentTimeout;
var currentIntervalMs;
var currentOptions;
var currentIndex;
function startInterval(options) {
currentOptions = options;
@ -232,93 +379,137 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
}
}
function getImgUrl(item) {
var _osdOpen = false;
function isOsdOpen() {
return _osdOpen;
}
var apiClient = connectionManager.getApiClient(item.ServerId);
if (item.BackdropImageTags && item.BackdropImageTags.length) {
return getBackdropImageUrl(item, {
maxWidth: screen.availWidth
}, apiClient);
} else {
return getImageUrl(item, {
type: "Primary",
maxWidth: screen.availWidth
}, apiClient);
function getOsdBottom() {
return dlg.querySelector('.slideshowBottomBar');
}
function showOsd() {
slideUpToShow(getOsdBottom());
startHideTimer();
}
function hideOsd() {
slideDownToHide(getOsdBottom());
}
var hideTimeout;
function startHideTimer() {
stopHideTimer();
hideTimeout = setTimeout(hideOsd, 4000);
}
function stopHideTimer() {
if (hideTimeout) {
clearTimeout(hideTimeout);
hideTimeout = null;
}
}
function getBackdropImageUrl(item, options, apiClient) {
function slideUpToShow(elem) {
options = options || {};
options.type = options.type || "Backdrop";
options.width = null;
delete options.width;
options.maxWidth = null;
delete options.maxWidth;
options.maxHeight = null;
delete options.maxHeight;
options.height = null;
delete options.height;
// If not resizing, get the original image
if (!options.maxWidth && !options.width && !options.maxHeight && !options.height) {
options.quality = 100;
if (!elem.classList.contains('hide')) {
return;
}
if (item.BackdropImageTags && item.BackdropImageTags.length) {
_osdOpen = true;
elem.classList.remove('hide');
options.tag = item.BackdropImageTags[0];
return apiClient.getScaledImageUrl(item.Id, options);
}
requestAnimationFrame(function () {
return null;
var keyframes = [
{ transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }];
var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
elem.animate(keyframes, timing).onfinish = function () {
focusManager.focus(elem.querySelector('.btnSlideshowPause'));
};
});
}
function getImageUrl(item, options, apiClient) {
function slideDownToHide(elem) {
options = options || {};
options.type = options.type || "Primary";
if (typeof (item) === 'string') {
return apiClient.getScaledImageUrl(item, options);
if (elem.classList.contains('hide')) {
return;
}
if (item.ImageTags && item.ImageTags[options.type]) {
requestAnimationFrame(function () {
options.tag = item.ImageTags[options.type];
return apiClient.getScaledImageUrl(item.Id, options);
var keyframes = [
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
{ transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }];
var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
elem.animate(keyframes, timing).onfinish = function () {
elem.classList.add('hide');
_osdOpen = false;
};
});
}
var lastMouseMoveData;
function onMouseMove(e) {
var eventX = e.screenX || 0;
var eventY = e.screenY || 0;
var obj = lastMouseMoveData;
if (!obj) {
lastMouseMoveData = {
x: eventX,
y: eventY
};
return;
}
if (options.type == 'Primary') {
if (item.AlbumId && item.AlbumPrimaryImageTag) {
options.tag = item.AlbumPrimaryImageTag;
return apiClient.getScaledImageUrl(item.AlbumId, options);
}
//else if (item.AlbumId && item.SeriesPrimaryImageTag) {
// imgUrl = ApiClient.getScaledImageUrl(item.SeriesId, {
// type: "Primary",
// width: downloadWidth,
// tag: item.SeriesPrimaryImageTag,
// minScale: minScale
// });
//}
//else if (item.ParentPrimaryImageTag) {
// imgUrl = ApiClient.getImageUrl(item.ParentPrimaryImageItemId, {
// type: "Primary",
// width: downloadWidth,
// tag: item.ParentPrimaryImageTag,
// minScale: minScale
// });
//}
// if coord are same, it didn't move
if (Math.abs(eventX - obj.x) < 10 && Math.abs(eventY - obj.y) < 10) {
return;
}
return null;
obj.x = eventX;
obj.y = eventY;
showOsd();
}
function onInputCommand(e) {
switch (e.detail.command) {
case 'left':
if (!isOsdOpen()) {
e.preventDefault();
previousImage();
}
break;
case 'right':
if (!isOsdOpen()) {
e.preventDefault();
nextImage();
}
break;
case 'up':
case 'down':
case 'select':
case 'menu':
case 'info':
case 'play':
case 'playpause':
case 'pause':
case 'fastforward':
case 'rewind':
case 'next':
case 'previous':
showOsd();
break;
default:
break;
}
}
function showNextImage(index, skipPreload) {
@ -397,33 +588,6 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
}
}
function onInputCommand(e) {
switch (e.detail.command) {
case 'left':
previousImage();
break;
case 'right':
nextImage();
break;
case 'play':
play();
break;
case 'pause':
pause();
break;
case 'playpause':
playPause();
break;
default:
return
break;
}
e.preventDefault();
}
self.show = function () {
startInterval(options);
};