@@ -41,7 +41,7 @@ function getState(cb) { | |||
playing: true | |||
}; | |||
var cbs = 6; | |||
var cbs = 7; | |||
function next() { | |||
cbs -= 1; | |||
if (cbs === 0) | |||
@@ -77,6 +77,11 @@ function getState(cb) { | |||
state.volume_max = res.data; | |||
next(); | |||
}); | |||
cmd(["get_property", "sub-delay"], res => { | |||
state.sub_delay = res.data; | |||
next(); | |||
}); | |||
} | |||
exports.isPlaying = function() { |
@@ -25,10 +25,19 @@ | |||
</div> | |||
<div id="group-volume"> | |||
Volume <span id="volume-text"></span><br> | |||
Volume <span id="volume-text">0</span>%<br> | |||
<input id="volume" type="range"> | |||
</div> | |||
<div id="group-sub-delay"> | |||
Subtitle Delay <span id="sub-delay">0</span>s<br> | |||
<button id="sub-delay-less2">-1</button> | |||
<button id="sub-delay-less">-0.1</button> | |||
<button id="sub-delay-reset">0</button> | |||
<button id="sub-delay-more">+0.1</button> | |||
<button id="sub-delay-more2">+1</button> | |||
</div> | |||
<script src="/webstuff.js"></script> | |||
<script src="script.js"></script> | |||
</body> |
@@ -18,6 +18,13 @@ var elems = { | |||
volume: $$("#volume"), | |||
volume_text: $$("#volume-text"), | |||
sub_delay: $$("#sub-delay"), | |||
sub_delay_less: $$("#sub-delay-less"), | |||
sub_delay_less2: $$("#sub-delay-less2"), | |||
sub_delay_more: $$("#sub-delay-more"), | |||
sub_delay_more2: $$("#sub-delay-more2"), | |||
sub_delay_reset: $$("#sub-delay-reset") | |||
}; | |||
var state = {}; | |||
@@ -52,7 +59,10 @@ function update(state) { | |||
elems.volume.max = state.volume_max; | |||
elems.volume.value = state.volume; | |||
elems.volume.step = 5; | |||
elems.volume_text.innerHTML = state.volume+"%"; | |||
elems.volume_text.innerHTML = state.volume; | |||
// Sub Delay | |||
elems.sub_delay.innerHTML = state.sub_delay; | |||
} | |||
function checkState() { | |||
@@ -127,6 +137,27 @@ elems.volume.addEventListener("keydown", function(evt) { | |||
playerset("volume", parseInt(evt.target.value) + parseInt(evt.target.step)); | |||
}); | |||
// Less subtitle delay | |||
elems.sub_delay_less.addEventListener("click", function() { | |||
playerset("sub-delay", state.sub_delay - 0.1); | |||
}); | |||
elems.sub_delay_less2.addEventListener("click", function() { | |||
playerset("sub-delay", state.sub_delay - 1); | |||
}); | |||
// More subtitle delay | |||
elems.sub_delay_more.addEventListener("click", function() { | |||
playerset("sub-delay", state.sub_delay + 0.1); | |||
}); | |||
elems.sub_delay_more2.addEventListener("click", function() { | |||
playerset("sub-delay", state.sub_delay + 1); | |||
}); | |||
// Set subtitle delay to 0 | |||
elems.sub_delay_reset.addEventListener("click", function() { | |||
playerset("sub-delay", 0); | |||
}); | |||
window.addEventListener("keydown", function(evt) { | |||
console.log(evt.keyCode); | |||
}); |
@@ -1,5 +1,7 @@ | |||
* { | |||
box-sizing: border-box; | |||
line-height: 30px; | |||
font-family: Sans-Serif | |||
} | |||
body { | |||
@@ -26,11 +28,30 @@ button.active { | |||
background: #aaa; | |||
} | |||
/* | |||
* Playback | |||
*/ | |||
#is-playing, | |||
#progress-text { | |||
display: inline-block; | |||
} | |||
#progress-text { | |||
float: right; | |||
} | |||
#group-buttons { | |||
text-align: center; | |||
} | |||
progress { | |||
width: 100%; | |||
height: 24px; | |||
} | |||
/* | |||
* Volume | |||
*/ | |||
input[type="range"] { | |||
border: 1px solid rgba(0, 0, 0, 0); | |||
box-sizing: border-box; | |||
@@ -38,14 +59,31 @@ input[type="range"] { | |||
width: 100%; | |||
} | |||
#is-playing, | |||
#progress-text { | |||
display: inline-block; | |||
#group-volume { | |||
text-align: center; | |||
border-top: 1px solid #ccc; | |||
} | |||
#progress-text { | |||
float: right; | |||
#group-volume { | |||
padding-top: 12px; | |||
margin-top: 24px; | |||
} | |||
#group-buttons { | |||
/* | |||
* Sub Delay | |||
*/ | |||
#group-sub-delay { | |||
text-align: center; | |||
} | |||
#group-sub-delay { | |||
border-top: 1px solid #ccc; | |||
} | |||
#group-sub-delay { | |||
padding-top: 12px; | |||
} | |||
#group-sub-delay button { | |||
margin-top: 6px; | |||
} |