How to add album as playlist? - spotify

Im making a Spotify application. When you play a song, the application will show the album like this:
http://s17.postimage.org/votnl6epp/Schermafbeelding_2012_04_04_om_22_47_54.png
Ive read the Playlist documentation (https://developer.spotify.com/technologies/apps/docs/beta/c49e02a392.html), but I cant figure out how to subscribe on a album.
Can anyone help me?

How to subscribe to a playlist?
/* Instantiate the global sp object; include models & views */
var sp = getSpotifyApi(1);
var models = sp.require('sp://import/scripts/api/models');
var views = sp.require('sp://import/scripts/api/views');
$("#subscribe").click(function(playlist){
var playlist = models.Playlist.fromURI("spotify:user:spotify:playlist:3Yrvm5lBgnhzTYTXx2l55x");
playlist.subscribed = true;
playlist.observe(models.EVENT.CHANGE, function() {
console.log("Playlist is subscribed!");
});
});
The HTML input would be:
<input type="button" id="subscribe" value="Subscribe" />

You can't, you need to create a playlist from the album, here is how I proceed :
alb = m.Album.fromURI(uri, function(album) {
pl.name = album.name;
$.each(album.tracks,function(index,track){
pl.add(m.Track.fromURI(track.uri));
});
var player = new v.Player();
player.track = pl.get(0);
player.context = album;
var saveButton = "<button id='savePlaylist' class='add-playlist sp-button sp-icon' <span class='sp-plus'></span>Add as Playlist</button>";
var list = new v.List(album , function(track) {
return new v.Track(track, v.Track.FIELD.STAR | v.Track.FIELD.SHARE | v.Track.FIELD.NAME | v.Track.FIELD.DURATION);
});
$("xxx").live('click',function(e){
var myAwesomePlaylist = new m.Playlist(album.artist.name + " - " + pl.name);
$.each(pl.data.all(),function(i,track){
myAwesomePlaylist.add(track);
});
e.preventDefault();
});
Of course you have to proceed with the HTML part.
Hope it will help
Geraud

Related

Sending query parameter and input value to a method

looking for some help here please. So, I have a page that list the users from a group using the groupID as the parameter. Sometimes these list of users could be really long and I wanted to build in a search functionality to search the user(member) of the group.
I access the Workspace Directory API and method members.list like this:
const groupUsers = async function (groupid, from) {
var members = [];
var pageToken = '';
var newPageToken = '';
const admin = await authorizeDirectory();
const resp = await admin.members.list({
groupKey: groupid,
});
members = resp.data.members;
console.log(members);
// console.log(members);
// members = resp.data.members;
const total = members.length;
return { results: members.splice(from, 10), total };
};
I then pass the response back to an index.js file that handles it for rendering to a handlebars template. Inside this template I have form that allows the user to enter the email address so that I can use it to search for it directly from the members.get method
My code for that is:
<div class="searchWrapper">
<form action="/group" method="GET" class="searchBar">
<input type="text" name="searchBar" id="searchBar" placeholder="Enter the user's email ID"
value="{{this.term}}" />
<span class="search-button">
<a class="waves-effect waves-light btn-small" id="searchButton">FIND</a>
</span>
</form>
</div>
Could someone please help me understand how do I send the groupID and the value entered in the input search bar to the method, so that I can query the API. Would really appreciate the help.
My routes:
router.get('/group/:groupid', isUserAuthenticated, async (req, res) => {
const groupid = req.params.groupid;
const from = parseInt(req.query.from || 0, 10) || 0;
const members = await groupUsers(groupid, from);
const pages = [];
for (var i = 0; i < Math.ceil(members.total / 10); i++)
pages.push({ page: i * 10, label: i + 1 });
res.render('groups', {
members: members.results,
total: members.total,
groupid: groupid,
from: from,
pages: pages,
});
// res.send(`Group ID = ${req.params.groupid}`);
});

Cheerio itemprop attribute content selection

I am using Cheerio in nodejs to select text from a URL where an element contains the attribute itemprop="name".
At the moment I need to know the parent element in order to read the attribute and associated text. See below as an example.
However, what I would like to do is insert a wildcard for the Element. eg. H2, so I can select any attribute with name="itemprop". Is this possible?
var $ = cheerio.load(body);
var domElem = $("h2[itemprop = 'name']").get(0);
var content = $(domElem).text().trim();
ogTitle = content;
console.log(content);
It looks like you can do the following as a wilcard:
var $ = cheerio.load(body);
var domElem = $("*[itemprop = 'name']").get(0);
var content = $(domElem).text().trim();
ogTitle = content;
console.log(content);
The following also worked for me:
Html Code:
<a href="/someLine" itemscope="" itemprop="author" itemtype="http://schema.org/Person">
<span itemprop="name">Jane Author</span>
</a>
Used this to get Jane Author:
author = $("*[itemprop = 'author']").text();
// Jane Author

SharePoint 2013 Custom button to Delete a Page

I want to delete the the Page with custom button. I have searched the the whole but found nothing. I have tried to find the ID of Delete button from Ribbon. But this also does not work.
I found a link but it does not help me.
[1] :https://sharepoint.stackexchange.com/questions/19887/custom-delete-page-button
Anyone here know about the solution.
I am surprised that no one have answer the question. Then I go deeper in Sharepoint and find a Solution to delete the page with custom Button or link.
So i decided to share with you guys. May be someone in future need this. I have achieve this through Javascript.
function deletePage() {
var url = document.location.pathname;
var urls = url.split("/");
var newurl = urls[1].concat("/", urls[2], "/", urls[3], "/Pages/Forms/AllItems.aspx");
var context = SP.ClientContext.get_current();
var web = context.get_web();
var folder = web.getFolderByServerRelativeUrl(url);
var confirmDelete = confirm("Do you want to delete this news ??");
if (confirmDelete) {
folder.deleteObject();
}
//if (confirmDelete) {
// window.location = "/" + newurl;
//}
context.executeQueryAsync(
function () {
if (confirmDelete) {
window.location = "/" + newurl;
}
}
);
}
And Just call this function onclick.
<li><i class="fa fa-close"></i>Delete</li>
Well this is working perfect.
Thanks

Show Backbone Collection element in a Marionette region

I have a Backbone application running and working properly with requirejs. Now, I'm trying to make a migration to Marionette in order to have the code better organized.
I just want to show a model from a collection in a region, with two buttons in another region. I want to go to the next or previous model from that collection. And change its view on the model region.
But I don't know how to iterate over the collection and send its model to the view.
jsfiddle with some simplified code with this situation.
html:
<div class="player"></div>
<script id="layout-template" type="text/template">
<div class="modelView"></div>
<div class="controls"></div>
</script>
<script id="model-region" type="text/template">
<%=name%>
</script>
<script id="control-region" type="text/template">
<button id="prev">Prev</button>
<button id="next">Next</button>
</script>
If I understand your question, you are trying to coordinate events between two views on the same layout. In this case I would recommend setting up a Controller.
Then you can register view triggers for on your controls view:
ControlsView = Backbone.Marionette.ItemView.extend({
// ...
triggers: {
"click #previous": "control:previous",
"click #next": "control:next"
}
});
An then in your controller you would instantiate your views and setup a handler for the controlView triggers to update the modelView.
var Router = Marionette.AppRouter.extend({
appRoutes: {
"/": "start",
"/:index" : "showModel"
},
});
var Controller = Marionette.Controller.extend({
initialize: function(){
var self = this;
this.controlsView = new ControlsView();
this.modelView = new MainView();
this.myCollection = new MyCollection();
this.myIndex = 0;
this.myCollection.fetch().then(function(){
self.myIndex = 0;
});
this._registerTriggers();
},
start: function(){
this.controlLayout.show(this.controlView);
this.showModel();
},
showModel: function(index){
index = index || this.index;
this.modelView.model = myCollection.at(this.index);
this.modelLayout.show(this.modelView);
},
showNext: function(){
var max = this.myCollection.models.length;
this.index = max ? 1 : this.index + 1;
this.showModel();
},
showPrevious: function(){
var max = this.myCollection.models.length;
this.index = 0 ? max : this.index - 1;
this.showModel();
},
_registerTriggers: function(){
this.controlsView.on("control:next", this.showNext());
this.controlsView.on("control:previous", this.showPrevious());
}
}
var controller = new Controller();
var router = new Router({
controller: Mod.controller
});
controller.start();
Using this approach allows you to decouple your views and collection. This will make your code reusable (using the controls view in a different context as an example).
You are looking for CollectionView or CompositeView.
The CollectionView will loop through all of the models in the
specified collection, render each of them using a specified itemView,
then append the results of the item view's el to the collection view's
el.
A CompositeView extends from CollectionView to be used as a
composite view for scenarios where it should represent both a
branch and leaf in a tree structure, or for scenarios where a
collection needs to be rendered within a wrapper template.

Greasemonkey: Re-write all links based on param

I need alittle help with getting a script that will take param from the orginal link and re-write them into a new link. I guess it should be pretty easy but I'm a noob still when it comes to this.
Here is the orginal HTML code for 1 link. (should be replaced globaly on the page. image1.jpg, image2.jpg etc.)
<div align="center"><img src="/preview/image1.jpg" width="128" height="128" border="0" style="border: 0px black solid;" /></div>
This should be done global on all the links that contain the imagepath "/preview/"
Thanks to Brock Adams I kinda understand how to get the param values with this code but I still don't really get it how to re-write all the links in a page.
var searchableStr = document.URL + '&';
var value1 = searchableStr.match (/[\?\&]id=([^\&\#]+)[\&\#]/i) [1];
var value2 = searchableStr.match (/[\?\&]connect=([^\&\#]+)[\&\#]/i) [1];
and then rewrite the links with "newlink"
var domain = searchableStr.match (/\/\/([w\.]*[^\/]+)/i) [1];
var newlink = '//' + domain + '/' + value1 + '/data/' + value2 + '.ext';
If someone could be so nice to help me setup an example greasemonkey script I would be very greatful for it.
OK, This is a fairly common task and I don't see any previous, Stack Overflow questions like it -- at least in a 2 minute search.
So, here's a script that should do what you want, based on the information provided...
// ==UserScript==
// #name Site_X, image relinker.
// #namespace StackOverflow
// #description Rewrites the preview links to ???
// #include http://Site_X.com/*
// #include http://www.Site_X.com/*
// #include https://Site_X.com/*
// #include https://www.Site_X.com/*
// ==/UserScript==
function LocalMain () {
/*--- Get all the images that have /preview/ in their path.
*/
var aPreviewImages = document.evaluate (
"//img[contains (#src, '/preview/')]",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null
);
var iNumImages = aPreviewImages.snapshotLength;
GM_log (iNumImages + ' preview images found.');
/*--- Rewrite the parent links to our new specifications.
Note, all the target links are of the form:
<a href="/index.php?Submit=ok&seson=b1e4&connect=127.0.0.1&id=13033&name=on">
<img src="/preview/image1.jpg" width="128" height="128" border="0" style="border: 0px black solid;" />
</a>
The desired rewrite changes the link to this form:
<a href="{current page's domain}/{id-value}/data/{connect-value}.ext">
*/
for (var iLinkIdx=0; iLinkIdx < iNumImages; iLinkIdx++) {
var zThisImage = aPreviewImages.snapshotItem (iLinkIdx);
var zParentLink = zThisImage.parentNode;
//--- Get the key href parameters.
var sIdValue = sGetUrlParamValue (zParentLink, 'id');
if (!sIdValue) continue; //-- Oopsie, this link was a malformed.
var sConnectValue = sGetUrlParamValue (zParentLink, 'connect');
if (!sConnectValue) continue;
//--- Get the current page's domain. (Or just use a relative link.)
var sPageDomain = document.URL.match (/\/\/([w\.]*[^\/]+)/i) [1];
//--- Generate the desired link value.
var sDesiredLink = 'http://' + sPageDomain + '/' + sIdValue + '/data/' + sConnectValue + '.ext';
//--- Rewrite the target link.
zParentLink.href = sDesiredLink;
}
}
function sGetUrlParamValue (zTargLink, sParamName) {
var zRegEx = eval ('/[\?\&]' + sParamName + '=([^\&\#]+)[\&\#]/i');
var aMatch = (zTargLink.href + '&').match (zRegEx);
if (aMatch)
return decodeURI (aMatch[1]);
else
return null;
}
window.addEventListener ("load", LocalMain, false);

Resources