Flowfeeds

Presentation about flowfeeds.com for the southern California ember.js group.

Transcript

1. Wednesday, May 22, 13
2. Wednesday, May 22, 13
3. Why? • To Many RSS feeds :( • Video Playlists • New music everyday Wednesday, May 22, 13
4. flowfeeds.com • Stack • Ember.js & Rails 4 • Features • Audio & Video Player • Drag & Drop Sorting • Infinite Scroll Wednesday, May 22, 13
5. Audio & Video • Libraries • Video: YouTube JS API • Audio: SoundManager2 Wednesday, May 22, 13
6. Flowfeeds.PlayableController = Ember.ObjectController.extend({ bytesLoaded: 0, bytesTotal: 0, duration: 0, isPlaying: false, position: 0, setup: Ember.K, play: Ember.K, pause: Ember.K, jump: Ember.K, stop: Ember.K }); Wednesday, May 22, 13
7. Flowfeeds.VideoController = Flowfeeds.PlayableController.extend({ setup: function(model) { this.set('content', model); this.setupAndPlayVideo(); }, // implementation details }); Flowfeeds.AudioController = Flowfeeds.PlayableController.extend({ setup: function(model) { this.set('content', model); this.setupAndPlayAudio(); }, // implementation details }); Wednesday, May 22, 13
8. PlayerView Wednesday, May 22, 13
9. Model Attributes {{ artist.name }} {{ title }} <img {{ bindAttr src="thumb" }} /> Wednesday, May 22, 13
10. Time {{ formatTime position }} {{ formatTime duration }} Wednesday, May 22, 13
11. Ember.Handlebars.registerBoundHelper('formatTime', function(ms) { var x = ms / 1000, seconds = x % 60 >> 0, minutes = x / 60 % 60 >> 0, hours = x / 3600 % 60 >> 0; if(seconds < 10) seconds = "0" + seconds; if(minutes < 10) minutes = "0" + minutes; if(hours === 0) { hours = ""; } else { hours = hours + ":"; } return hours + minutes + ":" + seconds; }); Wednesday, May 22, 13
12. ProgressView {{ render 'progress' controller }} Wednesday, May 22, 13
13. progess.hbs <div class="bar loading" {{bindAttr style="view.loadingBarStyle"}}> <div class="bar progress" {{bindAttr style="view.progressBarStyle"}}> Wednesday, May 22, 13
14. Flowfeeds.ProgressView = Ember.View.extend({ progressBarStyle: function() { return 'width: ' + this.get('controller.percentComplete') + '%;'; }.property('controller.percentComplete'), loadingBarStyle: function() { return 'width: ' + this.get('controller.percentLoaded') + '%;'; }.property('controller.percentLoaded'), Wednesday, May 22, 13
15. Flowfeeds.ProgressController = Ember.ObjectController.extend percentComplete: function() { var duration = this.get('duration'); if(duration === 0) return 0; return 100 * (this.get('position') / duration); }.property('position', 'duration'), percentLoaded: function() { var total = this.get('bytesTotal'); if(total === 0) return 0; return 100 * (this.get('bytesLoaded') / total); }.property('bytesLoaded', 'bytesTotal') }); Wednesday, May 22, 13
16. Flowfeeds.ProgressView = Ember.View.extend({ click: function(event) { this.jumpEvent(event); }, jumpEvent: function(event) { var pos = this.getX(event) / this.$().width(); this.get('controller').send('jump', pos); }, getX: function(event) { return event.pageX - $(event.currentTarget).offset().left; }, Wednesday, May 22, 13
17. mouseDown: function(event) { event.preventDefault(); this.scrubbing = true; }, mouseMove: function(event) { if(this.scrubbing) this.jumpEvent(event); }, mouseUp: function() { this.scrubbing = false; }, mouseLeave: function() { this.scrubbing = false; }, Wednesday, May 22, 13
18. Play / Next / Prev <button {{action next}}> Wednesday, May 22, 13
19. Flowfeeds.ApplicationRoute = Ember.Route.extend({ events: { play: function(playable, controller) { this.skipable = controller.get('target'); this.controllerFor('player').play(playable); }, previous: function() { if(this.skipable) this.skipable.send('previous'); }, next: function() { if(this.skipable) this.skipable.send('next'); }, Wednesday, May 22, 13
20. Wednesday, May 22, 13
21. Sortable Wednesday, May 22, 13
22. Sortable • Libraries: • jQuery UI Sortable Wednesday, May 22, 13
23. <div class="playables"> {{#each controller}} <div class="playable" {{bindAttr data-id="id"}}> </div> {{/each}} </div> Wednesday, May 22, 13
24. Flowfeeds.SortablePlaylistView = Ember.View.extend({ didInsertElement: function() { var controller = this.get('controller'); $('.playables').sortable({ update: function(event, ui) { var indexes = {}; $(this).find('.playable').each(function(index) { indexes[$(this).data('id').toString()] = index; }); $(this).sortable('cancel'); controller.updateSortOrder(indexes); } }); } }); Wednesday, May 22, 13
25. FlowFeeds.ItemsController = Ember.ArrayController.extend({ sortProperties: ['idx'], updateSortOrder: function(indexes) { this.forEach(function(item) { var index = indexes[item.get('id')]; item.set('idx', index); }); } }); Wednesday, May 22, 13
26. Infinite Scroll Wednesday, May 22, 13
27. {{#view Flowfeeds.InfiniteScrollView}} {{ render 'videos' model }} {{/view}} Wednesday, May 22, 13
28. Flowfeeds.InfiniteScrollView = Ember.View.extend({ elementId: 'infinite', layout: Ember.Handlebars.compile( "{{ yield }}{{ partial loader }}" ), didInsertElement: function() { var view = this; $('#main').on('scroll', function(){ if(view.isScrolledToBottom()) view.get('controller').send('more'); }); }, willDestroyElement: function() { $('#main').off('scroll'); } }); Wednesday, May 22, 13
29. Flowfeeds.FeedRoute = Ember.Route.extend({ events: { more: function() { this.modelFor('feed').loadNextPageOfTracks(); } } }); Wednesday, May 22, 13
30. Overview • Inheritance • Helpers • Sliders • Sortable • Infinite Scroll Wednesday, May 22, 13
31. Questions? • Source: • github.com/nerdyworm/flowfeeds • Contact • ben@nerdyworm.com Wednesday, May 22, 13