I'm trying to create a custom view for a spotify playlist. right now I create a playlist view in my app using the following:
var playlist = models.Playlist.fromURI(myPlaylist);
var playerView = new views.Player();
playerView.track = playlist.get(0);
playerView.context = playlist;
var cover = playlist.get(0).data.album.cover;
$('#grid').append(playerView.node);
The default spotify playlist view has the album compilation for the art, and clicking on the playlist also provides direct access to the playlist. I'd like to change this so that I can set the playlist art to the cover variable above (or other custom image), and restrict the hyperink so that it doesn't access the playlist but only initiates play/pause.
I tried to edit the node innerHTML directly but then the playlist doesn't actually begin playing either. Is there an easy way to either edit the default spotify view or is there available sample code for creating a custom view?
If it's just in the app itself, you can override CSS and HTML of the player. Here is how I did :
First in the CSS :
.sp-image-loaded { opacity: 0; }
In the HTML :
player.node.firstChild.style.backgroundImage = "url(myimage.jpg)";
Hope, it's working for you.
Related
I have been trying to load some PDFS that will show inside a Bootstrap accordion. The problem is that they load in a lot of different ways depending on the browser. I've been trying iframe and object html tags with different results and i have a huge flow in Safari where the accordion functionality breaks completely when i embed a PDF inside a panel.
So i guess my question is: Is there any sort of standard regarding crossbrowsing in order to make embeded PDF'S work in Chrome, Safari, IE11 and Firefox ?
Since i need this to work on mobile the situation is even worst. Some advice will be really appreciated.
Create a canvas element with the class "panel-body" and give it an id of your choosing. Then add the following code to your document ready event.
PDFJS.getDocument('YOURPDF.pdf').then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('pdfOne'); // The id of your canvas
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
That will get the first page rendered. You'll need to create buttons to let the user navigate through the document but it should be easy enough to get that working based on what I've provided and the samples.
I was wondering if someone had already tried to make his own simple DASH player(and maybe has some examples/source codes) but without using dash.js repository on GITHUB , and if possible has any insights and tips on how to start with the creation/writing process?
Take a look at Building a simple MPEG-DASH streaming player:
Like described on this site following this steps should give you an idea:
Define an HTML5 video element in the HTML section of a page.
Create a MediaSource object in JavaScript.
Create a virtual URL using createObjectURL with the MediaSource object as the source.
Assign the virtual URL to the video element's src property.
Create a SourceBuffer using addSourceBuffer, with the mime type of the video you're adding.
Get the video initialization segment from the media file online and add it to the SourceBuffer with appendBuffer.
Get the segments of video data from the media file, append them to the SourceBuffer with appendBuffer.
Call the play method on the video element.
Repeat step 7 until done.
Clean up.
I'm using the default playlist object from the JS-Spotify library and constructing a playlist.
Then I use this Code:
var playlistList = new views.List(pl);
playlistList.node.classList.add('sp-light');
$(".favAlbums").append(playlistList.node);
But for the first time when I load the page with this view the tracks don't show in the playlist DIV. The playlist DIV itself does. What could cause that? (I'm using exactly the same code at a different place where it works just perfectly)
Update:/
It seems to be a rendering issue because when I resize the Spotify application the track entries appear. But before resizing the DIV is empty in the inspector.
I am building a Spotify App with four tab pages. The content of all tabs are loaded on initial load of the app. Each tab contain one or more playlists that are being populated with data from 3rd party web apis that are resolved into spotify tracks.
The selected tab works fine. the playlist show up a expected. The problem is with tabs that are initially hidden but later selected. Here the playlist looks like this when selected:
not fully rendered playlist
Looking in the Inspector I can see that the content has not yet rendered:
<div class="sp-list sp-light" tabindex="0">
<div style="height: 100px; ">
</div>
</div>
When I do a resize of the Spotify desktop app, the playlist is finally rendered:
rendered playlist after resize
To populate the playlist I use the 'standard' spotify models and views:
var playlist = new views.List(tempPlaylist);
//where tempPlaylist is a new models.Playlist();
//that has been populated with tempPlaylist.add(search.tracks[0].uri);
playerPlaylistDiv.append(playlist.node);
I am only seing this issue when using tabs. When displaying all content on one long page all playlists are fully rendered. I wonder if it has to do with timing: that I am hiding content that has not yet fully rendered? Any thoughts much appreciated.
I handle tab changes this way:
/* Handle URI arguments */
models.application.observe(models.EVENT.ARGUMENTSCHANGED, tabs);
/* Handle tab changes */
function tabs() {
var args = models.application.arguments;
// Hide all sections
$('section').hide();
// Show current section
$("#" + args[0]).show();
}
FYI I am using the Spotify preview 0.8.10.3.
I am not sure this is the same thing, but I ran into similar issues trying to create tracklistings from playlist-uris on the fly; also couldn't track it down any closer (the containing DOM was certainly rendered and ready); and it only happened on certain playlists, never e.g. on albums.
I was able to circumentvent this problem by "cloning" playlist - obviously there's a "performance" hit ...
// assuming uri is the playlist's URI
models.Playlist.fromURI( uri, function(originalPlaylist) {
var tempPlaylist = new model.Playlist();
$.each(originalPlaylist.tracks, function(t) { tempPlaylist.add(t); });
var tracklist = new views.List(tempPlaylist);
// etc...
}
I am not sure what's on here, but maybe that helps you along :)
PS. Also - make sure you have a doctype-declaration in index.html (), the spotify client does some weird things if you don't.
The solution I've found is this:
I arrowed it down to being an issue with showing/hiding the content since showing the full content without tabs never causes issues. So instead of using .show()/.hide() I now hide and show the content by setting the height of the sections to 100%/0:
// Hide all other sections
$("section#" + args).siblings().height('0');
// Show current section
$("section#" + args).height('100%');
Not sure why this works, but it does (for me at least).
I had the same problem (see Spotify List objects created from localStorage data come up blank) and fixed it by doing the hide()/show() of divs before any processing. Previously I was constructing the playlist and then show()ing the div after which led to a blank list.
I think I've actually managed to solve this and I think it's bulletproof.
Basically I was trying to solve this by trying to convince the API that it needed to redraw the playlist by hiding things/scrolling things/moving things which worked occasionally but never consistently. It never occurred to me to change the playlist itself. Or at least make the API think the playlist has changed.
You can do so by firing an event on the Playlist object.
var models = sp.require('$api/models');
...
// playlist is your Playlist object. Usually retrieved from models.Playlist.fromURI
playlist.notify(models.EVENT.CHANGE, playlist);
These are just standard Spotify functions and the list updates because it thinks something has changed in the playlist. Hope this helps someone!
How I do use the loading_indicator.png provided in the design resources folder to make it act like an ajax loader?
This is how I display a loading indicator when starting my app, taken from the 'home' application (What's New). In your index.html:
<div class="loading">
<div class="throbber"><div></div></div>
</div>
In you app.css:
#import url("sp://import/css/eve.css");
adam.css being the dark Spotify theme and eve.css the light. Then, when your application is finished loading, just remove the element. You can do it with the dom methods in the spotify dom.js. In your app.js:
var dom = sp.require('sp://import/scripts/dom');
var loadingEl = dom.queryOne('.loading');
dom.destroy(loadingEl);
I don't know if the dom.js will be in the official API or not. Otherwise you can remove it any other way (standard dom methods, other js libraries you're using, etc):
var loadingEl = document.querySelector('.loading');
loadingEl.parentNode.removeChild(loadingEl);
Note that the above example does not necessarily use the loading_indicator.png but whatever images that are used by the adam.css and eve.css themes.
If you wan't to use the loader as a normal ajax loading indicator inside your app, then all the normal rules of web apps apply. Display loader when initiating ajax call, hide it in completed-callback, position it with css.
I realize this is an old topic, but with the 1.X API there is an easier way to do this by using the Throbber class which allows you to instantiate and hide fairly simply via JS.
var tracks = document.getElementById('tracks');
var throbber = Throbber.forElement(tracks);
// (wait for tracks to load and render)
throbber.hide();
Just make sure to include the Throbber class at the beginning of your JS:
require([
'$views/throbber#Throbber'
], function (Throbber) {