player.html

{% macro theo_player(obj, theo_config, record=None, video_classes='', append_to_element=None, video_source=None, log_media_views_url=None, embed_config=None) -%}
{%- if embed_config.responsive %}
      {%- set video_classes = video_classes + " embed-responsive-background" %}
  {% endif %}
  {% if config.THEOPLAYER_LIBRARY_LOCATION %}
    <script type='text/javascript' src='{{ config.THEOPLAYER_LIBRARY_LOCATION }}/THEOplayer.js'></script>
    <script type="text/javascript">
      // function from https://www.w3schools.com/js/js_cookies.asp
      function getCookie(cname) {
        let name = cname + "=";
        let decodedCookie = decodeURIComponent(document.cookie);
        let ca = decodedCookie.split(";");
        for (let i = 0; i < ca.length; i++) {
          let c = ca[i];
          while (c.charAt(0) == " ") {
            c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
          }
        }
        return "";
      }

      var element = document.createElement('div');
      element.className = 'video-js theo-social-available theoplayer-skin theo-seekbar-above-controls {{ video_classes }}';

      {% if embed_config.skin == 'light' %}
        element.className += ' light';
      {% endif %}

      if (/(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent)){
        element.className += ' ie-responsive';
      }
      {% if append_to_element %}
        document.getElementById("{{ append_to_element }}").appendChild(element);
      {% else %}
        document.body.appendChild(element);
      {% endif %}
      var player = new THEOplayer.Player(element, {
        libraryLocation : '{{ config.THEOPLAYER_LIBRARY_LOCATION }}',
        license : '{{ config.THEOPLAYER_LICENSE }}',
        ui : {
          {% if theo_config.fluid %}
          fluid: true
          {% endif %}
        },
        isEmbeddable: true,
        {% if embed_config.autoplay %}
        mutedAutoplay: 'all',
        {% endif %}
        initialRendition: 'first'
      });

      window.top.player = player;

    // --- Chapters helpers ---
    function durationToSeconds(durationStr) {
      if (!durationStr) return null;
      const parts = durationStr.split(':').map(Number); // [HH, MM, SS] or [MM, SS]
      if (parts.length === 3) {
        return parts[0] * 3600 + parts[1] * 60 + parts[2];
      }
      if (parts.length === 2) {
        return parts[0] * 60 + parts[1];
      }
      return null;
    }
    function formatVttTime(total) {
      const h = Math.floor(total / 3600);
      const m = Math.floor((total % 3600) / 60);
      const s = Math.floor(total % 60);
      return String(h).padStart(2,'0') + ':' + String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0') + '.000';
    }
    function buildChaptersVttFromArray(chaptersArr, videoDurationStr) {
      if (!chaptersArr || !chaptersArr.length) return null;

      chaptersArr.sort((a,b) => a.seconds - b.seconds);
      const videoDuration = durationToSeconds(videoDurationStr);
      if (videoDuration !== null && videoDuration <= 0) return null;
      let vtt = 'WEBVTT\n\n';
      for (let i = 0; i < chaptersArr.length; i++) {
        const c = chaptersArr[i];
        const start = c.seconds;
        const end = (i + 1 < chaptersArr.length)
                      ? chaptersArr[i+1].seconds
                      : (videoDuration || start + 1);

        vtt += `${i+1}\n${formatVttTime(start)} --> ${formatVttTime(end)}\n${c.title}\n\n`;
      }
      return vtt;
    }

    // Build textTracks
    var textTracksArr = [];
    // Chapters
    var chaptersArr = {{ (record.chapters if record and record.chapters else []) | tojson }};
    var videoDurationStr = {{ (record.duration if record and record.duration else "") | tojson }};
    var vttStr = buildChaptersVttFromArray(chaptersArr, videoDurationStr);
    if (vttStr) {
      var chapUrl = URL.createObjectURL(new Blob([vttStr], { type: 'text/vtt' }));
      textTracksArr.push({ kind: 'chapters', src: chapUrl, label: 'Chapters' });
    }
    {% if not embed_config.subtitlesOff %}
    textTracksArr.push({ kind: 'metadata', src: '{{ obj.thumbnails_uri }}', label: 'thumbnails', default: true });
    {% for uri, lang in obj.subtitles %}
    textTracksArr.push({
      kind: 'subtitles',
      src: '{{ uri }}',
      label: '{{ lang }}',
      srclang: '{{ lang }}'
      {% if embed_config.subtitles and embed_config.subtitles == lang %}, default: true{% endif %}
    });
    {% endfor %}
    {% endif %}

    // Set source with textTracks
    player.source = {
      sources: [
        {
          {% if video_source %}
            src: "{{ video_source }}",
            type: 'application/x-mpegURL'
          {% elif obj.m3u8_uri and obj.subformats|length > 0 %}
            src: '{{ obj.m3u8_uri }}',
            type: 'application/x-mpegURL'
          {% else %}
            src: '{{ obj.uri }}',
            type: 'video/mp4'
          {% endif %}
        }
      ],
      textTracks: textTracksArr,
      poster: '{{ obj.poster_uri }}',
        {% if obj.vr %}
        vr: {
          360: true,
        },
        {% endif %}
        preload: 'auto'
      };
      {% set socialSharing = embed_config.socialSharing | default(1) | int %}
      {% if socialSharing == 1 %}
        player.social.items = [
           {
             label : '{{ _("Video link") }}',
             src : '{{ url_for("invenio_records_ui.recid", pid_value=record.get("recid", ""), _external=True) }}',
           },
           {
             label : '{{ _("Embed") }}',
             text: '<iframe scrolling="no" src="{{ obj.embed_uri }}" width="560" height="315" frameborder="0" allowfullscreen></iframe>',
           }
       ];
      {% endif %}
      player.addEventListener("durationchange", function() {
        {% if embed_config.start %}
        player.clip.startTime = {{ embed_config.start | int }};
        {% endif %}
        {% if embed_config.end %}
        player.clip.endTime = {{ embed_config.end | int }};
        {% endif %}
      });
      player.autoplay = {{ embed_config.autoplay | default(False) | tojson }};
      player.loop = {{ embed_config.loop | default(False) | tojson }};
      player.controls = {{ (not embed_config.controlsOff) | default(True) | tojson }};
      player.muted = {{ embed_config.muted | default(False) | tojson }};

      {% if theo_config.showTitle and not embed_config.controlsOff %}
        // Append the title div
        var title = document.createElement('div');
        title.id = 'cds-video-overlay-title';
        title.innerHTML = '{{ record.get("title", {}).get("title", "") }}';
        document.body.appendChild(title);
        // Show/Hide the title on play
        player.addEventListener('play', function() {
          // Hide video title
          document.getElementById('cds-video-overlay-title').style.visibility = 'hidden';
        });
        player.addEventListener('pause', function() {
          // Show video title
          document.getElementById('cds-video-overlay-title').style.visibility = 'visible';
        });
      {% endif %}
      // Log view
      {% if log_media_views_url and config.LOG_USER_ACTIONS_ENABLED %}
        (function(player) {
          var url = '{{ log_media_views_url | safe }}';
          function onPlay() {
            var r = new XMLHttpRequest();
            r.open('POST', url, true);
            r.setRequestHeader('Content-Type', 'application/json');
            r.setRequestHeader( "X-CSRFToken", getCookie("csrftoken"));
            var data = JSON.stringify({
                key: "{{obj.file.key}}"
            });
            r.onload = function() {
              if (r.status >= 200 && r.status < 400) {
                player.removeEventListener('play', onPlay);
              }
            };
            r.send(data);
          }
          if (url) {
            player.addEventListener('play', onPlay);
          }
        })(player);
      {% endif %}
      (function() {
        const params = new URLSearchParams(window.location.search);
        const videoDuration = durationToSeconds({{ (record.duration if record and record.duration else "") | tojson }});
        const startTime = parseInt(params.get('t'), 10);
        if (!isNaN(startTime) && startTime >= 0 && startTime < videoDuration) {
            player.currentTime = startTime;
        }
      })();
    </script>
  {% endif %}
{%- endmacro %}