Merge pull request #33 from pixelcrisis/dev

Merge v5.6.2

build/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "turnStyles for turntable.fm",
-  "version": "5.6.1",
+  "version": "5.6.2",
   "description": "Apply tweaks to turntable.fm - autobop, autodj, themes, styles, and more!",
   "manifest_version": 2,
   "icons": {

build/turnStyles.css

@@ -104,10 +104,22 @@ input.ts_inputs {
     display: none; }
   .ts_tab h4:not(:first-of-type) {
     margin-top: 5px; }
+  .ts_tab button,
+  .ts_tab select,
+  .ts_tab input[type="text"] {
+    padding: 6px 10px;
+    width: calc(100% - 5px); }
+  .ts_tab input[type="text"] {
+    font-size: 0.9em;
+    font-weight: normal;
+    box-sizing: border-box; }
   .ts_tab textarea {
     font-size: 15px;
     font-family: monospace;
     text-transform: none !important; }
+  .ts_tab .ts_toggle {
+    padding: 0;
+    display: block; }
 
 .ts_toggle,
 .ts_inputs {
@@ -131,9 +143,21 @@ input.ts_inputs {
       color: gold; }
 
 #ts_logs {
+  height: 200px;
+  display: none;
+  overflow: auto;
+  font-size: 0.85em;
+  font-weight: normal;
   margin-bottom: 40px;
-  padding: 0 5px 0 20px;
-  font-family: monospace; }
+  font-family: monospace;
+  padding: 10px 5px 10px 20px;
+  background: rgba(0, 0, 0, 0.2); }
+  #ts_logs span {
+    display: block;
+    padding-left: 10px; }
+
+.ts_has_logging #ts_logs {
+  display: block; }
 
 #room-view {
   background: #000000; }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "turnStyles",
-  "version": "5.6.1",
+  "version": "5.6.2",
   "main": "turnStyles.js",
   "repository": "git@github.com:pixelcrisis/turntable-tweaks.git",
   "author": "pixelcrisis <pxcrisis@gmail.com>",

