1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update guide

This commit is contained in:
Luke Pulverenti 2017-01-08 00:52:51 -05:00
parent f5a9a7c6bf
commit e5119016fc
17 changed files with 202 additions and 95 deletions

View file

@ -14,12 +14,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.4.450",
"_release": "1.4.450",
"version": "1.4.451",
"_release": "1.4.451",
"_resolution": {
"type": "version",
"tag": "1.4.450",
"commit": "379047a56c13c7ad4136a86610af37060dc28912"
"tag": "1.4.451",
"commit": "521e1c545a373b8768307a3d895bf1544fcbefa5"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.1",

View file

@ -14,7 +14,7 @@
.guideHeaderDateSelection {
font-size: 86%;
padding: .4em 0;
padding: .4em 0 .2em;
}
.guideHeaderTimeslots {
@ -66,6 +66,8 @@
white-space: nowrap;
position: relative;
contain: strict;
box-sizing: border-box;
border-bottom: .2em solid #121212;
}
.timeslotHeadersInner {
@ -145,7 +147,7 @@
text-overflow: ellipsis;
border-right: 1px solid #121212;
width: 24vw;
background: rgba(40, 40, 40, .9);
background: rgb(38, 38, 38);
display: flex;
align-items: center;
text-decoration: none;
@ -196,7 +198,7 @@
}
.channelHeaderCell {
border-bottom: .25em solid #121212 !important;
border-bottom: .2em solid #121212 !important;
background-size: auto 70%;
background-position: 92% center;
background-repeat: no-repeat;
@ -209,15 +211,8 @@
}
}
@media all and (max-width: 1200px) {
.guideChannelNumberWithImage {
display: none;
}
}
.channelPrograms, .channelHeaderCell {
height: 4em;
height: 4.4em;
contain: strict;
}
@ -227,7 +222,7 @@
}
.channelPrograms-tv, .channelHeaderCell-tv {
height: 3.2em;
height: 3.8em;
}
.channelTimeslotHeader {
@ -254,10 +249,9 @@
.programCell {
position: absolute;
top: 0;
/* Unfortunately the borders using vh get rounded while the bottom property doesn't. So this is a little hack to try and make them even*/
bottom: .236em;
border-left: .25em solid #121212 !important;
background-color: rgba(32, 32, 32, .95);
bottom: 0;
border-left: .2em solid #121212 !important;
background-color: rgb(30, 30, 30);
display: flex;
text-decoration: none;
overflow: hidden;
@ -304,6 +298,20 @@
display: block;
}
.guideProgramNameText {
margin: 0;
font-weight: normal;
}
.guideProgramSecondaryInfo {
display: flex;
align-items: center;
}
.programSecondaryTitle {
opacity: .6;
}
.programIcon {
margin-left: auto;
margin-right: .25em;
@ -326,6 +334,8 @@
padding: .18em .32em;
border-radius: .25em;
margin-right: .35em;
width: auto;
height: auto;
}
.programTextIcon-tv {
@ -337,6 +347,8 @@
max-width: 30%;
text-overflow: ellipsis;
overflow: hidden;
font-weight: normal;
margin: 0;
}
.guideChannelName {

View file

@ -512,20 +512,32 @@
html += '<div class="' + guideProgramNameClass + '">';
html += '<div class="guideProgramNameText">' + program.Name + '</div>';
var indicatorHtml;
if (program.IsLive && options.showLiveIndicator) {
html += '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Live') + '</span>';
indicatorHtml = '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Live') + '</span>';
}
else if (program.IsPremiere && options.showPremiereIndicator) {
html += '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Premiere') + '</span>';
indicatorHtml = '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Premiere') + '</span>';
}
else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
html += '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#AttributeNew') + '</span>';
indicatorHtml = '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#AttributeNew') + '</span>';
}
else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) {
html += '<span class="repeatTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Repeat') + '</span>';
indicatorHtml = '<span class="repeatTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Repeat') + '</span>';
}
if (indicatorHtml || program.EpisodeTitle) {
html += '<div class="guideProgramSecondaryInfo">';
html += indicatorHtml || '';
if (program.EpisodeTitle) {
html += '<span class="programSecondaryTitle">' + program.EpisodeTitle + '</span>';
}
html += '</div>';
}
html += program.Name;
html += '</div>';
if (program.IsHD && options.showHdIcon) {
@ -610,11 +622,8 @@
html += '<button type="button" class="' + cssClass + '"' + dataSrc + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
cssClass = 'guideChannelNumber';
if (hasChannelImage) {
cssClass += ' guideChannelNumberWithImage';
}
html += '<div class="' + cssClass + '">' + channel.Number + '</div>';
html += '<h3 class="' + cssClass + '">' + channel.Number + '</h3>';
if (!hasChannelImage) {
html += '<div class="guideChannelName">' + channel.Name + '</div>';

View file

@ -1145,8 +1145,9 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
function createMediaElement(options) {
if (browser.tv || browser.noAnimation) {
if (browser.tv || browser.noAnimation || browser.iOS) {
// too slow
// also on iOS, the backdrop image doesn't look right
options.backdropUrl = null;
}
return new Promise(function (resolve, reject) {

View file

@ -1,9 +1,14 @@
define(['playbackManager', 'events', 'serverNotifications'], function (playbackManager, events, serverNotifications) {
'use strict';
function getActivePlayerId() {
var info = playbackManager.getPlayerInfo();
return info ? info.id : null;
}
function sendPlayCommand(options, playType) {
var sessionId = playbackManager.getPlayerInfo().id;
var sessionId = getActivePlayerId();
var ids = options.ids || options.items.map(function (i) {
return i.Id;
@ -24,12 +29,12 @@
function sendPlayStateCommand(command, options) {
var sessionId = playbackManager.getPlayerInfo().id;
var sessionId = getActivePlayerId();
ApiClient.sendPlayStateCommand(sessionId, command, options);
}
function RemoteControlPlayer() {
return function () {
var self = this;
@ -53,7 +58,7 @@
self.sendCommand = function (command) {
var sessionId = playbackManager.getPlayerInfo().id;
var sessionId = getActivePlayerId();
ApiClient.sendCommand(sessionId, command);
};
@ -61,7 +66,7 @@
self.play = function (options) {
var playOptions = {};
playOptions.ids = options.ids || options.items.map(function(i) {
playOptions.ids = options.ids || options.items.map(function (i) {
return i.Id;
});
@ -182,7 +187,7 @@
return [];
};
self.getAudioStreamIndex = function() {
self.getAudioStreamIndex = function () {
};
@ -262,7 +267,7 @@
if (apiClient) {
return apiClient.getSessions().then(function (sessions) {
var currentTargetId = playbackManager.getPlayerInfo().id;
var currentTargetId = getActivePlayerId();
// Update existing data
//updateSessionInfo(popup, msg.Data);
@ -381,7 +386,7 @@
}
};
self.tryPair = function(target) {
self.tryPair = function (target) {
return Promise.resolve();
};
@ -406,7 +411,7 @@
function processUpdatedSessions(sessions) {
var currentTargetId = playbackManager.getPlayerInfo().id;
var currentTargetId = getActivePlayerId();
// Update existing data
//updateSessionInfo(popup, msg.Data);
@ -415,6 +420,7 @@
})[0];
if (session) {
firePlaybackEvent('statechange', session);
firePlaybackEvent('timeupdate', session);
firePlaybackEvent('pause', session);
}
@ -427,14 +433,14 @@
events.on(serverNotifications, 'SessionEnded', function (e, apiClient, data) {
console.log("Server reports another session ended");
if (playbackManager.getPlayerInfo().id === data.Id) {
if (getActivePlayerId() === data.Id) {
playbackManager.setDefaultPlayerActive();
}
});
events.on(serverNotifications, 'PlaybackStart', function (e, apiClient, data) {
if (data.DeviceId !== apiClient.deviceId()) {
if (playbackManager.getPlayerInfo().id === data.Id) {
if (getActivePlayerId() === data.Id) {
firePlaybackEvent('playbackstart', data);
}
}
@ -442,12 +448,10 @@
events.on(serverNotifications, 'PlaybackStopped', function (e, apiClient, data) {
if (data.DeviceId !== apiClient.deviceId()) {
if (playbackManager.getPlayerInfo().id === data.Id) {
if (getActivePlayerId() === data.Id) {
firePlaybackEvent('playbackstop', data);
}
}
});
}
return RemoteControlPlayer;
};
});

View file

@ -377,5 +377,5 @@
"SyncJobItemStatusRemovedFromDevice": "Vom Ger\u00e4t entfernt",
"SyncJobItemStatusCancelled": "Abgebrochen",
"Retry": "Wiederholen",
"HeaderMyDevice": "My Device"
"HeaderMyDevice": "Mein Ger\u00e4t"
}

View file

@ -377,5 +377,5 @@
"SyncJobItemStatusRemovedFromDevice": "Removido do dispositivo",
"SyncJobItemStatusCancelled": "Cancelado",
"Retry": "Tentar Novamente",
"HeaderMyDevice": "My Device"
"HeaderMyDevice": "Meu Dispositivo"
}

View file

@ -323,9 +323,20 @@
});
}
var instance;
function onViewShow(e) {
if (e.detail.type === 'video-osd') {
instance.hide();
} else {
instance.show();
}
}
function dockedTabs(options) {
var self = this;
instance = self;
self.element = render(options);
@ -339,9 +350,14 @@
});
showCurrentUserTabs(self.element);
document.addEventListener('viewshow', onViewShow);
}
dockedTabs.prototype.destroy = function () {
document.removeEventListener('viewshow', onViewShow);
instance = null;
var self = this;
var elem = self.element;
@ -350,5 +366,13 @@
self.element = null;
};
dockedTabs.prototype.show = function () {
this.element.classList.remove('hide');
};
dockedTabs.prototype.hide = function () {
this.element.classList.add('hide');
};
return dockedTabs;
});

View file

@ -1,4 +1,4 @@
define(['browser', 'datetime', 'libraryBrowser', 'listView', 'userdataButtons', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'apphost', 'cardStyle'], function (browser, datetime, libraryBrowser, listView, userdataButtons, imageLoader, playbackManager, nowPlayingHelper, events, appHost) {
define(['browser', 'datetime', 'libraryBrowser', 'listView', 'userdataButtons', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'cardStyle'], function (browser, datetime, libraryBrowser, listView, userdataButtons, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost) {
'use strict';
function showSlideshowMenu(context) {
@ -108,6 +108,63 @@
}).join('<br/>');
}
function seriesImageUrl(item, options) {
if (item.Type !== 'Episode') {
return null;
}
options = options || {};
options.type = options.type || "Primary";
if (options.type === 'Primary') {
if (item.SeriesPrimaryImageTag) {
options.tag = item.SeriesPrimaryImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
}
}
if (options.type === 'Thumb') {
if (item.SeriesThumbImageTag) {
options.tag = item.SeriesThumbImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
}
if (item.ParentThumbImageTag) {
options.tag = item.ParentThumbImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
}
}
return null;
}
function imageUrl(item, options) {
options = options || {};
options.type = options.type || "Primary";
if (item.ImageTags && item.ImageTags[options.type]) {
options.tag = item.ImageTags[options.type];
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
}
if (item.AlbumId && item.AlbumPrimaryImageTag) {
options.tag = item.AlbumPrimaryImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
}
return null;
}
var currentImgUrl;
function updateNowPlayingInfo(context, state) {
@ -122,38 +179,18 @@
context.querySelector('.nowPlayingPageTitle').classList.add('hide');
}
var url;
var url = item ? seriesImageUrl(item, {
maxHeight: 300
}) || imageUrl(item, {
maxHeight: 300
}) : null;
var backdropUrl = null;
if (!item) {
}
else if (item.PrimaryImageTag) {
url = ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
type: "Primary",
maxHeight: 300,
tag: item.PrimaryImageTag
});
}
else if (item.BackdropImageTag) {
url = ApiClient.getScaledImageUrl(item.BackdropItemId, {
type: "Backdrop",
maxHeight: 300,
tag: item.BackdropImageTag,
index: 0
});
} else if (item.ThumbImageTag) {
url = ApiClient.getScaledImageUrl(item.ThumbImageItemId, {
type: "Thumb",
maxHeight: 300,
tag: item.ThumbImageTag
});
}
if (url == currentImgUrl) {
if (url === currentImgUrl) {
return;
}
@ -469,6 +506,7 @@
console.log('remotecontrol event: ' + e.type);
updatePlayerState(dlg, {});
loadPlaylist(dlg);
}
@ -497,8 +535,6 @@
lastUpdateTime = now;
var player = this;
var state = lastPlayerState;
var nowPlayingItem = state.NowPlayingItem || {};
currentRuntimeTicks = playbackManager.duration(player);
updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
}

View file

@ -254,7 +254,7 @@
html += '<td data-title="Date">';
var date = datetime.parseISO8601Date(item.Date, true);
html += date.toLocaleDateString();
html += datetime.toLocaleDateString(date);
html += '</td>';
html += '<td data-title="Source" class="fileCell">';

View file

@ -216,7 +216,7 @@
itemHtml += '<div class="listItemBodyText secondary">';
var date = datetime.parseISO8601Date(item.Date, true);
itemHtml += date.toLocaleDateString();
itemHtml += datetime.toLocaleDateString(date);
itemHtml += '</div>';
//itemHtml += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
@ -1129,7 +1129,7 @@
html += '<div class="listItemBodyText secondary">';
var date = datetime.parseISO8601Date(entry.Date, true);
html += date.toLocaleDateString() + ' ' + date.toLocaleTimeString().toLowerCase();
html += datetime.toLocaleString(date).toLowerCase();
html += '</div>';
html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';

View file

@ -1747,7 +1747,7 @@
try {
var date = datetime.parseISO8601Date(review.Date, true).toLocaleDateString();
var date = datetime.toLocaleDateString(datetime.parseISO8601Date(review.Date, true));
html += '<span class="reviewDate">' + date + '</span>';
}

View file

@ -1,4 +1,4 @@
define(['appSettings', 'dom', 'browser', 'scrollStyles'], function (appSettings, dom, browser) {
define(['appSettings', 'dom', 'browser', 'datetime', 'scrollStyles'], function (appSettings, dom, browser, datetime) {
'use strict';
function fadeInRight(elem) {
@ -432,7 +432,7 @@
weekday[6] = Globalize.translate('OptionSaturday');
var day = weekday[date.getDay()];
date = date.toLocaleDateString();
date = datetime.toLocaleDateString(date);
if (date.toLowerCase().indexOf(day.toLowerCase()) == -1) {
return day + " " + date;

View file

@ -537,13 +537,11 @@
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
}
if (options.type === 'Primary') {
if (item.AlbumId && item.AlbumPrimaryImageTag) {
options.tag = item.AlbumPrimaryImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
}
}
return null;
}

View file

@ -1242,7 +1242,7 @@ var AppInfo = {};
define("dom", [embyWebComponentsBowerPath + "/dom"], returnFirstDependency);
define("fullscreen-doubleclick", [embyWebComponentsBowerPath + "/fullscreen/fullscreen-doubleclick"], returnFirstDependency);
define("fullscreenManager", [embyWebComponentsBowerPath + "/fullscreen/fullscreenmanager"], returnFirstDependency);
define("fullscreenManager", [embyWebComponentsBowerPath + "/fullscreen/fullscreenmanager", 'events'], returnFirstDependency);
define("layoutManager", [embyWebComponentsBowerPath + "/layoutmanager"], getLayoutManager);
define("playMenu", [embyWebComponentsBowerPath + "/playmenu"], returnFirstDependency);

View file

@ -401,6 +401,7 @@
bindToPlayer(playbackManager.getCurrentPlayer());
document.addEventListener('mousemove', onMouseMove);
document.body.classList.add('autoScrollY');
showOsd();
@ -412,6 +413,7 @@
getHeaderElement().classList.remove('osdHeader');
getHeaderElement().classList.remove('osdHeader-hidden');
document.removeEventListener('mousemove', onMouseMove);
document.body.classList.remove('autoScrollY');
inputManager.off(window, onInputCommand);
events.off(playbackManager, 'playerchange', onPlayerChange);

View file

@ -82,6 +82,7 @@
.videoOsdBottom .buttons {
padding: .25em 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
@ -153,6 +154,26 @@
right: 0;
position: fixed;
}
@media all and (max-width:600px) {
.osdPoster {
display: none !important;
}
.videoOsdBottom .paper-icon-button-light {
margin: 0;
}
.videoOsdBottom .volumeButtons {
display: none !important;
}
}
@media all and (max-width: 1200px) {
.videoOsdBottom .endsAtText {
display: none !important;
}
}
</style>
<div class="pageContainer flex">