Video links now use data attributes and render in an iframe

This commit is contained in:
Dan Hansen & Sarah Mei 2010-11-25 16:07:39 -08:00
parent 20cc5ac1f9
commit e78a86897a
3 changed files with 46 additions and 26 deletions

View file

@ -158,7 +158,7 @@ module ApplicationHelper
if options[:youtube]
while youtube = message.match(/youtube\.com::([A-Za-z0-9_\\]+)/)
videoid = youtube[1]
message.gsub!('youtube.com::'+videoid, '<a onclick="openVideo(\'youtube.com\', \'' + videoid + '\', this)" href="#video">Youtube: ' + youtube_title(videoid) + '</a>')
message.gsub!('youtube.com::'+videoid, '<a class="video-link" data-host="youtube.com" data-video-id="' + videoid + '" href="#video">Youtube: ' + youtube_title(videoid) + '</a>')
end
end

View file

@ -8,7 +8,7 @@ $(document).ready(function(){
var $stream = $(".stream");
var $publisher = $("#publisher");
// expand all comments on page load
$(".stream:not('.show')").find('.comments').each(function(index) {
$stream.not('.show').find('.comments').each(function(index) {
var comments = $(this);
if(comments.children("li").length > 1) {
var show_comments_toggle = comments.closest("li").find(".show_post_comments");
@ -33,7 +33,7 @@ $(document).ready(function(){
.closest("form").find(".comment_submit").fadeIn(200);
});
$(".stream").delegate("textarea.comment_box", "blur", function(evt){
$stream.delegate("textarea.comment_box", "blur", function(evt){
var commentBox = $(this);
if( !commentBox.val() ) {
commentBox.attr("rows", 1)
@ -51,6 +51,49 @@ $(document).ready(function(){
box.toggle();
}
});
$stream.delegate("a.video-link", "click", function(evt) {
evt.preventDefault();
var $this = $(this),
container = document.createElement('div'),
$container = $(container).attr("class", "video-container");
var $videoContainer = $this.siblings("div.video-container");
if($videoContainer.length > 0) {
$videoContainer.slideUp('fast', function () {
$videoContainer.detach();
});
return;
}
if($("div.video-container").length > 0) {
$("div.video-container").slideUp("fast", function() {
$(this).detach();
});
}
if($this.data("host") === 'youtube.com') {
$container.html(
'<a href="//www.youtube.com/watch?v=' + $this.data("video-id") + '" target="_blank">Watch this video on Youtube</a><br />' +
'<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/' + $this.data("video-id")+ '"></iframe>'
);
} else {
$container.html('Invalid videotype <i>'+$this.data("host")+'</i> (ID: '+$this.data("video-id")+')');
}
$container.hide();
this.parentNode.insertBefore(container, this.nextSibling);
$container.slideDown('fast');
$this.click(function() {
$container.slideToggle('fast', function () {
$(this).detach();
});
});
});
$(".new_status_message").bind('ajax:success', function(data, json, xhr){
json = $.parseJSON(json);

View file

@ -3,7 +3,6 @@
* the COPYRIGHT file.
*/
$(document).ready(function(){
$('#debug_info').click(function() {
$('#debug_more').toggle('fast');
@ -115,28 +114,6 @@ $.fn.clearForm = function() {
});
};
var video_active_container = null;
function openVideo(type, videoid, link) {
var container = document.createElement('div'),
$container = $(container);
if(type == 'youtube.com') {
$container.html('<a href="//www.youtube.com/watch?v='+videoid+'" target="_blank">Watch this video on Youtube</a><br><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/'+videoid+'?fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+videoid+'?fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>');
} else {
$container.html('Invalid videotype <i>'+type+'</i> (ID: '+videoid+')');
}
if(video_active_container != null) {
video_active_container.parentNode.removeChild(video_active_container);
}
video_active_container = container;
$container.hide();
link.parentNode.insertBefore(container, this.nextSibling);
$container.slideDown('fast', function() { });
link.onclick = function() { $container.slideToggle('fast', function() { } ); }
}
$(".make_profile_photo").live("click", function(evt){