public/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "turnStyles for turntable.fm",
-  "version": "5.6.1",
+  "version": "5.6.2",
   "description": "Apply tweaks to turntable.fm - autobop, autodj, themes, styles, and more!",
   "manifest_version": 2,
   "icons": {

scripts/_tools.js

@@ -7,13 +7,19 @@ module.exports = tS => {
   tS.Log = str => {
     this.logBook = this.logBook || tS.logBook
 
-    this.logBook.push(`> ${str}`)
-    console.info(`turnStyles :: ${str}`)
+    let date = new Date()
+    let time = `[${date.toLocaleTimeString('en-US')}]`
+
+    this.logBook.push(`[tS] ${time} <span>${str}</span>`)
+    console.info(`${time} turnStyles :: ${str}`)
 
     if (this.logBook.length > 50) this.logBook.shift()
 
     let logger = $('#ts_logs')[0]
-    if (logger) logger.innerHTML = this.logBook.join('<br>')
+    if (logger) {
+      logger.innerHTML = this.logBook.join('<br>')
+      logger.scrollTop = logger.scrollHeight
+    }
   }
 
   // portals to tt

scripts/attach.js

@@ -47,8 +47,9 @@ module.exports = tS => {
     this.realVolume = window.turntablePlayer.realVolume
 
     // interpret turntable events as our own
-    core.removeEventListener('message', this.handle.bind(this))
-    core.addEventListener('message', this.handle.bind(this))
+    this.handler = this.handle.bind(this)
+    core.addEventListener('message', this.handler)
+
     this.emit('attach', room)
     this.Log(`loaded room`)
   }
@@ -59,8 +60,9 @@ module.exports = tS => {
   }
 
   tS.reload = function reload () {
-    window.$tS = null
-    $('script[href$="turnStyles.js"]').remove()
+    clearInterval(this.heart)
+    window.turntable.removeEventListener('message', this.handler)
+    $(`script[src*="turnStyles.js"]`).remove()
 
     const script = document.createElement('script')
     script.src = `${this.__base}/turnStyles.js?${Math.random()}`

scripts/config.js

@@ -3,6 +3,8 @@
 module.exports = tS => {
 
   tS.default = {
+    logging: false,
+
     theme: "dark",
     style: "",
 

scripts/modify.js

@@ -15,19 +15,21 @@ module.exports = tS => {
     $(main).on(modified, user, attachStats)
 
     // hide elements
-    this.hidden('no_vid', this.config.no_vid)
-    this.hidden('no_aud', this.config.no_aud)
-    this.hidden('no_bub', this.config.no_bub)
+    this.hidden('no_vid',  this.config.no_vid)
+    this.hidden('no_aud',  this.config.no_aud)
+    this.hidden('no_bub',  this.config.no_bub)
+    this.hidden('logging', this.config.logging)
 
     // replace upload with organize
     $('#upload-button').after(`<div id="ts_upload"></div>`)
     $('#ts_upload').on('click', orderSongs)
   }
 
-  tS.hidden = function (key, value) {
-    if (key == "no_vid") this.toggleClass('ts_hide_videos', value)
-    if (key == "no_aud") this.toggleClass('ts_hide_audience', value)
-    if (key == "no_bub") this.toggleClass('ts_hide_bubbles', value)
+  tS.hidden = function toggleHiddenElements (key, value) {
+    if (key == "no_vid")  this.toggleClass('ts_hide_videos', value)
+    if (key == "no_aud")  this.toggleClass('ts_hide_audience', value)
+    if (key == "no_bub")  this.toggleClass('ts_hide_bubbles', value)
+    if (key == "logging") this.toggleClass('ts_has_logging', value)
   }
 
   tS.on('attach', tS.modify)

scripts/window.js

@@ -68,15 +68,13 @@ const optsTab = self => `
       <h4>General Features</h4>
       ${ toggle(self, 'autobop', 'Autobop') }
       ${ toggle(self, 'has_vol', 'Control Volume') }
-      <br>
       ${ toggle(self, 'nextdj', 'Next DJ Spot') }
       ${ toggle(self, 'pingdj', 'Wait For Ping') }
     </div>
     <div>
       <h4>Hide Elements</h4>
       ${ toggle(self, 'no_aud', 'Hide Audience') }
       ${ toggle(self, 'no_vid', 'Hide Player') }
-      <br>
       ${ toggle(self, 'no_bub', 'Hide Chat Bubbles') }
     </div>
     <div>
@@ -94,21 +92,18 @@ const roomTab = self => `
       ${ toggle(self, 'is_afk', 'Go AFK') }
       <input type="text" id="ts_afk_ping" class="ts_inputs"
         value="${ self.config.afk_ping }" />
-      <br>
       ${ button('afk_ping', 'Save AFK Response') }
-      <br>
     </div>
     <div>
       <h4>Automated Reminder</h4>
       ${ select(self, 'remind', true) } 
-      <br>
       <input type="text" id="ts_reminder" class="ts_inputs"
         value="${ self.config.reminder }" />
-      <br>
       ${ button('reminder', 'Save Reminder') }
     </div>
     <div>
-      <h4>Other Features</h4>
+      <h4>turnstyles</h4>
+      ${ toggle(self, 'logging', 'Show Logs In Room Tab') }
       ${ doFunc('reload', 'Reload turnStyles') }
     </div>
   </div>
@@ -120,7 +115,6 @@ const dingTab = self => `
       <h4>Messages In Chat</h4>
       ${ toggle(self, 'chat_song', 'Last Song Stats') }
       ${ toggle(self, 'chat_spun', 'Dropped DJ Stats') }
-      <br>
       ${ toggle(self, 'chat_snag', 'User Snags') }
       ${ toggle(self, 'chat_join', 'User Joins') }
       ${ toggle(self, 'chat_left', 'User Leaves') }
@@ -136,9 +130,11 @@ const dingTab = self => `
 
 const cssTab = self => `
   <div class="ts_tab tab_css">
-    <h4>Custom CSS</h4>
-    <textarea id="ts_user_css" class="ts_inputs" cols="60" rows="10">${ self.config.user_css }</textarea>
-    ${ button('user_css', 'Save And Apply Styles') }
+    <div>
+      <h4>Custom CSS</h4>
+      <textarea id="ts_user_css" class="ts_inputs" cols="60" rows="10">${ self.config.user_css }</textarea>
+      ${ button('user_css', 'Save And Apply Styles') }
+    </div>
   </div>
 `
 

turnStyles.sass

@@ -123,12 +123,27 @@ input.ts_inputs
 
   h4:not(:first-of-type)
     margin-top: 5px
+
+  button,
+  select,
+  input[type="text"]
+    padding: 6px 10px
+    width: calc(100% - 5px)
+
+  input[type="text"]
+    font-size: 0.9em
+    font-weight: normal
+    box-sizing: border-box
 
   textarea
     font-size: 15px
     font-family: monospace
     text-transform: none !important
 
+  .ts_toggle
+    padding: 0
+    display: block
+
 .ts_toggle,
 .ts_inputs
   margin: 0 5px 5px 0
@@ -155,9 +170,22 @@ input.ts_inputs
       color: gold  
 
 #ts_logs
+  height: 200px
+  display: none
+  overflow: auto
+  font-size: 0.85em
+  font-weight: normal
   margin-bottom: 40px
-  padding: 0 5px 0 20px
   font-family: monospace
+  padding: 10px 5px 10px 20px
+  background: rgba(0,0,0,0.2)
+
+  span
+    display: block
+    padding-left: 10px
+
+.ts_has_logging #ts_logs
+  display: block
 
 // turntable styling defaults
 #room-view