Feed Entry

From f9f8fdc3000042ba5b4504d91870dc9a32ef25eb Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 16 May 2012 01:00:22 -0700 Subject: Squashed master into dom-architecture Signed-off-by: Valerio Virgillito --- .../feed-reader/feed-entry.reel/feed-entry.html | 89 +++++++ .../feed-reader/feed-entry.reel/feed-entry.js | 21 ++ .../feed-reader/feed-reader.reel/feed-reader.html | 79 ++++++ .../feed-reader/feed-reader.reel/feed-reader.js | 179 +++++++++++++ node_modules/montage-google/map.reel/map.css | 9 + node_modules/montage-google/map.reel/map.html | 46 ++++ node_modules/montage-google/map.reel/map.js | 289 +++++++++++++++++++++ node_modules/montage-google/package.json | 14 + .../picasa-carousel.reel/image.reel/image.html | 39 +++ .../picasa-carousel.reel/image.reel/image.js | 20 ++ .../picasa-carousel.reel/picasa-carousel.css | 41 +++ .../picasa-carousel.reel/picasa-carousel.html | 169 ++++++++++++ .../picasa-carousel.reel/picasa-carousel.js | 151 +++++++++++ .../youtube-channel.reel/youtube-channel.html | 126 +++++++++ .../youtube-channel.reel/youtube-channel.js | 242 +++++++++++++++++ .../youtube-player.reel/youtube-player.html | 25 ++ .../youtube-player.reel/youtube-player.js | 216 +++++++++++++++ 17 files changed, 1755 insertions(+) create mode 100644 node_modules/montage-google/feed-reader/feed-entry.reel/feed-entry.html create mode 100644 node_modules/montage-google/feed-reader/feed-entry.reel/feed-entry.js create mode 100644 node_modules/montage-google/feed-reader/feed-reader.reel/feed-reader.html create mode 100644 node_modules/montage-google/feed-reader/feed-reader.reel/feed-reader.js create mode 100644 node_modules/montage-google/map.reel/map.css create mode 100644 node_modules/montage-google/map.reel/map.html create mode 100644 node_modules/montage-google/map.reel/map.js create mode 100755 node_modules/montage-google/package.json create mode 100644 node_modules/montage-google/picasa-carousel.reel/image.reel/image.html create mode 100644 node_modules/montage-google/picasa-carousel.reel/image.reel/image.js create mode 100755 node_modules/montage-google/picasa-carousel.reel/picasa-carousel.css create mode 100755 node_modules/montage-google/picasa-carousel.reel/picasa-carousel.html create mode 100644 node_modules/montage-google/picasa-carousel.reel/picasa-carousel.js create mode 100644 node_modules/montage-google/youtube-channel.reel/youtube-channel.html create mode 100644 node_modules/montage-google/youtube-channel.reel/youtube-channel.js create mode 100644 node_modules/montage-google/youtube-player.reel/youtube-player.html create mode 100644 node_modules/montage-google/youtube-player.reel/youtube-player.js (limited to 'node_modules/montage-google') diff --git a/node_modules/montage-google/feed-reader/feed-entry.reel/feed-entry.html b/node_modules/montage-google/feed-reader/feed-entry.reel/feed-entry.html new file mode 100644 index 00000000..6b2e51e2 --- /dev/null +++ b/node_modules/montage-google/feed-reader/feed-entry.reel/feed-entry.html @@ -0,0 +1,89 @@ + + + + + Feed Entry + + + + + + + +

+ +

