playing: true | playing: true | ||||
}; | }; | ||||
var cbs = 6; | |||||
var cbs = 7; | |||||
function next() { | function next() { | ||||
cbs -= 1; | cbs -= 1; | ||||
if (cbs === 0) | if (cbs === 0) | ||||
state.volume_max = res.data; | state.volume_max = res.data; | ||||
next(); | next(); | ||||
}); | }); | ||||
cmd(["get_property", "sub-delay"], res => { | |||||
state.sub_delay = res.data; | |||||
next(); | |||||
}); | |||||
} | } | ||||
exports.isPlaying = function() { | exports.isPlaying = function() { |
</div> | </div> | ||||
<div id="group-volume"> | <div id="group-volume"> | ||||
Volume <span id="volume-text"></span><br> | |||||
Volume <span id="volume-text">0</span>%<br> | |||||
<input id="volume" type="range"> | <input id="volume" type="range"> | ||||
</div> | </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="/webstuff.js"></script> | ||||
<script src="script.js"></script> | <script src="script.js"></script> | ||||
</body> | </body> |
volume: $$("#volume"), | volume: $$("#volume"), | ||||
volume_text: $$("#volume-text"), | 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 = {}; | var state = {}; | ||||
elems.volume.max = state.volume_max; | elems.volume.max = state.volume_max; | ||||
elems.volume.value = state.volume; | elems.volume.value = state.volume; | ||||
elems.volume.step = 5; | 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() { | function checkState() { | ||||
playerset("volume", parseInt(evt.target.value) + parseInt(evt.target.step)); | 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) { | window.addEventListener("keydown", function(evt) { | ||||
console.log(evt.keyCode); | console.log(evt.keyCode); | ||||
}); | }); |
* { | * { | ||||
box-sizing: border-box; | box-sizing: border-box; | ||||
line-height: 30px; | |||||
font-family: Sans-Serif | |||||
} | } | ||||
body { | body { | ||||
background: #aaa; | background: #aaa; | ||||
} | } | ||||
/* | |||||
* Playback | |||||
*/ | |||||
#is-playing, | |||||
#progress-text { | |||||
display: inline-block; | |||||
} | |||||
#progress-text { | |||||
float: right; | |||||
} | |||||
#group-buttons { | |||||
text-align: center; | |||||
} | |||||
progress { | progress { | ||||
width: 100%; | width: 100%; | ||||
height: 24px; | height: 24px; | ||||
} | } | ||||
/* | |||||
* Volume | |||||
*/ | |||||
input[type="range"] { | input[type="range"] { | ||||
border: 1px solid rgba(0, 0, 0, 0); | border: 1px solid rgba(0, 0, 0, 0); | ||||
box-sizing: border-box; | box-sizing: border-box; | ||||
width: 100%; | 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; | text-align: center; | ||||
} | } | ||||
#group-sub-delay { | |||||
border-top: 1px solid #ccc; | |||||
} | |||||
#group-sub-delay { | |||||
padding-top: 12px; | |||||
} | |||||
#group-sub-delay button { | |||||
margin-top: 6px; | |||||
} |