From 0c4d2902e76f3e1cb3fea2cd80755e2ba001e23b Mon Sep 17 00:00:00 2001 From: andairo Date: Fri, 9 Oct 2015 00:24:39 -0500 Subject: [PATCH 1/7] Added ability to manually adjust chat delay. Modified header section to include the twitch chat room selection button which is repurposed to toggle the delay adjustment bar. Added chat delay adjustment bar below the header which is toggled by pressing the repurposed chat room selection button. The chat delay adjustment bar contains: -dropdown to select the number of seconds to adjust by -button to decrease chat delay by the selected number of seconds -display showing the current total delay offset which may be positive or negative -button to increase chat delay by the selected number of seconds Increased 'z-index' property of statusMessage element to ensure it shows above both the header and chat delay sections in all cases. Added 'arrowleft.png' and 'arrowright.png' to 'common/res/' directory. Updated 'Chrome/manifest.json' and 'Firefox/lib/main.js' to include the new resources. Uncommented resources section in 'setup.sh'. --- Chrome/manifest.json | 4 +- Firefox/lib/main.js | 4 +- common/js/rechat.js | 180 +++++++++++++++++++++++++++++++++++++- common/res/arrowleft.png | Bin 0 -> 801 bytes common/res/arrowright.png | Bin 0 -> 739 bytes setup.sh | 12 +-- 6 files changed, 190 insertions(+), 10 deletions(-) create mode 100644 common/res/arrowleft.png create mode 100644 common/res/arrowright.png diff --git a/Chrome/manifest.json b/Chrome/manifest.json index 996ad0f..e21aa47 100644 --- a/Chrome/manifest.json +++ b/Chrome/manifest.json @@ -30,7 +30,9 @@ ], "web_accessible_resources": [ - "js/injected.js" + "js/injected.js", + "res/arrowleft.png", + "res/arrowright.png" ] } diff --git a/Firefox/lib/main.js b/Firefox/lib/main.js index c66f88c..2950368 100644 --- a/Firefox/lib/main.js +++ b/Firefox/lib/main.js @@ -5,7 +5,9 @@ var pageMod = require('sdk/page-mod'), localFiles = { 'res/sad.png': data.url('sad.png'), 'res/spinner.gif': data.url('spinner.gif'), - 'js/injected.js': data.url('injected.js') + 'js/injected.js': data.url('injected.js'), + 'res/arrowleft.png': data.url('arrowleft.png'), + 'res/arrowright.png': data.url('arrowright.png') }; pageMod.PageMod({ diff --git a/common/js/rechat.js b/common/js/rechat.js index 520d3f7..19ca4c4 100644 --- a/common/js/rechat.js +++ b/common/js/rechat.js @@ -58,12 +58,181 @@ ReChat.Playback.prototype._prepareInterface = function() { 'box-shadow': 'inset 0 -1px 0 0 rgba(0,0,0,0.2)' }); header.addClass('chat-header'); - header.text('ReChat for Twitch™ ' + ReChat.getExtensionVersion()); + + //this link will toggle displaying the delay adjustment bar + var toggleDelayAdjLink = $(''); + toggleDelayAdjLink.addClass('button glyph-only left tooltip'); + toggleDelayAdjLink.css({'top':'6px'}); + toggleDelayAdjLink.attr({ + 'id':'toggle_delay', + 'title':'Adjust Chat Delay' + }); + header.append(toggleDelayAdjLink); + + //svg image icon for the toggle link ( used explicit type declaration because jquery has issues appending svg graphics normally) + var toggleDelayAdjImg = $(document.createElementNS("http://www.w3.org/2000/svg","svg")); + toggleDelayAdjImg.addClass('svg-roomlist'); + toggleDelayAdjImg.attr({ + 'height':'16px', + 'version':'1.1', + 'viewbox':'0 0 16 16', + 'width':'16px', + 'x':'0px', + 'y':'0px' + }); + toggleDelayAdjLink.append(toggleDelayAdjImg); + + //path element to draw the actual svg content + var toggleDelayAdjPath = $(document.createElementNS("http://www.w3.org/2000/svg","path")); + toggleDelayAdjPath.attr({ + 'clip-rule':'evenodd', + 'd':'M1,13v-2h14v2H1z M1,5h13v2H1V5z M1,2h10v2H1V2z M12,10H1V8h11V10z', + 'fill-rule':'evenodd' + }); + toggleDelayAdjImg.append(toggleDelayAdjPath); + + var headerTitle = $('

'); + headerTitle.addClass('room-title'); + headerTitle.text('ReChat for Twitch™ ' + ReChat.getExtensionVersion()); + header.append(headerTitle); + containerEmber.append(header); + + //delay adjustment bar + var delayAdjustBar = $('

'); + delayAdjustBar.addClass('chat-header'); + delayAdjustBar.css({ + 'display':'block', + 'position':'relative', + 'background-color':'#f2f2f2' + }); + delayAdjustBar.attr('id','delay_adjust_bar'); + delayAdjustBar.hide(); + + //handles toggling of the delay adjustment bar + toggleDelayAdjLink.click(function() { + delayAdjustBar.toggle( "slow", function() {}); + }); + + //dropdown to select how many seconds the delay should be adjusted by when decrease or increase button is pressed + var adjustAmtSelector = $(''); + currDelayDisplay.attr({ + 'id':'curr_delay_display', + 'title':'Current Delay' + }); + currDelayDisplay.prop('readonly', true) + currDelayDisplay.css({ + 'width':'40px', + 'background-color':'#f2f2f2', + 'text-align':'center' + }); + delayAdjustBar.append(currDelayDisplay); + delayAdjustBar.append(' '); + + //initialize the display value + currDelayDisplay.val(this.streamDelay * -1); + + //increase delay button + var rightArrowBtn = $('