Skip to content

Commit

Permalink
Merge pull request #61 from pepf/master
Browse files Browse the repository at this point in the history 
Playlist privacy options
  • Loading branch information
@Rayman
Rayman committed Aug 9, 2014
2 parents 3d7f421 + da8c4f4 commit 1f26e29
Show file tree
Hide file tree
Showing 13 changed files with 252 additions and 88 deletions.
7 changes: 7 additions & 0 deletions client/lib/globalhelpers.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
<template name="userLink">
<a href="{{pathFor 'userProfile'}}">{{username this}}</a>
</template>

<!-- create circular user avatar from user object -->
<template name="circleAvatar">
<a href="{{pathFor 'userProfile'}}">
<div data-toggle="tooltip" title="{{this.username}}" class="avatar" style="background-image:url('{{avatarUrl this}}')"></div>
</a>
</template>
21 changes: 17 additions & 4 deletions client/lib/globalhelpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,21 @@ Handlebars.registerHelper('username', function(user){
}
});

Template.userProfile.avatarUrl = function() {
if(this.profile.avatar) {
return this.profile.avatar;
Handlebars.registerHelper('privacyIcon', function(playlist) {
var icon = "globe";
if(this.privacy == "viewonly") { icon = "eye-open"; }
if(this.privacy == "private") { icon = "lock"; }

return '<span class="glyphicon glyphicon-'+ icon +'"></span>';
});

Handlebars.registerHelper('avatarUrl', function(user) {
if(user.profile.avatar) {
return user.profile.avatar;
} else {
return "/img/avatar.jpg";
}
};
});

Handlebars.registerHelper('currentRoute', function() {
var currentRoute = Router.current();
Expand All @@ -49,3 +57,8 @@ Handlebars.registerHelper('currentRoute', function() {
Handlebars.registerHelper('sessionIs', function(p1, p2) {
return Session.get(p1) === p2;
});


Template.circleAvatar.rendered = function() {
$('div.avatar').tooltip();
}
10 changes: 10 additions & 0 deletions client/stylesheets/fusic.import.less
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
#playlistName:hover a#editToggle {
opacity:1;
}
a#editToggle {
font-size:0.5em;
opacity:0;
cursor:pointer;
transition: all 0.33s ease;
}

img.avatar {
background-color:@gray-lighter;
width:300px;
Expand Down
6 changes: 6 additions & 0 deletions client/views/playlist.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
div.inline {
display:inline-block;
}

.overlay-container {
position:relative;
}
Expand All @@ -22,6 +23,8 @@ div.inline {
padding: 4px;
}



.playlist-container:hover {
background-color: #eee;
}
Expand Down Expand Up @@ -59,6 +62,9 @@ li.youtube-result:hover {
background-color:#eee;
}




span[data-action*="play"] {
cursor:pointer;
}
Expand Down
157 changes: 89 additions & 68 deletions client/views/playlists.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<template name="playlists">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Newest playlists</h3>
</div>
<div class="panel-body">
{{#each playlists}}
{{> playlistsEntry}}
{{/each}}
</div>
</div>
<a href="{{pathFor 'allplaylists'}}">View all playlists</a>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Newest playlists</h3>
</div>
<div class="panel-body">
{{#each playlists}}
{{> playlistsEntry}}
{{/each}}
</div>
</div>
</div>
<div class="col-md-4">
<a href="{{pathFor 'allplaylists'}}" class="btn btn-info btn-lg" role="button">View all playlists</a>
</div>
<div class="col-md-4">
<h2><span class="glyphicon glyphicon-plus"></span> Or add a new one</h2>
{{> insertPlaylistForm}}
Expand All @@ -31,7 +35,25 @@ <h3 class="panel-title">All playlists</h3>


<template name="insertPlaylistForm">
{{> quickForm collection="Playlists" id="insertPlaylistForm" type="insert" fields="title,cover,tags,description"}}
{{#autoForm collection="Playlists" id="insertPlaylistForm" type="insert" }}
{{> afQuickField name="title"}}
{{> afQuickField name="cover"}}
{{> afQuickField name="tags" }}
{{> afFieldInput name="privacy" type="hidden"}}
<label class="control-label" for="privacy">Privacy Setting</label>
<div class="btn-group btn-group-md" id="privacyToggle">
<button data-action="public" data-toggle="tooltip" data-placement="bottom" title="Your playlist will be viewable and editable by everyone" type="button" class="btn btn-default {{#if sessionIs 'playlistPrivacy' 'public'}}active{{/if}}">
<span class="glyphicon glyphicon glyphicon-globe"></span> Public
</button>
<button data-action="viewonly" data-toggle="tooltip" data-placement="bottom" title="Only you can edit your playlist, the rest can view and listen" type="button" class="btn btn-default {{#if sessionIs 'playlistPrivacy' 'viewonly'}}active{{/if}}">
<span class="glyphicon glyphicon glyphicon-eye-open"></span> View only
</button>
<button data-action="private" data-toggle="tooltip" data-placement="bottom" title="This playlist will only be visible by you" type="button" class="btn btn-default {{#if sessionIs 'playlistPrivacy' 'private'}}active{{/if}}">
<span class="glyphicon glyphicon-lock"></span> Private
</button>
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add!</button>
{{/autoForm}}
</template>

<template name="playlistsEntry">
Expand All @@ -47,10 +69,13 @@ <h3 class="panel-title">All playlists</h3>
<div class="col-md-4 hidden-xs">

<div class="edittoggle collapse-group">
<a href="" data-toggle="collapse">edit <span class="glyphicon glyphicon-edit"></span></a>
<div class="collapse in">
<div id="playlistInfo" class="collapse in">
<h1 id="playlistName">
<small>{{{privacyIcon this}}}</small>
&nbsp;{{title}}&nbsp;
<a id="editToggle" data-toggle="collapse"><span class="glyphicon glyphicon-edit"></span></a>
</h1>

<h1>{{title}}</h1>
{{#if description}}
<p class="lead">{{description}}</p>
{{/if}}
Expand All @@ -62,52 +87,44 @@ <h1>{{title}}</h1>

</div>

<div class="collapse">
<div id="updatePlaylistForm" class="collapse">
<a href="" data-toggle="collapse"><span class="glyphicon glyphicon-remove"></span></a>
{{> updatePlaylistForm}}
</div>

<br />

<div>
{{#if playing}}
<button class="btn btn-success" data-action="playlist-pause">
<span class="glyphicon glyphicon-pause"></span> Pause
</button>
{{else}}
<button class="btn btn-success" data-action="playlist-play">
<span class="glyphicon glyphicon-play"></span> Play
</button>
{{/if}}
{{#if following}}
<button class="btn" data-action="unfollow">
<span class="glyphicon glyphicon-minus"></span> Unfollow
<br />
</div>

<div>
{{#if playing}}
<button class="btn btn-success" data-action="playlist-pause">
<span class="glyphicon glyphicon-pause"></span> Pause
</button>
{{else}}
<button class="btn" data-action="follow">
<span class="glyphicon glyphicon-plus"></span> Follow
{{else}}
<button class="btn btn-success" data-action="playlist-play">
<span class="glyphicon glyphicon-play"></span> Play
</button>
{{/if}}
{{/if}}
{{#if following}}
<button class="btn" data-action="unfollow">
<span class="glyphicon glyphicon-minus"></span> Unfollow
</button>
{{else}}
<button class="btn" data-action="follow">
<span class="glyphicon glyphicon-plus"></span> Follow
</button>
{{/if}}
</div>

<div class="row">
<div class="col-md-9">
<h3>Followers</h3>
{{#each followers}}
{{>circleAvatar this}}
{{else}}
<p>None yet</p>
{{/each}}
</div>

<h3>Followers:</h3>
<ul>
{{#each followers}}
<li>
{{> userLink}}
</li>
{{else}}
<li>Nobody</li>
{{/each}}
</ul>

<h3>Currently playing:</h3>
<ul>
{{#each players}}
<li>
{{> userLink}}
</li>
{{/each}}
</ul>
</div>

<div class="panel panel-default">
Expand All @@ -127,16 +144,7 @@ <h3 class="panel-title">Stats</h3>
</div>

{{#if isOwner}}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Owner's panel</h3>
</div>
<div class="panel-body">
<p>You are the owner of this playlist, so you can view fancy settings</p>
<p><button data-action="show-settings" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-cog"></span>Important settings</button></p>
<p><button data-action="remove-playlist" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span>Delete playlist</button></p>
</div>
</div>
{{>ownerPanel}}
{{/if}}
</div>

Expand All @@ -147,7 +155,22 @@ <h3 class="panel-title">Owner's panel</h3>
</template>

<template name="updatePlaylistForm">
{{> quickForm collection="Playlists" doc=editingDoc id="updatePlaylistForm" type="update" fields="title,cover,tags,description"}}
{{> quickForm collection="Playlists" doc=editingDoc id="updatePlaylistForm" type="update" fields="title,cover,tags,description" buttonContent="Update"}}
</template>

<template name="ownerPanel">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Owner's panel</h3>
</div>
<div class="panel-body">
<p>You are the owner of this playlist, so you can view fancy settings</p>
<p><button data-action="show-settings" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-cog"></span>Important settings</button></p>
{{#afDeleteButton collection="Playlists" doc=editingDoc id="removeButton"}}
<span class="glyphicon glyphicon-trash"></span> Delete playlist
{{/afDeleteButton}}
</div>
</div>
</template>

<template name="contributionChart">
Expand Down Expand Up @@ -175,8 +198,6 @@ <h3 class="panel-title">Owner's panel</h3>
</div>
{{> searchResults}}
</div>


{{> songs}}
</template>

Expand Down
50 changes: 50 additions & 0 deletions client/views/playlists.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,48 @@
Template.insertPlaylistForm.rendered = function() {
Session.setDefault('playlistPrivacy','public');
this.find('[data-schema-key=privacy]').value = 'public';
$("button").tooltip();
AutoForm.hooks({
insertPlaylistForm: {
onSuccess: function(operation, result, template) {
Router.go('/playlist/'+result);
}
}
});
}

Template.insertPlaylistForm.events = {
'click #privacyToggle button' : function(e,template) {
var btn = e.currentTarget;
Session.set('playlistPrivacy',btn.getAttribute("data-action"));
template.find('[data-schema-key=privacy]').value = btn.getAttribute("data-action");
}
}

Template.playlistsEntry.events = {
'click .playlist-container' : function(e,template) {
Router.go('/playlist/'+this._id);
}
}


Template.playlist.rendered = function() {
AutoForm.hooks({
removeButton: { //on successful remove, go back to playlist page
onSuccess: function(operation, result, template) {
Router.go('playlists');
}
},
updatePlaylistForm: { //on successful edit, collapse back out
onSuccess: function(operation, result, template) {
$('#playlistInfo').collapse('show');
$('#updatePlaylistForm').collapse('hide');

}
}
});
}

Template.playlist.selected = function () {
return Session.equals("playing_song", this._id) ? "selected" : '';
};
Expand All @@ -17,6 +62,7 @@ Template.playlist.playing = function () {
return false;
}
};

Template.playlist.songCount = function() {
return this.songs ? this.songs.length : 0;
};
Expand Down Expand Up @@ -207,6 +253,10 @@ Template.updatePlaylistForm.editingDoc = function () {
return Playlists.findOne({_id: this._id});
};

Template.ownerPanel.editingDoc = function () {
return Playlists.findOne({_id: this._id});
};

// initialize active_tab
Session.set('active_tab', 'songs');

Expand Down
Loading

0 comments on commit 1f26e29

Please sign in to comment.