Always include both online and local twitch-ext (#19)

The Developer Rig's local implementation of twitch-ext will activate itself only in local mode. This obviates the need for separate local and online files. The Developer Rig will no longer attempt to copy files from sub-directories.
twitchdev · Sep 20, 2018 · a6b0648 · a6b0648
1 parent 32f62e6
commit a6b0648
Show file tree

Hide file tree

Showing 17 changed files with 135 additions and 265 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,13 +1,6 @@
 # Temporary files
 *.sw[op]
 
-# Files copied from sub-directories
-public/config.html
-public/live_config.html
-public/panel.html
-public/video_component.html
-public/video_overlay.html
-
 # Configuration
 conf/*
 .DS_Store

diff --git a/public/config.html b/public/config.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Config Page</title>
+</head>
+<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
+    <div id="app"></div>
+    <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
+    <!-- TODO:  remove the following script tag before submitting to Twitch for testing or production. -->
+    <script src="https://localhost.rig.twitch.tv:3000/twitch-ext.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
+            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+            crossorigin="anonymous"></script>
+    <script src="config.js" type="text/javascript"></script>
+    <h2>Configure This</h2>
+    <p>Just kidding... hello world.</p>
+</body>
+</html>
diff --git a/public/helper.js b/public/helper.js
@@ -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);
diff --git a/public/live_config.html b/public/live_config.html
@@ -0,0 +1,27 @@
+<!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>
+    <!-- TODO:  remove the following script tag before submitting to Twitch for testing or production. -->
+    <script src="https://localhost.rig.twitch.tv:3000/twitch-ext.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
+            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+            crossorigin="anonymous"></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>
diff --git a/public/local/config.html b/public/local/config.html
diff --git a/public/local/live_config.html b/public/local/live_config.html
diff --git a/public/local/panel.html b/public/local/panel.html
diff --git a/public/local/video_component.html b/public/local/video_component.html
diff --git a/public/local/video_overlay.html b/public/local/video_overlay.html
diff --git a/public/online/config.html b/public/online/config.html
diff --git a/public/online/live_config.html b/public/online/live_config.html
diff --git a/public/online/panel.html b/public/online/panel.html
diff --git a/public/online/video_component.html b/public/online/video_component.html
diff --git a/public/online/video_overlay.html b/public/online/video_overlay.html
diff --git a/public/panel.html b/public/panel.html
@@ -0,0 +1,27 @@
+<!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>
+    <!-- TODO:  remove the following script tag before submitting to Twitch for testing or production. -->
+    <script src="https://localhost.rig.twitch.tv:3000/twitch-ext.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
+            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+            crossorigin="anonymous"></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>
diff --git a/public/video_component.html b/public/video_component.html
@@ -0,0 +1,27 @@
+<!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>
+    <!-- TODO:  remove the following script tag before submitting to Twitch for testing or production. -->
+    <script src="https://localhost.rig.twitch.tv:3000/twitch-ext.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
+            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+            crossorigin="anonymous"></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>