Browse Source

added subtitle delay controls

master
mortie 7 years ago
parent
commit
e1b4e34464
4 changed files with 92 additions and 9 deletions
  1. 6
    1
      js/play/player.js
  2. 10
    1
      web/playback/index.html
  3. 32
    1
      web/playback/script.js
  4. 44
    6
      web/playback/style.css

+ 6
- 1
js/play/player.js View File

@@ -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() {

+ 10
- 1
web/playback/index.html View File

@@ -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>

+ 32
- 1
web/playback/script.js View File

@@ -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);
});

+ 44
- 6
web/playback/style.css View File

@@ -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;
}

Loading…
Cancel
Save