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

Set backdrops using 'poster' attribute

Browse source
This commit is contained in:
ferferga 2020-05-08 00:07:59 +02:00
parent 7bf117191b
commit 7a63c07250
2 changed files with 3 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/htmlvideoplayer/plugin.js
View file

@ -836,7 +836,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
function onNavigatedToOsd() { function onNavigatedToOsd() {
var dlg = videoDialog; var dlg = videoDialog;
if (dlg) { if (dlg) {
dlg.classList.remove('videoPlayerContainer-withBackdrop');
dlg.classList.remove('videoPlayerContainer-onTop'); dlg.classList.remove('videoPlayerContainer-onTop');
onStartedAndNavigatedToOsd(); onStartedAndNavigatedToOsd();
@ -869,7 +868,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
} else { } else {
appRouter.setTransparency('backdrop'); appRouter.setTransparency('backdrop');
videoDialog.classList.remove('videoPlayerContainer-withBackdrop');
videoDialog.classList.remove('videoPlayerContainer-onTop'); videoDialog.classList.remove('videoPlayerContainer-onTop');
onStartedAndNavigatedToOsd(); onStartedAndNavigatedToOsd();
@ -1299,11 +1297,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
dlg.classList.add('videoPlayerContainer'); dlg.classList.add('videoPlayerContainer');
if (options.backdropUrl) {
dlg.classList.add('videoPlayerContainer-withBackdrop');
dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
}
if (options.fullscreen) { if (options.fullscreen) {
dlg.classList.add('videoPlayerContainer-onTop'); dlg.classList.add('videoPlayerContainer-onTop');
} }
@ -1337,6 +1330,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
videoElement.addEventListener('play', onPlay); videoElement.addEventListener('play', onPlay);
videoElement.addEventListener('click', onClick); videoElement.addEventListener('click', onClick);
videoElement.addEventListener('dblclick', onDblClick); videoElement.addEventListener('dblclick', onDblClick);
if (options.backdropUrl) {
videoElement.poster = options.backdropUrl;
}
document.body.insertBefore(dlg, document.body.firstChild); document.body.insertBefore(dlg, document.body.firstChild);
videoDialog = dlg; videoDialog = dlg;
@ -1360,11 +1356,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
} }
}); });
} else { } else {
if (options.backdropUrl) {
dlg.classList.add('videoPlayerContainer-withBackdrop');
dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
}
resolve(dlg.querySelector('video')); resolve(dlg.querySelector('video'));
} }
}); });

12
src/components/htmlvideoplayer/style.css
View file

@ -6,20 +6,9 @@
right: 0; right: 0;
display: flex; display: flex;
align-items: center; align-items: center;
}
.videoPlayerContainer:not(.videoPlayerContainer-withBackdrop) {
background: #000 !important; background: #000 !important;
} }
.videoPlayerContainer-withBackdrop {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-color: #000;
}
.videoPlayerContainer-onTop { .videoPlayerContainer-onTop {
z-index: 1000; z-index: 1000;
} }
@ -74,7 +63,6 @@ video::-webkit-media-controls {
transform: scale3d(0.2, 0.2, 0.2); transform: scale3d(0.2, 0.2, 0.2);
opacity: 0.6; opacity: 0.6;
} }
to { to {
transform: none; transform: none;
opacity: initial; opacity: initial;