Merge pull request #29 from DeekyJay/interactive2

Moved to Interactive 2.0

README.md

@@ -1,9 +1,9 @@
 # Soundwave Interactive
-The Interactive Sound Board for Beam
+The Interactive Sound Board for Mixer
 Like this project and want to support me? [Paypal](https://www.paypal.me/deekyjay/20USD)
 
 ## Description
-Not all the interactive streams on Beam have to be playing a game!
+Not all the interactive streams on Mixer have to be playing a game!
 Want to get your viewers interacting with you while you stream?
 Let them spice up the stream by triggering sound effects of your choice!
 

main.js

@@ -86,7 +86,6 @@ app.on('ready', () => {
 
   // Load IPC handler
   require(utilsPath + '/ipcHandler')
-  require(utilsPath + '/jumper')
 
   mainWindow.on('closed', () => {
     mainWindow = null

package.json

@@ -1,7 +1,7 @@
 {
   "name": "SoundwaveInteractive",
-  "version": "0.9.12",
-  "description": "Soundwave Interactive Beam Soundboard",
+  "version": "0.9.15",
+  "description": "Soundwave Interactive Mixer Soundboard",
   "main": "main.js",
   "engines": {
     "node": ">=4.2.0",
@@ -29,7 +29,7 @@
       "icon": "icons"
     },
     "asar": true,
-    "copyright": "Copyright © 2016 Derek Jensen"
+    "copyright": "Copyright © 2017 Derek Jensen"
   },
   "scripts": {
     "compile:prod": "better-npm-run compile:prod",
@@ -48,7 +48,8 @@
     "package-linux": "cross-env NODE_ENV=production yarn run dist:pre && build --linux",
     "package-darwin": "cross-env NODE_ENV=production yarn run dist:pre && build --mac",
     "package-win32": "cross-env NODE_ENV=production yarn run dist:pre && build --win",
-    "package-all": "cross-env NODE_ENV=production yarn run dist:pre && build -mwl"
+    "package-all": "cross-env NODE_ENV=production yarn run dist:pre && build -mwl",
+    "package-win32-32": "cross-env NODE_ENV=production yarn run dist:pre && build --win --ia32"
   },
   "bin": {
     "electron": "./node_modules/.bin/electron"
@@ -112,8 +113,8 @@
   "companyName": "Derek Jensen",
   "dependencies": {
     "babel-polyfill": "^6.7.4",
-    "beam-client-node": "^0.8.0",
-    "beam-interactive-node": "^0.3.2",
+    "beam-client-node": "0.13.0",
+    "beam-interactive-node2": "^1.0.1",
     "cuid": "^1.3.8",
     "electron-gh-releases": "^2.0.4",
     "electron-json-storage": "^2.1.0",
@@ -147,7 +148,7 @@
     "react-router": "^2.0.0",
     "react-router-redux": "^4.0.0",
     "react-slider": "^0.7.0",
-    "react-sortable-hoc": "^0.2.0",
+    "react-sortable-hoc": "0.6.3",
     "react-tooltip": "^3.0.8",
     "redux": "^3.0.0",
     "redux-auth-wrapper": "^0.3.0",
@@ -157,7 +158,8 @@
     "redux-thunk": "^2.1.0",
     "sprintf-js": "^1.0.3",
     "validate.js": "^0.9.0",
-    "webpack-target-electron-renderer": "^0.4.0"
+    "webpack-target-electron-renderer": "^0.4.0",
+    "winston": "^2.3.1"
   },
   "devDependencies": {
     "babel-cli": "^6.5.1",
@@ -184,7 +186,7 @@
     "css-loader": "^0.23.0",
     "cssnano": "^3.3.2",
     "debug": "^2.2.0",
-    "electron": "1.5.0",
+    "electron": "1.6.8",
     "electron-builder": "^13.9.0",
     "electron-builder-squirrel-windows": "^13.10.1",
     "electron-debug": "^1.1.0",

src/app.config.js

@@ -1,5 +1,5 @@
 
-// const DEV_API_PATH = 'http://localhost:3000/api/v1'
+// const DEV_API_PATH = 'http://localhost:3000/'
 const DEV_API_PATH = 'http://soundwave.deek.io/api/v1'
 const PROD_API_PATH = 'http://soundwave.deek.io/api/v1'
 const API_BASE_URL =  process.env.NODE_ENV === 'development' ? DEV_API_PATH : PROD_API_PATH

src/containers/Analytics.js

@@ -29,7 +29,7 @@ export class Analytics extends React.Component {
           </div>
           <div className='form-info'>* The data uploaded includes the following: Total sparks spent, total
               sounds imported, total profiles created, current amount of sounds imported, current amount of profiles,
-               total sound plays, and total connects to Beam. This information is publicly available.
+               total sound plays, and total connects to Mixer. This information is publicly available.
           </div>
         </div>
       </div>

src/containers/Audio.js

@@ -29,7 +29,7 @@ export class Audio extends React.Component {
 
   componentWillReceiveProps (props) {
     if (this.props.globalVolume !== props.globalVolume) {
-      this.setState({ ...this.state, globalVolume: props.globalVolume})
+      this.setState({ ...this.state, globalVolume: props.globalVolume })
     }
   }
 
@@ -61,7 +61,7 @@ export class Audio extends React.Component {
               {outputs && outputs.length
                 ? outputs.map(o => {
                   return (
-                    <option key={o.deviceId} value={o.deviceId}>{o.label}</option>
+                    <option key={o.deviceId} value={o.label}>{o.label}</option>
                   )
                 })
                 : null}
@@ -77,12 +77,12 @@ export class Audio extends React.Component {
               onChange={this.setVolume} />
             <span className='volume'>{globalVolume}%</span>
           </div>
-          { /* <div
+          <div
             className='form-group'
             onClick={this.checkChanged}>
             <span className='checkbox-label'>Minimize to System Tray</span>
             <span className={`custom-checkbox ${trayMinimize ? 'sicon-round-check' : ''}`}></span>
-          </div> */ }
+          </div>
         </div>
       </div>
     )

src/containers/BoardEditor.js

@@ -11,7 +11,7 @@ import _ from 'lodash'
 import Ink from '../components/Ink'
 import { ContextMenu, Item, Separator, ContextMenuProvider } from 'react-contexify'
 
-const largeGrid = DevLabUtil.makeGrid(16, 4)
+const largeGrid = DevLabUtil.makeGrid(80, 20)
 
 export class BoardEditor extends React.Component {
 
@@ -102,7 +102,7 @@ export class BoardEditor extends React.Component {
             {isGameCreating
               ? <div className='loading'></div>
               : <span>
-                Looks like you don't have a soundboard game in the Beam Dev Labs.
+                Looks like you don't have a soundboard game in the Interactive Studio.
                 <div className='add-game-container'>
                   <span className='add-game' onClick={this.createGame}>Create Soundboard<Ink /></span>
                 </div>
@@ -134,7 +134,7 @@ export class BoardEditor extends React.Component {
           ? <div className='board-editor-wrapper'>
             <div className='board-background-grid'>
               <div className='board-wrapper'>
-                {this.renderBackgroundGridDetails('large', 16, 30, 600, [4, 4], 'grid-box')}
+                 { /* this.renderBackgroundGridDetails('large', 80, 7.5, 600, [0, 0], 'grid-box') */ }
                 {large_grid && large_grid.length
                   ? this.renderProfileGrid(large_grid)
                   : null}
@@ -147,7 +147,7 @@ export class BoardEditor extends React.Component {
                 <div className={!this.isProfileLocked() ? 'sicon-lock' : 'sicon-unlock'}></div>
                 <Ink />
               </div>
-              <div className='board-action fetch' data-tip='Load Changes from Beam' onClick={this.getGame}>
+              <div className='board-action fetch' data-tip='Load Changes from Mixer' onClick={this.getGame}>
                 <div className='sicon-cloud-fetch'></div>
                 <Ink />
               </div>
@@ -194,58 +194,30 @@ export class BoardEditor extends React.Component {
       <ReactGridLayout
         layout={large_grid}
         className='profile-grid large'
-        cols={16}
-        rowHeight={30}
-        maxRows={4}
+        cols={80}
+        rowHeight={7.5}
         width={600}
-        margin={[4, 4]}
+        margin={[0, 0]}
         verticalCompact>
         {
           large_grid.map((button) => {
-            const clickSound = this.playSound.bind(this, button.i)
+            const clickSound = button.name !== 'Unassigned' ? this.playSound.bind(this, button.i) : () => {}
             return (
-              <div key={button.i} className='grid-button' onClick={clickSound} >
+              <div key={button.i} className={`grid-button ${button.hover ? 'hover' : ''}`} onClick={clickSound} >
                 <ContextMenuProvider id={'context-sound ' + button.i} >
                   <div className='button-number'>#{button.i}</div>
                   <div className='button-name'>{button.name}</div>
                   <span className={`tactile tactile|${button.i}`}></span>
                   <Ink className={`tactile tactile|${button.i}`} />
                 </ContextMenuProvider>
-            </div>
+              </div>
             )
           })
         }
       </ReactGridLayout>
     )
   }
 
-  renderBackgroundGrid = () => {
-    return (
-      <div className='background-grid-container'>
-        <div className='background-grid-row'>
-          {this.renderColumns()}
-        </div>
-        <div className='background-grid-row'>
-          {this.renderColumns()}
-        </div>
-        <div className='background-grid-row'>
-          {this.renderColumns()}
-        </div>
-        <div className='background-grid-row'>
-          {this.renderColumns()}
-        </div>
-      </div>
-    )
-  }
-
-  renderColumns = () => {
-    let arr = []
-    for (let i = 0; i < 16; i++) {
-      arr.push(<span className='background-grid-cube' />)
-    }
-    return arr
-  }
-
   renderBackgroundGridDetails = (grid, cols, rowHeight, width, margin, box_class) => {
     return (
       <ReactGridLayout

src/containers/Changelog.js

@@ -16,15 +16,17 @@ export class Changelog extends React.Component {
         <div className='info-wrapper'>
           <InfoGroup title='Some Changed Stuff' className='change'
             text={'Here are some changes we\'ve made since the last release.'}>
-            <InfoBullet text='Moved some robot logic to the main process for better performance.' />
-            <InfoBullet text='Resolved the issue of needing to relogin after 6 hours.' />
-            <InfoBullet text='Resolved the issue with users being unable to login via Microsoft, Twitter, & Discord' />
-            <InfoBullet text='Resolved the issue with cooldowns not being properly set at the start of the application' />
+            <InfoBullet text='Deprecated Interactive 1.0 and moved to Interactive 2.0.' />
+            <InfoBullet text='Better Error Handling Implemented.' />
+            <InfoBullet text='Removed background grid behind buttons, as they are much smaller with Interactive 2.0.' />
+            <InfoBullet text='Fixed bug where the user is unable to unassign a sound from a button.' />
+            <InfoBullet text='Unassigned buttons are now hidden from below the stream.' />
+            <InfoBullet text='Modified the error screen so the user knows the difference between failing to connect due to an error or firewall, or if they are restricted.' />
           </InfoGroup>
-          <InfoGroup title='Some New Stuff' className='new'
+          { /* <InfoGroup title='Some New Stuff' className='new'
             text={'Here are some additions we\'ve made since the last release.'}>
             <InfoBullet text='Added a right click context menu to the board sounds to allow the user to modify & unassign them.' />
-          </InfoGroup>
+          </InfoGroup> */ }
         </div>
       </div>
     )

src/containers/Connector.js

@@ -93,7 +93,7 @@ export class Connector extends React.Component {
           <div
             className='connector-options-wrapper'
             onClick={this.toggleReconnect}
-            data-tip='Auto reconnect if the connection to Beam drops.'>
+            data-tip='Auto reconnect if the connection to Mixer drops.'>
             <span className='connector-option'>Auto Reconnect</span>
             <span className={`connector-checkbox ${useReconnect ? 'sicon-round-check' : ''}`}></span>
           </div>
@@ -107,7 +107,7 @@ export class Connector extends React.Component {
           </div>
         </div>
         <div className='connect-container'>
-          <button type='button' onClick={this.goInteractive}>
+          <button type='button' onClick={this.goInteractive} disabled={isConnecting} >
             {isConnecting
               ? <span>Connecting...</span>
               : <span>

src/containers/Info.js

@@ -14,10 +14,10 @@ export class Info extends React.Component {
   goToLink = (e) => {
     switch (e.target.name) {
       case 'wiki':
-        shell.openExternal('https://github.com/DeekyJay/BeamSoundlyInteractive/wiki')
+        shell.openExternal('https://github.com/DeekyJay/SoundwaveInteractive/wiki')
         break
       case 'forums':
-        shell.openExternal('https://forums.beam.pro/')
+        shell.openExternal('https://forums.mixer.com/')
         break
     }
   }
@@ -34,18 +34,18 @@ export class Info extends React.Component {
           <InfoGroup title='Knowledgebase' className='know'
             text={'Looking for useful information? Check out these useful links'}>
             <li><a name='wiki' onClick={this.goToLink}>Wiki</a></li>
-            <li><a name='forums' onClick={this.goToLink}>Beam Forums</a></li>
+            <li><a name='forums' onClick={this.goToLink}>Mixer Forums</a></li>
           </InfoGroup>
           <InfoGroup title='App Info' className='app-info'
             text='App Information and License'>
             <InfoBullet text='Made by Derek Jensen' />
             <InfoBullet text='Copyright 2017 Derek Jensen. All rights reserved.' />
           </InfoGroup>
-          <div className='for-beam'>
+          <div className='for-mixer'>
             <span className='made-with'>Made with</span>
             <span className='heart'></span>
             <span className='for-community'>for the community of</span>
-            <span className='beam-logo'></span>
+            <span className='mixer-logo'></span>
           </div>
         </div>
       </div>

src/containers/ProfileList.js

@@ -188,7 +188,6 @@ export class ProfileList extends React.Component {
                   onSortStart={this.onSortStart}
                   hideSortableGhost
                   lockAxis='y'
-                  lockToContainerEdges
                   distance={8} />
               </div>
               : <div className='profile-list-no-profiles'>

src/containers/Root.js

@@ -56,13 +56,18 @@ class Root extends React.Component {
       })
     })
     .then(data => {
-      if (data && this.props[actionsKey]) this.props[actionsKey].initialize(data)
-      else throw new Error('Could not find ' + actionsKey + ' in props.')
+      if (data && this.props[actionsKey]) {
+        this.props[actionsKey].initialize(data)
+        return data
+      } else throw new Error('Could not find ' + actionsKey + ' in props.')
     })
   }
 
   componentWillMount () {
-    this.initializeModule('tokens', 'authActions')
+    this.initializeModule('app', 'appActions')
+    .then(data => {
+      return this.initializeModule('tokens', 'authActions')
+    })
     .then(() => {
       return this.initializeModule('sounds', 'soundActions')
     })
@@ -72,9 +77,6 @@ class Root extends React.Component {
     .then(() => {
       return this.initializeModule('interactive', 'interactiveActions')
     })
-    .then(() => {
-      this.initializeModule('app', 'appActions')
-    })
     this.props.appActions.checkForUpdate()
     setInterval(() => {
       if (!this.props.app.hasUpdate) this.props.appActions.checkForUpdate()