Permalink
Browse files

added replay functionality

  • Loading branch information...
1 parent f3b8293 commit aac5b7a5eaeb07935c9cab214e9825004204c3f1 @WaleyChen committed Apr 6, 2012
View
18 README
@@ -1,3 +1,21 @@
+include title of song
+
+http://laughingsquid.com/turntable-fm-a-clever-social-music-site-lets-users-play-dj/‏
+make turn tablefm but with music videos
+
+be able to exactly listen what other people are listening to in real time‏
+turn table but for youtube music videos
+
+need to refactoring
+- how to seperate vekii js files?
+
+// MUST USE FOR SEARCH
+http://twitter.github.com/bootstrap/javascript.html#typeahead
+
+cool visualization chart
+when you see how one videos links to other recommendations
+so like instead of a social graph have a recommended videos graph
+
what differentiates vekii from youtube?
it's the social network stupid
youtube meets twitter or facebook or github
@@ -26,6 +26,11 @@
height: 14px;
}
+.height_ddm {
+ max-height: 175px;
+ overflow: auto;
+}
+
.inline {
display: inline;
}
@@ -38,6 +43,10 @@
position: relative;
}
+.padding_top_caret {
+ padding-top: -500px;
+}
+
.padding_top_player {
margin-top: -7px;
}
@@ -50,16 +59,6 @@
padding-top: 3px;
}
-.pull-right .dropdown-menu {
-left: auto;
-right: 0;
-}
-
-.pull-right .dropdown-menu:after {
-left: auto;
-right: 13px;
-}
-
.right_ddmenu {
right:1px;
}
@@ -65,6 +65,10 @@ def search_JS
send_file '/public/search.js',
end
+ def monkey_JS
+ send_file '/public/js/monkey.js',
+ end
+
def examplePlaylistJSON
send_file '/public/example_playlist.json',
end
@@ -1,34 +1,25 @@
<!-- JAVASCRIPT-->
-<script language="javascript" type="text/javascript" src="bootstrap.js"> </script>
-<script language="javascript" type="text/javascript" src="cvi_busy_lib.js"> </script>
-<script language="javascript" type="text/javascript" src="cookie.js"> </script>
-<script language="javascript" type="text/javascript" src="validate_token.js"> </script>
-<script language="javascript" type="text/javascript" src="player.js"> </script>
-<script language="javascript" type="text/javascript" src="retrieve_playlists.js"> </script>
-<script language="javascript" type="text/javascript" src="yt_player.js"> </script>
-<script language="javascript" type="text/javascript" src="vekii_backbone.js"> </script>
-<script language="javascript" type="text/javascript" src="search.js"> </script>
-
+<script language="javascript" type="text/javascript" src="cvi_busy_lib.js"></script>
+<script language="javascript" type="text/javascript" src="cookie.js"></script>
+<script language="javascript" type="text/javascript" src="validate_token.js"></script>
+<script language="javascript" type="text/javascript" src="player.js"></script>
+<script language="javascript" type="text/javascript" src="retrieve_playlists.js"></script>
+<script language="javascript" type="text/javascript" src="yt_player.js"></script>
+<script language="javascript" type="text/javascript" src="vekii_backbone.js"></script>
+<script language="javascript" type="text/javascript" src="search.js"></script>
+<script language="javascript" type="text/javascript" src="monkey.js"></script>
<!-- TEMPLATES -->
-
<!-- BODY -->
<div class="row-fluid">
<div class="span3">
<ul class="nav nav-tabs">
<li class="active">
- <a href="#home" data-toggle="tab">
- <h3>Playlists</h3>
- </a>
+ <a href="#home" data-toggle="tab"><h3>Playlists</h3></a>
</li>
<li>
- <a href="#profile" data-toggle="tab">
- <h3>Subs</h3>
- </a>
+ <a href="#profile" data-toggle="tab"><h3>Subs</h3></a>
</li>
</ul>
-
- <!-- <a class="btn" href=<%= @googleLoginLink %>> Login </a> -->
-
<div class="well" style="padding: 8px 0px;">
<ul id="playlists" class="nav nav-list">
</ul>
@@ -40,79 +31,50 @@
<table class="width_100_percent">
<tr>
<td>
- <h1 class="inline float_left">
- Vekii&nbsp
- </h1>
+ <h1 class="inline float_left">Vekii&nbsp</h1>
</td>
<td class="width_100_percent">
<form class="navbar-search float_left inline padding_top_search width_search">
<input type="text" class="height_search width_100_percent" placeholder="Search">
</form>
</td>
<td>
- <ul class="nav nav-pills padding_top_login_button pull-right">
- <li class="dropdown pull_right" id="settings">
- <a id="options" class="dropdown-toggle border_style_solid border_width_1px" data-toggle="dropdown" href="#settings">
- </a>
- <ul class="dropdown-menu">
- <li><a href="javascript:sync()"> Resync </a></li>
- <li><a href="javascript:sign_out()">Sign Out</a></li>
- </ul>
- </li>
- </ul>
+ <div id="login_button_or_settings_ddm">
+ </div>
</td>
</tr>
</table>
<div id="yt_api_player_wrapper" class="padding_top_player">
<div id="yt_api_player">
</div>
</div>
- <ul class="nav nav-pills inline">
- <li class="dropdown" id="menu2">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#menu2">
- Add to
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </li>
- </ul>
- <a class="btn float_right" href=""> Replay </a>
+ <div id="add_to_ddm">
+ </div>
+ <a id="replay_btn" class="btn float_right" href="javascript:replay()">Replay</a>
</div>
</center>
<div id="console">
</div>
</div>
-
<div class="span3">
<ul class="nav nav-tabs">
- <li class="active">
- <a href="#home" data-toggle="tab">
- <h3> Recommended </h3>
- </a>
+ <li class="active"><a href="#home" data-toggle="tab"><h3>Recommended</h3></a>
+ </li>
+ <li>
+ <a href="#home" data-toggle="tab"><h3>Queue</h3></a>
</li>
</ul>
-
<div class="well" style="padding: 8px 0px;">
<ul id="recommended" class="nav nav-list">
</ul>
</div>
</div>
</div>
-
<div id="output">
</div>
-
</br>
-
<ul id="friends-list">
</ul>
-
<div id="container">
</div>
View
@@ -35,6 +35,7 @@
match 'retrieve_playlists.js' => 'frontpage#retrive_Playlists_JS'
match 'yt_player.js' => 'frontpage#yt_Player_JS'
match 'search.js' => 'frontpage#search_JS'
+ match 'monkey.js' => 'frontpage#monkey_JS'
# IMAGES
match 'delete.png' => 'frontpage#delete_PNG'
end
View
No changes.
View
@@ -0,0 +1,4 @@
+// Once the player is ready, it wil call onYouTubePlayerReady.
+function onYouTubePlayerReady(playerId) {
+ ytplayer = document.getElementById("myytplayer");
+}
View
@@ -1,7 +1,8 @@
+var current_video_id;
var playlist_showing;
var playlist_showing_bool = 0;
-window.location.hash = "";
+// window.location.hash = "";
function delete_Playlist(playlist_title) {
jQuery.each(playlists.playlists, function(playlist_index, playlist) {
@@ -59,7 +60,16 @@ function playlists_Sort_Func(a, b) {
}
}
-function resync_Playlists() {
+function replay() {
+ if ($('#replay_btn').html() == "Replay") {
+ $('#replay_btn').html('<del> Replay </del>');
+ } else {
+ $('#replay_btn').html('Replay');
+ }
+}
+
+function set_Current_Video_Id(video_id) {
+ current_video_id = video_id;
}
function show_Playlists(playlist_to_show) {
@@ -101,11 +111,15 @@ function show_Playlists(playlist_to_show) {
if (!playlist_showing_bool || playlist_showing != playlist_to_show) {
$("#playlists").append("<li>"
- + "<a class=\"playlist\" href=\"javascript:ytplayer.loadVideoById('"
- + song.video_id
+ + "<a class=\"playlist\" href=\""
+ + "javascript:set_Current_Video_Id('"
+ + song.video_id
+ + "');"
+ + "javascript:ytplayer.loadVideoById('"
+ + song.video_id
+ "');"
+ "javascript:show_Recommended('"
- + song.video_id
+ + song.video_id
+ "');"
+ "\">"
+ "&nbsp"
@@ -68,6 +68,28 @@ if (hash_values_json.access_token == undefined /* not logged in */ ) {
"yt_api_player", "640", "390", "8", null, null, params, atts);
show_Playlists();
+
+ var playlists_ddm = "";
+
+ jQuery.each(playlists.playlists, function(index, playlist) {
+ playlists_ddm = playlists_ddm + "<li><a href=\"#\">" + playlist.title + "</a></li>";
+ });
+
+ $('#add_to_ddm').append( "<ul class=\"nav nav-pills inline\">"
+
+ + "<li class=\"dropdown\" id=\"menu2\">"
+ + "<a class=\"dropdown-toggle border_style_solid border_width_1px\" data-toggle=\"dropdown\" href=\"#menu2\">"
+ + "Add to"
+ + "</a>"
+ + "<ul class=\"dropdown-menu height_ddm\">"
+ + " <li><a href=\"#\">Action</a></li>"
+ + " <li><a href=\"#\">Another action</a></li>"
+ + " <li><a href=\"#\">Something else here</a></li>"
+ + playlists_ddm
+ + " <li class=\"divider\"></li>"
+ + " <li><a href=\"#\">Separated link</a></li>"
+ + "</ul>"
+ + "</li></ul>");
},
error: function(jqXHR, textStatus, errorThrown) {
@@ -90,8 +112,30 @@ if (hash_values_json.access_token == undefined /* not logged in */ ) {
// swfobject.embedSWF will load the player from YouTube and embed it onto your page.
swfobject.embedSWF("http://www.youtube.com/v/u1zgFlCw8Aw?enablejsapi=1&playerapiid=ytplayer&version=3",
"yt_api_player", "640", "390", "8", null, null, params, atts);
-
show_Playlists();
+
+ var playlists_ddm = "";
+
+ jQuery.each(playlists.playlists, function(index, playlist) {
+ playlists_ddm = playlists_ddm + playlist.title;
+ alert(playlists_ddm);
+ });
+
+ $('#add_to_ddm').append( "<ul class=\"nav nav-pills inline\">"
+
+ + "<li class=\"dropdown\" id=\"menu2\">"
+ + "<a class=\"dropdown-toggle border_style_solid border_width_1px\" data-toggle=\"dropdown\" href=\"#menu2\">"
+ + "Add to"
+ + "</a>"
+ + "<ul class=\"dropdown-menu\">"
+ + " <li><a href=\"#\">Action</a></li>"
+ + " <li><a href=\"#\">Another action</a></li>"
+ + " <li><a href=\"#\">Something else here</a></li>"
+
+ + " <li class=\"divider\"></li>"
+ + " <li><a href=\"#\">Separated link</a></li>"
+ + "</ul>"
+ + "</li></ul>");
},
error: function(jqXHR, textStatus, errorThrown) {
@@ -119,15 +163,12 @@ if (hash_values_json.access_token == undefined /* not logged in */ ) {
// gets the user's playlists from Youtube API and stores them into a JS object
for (playlists_request_count = 0; playlists_request_count < Math.ceil(playlists_size/max_playlists_size); playlists_request_count++) {
- alert("sedning");
-
$.ajax({
type: "GET",
url: playlists_JSON_link,
dataType: 'json',
beforeSend: function(jqXHR) {
- alert("sending request");
},
success: function(json) {
@@ -233,24 +274,28 @@ if (hash_values_json.access_token == undefined /* not logged in */ ) {
show_Playlists();
playlists_JSON = JSON.stringify(playlists);
-
- // save playlists to our backend
- $.ajax({
- type: "POST",
- url: "/playlists",
- contentType: "application/json",
- data: playlists_JSON,
- processdata: false,
- beforeSend: function(jqXHR) {
- jqXHR.setRequestHeader('X-CSRF-Token',
- $('meta[name="csrf-token"]').attr('content'))
- },
- success: function(response) {
- if (response == "POST was successful.") {
- } else if (response == "Already exists in the database."){
- }
- }
- });
+
+ if (resync != true) {
+ // save playlists to our backend
+ $.ajax({
+ type: "POST",
+ url: "/playlists",
+ contentType: "application/json",
+ data: playlists_JSON,
+ processdata: false,
+ beforeSend: function(jqXHR) {
+ jqXHR.setRequestHeader('X-CSRF-Token',
+ $('meta[name="csrf-token"]').attr('content'))
+ },
+ success: function(response) {
+ if (response == "POST was successful.") {
+ } else if (response == "Already exists in the database."){
+ }
+ }
+ });
+ } else {
+ update_Playlists();
+ }
}
},
Oops, something went wrong.

0 comments on commit aac5b7a

Please sign in to comment.