On my spotify app, if I click on player to play track, the track is highlighted in the list-view. But when I click on the next button of spotify the next track in the list-view is not highlighted, even when it is being played...the highlighting is totally lost. And I do not know how to do it. It works if I just reload the app or I go on next tab. Can anyone guide me as how to fix this? Thanks in advance :-)
models.Track.fromURI(track, function(track) {
models.Album.fromURI(track.album.uri, function(album) {
var pl = new views.Player();
pl.context = album;
document.getElementById('imag').appendChild ( pl.node );
var tracklist = new views.List(album);
tracklist.node.classList.add("sp-list");
$("#song1").append(tracklist.node);
Your code should work without any problems, since you are using the same context for both
Player and List views. In fact, I have tested it and it works for me (note that I have added a couple of missing lines):
var sp = getSpotifyApi(),
models = sp.require("$api/models"),
views = sp.require("$api/views"),
track = "spotify:track:6G0RXhQJGDnjgUdbQfBZRk";
models.Track.fromURI(track, function(track) {
models.Album.fromURI(track.album.uri, function(album) {
var pl = new views.Player();
pl.context = album;
document.getElementById("imag").appendChild(pl.node);
var tracklist = new views.List(album);
tracklist.node.classList.add("sp-list");
document.getElementById("song1").appendChild(tracklist.node);
});
});
Related
I have been going over the examples and demos of Famo.us, in particular the menus. In the examples such as taasky, timbre etc. the side menu is made up of MenuItemViews. Each MenuItemView comprises of a background, icon and title - each one a surface.
In order to make each menu item 'clickable' do I have to add an .click to each of the 3 surfaces that make up the MenuItemView and emit an event handler?
Or is there an easier way to make each menu item 'clickable'?
Thanks for your help in advance :)
Yes, what you want to do is pipe your surface events to the Views _eventOutput handler. This way the click event only needs to be defined on the view itself.
In this example there are two surfaces that each pipe all events to _eventOutput of view. When we click either surface, the views click event is triggered
Hope this helps!
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var View = require('famous/core/View');
var context = Engine.createContext();
var view = new View();
var surface1 = new Surface({
size:[400,400],
properties:{
backgroundColor:'green'
}
});
surface1.pipe(view._eventOutput);
view.add(surface1);
var surface2 = new Surface({
size:[200,200],
properties:{
backgroundColor:'red'
}
});
surface2.pipe(view._eventOutput);
view.add(surface2);
view.on('click',function(evt){
console.log("View Clicked!");
})
context.add(view);
I'm building an app that is generating a temporary playlist of tracks. I am then attempting to create a "Start Radio" button for that temporary playlist.
The button is generated, but when I click it, the screen changes to radio, but doesn't play nor does it load any radio station.
My guess is that this is not supported, because if I create a regular playlist and do it, it does play the radio...
But I cannot find any information in the API that confirms or deny my guess.
Does any one know for certain if this is not supported?
I would really rather do this from a temp playlist than have to maintain a real one...
You are right. The Start Radio Button doesn't support temporary playlists. And, unfortunately, the documentation doesn't mention this.
It seems that the track data attached to the temporary playlist can't be passed to the Radio app, so the Radio app loads with no context information.
The only way to achieve this is, as you said, creating a persistent playlist and create a radio button for that. In order to not create a new playlist every time, you can also try to find the playlist you created previously in the user's library.
See this code snippet:
require(['$api/models', '$api/library#Library', '$views/buttons#StartRadioButton'],
function(models, Library, StartRadioButton) {
// create a temporary playlist with some tracks
var playlistName = 'Some name';
models.Playlist.create(playlistName).done(function(playlist) {
playlist.load('tracks').done(function(loadedPlaylist) {
var track1 = models.Track.fromURI('spotify:track:5EB60KIbYgL8nWrHoYbfv4');
var track2 = models.Track.fromURI('spotify:track:7GPuYTiBA5BloBnFaQBjbw');
loadedPlaylist.tracks.add(track1);
loadedPlaylist.tracks.add(track2);
// now we can add a button to start a radio base on the newly
// created playlist
var button = StartRadioButton.forPlaylist(loadedPlaylist);
document.body.appendChild(button.node);
// bonus: we can also search for the playlist in the user's library
// so we don't have to create a new one all the time.
// this will work as long as we can find the playlist we created by name
// (i.e. it hasn't been renamed).
var currentLibrary = Library.forCurrentUser();
console.log(currentLibrary);
currentLibrary.playlists.snapshot().done(function(p) {
for (var i = 0; i < p.length; i++) {
var playlistFromLibrary = p.get(i);
if (playlistFromLibrary && playlistFromLibrary.name == playlistName) {
var button = StartRadioButton.forPlaylist(playlistFromLibrary);
document.body.appendChild(button.node);
}
}
});
});
});
});
Is it possible to scroll to the top of the page when changing the argument of the spotify url?
I use this javascript function
$(document).ready(function() {
sp = getSpotifyApi(1);
var models = sp.require('sp://import/scripts/api/models');
tabs();
models.application.observe(models.EVENT.ARGUMENTSCHANGED, tabs);
function tabs() {
var args = models.application.arguments;
console.log(args[0]);
$('.section').hide();
$('#'+args[0]).show();
}
});
Every time I switch to another section I want to scroll to the top of the section. Is this possible? Similar to anchors like #top.
Thanks
Yes, use:
document.location = '#' + args[0];
And have different sections with same ids as the tabs.
is it possible, from an spotify application, to hide or overwrite the "now playing" pannel (the cover and artist name/track name of the playing track) ?
Thx, for your help.
I try to modify the Album object or the Track object provided to the player but it don't work :
models.Album.fromURI("spotify:album:3ty039P7JO7bTcWtWi1AP6", function(a) {
var player = new v.Player();
var track = a.get(0);
//a.artist = "TOTO";
//a.cover = "sp://import/img/placeholders/300-album.png";
//track.image = 'sp://import/img/placeholders/300-album.png';
track.name = "Test";
player.play(track,a);
});
This is not possible in the current API, mainly because we don't want people overwriting now playing information with adverts and stuff.
I have a grid filled with ajax, the user enters new data and call back to the ajax method that fills the grid, the problem I have is that the grid are duplicate data, I have tried before upgrading the grid to fill with a empty strore but does not work,
var gridColeccion = dijit.byId("colectionGrid");
var dummy = {items: []};
var newEventStoreColeccion = new dojo.data.ItemFileReadStore({clearOnClose:true,data:dummy});
newEventStoreColeccion.fetch();
gridColeccion.setStore(newEventStoreColeccion);
gridColeccion._refresh();
folderConsult(token); // This metod fill the grid again
// This is part of code in folderConsult;
var datosColeccion = {
items: itemsColeccion
};
var gridColecccion = dijit.byId("colectionGrid");
nuevasColecciones= new dojo.data.ItemFileReadStore({clearOnClose:true,data: datosColeccion});
nuevasColecciones.fetch();
gridColecccion.setStore(nuevasColecciones);
gridColecccion._refresh();
I hope someone can help me, THX.
while(grid.store._getItemsArray().length!=0)
{
grid.store.deleteItem(grid.store._getItemsArray()[0]);
}
grid.store.save();
Try using nuevasColecciones.close() instead of nuevasColecciones.fetch() and provide a url param instead of the data param. That should refresh the data in the store, and as long as you have already posted the new data, you will get all of the objects back