(Originally posted July 22, 2013)
Last time we actually got the video stream going by adding more and better information to the models, getting queues for the videos going, and used the youtube api to load and play all the videos. This time, we’re going to add a search functionality so we don’t have to rely on going to a different tab to find the video, and moving to the site to upload the link. When it’s done, we should have a way to type in a query, see the resulting videos and, when clicked, asynchronously post the url to the queue.
The first step is to look at the youtube search api. As we’ve seen before, youtube has a fantastic api support for not only getting info on a video, but also searching. Using a string like https://gdata.youtube.com/feeds/api/videos?q=avett&max-results=5&v=2&alt=json, we should be able to get the results by changing the attribute q. If we load that url in a browser, we can look at the resulting json and figure out what information we want to display.
With that looking reasonable to work with, we’ll start by adding a search bar, and intercepting the input with jquery so we can have it later to query against. Since we’re going to replace the upload bar with the search, we might as well just hijack that for our purposes. Go ahead and add an id attribute to the input bar, I’m going to use “yt-search”. Jquery has a fantastic autocomplete functionality which we can use to make it dead simple. The final code that we want to add to our javascript file is as follows.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
$( "#yt-search" ).autocomplete({ source: function( request, response ) { $.ajax({ url:yt_search_url, dataType: "json", data: {//query params q:request.term, "v":2, "max-results":5, "alt":"json", }, success: function( data ) { response( $.map( data.feed.entry, function( item ) { return { label: item.title.$t, value: item.link[0].href } })); } }); }, minLength: 3, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); }}); |
What this does is populate the dropdown menu with the titles of the most relevant videos according to what was typed. We need to add a theme so the ui looks ok, and jquery has a bunch to choose from if you google jquery themes and adding a link to a css file of one of them will make it look better.
As mentioned in the post before, we want to override the submit functionality on the form, and submit the url using ajax so we don’t start over the queue when we add another. This snippet intercepts the form submit, and posts via ajax, and updates it.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$("#yt-url-upload").submit(function(e) { e.preventDefault(); $("#yt-search").val(""); $.ajax({ url:"/", type:"POST", dataType: "json", data: $(this).serialize(), success: function( data ) { update(); }, }); return false;}); |
If you have the same view function as before, this should be all you need. Now there are some ui things that would make this much better. Something that lets the user know that the request is being processed. Error messages would be nice too, but in terms of functionality, this is what we wanted.
Jack Schultz 