templates/play/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}UrConnex - Watching {{ seotag }}{% endblock %}
  5. {% block body %}
  6.     <nav class="navbar navbar-default navbar-fixed-top">
  7.         <div class="container">
  8.             <div class="navbar-header">
  9.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  10.                     <span class="sr-only">Toggle navigation</span>
  11.                     <span class="icon-bar"></span>
  12.                     <span class="icon-bar"></span>
  13.                     <span class="icon-bar"></span>
  14.                 </button>
  15.                 <a class="navbar-brand" href="/"><img src="/images/urlogo.png" width="100px" class="img-responsive"/></a>
  16.                 {% if uid is defined %}
  17.                     <ul class="nav navbar-nav navbar-right">
  18.                         <li><a href="/dashboard"><i class="fa fa-2x fa-home"></i></a></li>
  19.                         <li><a href="/chat"><i class="fa fa-2x fa-comment"></a></i></li>
  20.                         <li><a href="/profile"><i class="fa fa-2x fa-user"></i></a></li>
  21.                         <li><a href="/addressbook"><i class="fa fa-2x fa-phone-square"></i></a></li>
  22.                         <li><a href="/index/logout"><i class="fa fa-2x fa-sign-out"></i></a></li>
  23.                     </ul>
  24.                 {% else %}
  25.                     <a href="/home/login">Login</a> | 
  26.                     <a href="/home/signup">Signup</a>
  27.                 {% endif %}
  28.             </div>
  29.         </div>
  30.     </nav>
  31.     <div class="container loading" style="width: 1000px; margin-left: auto; margin-right: auto; margin-top: 150px;">
  32.         <div class="row">
  33.             <div class="col-lg-6">
  34.                 <input type="hidden" id="filename" value="{{ filename }}">
  35.                 <img src="/images/image_loading.gif" class="img-responsive"/>
  36.                 <p>Loading Video...Please be patient...
  37.                 <div id="progress"></div>
  38.                 </p>
  39.             </div>
  40.         </div>
  41.     </div>
  42.     <div class="container links" style="width: 1000px; margin-left: auto; margin-right: auto; margin-top: 150px;">
  43.         <div class="row">
  44.             <div class="col-lg-6 col-lg-offset-2">
  45.                 {% if uid is defined %}
  46.                     <a href="/tools/convert?name={{ mp4 }}" class="btn btn-primary btn-block">Make Ringtone</a>
  47.                     <a href="/tools/makevideo?name={{ mp4 }}" class="btn btn-primary btn-block">Make Video</a>
  48.                     <a href="/tools/capture?name={{ mp4 }}" class="btn btn-primary btn-block">Screenshot</a>
  49.                     <a href="/tools/share" class="btn btn-primary btn-block">Share Video</a>
  50.                     <a href="/tools/shorten?name={{ mp4 }}" class="btn btn-primary btn-block">Make Clip</a>
  51.                     <a href="/tools/delete?name={{ mp4 }}" class="btn btn-primary btn-block">Delete</a>
  52.                     <a href="{{ gp }}" class="btn btn-primary btn-block">Download Video</a>
  53.                     <p>OR copy below link and open in your device player</p>
  54.                 {% else %}
  55.                     {% if gp is defined %}
  56.                         <a href="{{ gp }}" class="btn btn-primary btn-block">Download Video</a>
  57.                         <p>OR copy below link and open in your device player</p>
  58.                         <a href="{{gp}}">{{ gp }}
  59.                     {% endif %}
  60.                 {%  endif %}
  61.                             {% if desktop is defined %}
  62.                                 <div class="container links"></div>
  63.                             {% else %}
  64.                                 <div class="container links"></div>
  66.                             {% endif %}
  67.             </div>
  68.         </div>
  69.     </div>
  70.         <hr/>
  71.         <div class="row">
  72.             {% for media in mediafiles %}
  73.                 {# {% if file_exists(media.filename) %} #}
  74.                     <div class="col-md-4" style="margin:10px;">
  75.                         <a class="thumbnail" href="/play/index/{{ media.filename }}">
  76.                             <img class="img-fluid"
  77.                                  src="{{ media.thumbnail }}"
  78.                                  alt="{{ media.filename }}" width="150em"> 
  79.                         </a> 
  80.                    </div>
  81.                 {# {% endif %} #}
  82.             {% endfor %}
  83.         </div>
  84.     </div>
  85. {% endblock %}
  86. {% block javascripts %}
  87. <script src="/js/jquery.min.js"></script>   
  88. <script>
  89. $(document).ready(function() {
  90.   var filename = $('#filename').val();
  91.   console.log("We are here" + filename);
  92.     // Display the loading image and progress bar
  93.     $('.links').html(
  94.       '<div class="container loading" style="width: 1000px; margin-left: auto; margin-right: auto;">' +
  95.       '<div class="row">' +
  96.       '<div class="col-lg-6">' +
  97.       '' +
  98.       '<div id="progress"></div>' +
  99.       '</div>' +
  100.       '</div>' +
  101.       '</div>'
  102.     );
  103.     // Make the AJAX call to the process method
  104.   $.ajax({
  105.       url: '/play/process/' + filename,
  106.       type: 'GET',
  107.       dataType: 'json',
  108.       xhr: function() {
  109.         var xhr = new window.XMLHttpRequest();
  110.         console.log(xhr);
  111.         // Add progress event listener to update progress bar
  112.         xhr.addEventListener('progress', function(event) {
  113.           if (event.lengthComputable) {
  114.             var percentComplete = event.loaded / event.total * 100;
  115.             $('#progress').css('width', percentComplete + '%');
  116.           }
  117.         }, false);
  118.         return xhr;
  119.       },
  120.       success: function(response) {
  121.           console.log(response);
  122.         // Hide the loading image and progress bar
  123.         $('.loading').hide();
  124.         $('.links').show();
  125.         {% if desktop is defined %}
  126.             // Display the video player
  127.             var videoPlayer = $('<video></video>')
  128.               .attr('id', 'my-video')
  129.               .attr('class', 'video-js')
  130.               .attr('controls', 'controls')
  131.               .attr('preload', 'auto')
  132.               .attr('width', '640')
  133.               .attr('height', '264')
  134.               .attr('poster', response.poster)
  135.               .attr('data-setup', '{}');
  137.             var mp4Source = $('<source></source>')
  138.               .attr('src', response.mp4)
  139.               .attr('type', 'video/mp4');
  141.             var webmSource = $('<source></source>')
  142.               .attr('src', response.webm)
  143.               .attr('type', 'video/webm');
  145.             videoPlayer.append(mp4Source, webmSource);
  147.             $('.links').html('').append(videoPlayer);
  148.         {% else %}
  149.             // Display the links
  150.             var linksContainer = $('.links');
  151.             var downloadLink = $('<a></a>')
  152.               .attr('href', response.gp)
  153.               .addClass('btn btn-primary btn-block')
  154.               .text('Download Video');
  156.             var copyLink = $('<p></p>')
  157.               .text('OR copy below link and open in your device player');
  159.             var copyLinkUrl = $('<a></a>')
  160.               .attr('href', response.gp)
  161.               .text(response.gp);
  162.             console.log("The link is" + copyLinkUrl);
  163.             linksContainer.html('').append(downloadLink, copyLink, copyLinkUrl);
  164.         {% endif %}
  165.     },
  166.     error: function(xhr, status, error) {
  167.         console.error(error);
  168.         console.error(xhr);
  169.         console.error(status);
  170.     }
  171.   });
  172. });
  173. </script>
  174. {% endblock %}
  175.