mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add setting for photo libraries
This commit is contained in:
parent
89c8c73cab
commit
775db5c5e8
16 changed files with 119 additions and 68 deletions
|
@ -14,12 +14,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.170",
|
||||
"_release": "1.4.170",
|
||||
"version": "1.4.171",
|
||||
"_release": "1.4.171",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.170",
|
||||
"commit": "61f0b1c9783d19db9b76882badbf575500dea6e9"
|
||||
"tag": "1.4.171",
|
||||
"commit": "388435c54b3b15c417b8d76701cf09b42b968a08"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.1",
|
||||
|
|
|
@ -65,6 +65,8 @@
|
|||
margin: 0;
|
||||
transition: none;
|
||||
border: 3px solid transparent;
|
||||
/* Needed in case cardBox is a button */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cardBox-focustransform {
|
||||
|
|
|
@ -355,6 +355,10 @@
|
|||
return true;
|
||||
}
|
||||
|
||||
if (options.size) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return browser.touch;
|
||||
}
|
||||
|
||||
|
@ -424,8 +428,8 @@
|
|||
var exitAnimation = options.exitAnimation || defaultExitAnimation;
|
||||
|
||||
// If it's not fullscreen then lower the default animation speed to make it open really fast
|
||||
var entryAnimationDuration = options.entryAnimationDuration || (options.size ? 200 : 300);
|
||||
var exitAnimationDuration = options.exitAnimationDuration || (options.size ? 200 : 300);
|
||||
var entryAnimationDuration = options.entryAnimationDuration || (options.size ? 180 : 280);
|
||||
var exitAnimationDuration = options.exitAnimationDuration || (options.size ? 180 : 280);
|
||||
|
||||
dlg.animationConfig = {
|
||||
// scale up
|
||||
|
|
|
@ -63,32 +63,5 @@
|
|||
}
|
||||
|
||||
.emby-tab-button-ripple-effect {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
background: #181818 !important;
|
||||
animation: emby-tab-button-ripple-animation .5s !important;
|
||||
transform-origin: center center !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@keyframes emby-tab-button-ripple-animation {
|
||||
0% {
|
||||
transform: scale(.2, 1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
opacity: 0;
|
||||
}
|
||||
background: #141414 !important;
|
||||
}
|
||||
|
|
|
@ -42,13 +42,16 @@
|
|||
elem.classList.add('emby-tab-button-selection-bar-active');
|
||||
}
|
||||
|
||||
function animtateSelectionBar(bar, start, pos, duration) {
|
||||
function animtateSelectionBar(bar, start, pos, duration, onFinish) {
|
||||
|
||||
var endTransform = pos ? ('translateX(' + pos + 'px)') : 'none';
|
||||
var startTransform = start ? ('translateX(' + start + 'px)') : 'none';
|
||||
|
||||
if (!duration || !bar.animate) {
|
||||
bar.style.transform = endTransform;
|
||||
if (onFinish) {
|
||||
onFinish();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -61,9 +64,9 @@
|
|||
bar.animate(keyframes, {
|
||||
duration: duration,
|
||||
iterations: 1,
|
||||
easing: 'ease-out',
|
||||
easing: 'linear',
|
||||
fill: 'forwards'
|
||||
});
|
||||
}).onFinish = onFinish;
|
||||
}
|
||||
|
||||
function moveSelectionBar(tabs, newButton, oldButton, animate) {
|
||||
|
@ -99,22 +102,26 @@
|
|||
endPosition = tabButtonOffset.left - tabsOffset.left;
|
||||
}
|
||||
|
||||
var delay = animate ? 180 : 0;
|
||||
if (selectionBar) {
|
||||
animtateSelectionBar(selectionBar, startOffset, endPosition, delay);
|
||||
}
|
||||
var delay = animate ? 100 : 0;
|
||||
tabs.currentOffset = endPosition;
|
||||
|
||||
newButton.classList.add(activeButtonClass);
|
||||
|
||||
setTimeout(function () {
|
||||
var onAnimationFinish = function() {
|
||||
|
||||
if (tabs.getAttribute('data-selectionbar') != 'false') {
|
||||
showButtonSelectionBar(newButton);
|
||||
}
|
||||
if (selectionBar) {
|
||||
selectionBar.classList.add('hide');
|
||||
}
|
||||
|
||||
}, delay);
|
||||
};
|
||||
|
||||
if (selectionBar) {
|
||||
animtateSelectionBar(selectionBar, startOffset, endPosition, delay, onAnimationFinish);
|
||||
} else {
|
||||
onAnimationFinish();
|
||||
}
|
||||
}
|
||||
|
||||
function onClick(e) {
|
||||
|
@ -207,6 +214,10 @@
|
|||
return;
|
||||
}
|
||||
|
||||
if (tabs.getAttribute('data-selectionbar') == 'false') {
|
||||
return;
|
||||
}
|
||||
|
||||
var elem = document.createElement('div');
|
||||
elem.classList.add('emby-tabs-selection-bar');
|
||||
|
||||
|
|
|
@ -1172,9 +1172,6 @@
|
|||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('ui-body-b');
|
||||
dlg.classList.add('background-theme-b');
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
var html = '';
|
||||
|
|
|
@ -25,9 +25,6 @@
|
|||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('ui-body-b');
|
||||
dlg.classList.add('background-theme-b');
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
var html = '';
|
||||
|
|
|
@ -32,14 +32,14 @@
|
|||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/polymerelements/iron-icon",
|
||||
"homepage": "https://github.com/PolymerElements/iron-icon",
|
||||
"_release": "1.0.10",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.10",
|
||||
"commit": "f4e146da4982ff96bb25db85290c09e8de4ec734"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-icon.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-icon.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-icon"
|
||||
"_originalSource": "PolymerElements/iron-icon"
|
||||
}
|
|
@ -32,14 +32,14 @@
|
|||
"iron-component-page": "polymerElements/iron-component-page#^1.1.6"
|
||||
},
|
||||
"private": true,
|
||||
"homepage": "https://github.com/polymer/polymer",
|
||||
"homepage": "https://github.com/Polymer/polymer",
|
||||
"_release": "1.6.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.6.1",
|
||||
"commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
|
||||
},
|
||||
"_source": "git://github.com/polymer/polymer.git",
|
||||
"_source": "git://github.com/Polymer/polymer.git",
|
||||
"_target": "^1.1.0",
|
||||
"_originalSource": "polymer/polymer"
|
||||
"_originalSource": "Polymer/polymer"
|
||||
}
|
|
@ -1,10 +1,11 @@
|
|||
.dockedtabs {
|
||||
height: 60px;
|
||||
height: 54px;
|
||||
background: #212121;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99999;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dockedtabs-bottom {
|
||||
|
@ -22,3 +23,29 @@
|
|||
.dockedtabs--unpinned {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.dockedtabs-tabs {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dockedtabs-tab-button {
|
||||
flex-grow: 1;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: none !important;
|
||||
font-size: 12px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dockedtabs-tab-button, .dockedtabs-tab-button-foreground {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.dockedtabs-tab-button-icon {
|
||||
margin-bottom: .25em;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
define(['css!./dockedtabs'], function () {
|
||||
define(['css!./dockedtabs', 'emby-tabs'], function () {
|
||||
|
||||
function render(options) {
|
||||
|
||||
|
@ -13,6 +13,29 @@
|
|||
// live tv
|
||||
// now playing
|
||||
|
||||
var html = '';
|
||||
|
||||
html += ' <div is="emby-tabs" class="dockedtabs-tabs" data-selectionbar="false">\
|
||||
<button is="emby-button" class="dockedtabs-tab-button emby-tab-button emby-tab-button-active" data-index="0">\
|
||||
<div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">home</i><div>Home</div></div>\
|
||||
</button>\
|
||||
<button is="emby-button" class="dockedtabs-tab-button emby-tab-button" data-index="1">\
|
||||
<div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">dvr</i><div>Live TV</div></div>\
|
||||
</button>\
|
||||
<button is="emby-button" class="dockedtabs-tab-button emby-tab-button homeFavoritesTab" data-index="2">\
|
||||
<div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">favorite</i><div>Favorites</div></div>\
|
||||
</button>\
|
||||
<button is="emby-button" class="dockedtabs-tab-button emby-tab-button" data-index="3">\
|
||||
<div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">playlist_play</i><div>Now Playing</div></div>\
|
||||
</button>\
|
||||
<button is="emby-button" class="dockedtabs-tab-button emby-tab-button" data-index="3">\
|
||||
<div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">menu</i><div>More</div></div>\
|
||||
</button>\
|
||||
</div>\
|
||||
';
|
||||
|
||||
elem.innerHTML = html;
|
||||
|
||||
document.body.appendChild(elem);
|
||||
|
||||
return elem;
|
||||
|
|
|
@ -33,6 +33,12 @@
|
|||
parent.querySelector('.chkArhiveAsMediaContainer').classList.add('hide');
|
||||
}
|
||||
|
||||
if (contentType == 'homevideos') {
|
||||
parent.querySelector('.chkEnablePhotosContainer').classList.remove('hide');
|
||||
} else {
|
||||
parent.querySelector('.chkEnablePhotosContainer').classList.add('hide');
|
||||
}
|
||||
|
||||
if (contentType == 'music' || contentType == 'tvshows' || contentType == 'movies' || contentType == 'homevideos' || contentType == 'musicvideos' || contentType == 'mixed') {
|
||||
parent.classList.remove('hide');
|
||||
} else {
|
||||
|
@ -43,7 +49,8 @@
|
|||
function getLibraryOptions(parent) {
|
||||
|
||||
var options = {
|
||||
EnableArchiveMediaFiles: parent.querySelector('.chkArhiveAsMedia').checked
|
||||
EnableArchiveMediaFiles: parent.querySelector('.chkArhiveAsMedia').checked,
|
||||
EnablePhotos: parent.querySelector('.chkEnablePhotos').checked
|
||||
};
|
||||
|
||||
return options;
|
||||
|
@ -51,7 +58,8 @@
|
|||
|
||||
function setLibraryOptions(parent, options) {
|
||||
|
||||
parent.querySelector('.chkArhiveAsMedia').checked = options.EnableArchiveMediaFiles;;
|
||||
parent.querySelector('.chkArhiveAsMedia').checked = options.EnableArchiveMediaFiles;
|
||||
parent.querySelector('.chkEnablePhotos').checked = options.EnablePhotos;
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
@ -1,4 +1,11 @@
|
|||
<h1>${HeaderSettings}</h1>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription chkEnablePhotosContainer">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="chkEnablePhotos" checked />
|
||||
<span>${EnablePhotos}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${EnablePhotosHelp}</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription chkArhiveAsMediaContainer">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="chkArhiveAsMedia" />
|
||||
|
|
|
@ -62,7 +62,7 @@
|
|||
color: #fff;
|
||||
background-color: #1C1C1F;
|
||||
text-align: center;
|
||||
box-shadow: 0 -2px 2px 0 rgba(0,0,0,.14),-1px 5px 1px rgba(0,0,0,.12);
|
||||
/*box-shadow: 0 -2px 2px 0 rgba(0,0,0,.14),-1px 5px 1px rgba(0,0,0,.12);*/
|
||||
will-change: transform;
|
||||
contain: layout style;
|
||||
height: 100%;
|
||||
|
|
|
@ -978,7 +978,7 @@ var AppInfo = {};
|
|||
}
|
||||
|
||||
// This doesn't perform well on iOS
|
||||
AppInfo.enableHeadRoom = !isIOS;
|
||||
AppInfo.enableHeadRoom = !isIOS && !browserInfo.msie;
|
||||
|
||||
// This currently isn't working on android, unfortunately
|
||||
AppInfo.supportsFileInput = !(AppInfo.isNativeApp && isAndroid);
|
||||
|
@ -1636,9 +1636,9 @@ var AppInfo = {};
|
|||
|
||||
function onDialogOpen(dlg) {
|
||||
if (dlg.classList.contains('formDialog')) {
|
||||
if (!dlg.classList.contains('background-theme-b')) {
|
||||
dlg.classList.add('background-theme-a');
|
||||
dlg.classList.add('ui-body-a');
|
||||
if (!dlg.classList.contains('background-theme-a')) {
|
||||
dlg.classList.add('background-theme-b');
|
||||
dlg.classList.add('ui-body-b');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2310,5 +2310,7 @@
|
|||
"FFmpegSavePathNotFound": "We're unable to locate FFmpeg using the path you've entered. FFprobe is also required and must exist in the same folder. These components are normally bundled together in the same download. Please check the path and try again.",
|
||||
"XmlTvPremiere": "By default, Emby will import {0} hours of guide data. Importing unlimited data requires an active Emby Premiere subscription.",
|
||||
"MoreFromValue": "More from {0}",
|
||||
"OptionSaveMetadataAsHiddenHelp": "Changing this will apply to new metadata saved going forward. Existing metadata files will be updated the next time they are saved by Emby Server."
|
||||
"OptionSaveMetadataAsHiddenHelp": "Changing this will apply to new metadata saved going forward. Existing metadata files will be updated the next time they are saved by Emby Server.",
|
||||
"EnablePhotos": "Enable photos",
|
||||
"EnablePhotosHelp": "Photos will be detected and displayed alongside other media files."
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue