watch-party/frontend/lib/options-pane.mjs

44 lines
1.8 KiB
JavaScript

export const toggleOptionPane = (event, element) => {
event.preventDefault();
// show options
if (
!document.querySelector("#options").style.display ||
document.querySelector("#options").style.display === "none"
) {
// using this to do any potential init logic for the fields too
loadPlayerControlsShown(document.querySelector("#playerControlsShown"))
loadPlingVolume(document.querySelector("#plingVolume"))
element.innerText = "❌";
document.querySelector("#options").style.display = "block";
return (document.querySelector("#viewing").style.display = "none");
}
// hide options
element.innerText = "⚙️";
document.querySelector("#options").style.display = "none";
document.querySelector("#viewing").style.display = "block";
};
const getPlayerControlsShown = () => localStorage.getItem("watch-party-default-allow-controls") || false
// delete from storage on false to prevent weird js boolean parsing (Boolean('false') === True)
const setPlayerControlShown = (boolean) => !boolean
? localStorage.removeItem("watch-party-default-allow-controls")
: localStorage.setItem("watch-party-default-allow-controls", boolean)
export const togglePlayerControlsShown = (element) => {
const isShown = element.checked
setPlayerControlShown(!isShown)
}
const loadPlayerControlsShown = (element) => {
const isShown = getPlayerControlsShown()
element.checked = !isShown
}
const getPlingVolume = () => localStorage.getItem("watch-party-pling-volume") || 100
const setPlingVolume = (value) => localStorage.setItem("watch-party-pling-volume", value)
export const handlePlingVolume = (element) => {
setPlingVolume(element.value)
}
const loadPlingVolume = (element) => {
element.value = getPlingVolume()
}