majomi/intro-skipper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Css (#167)

Browse Source
This commit is contained in:
rlauuzo 2024-05-18 20:05:04 +02:00 committed by TwistedUmbrellaX
parent 8cd7ff8993
commit cc7a5f9639
1 changed files with 32 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
ConfusedPolarBear.Plugin.IntroSkipper/Configuration/inject.js
View File

@ -75,48 +75,37 @@ introSkipper.d = function (msg) {
let styleElement = document.createElement("style"); let styleElement = document.createElement("style");
styleElement.id = "introSkipperCss"; styleElement.id = "introSkipperCss";
styleElement.innerText = ` styleElement.innerText = `
@media (hover:hover) and (pointer:fine) { :root {
#skipIntro .paper-icon-button-light:hover:not(:disabled) { --rounding: .2em;
color: black !important; --accent: 0, 164, 220;
background-color: rgba(47, 93, 98, 0) !important;
}
}
#skipIntro .paper-icon-button-light.show-focus:focus {
transform: scale(1.04) !important;
} }
#skipIntro.upNextContainer { #skipIntro.upNextContainer {
width: unset; width: unset;
} }
#skipIntro { #skipIntro {
padding: 0 1px;
position: absolute; position: absolute;
right: 10em; bottom: 6em;
bottom: 9em; right: 4.5em;
background-color: rgba(25, 25, 25, 0.66); background-color: transparent;
border: 1px solid; font-size: 1.2em;
border-radius: 0px; }
display: inline-block; #skipIntro .emby-button {
cursor: pointer; text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
border-radius: var(--rounding);
background-color: rgba(0, 0, 0, 0.3);
will-change: opacity, transform;
opacity: 0; opacity: 0;
box-shadow: inset 0 0 0 0 #f9f9f9; transition: opacity 0.3s ease-in, transform 0.3s ease-out;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
} }
#skipIntro #btnSkipSegmentText { #skipIntro .emby-button:hover,
padding-right: 3px; #skipIntro .emby-button:focus {
padding-bottom: 2px; background-color: rgba(var(--accent),0.7);
transform: scale(1.05);
} }
@media (max-width: 1080px) { #btnSkipSegmentText {
#skipIntro { padding-right: 0.15em;
right: 10%; padding-left: 0.2em;
} margin-top: -0.1em;
}
#skipIntro:hover {
box-shadow: inset 400px 0 0 0 #f9f9f9;
-webkit-transition: ease-in 1s;
-moz-transition: ease-in 1s;
transition: ease-in 1s;
} }
`; `;
document.querySelector("head").appendChild(styleElement); document.querySelector("head").appendChild(styleElement);
@ -147,7 +136,7 @@ introSkipper.injectButton = async function () {
button.classList.add("hide"); button.classList.add("hide");
button.addEventListener("click", introSkipper.doSkip); button.addEventListener("click", introSkipper.doSkip);
button.innerHTML = ` button.innerHTML = `
<button is="paper-icon-button-light" class="btnSkipIntro paper-icon-button-light injected"> <button is="emby-button" type="button" class="btnSkipIntro injected">
<span id="btnSkipSegmentText"></span> <span id="btnSkipSegmentText"></span>
<span class="material-icons skip_next"></span> <span class="material-icons skip_next"></span>
</button> </button>
@ -186,32 +175,30 @@ introSkipper.videoPositionChanged = function () {
if (!skipButton) { if (!skipButton) {
return; return;
} }
const embyButton = skipButton.querySelector(".emby-button");
const segment = introSkipper.getCurrentSegment(introSkipper.videoPlayer.currentTime); const segment = introSkipper.getCurrentSegment(introSkipper.videoPlayer.currentTime);
switch (segment["SegmentType"]) { switch (segment.SegmentType) {
case "None": case "None":
if (skipButton.style.opacity === '0') return; if (embyButton.style.opacity === '0') return;
skipButton.style.opacity = '0'; embyButton.style.opacity = '0';
skipButton.addEventListener("transitionend", () => { embyButton.addEventListener("transitionend", () => {
skipButton.classList.add("hide"); skipButton.classList.add("hide");
}, { once: true }); }, { once: true });
return; return;
case "Introduction": case "Introduction":
skipButton.querySelector("#btnSkipSegmentText").textContent = skipButton.querySelector("#btnSkipSegmentText").textContent = skipButton.dataset.intro_text;
skipButton.dataset["intro_text"];
break; break;
case "Credits": case "Credits":
skipButton.querySelector("#btnSkipSegmentText").textContent = skipButton.querySelector("#btnSkipSegmentText").textContent = skipButton.dataset.credits_text;
skipButton.dataset["credits_text"];
break; break;
} }
if (!skipButton.classList.contains("hide")) return; if (!skipButton.classList.contains("hide")) return;
skipButton.classList.remove("hide"); skipButton.classList.remove("hide");
embyButton.offsetWidth; // Force reflow
requestAnimationFrame(() => { requestAnimationFrame(() => {
requestAnimationFrame(() => { embyButton.style.opacity = '1';
skipButton.style.opacity = '1';
});
}); });
} }
/** Seeks to the end of the intro. */ /** Seeks to the end of the intro. */