Version 0.2.0

zspri · Jan 20, 2019 · 8851d0e · 8851d0e
1 parent 40de910
commit 8851d0e
Show file tree

Hide file tree

Showing 8 changed files with 585 additions and 508 deletions.
diff --git a/README.md b/README.md
@@ -1,26 +1,24 @@
 # TwitchOverlay
 
-A custom Twitch IRC client built with Electron
+A custom Twitch chat client built with Electron with a built-in stream player.
 
-![image](https://discord-is-down.party/MIIuECnN.png)
+![image](https://cdn.discordapp.com/attachments/376375897109954560/536553108747321354/unknown.png)
 
 ## Requirements
 
  - Windows (64-bit)
 
-### Dev requirements
-
-- Node 8 or above
-- Electron 2.0.4
-- electron-builder
-
 ## Installing
 
-### Production (regular users)
+Go to the [releases](https://github.com/devakira/TwitchOverlay/releases) page and download 'TwitchOverlay (version).exe' to use the production build.
 
-Go to the [releases](https://github.com/devakira/TwitchOverlay/releases) page and download 'TwitchOverlay (version).exe'
+### Development Build
 
-### Development
+#### Dev requirements
+
+- Node 10 or above
+- Electron 4
+- electron-builder
 
 ```sh
 git clone https://github.com/devakira/TwitchOverlay

diff --git a/assets/style.css b/assets/style.css
@@ -6,6 +6,9 @@ body {
     background-color: rgba(14, 12, 19, .90);
     color: #dad8de;
     font-size: .8em;
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
 }
 
 .channel-header {
@@ -14,6 +17,7 @@ body {
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
     user-select: none;
     cursor: default;
+    flex: auto 0 0;
 }
 
 .channel-header .settings-btn {
@@ -27,10 +31,11 @@ body {
 }
 
 .msg-box {
-    position: absolute;
+    /*position: absolute;
     bottom: 0;
     left: 0;
-    right: 0;
+    right: 0;*/
+    flex: auto 0 0;
     padding: .8rem;
     border-top: 1px solid rgba(255,255,255,.1);
 }
@@ -66,11 +71,12 @@ body {
 }
 
 .msg-container {
-    position: absolute;
+    /*position: absolute;
     bottom: 55px;
     top: 42px;
     left: 0;
-    right: 0;
+    right: 0;*/
+    flex: 225px 0 0;
     overflow-y: scroll;
     padding: 0 .8rem;
     overflow-x: hidden;
@@ -174,6 +180,10 @@ h4 {
     margin-left: 5px;
 }
 
+.twitch-embed {
+    border: none;
+}
+
 input[type=range] {
     background-color: rgba(255,255,255,.5);
     -webkit-appearance: none;

diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
     <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
     <script src="assets/jquery.min.js"></script>
+    <script src="https://player.twitch.tv/js/embed/v1.js"></script>
 </head>
 <body>
     <div class="channel-header">
@@ -21,6 +22,7 @@
             <i class="fas fa-location-arrow send-button"></i>
         </div>
     </div>
+    <div id="twitch-embed"></div>
     <script>var renderer = require('./renderer.js')</script>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -5,7 +5,7 @@ let mainWindow, tray;
 app.on('ready', () => {
     const screen = require('electron').screen;
     mainWindow = new BrowserWindow({
-        height: 425,
+        height: 480,
         width: 275,
         frame: false,
         resizable: false,