mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
Luke Pulverenti
parent
3e2ad02767
commit
afb01571ff
6 changed files with 31 additions and 394 deletions
|
|
@ -14,12 +14,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.434",
|
||||
"_release": "1.4.434",
|
||||
"version": "1.4.435",
|
||||
"_release": "1.4.435",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.434",
|
||||
"commit": "7272c3f5081280de5b30ba3cdbe90c1a925dd96a"
|
||||
"tag": "1.4.435",
|
||||
"commit": "d52f0c49c295ba00eb4b6f5172a0dfc75f8e9954"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.1",
|
||||
|
|
|
|||
|
|
@ -2325,6 +2325,9 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
|
|||
nextMediaType: nextMediaType
|
||||
};
|
||||
|
||||
state.nextMediaType = nextMediaType;
|
||||
state.nextItem = playbackStopInfo.nextItem;
|
||||
|
||||
events.trigger(player, 'playbackstop', [state]);
|
||||
events.trigger(self, 'playbackstop', [playbackStopInfo]);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,386 +0,0 @@
|
|||
#mediaPlayer {
|
||||
z-index: 1098;
|
||||
position: fixed;
|
||||
background-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
z-index: 99997;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
background-color: #000;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.videoCanvas {
|
||||
background-color: #000;
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
bottom: 200px;
|
||||
left: 200px;
|
||||
right: 200px;
|
||||
}
|
||||
|
||||
.videoControls {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 99998;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.videoControls > div {
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
}
|
||||
|
||||
.videoTopControls {
|
||||
padding: 0 1em;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 99998;
|
||||
}
|
||||
|
||||
.videoAdvancedControls {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
.nowPlayingInfo {
|
||||
text-align: center;
|
||||
padding: 1.5em 1em 2em 1em;
|
||||
}
|
||||
|
||||
.guide {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
||||
.guide .tvGuideHeader {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.guide .programContainer {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingImage img {
|
||||
height: auto !important;
|
||||
max-width: 180px;
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingTabs {
|
||||
margin: 0 0 0 1em;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
color: #eee;
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.videoPositionSliderContainer {
|
||||
width: 300px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
.videoPositionSliderContainer {
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 440px) {
|
||||
.videoPositionSliderContainer {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 400px) {
|
||||
.videoPositionSliderContainer {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 350px) {
|
||||
.videoPositionSliderContainer {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 320px) {
|
||||
.videoPositionSliderContainer {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingTabButtons {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.nowPlayingTabButton {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
color: #ddd !important;
|
||||
font-weight: 400 !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nowPlayingTabButton + .nowPlayingTabButton {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.nowPlayingTabButton:not(.selectedNowPlayingTabButton):hover {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.selectedNowPlayingTabButton {
|
||||
color: #2ad !important;
|
||||
}
|
||||
|
||||
.nowPlayingTab {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tabScenes, .tabCast {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingText {
|
||||
font-weight: normal;
|
||||
margin: 0 0 0 1em;
|
||||
max-width: initial;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
position: static;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.videoNowPlayingOverview, .videoNowPlayingRating {
|
||||
margin: 1em 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.videoTopControlsLogo {
|
||||
float: left;
|
||||
/* Matches .mediaButton */
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.videoTopControlsLogo img {
|
||||
max-height: 42px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
/* Fullscreen
|
||||
***************************************/
|
||||
|
||||
#videoPlayer, .itemVideo {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: 0 !important;
|
||||
margin: 0 !important;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#videoPlayer .inactive {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.idlePlayer video {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
/****************************************/
|
||||
|
||||
@media all and (max-width: 1200px), all and (max-height: 720px) {
|
||||
.videoControls .currentTime {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 1400px), all and (max-height: 900px) {
|
||||
|
||||
.mediaButton.infoButton {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 555px) {
|
||||
#mediaPlayer .videoControls .previousTrackButton, #mediaPlayer .videoControls .nextTrackButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.videoTopControlsLogo {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
.videoControls .currentTime {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
.nowPlayingInfo {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingImage img {
|
||||
height: auto !important;
|
||||
max-width: 360px;
|
||||
max-height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************/
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -75px;
|
||||
margin-left: -75px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
#play {
|
||||
background-image: url(images/media/play.png);
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pause {
|
||||
background-image: url(images/media/pause.png);
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
animation-name: fadeOut;
|
||||
-webkit-animation-name: fadeOut;
|
||||
animation-duration: .25s;
|
||||
-webkit-animation-duration: .25s;
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
transform: scale(.25);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: scale(.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(.75);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
0% {
|
||||
-webkit-transform: scale(.25);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: scale(.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: scale(.75);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
video::-webkit-media-text-track-container {
|
||||
}
|
||||
|
||||
video::-webkit-media-text-track-background {
|
||||
/*Style the text background*/
|
||||
}
|
||||
|
||||
#videoPlayer:not(.idlePlayer) video:not([controls])::-webkit-media-text-track-display {
|
||||
/*Style the text itself*/
|
||||
margin-top: -2.5em;
|
||||
}
|
||||
|
||||
::cue {
|
||||
background-color: transparent;
|
||||
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.videoSubtitles {
|
||||
position: fixed;
|
||||
bottom: 10%;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-size: 200%;
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
.videoSubtitlesInner {
|
||||
max-width: 70%;
|
||||
background-color: rgba(0,0,0,.8);
|
||||
padding: .25em;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -8,6 +8,10 @@
|
|||
background: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.mouseIdle, .mouseIdle * {
|
||||
cursor: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1258,6 +1258,10 @@ var AppInfo = {};
|
|||
define("itemContextMenu", [embyWebComponentsBowerPath + "/itemcontextmenu"], returnFirstDependency);
|
||||
define("imageEditor", [embyWebComponentsBowerPath + "/imageeditor/imageeditor"], returnFirstDependency);
|
||||
define("dom", [embyWebComponentsBowerPath + "/dom"], returnFirstDependency);
|
||||
|
||||
define("fullscreen-doubleclick", [embyWebComponentsBowerPath + "/fullscreen/fullscreen-doubleclick"], returnFirstDependency);
|
||||
define("fullscreenManager", [embyWebComponentsBowerPath + "/fullscreen/fullscreenmanager"], returnFirstDependency);
|
||||
|
||||
define("layoutManager", [embyWebComponentsBowerPath + "/layoutmanager"], getLayoutManager);
|
||||
define("playMenu", [embyWebComponentsBowerPath + "/playmenu"], returnFirstDependency);
|
||||
define("refreshDialog", [embyWebComponentsBowerPath + "/refreshdialog/refreshdialog"], returnFirstDependency);
|
||||
|
|
@ -2716,6 +2720,10 @@ var AppInfo = {};
|
|||
|
||||
postInitDependencies.push('playerSelectionMenu');
|
||||
|
||||
//if (appHost.supports('fullscreen')) {
|
||||
require(['fullscreen-doubleclick']);
|
||||
//}
|
||||
|
||||
require(postInitDependencies);
|
||||
upgradeLayouts();
|
||||
initAutoSync();
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.osdHeader .viewMenuBar {
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
|
||||
}
|
||||
.osdHeader .viewMenuBar {
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.osdHeader-hidden {
|
||||
transform: translate3d(0,-100%,0);
|
||||
|
|
@ -149,6 +149,14 @@
|
|||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.pageContainer {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
}
|
||||
</style>
|
||||
<div class="pageContainer flex">
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue