Last active
June 3, 2016 12:59
-
-
Save gelguy/6408143 to your computer and use it in GitHub Desktop.
Twitch TV multi-channel viewer by atr1 v1.04.2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<!-- | |
Watch multiple Twitch TV channels on the same tab | |
Exact channel name must be typed in (not case-sensitive) | |
Double click the title bar to close a channel | |
Drag at edges to resize | |
With thanks to http://metroui.org.ua/ for the Metro UI | |
and http://www.allbloggertricks.com/2013/05/metro-style-search-bar-for-blogger.html for the search box | |
v1.02 | |
- auto-focus search box on typing | |
- search box to front on focus | |
- removed dialog padding | |
- dark theme with toggle | |
v1.03 | |
- fixed bug preventing fullscreen | |
- fixed bug not detecting all keypresses (s-z) | |
- resize handles on all sides | |
** not usable in Opera 12 and below (css calc breaks in Opera) | |
- limited draggable area to window | |
-- removed blocker preventing iframe clicks (prevents interaction with stream) | |
-- removed draggable area covering entire dialog (same as above) | |
v1.04.2 | |
- now supports IE (tested in IE8) | |
** IE has a 30px padding around flash as it is slow in detecting mouse movement | |
** IE can only resize on right and bottom handles (same issue as Opera) | |
** IE cannot turn off padding white background in dark theme (transparent iframe needed) | |
- css and javascript cleanup | |
- removed console logging | |
- fixed bug not detecting all keypresses ( _ and - ) | |
--> | |
<style> | |
body { | |
font-family: "Segoe UI Light", "Open Sans", "Verdana", "Arial", "Helvetica", sans-serif; | |
text-align: center; | |
overflow: hidden; | |
} | |
h1 { | |
font: normal normal 200 56px/58.67px "Segoe UI Light"; | |
} | |
h2 { | |
font: normal normal 200 15px "Segoe UI Light"; | |
} | |
#container { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
} | |
#form-container { | |
display: inline-table; | |
position: relative; | |
} | |
form { | |
position: relative; | |
padding: 30px; | |
} | |
.draggable { | |
position: absolute !important; /* draggable changes position to relative */ | |
top: 0; | |
left: 0; | |
height: 512px; | |
width: 810px; | |
-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px 0px; | |
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px 0px; | |
} | |
.no-border { | |
border: none !important; | |
} | |
.iframe-cover { | |
border: none; | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
z-index: -1; | |
} | |
.iframe-container { | |
height: -moz-calc(100% - 24px); | |
height: -webkit-calc(100% - 24px); | |
height: calc(100% - 24px); | |
} | |
.embed-container { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.player { | |
height: 100%; | |
width: 100%; | |
} | |
.handle { | |
background-color: #2D89EF; | |
height: 24px; | |
padding: 0px 35px 5px 5px; | |
color: white; | |
text-align: left; | |
font-size: 18px; | |
font-weight: 200; | |
cursor: move; | |
} | |
#input { | |
background: none repeat scroll 0 0 #EEEEEE; | |
border: 0 none; | |
padding: 10px; | |
width: 160px; | |
} | |
::-webkit-input-placeholder { | |
font-family: "Segoe UI Light", "Open Sans", "Verdana", "Arial", "Helvetica", sans-serif; | |
} | |
::-moz-placeholder { | |
font-family: "Segoe UI Light", "Open Sans", "Verdana", "Arial", "Helvetica", sans-serif; | |
} | |
#button { | |
background: none repeat scroll 0 0 #359BED; | |
border: 0 none; | |
border-radius: 0 0 0 0; | |
color: #FFFFFF; | |
font-weight: 700; | |
padding: 10px 20px; | |
} | |
#button:hover { | |
background-color:#000; | |
} | |
#dark-toggle { | |
position: absolute; | |
top: 50px; | |
right: 10px; | |
width: 30px; | |
height: 30px; | |
background-image: url(data:image/jpeg;base64,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); | |
background-size: 100%; | |
cursor: hand; | |
cursor: pointer; | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: -moz-none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
</style> | |
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> | |
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> | |
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> | |
<script type="text/javascript"> | |
var z_index = 0; | |
var dark = false | |
var isOpera12 = false; | |
var isIE = false; | |
function getTwitch() { | |
var input = document.getElementById("input").value; | |
var container = document.getElementById("container"); | |
var drag = document.createElement("div"); | |
drag.className = "draggable ui-widget-content"; | |
if (isIE || isOpera12) { | |
drag.style.height = 'auto'; | |
drag.style.width = 'auto'; | |
} | |
if (isIE) { | |
drag.style.border = 'solid 1px black'; | |
} | |
else { | |
drag.className += ' no-border'; | |
/* prevent draggable ui class from forming border */ | |
} | |
drag.style.zIndex = ++z_index; | |
container.insertBefore(drag, container.firstChild); | |
var handle = document.createElement("div"); | |
handle.className = "handle"; | |
if (!isIE) { | |
handle.addEventListener("dblclick", function() { | |
drag.parentNode.removeChild(drag); | |
}); | |
handle.addEventListener("mousedown", function() { | |
drag.style.zIndex = ++z_index; | |
}); | |
} | |
else { | |
handle.ondblclick = function() { | |
drag.parentNode.removeChild(drag); | |
}; | |
handle.attachEvent("mousedown", function() { | |
drag.style.zIndex = ++z_index; | |
}); | |
} | |
handle.innerHTML = input.charAt(0).toUpperCase() + input.slice(1).toLowerCase(); | |
try{drag.appendChild(handle)}catch(e){} | |
var iframe_container = document.createElement("div"); | |
iframe_container.className = "iframe-container"; | |
if (isIE || isOpera12) { | |
iframe_container.style.height = '478px'; | |
iframe_container.style.width = '744px'; | |
} | |
try{drag.appendChild(iframe_container)}catch(e){} | |
if (isIE) { | |
iframe_container.style.padding = '30px'; | |
var iframe_cover = document.createElement("iframe"); | |
iframe_cover.className = "iframe-cover"; | |
iframe_cover.src = ""; | |
iframe_cover.frameBorder = "0"; | |
try{drag.appendChild(iframe_cover)}catch(e){} | |
} | |
var embed_container = document.createElement("div"); | |
embed_container.className = "embed-container"; | |
if (isIE || isOpera12) { | |
embed_container.style.height = '100%'; | |
embed_container.style.width = '100%'; | |
} | |
try{iframe_container.appendChild(embed_container)}catch(e){} | |
if (!isIE) { | |
var object = document.createElement("object"); | |
object.className = "player"; | |
object.type = "application/x-shockwave-flash"; | |
object.id = "live_embed_player_flash"; | |
object.data = "http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + input + '&auto_play=true'; | |
var param = document.createElement("param"); | |
param.name = "wmode"; | |
param.value = "transparent"; | |
var param2 = document.createElement("param"); | |
param2.name = "allowFullScreen"; | |
param2.value = "true"; | |
object.appendChild(param); | |
object.appendChild(param2); | |
embed_container.appendChild(object); | |
} | |
else { | |
embed_container.innerHTML = '<object type="application/x-shockwave-flash" height="100%" width="100%"' | |
+ 'id="live_embed_player_flash" class="player" ' | |
+ 'bgcolor="#000000" ' | |
+ 'data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + input + '>' | |
+ '<param name="wmode" value="transparent" />' | |
+ '<param name="allowFullScreen" value="true" />' | |
+ '<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf"/>' | |
+ '<param name="flashvars" value="hostname=www.twitch.tv&channel='+ input + '&auto_play=true&start_volume=25" /></object>'; | |
//embed_container.innerHTML = '<iframe width="100%" height="100%" class="videoplayer" src="http://www.twitch.tv/embed?channel=' | |
// + input + '&wmode=transparent" frameBorder="0" scrolling="no"/>'; | |
} | |
setTheme(); | |
$('#input').val(''); | |
$('#input').blur(); | |
$(drag).draggable({handle: ".handle", stack: ".draggable"}); | |
if (!isOpera12 && !isIE) { | |
$(drag).resizable({handles: "all"}); | |
} else { | |
$(iframe_container).resizable(); | |
} | |
$(".ui-icon-gripsmall-diagonal-se").css("background-image", "url('')"); | |
setDragAndResize(); | |
} | |
$(function() { | |
if(window.opera){ | |
if (opera.version() < 14) { | |
isOpera12 = true; | |
} | |
} | |
setDragAndResize(); | |
$('#form').bind('submit', function(e) { | |
e.preventDefault(); | |
getTwitch(); | |
}) | |
if (!isIE) { | |
$('#input').bind('focus', function(e) { | |
$('#form-container').css('z-index',++z_index); | |
}).bind('blur', function(e) { | |
window.setTimeout(function() { | |
$('#form-container').css('z-index', 0); | |
}, 100); | |
// delay required as clicking submit onfocuses the textbox | |
}); | |
} | |
else { | |
var textbox = document.getElementById('input'); | |
var form_container = document.getElementById('form-container'); | |
var iframe_cover = document.createElement("iframe"); | |
iframe_cover.className = "iframe-cover"; | |
iframe_cover.src = ""; | |
iframe_cover.frameBorder = "0"; | |
textbox.attachEvent('onfocus', function() { | |
form_container.style.zIndex = ++z_index; | |
try{form_container.appendChild(iframe_cover)}catch(e){} | |
}); | |
textbox.attachEvent('onblur', function() { | |
window.setTimeout(function() { | |
form_container.style.zIndex = 0; | |
if (form_container.children[1]) { | |
form_container.removeChild(form_container.children[1]); | |
} | |
}, 100); | |
}); | |
} | |
$(document).keydown(function(e) { | |
var keycode = (e.keyCode ? e.keyCode : e.which); | |
if (e.ctrlKey) { | |
return | |
} | |
else if (e.altKey) { | |
return | |
} | |
else if ('textarea' == e.target.tagName.toLowerCase()) { | |
return | |
} | |
else if ('input' == e.target.tagName.toLowerCase()) { | |
return | |
} | |
else if (keycode >= 97 && keycode <= 122 || keycode >= 48 && keycode <= 57 || keycode >= 65 && keycode <= 90 || keycode == 45 || keycode == 95) { | |
SetCaretAtEnd(document.getElementById('input')); | |
} | |
}); | |
$('#dark-toggle').click(function() { | |
dark = !dark; | |
setTheme(); | |
}); | |
}); | |
function setTheme() { | |
if (dark) { | |
$('body').css('background-color', 'black'); | |
$('body').css('color', 'white'); | |
$('#embed-container').css('background-color', 'black'); | |
$('#dark-toggle').css('background-image', 'url(data:image/jpeg;base64,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)') | |
$('.draggable').css('-webkit-box-shadow', 'rgba(255, 255, 255, 0.35) 0px 0px 5px 0px'); | |
$('.draggable').css('box-shadow', 'rgba(255, 255, 255, 0.35) 0px 0px 5px 0px'); | |
} | |
else { | |
$('body').css('background-color', 'white'); | |
$('body').css('color', 'black'); | |
$('#embed-container').css('background-color', 'white'); | |
$('#dark-toggle').css('background-image', 'url(data:image/jpeg;base64,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)'); | |
$('.draggable').css('-webkit-box-shadow', 'rgba(0, 0, 0, 0.35) 0px 5px 10px 0px'); | |
$('.draggable').css('box-shadow', 'rgba(0, 0, 0, 0.35) 0px 5px 10px 0px'); | |
} | |
} | |
function setDragAndResize() { | |
} | |
// ChrisG at stackoverflow | |
function SetCaretAtEnd(elem) { | |
var elemLen = elem.value.length; | |
// For IE Only | |
if (document.selection) { | |
// Set focus | |
elem.focus(); | |
// Use IE Ranges | |
var oSel = document.selection.createRange(); | |
// Reset position to 0 & then set at end | |
oSel.moveStart('character', -elemLen); | |
oSel.moveStart('character', elemLen); | |
oSel.moveEnd('character', 0); | |
oSel.select(); | |
} | |
else if (elem.selectionStart || elem.selectionStart == '0') { | |
// Firefox/Chrome | |
elem.selectionStart = elemLen; | |
elem.selectionEnd = elemLen; | |
elem.focus(); | |
} // if | |
} // SetCaretAtEnd() | |
</script> | |
<!--[if IE]> | |
<script type="text/javascript"> | |
var isIE=true; | |
</script> | |
<![endif]--> | |
</head> | |
<body> | |
<div id="container"> | |
</div> | |
<div id='dark-toggle'> | |
| |
</div> | |
<h1> | |
Twitch Multi-Channel Viewer | |
</h1> | |
<h2> | |
Double-click to close, drag at edges to resize | |
</h2> | |
<div id="form-container"> | |
<form id="form"> | |
<input type="text" id="input" placeholder="Type name of channel here"> | |
<input type="submit" id="button" value="Get"> | |
</form> | |
</div> | |
<div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@gelguy Can you repo allpick.tv ?