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

add guide settings

Browse source
This commit is contained in:
Luke Pulverenti 2016-09-28 01:11:41 -04:00
parent fab755eccd
commit 35c68c997d
14 changed files with 314 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

8
dashboard-ui/bower_components/emby-webcomponents/.bower.json vendored
View file

@ -14,12 +14,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.4.269",
"_release": "1.4.269",
"version": "1.4.272",
"_release": "1.4.272",
"_resolution": {
"type": "version",
"tag": "1.4.269",
"commit": "41662a2afb91d76f80d64f9af4aae12144047e75"
"tag": "1.4.272",
"commit": "7976226b263bc95a1daa565d7fb47c316e7c2cad"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.1",

101
dashboard-ui/bower_components/emby-webcomponents/guide/guide-categories.js vendored Normal file
View file

@ -0,0 +1,101 @@
define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
function save(context, options) {
var categories = [];
var chkCategorys = context.querySelectorAll('.chkCategory');
for (var i = 0, length = chkCategorys.length; i < length; i++) {
var type = chkCategorys[i].getAttribute('data-type');
if (chkCategorys[i].checked) {
categories.push(type);
}
}
// differentiate between none and all
categories.push('all');
options.categories = categories;
}
function load(context, options) {
var selectedCategories = options.categories || [];
var chkCategorys = context.querySelectorAll('.chkCategory');
for (var i = 0, length = chkCategorys.length; i < length; i++) {
var type = chkCategorys[i].getAttribute('data-type');
chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) != -1;
}
}
function showEditor(options) {
return new Promise(function (resolve, reject) {
var settingsChanged = false;
require(['text!./guide-categories.template.html'], function (template) {
var dialogOptions = {
removeOnClose: true,
scrollY: false
};
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
var html = '';
html += globalize.translateDocument(template, 'sharedcomponents');
dlg.innerHTML = html;
dlg.addEventListener('change', function () {
settingsChanged = true;
});
dlg.addEventListener('close', function () {
if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
}
save(dlg, options);
if (settingsChanged) {
resolve(options);
} else {
reject();
}
});
dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg);
});
if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
}
load(dlg, options);
dialogHelper.open(dlg);
});
});
}
return {
show: showEditor
};
});

33
dashboard-ui/bower_components/emby-webcomponents/guide/guide-categories.template.html vendored Normal file
View file

@ -0,0 +1,33 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<h3 class="formDialogHeaderTitle">
${Categories}
</h3>
</div>
<div class="formDialogContent smoothScrollY">
<form class="dialogContentInner dialog-content-centered" style="padding-top:2em;">
<div class="checkboxList">
<label>
<input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="movies" />
<span>${Movies}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="sports" />
<span>${Sports}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="kids" />
<span>${Kids}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="news" />
<span>${News}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="others" />
<span>${Others}</span>
</label>
</div>
</form>
</div>

5
dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.js vendored
View file

@ -7,8 +7,9 @@
var type = chkIndicators[i].getAttribute('data-type');
userSettings.set('guide-indicator-' + type, chkIndicators[i].checked);
}
userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
}
function load(context) {
@ -24,6 +25,8 @@
chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) == 'true';
}
}
context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') == 'true';
}
function showEditor() {

15
dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.template.html vendored
View file

@ -10,25 +10,30 @@
<h3 class="checkboxListLabel">${ShowIndicatorsFor}</h3>
<div class="checkboxList">
<label>
<input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="hd" />
<input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="hd"/>
<span>${HDPrograms}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="live" data-default="true" />
<input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="live" data-default="true"/>
<span>${LiveBroadcasts}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="new" />
<input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="new"/>
<span>${NewEpisodes}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="premiere" data-default="true" />
<input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="premiere" data-default="true"/>
<span>${Premieres}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="repeat" />
<input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="repeat"/>
<span>${RepeatEpisodes}</span>
</label>
</div>
<br/>
<label>
<input type="checkbox" is="emby-checkbox" class="chkColorCodedBackgrounds" />
<span>${EnableColorCodedBackgrounds}</span>
</label>
</form>
</div>

125
dashboard-ui/bower_components/emby-webcomponents/guide/guide.css vendored
View file

@ -9,6 +9,7 @@
width: 100%;
flex-shrink: 0;
display: flex;
padding-left: 3.4em;
}
.tvProgramSectionHeader {
@ -22,34 +23,10 @@
position: relative;
}
.tvProgramTimeSlotInner {
padding: .5em;
}
.tvProgramInfo {
vertical-align: middle;
padding: .5em .5em;
border-bottom: .65vh solid #121212;
}
.tvProgramCurrentTimeSlot {
background-color: green;
}
.tvProgramName {
color: #fff;
margin-bottom: .5em;
}
.tvProgramTime {
color: #fff;
}
.guideProgramIndicator {
text-transform: uppercase;
border-radius: 2px;
margin-right: .5em;
color: #fff;
font-size: 74%;
padding: .2em .25em;
display: inline-flex;
@ -59,30 +36,6 @@
color: #fff;
}
.programAccent {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
}
.sportsAccent {
background-color: #0A7C33;
}
.newsAccent {
background-color: #523378;
}
.movieAccent {
background-color: #A43913;
}
.childAccent {
background-color: #0B487D;
}
.channelTimeslotHeader {
flex-shrink: 0;
}
@ -184,7 +137,6 @@
background: rgba(40, 40, 40, .9);
display: flex;
align-items: center;
color: #fff !important;
text-decoration: none;
/* Needed in firefox */
text-align: left;
@ -329,7 +281,6 @@
border-left: .65vh solid #121212 !important;
background-color: rgba(32, 32, 32, .95);
display: flex;
color: #fff !important;
text-decoration: none;
overflow: hidden;
align-items: center;
@ -338,15 +289,32 @@
contain: strict;
}
.timeslotCellInner {
.programAccent {
position: absolute;
bottom: 0;
overflow: hidden;
width: 100%;
top: 0;
display: block;
text-decoration: none;
color: #fff !important;
left: 0;
right: 0;
height: 2px;
}
.sportsAccent {
background-color: #3F51B5;
}
.movieAccent {
background-color: #673AB7;
}
.childAccent {
background-color: #2196F3;
}
.newsAccent {
background-color: #4CAF50;
}
.specialsAccent {
background-color: #FF9800;
}
.guideProgramName {
@ -357,11 +325,6 @@
align-items: center;
}
.guideProgramTime {
padding: 0 .5em .35em;
color: #bbb;
}
.programIcon {
margin-left: auto;
margin-right: .25em;
@ -405,6 +368,33 @@
}
}
.channelsContainer {
display: flex;
}
.btnCategories {
margin: 0 .3em !important;
padding: 0 !important;
flex-shrink: 0;
background: rgba(40, 40, 40, .9);
border-radius: 0 !important;
width: 2.8em;
font-weight: normal !important;
align-items: flex-start;
}
.btnCategoriesText {
transform: rotate(90deg);
text-transform: uppercase;
transform-origin: left;
margin-left: 1.2em;
letter-spacing: .25em;
/*position: fixed;
top: 20%;*/
white-space: nowrap;
margin-top: -10em;
}
.channelList {
display: flex;
flex-direction: column;
@ -456,3 +446,14 @@
display: flex;
align-items: center;
}
@media all and (max-width: 800px), all and (max-height: 600px) {
.tvGuideHeader {
padding-left: 0;
}
.btnCategories {
display: none;
}
}

147
dashboard-ui/bower_components/emby-webcomponents/guide/guide.js vendored
View file

@ -9,12 +9,24 @@
});
}
function showCategoryOptions(instance) {
require(['guide-categories-dialog'], function (guideCategoriesDialog) {
guideCategoriesDialog.show(instance.categoryOptions).then(function (categoryOptions) {
instance.categoryOptions = categoryOptions;
instance.refresh();
});
});
}
function Guide(options) {
var self = this;
var items = {};
self.options = options;
self.categoryOptions = { categories: [] };
// 30 mins
var cellCurationMinutes = 30;
@ -316,6 +328,14 @@
var clickAction = layoutManager.tv ? 'link' : 'programdialog';
var categories = self.categoryOptions.categories || [];
var displayMovieContent = !categories.length || categories.indexOf('movies') != -1;
var displaySportsContent = !categories.length || categories.indexOf('sports') != -1;
var displayOtherContent = !categories.length || categories.indexOf('others') != -1;
var displayNewsContent = !categories.length || categories.indexOf('news') != -1;
var displayKidsContent = !categories.length || categories.indexOf('kids') != -1;
var enableColorCodedBackgrounds = userSettings.get('guide-colorcodedbackgrounds') == 'true';
for (var i = 0, length = programs.length; i < length; i++) {
var program = programs[i];
@ -346,20 +366,35 @@
endPercent *= 100;
var cssClass = "programCell clearButton itemAction";
var addAccent = true;
var accentCssClass;
var displayInnerContent = true;
if (program.IsKids) {
cssClass += " childProgramInfo";
displayInnerContent = displayKidsContent;
accentCssClass = 'childAccent';
} else if (program.IsSports) {
cssClass += " sportsProgramInfo";
displayInnerContent = displaySportsContent;
accentCssClass = 'sportsAccent';
} else if (program.IsNews) {
cssClass += " newsProgramInfo";
displayInnerContent = displayNewsContent;
accentCssClass = 'newsAccent';
} else if (program.IsMovie) {
cssClass += " movieProgramInfo";
displayInnerContent = displayMovieContent;
accentCssClass = 'movieAccent';
}
else {
cssClass += " plainProgramInfo";
addAccent = false;
displayInnerContent = displayOtherContent;
}
if (enableColorCodedBackgrounds && accentCssClass) {
cssClass += ' ' + accentCssClass;
accentCssClass = null;
}
var timerAttributes = '';
@ -369,53 +404,47 @@
if (program.SeriesTimerId) {
timerAttributes += ' data-seriestimerid="' + program.SeriesTimerId + '"';
}
html += '<button data-action="' + clickAction + '"' + timerAttributes + ' data-isfolder="' + program.IsFolder + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">';
var guideProgramNameClass = "guideProgramName";
if (displayInnerContent) {
var guideProgramNameClass = "guideProgramName";
html += '<div class="' + guideProgramNameClass + '">';
html += '<div class="' + guideProgramNameClass + '">';
if (program.IsLive && options.showLiveIndicator) {
html += '<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>';
}
else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
html += '<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>';
}
html += program.Name;
html += '</div>';
if (program.IsHD && options.showHdIcon) {
html += '<i class="guideHdIcon md-icon programIcon">hd</i>';
}
if (program.SeriesTimerId) {
if (program.TimerId) {
html += '<i class="seriesTimerIcon md-icon programIcon">&#xE062;</i>';
} else {
html += '<i class="seriesTimerIcon seriesTimerIcon-inactive md-icon programIcon">&#xE062;</i>';
if (program.IsLive && options.showLiveIndicator) {
html += '<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>';
}
else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
html += '<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>';
}
}
else if (program.TimerId) {
html += '<i class="timerIcon md-icon programIcon">&#xE061;</i>';
}
if (addAccent) {
html += program.Name;
html += '</div>';
if (program.IsKids) {
html += '<div class="programAccent childAccent"></div>';
} else if (program.IsSports) {
html += '<div class="programAccent sportsAccent"></div>';
} else if (program.IsNews) {
html += '<div class="programAccent newsAccent"></div>';
} else if (program.IsMovie) {
html += '<div class="programAccent movieAccent"></div>';
if (program.IsHD && options.showHdIcon) {
html += '<i class="guideHdIcon md-icon programIcon">hd</i>';
}
if (program.SeriesTimerId) {
if (program.TimerId) {
html += '<i class="seriesTimerIcon md-icon programIcon">&#xE062;</i>';
} else {
html += '<i class="seriesTimerIcon seriesTimerIcon-inactive md-icon programIcon">&#xE062;</i>';
}
}
else if (program.TimerId) {
html += '<i class="timerIcon md-icon programIcon">&#xE061;</i>';
}
if (accentCssClass) {
html += '<div class="programAccent ' + accentCssClass + '"></div>';
}
}
@ -503,19 +532,6 @@
imageLoader.lazyChildren(channelList);
}
function parentWithClass(elem, className) {
while (!elem.classList || !elem.classList.contains(className)) {
elem = elem.parentNode;
if (!elem) {
return null;
}
}
return elem;
}
function renderGuide(context, date, channels, programs, apiClient) {
//var list = [];
@ -561,7 +577,7 @@
var channelRowId = null;
if (activeElement) {
channelRowId = parentWithClass(activeElement, 'channelPrograms');
channelRowId = dom.parentWithClass(activeElement, 'channelPrograms');
channelRowId = channelRowId && channelRowId.getAttribute ? channelRowId.getAttribute('data-channelid') : null;
}
@ -736,22 +752,9 @@
}
}
function parentWithClass(elem, className) {
while (!elem.classList || !elem.classList.contains(className)) {
elem = elem.parentNode;
if (!elem) {
return null;
}
}
return elem;
}
function onProgramGridFocus(e) {
var programCell = parentWithClass(e.target, 'programCell');
var programCell = dom.parentWithClass(e.target, 'programCell');
if (!programCell) {
return;
@ -876,6 +879,10 @@
showViewSettings(self);
});
context.querySelector('.btnCategories').addEventListener('click', function () {
showCategoryOptions(self);
});
context.classList.add('tvguide');
setScrollEvents(context, true);

13
dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html vendored
View file

@ -14,11 +14,18 @@
<div class="timeslotHeaders smoothScrollX guideScroller" style="scroll-behavior: auto;"></div>
</div>
<div class="smoothScrollY guideVerticalScroller programContainer guideScroller" style="flex-grow: 1;">
<div style="display: flex;">
<div class="channelList"></div>
<button is="emby-button" type="button" class="btnCategories">
<div class="btnCategoriesText">${Categories}</div></button>
<div class="smoothScrollY guideVerticalScroller programContainer guideScroller" style="flex-grow: 1;">
<div class="programGridContainer programGrid smoothScrollX guideScroller" style="white-space: nowrap;">
<div class="channelsContainer">
<div class="channelList"></div>
</div>
<div class="programGridContainer programGrid smoothScrollX guideScroller" style="white-space: nowrap;">
</div>
</div>
</div>

2
dashboard-ui/bower_components/emby-webcomponents/scroller/smoothscroller.js vendored
View file

@ -834,7 +834,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'scrollStyles'], func
function onFrameClick(e) {
if (e.which == 1) {
var focusableParent = focusManager.focusableParent(e.target);
if (focusableParent != document.activeElement) {
if (focusableParent && focusableParent != document.activeElement) {
focusableParent.focus();
}
}

9
dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json vendored
View file

@ -307,5 +307,12 @@
"DefaultErrorMessage": "There was an error processing the request. Please try again later.",
"LabelKeep:": "Keep:",
"UntilIDelete": "Until I delete",
"UntilSpaceNeeded": "Until space needed"
"UntilSpaceNeeded": "Until space needed",
"Categories": "Categories",
"Sports": "Sports",
"News": "News",
"Movies": "Movies",
"Kids": "Kids",
"Others": "Others",
"EnableColorCodedBackgrounds": "Enable color coded backgrounds"
}

1
dashboard-ui/css/librarymenu.css
View file

@ -19,7 +19,6 @@
/* If this is raised, make sure it does not overlap bottom footer */
z-index: 1;
margin: 0 !important;
width: 100% !important;
/* Page needs to supply padding */
top: 102px !important;
transition: transform 200ms ease-out;

6
dashboard-ui/css/livetv.css
View file

@ -1,8 +1,4 @@
.guideTabContent {
background: #121212;
}
/* Allow vertical space for anything that slides up at the bottom */
/* Allow vertical space for anything that slides up at the bottom */
.guideVerticalScroller {
padding-bottom: 160px;
}

2
dashboard-ui/scripts/mediaplayer-video.js
View file

@ -986,7 +986,7 @@
if (browser.msie) {
if (window.MediaSource == null || mediaSource.RunTimeTicks == null) {
if (window.MediaSource == null || mediaSource.RunTimeTicks == null || browser.mobile) {
alert('Playback of this content is not supported in Internet Explorer. For a better experience, please try a modern browser such as Google Chrome, Firefox, Opera, or Microsoft Edge.');
return;
}

1
dashboard-ui/scripts/site.js
View file

@ -1263,6 +1263,7 @@ var AppInfo = {};
define("tvguide", [embyWebComponentsBowerPath + "/guide/guide"], returnFirstDependency);
define("programStyles", ['css!' + embyWebComponentsBowerPath + "/guide/programs"], returnFirstDependency);
define("guide-settings-dialog", [embyWebComponentsBowerPath + "/guide/guide-settings"], returnFirstDependency);
define("guide-categories-dialog", [embyWebComponentsBowerPath + "/guide/guide-categories"], returnFirstDependency);
define("syncDialog", [embyWebComponentsBowerPath + "/sync/sync"], returnFirstDependency);
define("voiceDialog", [embyWebComponentsBowerPath + "/voice/voicedialog"], returnFirstDependency);
define("voiceReceiver", [embyWebComponentsBowerPath + "/voice/voicereceiver"], returnFirstDependency);