Auto hide skip to highlight

This commit is contained in:
Ajay Ramachandran 2021-09-30 00:43:10 -04:00
parent 9ec984065e
commit ebcb600e99
4 changed files with 57 additions and 11 deletions

View file

@ -75,18 +75,26 @@
vertical-align: top;
}
#infoButton.playerButton:not(.hidden) {
.autoHiding:not(.hidden) {
transform: translateX(0%) scale(1);
/* opacity is from YouTube page */
transition: transform 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
}
#infoButton.playerButton.hidden {
.autoHiding.hidden {
transform: translateX(100%) scale(0);
/* opacity is from YouTube page */
transition: transform 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
}
.autoHiding.hidden.autoHideLeft {
transform: translateX(-100%) scale(0);
}
.autoHiding.hidden.animationDone {
display: none !important;
}
.playerButton.hidden {
display: none;
}

View file

@ -1306,15 +1306,8 @@ async function createButtons(): Promise<void> {
if (Config.config.autoHideInfoButton && !onInvidious && controlsContainer
&& playerButtons["info"]?.button && !controlsWithEventListeners.includes(controlsContainer)) {
controlsWithEventListeners.push(controlsContainer);
playerButtons["info"].button.classList.add("hidden");
controlsContainer.addEventListener("mouseenter", () => {
playerButtons["info"].button.classList.remove("hidden");
});
controlsContainer.addEventListener("mouseleave", () => {
playerButtons["info"].button.classList.add("hidden");
});
utils.setupAutoHideAnimation(playerButtons["info"].button, controlsContainer);
}
}

View file

@ -2,6 +2,8 @@ import Config from "../config";
import { SponsorTime } from "../types";
import { getSkippingText } from "../utils/categoryUtils";
import Utils from "../utils";
const utils = new Utils();
export interface SkipButtonControlBarProps {
skip: (segment: SponsorTime) => void;
@ -53,13 +55,19 @@ export class SkipButtonControlBar {
if (leftControlsContainer && !leftControlsContainer.contains(this.container)) {
leftControlsContainer.insertBefore(this.container, this.chapterText);
if (Config.config.autoHideInfoButton) {
utils.setupAutoHideAnimation(this.skipIcon, leftControlsContainer, false, false);
}
}
}
enable(segment: SponsorTime, duration?: number): void {
if (duration) this.duration = duration;
this.segment = segment;
this.refreshText();
utils.disableAutoHideAnimation(this.skipIcon);
this.startTimer();
}
@ -111,6 +119,8 @@ export class SkipButtonControlBar {
this.chapterText?.classList?.remove("hidden");
this.getChapterPrefix()?.classList?.add("hidden");
utils.enableAutoHideAnimation(this.skipIcon);
}
private getChapterPrefix(): HTMLElement {

View file

@ -183,6 +183,41 @@ export default class Utils {
}
}
setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void {
if (enabled) element.classList.add("autoHiding");
element.classList.add("hidden");
element.classList.add("animationDone");
if (!rightSlide) element.classList.add("autoHideLeft");
container.addEventListener("mouseenter", () => {
element.classList.remove("animationDone");
// Wait for next event loop
setTimeout(() => element.classList.remove("hidden"), 10);
});
container.addEventListener("mouseleave", () => {
if (element.classList.contains("autoHiding")) {
element.classList.add("hidden");
const animationEndListener = () => {
if (element.classList.contains("hidden")) element.classList.add("animationDone");
element.removeEventListener("transitionend", animationEndListener);
};
element.addEventListener("transitionend", animationEndListener);
}
});
}
enableAutoHideAnimation(element: Element): void {
element.classList.add("autoHiding");
}
disableAutoHideAnimation(element: Element): void {
element.classList.remove("autoHiding");
}
/**
* Merges any overlapping timestamp ranges into single segments and returns them as a new array.
*/