From: Chip Black Date: Sun, 17 Aug 2014 02:37:23 +0000 (-0500) Subject: Add info bar for episode; some rearrangement of model/view code X-Git-Url: http://git.bytex64.net/?a=commitdiff_plain;p=nettv.git Add info bar for episode; some rearrangement of model/view code --- diff --git a/source/data/EpisodeCollection.js b/source/data/EpisodeCollection.js new file mode 100644 index 0000000..0b665c7 --- /dev/null +++ b/source/data/EpisodeCollection.js @@ -0,0 +1,5 @@ +enyo.kind({ + name: "EpisodeCollection", + kind: "enyo.Collection", + model: "EpisodeModel" +}); diff --git a/source/data/EpisodeModel.js b/source/data/EpisodeModel.js new file mode 100644 index 0000000..bf5b70e --- /dev/null +++ b/source/data/EpisodeModel.js @@ -0,0 +1,16 @@ +enyo.kind({ + name: "EpisodeModel", + kind: "enyo.Model", + computed: { + longTitle: ["number", "title"], + fileURL: ["file"] + }, + attributes: { + longTitle: function() { + return "Episode " + this.get('number') + " - " + this.get('title'); + }, + fileURL: function() { + return nettv.Util.addBase(this.get('file')); + } + } +}); diff --git a/source/data/package.js b/source/data/package.js index 09e33f4..cb2f520 100644 --- a/source/data/package.js +++ b/source/data/package.js @@ -1,4 +1,6 @@ enyo.depends( "ShowModel.js", - "ShowCollection.js" + "ShowCollection.js", + "EpisodeModel.js", + "EpisodeCollection.js" ); diff --git a/source/nettv/EpisodeItem.js b/source/nettv/EpisodeItem.js index d5ed82b..e6ecbee 100644 --- a/source/nettv/EpisodeItem.js +++ b/source/nettv/EpisodeItem.js @@ -3,7 +3,7 @@ enyo.kind({ kind: "moon.LabeledTextItem", spotlight: true, bindings: [ - {from: ".model.number", to: ".label", transform: function(n) { return "Episode " + n; }}, - {from: ".model.title", to: ".text"} + {from: ".model.longTitle", to: ".label"}, + {from: ".model.description", to: ".text"} ] }); diff --git a/source/nettv/EpisodeListing.js b/source/nettv/EpisodeListing.js index 14755f5..dbaf714 100644 --- a/source/nettv/EpisodeListing.js +++ b/source/nettv/EpisodeListing.js @@ -3,7 +3,7 @@ enyo.kind({ kind: "moon.Panel", smallHeader: true, published: { - collection: null + show: null }, components: [ {name: "episodeList", kind: "moon.DataList", components: [ @@ -11,9 +11,16 @@ enyo.kind({ ]} ], bindings: [ - {from: ".collection", to: ".$.episodeList.collection"} + {from: ".show.episodes", to: ".$.episodeList.collection", + transform: function(v) { return new EpisodeCollection(v); }}, + {from: ".show.name", to: ".title"}, + {from: ".show.description", to: ".titleBelow"}, + {from: ".show.thumbURL", to: ".headerBackgroundSrc"} ], playEpisode: function(inSender, inEvent) { - this.bubble('onPlayEpisode', this.collection.at(inEvent.index)); + this.bubble('onPlayEpisode', { + show: this.show, + episode: this.$.episodeList.collection.at(inEvent.index) + }); } }); diff --git a/source/nettv/Main.js b/source/nettv/Main.js index fd79f82..ef0aabf 100644 --- a/source/nettv/Main.js +++ b/source/nettv/Main.js @@ -10,22 +10,26 @@ enyo.kind({ {name: "showListing", kind: "nettv.ShowListing"} ]}, {name: "player", kind: "moon.VideoPlayer", classes: "enyo-fit", showing: false, - shakeAndWake: true, components: [ + shakeAndWake: true, infoComponents: [ + {kind: "moon.VideoInfoBackground", components: [ + {name: "infoHeader", kind: "moon.VideoInfoHeader"} + ]} + ], components: [ {kind: "moon.IconButton", icon: "closex", ontap: "closePlayer", small: false} ]} ], showEpisodes: function(inSender, inEvent) { this.$.navigationPanels.popPanels(1); this.$.navigationPanels.pushPanel({name: "episodeListing", kind: "nettv.EpisodeListing"}, { - title: inEvent.get('name'), - titleBelow: inEvent.get('description'), - collection: new enyo.Collection(inEvent.get('episodes')), - headerBackgroundSrc: inEvent.get('thumbURL') + show: inEvent }); }, playEpisode: function(inSender, inEvent) { this.$.player.show(); - this.$.player.set('src', nettv.Util.addBase(inEvent.get('file'))); + this.$.player.set('src', inEvent.episode.get('fileURL')); + this.$.infoHeader.set('title', inEvent.show.get('name')); + this.$.infoHeader.set('subTitle', inEvent.episode.get('longTitle')); + this.$.infoHeader.set('description', inEvent.episode.get('description')); this.$.player.play(); }, closePlayer: function(inSender, inEvent) {