mirror of
https://github.com/elisspace/AskAssist.git
synced 2026-08-29 15:33:47 +00:00
add volume control
This commit is contained in:
Jeremy Dixon
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
@@ -1 +0,0 @@
|
||||
<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m272.066 512h-32.133c-25.989 0-47.134-21.144-47.134-47.133v-10.871c-11.049-3.53-21.784-7.986-32.097-13.323l-7.704 7.704c-18.659 18.682-48.548 18.134-66.665-.007l-22.711-22.71c-18.149-18.129-18.671-48.008.006-66.665l7.698-7.698c-5.337-10.313-9.792-21.046-13.323-32.097h-10.87c-25.988 0-47.133-21.144-47.133-47.133v-32.134c0-25.989 21.145-47.133 47.134-47.133h10.87c3.531-11.05 7.986-21.784 13.323-32.097l-7.704-7.703c-18.666-18.646-18.151-48.528.006-66.665l22.713-22.712c18.159-18.184 48.041-18.638 66.664.006l7.697 7.697c10.313-5.336 21.048-9.792 32.097-13.323v-10.87c0-25.989 21.144-47.133 47.134-47.133h32.133c25.989 0 47.133 21.144 47.133 47.133v10.871c11.049 3.53 21.784 7.986 32.097 13.323l7.704-7.704c18.659-18.682 48.548-18.134 66.665.007l22.711 22.71c18.149 18.129 18.671 48.008-.006 66.665l-7.698 7.698c5.337 10.313 9.792 21.046 13.323 32.097h10.87c25.989 0 47.134 21.144 47.134 47.133v32.134c0 25.989-21.145 47.133-47.134 47.133h-10.87c-3.531 11.05-7.986 21.784-13.323 32.097l7.704 7.704c18.666 18.646 18.151 48.528-.006 66.665l-22.713 22.712c-18.159 18.184-48.041 18.638-66.664-.006l-7.697-7.697c-10.313 5.336-21.048 9.792-32.097 13.323v10.871c0 25.987-21.144 47.131-47.134 47.131zm-106.349-102.83c14.327 8.473 29.747 14.874 45.831 19.025 6.624 1.709 11.252 7.683 11.252 14.524v22.148c0 9.447 7.687 17.133 17.134 17.133h32.133c9.447 0 17.134-7.686 17.134-17.133v-22.148c0-6.841 4.628-12.815 11.252-14.524 16.084-4.151 31.504-10.552 45.831-19.025 5.895-3.486 13.4-2.538 18.243 2.305l15.688 15.689c6.764 6.772 17.626 6.615 24.224.007l22.727-22.726c6.582-6.574 6.802-17.438.006-24.225l-15.695-15.695c-4.842-4.842-5.79-12.348-2.305-18.242 8.473-14.326 14.873-29.746 19.024-45.831 1.71-6.624 7.684-11.251 14.524-11.251h22.147c9.447 0 17.134-7.686 17.134-17.133v-32.134c0-9.447-7.687-17.133-17.134-17.133h-22.147c-6.841 0-12.814-4.628-14.524-11.251-4.151-16.085-10.552-31.505-19.024-45.831-3.485-5.894-2.537-13.4 2.305-18.242l15.689-15.689c6.782-6.774 6.605-17.634.006-24.225l-22.725-22.725c-6.587-6.596-17.451-6.789-24.225-.006l-15.694 15.695c-4.842 4.843-12.35 5.791-18.243 2.305-14.327-8.473-29.747-14.874-45.831-19.025-6.624-1.709-11.252-7.683-11.252-14.524v-22.15c0-9.447-7.687-17.133-17.134-17.133h-32.133c-9.447 0-17.134 7.686-17.134 17.133v22.148c0 6.841-4.628 12.815-11.252 14.524-16.084 4.151-31.504 10.552-45.831 19.025-5.896 3.485-13.401 2.537-18.243-2.305l-15.688-15.689c-6.764-6.772-17.627-6.615-24.224-.007l-22.727 22.726c-6.582 6.574-6.802 17.437-.006 24.225l15.695 15.695c4.842 4.842 5.79 12.348 2.305 18.242-8.473 14.326-14.873 29.746-19.024 45.831-1.71 6.624-7.684 11.251-14.524 11.251h-22.148c-9.447.001-17.134 7.687-17.134 17.134v32.134c0 9.447 7.687 17.133 17.134 17.133h22.147c6.841 0 12.814 4.628 14.524 11.251 4.151 16.085 10.552 31.505 19.024 45.831 3.485 5.894 2.537 13.4-2.305 18.242l-15.689 15.689c-6.782 6.774-6.605 17.634-.006 24.225l22.725 22.725c6.587 6.596 17.451 6.789 24.225.006l15.694-15.695c3.568-3.567 10.991-6.594 18.244-2.304z"/><path d="m256 367.4c-61.427 0-111.4-49.974-111.4-111.4s49.973-111.4 111.4-111.4 111.4 49.974 111.4 111.4-49.973 111.4-111.4 111.4zm0-192.8c-44.885 0-81.4 36.516-81.4 81.4s36.516 81.4 81.4 81.4 81.4-36.516 81.4-81.4-36.515-81.4-81.4-81.4z"/></svg>
|
||||
|
Before Width: | Height: | Size: 3.3 KiB |
@@ -1,5 +1,12 @@
|
||||
<div id='toolbar'>
|
||||
<h1>Ask<span>Assist</span></h1>
|
||||
<div id="volume">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<p class="option-sentence">... is
|
||||
<span id="waiting-branch"><span id="waiting" class="ask-opt">waiting</span> for you</span>
|
||||
|
||||
@@ -38,8 +38,10 @@ let alert_manager = {
|
||||
// TERMS:
|
||||
// alert-frequency: the number in times per minute given per the user that the alert should maximally go off.
|
||||
// alert-interval: the number of seconds that must have passed since the last alert to statisfy the alert-frequency
|
||||
let frequency = parseInt(options['alert-frequency']);
|
||||
let frequency = parseInt(options['frequency']);
|
||||
let alertInterval = 60/frequency
|
||||
let sound = options.sound;
|
||||
console.log(`${time} < ${alertInterval}: ${time < alertInterval}`)
|
||||
// ensure that the user has not turned off alerts, nor is it too soon, given the current frequency, to issue another alert
|
||||
if(
|
||||
options['alert-frequency'] != 0 &&
|
||||
@@ -51,17 +53,19 @@ let alert_manager = {
|
||||
// load the sound file and issue the alert
|
||||
let alertFile;
|
||||
alert_manager.alertList.forEach(function(alert){
|
||||
if (alert.name==options["sound-select"]){
|
||||
if (alert.name==sound){
|
||||
alertFile = alert.file;
|
||||
}
|
||||
})
|
||||
if(!alertFile){
|
||||
console.log(options["sound-select"], "does not have an associated sound file");
|
||||
console.log(options)
|
||||
console.log(sound, "does not have an associated sound file");
|
||||
return false
|
||||
}
|
||||
console.log('Playing Alert')
|
||||
alert = new Audio(chrome.runtime.getURL(`./assets/sounds/${alertFile}.mp3`));
|
||||
console.log('playing alert', )
|
||||
alert.play()
|
||||
alert.volume = (1/5)*options["volume"];
|
||||
alert.play();
|
||||
started = true;
|
||||
time = 0;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ let state = {
|
||||
"alert-frequency":1,
|
||||
"sound-select":"rick roll",
|
||||
"watch-frequency": 5,
|
||||
"volume": 1,
|
||||
alertList: [],
|
||||
loadState: function(){
|
||||
if(JSON.parse(localStorage.getItem('config'))){
|
||||
@@ -10,25 +11,28 @@ let state = {
|
||||
state["sound-select"] = saveData["sound-select"] || "rick roll"
|
||||
state["alert-frequency"] = saveData["alert-frequency"] || "1"
|
||||
state["watch-frequency"] = saveData["watch-frequency"] || "5"
|
||||
state["volume"] = saveData["volume"] || "1"
|
||||
}
|
||||
this.render["sound-select"]();
|
||||
this.render.fields();
|
||||
this.render.volume();
|
||||
},
|
||||
|
||||
set: function(property, value){
|
||||
if(property in state){
|
||||
console.log('state setting ', property, ' to ', value)
|
||||
state[property] = value;
|
||||
console.log("::",state["alert-frequency"])
|
||||
console.log("::",state[property])
|
||||
let saveData = {
|
||||
"alert-frequency":state["alert-frequency"],
|
||||
"sound-select":state["sound-select"],
|
||||
"watch-frequency": state["watch-frequency"]
|
||||
"watch-frequency": state["watch-frequency"],
|
||||
"volume": state["volume"]
|
||||
}
|
||||
console.log('saving settings ', saveData)
|
||||
localStorage.setItem('config',JSON.stringify(saveData))
|
||||
console.log(`attempting to render ${property}`)
|
||||
if(property=="sound-select"){state.render["sound-select"]()};
|
||||
if(property=="volume"){state.render["volume"]()};
|
||||
}
|
||||
else {
|
||||
console.log (`error: ${property} is not a known configuration property`)
|
||||
@@ -87,6 +91,18 @@ let state = {
|
||||
})
|
||||
alertContainer.append(alertEl);
|
||||
})
|
||||
},
|
||||
"volume":function(){
|
||||
console.log('rendering volume')
|
||||
let bars = document.querySelectorAll('#volume div');
|
||||
bars.forEach(function(bar, i){
|
||||
console.log(`i<=state.volume:: ${(i<=state.volume)}`)
|
||||
if(i<state.volume){
|
||||
bar.style.opacity = 1;
|
||||
} else {
|
||||
bar.style.opacity = 0.2;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -119,13 +135,21 @@ function appendTool(html){
|
||||
let watching = document.querySelector('#watching');
|
||||
let waitBrach = document.querySelector('#waiting-branch');
|
||||
let watchBrach = document.querySelector('#watching-branch');
|
||||
let volume = document.querySelector('#volume');
|
||||
waiting.addEventListener('click', function(){
|
||||
waitBrach.style.display = "none";
|
||||
watchBrach.style.display = "inline";
|
||||
timer = setInterval(function(){
|
||||
var refresh_btn = document.querySelector('[data-qa-action-id="refresh-queue"]');
|
||||
if(newQuestion()){
|
||||
let message = {message:{flag:"alert", options:{frequency:state["alert-frequency"], sound: state["sound-select"]}}};
|
||||
let message = {
|
||||
message:{
|
||||
flag:"alert", options:{
|
||||
frequency:state["alert-frequency"],
|
||||
sound: state["sound-select"],
|
||||
volume: state["volume"]
|
||||
}
|
||||
}};
|
||||
console.log('New Question Detected - sending alert to background', message);
|
||||
chrome.runtime.sendMessage(message);
|
||||
};
|
||||
@@ -137,6 +161,13 @@ function appendTool(html){
|
||||
watchBrach.style.display = "none";
|
||||
clearInterval(timer);
|
||||
});
|
||||
volume.addEventListener('click', function(e){
|
||||
if(state['volume']>=5){
|
||||
state.set('volume', 0);
|
||||
} else {
|
||||
state.set('volume', state['volume']+1);
|
||||
}
|
||||
})
|
||||
document.querySelectorAll("[isoption]").forEach(function(el){
|
||||
// approximate on('change') which does not appear to work
|
||||
function handleChange(e){
|
||||
@@ -160,7 +191,7 @@ function newQuestion(){
|
||||
if(search!==-1){
|
||||
return true;
|
||||
} else {
|
||||
return false
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
45
styles.css
45
styles.css
@@ -1,6 +1,48 @@
|
||||
[contenteditable] {
|
||||
outline: 0px solid transparent;
|
||||
}
|
||||
#volume {
|
||||
margin-left: 1rem;
|
||||
position: relative;
|
||||
height: 25px;
|
||||
width: 50px;
|
||||
float: left;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#volume>div {
|
||||
border-radius: 15px;
|
||||
width: 3px;
|
||||
position: absolute;
|
||||
display: inline;
|
||||
float: left;
|
||||
background-color: #5FB4D8;
|
||||
}
|
||||
#volume div:first-child{
|
||||
bottom: 40%;
|
||||
left: 5px;
|
||||
height: 20%;
|
||||
}
|
||||
#volume div:nth-child(2){
|
||||
bottom: 30%;
|
||||
left: 15px;
|
||||
height: 40%;
|
||||
}
|
||||
#volume div:nth-child(3){
|
||||
bottom: 20%;
|
||||
left: 25px;
|
||||
height: 60%;
|
||||
}
|
||||
#volume div:nth-child(4){
|
||||
bottom: 10%;
|
||||
left: 35px;
|
||||
height: 80%;
|
||||
}
|
||||
#volume div:nth-child(5){
|
||||
bottom: 0%;
|
||||
left: 45px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
padding: 1rem;
|
||||
display: inline-block;
|
||||
@@ -45,9 +87,6 @@
|
||||
.ask-opt:hover{
|
||||
color: #5fb4d871;
|
||||
}
|
||||
#two {
|
||||
display: none;
|
||||
}
|
||||
.option-sentence{
|
||||
line-height: 2.6;
|
||||
height:25px;
|
||||
|
||||
Reference in New Issue
Block a user