+ + + diff --git a/node_modules/montage-google/feed-reader/feed-entry.reel/feed-entry.js b/node_modules/montage-google/feed-reader/feed-entry.reel/feed-entry.js new file mode 100644 index 00000000..8fdb3860 --- /dev/null +++ b/node_modules/montage-google/feed-reader/feed-entry.reel/feed-entry.js @@ -0,0 +1,21 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component; + +exports.FeedEntry = Montage.create(Component, { + + _entry: {value: null}, + entry: { + get: function() { + return this._entry; + }, + set: function(value) { + this._entry = value; + } + } + +}); diff --git a/node_modules/montage-google/feed-reader/feed-reader.reel/feed-reader.html b/node_modules/montage-google/feed-reader/feed-reader.reel/feed-reader.html new file mode 100644 index 00000000..28c0ed1f --- /dev/null +++ b/node_modules/montage-google/feed-reader/feed-reader.reel/feed-reader.html @@ -0,0 +1,79 @@ + + + + + Feed Reader + + + + + + + + + + +

+ +

+ + +

+ + + diff --git a/node_modules/montage-google/feed-reader/feed-reader.reel/feed-reader.js b/node_modules/montage-google/feed-reader/feed-reader.reel/feed-reader.js new file mode 100644 index 00000000..47a831eb --- /dev/null +++ b/node_modules/montage-google/feed-reader/feed-reader.reel/feed-reader.js @@ -0,0 +1,179 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component; + +exports.FeedReader = Montage.create(Component, { + + didCreate: { + value: function() { + var self = this; + var apiInit = function() { + console.log('google api initialized'); + + google.load("feeds", "1", { + callback: function() { + console.log('google feeds api loaded'); + self.needsDraw = true; + window.initGoogleAPI = null; + } + }); + }; + + // set up a global function + window.initGoogleAPI = apiInit; + } + }, + + _feedURL: {value: null}, + feedURL: { + get: function() { + return this._feedURL; + }, + set: function(value) { + this._feedURL = value; + // execute the search and get the entries + this._fetchFeed(); + } + }, + + // time in ms between slides + interval: {value: 3, distinct: true}, + + maxEntries: {value: 10, distinct: true}, + + entries: {value: null}, + + _feedDisplayMode: {value: null}, + feedDisplayMode: { + get: function() { + return this._feedDisplayMode; + }, + set: function(value) { + + this.removeEntryAnimation(); + this._feedDisplayMode = value; + + this.addEntryAnimation(); + } + }, + + + feedEntryTimer: {enumerable: false, value: null}, + + + activeFeedEntry: {value: null}, + _activeIndex: {value: null}, + activeIndex: { + get: function() { + return this._activeIndex || 0; + }, + set: function(index) { + if(this.entries) { + var max = this.entries.length-1; + if(index > max) { + index = 0; + } + if(index < 0) { + index = 0; + } + this._activeIndex = index; + this.activeFeedEntry = this.entries[this._activeIndex]; + } else { + this._activeIndex = 0; + } + } + }, + + _fetchFeed: { + value: function() { + + var url = this.feedURL; + var feed = new google.feeds.Feed(url); + feed.setNumEntries(10); + + var self = this; + self.entries = []; + + feed.load(function(result) { + self.removeEntryAnimation(); + if(result.error) { + self.entries = []; + } else { + //console.log('entries: ', result.feed.entries); + self.addEntryAnimation(); + self.entries = result.feed.entries; + self.activeIndex = 0; + + } + + + }); + } + }, + + addEntryAnimation: { + value: function() { + var self = this; + if("animation" == this.feedDisplayMode) { + this.element.addEventListener('webkitAnimationStart', this); + this.element.addEventListener('webkitAnimationIteration', this); + this.element.addEventListener('webkitAnimationEnd', this); + } else { + // timer + this.feedEntryTimer = setInterval(function() { + self.activeIndex = self.activeIndex + 1; + }, (this.interval * 1000)); + } + } + }, + + removeEntryAnimation: { + value: function() { + if("animation" == this.feedDisplayMode) { + this.element.removeEventListener('webkitAnimationStart', this); + this.element.removeEventListener('webkitAnimationIteration', this); + this.element.removeEventListener('webkitAnimationEnd', this); + + } else { + if(this.feedEntryTimer) { + window.clearInterval(this.feedEntryTimer); + } + } + } + }, + + handleWebkitAnimationStart: { + value: function() { + console.log('animation start'); + } + }, + + handleWebkitAnimationIteration: { + value: function() { + console.log('animation iteration'); + this.activeIndex = this.activeIndex + 1; + } + }, + + handleWebkitAnimationEnd: { + value: function() { + console.log('animation end'); + } + }, + + prepareForDraw: { + value: function() { + } + }, + + draw: { + value: function() { + + } + } + +}); diff --git a/node_modules/montage-google/map.reel/map.css b/node_modules/montage-google/map.reel/map.css new file mode 100644 index 00000000..45307593 --- /dev/null +++ b/node_modules/montage-google/map.reel/map.css @@ -0,0 +1,9 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +.montage-google-map { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/node_modules/montage-google/map.reel/map.html b/node_modules/montage-google/map.reel/map.html new file mode 100644 index 00000000..fee3a38e --- /dev/null +++ b/node_modules/montage-google/map.reel/map.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + +

MAP

+ + + diff --git a/node_modules/montage-google/map.reel/map.js b/node_modules/montage-google/map.reel/map.js new file mode 100644 index 00000000..3ba7fff7 --- /dev/null +++ b/node_modules/montage-google/map.reel/map.js @@ -0,0 +1,289 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +/** + + @requires montage/core/core + @requires montage/ui/component +*/ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component; + +/** + @class module:"montage/ui/google/map.reel".Map + @extends module:montage/ui/component.Component + */ +var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/toggle-switch.reel".ToggleSwitch# */ { + + didCreate: { + value: function() { + var self = this; + window.initialize = function initialize() { + console.log('google maps api loaded'); + self._mapLoaded = true; + self._geoCoder = new google.maps.Geocoder(); + self.needsDraw = true; + }; + } + }, + + _geoCoder: {value: null}, + + // HTMLElement to load the Map into + mapEl: {value: null}, + + _mapLoaded: { + enumerable: false, + value: false + }, + _map: { + enumerable: false, + value: false + }, + + // Sunnyvale, CA + defaultLatLng: { + value: {lat: 37.37, lng: -122.03} + }, + + _latLng: { + value: this.defaultLatLng, + distinct: true + }, + latLng: { + get: function() { + return this._latLng; + }, + set: function(value) { + if(value) { + this._latLng = value; + // refresh the map + this.needsDraw = true; + } + } + }, + + // {lat, lon} Or a String representing the location (eg: Paris, France) + center: { + get: function() { + return this._center; + }, + set: function(value) { + if(value) { + var self = this, geocoder = this._geoCoder; + this._center = value; + if(this._mapLoaded) { + + if(String.isString(value)) { + // geocode + geocoder.geocode( { 'address': value}, function(results, status) { + if (status == google.maps.GeocoderStatus.OK) { + var loc = results[0].geometry.location; + self.latLng = {lat: loc.lat(), lng: loc.lng()}; + } else { + console.log('Geocode was not successful : ' + status); + } + }); + } else if(value.lat && value.lng) { + this.latLng = value; + } else { + // default location + this.latLng = this.defaultLatLng; + } + + } + + } + + } + }, + + category: { + get: function() { + return this._category; + }, + set: function(value) { + console.log('category set: ' + value); + if(value) { + this._category = value; + this._getPlaces(this._category); + this.needsDraw = true; + } + } + }, + + trafficLayer: {value: null}, + _traffic: {value: null}, + traffic: { + get: function() { + return this._traffic; + }, + set: function(value) { + if(value !== this._traffic) { + this._traffic = value; + this.needsDraw = true; + } + } + }, + + + zoomValue: { + value: 8 + }, + + __places: {value: null}, + _places: { + get: function() { + return this.__places; + }, + set: function(value) { + if(value) { + this.__places = value; + this.needsDraw = true; + } + } + }, + + _getPlaces: { + value: function(type, keyword) { + var self = this; + var request = { + location: new window.google.maps.LatLng(this.latLng.lat, this.latLng.lng), + radius: 5000, + types: [type] + }; + if(!this._infoWindow) { + this._infoWindow = new google.maps.InfoWindow(); + } + var service = new google.maps.places.PlacesService(this._map); + service.search(request, function(results, status) { + console.log('got places for ', self.category, status, results); + if (status == google.maps.places.PlacesServiceStatus.OK) { + self._places = results; + } else { + self._places = []; + } + }); + } + }, + + _infoWindow: {value: null}, + _markers: {value: null}, + _createMarker: { + value: function(place) { + var placeLoc = place.geometry.location, map = this._map; + var icon, image; + switch(this.category) { + case 'restaurant': + icon = '48-fork-and-knife.png'; + break; + case 'hospital': + icon = '10-medical.png'; + break; + case 'bar': + icon = '88-beer-mug.png'; + break; + case 'grocery_or_supermarket': + icon = '80-shopping-cart.png'; + break; + case 'museum': + icon = '41-picture-frame.png'; + break; + case 'gas_station': + icon = '47-fuel.png'; + break; + }; + if(icon) { + image = new google.maps.MarkerImage('images/' + icon); + } + var options = { + map: map, + position: place.geometry.location + }; + if(image) { + options.icon = image; + } + + var marker = new google.maps.Marker(options); + if(!this._markers) { + this._markers = []; + } + this._markers.push(marker); + + var infoWindow = this._infoWindow; + google.maps.event.addListener(marker, 'click', function() { + infoWindow.setContent(place.name + '
' + place.vicinity); + infoWindow.open(map, this); + }); + } + }, + + _removeAllMarkers: { + value: function() { + if(this._markers && this._markers.length > 0) { + var i=0, len = this._markers.length; + for(i; i< len; i++) { + this._markers[i].setMap(null); + } + this._markers = []; + } + } + }, + + +/** + Description TODO + @function + */ + draw: { + enumerable: false, + value: function () { + + if(this._mapLoaded) { + var latLng = this.latLng || this.defaultLatLng; + if(!this._map) { + var map; + var myOptions = { + zoom: this.zoomValue, + center: new window.google.maps.LatLng(latLng.lat, latLng.lng), + mapTypeId: window.google.maps.MapTypeId.ROADMAP + }; + + this._map = new window.google.maps.Map(this.mapEl, myOptions); + } else { + var map = this._map; + map.setZoom(10); + var latLng = new window.google.maps.LatLng(latLng.lat, latLng.lng); + map.setCenter(latLng); + var marker = new google.maps.Marker({ + map: map, + position: latLng + }); + + var places = this._places; + if(places && places.length > 0) { + map.setZoom(13); + this._removeAllMarkers(); + for (var i = 0; i < places.length; i++) { + this._createMarker(places[i]); + } + } + + if(this.traffic === true) { + this.trafficLayer = new google.maps.TrafficLayer(); + this.trafficLayer.setMap(map); + } else { + if(this.trafficLayer) { + this.trafficLayer.setMap(null); + } + } + } + + } + + //window.google.maps.event.addDomListener(window, 'load', initialize); + } + } +}); diff --git a/node_modules/montage-google/package.json b/node_modules/montage-google/package.json new file mode 100755 index 00000000..9cb96270 --- /dev/null +++ b/node_modules/montage-google/package.json @@ -0,0 +1,14 @@ + +{ + "name": "google-components", + "version": "0.1.0", + "description": "Google specific components", + "main": "google", + "mappings": { + "montage" : "../montage/" + }, + "dependency": { + "montage" : "0.8" + } + +} \ No newline at end of file diff --git a/node_modules/montage-google/picasa-carousel.reel/image.reel/image.html b/node_modules/montage-google/picasa-carousel.reel/image.reel/image.html new file mode 100644 index 00000000..368bd059 --- /dev/null +++ b/node_modules/montage-google/picasa-carousel.reel/image.reel/image.html @@ -0,0 +1,39 @@ + + + + + + + + +

+ + diff --git a/node_modules/montage-google/picasa-carousel.reel/image.reel/image.js b/node_modules/montage-google/picasa-carousel.reel/image.reel/image.js new file mode 100644 index 00000000..d5b9363e --- /dev/null +++ b/node_modules/montage-google/picasa-carousel.reel/image.reel/image.js @@ -0,0 +1,20 @@ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component; + +var Image = exports.Image = Montage.create(Component, { + + _src: {value: null}, + + src: { + set: function(value) { + this._src = value; + this.needsDraw = true; + } + }, + + draw: { + value: function() { + this._element.style.backgroundImage = "url(" + this._src + ")"; + } + } +}); diff --git a/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.css b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.css new file mode 100755 index 00000000..2494614b --- /dev/null +++ b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.css @@ -0,0 +1,41 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +.montage-google-picasa-carousel { + width: 100%; + height: 100%; + display: -webkit-box; + -webkit-box-pack: center; + -webkit-box-align: center; + display: -moz-box; + -moz-box-pack: center; + -moz-box-align: center; + display: -ms-box; + -ms-box-pack: center; + -ms-box-align: center; + display: box; + box-pack: center; + box-align: center; +} + +.montage-google-picasa-carousel .flow { + width: 100%; + height: 100%; +/* top: 0; + left: 0; + right: 0; + bottom: 0; +*/ + background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#bbb)); +} +.image { + position: absolute; + /*-top: 50%;*/ + -webkit-box-shadow: 0 0 35px rgba(0,0,0,.5); +} + +.montage-google-picasa-carousel .flow .montage-flow-repetition { + margin: 10% 0; +} diff --git a/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.html b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.html new file mode 100755 index 00000000..f7c8a766 --- /dev/null +++ b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.html @@ -0,0 +1,169 @@ + + + + + + + + + + + + + + +

+ +

+ + + diff --git a/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.js b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.js new file mode 100644 index 00000000..800e073c --- /dev/null +++ b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.js @@ -0,0 +1,151 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +/** + + @requires montage/core/core + @requires montage/ui/component +*/ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component; +/** + @class module:"montage/ui/google/map.reel".Map + @extends module:montage/ui/component.Component + */ +var PicasaCarousel = exports.PicasaCarousel = Montage.create(Component, /** @lends module:"montage/ui/toggle-switch.reel".ToggleSwitch# */ { + photoListController: { + enumerable: false, + value: null + }, + + flow: { + value: null + }, + + initialPosition: { + value: 2300 + }, + + _queryParameter: { + enumerable: false, + value: null + }, + + queryParameter: { + get: function() { + return this._queryParameter; + }, + set: function(value) { + this._queryParameter = value; + this.performSearch(); + } + }, + + resultCount: { + enumerable: false, + value: 1000 + }, + + prepareForDraw: { + enumerable: false, + value: function() { + // this.searchForm.identifier = "searchForm"; + // this.searchForm.addEventListener("submit", this, false); + } + }, + + _isSearching: { + value: false, + enumerable: false + }, + + isSearching: { + enumerable: false, + get: function() { + return this._isSearching; + }, + set: function(value) { + if (value === this._isSearching) { + return; + } + + this._isSearching = value; + this.needsDraw = true; + } + }, + + handleSearchFormSubmit: { + value: function(evt) { + evt.preventDefault(); + this.performSearch(); + } + }, + + performSearch: { + value: function() { + if (this.isSearching) { + console.log("already searching!") + return; + } + + this.isSearching = true; + this.searchResults = null; + + var base = "http://picasaweb.google.com/data/feed/base/all?visibility=public&alt=json&max-results=" + this.resultCount + "&kind=photo&prettyprint=true&imgmax=720u&q=" + // var base = "http://picasaweb.google.com/data/feed/base/featured?visibility=public&alt=json&max-results=" + this.resultCount + "&kind=photo&prettyprint=true" + var url = base + this.queryParameter; + + var req = new XMLHttpRequest(); + req.identifier = "searchRequest"; + req.open("GET", url); + req.addEventListener("load", this, false); + req.addEventListener("error", this, false); + req.send(); + + } + }, + + handleSearchRequestLoad: { + value: function(evt) { + var response = JSON.parse(evt.target.responseText); + + this.searchResults = response.feed.entry; + /*if (this.flow.length === 0) { + this.flow.length = this.initialPosition; + } + if (previousOrigin === 0) { + this.flow.origin = this.initialPosition; + } else { + this.flow.origin = previousOrigin; + }*/ + this.isSearching = false; + } + }, + + handleSearchRequestError: { + value: function(evt) { + console.error("handleSearchRequestError", evt); + this.isSearching = false; + } + }, + + searchResults: { + enumerable: false, + value: null + }, + + draw: { + value: function() { + + if (this.isSearching) { + this.element.classList.add("searching"); + } else { + this.element.classList.remove("searching"); + } + + } + } + +}); diff --git a/node_modules/montage-google/youtube-channel.reel/youtube-channel.html b/node_modules/montage-google/youtube-channel.reel/youtube-channel.html new file mode 100644 index 00000000..99a8a698 --- /dev/null +++ b/node_modules/montage-google/youtube-channel.reel/youtube-channel.html @@ -0,0 +1,126 @@ + + + + + + + + + +

+ + + + + +

+ + diff --git a/node_modules/montage-google/youtube-channel.reel/youtube-channel.js b/node_modules/montage-google/youtube-channel.reel/youtube-channel.js new file mode 100644 index 00000000..88f87f3c --- /dev/null +++ b/node_modules/montage-google/youtube-channel.reel/youtube-channel.js @@ -0,0 +1,242 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +/*global require,exports*/ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component, + Uuid = require("montage/core/Uuid"); + +var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { + + _userRe: { + enumerable: false, + value: /youtube.com\/(user\/)?([a-z0-9]+)/i + }, + + imageA: { + value: null + }, + imageB: { + value: null + }, + imageC: { + value: null + }, + _popupElement: { + enumerable: false, + value: null + }, + + _shouldShowPopup: { + enumerable: false, + value: false + }, + + _channelUrl: { + enumerable: false, + value: null + }, + channelUrl: { + depends: ["channel"], + get: function() { + return this._channelUrl; + }, + set: function(value, fromChannel) { + if (this._channelUrl !== value) { + this._channelUrl = value; + + // prevent infinite loop + if (!fromChannel) { + var match = this._userRe.exec(value); + if (match && match[2]) { + Object.getPropertyDescriptor(this, "channel").set.call(this, match[2], true); + } + } + } + } + }, + + _channel: { + enumerable: false, + value: null + }, + channel: { + get: function() { + return this._channel; + }, + set: function(value, fromUrl) { + if (this._channel !== value) { + this._channel = value; + + // prevent infinite loop + if (!fromUrl) { + Object.getPropertyDescriptor(this, "channelUrl").set.call(this, "http://www.youtube.com/user/" + value, true); + } + + this._loadChannel(); + } + } + }, + + _loadChannel: { + enumerable: false, + value: function() { + var self = this; + + var callbackName = "scriptCallback" + Uuid.generate().replace(/-/g, "_"); + + window[callbackName] = function(data) { + self.handleData(data); + delete window[callbackName]; + }; + + // create url + var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName; + + this._script = document.createElement("script"); + this._script.src = url; + this.needsDraw = true; + } + }, + + _script: { + enumerable: false, + value: null + }, + + prepareForDraw: { + value: function() { + this.imageA.element.addEventListener("click", this, false); + this.imageB.element.addEventListener("click", this, false); + this.imageC.element.addEventListener("click", this, false); + + this._positionPopup(); + } + }, + + draw: { + value: function() { + if (this._script) { + this._element.appendChild(this._script); + this._script = null; + } + + if (this._entries) { + this.imageA.src = this._entries[0]["media$group"]["media$thumbnail"][0].url; + this.imageB.src = this._entries[1]["media$group"]["media$thumbnail"][0].url; + this.imageC.src = this._entries[2]["media$group"]["media$thumbnail"][0].url; + } + + if (this._videoId) { + this.player.videoId = this._videoId; + this._videoId = null; + } + + if (this._shouldShowPopup) { + this._positionPopup(); + + // Fix for Canary where the thumbnail in the video doesn't + // change until the CSS transition has finished, so wait for + // it to change before starting the animation + var self = this; + window.setTimeout(function() { + self._element.classList.add("show"); + self._popupElement.classList.add("show"); + }, 50); + if (window.Touch) { + document.addEventListener('touchstart', this, false); + } else { + document.addEventListener('mousedown', this, false); + document.addEventListener('keyup', this, false); + } + } else { + this._element.classList.remove("show"); + this._popupElement.classList.remove("show"); + this.player.stop(); + + if (window.Touch) { + document.removeEventListener('touchstart', this); + } else { + document.removeEventListener('mousedown', this); + document.removeEventListener('keyup', this); + } + + } + + } + }, + + _entries: { + enumerable: false, + value: null + }, + + _positionPopup: { + value: function() { + + var viewport = this._element.parentNode; + var viewportStyle = window.getComputedStyle(viewport); + + this.player.width = viewportStyle.width; + this.player.height = viewportStyle.height; + + // // Chrome + // viewport.insertBefore(this._popupElement, viewport.firstChild); + // this._popupElement.style.top = viewport.offsetTop; + // this._popupElement.style.left = viewport.offsetLeft; + + // Canary + this._popupElement.style.top = - (this._element.offsetTop || 0) + 'px'; + this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px'; + } + }, + + handleClick: { + value: function(event) { + switch(event.target.dataset.montageId) { + case "imageA": + this._videoId = this._entries[0]["media$group"]["yt$videoid"]["$t"]; + break; + case "imageB": + this._videoId = this._entries[1]["media$group"]["yt$videoid"]["$t"]; + break; + case "imageC": + this._videoId = this._entries[2]["media$group"]["yt$videoid"]["$t"]; + break; + } + this._shouldShowPopup = true; + this.needsDraw = true; + } + }, + + handleTouchStart: { + value: function(event) { + this._shouldShowPopup = false; + this.needsDraw = true; + } + }, + handleMousedown: { + value: function(event) { + if (event.button === 0) { + this._shouldShowPopup = false; + this.needsDraw = true; + } + } + }, + handleKeyup: { + value: function(event) { + this._shouldShowPopup = false; + this.needsDraw = true; + } + }, + + handleData: { + value: function(data) { + this._entries = data.feed.entry || []; + this.needsDraw = true; + } + } + +}); \ No newline at end of file diff --git a/node_modules/montage-google/youtube-player.reel/youtube-player.html b/node_modules/montage-google/youtube-player.reel/youtube-player.html new file mode 100644 index 00000000..d51cecdb --- /dev/null +++ b/node_modules/montage-google/youtube-player.reel/youtube-player.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + diff --git a/node_modules/montage-google/youtube-player.reel/youtube-player.js b/node_modules/montage-google/youtube-player.reel/youtube-player.js new file mode 100644 index 00000000..416ba76a --- /dev/null +++ b/node_modules/montage-google/youtube-player.reel/youtube-player.js @@ -0,0 +1,216 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +/*global require,exports,YT */ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component; + +var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, { + + // Stores a queue of function calls to make on the player in the draw + // function + _playerQueue: { + enumerable: false, + value: [] + }, + + _ready: { + enumerable: false, + value: false + }, + + _player: { + enumerable: false, + value: null + }, + player: { + get: function() { + return this._player; + }, + set: function(value) { + if (this._player !== value) { + this._player = value; + } + } + }, + + _width: { + enumerable: false, + value: 640 + }, + width: { + get: function() { + return this._width; + }, + set: function(value) { + if (this._width !== value) { + this._width = value; + this.needsDraw = true; + } + } + }, + _height: { + enumerable: false, + value: 385 + }, + height: { + get: function() { + return this._height; + }, + set: function(value) { + if (this._height !== value) { + this._height = value; + this.needsDraw = true; + } + } + }, + + _autoplay: { + enumerable: false, + value: false + }, + autoplay: { + get: function() { + return this._autoplay; + }, + set: function(value) { + if (this._autoplay !== value) { + this._autoplay = value; + this.needsDraw = true; + } + } + }, + + _videoId: { + enumerable: false, + value: null + }, + videoId: { + get: function() { + return this._videoId; + }, + set: function(value) { + if (this._videoId !== value) { + // TODO handle URLs as well + this._videoId = value; + + // If the video isn't in the playlist, clear the playlist, + if (this._playlist && this._playlist.indexOf(value) === -1) { + this._playlist = null; + } + // TODO if the video is in the playlist use playVideoAt + + if (this._autoplay) { + this._playerQueue.push(["loadVideoById", value]); + } else { + this._playerQueue.push(["cueVideoById", value]); + } + this.needsDraw = true; + } + } + }, + + _playlist: { + enumerable: false, + value: null + }, + playlist: { + get: function() { + return this._playlist; + }, + set: function(value) { + if (this._playlist !== value) { + this._playlist = value; + + if (this._autoplay) { + this._playerQueue.push(["loadPlaylist", value]); + } else { + this._playerQueue.push(["cuePlaylist", value]); + } + this.needsDraw = true; + } + } + }, + + play: { + value: function() { + this._playerQueue.push("playVideo"); + this.needsDraw = true; + } + }, + pause: { + value: function() { + this._playerQueue.push("pauseVideo"); + this.needsDraw = true; + } + }, + stop: { + value: function() { + this._playerQueue.push("stopVideo"); + this.needsDraw = true; + } + }, + + prepareForDraw: { + value: function() { + // Create the callback if it doesn't exist, and make it dispatch + // an event on the document instead + if (!window.onYouTubePlayerAPIReady) { + window.onYouTubePlayerAPIReady = function() { + var event = document.createEvent("CustomEvent"); + event.initEvent("youtubePlayerApiReady", true, true); + document.dispatchEvent(event); + }; + } + + this._element.src += (this._videoId ? "/" + this._videoId : "") + "?enablejsapi=1"; + + if (typeof YT !== "undefined" && YT.Player) { + this.handleYoutubePlayerApiReady(); + } else { + document.addEventListener("youtubePlayerApiReady", this, false); + } + } + }, + + handleYoutubePlayerApiReady: { + value: function(event) { + document.removeEventListener("youtubePlayerApiReady", this); + + var self = this; + this.player = new YT.Player(this._element, { events: { + onReady: function(event) { + self._ready = true; + self.needsDraw = true; + } + }}); + } + }, + + draw: { + value: function() { + if (!this._ready) { + return; + } + + for (var i = 0, len = this._playerQueue.length; i < len; i++) { + var fnName, args; + if (typeof this._playerQueue[i] === "string") { + fnName = this._playerQueue[i]; + args = []; + } else { + fnName = this._playerQueue[i].shift(); + args = this._playerQueue[i]; + } + + this._player[fnName].apply(this._player, args); + } + this._playerQueue.length = 0; + + this._element.width = this._width; + this._element.height = this._height; + } + } +}); \ No newline at end of file -- cgit v1.2.3