Sindbad~EG File Manager

{% extends 'neuro_backoffice/bo_layout.html' %}
{% block title %}Video recordings of the annual conference of VRSI{% endblock %} {% block content %}
<Style>
    /* Parent Wrapper Element */

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

/*@media only screen and (max-width: 600px) {*/
/*  figure {*/
/*    height: auto !important;*/
/*    }*/

/*}*/

/*@media only screen and (max-width: 1024px) {*/
/*  figure {*/
/*    height: 600px !important;*/
/*    }*/

/*}*/


/* 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; */
}
.btn
{
  width: 160px !important;
  height: 44px;
  margin: 0 auto;
    padding: 0;
    display: inline-block;
    line-height: 40px;
    margin-top: 9px;
    text-align: center;
}

#embed_video
{
  width: 100%;
  height: 50vw;
}

</Style>

  
    <div class="container bg-white">
      <div class="row" style="display: flex;align-items: center;">
        <div class="col-md-6"> <img src="/static/images/vrsi_logo_1.png" alt="VRSI 2022">
            {% if year == 2022: %}
             <img src="{{ Helper.logos[2022] }}" alt="VRSI" width="30%">
            {% else %}
             <img src="{{ Helper.logos[2023] }}" alt="VRSI" width="30%">
             {% endif %}
        </div>
        <div class="col-md-6 d-flex align-items-center">
          <header>
           <!--<h5 class="text-right">Video recording of the live program</h5>-->
          <h5 class="text-right">Video recordings of the annual conference of VRSI</h5>
          </header>
        </div>
      </div>
    </div>
  
  <!--    <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" style="display: flex;align-items: center;">
    <div class="col-lg-5 col-md-5 col-sm-12 text-left">
      <label class="h6"></label>
       
        
    </div>
    <div class="col-lg-5 col-md-5 col-sm-12 text-md-right text-sm-left">
      <div class="counter">
        
      </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-12 text-right">
      
    </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 text-center">
      <h4> {{video_name | safe}}</h4>
      <h6 class="text-dark"> {{speaker_name | safe}} 

        <br/><br/> Day - {{program_day}} <span style="color: red;"> | </span>  {{row.session_date.strftime('%d-%b-%Y') or ''}} ( {{ row.session_date.strftime("%A")}} ) <span style="color: red;"> | </span> HALL - {{row.hall or  '' }}

       </h6>
    </div>
  </div>
  <div class="row mt-1 text-center">       
    
    <br/>    
    
    <div class="col">
      <!-- <iframe src="https://koveye.tnoa.info/#" class="embed-responsive-item" ></iframe> -->
      <figure class="">
        <figcaption></figcaption>
        <object  width="640" height="480" id="video_player" >
          <param name="movie" value="{{row.video_url}}">
          <param name="allowFullScreen" value="true">
          <param name="allowscriptaccess" value="always">
          
          <embed id ="embed_video" 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">
      
      No Videos
    </div>      
  {% endif %}
    <div class="row my-3 p-2">
        <div class="col text-left">
          {% if min_video_id and min_video_id != video_id :%}
            <a href="{{url_for('user.ViewVideo',user_id=enc_user_id,video_id=previous_video_id,program_day=program_day,year=year)}}" class="btn btn-primary">
              <i class="fa fa-arrow-left"> &nbsp;</i> PREVIOUS</a>
          {% endif %}
        </div>

        <div class="col text-center">
            <a href="{{url_for('user.DaywiseVideoIndex',user_id=enc_user_id,program_day=program_day,year=year)}}" class="btn btn-warning">BACK TO INDEX</a>
        </div>

        <div class="col text-right">
          {% if max_video_id and max_video_id != video_id :%}
            <a href="{{url_for('user.ViewVideo',user_id=enc_user_id,video_id=next_video_id,program_day=program_day,year=year)}}" class="btn btn-info">NEXT  &nbsp;
            <i class="fa fa-arrow-right"></i></a>
          {% endif %}
        </div>
    </div>
</div>
{% endblock %}

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

// $(document).ready(function()
// {
//   document.getElementById("video_player").setAttribute('autoplay', true);
// });



$(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).slice(-2);
//                  // alert(minutes);
//                  // minutes = "0"+minutes;
//               }
//               if(seconds < 10)
//               {
//                  // alert(seconds);
//                   seconds = ('0' + seconds).slice(-2);
//                   // 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 %}