templates/channel/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ channel.name|capitalize }}{% endblock %}
  5. {% block body_class %}photoview{% endblock %}
  6. {% block top_title %}{% endblock %}
  7. {% block top_menu %}
  8.     <span style="color: #ddd">{{ channel.name|capitalize }}</span>
  9.     <span class="divider"> / </span>
  10.     <span class="date" id="image-timestamp" data-timestamp="{{ channel.lastUploadAt.timestamp }}">{{ channel.lastUploadAt ? channel.lastUploadAt|date('Y-m-d H:i') : 'not yet' }}</span>
  11.     {% if app.user == channel.user %}
  12.         <span class="divider"> / </span>
  13.         <a href="{{ path('channel_edit', {'id': channel.id}) }}">channel</a>
  14.     {% endif %}
  15.     <span class="divider"> / </span>
  16. {% endblock %}
  17. {% block maxbody %}
  18.     <style>
  19.         picture { display: block; height: 100%; }
  20.         video, picture, picture img {  max-height: 100%; max-width: 100%; vertical-align: middle; margin: auto; }
  21.         html, body { height: 100%; }
  22.         .imgbox { display: grid; height: 100%; width: 100%; }
  23.     </style>
  24.     <div class="imgbox">
  25.         <picture id="im">
  26.             <source media="screen and (min-width: 2000px)" srcset="{{ channel.dataDirectory }}raw.jpg?{{ channel.lastUploadAt.timestamp }}" type="image/jpeg">
  27.             <source srcset="{{ channel.imDirectory }}last.webp?{{ channel.lastUploadAt.timestamp }}" type="image/webp" />
  28.             <source srcset="{{ channel.imDirectory }}last.jpg?{{ channel.lastUploadAt.timestamp }}" type="image/jpeg" />
  29.             <img src="{{ channel.imDirectory }}last.jpg?{{ channel.lastUploadAt.timestamp }}" alt="{{ channel.name|capitalize }}" />
  30.         </picture>
  31.     </div>
  32. {% endblock %}
  33. {% block javascripts %}
  34. <script>
  35.     let timestamp = document.getElementById('image-timestamp');
  37.     setInterval(function() {
  38.         const xhttp = new XMLHttpRequest();
  39.         xhttp.onload = function() {
  40.             let response = this.responseText;
  41.             timestamp.setAttribute('data-timestamp', response);
  42.             localizeDates();
  44.             const regex = /\?\d+/i;
  45.             let im = document.getElementById('im');
  46.             im.childNodes.forEach(function(item){
  47.                 console.log(item);
  48.                 let src = item.getAttribute('src');
  49.                 if (src) {
  50.                     item.setAttribute('src', src.replace(regex, '?' + response));
  51.                 }
  53.                 let srcset = item.getAttribute('srcset');
  54.                 if (srcset) {
  55.                     item.setAttribute('srcset', srcset.replace(regex, '?' + response));
  56.                 }
  57.             });
  59.             image.setAttribute('src', '{{ channel.dataDirectory }}last.jpg?' + response);
  60.         }
  61.         xhttp.open("GET", "{{ path('channel_last', {slug: channel.slug}) }}", true);
  62.         xhttp.send();
  65.     }, 60*1000);
  66. </script>
  67. {% endblock %}