Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added replay functionality

  • Loading branch information...
commit aac5b7a5eaeb07935c9cab214e9825004204c3f1 1 parent f3b8293
@WaleyChen authored
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
View
19 app/assets/stylesheets/frontpage.css.scss
@@ -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;
}
View
4 app/controllers/frontpage_controller.rb
@@ -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
View
80 app/views/frontpage/frontpage.html.erb
@@ -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,9 +31,7 @@
<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">
@@ -50,16 +39,8 @@
</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>
@@ -67,52 +48,33 @@
<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
1  config/routes.rb
@@ -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
0  public/document_ready.js
No changes.
View
4 public/js/monkey.js
@@ -0,0 +1,4 @@
+// Once the player is ready, it wil call onYouTubePlayerReady.
+function onYouTubePlayerReady(playerId) {
+ ytplayer = document.getElementById("myytplayer");
+}
View
24 public/player.js
@@ -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"
View
89 public/retrieve_playlists.js
@@ -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();
+ }
}
},
View
34 public/search.js
@@ -1,8 +1,38 @@
+var devKey = "AI39si5Cwgvp6TJAY4pqrUcK8dCcL8WntrOGNmmn6MBvBpN40Ru_pKF99Y0m-y_WJvLxtblt4REVaTqlQYsmr5Q05E1Bwvkmyw"
+var googleLoginLink = "https://accounts.google.com/o/oauth2/auth?"
+var client_id = "client_id=908038792880-vm3862hmpnp7u6gnmgd8104g8u7r1sr1.apps.googleusercontent.com"
+var gscope = "scope=https://gdata.youtube.com"
+var response_type = "response_type=token"
+var redirect_uri = "redirect_uri=http://localhost:3000"
+
+/*
+# construct the link to request an access token from the Youtube API
+if ENV["RAILS_ENV"] == "development" || ENV["RAILS_ENV"] == "vekii_test"
+ redirect_uri = "redirect_uri=http://localhost:3000"
+elsif ENV["RAILS_ENV"] == "production"
+ redirect_uri = "redirect_uri=http://fierce-stream-3563.herokuapp.com/"
+end
+*/
+
+var resync_link = googleLoginLink + client_id + '&' + redirect_uri + "/?resync=true" + '&' + gscope + '&' + response_type;
+googleLoginLink = googleLoginLink + client_id + '&' + redirect_uri + '&' + gscope + '&' + response_type;
+
$(document).ready(function() {
if (username != undefined) {
- $('#options').html(username + " <b class=\"caret\"></b>");
+ $('#login_button_or_settings_ddm').append("<ul class=\"nav nav-pills padding_top_login_button pull-right\">"
+ + "<li class=\"dropdown\" id=\"settings\">"
+ + "<a id=\"options\" class=\"dropdown-toggle border_style_solid border_width_1px\" data-toggle=\"dropdown\" href=\"#settings\">"
+ + username
+ + "</a>"
+ + "<ul class=\"dropdown-menu\">"
+ + "<li class=\"float_right\"><a href=\"javascript:sign_out()\">Sign Out</a></li>"
+ + "<li class=\"float_right\"><a href=\"" + resync_link + "\"> Resync </a></li>"
+ + "</ul>"
+ + "</li>"
+ + "</ul>");
} else {
- $('#options').html("Login");
+ $('#login_button_or_settings_ddm').append("<a class=\"btn\" href=\"" + googleLoginLink + "\"> Login </a>");
+ $('#yt_api_player_wrapper').css("margin-top", "20px");
}
$("#.search").keyup(function()
View
6 public/validate_token.js
@@ -1,5 +1,11 @@
// VARS
var hash_values_str = jQuery.param.fragment(); // get the current URL's hash values
+var resync;
+if (jQuery.param.querystring() == "resync=true") {
+ resync = true;
+} else {
+ resync = false;
+}
var hash_values_json = jQuery.deparam(hash_values_str); // convert hash values into JSON object
var hash_values_json_str = JSON.stringify(hash_values_json); // convert JSON object into string
var validate_token_link = "https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=" + hash_values_json.access_token + "&alt=JSON" + "&callback=?";
View
13 public/yt_player.js
@@ -1,4 +1,17 @@
// Once the player is ready, it wil call onYouTubePlayerReady.
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
+ ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
+}
+
+function onytplayerStateChange(newState) {
+ // $('#console').append(newState);
+
+ if (newState == 0) {
+ alert($('#replay_btn').html());
+ if ($('#replay_btn').html() == "<del> Replay </del>") {
+ ytplayer.loadVideoById(current_video_id, 0, 'highres');
+ } else {
+ }
+ }
}
Please sign in to comment.
Something went wrong with that request. Please try again.