init commit
This commit is contained in:
zino
12
twitch_extension_delete/live/public/config.js
Normal file
12
twitch_extension_delete/live/public/config.js
Normal file
@@ -0,0 +1,12 @@
|
||||
let token, userId;
|
||||
|
||||
const twitch = window.Twitch.ext;
|
||||
|
||||
twitch.onContext((context) => {
|
||||
twitch.rig.log(context);
|
||||
});
|
||||
|
||||
twitch.onAuthorized((auth) => {
|
||||
token = auth.token;
|
||||
userId = auth.userId;
|
||||
});
|
||||
9
twitch_extension_delete/live/public/helper.js
Normal file
9
twitch_extension_delete/live/public/helper.js
Normal file
@@ -0,0 +1,9 @@
|
||||
window.addEventListener('message', (event) => {
|
||||
console.log(event);
|
||||
});
|
||||
//debugger;
|
||||
//const local = window.frameElement.attributes.getNamedItem('helperUrl');
|
||||
//const online = 'https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js';
|
||||
//const el = document.createElement('script');
|
||||
//el.src = local ? local.value : online;
|
||||
//document.head.appendChild(el);
|
||||
2
twitch_extension_delete/live/public/jquery-3.3.1.min.js
vendored
Normal file
2
twitch_extension_delete/live/public/jquery-3.3.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
26
twitch_extension_delete/live/public/live_config.html
Normal file
26
twitch_extension_delete/live/public/live_config.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Live Config (Broadcaster) Page</title>
|
||||
</head>
|
||||
<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
|
||||
<div id="app" class="full-height"></div>
|
||||
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
|
||||
<!-- If you use any external libraries, such as jQuery, you must include
|
||||
them as part of your extension. Twitch does not allow extensions to link
|
||||
to external libraries. -->
|
||||
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
|
||||
<script src="viewer.js" type="text/javascript"></script>
|
||||
<h2>And We're Live!</h2>
|
||||
<p>Would you care to cycle a color?</p>
|
||||
<div>
|
||||
<input type="button" id="cycle" disabled="disabled" value="Yes, I would" />
|
||||
</div>
|
||||
<div style="float: left; position: relative; left: 50%">
|
||||
<div id="color" style="border-radius: 50px; transition: background-color 0.5s ease; margin-top: 30px; width: 100px; height: 100px; background-color: #6441A4; float: left; position: relative; left: -50%">
|
||||
</div>
|
||||
</div>
|
||||
<div id="list">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
26
twitch_extension_delete/live/public/mobile.html
Normal file
26
twitch_extension_delete/live/public/mobile.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Viewer Page</title>
|
||||
</head>
|
||||
<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
|
||||
<div id="app" class="full-height"></div>
|
||||
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
|
||||
<!-- If you use any external libraries, such as jQuery, you must include
|
||||
them as part of your extension. Twitch does not allow extensions to link
|
||||
to external libraries. -->
|
||||
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
|
||||
<script src="viewer.js" type="text/javascript"></script>
|
||||
<h2>Hello, World!</h2>
|
||||
<p>Would you care to cycle a color?</p>
|
||||
<div>
|
||||
<input type="button" id="cycle" disabled="disabled" value="Yes, I would" />
|
||||
</div>
|
||||
<div style="float: left; position: relative; left: 50%">
|
||||
<div id="color" style="border-radius: 50px; transition: background-color 0.5s ease; margin-top: 30px; width: 100px; height: 100px; background-color: #6441A4; float: left; position: relative; left: -50%">
|
||||
</div>
|
||||
</div>
|
||||
<div id="list">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
26
twitch_extension_delete/live/public/panel.html
Normal file
26
twitch_extension_delete/live/public/panel.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Viewer Page</title>
|
||||
</head>
|
||||
<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
|
||||
<div id="app" class="full-height"></div>
|
||||
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
|
||||
<!-- If you use any external libraries, such as jQuery, you must include
|
||||
them as part of your extension. Twitch does not allow extensions to link
|
||||
to external libraries. -->
|
||||
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
|
||||
<script src="viewer.js" type="text/javascript"></script>
|
||||
<h2>Hello, World!</h2>
|
||||
<p>Would you care to cycle a color?</p>
|
||||
<div>
|
||||
<input type="button" id="cycle" disabled="disabled" value="Yes, I would" />
|
||||
</div>
|
||||
<div style="float: left; position: relative; left: 50%">
|
||||
<div id="color" style="border-radius: 50px; transition: background-color 0.5s ease; margin-top: 30px; width: 100px; height: 100px; background-color: #6441A4; float: left; position: relative; left: -50%">
|
||||
</div>
|
||||
</div>
|
||||
<div id="list">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
94
twitch_extension_delete/live/public/player.html
Normal file
94
twitch_extension_delete/live/public/player.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Viewer Page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>-->
|
||||
<!-- If you use any external libraries, such as jQuery, you must include
|
||||
them as part of your extension. Twitch does not allow extensions to link
|
||||
to external libraries. -->
|
||||
<!--<script src="jquery-3.3.1.min.js" type="text/javascript"></script>-->
|
||||
<!--<script src="viewer.js" type="text/javascript"></script>-->
|
||||
<!--<link rel="stylesheet" href="style.css">-->
|
||||
|
||||
<div id="playerContainer">
|
||||
<div id="playerItem1" class="module">
|
||||
<i class="fas fa-baseball-ball"></i>
|
||||
<h1>12</h1>
|
||||
<h5>Aggression Factor (AF)</h5>
|
||||
</div>
|
||||
|
||||
<div id="playerItem2" class="module">
|
||||
<i class="fas fa-baseball-ball"></i>
|
||||
<h1>12%</h1>
|
||||
<h5>Aggression Factor (AF)</h5>
|
||||
</div>
|
||||
|
||||
<div id="playerItem3" class="module">
|
||||
<i class="fas fa-baseball-ball"></i>
|
||||
<h1>8</h1>
|
||||
<h5>Aggression Factor (AF)</h5>
|
||||
</div>
|
||||
|
||||
<div id="playerItem4" class="module">
|
||||
<i class="fas fa-baseball-ball"></i>
|
||||
<h1>7</h1>
|
||||
<h5>Aggression Factor (AF)</h5>
|
||||
</div>
|
||||
|
||||
<div id="playerItem5" class="module">
|
||||
<i class="fas fa-baseball-ball"></i>
|
||||
<h1>8</h1>
|
||||
<h5>Aggression Factor (AF)</h5>
|
||||
</div>
|
||||
|
||||
<div id="playerItem6" class="module">
|
||||
<i class="fas fa-baseball-ball"></i>
|
||||
<h1>22</h1>
|
||||
<h5>Aggression Factor (AF)</h5>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="grid">-->
|
||||
|
||||
<!-- <div class="module">1</div>-->
|
||||
<!-- <div class="module">2</div>-->
|
||||
<!-- <div class="module">3</div>-->
|
||||
<!-- <div class="module">4</div>-->
|
||||
<!-- <div class="module">5</div>-->
|
||||
<!-- <div class="module">6</div>-->
|
||||
<!-- <div class="module">7</div>-->
|
||||
<!-- <div class="module">8</div>-->
|
||||
<!-- <div class="module">9</div>-->
|
||||
<!-- <div class="module">10</div>-->
|
||||
<!-- <div class="module">11</div>-->
|
||||
<!-- <div class="module">12</div>-->
|
||||
<!-- <div class="module">13</div>-->
|
||||
<!-- <div class="module">14</div>-->
|
||||
<!-- <div class="module">15</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<h2>Hello, World!</h2>-->
|
||||
<!--<p>Would you care to cycle a color?</p>-->
|
||||
<!--<div>-->
|
||||
<!-- <input type="button" id="cycle" disabled="disabled" value="Yes, I would" />-->
|
||||
<!--</div>-->
|
||||
<!--<div style="float: left; position: relative; left: 50%">-->
|
||||
<!-- <div id="color" style="border-radius: 50px; transition: background-color 0.5s ease; margin-top: 30px; width: 100px; height: 100px; background-color: #6441A4; float: left; position: relative; left: -50%">-->
|
||||
<!-- </div>-->
|
||||
<!--</div>-->
|
||||
<!--<div id="list">-->
|
||||
<!--</div>-->
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
145
twitch_extension_delete/live/public/style.css
Normal file
145
twitch_extension_delete/live/public/style.css
Normal file
@@ -0,0 +1,145 @@
|
||||
#container {
|
||||
display: grid;
|
||||
grid-template-columns: 500px;
|
||||
grid-template-rows: 50px 400px 50px;
|
||||
}
|
||||
|
||||
#item1 {
|
||||
background: red;
|
||||
}
|
||||
|
||||
#main {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
#item3 {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
nav.primary-navigation {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
nav.primary-navigation ul li {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
border-left: 2px solid #3ca0e7;
|
||||
display: inline-block;
|
||||
padding: 0 30px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-family: arvo;
|
||||
}
|
||||
|
||||
nav.primary-navigation li a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
nav.primary-navigation li a:hover {
|
||||
color: #3ca0e7;
|
||||
}
|
||||
|
||||
nav.primary-navigation li:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav.primary-navigation ul li ul {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
padding-left: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
nav.primary-navigation ul li:hover>ul,
|
||||
nav.primary-navigation ul li ul:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
min-width: 250px;
|
||||
text-align: left;
|
||||
padding-top: 20px;
|
||||
box-shadow: 0px 3px 5px -1px #ccc;
|
||||
}
|
||||
|
||||
nav.primary-navigation ul li ul li {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
nav.primary-navigation ul li ul li a:hover {
|
||||
padding-left: 10px;
|
||||
border-left: 2px solid #3ca0e7;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #3ca0e7;
|
||||
}
|
||||
|
||||
ul li ul li a {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
div#playerContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"playerItem1 playerItem2 playerItem3"
|
||||
"playerItem4 playerItem5 playerItem6"
|
||||
}
|
||||
|
||||
.module {
|
||||
background: #ccc;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.module i {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.blurred-box{
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 350px;
|
||||
top: calc(50% - 175px);
|
||||
left: calc(50% - 125px);
|
||||
background: inherit;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blurred-box:after{
|
||||
content: '';
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: inherit;
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
left position
|
||||
right: 0;
|
||||
top: -25px;
|
||||
top position
|
||||
bottom: 0;
|
||||
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.05);
|
||||
filter: blur(10px);
|
||||
}
|
||||
26
twitch_extension_delete/live/public/video_component.1.html
Normal file
26
twitch_extension_delete/live/public/video_component.1.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Viewer Page</title>
|
||||
</head>
|
||||
<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
|
||||
<div id="app" class="full-height"></div>
|
||||
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
|
||||
<!-- If you use any external libraries, such as jQuery, you must include
|
||||
them as part of your extension. Twitch does not allow extensions to link
|
||||
to external libraries. -->
|
||||
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
|
||||
<script src="viewer.js" type="text/javascript"></script>
|
||||
<h2>Hello, World!</h2>
|
||||
<p>Would you care to cycle a color?</p>
|
||||
<div>
|
||||
<input type="button" id="cycle" disabled="disabled" value="Yes, I would" />
|
||||
</div>
|
||||
<div style="float: left; position: relative; left: 50%">
|
||||
<div id="color" style="border-radius: 50px; transition: background-color 0.5s ease; margin-top: 30px; width: 100px; height: 100px; background-color: #6441A4; float: left; position: relative; left: -50%">
|
||||
</div>
|
||||
</div>
|
||||
<div id="list">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
61
twitch_extension_delete/live/public/video_component3.html
Normal file
61
twitch_extension_delete/live/public/video_component3.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Viewer Page</title>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
|
||||
<!-- If you use any external libraries, such as jQuery, you must include
|
||||
them as part of your extension. Twitch does not allow extensions to link
|
||||
to external libraries. -->
|
||||
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
|
||||
<script src="viewer.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<div id="container">
|
||||
<div id="item1">
|
||||
|
||||
<nav role="navigation" class="primary-navigation">
|
||||
<ul>
|
||||
<li><a href="#" id="player">player</a></li>
|
||||
<li><a href="#">Work ▾</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Web Development</a></li>
|
||||
<li><a href="#">Web Design</a></li>
|
||||
<li><a href="#">Illustration</a></li>
|
||||
<li><a href="#">Iconography</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<div id="main">2</div>
|
||||
<div id="item3">3</div>
|
||||
</div>
|
||||
|
||||
<!--<h2>Hello, World!</h2>-->
|
||||
<!--<p>Would you care to cycle a color?</p>-->
|
||||
<!--<div>-->
|
||||
<!-- <input type="button" id="cycle" disabled="disabled" value="Yes, I would" />-->
|
||||
<!--</div>-->
|
||||
<!--<div style="float: left; position: relative; left: 50%">-->
|
||||
<!-- <div id="color" style="border-radius: 50px; transition: background-color 0.5s ease; margin-top: 30px; width: 100px; height: 100px; background-color: #6441A4; float: left; position: relative; left: -50%">-->
|
||||
<!-- </div>-->
|
||||
<!--</div>-->
|
||||
<!--<div id="list">-->
|
||||
<!--</div>-->
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
26
twitch_extension_delete/live/public/video_overlay.html
Normal file
26
twitch_extension_delete/live/public/video_overlay.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Viewer Page</title>
|
||||
</head>
|
||||
<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
|
||||
<div id="app" class="full-height"></div>
|
||||
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
|
||||
<!-- If you use any external libraries, such as jQuery, you must include
|
||||
them as part of your extension. Twitch does not allow extensions to link
|
||||
to external libraries. -->
|
||||
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
|
||||
<script src="viewer.js" type="text/javascript"></script>
|
||||
<h2>Hello, World!</h2>
|
||||
<p>Would you care to cycle a color?</p>
|
||||
<div>
|
||||
<input type="button" id="cycle" disabled="disabled" value="Yes, I would" />
|
||||
</div>
|
||||
<div style="float: left; position: relative; left: 50%">
|
||||
<div id="color" style="border-radius: 50px; transition: background-color 0.5s ease; margin-top: 30px; width: 100px; height: 100px; background-color: #6441A4; float: left; position: relative; left: -50%">
|
||||
</div>
|
||||
</div>
|
||||
<div id="list">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
76
twitch_extension_delete/live/public/viewer.1.js
Normal file
76
twitch_extension_delete/live/public/viewer.1.js
Normal file
@@ -0,0 +1,76 @@
|
||||
var token = "";
|
||||
var tuid = "";
|
||||
var ebs = "";
|
||||
|
||||
// because who wants to type this every time?
|
||||
var twitch = window.Twitch.ext;
|
||||
|
||||
// create the request options for our Twitch API calls
|
||||
var requests = {
|
||||
set: createRequest('POST', 'cycle'),
|
||||
get: createRequest('GET', 'query')
|
||||
};
|
||||
|
||||
function createRequest(type, method) {
|
||||
|
||||
return {
|
||||
type: type,
|
||||
url: location.protocol + '//localhost:8081/color/' + method,
|
||||
success: updateBlock,
|
||||
error: logError
|
||||
}
|
||||
}
|
||||
|
||||
function setAuth(token) {
|
||||
Object.keys(requests).forEach((req) => {
|
||||
twitch.rig.log('Setting auth headers');
|
||||
requests[req].headers = { 'Authorization': 'Bearer ' + token }
|
||||
});
|
||||
}
|
||||
|
||||
twitch.onContext(function(context) {
|
||||
twitch.rig.log(context);
|
||||
});
|
||||
|
||||
twitch.onAuthorized(function(auth) {
|
||||
// save our credentials
|
||||
token = auth.token;
|
||||
tuid = auth.userId;
|
||||
|
||||
// enable the button
|
||||
$('#cycle').removeAttr('disabled');
|
||||
|
||||
setAuth(token);
|
||||
$.ajax(requests.get);
|
||||
});
|
||||
|
||||
function updateBlock(hex) {
|
||||
twitch.rig.log('Updating block color');
|
||||
$('#color').css('background-color', hex);
|
||||
}
|
||||
|
||||
function logError(_, error, status) {
|
||||
twitch.rig.log('EBS request returned '+status+' ('+error+')');
|
||||
}
|
||||
|
||||
function logSuccess(hex, status) {
|
||||
// we could also use the output to update the block synchronously here,
|
||||
// but we want all views to get the same broadcast response at the same time.
|
||||
twitch.rig.log('EBS request returned '+hex+' ('+status+')');
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
// when we click the cycle button
|
||||
$('#cycle').click(function() {
|
||||
if(!token) { return twitch.rig.log('Not authorized'); }
|
||||
twitch.rig.log('Requesting a color cycle');
|
||||
$.ajax(requests.set);
|
||||
});
|
||||
|
||||
// listen for incoming broadcast message from our EBS
|
||||
twitch.listen('broadcast', function (target, contentType, color) {
|
||||
twitch.rig.log('Received broadcast color');
|
||||
updateBlock(color);
|
||||
});
|
||||
});
|
||||
9
twitch_extension_delete/live/public/viewer.js
Normal file
9
twitch_extension_delete/live/public/viewer.js
Normal file
@@ -0,0 +1,9 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#player").click(function() {
|
||||
console.log("loading into main");
|
||||
$("#main").load("player.html");
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user