-
-
Notifications
You must be signed in to change notification settings - Fork 72
Add option to display time in UI #299
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
9c44a07
4dc0779
4d377b5
7af2305
6d7d4f7
1f5c334
91f2e4f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,66 +1,112 @@ | ||
import { configRead, configAddChangeListener } from './config'; | ||
import './watch.css'; | ||
|
||
function setTime(show) { | ||
if (!show) { | ||
const watch = document.querySelector('.webOs-watch'); | ||
if (watch) { | ||
watch.remove(); | ||
class Watch { | ||
#watch; | ||
#timer; | ||
#domObserver; | ||
#attrChanges; | ||
#PLAYER_SELECTOR = 'ytlr-watch-default'; | ||
|
||
constructor() { | ||
this.createElement(); | ||
this.startClock(); | ||
} | ||
|
||
createElement() { | ||
this.#watch = document.createElement('div'); | ||
this.#watch.className = 'webOs-watch'; | ||
document.body.appendChild(this.#watch); | ||
} | ||
|
||
startClock() { | ||
const nextSeg = (60 - new Date().getSeconds()) * 1000; | ||
|
||
const setTime = () => { | ||
this.#watch.innerText = new Intl.DateTimeFormat(navigator.language, { | ||
hour: 'numeric', | ||
minute: 'numeric' | ||
}).format(new Date()); | ||
}; | ||
|
||
setTime(); | ||
setTimeout(() => { | ||
setTime(); | ||
this.#timer = setInterval(setTime, 60000); | ||
}, nextSeg); | ||
|
||
const video = document.querySelector(this.#PLAYER_SELECTOR); | ||
|
||
if (video === null) { | ||
this.waitingVideo(); | ||
} else { | ||
this.playerAppear(video); | ||
} | ||
return; | ||
} | ||
|
||
const watch = document.createElement('div'); | ||
watch.innerHTML = '<div class="webOs-watch"></div>'; | ||
document.body.appendChild(watch); | ||
playerAppear(video) { | ||
this.#watch.style.display = | ||
video.getAttribute('hybridnavfocusable') === 'true' ? 'none' : 'block'; | ||
this.playerObserver(video); | ||
} | ||
|
||
const observer = new MutationObserver((mutations) => { | ||
mutations.forEach((mutation) => { | ||
if (mutation.type === 'childList') { | ||
mutation.addedNodes.forEach((node) => { | ||
if (node.nodeName === 'YT-LR-WATCH-DEFAULT') { | ||
watch.style.display = 'none'; | ||
waitingVideo() { | ||
fire332 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
this.#domObserver = new MutationObserver((mutations) => { | ||
for (const mutation of mutations) { | ||
for (const node of mutation.addedNodes) { | ||
if ( | ||
node.nodeType === Node.ELEMENT_NODE && | ||
node.matches(this.#PLAYER_SELECTOR) | ||
) { | ||
this.#domObserver.disconnect(); | ||
this.playerAppear(node); | ||
} | ||
}); | ||
} else if (mutation.type === 'attributes') { | ||
if (mutation.target.nodeName === 'YTLR-WATCH-DEFAULT') { | ||
watch.style.display = mutation.target.clientHeight > 0 ? 'none' : ''; | ||
} else if (mutation.target.nodeName === 'YTLR-WATCH-METADATA') { | ||
watch.style.display = | ||
window.getComputedStyle(mutation.target).display == 'none' | ||
? 'none' | ||
: ''; | ||
} | ||
} | ||
}); | ||
}); | ||
|
||
observer.observe(document.body, { | ||
childList: true, | ||
subtree: true, | ||
attributes: true | ||
}); | ||
|
||
const nextSeg = 1000 - new Date().getMilliseconds(); | ||
|
||
const setTime = () => { | ||
window.requestAnimationFrame(() => { | ||
document.querySelector('.webOs-watch').innerText = | ||
new Intl.DateTimeFormat(navigator.language, { | ||
hour: 'numeric', | ||
minute: 'numeric' | ||
}).format(new Date()); | ||
|
||
this.#domObserver.observe(document.body, { | ||
childList: true, | ||
subtree: true | ||
}); | ||
}; | ||
} | ||
|
||
setTimeout(() => { | ||
setTime(); | ||
setInterval(setTime, 60000); | ||
}, nextSeg); | ||
playerObserver(node) { | ||
this.#attrChanges = new MutationObserver((mutations) => { | ||
for (const mutation of mutations) { | ||
fire332 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
const value = mutation.target.getAttribute('hybridnavfocusable'); | ||
// Hide watch when player is focused | ||
this.#watch.style.display = value === 'true' ? 'none' : 'block'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This can most likely be done in pure CSS using a sibling combinator. Have you investigated that? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. But it is not a child or sibling element, and it cannot be if we want to use it before the video element appears There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since we can't use .webOs-watch {
display: block;
}
:has(.ytlr-watch-default[hybridnavfocusable="true"]) ~ .webOs-watch {
display: none;
} |
||
} | ||
}); | ||
|
||
this.#attrChanges.observe(node, { | ||
attributes: true, | ||
attributeFilter: ['hybridnavfocusable'] | ||
}); | ||
} | ||
|
||
destroy() { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use explicit resource management instead of a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. But as I can see, this executes Dispose, when the class has a certain life cycle, if events are running inside you have to finish it manually anyway |
||
clearInterval(this.#timer); | ||
this.#watch?.remove(); | ||
this.#domObserver?.disconnect(); | ||
this.#attrChanges?.disconnect(); | ||
} | ||
} | ||
|
||
let watchInstance = null; | ||
|
||
function toggleWatch(show) { | ||
if (show) { | ||
watchInstance = watchInstance ? watchInstance : new Watch(); | ||
} else { | ||
watchInstance?.destroy(); | ||
watchInstance = null; | ||
} | ||
} | ||
|
||
setTime(configRead('showWatch')); | ||
toggleWatch(configRead('showWatch')); | ||
|
||
configAddChangeListener('showWatch', (evt) => { | ||
setTime(evt.detail.newValue); | ||
toggleWatch(evt.detail.newValue); | ||
}); |
Uh oh!
There was an error while loading. Please reload this page.