Skip to content

Instantly share code, notes, and snippets.

@gelguy

gelguy/twitch

Last active June 3, 2016 12:59
Show Gist options
  • Save gelguy/6408143 to your computer and use it in GitHub Desktop.
Save gelguy/6408143 to your computer and use it in GitHub Desktop.
Download ZIP
Twitch TV multi-channel viewer by atr1 v1.04.2
Raw
twitch
<!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'>
&nbsp;
</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>
@dinu
Copy link

dinu commented Jul 1, 2015

@gelguy Can you repo allpick.tv ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment