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

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

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

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

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



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

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

* { * {
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;
}

Loading…
Cancel
Save