☰

Better Ballstreams

Transform the default Ballstreams view into a theater mode with the video blown up to the left and the chat full height on the right.

当前为 2015-12-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Better Ballstreams
  3. // @namespace    https://github.com/wyaeiga/better-ballstreams
  4. // @version      0.7
  5. // @description  Transform the default Ballstreams view into a theater mode with the video blown up to the left and the chat full height on the right.
  6. // @author       Kevin Shu
  7. // @match        http://*.ballstreams.com/live-streams/*
  8. // @grant        none
  9. // @require      https://code.jquery.com/jquery-git2.min.js
  10. // ==/UserScript==
  11.  
  12. function addGlobalStyle(css) {
  13.     var head, style;
  14.     head = document.getElementsByTagName('head')[0];
  15.     if (!head) { return; }
  16.     style = document.createElement('style');
  17.     style.type = 'text/css';
  18.     style.innerHTML = css;
  19.     head.appendChild(style);
  20. }
  21.  
  22. $(function() {
  23.     var button_html = '<a href="#" class="button_noninput bb-toggle"></a>'
  24.     var iframe_padding_html = '<div id="iframe_padding" style="height: 50px; width: 100%; display: flex; flex: 0 1 50px;"></div>'
  25.  
  26.     addGlobalStyle('.bb-player-live           { position: fixed !important; width: 80% !important; height: 100% !important; top: 0 !important; left: 0 !important; z-index: 99999999 !important; }')
  27.     addGlobalStyle('.bb-player-dvr            { position: fixed !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; z-index: 99999999 !important; }')
  28.     addGlobalStyle('.bb-player-dvr-bg         { position: fixed !important; width: 80% !important; height: 100% !important; top: 0 !important; left: 0 !important; z-index: 99999 !important; }')
  29.     addGlobalStyle('.bb-chat                  { position: fixed !important; width: 20% !important; height: 100% !important; bottom: 0 !important; right: 0 !important; z-index: 99999998 !important; background-color: #000; padding-top: 50px !important; display: flex; flex-flow: column; }')
  30.     addGlobalStyle('.bb-chat-iframe           { width: 100% !important; margin-left: auto; margin-right: auto; display: flex; flex: 1 1 auto; }')
  31.     addGlobalStyle('.bb-hr                    { height: 0px !important; }')
  32.     addGlobalStyle('.hide-scrollbar           { overflow: hidden !important; }')
  33.     addGlobalStyle('.bb-toggle-close          { position: fixed !important; top: 0 !important; right: 0 !important; z-index: 999999999 !important; width: 20% !important; padding: 12px 0 !important; font-size: 26px !important; margin-top: 0 !important; }')
  34.     addGlobalStyle('.bb-toggle-close::before  { content: "Normal Ballstreams" !important; }')
  35.     addGlobalStyle('.bb-toggle::before        { content: "Better Ballstreams"; }')
  36.     addGlobalStyle('.bb-toggle                { line-height: 30px; margin: 0px; margin-top: 5px; float: left; border-radius: 0px; width: 130px; border: 0px; height: 30px; background: linear-gradient(to bottom, #4387FD 0%, #4683EA 100%); }')
  37.     addGlobalStyle('.bb-toggle:hover          { line-height: 30px; margin: 0px; margin-top: 5px; float: left; border-radius: 0px; width: 130px; border: 0px; height: 30px; background: linear-gradient(to bottom, #4387FD 0%, #4683EA 100%); color: #eee; box-shadow: 0 0 43px -7px #222 inset; transition: box-shadow 0.2s, color 0.2s; -webkit-transition: box-shadow 0.2s, color 0.2s; -moz-transition: box-shadow 0.2s, color 0.2s; -o-transition: box-shadow 0.2s, color 0.2s; }')
  38.     addGlobalStyle('.bb-display-none          { display: none; }')
  39.     addGlobalStyle('.bb-on-demand-player      { width: 100% !important; height: 100% !important; position: fixed !important; top: 0 !important; left: 0 !important; z-index: 9999 !important; }')
  40.  
  41.     var truelive_button = '.button_noninput:contains("TrueLive")'
  42.     var iframe_padding = '#iframe_padding'
  43.     var chat_frame = '#webchat'
  44.     var bb_toggle = '.bb-toggle'
  45.     var live_player = '#mediaplayer_wrapper'
  46.     var dvr_bg = '#main'
  47.     var dvr_player = 'object[name="player"]'
  48.     var chat_div_bottom = '#playerBottom'
  49.     var chat_div_hr = chat_div_bottom+'>hr'
  50.     var chat_div_elsewhere = '#webchat-wrapper'
  51.     var toggleLayout = function() {
  52.         $(live_player).toggleClass('bb-player-live')
  53.         $(dvr_bg).toggleClass('bb-player-dvr-bg')
  54.         $(dvr_player).toggleClass('bb-player-dvr')
  55.  
  56.         $('body').toggleClass('hide-scrollbar')
  57.         $(bb_toggle).toggleClass('bb-toggle-close')
  58.  
  59.         var player_on_bottom = $('#playerBottom>#webchat').length > 0
  60.         if(player_on_bottom) {
  61.             $(chat_div_bottom).toggleClass('bb-chat')
  62.             $(chat_div_hr).toggleClass('bb-hr')
  63.             $(chat_frame).toggleClass('bb-chat-iframe')
  64.             $(iframe_padding).toggle()
  65.         } else {
  66.             $(chat_div_elsewhere).toggleClass('bb-chat')
  67.             $(chat_frame).toggleClass('bb-chat-iframe')
  68.             $(iframe_padding).toggle()
  69.         }
  70.     }
  71.  
  72.     $(truelive_button).first().before(button_html)
  73.     $(chat_frame).before(iframe_padding_html)
  74.     $(iframe_padding).toggle()
  75.  
  76.     $(document).keyup(function(e) {
  77.         if(e.keyCode == 27 && $(live_player).hasClass('bb-player-live')) {
  78.             toggleLayout();
  79.         }
  80.     })
  81.     $(bb_toggle).click(function(){
  82.         toggleLayout();
  83.     });
  84. });