diff options
| author |   Humberto Alfonso Díaz <humberto.alfonso@asvito.es> | 2019-12-10 09:45:35 +0100 |
|---|---|---|
| committer |   Lorenzo Tilve <ltilve@igalia.com> | 2020-02-04 19:16:01 +0100 |
| commit | 78e93f79eeeadb87663c4c80236a4293661004f1 (patch) | |
| tree | 79816906e62f459c20343c4156ed927fb6380865 | |
| parent | 75596a5c7d09cfeaf08d7a20950362a7eb158af5 (diff) | |
FUNCT Add support to seek
| -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> |