Skip to content
Permalink
Browse files

WIP: highlighting the current talked about item

  • Loading branch information...
Robdel12 committed May 22, 2015
1 parent 2212d51 commit 1571a35b4829184f99a9d037304bef394cec6c77
Showing with 20 additions and 2 deletions.
  1. +17 −1 app/components/note-item.js
  2. +2 −0 app/styles/app.sass
  3. +1 −1 app/templates/episodes/the-most-private-of-all-apis.haml
@@ -3,10 +3,26 @@ import layout from '../templates/components/note-item';

export default Ember.Component.extend({
layout: layout,
player: Ember.inject.service('player'),
tagName: 'li',
classNameBindings: ['active'],
active: false,
click(e){
if(this.$()[0] === e.target) {
this.$('.timestamp').trigger('click');
}
}
},

highlightItem: Ember.observer('player.currentTime', function() {

This comment has been minimized.

Copy link
@rondale-sc

rondale-sc May 22, 2015

I wonder how often this gets called. Does currentTime get changed per milli or per second? If milli we should throttle this to only run every few seconds. We don't need more than 1-2 seconds of granularity for it to feel right (I'd wager)

This comment has been minimized.

Copy link
@code0100fun

code0100fun May 23, 2015

This could be turned into a computed property like:

active: Ember.computed('player.currentTime', function() {
  // ...
  return startTime <= currentTime && currentTime <= endTime;
}),

This comment has been minimized.

Copy link
@Robdel12

Robdel12 May 23, 2015

Author Owner

What's interesting is this didn't work. In the youtube video I sent I used a setTimeout every second. Any ideas why?

This comment has been minimized.

Copy link
@code0100fun

code0100fun May 23, 2015

Where is the startTime and endTime parsed to dates?

This comment has been minimized.

Copy link
@Robdel12

Robdel12 May 23, 2015

Author Owner

Interesting. So I got it work only with an observer. A computed property doesn't work. ¯_(ツ)_/¯

This comment has been minimized.

Copy link
@code0100fun

code0100fun May 23, 2015

What doesn't work? Does it not highlight? I got it to highlight with the computed property: https://dl.dropboxusercontent.com/u/85262363/highlight.m4v

This is only really working because the string comparison works: "00:09" <= "00:11" <= "00:12". I'd rather parse them with moment.duration and compare integer second differences.

var currentTime = this.get('player').get('currentTime');
var startTime = this.get('startTime');
var endTime = this.get('endTime');


if(startTime <= currentTime && currentTime <= endTime) {

This comment has been minimized.

Copy link
@rondale-sc

rondale-sc May 22, 2015

We could utilize moment here I think: http://momentjs.com/docs/#/query/is-between/

Thought I'm not quite sure off the top of my head.

This comment has been minimized.

Copy link
@Robdel12

Robdel12 May 23, 2015

Author Owner

I agree!

this.set('active', true);
} else {
this.set('active', false);
}
})
});
@@ -219,6 +219,8 @@ main
display: flex
flex-direction: row
justify-content: flex-start
&.active
background: rgb(232, 232, 232)
a.jump
color: #fff
font-size: 1.4rem
@@ -1,4 +1,4 @@
-note-item time="00:09" episode=episode
-note-item startTime="00:09" endTime="00:11" time="00:09" episode=episode

This comment has been minimized.

Copy link
@rondale-sc

rondale-sc May 22, 2015

I wonder if we could infer the endTime somehow. Because we know the time of the next item.

This comment has been minimized.

Copy link
@Robdel12

Robdel12 May 23, 2015

Author Owner

How do we know that?

This comment has been minimized.

Copy link
@rondale-sc

rondale-sc May 23, 2015

I kinda mean that in the abstract sense. As in we know the time of the individual note-item and we know that all note items happen in sequence.

Really don't like hte idea of specifying the endTime. Especially when right below that the startTime of the next item will be the endTime of the previous. It'll just feel redundant.

That being said the only way I can think to gain that knowledge is to register the note-item's startTime property with the note-list. And pass the registry to each note-item.

Not sure if worth?

This comment has been minimized.

Copy link
@code0100fun

code0100fun May 23, 2015

This would be really easy if we had proper models :(

-link-to-site href="https://twitter.com/emberweekend/status/597798861206331392"
-external-title
Ember Weekend New Logo Candidate

6 comments on commit 1571a35

@rondale-sc

This comment has been minimized.

Copy link

rondale-sc replied May 22, 2015

It'd be nice if the player threw off some events when it reached registered times (which the note item could register). Then the observer on player could live in player, and other components could simply require the player and set events without havng to define their own observer for each thing they need to handle

I'm not sure if that makes sense...
/cc @code0100fun

@code0100fun

This comment has been minimized.

Copy link

code0100fun replied May 23, 2015

I think it's better if the player is not actively aware of seek-to times. This implementation seems clean (with the observer change). I wish we didn't have to specify start and end times though. I see no real way around it because the user could click right in the middle of a section.

@Robdel12

This comment has been minimized.

Copy link
Owner Author

Robdel12 replied May 23, 2015

@code0100fun I agree. It feels so dirty passing in the start and end times but the note-item only knows itself and not all the other note-items. Not sure how to get around that.

@rondale-sc

This comment has been minimized.

Copy link

rondale-sc replied May 23, 2015

@Robdel12

#/note-list.hbs
=yield this.startTimeRegistry 
- note-list as |registry|
  - note-item startTimeRegistry=registry
// note-list.js
registry: Ember.A()
// note-item.js
init() {
  this.get('startTimeRegistry').push([ this.get('elementId'), this.get('startTime')])
}

Then you'll have something like:

[[ember-1, 1:13], [ember-2, 2:06]]

In each note-item. I think you could do this.

You'd have to Ember.compute off startTimeRegistry.@each and player.currentTime or something.

</stream of consciousness>

@rondale-sc

This comment has been minimized.

Copy link

rondale-sc replied May 23, 2015

Or maybe a service so we don't have to manually pass the registry. Though at that point, we'd be using a service for a line of communication, and I'm not sure if that's the best thing.

@rondale-sc

This comment has been minimized.

Copy link

rondale-sc replied May 23, 2015

There should at least be a util class that deals with whatever the registry contains. Like something that receives a commponent or an id and the current playing time and says active or not

Please sign in to comment.
You can’t perform that action at this time.