From 19ee0491c37ee25d6ed53eed061906c2f65a8302 Mon Sep 17 00:00:00 2001 From: calzoneman Date: Sun, 31 Mar 2013 17:30:46 -0500 Subject: [PATCH] Add a few layout options --- www/assets/css/ytsync.css | 7 +++-- www/assets/js/client.js | 58 ++++++++++++++++++++++++++++++++++++-- www/assets/js/functions.js | 14 ++++----- www/index.html | 27 ++++++++++-------- 4 files changed, 83 insertions(+), 23 deletions(-) diff --git a/www/assets/css/ytsync.css b/www/assets/css/ytsync.css index 56a8c89d..0c9d38c8 100644 --- a/www/assets/css/ytsync.css +++ b/www/assets/css/ytsync.css @@ -43,7 +43,7 @@ #userlist { overflow-y: scroll; overflow-x: hidden; - height: 360px; + height: 347px; float: left; width: 150px; border: 1px solid #aaaaaa; // [](/z13) @@ -51,7 +51,7 @@ #messagebuffer { overflow-y: scroll; - height: 360px; + height: 347px; border: 1px solid #aaaaaa; // AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa border-left: 0; } @@ -65,7 +65,8 @@ } #chatline { - width: 456px; + /*width: 456px;*/ + width: 100%; } .userlist_siteadmin { diff --git a/www/assets/js/client.js b/www/assets/js/client.js index b4329d4a..2f538860 100644 --- a/www/assets/js/client.js +++ b/www/assets/js/client.js @@ -25,6 +25,8 @@ var FOCUSED = true; var SCROLLCHAT = true; var PAGETITLE = "Sync"; var TITLE_BLINK; +var VWIDTH = "670"; +var VHEIGHT = "377"; var uname = readCookie("sync_uname"); var pw = readCookie("sync_pw"); @@ -301,10 +303,62 @@ $("#library_query").keydown(function(ev) { searchLibrary(); }); +$("#largelayout").click(largeLayout); +$("#hugelayout").click(hugeLayout); +$("#narrowlayout").click(narrowLayout); +$("#stlayout").click(synchtubeLayout); + +function largeLayout() { + $("#videodiv").removeClass().addClass("span8 offset2"); + VWIDTH = "770"; + VHEIGHT = "430"; + $("#ytapiplayer").attr("width", "770").attr("height", "430"); + var chat = $("#chatdiv").remove(); + $("#layoutrow").remove(); + var r = $("
").addClass("row").insertAfter($(".row")[1]); + r.attr("id", "layoutrow"); + chat.removeClass().addClass("span8 offset2").appendTo(r); + $("#userlist").css("width", "200px"); + //$("#chatline").css("width", "756px"); +} + +function hugeLayout() { + VWIDTH = "1170"; + VHEIGHT = "658"; + $("#videodiv").removeClass().addClass("span12"); + $("#ytapiplayer").attr("width", "1170").attr("height", "658"); + var chat = $("#chatdiv").remove(); + $("#layoutrow").remove(); + var r = $("
").addClass("row").insertAfter($(".row")[1]); + r.attr("id", "layoutrow"); + chat.removeClass().addClass("span12").appendTo(r); + $("#userlist").css("width", "200px").css("height", "200px"); + $("#messagebuffer").css("height", "200px"); + //$("#chatline").css("width", "1156px"); +} + +function narrowLayout() { + VWIDTH = "570"; + VHEIGHT = "321"; + $("#videodiv").removeClass().addClass("span6"); + $("#ytapiplayer").attr("width", "570").attr("height", "321"); + var chat = $("#chatdiv").remove(); + $("#layoutrow").remove(); + var r = $("
").addClass("row").insertAfter($(".row")[1]); + r.attr("id", "layoutrow"); + chat.removeClass().addClass("span6").appendTo(r); + $("#userlist").css("width", "150px"); + //$("#chatline").css("width", "556px"); +} + +function synchtubeLayout() { + $("#videodiv").remove().insertBefore($("#chatdiv")); +} + function onYouTubeIframeAPIReady() { PLAYER = new YT.Player("ytapiplayer", { - height: "390", - width: "640", + height: VHEIGHT, + width: VWIDTH, videoId: "", playerVars: { "autoplay": 0, diff --git a/www/assets/js/functions.js b/www/assets/js/functions.js index 0bfd1309..eb419281 100644 --- a/www/assets/js/functions.js +++ b/www/assets/js/functions.js @@ -325,8 +325,8 @@ function updateYT(data) { // Note to Soundcloud/Vimeo API designers: // YouTube"s API is actually nice to use PLAYER = new YT.Player("ytapiplayer", { - height: "390", - width: "640", + height: VHEIGHT, + width: VWIDTH, videoId: "", playerVars: { "autoplay": 0, @@ -391,8 +391,8 @@ function updateDM(data) { removeCurrentPlayer(); PLAYER = DM.player("ytapiplayer", { video: data.id, - width: 640, - height: 390, + width: parseInt(VWIDTH), + height: parseInt(VHEIGHT), params: {autoplay: 1} }); @@ -439,7 +439,7 @@ function initVI(data) { var div = currentEmbed.parent(); currentEmbed.remove(); // Ugly but it"s the only way I managed to get the API calls to work - div[0].innerHTML += ""; + div[0].innerHTML += ""; // $f() is defined by froogaloop, Vimeo"s API wrapper PLAYER = $f($("iframe")[0]); // So we can retrieve the ID synchronously instead of waiting for @@ -465,7 +465,7 @@ function loadTwitch(channel) { id: "live_embed_player_flash", flashvars:"hostname=www.twitch.tv&channel="+channel+"&auto_play=true&start_volume=100" }; - swfobject.embedSWF( url, "ytapiplayer", "640", "390", "8", null, null, params, {} ); + swfobject.embedSWF( url, "ytapiplayer", VWIDTH, VHEIGHT, "8", null, null, params, {} ); } function loadLivestream(channel) { @@ -473,7 +473,7 @@ function loadLivestream(channel) { removeCurrentPlayer(); flashvars = { channel: channel }; params = { AllowScriptAccess: "always" }; - swfobject.embedSWF("http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf", "ytapiplayer", "640", "390", "9.0.0", "expressInstall.swf", flashvars, params); + swfobject.embedSWF("http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf", "ytapiplayer", VWIDTH, VHEIGHT, "9.0.0", "expressInstall.swf", flashvars, params); } function removeCurrentPlayer(){ diff --git a/www/index.html b/www/index.html index 89110a4c..1d0378ab 100644 --- a/www/index.html +++ b/www/index.html @@ -22,13 +22,8 @@
- CyTube -
+
-
+

@@ -62,7 +57,7 @@
-
+

Currently Playing:

@@ -73,7 +68,7 @@
-
+