Skip to content

Commit 15470f3

Browse files
haimhmhaimhm
committed
Add playlist
1 parent 5b6a2d5 commit 15470f3

File tree

7 files changed

+296
-143
lines changed

7 files changed

+296
-143
lines changed

‎.idea/finaltone.iml

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/libraries/meteor_packages_auto_import_browser.xml

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/workspace.xml

Lines changed: 213 additions & 112 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/main.css

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -291,12 +291,17 @@ a:active {color:#000;} /* selected link */
291291
0 0 10px 78px rgba(0,0,0,0.5) inset;
292292
}
293293
.truncate {
294-
max-width: 300px;
294+
max-width: 325px;
295+
white-space: nowrap;
296+
overflow: hidden;
297+
text-overflow: ellipsis;
298+
}
299+
.lg-truncate{
300+
max-width: 850px;
295301
white-space: nowrap;
296302
overflow: hidden;
297303
text-overflow: ellipsis;
298304
}
299-
300305
.centered {
301306
text-align: center;
302307
vertical-align: middle;

‎client/main.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,24 +46,34 @@ <h1>user blabla ({{name}})</h1>
4646
<a href="/" style="position: absolute; right: 50px; top: 30px;" class="myButton">Back To The Portal</a>
4747
</div>
4848

49-
<a style="position: absolute; top: 280px; left: 30%; font-size: 30px; text-align: center" >
49+
<a class="lg-truncate" style="position: absolute; top: 280px; left: 25%; font-size: 30px; text-align: center" >
5050
{{current_user.username}} is now Playing: <br/> <img src="note.png" align="middle" width="40px" height="40px" style="position: relative; top: -5px"> {{current_user.song_name}}</a>
5151
<br/>
5252

5353
{{#if check_current_user }}
54-
<div style="position: relative;top: 380px; left:5%; display: inline-block">
54+
<div style="position: relative;top: 380px; left:1%; display: inline-block">
5555
<iframe id="player" type="text/html" width="492" height="300"
5656
src="http://www.youtube.com/embed/{{current_user.song_id}}?enablejsapi=1&origin=http://example.com&autoplay=1"
5757
frameborder="0"></iframe>
5858

59-
<div style="position: relative; top: 0px; left:5% ;display: inline-block;overflow: auto;height: 300px;">
60-
<div id="buttons" style="width: 500px">
61-
<input id="query" value='' type="text" style="width:300px; margin-left: 10%"/>
59+
<div style="position: relative; top: 0px; left:1%;display: inline-block;overflow-y: auto;height: 300px;overflow-x: auto; width:555px">
60+
<div id="buttons" style="width: 400px">
61+
<input id="query" value='' type="text" style="width:250px;"/>
6262
<button id="search-button">Search</button>
6363
</div>
64-
<div id="search-container" style="position: absolute; top: 25px; left:10%;width: 600px; ;">
64+
<div id="search-container" style="position: absolute; top: 25px; width: 538px; ;">
6565
</div>
6666
</div>
67+
<div style="position: relative; top: 0px; left:2%;display: inline-block">
68+
<h3>My Playlist:</h3>
69+
<ul style="display: inline-block;overflow-y: auto;height: 300px;overflow-x: auto; width:355px">
70+
{{#each get_playlist}}
71+
<li class="truncate">{{song_name}}
72+
<img class="remove_from_playlist" src="remove.png" style="width: 16px; float:right; cursor: pointer" song_name="{{song_name}}" song_id="{{song_id}}"/>
73+
</li>
74+
{{/each}}
75+
</ul>
76+
</div>
6777
</div>
6878
{{else}}
6979
<div style="position: relative; top: 60px; left:8% ;display: inline-block">
@@ -72,7 +82,7 @@ <h1>user blabla ({{name}})</h1>
7282
src="http://www.youtube.com/embed/{{current_user.song_id}}?enablejsapi=1&origin=http://example.com&autoplay=1"
7383
frameborder="0"></iframe>
7484
</div>
75-
<h1>Love {{current_user.username}}'s music? Show him some love!</h1>
85+
<h1>Love {{current_user.username}}'s music? Show some love!</h1>
7686
<img class="like" src="empty_heart.png" style="height: 50px; cursor: pointer;position: relative;top: 17px;"/>
7787
</div>
7888
{{/if}}
@@ -95,7 +105,7 @@ <h1>Moti</h1>
95105
<div id="disc"></div>
96106
</div>
97107
</div>
98-
<div class = "card" style="display: inline-block; position: relative;top: -80px">
108+
<div class = "card" style="display: inline-block; position: relative;top: -80px; width:350px">
99109
<h2 style="color: black;font-size: xx-large; font-family: cursive;">{{username}}</h2>
100110
<h3 class="truncate" style="color:#f5799a; font-family: cursive; font-size: 20px;">{{song_name}}</h3>
101111
</div>

‎client/routes.js

Lines changed: 54 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ Template.user_page.onRendered(function () {
6363

6464
Template.user_page.helpers({
6565
current_user:function () {
66-
route = FlowRouter.current();
66+
const route = FlowRouter.current();
6767
return Meteor.users.findOne({_id: route.params._id});
6868
},
6969
get_user_name(id) {
@@ -77,6 +77,10 @@ Template.user_page.helpers({
7777
check_current_user(){
7878
return Meteor.userId() == Template.instance().data.userId;
7979
},
80+
get_playlist(){
81+
const route = FlowRouter.current();
82+
return Meteor.users.findOne({_id: route.params._id}).playlist;
83+
},
8084
init(){
8185
gapi.client.setApiKey('AIzaSyBDDItQMbwlcF6q2bcZKKOyoISQxuhUk4Q');
8286
gapi.client.load('youtube', 'v3', function(){
@@ -108,34 +112,57 @@ Template.user_page.events({
108112
part: 'snippet',
109113
maxResults: 5
110114
});
111-
112115
request.execute(function(response) {
113-
114-
// var str = JSON.stringify(response.result);
115-
// Meteor.users.update({ _id: Meteor.userId() }, {
116-
// $set:{
117-
// song_id: response.items[0].id.videoId,
118-
// song_name: response.items[0].snippet.title,
119-
// }
120-
// });
121116
var options_str = '<li></li>';
122117
response.items.forEach(function(item){
123-
options_str += '<li style="cursor: pointer" class="song_li" song_id="'+item.id.videoId+'" song_name="'+item.snippet.title+'">' +
124-
'<div style="display: inline-block"><img src="'+item.snippet.thumbnails.default.url+'"/></div>' +
125-
'<div style="display: inline-block; position: relative;top: -40px;font-size:large; padding: 10px">' + item.snippet.title + '</div></li>';
118+
options_str +=
119+
'<li style="class="song_li" song_id="'+item.id.videoId+'" song_name="'+item.snippet.title+'">' +
120+
'<div style="display: inline-block">' +
121+
'<img src="'+item.snippet.thumbnails.default.url+'"/>' +
122+
'</div>' +
123+
'<div style="display: inline-block; position: relative;top: -40px; font-size:large; padding: 10px;max-width: 325px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">' +
124+
item.snippet.title +
125+
'</div>' +
126+
'<br/>' +
127+
'<button class="add_to_playlist">Add to playlist</button>&nbsp;' +
128+
'<button class="play">Play</button>' +
129+
'</li>';
126130
});
127-
128131
$('#search-container').html('<br/><ul>' + options_str + '</ul>');
129132
});
130133
},
131-
'click .song_li' (){
134+
'click .play' (){
132135
Meteor.users.update({ _id: Meteor.userId() }, {
133136
$set:{
134137
song_id: $(event.target).parent('li').attr('song_id'),
135138
song_name: $(event.target).parent('li').attr('song_name'),
136139
}
137140
});
138141
},
142+
'click .add_to_playlist' (){
143+
Meteor.users.update({ _id: Meteor.userId() },
144+
{
145+
$addToSet: {
146+
playlist: {
147+
song_id: $(event.target).parent('li').attr('song_id'),
148+
song_name: $(event.target).parent('li').attr('song_name')
149+
}
150+
}
151+
}
152+
);
153+
},
154+
'click .remove_from_playlist'(){
155+
Meteor.users.update({ _id: Meteor.userId() },
156+
{
157+
$pull: {
158+
playlist: {
159+
song_id: $(event.target).attr('song_id'),
160+
song_name: $(event.target).attr('song_name')
161+
}
162+
}
163+
}
164+
);
165+
},
139166
'keyup #query'(){
140167
if (event.keyCode == 13){
141168
var q = $('#query').val();
@@ -145,15 +172,22 @@ Template.user_page.events({
145172
part: 'snippet',
146173
maxResults: 5
147174
});
148-
149175
request.execute(function(response) {
150176
var options_str = '<li></li>';
151177
response.items.forEach(function(item){
152-
options_str += '<li style="cursor: pointer" class="song_li" song_id="'+item.id.videoId+'" song_name="'+item.snippet.title+'">' +
153-
'<div style="display: inline-block"><img src="'+item.snippet.thumbnails.default.url+'"/></div>' +
154-
'<div style="display: inline-block; position: relative;top: -40px;font-size:large; padding: 10px">' + item.snippet.title + '</div></li>';
178+
options_str +=
179+
'<li style="class="song_li" song_id="'+item.id.videoId+'" song_name="'+item.snippet.title+'">' +
180+
'<div style="display: inline-block">' +
181+
'<img src="'+item.snippet.thumbnails.default.url+'"/>' +
182+
'</div>' +
183+
'<div style="display: inline-block; position: relative;top: -40px; font-size:large; padding: 10px;max-width: 325px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">' +
184+
item.snippet.title +
185+
'</div>' +
186+
'<br/>' +
187+
'<button class="add_to_playlist">Add to playlist</button>&nbsp;' +
188+
'<button class="play">Play</button>' +
189+
'</li>';
155190
});
156-
157191
$('#search-container').html('<br/><ul>' + options_str + '</ul>');
158192
});
159193
}

‎public/remove.png

4.47 KB
Loading

0 commit comments

Comments
 (0)