ensl.org/app/views/gathers/show.html.erb

<div id="jplayer"></div>
<script type="text/javascript">
  var played = false;
  var muted = false;
  var leave_confirm = true;
  <% if @gatherer and @gatherer.can_destroy? cuser %>
  var gatherer_id = <%= @gatherer.id %>;
  var muted = false;
  <% else %>
  var gatherer_id = 0;
  var muted = true;
  <% end %>

  function updateGathererStatus(status) {
    $.ajax({
      url: '/gatherers/' + gatherer_id + '/status',
      type: 'POST',
      data: {'status': status},
      async: false,
      cache: false,
      success: function() {},
      complete: function() {},
      error: function() {}
    });
  }

  $(document).ready(function() {
    init_mute();
    $.PeriodicalUpdater("/gathers/" + <%= @gather.id %> + ".js", {
      method: "GET",
      type: "script",
      minTimeout: 5000,
      maxTimeout: 15000,
      success: function(response, text, request) {
        if (request.getResponseHeader('Gather') == 'voting') {
          if (!played) {
            $("#jplayer").jPlayer({
              ready: function() {
                $(this).jPlayer("setMedia", {
                  mp3: "https://www.ensl.org/sounds/gather-1.mp3"
                }).jPlayer("play");

                var click = document.ontouchstart === undefined ? 'click' : 'touchstart';
                var kickoff = function () {
                  $("#jplayer").jPlayer("play");
                  document.documentElement.removeEventListener(click, kickoff, true);
                };

                document.documentElement.addEventListener(click, kickoff, true);
              },
              loop: true,
              volume: 0.5,
              swfPath: "/flash"
            });

            played = true
          }
        }
        else if (response.length > 10) {
          $("#jplayer").jPlayer("stop");
        }
        init_mute();
      }
    });

      function init_mute() {
          if(!muted){
              $("#mute").text("Mute");
              $("#jplayer").jPlayer("unmute");
          } else {
              $("#mute").text("Unmute");
              $("#jplayer").jPlayer("mute");
          }
          $("#mute").off("click");
          $("#mute").on("click", function() {
              if(muted){
                  $(this).text("Mute");
                  $("#jplayer").jPlayer("unmute");
              } else {
                  $(this).text("Unmute");
                  $("#jplayer").jPlayer("mute");
              }
              muted = !muted;
              return false;
          });
      }
    $(window).bind('unload', function() {
      if (gatherer_id > 0 && leave_confirm) {
        updateGathererStatus('leaving');
      }
    });

    var disable_leave_confirm = function() {
      leave_confirm = false;
    }

    $('.leave-gather').click(disable_leave_confirm);
    $('#gather-area a').click(disable_leave_confirm);

    var afk = false;
    var afk_timeout;
    var afk_time = 1000 * 60 * 15; // 15 minutes
    $(window).blur(function() {
      afk_timeout = setTimeout(function() {
        if (gatherer_id > 0) {
          afk = true;
          updateGathererStatus('away');
        }
      }, afk_time);
    });

    $(window).focus(function() {
      if (afk) {
        updateGathererStatus('active');
        $.get("/gathers/" + <%= @gather.id %> + ".js");
      }

      clearTimeout(afk_timeout);
    });
  });
</script>

<div id="gather">
  <h1 class="fancy">
    <span>
      <%= link_to @gather do %>
        <%= @gather.category.to_s %> Gather
      <% end %>
    </span>
  </h1>

  <div class="previous">
    <%= link_to @gather.previous_gather, class: 'button tiny' do %>
      <%= icon 'chevron-left' %> Previous
    <% end %>
  </div>

  <div class="next">
    <% if @gather.next_gather %>
      <%= link_to @gather.next_gather, class: 'button tiny' do %>
        Next <%= icon 'chevron-right' %>
      <% end %>
    <% end %>
  </div>

  <h4 class="fancy add-top">
    NS2 gathers have moved to <%= link_to "gathers.ensl.org", gathers_url, target: "_blank" %>. This page is for the real game.
  </h4>

  <% if @gather and @gather.status != Gather::STATE_FINISHED %>
    <div id="gather-info">
      <div class="info">
        <h6>Requirements</h6>
        <ul>
          <li><a href="https://www.google.com/adsense/support/bin/answer.py?hl=en&amp;answer=12654">JavaScript</a> enabled</li>
          <li>Read the <%= link_to "Gather Rules", article_url(Article::G_RULES) %></li>
          <li>Remove yourself if you leave</li>
        </ul>
      </div>

      <div class="info">
        <h6>Captains</h6>
        <ul>
          <li>Vote for the <strong>best</strong> players</li>
          <li>Captain 1 = 2nd most voted</li>
          <li>Captain 2 = 1st most voted</li>
        </ul>
      </div>

      <div class="info">
        <h6>Gather Info</h6>
        <ul>
          <li><%= link_to "Gather topic (all info)", "https://www.ensl.org/topics/1897" %></li>
          <li><%= link_to "Join the discord", "https://discord.gg/a8dT2cn" %></li>
          <li><%= link_to "Connect to game server", "steam://connect/51.15.77.137:27015/europe// -noforcemparms" %></li>
        </ul>
      </div>

      <div class="info">
        <h6>Voice Communication</h6>
        <ul>
          <li><%= link_to "Teamspeak 3", "http://www.teamspeak.com/?page=downloads" %></li>
          <li><strong>Join server:</strong> <a href="ts3server://ensl.org?channel=NS1%20Gathers">ensl.org</a></li>
          <li><strong>All passwords:</strong> europe </li>
        </ul>
      </div>

      <div class="hide">
        <a id="gather-info-hide" class="button tiny">
          <%= icon 'times' %>
          Hide information
        </a>
      </div>
    </div>
  <% end %>

  <div id="gather-area">
    <%= render_gather %>
  </div>

  <%= render partial: 'shoutmsgs/index', locals: { object: @gather } %>
</div>