diff options
| -rw-r--r-- | src/js/player.js | 10 | ||||
| -rw-r--r-- | src/styles/main.scss | 2 | ||||
| -rw-r--r-- | src/templates/player.template.html | 4 |
3 files changed, 13 insertions, 3 deletions
diff --git a/src/js/player.js b/src/js/player.js index 5efdc2c..3fc34c7 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -97,4 +97,14 @@ export function previous() { export function next() { mediaplayer.next(); +} + +export function seek(node, event) { + /* + * The -15 is to adjust the default margin. + */ + var position = Math.round(page.metadata.track.duration * ((event.pageX-15)/node.clientWidth)); + mediaplayer.play().then(function() { + mediaplayer.seek(position); + }); }
\ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index ab40398..7490907 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -16,7 +16,7 @@ body { .playlistContainer { margin: 15px 0; overflow: scroll; - bottom: 200px; + bottom: 222px; } .log { diff --git a/src/templates/player.template.html b/src/templates/player.template.html index ebf98cc..4c7662d 100644 --- a/src/templates/player.template.html +++ b/src/templates/player.template.html @@ -25,9 +25,9 @@ {{ getDuration }} </div> </div> - <div class="row"> + <div class="row no-gutters"> <div class="col-12"> - <div class="progress"> + <div class="progress" onclick="player.seek(this, event);"> <div class="progress-bar" role="progressbar" style="width: {{getPercentage}}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> |