cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

update dynamic images

Browse Source
This commit is contained in:
Luke Pulverenti 2015-06-27 23:29:50 -04:00
parent 11c5d8562d
commit 8c2b65740f
17 changed files with 153 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
dashboard-ui/cordova/chromecast.js vendored
View File

@ -27,14 +27,14 @@
$(castPlayer).on("connect", function (e) {
Logger.log('cc: connect');
console.log('cc: connect');
// Reset this so the next query doesn't make it appear like content is playing.
self.lastPlayerData = {};
});
$(castPlayer).on("playbackstart", function (e, data) {
Logger.log('cc: playbackstart');
console.log('cc: playbackstart');
var state = self.getPlayerStateInternal(data);
$(self).trigger("playbackstart", [state]);
@ -42,7 +42,7 @@
$(castPlayer).on("playbackstop", function (e, data) {
Logger.log('cc: playbackstop');
console.log('cc: playbackstop');
var state = self.getPlayerStateInternal(data);
$(self).trigger("playbackstop", [state]);
@ -53,7 +53,7 @@
$(castPlayer).on("playbackprogress", function (e, data) {
Logger.log('cc: positionchange');
console.log('cc: positionchange');
var state = self.getPlayerStateInternal(data);
$(self).trigger("positionchange", [state]);
@ -288,10 +288,12 @@
return target;
}
function isChromecast(name) {
function isChromecastName(name) {
name = (name || '').toLowerCase();
var validTokens = ['nexusplayer', 'chromecast', 'eurekadongle'];
var validTokens = ['nexusplayer'];
//validTokens.push('chromecast');
//validTokens.push('eurekadongle');
return validTokens.filter(function (t) {
@ -304,7 +306,7 @@
return ConnectSDKHelper.getDeviceList().filter(function (d) {
return isChromecast(d.getModelName()) || isChromecast(d.getFriendlyName());
return d.hasService('Chromecast') || d.hasService('ChromeCast') || isChromecastName(d.getModelName()) || isChromecastName(d.getFriendlyName());
}).map(convertDeviceToTarget);
};
@ -416,7 +418,7 @@
data = data || self.lastPlayerData;
self.lastPlayerData = data;
Logger.log(JSON.stringify(data));
console.log(JSON.stringify(data));
return data;
};
@ -459,7 +461,7 @@
}
function handleSessionDisconnect() {
Logger.log("session disconnected");
console.log("session disconnected");
cleanupSession();
MediaController.removeActivePlayer(PlayerName);
@ -469,7 +471,7 @@
currentWebAppSession = webAppSession;
Logger.log('session.connect succeeded');
console.log('session.connect succeeded');
webAppSession.setWebAppSessionListener();
MediaController.setActivePlayer(PlayerName, convertDeviceToTarget(device));
@ -530,15 +532,15 @@
function tryLaunchWebSession(device) {
Logger.log('calling launchWebApp');
console.log('calling launchWebApp');
device.getWebAppLauncher().launchWebApp(ApplicationID).success(function (session) {
Logger.log('launchWebApp success. calling onSessionConnected');
console.log('launchWebApp success. calling onSessionConnected');
setupWebAppSession(device, session, true);
}).error(function (err1) {
Logger.log('launchWebApp error:' + JSON.stringify(err1));
console.log('launchWebApp error:' + JSON.stringify(err1));
});
}
@ -547,22 +549,22 @@
// First try to join existing session. If it fails, launch a new one
Logger.log('calling joinWebApp');
console.log('calling joinWebApp');
device.getWebAppLauncher().joinWebApp(ApplicationID).success(function (session) {
Logger.log('joinWebApp success. calling onSessionConnected');
console.log('joinWebApp success. calling onSessionConnected');
setupWebAppSession(device, session, false);
}).error(function (err) {
Logger.log('joinWebApp error: ' + JSON.stringify(err));
console.log('joinWebApp error: ' + JSON.stringify(err));
if (enableRetry) {
tryJoinWebSession(device, false);
return;
}
Logger.log('calling launchWebApp');
console.log('calling launchWebApp');
tryLaunchWebSession(device);
});
@ -581,7 +583,7 @@
device.off("ready");
Logger.log('creating webAppSession');
console.log('creating webAppSession');
launchWebApp(device);
}
@ -608,7 +610,7 @@
self.tryPairWithDevice = function (device, deferred) {
Logger.log('Will attempt to connect to Chromecast');
console.log('Will attempt to connect to Chromecast');
device.on("disconnect", function () {
device.off("ready");
@ -616,18 +618,18 @@
});
if (device.isReady()) {
Logger.log('Device is already ready, calling onDeviceReady');
console.log('Device is already ready, calling onDeviceReady');
onDeviceReady(device);
} else {
Logger.log('Binding device ready handler');
console.log('Binding device ready handler');
device.on("ready", function () {
Logger.log('device.ready fired');
console.log('device.ready fired');
onDeviceReady(device);
});
Logger.log('Calling device.connect');
console.log('Calling device.connect');
device.connect();
}
};

2
dashboard-ui/cordova/imagestore.js vendored
View File

@ -2,7 +2,7 @@
function setImageIntoElement(elem, url) {
if (elem.tagName === "DIV") {
if (elem.tagName !== "IMG") {
elem.style.backgroundImage = "url('" + url + "')";

10
dashboard-ui/css/mediaplayer-video.css
View File

@ -36,7 +36,7 @@
}
.videoControls {
padding: .5em .5em;
padding: 0 .5em;
background-color: rgba(0, 0, 0, .7);
position: fixed;
left: 0;
@ -199,7 +199,7 @@
}
}
@media all and (max-width: 1400px), all and (max-height: 800px) {
@media all and (max-width: 1400px), all and (max-height: 900px) {
#mediaPlayer .nowPlayingInfo {
display: none !important;
@ -216,15 +216,15 @@
}
}
@media all and (min-width: 1300px) {
@media all and (min-width: 1400px) {
.nowPlayingInfo {
padding-bottom: 0;
}
#videoPlayer .nowPlayingImage img {
height: auto !important;
max-width: 400px;
max-height: 240px;
max-width: 360px;
max-height: 220px;
}
}

18
dashboard-ui/css/nowplaying.css
View File

@ -148,8 +148,13 @@
@media (orientation: landscape) and (max-height: 400px) {
.nowPlayingPageTitle {
margin-top: -1.5em;
padding: 0 60px;
margin: 0 auto;
width: 50%;
position: absolute;
text-align: center;
left: 0;
right: 0;
top: -20px;
}
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
@ -160,8 +165,13 @@
@media (orientation: portrait) and (max-height: 600px) {
.nowPlayingPageTitle {
margin-top: -1.5em;
padding: 0 60px;
margin: 0 auto;
width: 50%;
position: absolute;
text-align: center;
left: 0;
right: 0;
top: -20px;
}
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {

1
dashboard-ui/favorites.html
View File

@ -8,7 +8,6 @@
<div class="libraryViewNav scopedLibraryViewNav">
<a href="index.html"><i class="material-icons">home</i>${TabHome}</a>
<a href="homelatest.html"><i class="material-icons">new_releases</i>${TabLatest}</a>
<a href="tvrecommended.html"><i class="material-icons">navigate_next</i>${TabNextUp}</a>
<a href="favorites.html" class="ui-btn-active"><i class="material-icons">favorite</i>${TabFavorites}</a>
<a href="tvupcoming.html"><i class="material-icons">schedule</i>${TabUpcoming}</a>

25
dashboard-ui/homelatest.html
View File

@ -1,25 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Emby</title>
</head>
<body>
<div id="homeLatestPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book" data-require="scripts/sections,scripts/homelatest,paperbuttonstyle">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="index.html"><i class="material-icons">home</i>${TabHome}</a>
<a href="#" class="ui-btn-active"><i class="material-icons">new_releases</i>${TabLatest}</a>
<a href="tvrecommended.html"><i class="material-icons">navigate_next</i>${TabNextUp}</a>
<a href="favorites.html"><i class="material-icons">favorite</i>${TabFavorites}</a>
<a href="tvupcoming.html"><i class="material-icons">schedule</i>${TabUpcoming}</a>
</div>
<div data-role="content">
<div class="ehsContent">
<div class="sections"></div>
</div>
</div>
</div>
</body>
</html>

1
dashboard-ui/index.html
View File

@ -9,7 +9,6 @@
<div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active"><i class="material-icons">home</i>${TabHome}</a>
<a href="homelatest.html"><i class="material-icons">new_releases</i>${TabLatest}</a>
<a href="tvrecommended.html"><i class="material-icons">navigate_next</i>${TabNextUp}</a>
<a href="favorites.html"><i class="material-icons">favorite</i>${TabFavorites}</a>
<a href="tvupcoming.html"><i class="material-icons">schedule</i>${TabUpcoming}</a>

1
dashboard-ui/itemdetails.html
View File

@ -9,7 +9,6 @@
<div class="itemTabs homeTabs" style="display: none;">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="index.html" class="lnkHomeHome"><i class="material-icons">home</i>${TabHome}</a>
<a href="homelatest.html" class="lnkHomeLatest"><i class="material-icons">new_releases</i>${TabLatest}</a>
<a href="tvrecommended.html" class="lnkHomeNextUp"><i class="material-icons">navigate_next</i>${TabNextUp}</a>
<a href="favorites.html" class="lnkHomeFavorites"><i class="material-icons">favorite</i>${TabFavorites}</a>
<a href="tvupcoming.html" class="lnkHomeUpcoming"><i class="material-icons">schedule</i>${TabUpcoming}</a>

2
dashboard-ui/nowplaying.html
View File

@ -16,7 +16,7 @@
<neon-animated-pages selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<neon-animatable>
<div style="text-align:center;padding-bottom:100px;">
<div style="text-align:center;">
<div class="nowPlayingPageTitle" style="line-height: normal;">
</div>

48
dashboard-ui/scripts/homelatest.js
View File

@ -1,48 +0,0 @@
(function ($, document) {
function loadSections(page, user) {
var userId = user.Id;
var i, length;
var sectionCount = 3;
var elem = $('.sections', page);
if (!elem.html().length) {
var html = '';
for (i = 0, length = sectionCount; i < length; i++) {
html += '<div class="homePageSection section' + i + '"></div>';
}
elem.html(html);
}
var context = 'home-latest';
var latestMediElem = $('.section0', page);
Dashboard.showLoadingMsg();
var promises = [];
promises.push(Sections.loadRecentlyAdded(latestMediElem, user, context));
promises.push(Sections.loadLatestLiveTvRecordings($(".section1", page), userId));
promises.push(Sections.loadLatestChannelItems($(".section2", page), userId));
$.when(promises).done(function() {
Dashboard.hideLoadingMsg();
});
}
$(document).on('pagebeforeshowready', "#homeLatestPage", function () {
var page = this;
Dashboard.getCurrentUser().done(function (user) {
loadSections(page, user);
});
});
})(jQuery, document);

2
dashboard-ui/scripts/itemdetailpage.js
View File

@ -223,12 +223,10 @@
else if (context == 'home-latest') {
elem = $('.homeTabs', page).show();
$('a', elem).removeClass('ui-btn-active');
$('.lnkHomeLatest', page).addClass('ui-btn-active');
}
else if (context == 'photos' || context == 'photos-photos') {
elem = $('.photoTabs', page).show();
$('a', elem).removeClass('ui-btn-active');
$('.lnkHomeLatest', page).addClass('ui-btn-active');
if (context == 'photos-photos') {
$('.lnkPhotos', page).addClass('ui-btn-active');

2
dashboard-ui/scripts/librarylist.js
View File

@ -1147,7 +1147,7 @@
$('<div class="playedIndicator"></div>').insertAfter($('.cardOverlayTarget', card));
}
$('.playedIndicator', card).html('<i class="fa fa-check"></i>');
$('.playedIndicator', card).html('<i class="material-icons">check</i>');
$('.cardProgress', card).remove();
}
else if (userData.UnplayedItemCount) {

21
dashboard-ui/scripts/librarymenu.js
View File

@ -213,8 +213,7 @@
}
function closeMainDrawer() {
var drawerPanel = $('.mainDrawerPanel')[0];
drawerPanel.closeDrawer();
document.getElementsByClassName('mainDrawerPanel')[0].closeDrawer();
}
function ensureDrawerStructure(drawer) {
@ -281,14 +280,16 @@
html += '<div style="margin-top:5px;"></div>';
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(this);">';
html += '<div class="lazy" data-src="css/images/mblogoicon.png" style="width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.6em 0 1.5em;display:inline-block;"></div>';
html += '<div style="background-image:url(\'css/images/mblogoicon.png\');width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.6em 0 1.5em;display:inline-block;"></div>';
html += Globalize.translate('ButtonHome');
html += '</a>';
}
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html" onclick="return LibraryMenu.onLinkClicked(this);"><iron-icon icon="tablet-android" class="sidebarLinkIcon" style="color:#673AB7;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>';
$('.userheader', drawer).html(html).lazyChildren();
var elem = $('.userheader', drawer).html(html);
$('.lazy', elem).fillImages();
}
function refreshLibraryInfoInDrawer(user, drawer) {
@ -514,11 +515,13 @@
// There doesn't seem to be a way to detect if the drawer is in the process of opening, so try to handle that here
if ((new Date().getTime() - lastOpenTime) > 200) {
closeMainDrawer();
setTimeout(function () {
Dashboard.navigate(link.href);
}, 300);
closeMainDrawer();
setTimeout(function () {
Dashboard.navigate(link.href);
}, 350);
}, 50);
}
return false;
@ -532,7 +535,7 @@
setTimeout(function () {
Dashboard.logout();
}, 300);
}, 350);
}
return false;

2
dashboard-ui/scripts/site.js
View File

@ -742,7 +742,7 @@ var Dashboard = {
url += "&width=" + (imgWidth * Math.max(window.devicePixelRatio || 1, 2));
}
html += '<div class="lazy" data-src="' + url + '" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin-right:.8em;display:inline-block;"></div>';
html += '<div style="background-image:url(\'' + url + '\');width:' + imgWidth + 'px;height:' + imgWidth + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin-right:.8em;display:inline-block;"></div>';
}
html += user.name;

117
dashboard-ui/thirdparty/jquery.unveil-custom.js vendored
View File

@ -1,4 +1,73 @@
/**
(function ($) {
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* @author Sam Sehnert
* @desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
var $w = $(window);
$.fn.visibleInViewport = function (partial, hidden, direction, threshold) {
if (this.length < 1)
return;
var $t = this.length > 1 ? this.eq(0) : this,
t = $t.get(0),
vpWidth = $w.width(),
vpHeight = $w.height(),
direction = (direction) ? direction : 'both',
clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
if (typeof t.getBoundingClientRect === 'function') {
// Use this native browser method, if available.
var rec = t.getBoundingClientRect(),
tViz = rec.top >= 0 && rec.top < vpHeight + threshold,
bViz = rec.bottom > 0 && rec.bottom <= vpHeight + threshold,
lViz = rec.left >= 0 && rec.left < vpWidth + threshold,
rViz = rec.right > 0 && rec.right <= vpWidth + threshold,
vVisible = partial ? tViz || bViz : tViz && bViz,
hVisible = partial ? lViz || rViz : lViz && rViz;
if (direction === 'both')
return clientSize && vVisible && hVisible;
else if (direction === 'vertical')
return clientSize && vVisible;
else if (direction === 'horizontal')
return clientSize && hVisible;
} else {
var viewTop = $w.scrollTop(),
viewBottom = viewTop + vpHeight,
viewLeft = $w.scrollLeft(),
viewRight = viewLeft + vpWidth,
offset = $t.offset(),
_top = offset.top,
_bottom = _top + $t.height(),
_left = offset.left,
_right = _left + $t.width(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom,
compareLeft = partial === true ? _right : _left,
compareRight = partial === true ? _left : _right;
if (direction === 'both')
return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
else if (direction === 'vertical')
return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
else if (direction === 'horizontal')
return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
}
};
})(jQuery);
/**
* jQuery Unveil
* A very lightweight jQuery plugin to lazy load images
* http://luis-almeida.github.com/unveil
@ -12,7 +81,6 @@
var unveilId = 0;
function getThreshold() {
// If less than 100, the search window ends up not getting images
@ -29,38 +97,34 @@
return Math.max(screen.availHeight * screens, 1000);
}
var threshold = getThreshold();
function isVisible() {
return $(this).visibleInViewport(true, false, 'both', threshold);
}
function fillImage() {
var elem = this;
var source = elem.getAttribute('data-src');
if (source) {
ImageStore.setImageInto(elem, source);
elem.setAttribute("data-src", '');
}
}
$.fn.unveil = function () {
var $w = $(window),
th = getThreshold(),
attrib = "data-src",
images = this,
loaded;
unveilId++;
var eventNamespace = 'unveil' + unveilId;
this.one("unveil", function () {
var elem = this;
var source = elem.getAttribute(attrib);
if (source) {
ImageStore.setImageInto(elem, source);
elem.setAttribute("data-src", '');
}
});
this.one("unveil", fillImage);
function unveil() {
var inview = images.filter(function () {
var $e = $(this);
if ($e.is(":hidden")) return;
var wt = $w.scrollTop(),
wb = wt + $w.height(),
et = $e.offset().top,
eb = et + $e.height();
return eb >= wt - th && et <= wb + th;
});
var inview = images.filter(isVisible);
loaded = inview.trigger("unveil");
images = images.not(loaded);
@ -80,6 +144,11 @@
};
$.fn.fillImages = function () {
return this.each(fillImage);
};
$.fn.lazyChildren = function () {
var lazyItems = $(".lazy", this);
@ -93,7 +162,7 @@
$.fn.lazyImage = function (url) {
return this.attr('data-src', url).unveil();
return this.attr('data-src', url).fillImages();
};
})(window.jQuery || window.Zepto);

1
dashboard-ui/tvrecommended.html
View File

@ -8,7 +8,6 @@
<div class="libraryViewNav globalNav" style="display: none;">
<a href="index.html"><i class="material-icons">home</i>${TabHome}</a>
<a href="homelatest.html"><i class="material-icons">new_releases</i>${TabLatest}</a>
<a href="#" class="ui-btn-active"><i class="material-icons">navigate_next</i>${TabNextUp}</a>
<a href="favorites.html"><i class="material-icons">favorite</i>${TabFavorites}</a>
<a href="tvupcoming.html"><i class="material-icons">schedule</i>${TabUpcoming}</a>

1
dashboard-ui/tvupcoming.html
View File

@ -7,7 +7,6 @@
<div id="tvUpcomingPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-require="scripts/tvupcoming">
<div class="libraryViewNav globalNav" style="display: none;">
<a href="index.html"><i class="material-icons">home</i>${TabHome}</a>
<a href="homelatest.html"><i class="material-icons">new_releases</i>${TabLatest}</a>
<a href="tvrecommended.html"><i class="material-icons">navigate_next</i>${TabNextUp}</a>
<a href="favorites.html"><i class="material-icons">favorite</i>${TabFavorites}</a>
<a href="#" class="ui-btn-active"><i class="material-icons">schedule</i>${TabUpcoming}</a>