Release 0.3.0

README.md

@@ -1,4 +1,7 @@
-# TwitchOverlay
+# [TwitchOverlay](https://overlay.twitchbot.io)
+
+![](https://img.shields.io/github/release/devakira/twitchoverlay.svg?colorB=g&style=flat-square)
+![](https://img.shields.io/github/downloads/devakira/twitchoverlay/total.svg?colorB=blue&style=flat-square)
 
 A custom, minimal Twitch client and stream player made with Electron.
 
@@ -10,7 +13,7 @@ A custom, minimal Twitch client and stream player made with Electron.
 
 ## Installing
 
-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.exe' to use the production build.
 
 ### Development Build
 
@@ -35,7 +38,7 @@ As of Sept. 17, 2013, Twitch now requires that you log into IRC using an OAuth t
 
 ```sh
 npm install
-electron-builder --windows portable
+./node_modules/.bin/build --windows portable
 ```
 
 This will generate an executable at `./dist/TwitchOverlay (version).exe`.

assets/style.css

@@ -11,18 +11,31 @@ body {
     overflow-x: hidden;
 }
 
+body.nochat .msg-box, body.nochat .msg-container {
+    display: none;
+}
+
+body.nochat .chat-collapser {
+    transform: rotate(180deg);
+}
+
 .channel-header {
     padding: .8rem;
     border-bottom: 1px solid rgba(255,255,255,.1);
     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;
+    -webkit-app-region: drag;
 }
 
-.channel-header .settings-btn {
+.settings-btn, .chat-collapser {
     float: right;
     cursor: pointer;
+    margin-left: .8rem;
+    transform: rotate(0deg);
+    transition: transform .3s;
+    -webkit-app-region: no-drag;
 }
 
 .loader {
@@ -31,10 +44,6 @@ body {
 }
 
 .msg-box {
-    /*position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;*/
     flex: auto 0 0;
     padding: .8rem;
     border-top: 1px solid rgba(255,255,255,.1);
@@ -71,11 +80,6 @@ body {
 }
 
 .msg-container {
-    /*position: absolute;
-    bottom: 55px;
-    top: 42px;
-    left: 0;
-    right: 0;*/
     flex: 225px 0 0;
     overflow-y: scroll;
     padding: 0 .8rem;
@@ -185,7 +189,7 @@ h4 {
 }
 
 input[type=range] {
-    background-color: rgba(255,255,255,.5);
+    background-color: #232127;
     -webkit-appearance: none;
     height: 5px;
     border-radius: 5px;

index.html

@@ -13,6 +13,7 @@
          
         <i class="fas fa-sync loader"></i>
         <i class="fas fa-cog settings-btn"></i>
+        <i class="fas fa-chevron-up chat-collapser"></i>
     </div>
     <div class="msg-container">
     </div>

main.js → index.js

@@ -1,4 +1,4 @@
-const {app, BrowserWindow, Tray, process, Menu, globalShortcut} = require('electron');
+const {app, BrowserWindow, Tray, process, Menu, globalShortcut, shell} = require('electron');
 
 let mainWindow, tray;
 
@@ -23,30 +23,37 @@ app.on('ready', () => {
             mainWindow.show();
             var display = screen.getPrimaryDisplay();
             // Position at top-right
-            mainWindow.setPosition(display.bounds.width - windowSize[0], 0);
+            mainWindow.setPosition(display.bounds.width - mainWindow.getSize()[0], 0);
             mainWindow.setAlwaysOnTop(true);
         }
     });
 
-    tray = new Tray('assets/tray.png');
+    tray = new Tray('tray.png');
     tray.setToolTip('Twitch overlay activated. Press Ctrl + ` to show.');
     const trayContextMenu = Menu.buildFromTemplate([
-        {type: "normal", label: `TwitchOverlay v${app.getVersion()}`, enabled: false},
+        {label: `TwitchOverlay v${app.getVersion()}`, enabled: false},
         {type: "separator"},
-        {type: "normal", label: "Quit Application", role: "quit"}
+        {label: "Website", click: () => {shell.openExternal('https://overlay.twitchbot.io')}},
+        {label: "Source code", click: () => {shell.openExternal('https://github.com/devakira/twitchoverlay')}},
+        {type: "separator"},
+        {label: "Toggle Chat", click: () => {
+            mainWindow.webContents.executeJavaScript(`renderer.toggleChat()`);
+        }},
+        {label: "Settings", click: () => {mainWindow.loadURL('file://' + __dirname + '/settings.html');}},
+        {type: "separator"},
+        {label: "Quit Application", role: "quit"}
     ]);
     tray.setContextMenu(trayContextMenu);
     const trayBounds = tray.getBounds();
-    const windowSize = mainWindow.getSize();
     var display = screen.getPrimaryDisplay();
     // Position at top-right
-    mainWindow.setPosition(display.bounds.width - windowSize[0], 0);
+    mainWindow.setPosition(display.bounds.width - mainWindow.getSize()[0], 0);
 
     tray.on('click', () => {
         mainWindow.show();
         var display = screen.getPrimaryDisplay();
         // Position at top-right
-        mainWindow.setPosition(display.bounds.width - windowSize[0], 0);
+        mainWindow.setPosition(display.bounds.width - mainWindow.getSize()[0], 0);
         mainWindow.setAlwaysOnTop(true);
     });
 
@@ -56,14 +63,29 @@ app.on('ready', () => {
 
     mainWindow.on('closed', () => {
         app.quit();
-    })
+    });
 
     mainWindow.on('resize', () => {
         var display = screen.getPrimaryDisplay();
         // Position at top-right
-        mainWindow.setPosition(display.bounds.width - windowSize[0], 0);
+        mainWindow.setPosition(display.bounds.width - mainWindow.getSize()[0], 0);
         mainWindow.setAlwaysOnTop(true);
-    })
+    });
+
+    mainWindow.on('enter-html-full-screen', () => {
+        mainWindow.setPosition(0, 0);
+    });
+
+    mainWindow.on('leave-html-full-screen', () => {
+        var display = screen.getPrimaryDisplay();
+        // Position at top-right
+        mainWindow.setPosition(display.bounds.width - mainWindow.getSize()[0], 0);
+    });
+
+    mainWindow.webContents.on('new-window', function(event, url){
+      event.preventDefault();
+      shell.openExternal(url);
+    });
 });
 
 app.on("window-all-closed", () => {