moon
/
sync
mirror of https://github.com/calzoneman/sync.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Auto update video width to match responsive layout 

This fixes Issue #40
I also fixed the YouTube loader to remove the frameborder
This commit is contained in:
calzoneman 2013-04-19 14:00:10 -05:00
parent f7ed2adb73
commit eede0b9135
2 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
www/assets/js/client.js
View File

@ -25,7 +25,7 @@ var FOCUSED = true;
var SCROLLCHAT = true; var SCROLLCHAT = true;
var PAGETITLE = "Sync"; var PAGETITLE = "Sync";
var TITLE_BLINK; var TITLE_BLINK;
var VWIDTH = "670"; var VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");//670
var VHEIGHT = "377"; var VHEIGHT = "377";
var IGNORED = []; var IGNORED = [];
var KICKED = false; var KICKED = false;
@ -56,6 +56,11 @@ $(window).focus(function() {
FOCUSED = false; FOCUSED = false;
}); });
$(window).resize(function() {
VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");
$("#ytapiplayer").attr("width", VWIDTH);
});
var params = {}; var params = {};
if(window.location.search) { if(window.location.search) {
var parameters = window.location.search.substring(1).split("&"); var parameters = window.location.search.substring(1).split("&");
@ -424,9 +429,9 @@ $("#stlayout").click(synchtubeLayout);
function largeLayout() { function largeLayout() {
$("#videodiv").removeClass().addClass("span8 offset2"); $("#videodiv").removeClass().addClass("span8 offset2");
VWIDTH = "770"; VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");//770
VHEIGHT = "430"; VHEIGHT = "430";
$("#ytapiplayer").attr("width", "770").attr("height", "430"); $("#ytapiplayer").attr("width", VWIDTH).attr("height", "430");
var chat = $("#chatdiv").detach(); var chat = $("#chatdiv").detach();
$("#layoutrow").remove(); $("#layoutrow").remove();
var r = $("<div />").addClass("row").insertAfter($("#videodiv").parent()); var r = $("<div />").addClass("row").insertAfter($("#videodiv").parent());
@ -437,10 +442,10 @@ function largeLayout() {
} }
function hugeLayout() { function hugeLayout() {
VWIDTH = "1170";
VHEIGHT = "658";
$("#videodiv").removeClass().addClass("span12"); $("#videodiv").removeClass().addClass("span12");
$("#ytapiplayer").attr("width", "1170").attr("height", "658"); VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");//1170
VHEIGHT = "658";
$("#ytapiplayer").attr("width", VWIDTH).attr("height", "658");
var chat = $("#chatdiv").detach(); var chat = $("#chatdiv").detach();
$("#layoutrow").remove(); $("#layoutrow").remove();
var r = $("<div />").addClass("row").insertAfter($("#videodiv").parent()); var r = $("<div />").addClass("row").insertAfter($("#videodiv").parent());
@ -452,10 +457,10 @@ function hugeLayout() {
} }
function narrowLayout() { function narrowLayout() {
VWIDTH = "570"; VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");//570
VHEIGHT = "321"; VHEIGHT = "321";
$("#videodiv").removeClass().addClass("span6"); $("#videodiv").removeClass().addClass("span6");
$("#ytapiplayer").attr("width", "570").attr("height", "321"); $("#ytapiplayer").attr("width", VWIDTH).attr("height", "321");
var chat = $("#chatdiv").detach(); var chat = $("#chatdiv").detach();
$("#layoutrow").remove(); $("#layoutrow").remove();
var r = $("<div />").addClass("row").insertAfter($("#videodiv").parent()); var r = $("<div />").addClass("row").insertAfter($("#videodiv").parent());

2
www/assets/js/media.js
View File

@ -50,6 +50,7 @@ Media.prototype.initYouTube = function() {
} }
} }
}); });
$("#ytapiplayer").css("border", "none");
this.load = function(data) { this.load = function(data) {
if(this.player.loadVideoById) { if(this.player.loadVideoById) {
@ -76,7 +77,6 @@ Media.prototype.initYouTube = function() {
} }
Media.prototype.initVimeo = function() { Media.prototype.initVimeo = function() {
var iframe = $("<iframe/>").insertBefore($("#ytapiplayer")); var iframe = $("<iframe/>").insertBefore($("#ytapiplayer"));
$("#ytapiplayer").remove(); $("#ytapiplayer").remove();
iframe.attr("id", "ytapiplayer"); iframe.attr("id", "ytapiplayer");