{% extends 'neuro_backoffice/bo_layout.html' %}
{% block title %}video{% endblock %} {% block content %}
<Style>
    /* Parent Wrapper Element */

figure {
  position: relative;
  width: 100%;
  height: 480px;
  /* For responsive video */
  /* padding-bottom: 56.25%;*/
  /* padding-top: 25px; */
  /* height: 0; */
}


/* Sibling Overlay Element */

figcaption {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

object {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

label {
    display: inline-block;
    margin-bottom: 0rem !important;
}


h6 {
    margin-bottom: 0.2rem;
    font-weight: 500;
    line-height: 1.2;
}
figure {
    /* position: relative; */
    /* width: 100%; */
    /* height: 480px; */
    padding-bottom: 56.25%;
    /* padding-top: 25px; */
    /* height: 0; */
}
</Style>

  <header>
    <div class="container bg-white">
      <div class="row">
        <div class="col-md-8">
          <img src="..static/images/tricon_logo.JPG" alt="VRSI 2022">
        </div>
        <div class="col-md-4 d-flex align-items-center">
          <h5 class="text-right">Video recording of the live program</h5>
        </div>
      </div>
    </div>
  </header>
  <!--    <div class="row mb-3">-->
  <!--      <div class="col-lg-1 col-sm-12 text-md-right text-center">-->
  <!--        @if(isset(Society::getSociety()->session_time))-->
  <!--          <p class="d-inline "> Session Time : <span class="h5"><span id="countdown" class="badge badge-danger">00:00</span></span> </p> -->
  <!--        @endif-->
  <!--    </div>-->
  <!--</div>-->
<div class="container sub"> 
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-12 text-left">
      <label class="h6">Welcome {{data.prefix or ''}}{{data.full_name or ''}}</label>
        {% set session_end_at = data.session_end_time %}
        <input type="hidden" value="{{session_end_at}}" id="session_end_at" />
    </div>
    <div class="col-lg-5 col-md-5 col-sm-12 text-md-right text-sm-left">
      <div class="counter">
        <span class='e-m-days' style="display:none;">0</span>  Session logs off in 
        0<span class='e-m-hours'>{{diff_hour}}</span>:
        <span class='e-m-minutes'>{{diff_minutes}}</span>:
        <span class='e-m-seconds'>{{diff_seconds}}</span>
        <span class='e-m-txt'></span> hours
      </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-12 text-right">
      <a href="{{url_for('user.Logout')}}" class="btn btn-danger">Logout</a>
    </div>
  </div>
</div>
<div class="container bg-white">
  {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
       <div class="alert alert-success text-align-center successMessage alert-dismissible" >
         <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
         <h6>{{ mesg|safe }}</h6>
       </div>
    {% endfor %}
    {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
      <div class="alert alert-danger text-align-center successMessage" id="successMessage">
         <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
         <h6>{{ mesg|safe }}</h6>  
      </div>
    {% endfor %}   
  {% if video_link :%}
  {% for row in video_link : %}
  <div class="row">
    <div class="col-12 p-2 mt-3">
      <h4> {{row.video_name | safe}}</h4>
      <h6 class="text-dark"> {{row.speaker_name or ''  | safe}}</h6>
    </div>
  </div>
  <div class="row mt-1 text-center">       
    <!--<label class="font-weight-bold h5"> {{data.video_name or ''}}</label> -->
    <br/>    
    <input type="hidden" name="user_id" id="user_id" value="{{data.user_id}}" />
    <input type="hidden" name="auto_login_id" id="auto_login_id" value="{{data.auto_login_id}}" />
    <div class="col">
      <!-- <iframe src="https://koveye.tnoa.info/#" class="embed-responsive-item" ></iframe> -->
      <figure class="img-fluid">
        <figcaption></figcaption>
        <object width="640" height="480">
          <param name="movie" value="{{row.video_url}}">
          <param name="allowFullScreen" value="true">
          <param name="allowscriptaccess" value="always">
          <embed width="100%" height="580" src="{{row.video_url}}" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true">
        </object>
    
                  <!--<iframe id="iframe_{{loop.index}}" src="{{row.video_url}}" width="640" height="480" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>-->
      </figure>
    </div>
  </div>
  <br />
  {% endfor %}
  {% else %}
    <div class="row mt-1">
      <input type="hidden" name="user_id" id="user_id" value="{{data.user_id}}" />
      <input type="hidden" name="auto_login_id" id="auto_login_id" value="{{data.auto_login_id}}" />
      No Videos
    </div>      
  {% endif %}
    <div class="row my-3 p-2">
        <div class="col text-center">
            <a href="{{url_for('user.Logout')}}" class="btn btn-danger">Logout</a>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript" language="javascript">
var BaseUrl = document.location.origin;


$(function() {
    $("body").keydown(function (event) {
    if (event.ctrlKey || event.which == '13' || event.which == '91' || event.which == '93' || event.which == '224') {
        event.preventDefault();
    }   
});
});

document.addEventListener("keydown", function (event) {
    if (event.ctrlKey || event.which == '13' || event.which == '91' || event.which == '93' || event.which == '224') {
        event.preventDefault();
    }   
});


document.oncontextmenu = function() { 
    return false; 
};
        $(function() {
            $('figcaption').css('z-index','0');
            $('figcaption').css('z-index','1');

            
            $(this).bind("contextmenu", function(e) {
                e.preventDefault();
            });
        }); 
        



/*
This async function will synchronously control the click events
from happening asynchonously. Normally a timeout will finish 
earlier.
*/
async function clickControl() {
  const noClick = () => {
    return new Promise(resolve => {
      setTimeout(() => resolve($('figcaption').css('z-index', '1')), 1500);
    });
  }
  await noClick();
}

/*
Delegate contextmenu and mousedown on figcaption. The switch will
determine what to do when the left, middle, or right mouse button
is clicked.
*/
$("figcaption").on("contextmenu mousedown", function(e) {
  switch (e.which) {
    case 1: // Left
      $('figcaption').css('z-index', '0');
      break;
    case 2: // Middle
      break;
    case 3: // Right
      return false;
    default:
      break;
  }
  // Calling async function will wait for switch to finish
  clickControl();
});        



$(function() {
             function getCounterData(obj) {
              var days = parseInt($('.e-m-days', obj).text());
              var hours = parseInt($('.e-m-hours', obj).text());
              var minutes = parseInt($('.e-m-minutes', obj).text());
              var seconds = parseInt($('.e-m-seconds', obj).text());

              return seconds + (minutes * 60) + (hours * 3600) + (days * 3600 * 24);
            }

            function setCounterData(s, obj) {
              var days = Math.floor(s / (3600 * 24));
              var hours = Math.floor((s % (60 * 60 * 24)) / (3600));
              var minutes = Math.floor((s % (60 * 60)) / 60);
              var seconds = Math.floor(s % 60);

              // console.log(days, hours, minutes, seconds);
              if(minutes < 10)
              {
                  minutes = "0"+minutes;
              }
              if(seconds < 10)
              {
                  seconds = "0"+seconds;
              }

              $('.e-m-hours', obj).html(hours);
              $('.e-m-minutes', obj).html(minutes);
              $('.e-m-seconds', obj).html(seconds);
            }

            var count = getCounterData($(".counter"));

            var timer = setInterval(function() {
              count--;
              if (count == 0) {
               url_1 = BaseUrl+"/logout?is_session_end=1";

              window.location = url_1;


                // clearInterval(timer);
                return;
              }
              setCounterData(count, $(".counter"));
            }, 1000);
          });
        
</script>



{% endblock %}