RepulsTime/content.js at main · pandaroux007/RepulsTime · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// ***************************************************************
//                          displaying management of useless elements
//                          (youtube video suggestions window and links group at the right bottom)
// ***************************************************************
let contentVisible = true;
const featuredContent = document.querySelector("#featuredContent");
const linkAtRightBottom = document.querySelector("#idLinks");

function updateContentVisibility() {
    if(featuredContent) featuredContent.style.display = contentVisible ? "block" : "none";
    if(linkAtRightBottom) {
        if(contentVisible) {
            linkAtRightBottom.style.display = "flex";
            linkAtRightBottom.style.flexDirection = "column";
            linkAtRightBottom.style.transform = "scale(0.85)";
        }
        else linkAtRightBottom.style.display = "none";
    }
}

browser.runtime.onMessage.addListener((message) => {
    if(message.action === "toggleUselessContent") {
        contentVisible = message.visible;
        updateContentVisibility();
    }
});

browser.storage.local.get("contentVisible").then((result) => { // init
    contentVisible = result.contentVisible !== false;
    updateContentVisibility();
});

const observer = new MutationObserver(updateContentVisibility);
observer.observe(document.body, { childList: true, subtree: true });

// ***************************************************************
//                          timer displaying management
// ***************************************************************
const style = document.createElement("style");
style.textContent = `
@keyframes blink {
    0% {background-color: rgba(0, 0, 0, 0.7)}
    50% {background-color: rgba(255, 0, 0, 0.7)}
    100% {background-color: rgba(0, 0, 0, 0.7)}
}

.blink {animation: blink 1s infinite}
`;
document.head.appendChild(style);

const timerDiv = document.createElement("div");
timerDiv.style.cssText = `
position: fixed;
top: 10px;
left: 300px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px;
border-radius: 15px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
z-index: 9999;
pointer-events: none;
`;
document.body.appendChild(timerDiv);

function updateTimerDisplay() {
    browser.storage.local.get("timeRemaining").then((result) => {
        const minutes = Math.floor(result.timeRemaining / 60);
        const seconds = result.timeRemaining % 60;
        timerDiv.textContent = `Remaining time ➜ ${minutes}:${seconds.toString().padStart(2, "0")}`;

        result.timeRemaining <= 30 ? timerDiv.classList.add("blink") : timerDiv.classList.remove("blink");

        requestAnimationFrame(updateTimerDisplay);
    });
}

requestAnimationFrame(updateTimerDisplay);