kurento-backend/static/js/dashboard.js

$( document ).ready(() => {

  var counter = 0;



  let url_string = window.location.href;
  let url = new URL(url_string);
  let r = url.searchParams.get('r');

  if(r){
    init(r.split('|'));
  }

  function init(arr) {
    let blocks = ['r4', 'r3', 'r2', 'r1'];

    for(let i = 0; i< arr.length; i++){
      if(blocks.length > 0 ){
        let id = blocks.pop();
        let panel = generatePanel(counter);


        $( '#' + id ).append( panel + '<iframe src="https://gto.to/?r=' + arr[i] + '" width="100%" height="100%" align="center">\n' +
            '    Iframe is not supported\n' +
            ' </iframe>' );
        bindEvents(counter);
        counter++;
      } else {
        break;
      }
    }
  }

  function generatePanel(i) {
    return '<div style="display: none;" class="dashboard--elem--panel">' +
        '<span id="full' + i + '"><i class="glyphicon glyphicon-fullscreen"></i></span> ' +
        '<span id="reload' + i +'"><i class="glyphicon glyphicon-repeat"></i></span>' +
        '<span id="close' + i + '"><i class="glyphicon glyphicon-remove"></i></span> ' +
        '</div>';
  }

  // add event listeners
  function bindEvents(id) {
    $( '#close' + id)[0].addEventListener('click', streamClose);
    $( '#reload' + id)[0].addEventListener('click', streamReload);
    $( '#full' + id)[0].addEventListener('click', streamFull);
  }

  // close frame with stream
  function streamClose(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this)[0].removeEventListener('click', streamClose);
    let parent = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
    parent.empty();
    if(parent.hasClass('fullscreen')){
      parent.removeClass('fullscreen');
      $('.dashboard--elem').removeClass('hide');
    }
  }

  // reload stream
  function streamReload(e) {
    e.preventDefault();
    e.stopPropagation();
    let elem = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
    let idStr = $(this).attr('id');
    let id = parseInt(idStr.match(/(\d+)$/)[0]);
    let html = elem.html();
    elem.empty();
    elem.html(html);

    bindEvents(id);
  }

  function streamFull(e) {
    e.preventDefault();
    e.stopPropagation();
    let parent = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
    if(parent.hasClass('fullscreen')){
      parent.removeClass('fullscreen');
      $('.dashboard--elem').removeClass('hide');
    } else {
      $('.dashboard--elem').addClass('hide');
      parent.addClass('fullscreen');
    }
  }


  $('.dashboard--elem').on('drop', function (e) {
    console.log('drop');
    e.preventDefault();
    let target = e.target;
    let url = e.originalEvent.dataTransfer.getData('URL');

    if(!url || url.indexOf('https://gto.to/?r=') === -1){
      return false;
    }
    $(target).empty();
    let panel = generatePanel(counter);
    $( this ).append( panel + '<iframe src="' + url + '" width="100%" height="100%" align="center">\n' +
        '    Iframe is not supported\n' +
        ' </iframe>' );

    bindEvents(counter);
    counter++;
    return false;
  });

});