CodeDevMLH/jellyfin-plugin-media-bar-enhanced
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 24 Wiki Activity

Refactor button background colors for improved visibility and update YouTube iframe attributes for better playback control

Browse Source
This commit is contained in:
CodeDevMLH
2026-03-08 23:49:49 +01:00
parent 7ffcfa68c1
commit 9f7ef3c96b
2 changed files with 6 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
View File

@@ -501,7 +501,7 @@
font-family: "Archivo Narrow", sans-serif; font-family: "Archivo Narrow", sans-serif;
font-size: 18px; font-size: 18px;
white-space: nowrap; white-space: nowrap;
background-color: rgba(255, 255, 255, 0.9); background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -515,7 +515,7 @@
.detail-button { .detail-button {
font-size: 18px; font-size: 18px;
background-color: rgba(255, 255, 255, 0.9); background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
border-radius: 50%; border-radius: 50%;
height: 50px; height: 50px;
@@ -530,7 +530,7 @@
.favorite-button { .favorite-button {
font-size: 18px; font-size: 18px;
background-color: rgba(255, 255, 255, 0.9); background-color: rgb(255, 255, 255);
color: red; color: red;
border-radius: 50%; border-radius: 50%;
height: 50px; height: 50px;

18
Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
View File

@@ -749,7 +749,7 @@ const SlideUtils = {
if (isYoutube && videoId) { if (isYoutube && videoId) {
const ytIframe = this.createElement('iframe', { const ytIframe = this.createElement('iframe', {
id: 'modal-yt-player', id: 'modal-yt-player',
src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`, src: `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&controls=1&iv_load_policy=3&rel=0&playsinline=1`,
allow: 'autoplay; encrypted-media', allow: 'autoplay; encrypted-media',
style: 'width: 100%; height: 100%; border: none;', style: 'width: 100%; height: 100%; border: none;',
referrerpolicy: 'strict-origin-when-cross-origin', referrerpolicy: 'strict-origin-when-cross-origin',
@@ -759,20 +759,6 @@ const SlideUtils = {
contentContainer.appendChild(ytIframe); contentContainer.appendChild(ytIframe);
overlay.append(closeButton, contentContainer); overlay.append(closeButton, contentContainer);
document.body.appendChild(overlay); document.body.appendChild(overlay);
this.loadYouTubeIframeAPI().then(() => {
new YT.Player(ytIframe, {
playerVars: {
autoplay: 1,
controls: 1,
iv_load_policy: 3,
rel: 0,
playsinline: 1,
origin: window.location.origin,
enablejsapi: 1
}
});
});
} else { } else {
const video = this.createElement('video', { const video = this.createElement('video', {
src: url, src: url,
@@ -780,6 +766,7 @@ const SlideUtils = {
autoplay: true, autoplay: true,
className: 'video-modal-player' className: 'video-modal-player'
}); });
video.setAttribute('playsinline', '');
contentContainer.appendChild(video); contentContainer.appendChild(video);
overlay.append(closeButton, contentContainer); overlay.append(closeButton, contentContainer);
document.body.appendChild(overlay); document.body.appendChild(overlay);
@@ -1949,6 +1936,7 @@ const SlideCreator = {
}; };
videoAttributes.muted = ""; videoAttributes.muted = "";
videoAttributes.playsinline = "";
videoBackdrop = SlideUtils.createElement("video", videoAttributes); videoBackdrop = SlideUtils.createElement("video", videoAttributes);
videoBackdrop.volume = 0.4; videoBackdrop.volume = 0.4;