Mercurial > code > home > repos > light9
changeset 1338:5ba5afe30817
ctrl-p does seekPlayOrPause
Ignore-this: 532763ad2a4006f710b090babfa35920
author | Drew Perttula <drewp@bigasterisk.com> |
---|---|
date | Sat, 04 Jun 2016 22:38:30 +0000 |
parents | 34c9c4568c88 |
children | f24d4b331f15 |
files | light9/web/lib/bower.json light9/web/light9-music.coffee light9/web/light9-music.html light9/web/timeline-elements.html light9/web/timeline.coffee light9/web/timeline.html |
diffstat | 6 files changed, 39 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/light9/web/lib/bower.json Sat Jun 04 22:10:32 2016 +0000 +++ b/light9/web/lib/bower.json Sat Jun 04 22:38:30 2016 +0000 @@ -13,7 +13,8 @@ "d3": "https://github.com/d3/d3.git#e7194db33090a0afc06c77a959594361ffb949df", "rdflib.js": "https://github.com/linkeddata/rdflib.js.git#920e59fe37", "rdfstore": "https://github.com/antoniogarrote/rdfstore-js.git#b3f7c0c9c1da9b26261af0d4858722fa982411bb", - "N3.js": "https://github.com/RubenVerborgh/N3.js.git#04f4e21f4ccb351587dc00a3f26340b28d4bb10f" + "N3.js": "https://github.com/RubenVerborgh/N3.js.git#04f4e21f4ccb351587dc00a3f26340b28d4bb10f", + "shortcut": "http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js" }, "resolutions": { "paper-styles": "^1.1.4",
--- a/light9/web/light9-music.coffee Sat Jun 04 22:10:32 2016 +0000 +++ b/light9/web/light9-music.coffee Sat Jun 04 22:38:30 2016 +0000 @@ -9,8 +9,10 @@ turboSign: { type: String, notify: true } duration: { type: Number, notify: true } + song: { type: String, notify: true } + # It does not yet work to write back to the playing/t + # properties. See seekPlayOrPause. playing: { type: Boolean, notify: true } - song: { type: String, notify: true } t: { type: Number, notify: true } ready: -> @@ -23,6 +25,7 @@ setTimeout(@poll.bind(@), 2000) @poll() setInterval(@estimateTimeLoop.bind(@), 50) + estimateTimeLoop: -> if @playing @@ -31,13 +34,15 @@ @t = @remoteT poll: -> + clearTimeout(@nextPoll) if @nextPoll @$.getTime.generateRequest() @status = "♫" + onResponse: -> @status = " " - r = @$.getTime.lastResponse + @lastResponse = @$.getTime.lastResponse now = Date.now() - if !r.playing && r.t != @remoteT + if !@lastResponse.playing && @lastResponse.t != @remoteT # likely seeking in another tool @turboUntil = now + 1000 if now < @turboUntil @@ -47,14 +52,18 @@ @turboSign = " " delay = 700 - setTimeout(@poll.bind(@), delay) - @duration = r.duration - @playing = r.playing - @song = r.song + @nextPoll = setTimeout(@poll.bind(@), delay) + @duration = @lastResponse.duration + @playing = @lastResponse.playing + @song = @lastResponse.song - @remoteT = r.t + @remoteT = @lastResponse.t @remoteAsOfMs = now + seekPlayOrPause: (t) -> + @$.seek.body = {t: t} + @$.seek.generateRequest() - + @turboUntil = Date.now() + 1000 + @poll()
--- a/light9/web/light9-music.html Sat Jun 04 22:10:32 2016 +0000 +++ b/light9/web/light9-music.html Sat Jun 04 22:38:30 2016 +0000 @@ -15,6 +15,10 @@ } </style> <iron-ajax id="getTime" url="/ascoltami/time"></iron-ajax> + <iron-ajax id="seek" + method="POST" + url="/ascoltami/seekPlayOrPause" + content-type="application/json"></iron-ajax> <span>[[status]][[turboSign]]</span> </template> <script src="light9-music.js"></script>
--- a/light9/web/timeline-elements.html Sat Jun 04 22:10:32 2016 +0000 +++ b/light9/web/timeline-elements.html Sat Jun 04 22:38:30 2016 +0000 @@ -33,7 +33,7 @@ </style> <div> <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph> - <light9-music song="{{song}}" t="{{songTime}}"></light9-music> + <light9-music id="music" song="{{song}}" t="{{songTime}}" playing="{{songPlaying}}"></light9-music> timeline editor: song [{{song}}] <button>unlink</button> <label><input type="checkbox"> follow player song choice</label> </div> @@ -292,5 +292,6 @@ <script src="/lib/d3/build/d3.min.js"></script> <script src="/lib/N3.js/browser/n3-browser.min.js"></script> <script src="/lib/knockout/dist/knockout.js"></script> +<script src="/lib/shortcut/index.js"></script> <script src="adjustable.js"></script> <script src="timeline.js"></script>
--- a/light9/web/timeline.coffee Sat Jun 04 22:10:32 2016 +0000 +++ b/light9/web/timeline.coffee Sat Jun 04 22:38:30 2016 +0000 @@ -9,6 +9,7 @@ graph: {type: Object, notify: true} song: {type: String, notify: true} songTime: {type: Number, notify: true, observer: '_onSongTime'} + songPlaying: {type: Boolean, notify: true} width: ko.observable(1) listeners: 'iron-resize': '_onIronResize' @@ -46,23 +47,29 @@ @$.zoomed.$.time.offsetTop, @$.zoomed.$.time.offsetHeight, @fullZoomX, @zoomInX, @viewState.cursor) + + @adjs = @makeZoomAdjs().concat(@persistDemo()) + @trackMouse() + @bindKeys() - # this isn't firing on phone during pen drag + trackMouse: -> + # not just for show- we use the mouse pos sometimes for evName in ['mousemove', 'touchmove'] @addEventListener evName, (ev) => ev.preventDefault() - + + # todo: consolidate with _editorCoordinates version if ev.touches?.length ev = ev.touches[0] - # consolidate with _editorCoordinates version @root = @getBoundingClientRect() @viewState.mouse.pos($V([ev.pageX - @root.left, ev.pageY - @root.top])) @$.dia.setMouse(@viewState.mouse.pos()) - @debug = evName + ' ' + ev.clientX + ' ' + ev.layerX + ' ' + ev.movementX + ' ' + ev.offsetX + ' ' + ev.pageX + ' ' + ev.x - - @adjs = @makeZoomAdjs().concat(@persistDemo()) + + bindKeys: -> + shortcut.add "Ctrl+P", (ev) => + @$.music.seekPlayOrPause(@zoomInX.invert(@viewState.mouse.pos().e(1))) persistDemo: -> ctx = @graph.Uri('http://example.com/')
--- a/light9/web/timeline.html Sat Jun 04 22:10:32 2016 +0000 +++ b/light9/web/timeline.html Sat Jun 04 22:38:30 2016 +0000 @@ -4,7 +4,6 @@ <title>timeline</title> <meta charset="utf-8" /> <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script> - <link rel="import" href="timeline-elements.html" </head> <body>