AAC Twitch Streamers - Gesior 2012

[potinho]

Hello everyone, everything good? I use Gesior 2012 and I saw a nice feature on other servers: they have a page with the streamers who are doing OT live, I found it very interesting. Is there a tutorial on how to do this that is compatible with Gesior? Thank you!

 

[potinho]

up

 

[Joriku]

No, there's no tutorial and I believe that you'll have to post this as a job in the job section and pay someone to create it for you. From there, you can either:
1. Share the code with the community and give access onto it for people like you who can't find it.
2. Keep it to yourself like the ots you've seen it on and keep the infinite circle going. This option is understandable by the owners of servers that keeps their things private due to competitions.

 

[goesraphael]

@potinho Dude, I'll do it for us this weekend and I'll share for everyone for free, this is a community that is going in the wrong direction, in oldtimes everyone used to help everyone, now I see that everyone is charging for simples things like that.

 

[potinho]

@potinho Dude, I'll do it for us this weekend and I'll share for everyone for free, this is a community that is going in the wrong direction, in oldtimes everyone used to help everyone, now I see that everyone is charging for simples things like that.

If you can share with us, even a simple thing i will appreaciate

 

[goesraphael]

If you can share with us, even a simple thing i will appreaciate

I didnt finished yet, few things to finish yet and some bugs, but if you or anybody else want to finish, follows the codes

THIS IS FOR MYAAC v0.8.7
THIS IS HOW THINGS ARE GOING:




Put after:

    if($config['template_allow_change'])
         echo '<span style="color: white">Template:</span><br/>' . template_form();
 ?>
        </div>

in the file:
templates/tibiacom/index.php

                <!---------------------------------- POPUP STREAM BY GOES ---------------------------------->



<button><img class="twitch-imagem" src="/images/twitch.png"></button>

<div class="popup-wrapper">
    <div class="popup">
        <div class="popup-close">x</div>

        <div class="popup-content">
            <h2>Live Now!</h2>
            <table border="1">
                <colgroup>
    <col class="twitch-tabela1">
    <col class="twitch-tabela2">
    <col class="twitch-tabela3">
  </colgroup>
            <!--<p>O autor do popup foi o Góes</p>-->
  <!---------------------------------- Streamer 1 ---------------------------------->
<td><div id="twitch-embed"></div>

<!-- Load the Twitch embed script -->
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

  <div id="twitch1" class="hide1">
  </div>

  <script type="text/javascript">
    var options = {
      channel: "livedogoes", // TODO: Change this to the streams username you want to embed
      width: 300,
      height: 300,
    };
    var player = new Twitch.Player("twitch1", options);
    player.setVolume(0.0);

    player.addEventListener(Twitch.Player.READY, initiate)

    function initiate() {
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.removeEventListener(Twitch.Player.READY, initiate);
    }

    function handleOnline() {
      document.getElementById("twitch1").classList.remove('hide1');
      player.removeEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.setMuted(false);
    }

    function handleOffline() {
      document.getElementById("twitch1").classList.add('hide1');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }
  </script></td>

  <!---------------------------------- Streamer 2 ---------------------------------->
  <td><div id="twitch-embed"></div>

<!-- Load the Twitch embed script -->
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

  <div id="twitch2" class="hide2">
  </div>

  <script type="text/javascript">
    var options = {
      channel: "gaules", // TODO: Change this to the streams username you want to embed
      width: 300,
      height: 300,
    };
    var player = new Twitch.Player("twitch2", options);
    player.setVolume(0.0);

    player.addEventListener(Twitch.Player.READY, initiate)

    function initiate() {
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.removeEventListener(Twitch.Player.READY, initiate);
    }

    function handleOnline() {
      document.getElementById("twitch2").classList.remove('hide2');
      player.removeEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.setMuted(false);
    }

    function handleOffline() {
      document.getElementById("twitch2").classList.add('hide2');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }
  </script></td>
  <!---------------------------------- Streamer 3 ---------------------------------->
  <td><div id="twitch-embed"></div>

<!-- Load the Twitch embed script -->
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

  <div id="twitch3" class="hide3">
  </div>

  <script type="text/javascript">
    var options = {
      channel: "symbiolive", // TODO: Change this to the streams username you want to embed
      width: 300,
      height: 300,
    };
    var player = new Twitch.Player("twitch3", options);
    player.setVolume(0.0);

    player.addEventListener(Twitch.Player.READY, initiate)

    function initiate() {
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.removeEventListener(Twitch.Player.READY, initiate);
    }

    function handleOnline() {
      document.getElementById("twitch3").classList.remove('hide3');
      player.removeEventListener(Twitch.Player.ONLINE, handleOnline);
      player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.setMuted(false);
    }

    function handleOffline() {
      document.getElementById("twitch3").classList.add('hide3');
      player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
      player.addEventListener(Twitch.Player.ONLINE, handleOnline);
      player.setMuted(true);
    }
  </script></td>
</table>
  <!---------------------------------- END of Streamers ---------------------------------->
<!---------------------------------- Add a placeholder for the Twitch embed ---------------------------------->
        </div>
    </div>
</div>
    <script type="text/javascript" src="<?php echo $template_path; ?>/app.js"></script>



 <!----------------------------------POPUP STREAM BY GOES ---------------------------------->

put after:

.moduleRow { }

.moduleRowOver {
    background-color: #D4C0A1;
    cursor: pointer;
    cursor: hand;
}

*{
  box-sizing: border-box;
}

in the file:
\templates\tibiacom\basic.css

/*<!--POPUP TWITCH BY GOES-->*/

.popup-wrapper {
  display: none; /*Quando o popup vai ser exibido?*/
  background: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popup {
  font-family: arial;
  text-align: center;
  width: 50vh;
  max-width: 900px; /*<!--Maximo de largura do popup-->*/
  max-height: 500px; /*<!--Maximo de largura do popup-->*/
  margin: 33% auto;
  padding: 20px;
  background: #6441a5;
  position: relative;
}

.popup-close {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}

.hide {
    display:none;
    }  
.twitch-imagem{
    background-color: transparent;
    height: 70px;
    width: 110px;
    cursor: pointer;
    }
    /* Optional: The following css just makes sure the twitch video stays responsive */
#twitch1 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    }
#twitch2 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    }
#twitch3 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    }
#twitch1 object, #twitch1 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
#twitch2 object, #twitch2 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
#twitch3 object, #twitch3 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
.twitch-tabela1{
    background-color: black;
    height: 100px;
    width: 150px;
    }
.twitch-tabela2{
    background-color: black;
    height: 100px;
    width: 150px;    
    }
.twitch-tabela3{
    background-color: black;
    height: 100px;
    width: 150px;
    }

create a file called:
app.js
And put in the folder:
\htdocs\templates\tibiacom
With the following code:

const button = document.querySelector('button')
const popup = document.querySelector('.popup-wrapper')

button.addEventListener('click', () => {
    popup.style.display = 'block'
})

popup.addEventListener('click', event => {
    const classNameOfClickedElement = event.target.classList[0]
    const classNames =['popup-close', 'popup-wrapper', 'popup-link'] //botoes que fecham o popup
    const shouldClosePopup = classNames.some(className => className === classNameOfClickedElement) //função que diz que os botões acima fecham o popup (se é true)

    if (shouldClosePopup){
    popup.style.display = 'none'
    }
})

If in doubt, send me a pv and I'll try to help.
THE SCRIPT IS NOT YET FINALIZED. IT IS IN PROGRESS
AS I UPDATE, I WILL POST HERE.
I added the image I used from twitch too.