Debug

_config.yml

@@ -145,10 +145,12 @@ theme_settings:
   post_navigation: true
 
   p2p_player:
-    media_url: https://media.codonaft.com
+    media_urls:
+    - https://media.codonaft.com
+    - https://media-fallback.codonaft.com
     trackers:
-    - wss://media.codonaft.com/announce
     - wss://tracker.webtorrent.dev
+    - wss://media.codonaft.com/announce
     #- wss://tracker.openwebtorrent.com
     ice_servers:
     - stun:stun.framasoft.org

_hosts/media.codonaft/etc/nginx/http.d/media.conf

@@ -10,19 +10,6 @@ map $origin_allowed $origin {
   1 $http_origin;
 }
 
-server {
-  listen 80;
-  listen [::]:80;
-
-  server_name media.codonaft.com;
-
-  location / {
-    add_header Cache-Control "public, max-age=7200";
-    expires 2h;
-    return 301 https://$host$request_uri;
-  }
-}
-
 server {
   listen 443 ssl;
   listen [::]:443 ssl;
@@ -42,7 +29,7 @@ server {
   # #add_header X-Early-Data $tls1_3_early_data; # Debug 0-RTT
   # add_header x-frame-options "deny";
 
-  server_name media.codonaft.com;
+  server_name media.codonaft.com media-fallback.codonaft.com;
   ssl_certificate /etc/nginx/ssl/codonaft.com/fullchain.pem;
   ssl_certificate_key /etc/nginx/ssl/codonaft.com/privkey.pem;
   ssl_trusted_certificate /etc/nginx/ssl/codonaft.com/chain.pem;

_includes/head.html

@@ -149,7 +149,7 @@
 
  const loadChapters = (player, playerIndex) => {
   const duration = player.duration;
-  const element = document.querySelector(`.p2p-player-chapters[data-stream-url="${player.getAttribute('src')}"]`);
+  const element = player.parentElement.parentElement.querySelector('.p2p-player-chapters');
   if (!element) return;
 
   const lines = element
@@ -218,8 +218,33 @@
    loadChapters(player, playerIndex);
  };
 
- const initializePlayer = (player, playerIndex, currentTime, autoPlay) => {
+ const initializePlayer = (container, playerIndex, currentTime, autoPlay) => {
   pageLog(`initializePlayer ${playerIndex}`);
+
+  const timeZone = -(new Date().getTimezoneOffset() / 60);
+  const possiblyEurope = timeZone >= 0 && timeZone <= 4;
+
+  const playerTemplate = container.firstElementChild;
+  const swarmId = new URL(playerTemplate.getAttribute('src'));
+  if (!possiblyEurope) {
+   [...container.querySelectorAll('[src]')].forEach(i => {
+    const source = new URL(i.getAttribute('src'));
+    if (source.hostname === swarmId.hostname) {
+     source.hostname = new URL('{{ site.theme_settings.p2p_player.media_urls[1] }}').hostname;
+     i.setAttribute('src', source.toString());
+     pageLog('source ' + source);
+    }
+   })
+  }
+
+  const player = document.createElement('media-player');
+  for (let i = 0 ; i < playerTemplate.attributes.length ; i++) {
+   player.setAttribute(playerTemplate.attributes[i].name, playerTemplate.attributes[i].value);
+  }
+
+  player.innerHTML = playerTemplate.innerHTML.replaceAll('-template>', '>').replaceAll('-template ', ' '); // FIXME
+  container.replaceChild(player, playerTemplate);
+
   const videoLayout = player.querySelector('media-video-layout');
   const poster = player.querySelector("media-poster");
 
@@ -309,18 +334,28 @@
    pageLog('waiting');
   });
 
+  player.addEventListener('source-change', event => {
+   pageLog('source-change' + JSON.stringify(event.detail));
+  });
+
+  player.addEventListener('sources-change', event => {
+   pageLog('sources-change' + JSON.stringify(event.detail));
+  });
+
   player.addEventListener('error', event => {
    pageLog('error ' + JSON.stringify(event.detail));
   });
 
   player.addEventListener("provider-change", event => {
    const provider = event.detail;
    if (provider?.type === 'hls') {
+    pageLog('swarmId ' + swarmId);
+
     provider.library = HlsWithP2P;
     provider.config = {
      p2p: {
       core: {
-       // swarmId: player.getAttribute('src'),
+       // swarmId,
        // isP2PDisabled: false,
        // simultaneousHttpDownloads: 2,
        // simultaneousP2PDownloads: 3,
@@ -336,6 +371,12 @@
        p2pErrorRetries: Infinity,
        announceTrackers: {{ site.theme_settings.p2p_player.trackers | jsonify }},
        rtcConfig: { iceServers: {{ site.theme_settings.p2p_player.ice_servers | jsonify }}.map(urls => { return { urls }; }) },
+       mainStream: {
+        swarmId,
+       },
+       secondaryStream: {
+        swarmId,
+       },
       },
       onHlsJsCreated: (hls) => {
        hls.p2pEngine.addEventListener('onPeerConnect', (params) => {
@@ -391,12 +432,12 @@
   console.log('hls is supported');
   let maybeAutoPlay = true;
   document
-   .querySelectorAll('media-player')
-   .forEach((player, playerIndex) => {
+   .querySelectorAll('div.p2p-player-container')
+   .forEach((container, playerIndex) => {
     const time = currentTime[playerIndex];
     const undefinedTime = [undefined, NaN].includes(time);
     const autoPlay = !undefinedTime && maybeAutoPlay;
-    initializePlayer(player, playerIndex, undefinedTime ? undefined : time, autoPlay);
+    initializePlayer(container, playerIndex, undefinedTime ? undefined : time, autoPlay);
     if (autoPlay) maybeAutoPlay = false;
    });
  } else {

_includes/p2p_player.html

@@ -7,43 +7,43 @@
  {% assign video_id = page.permalink | split: '/' | last %}
  {% endif %}
 
- {% assign stream_url_prefix = site.theme_settings.p2p_player.media_url | append: '/' | append: video_id %}
+ {% assign stream_url_prefix = site.theme_settings.p2p_player.media_urls[0] | append: '/' | append: video_id %}
  {% assign stream_url = stream_url_prefix | append: "/main.m3u8" %}
  {% assign thumbnail_url = stream_url_prefix | append: "/thumbnail.webp" %}
 {% endif %}
 
 <p style="text-align: center">
  <div class="p2p-player-container" style="text-align: center; max-width: 100%; margin: auto">
-  <media-player
+  <media-player-template
    src="{{ stream_url }}"
    {% if include.duration %}duration="{{ include.duration }}"{% endif %}
    playsInline
    preload="auto"
    posterLoad="eager"
    storage="storage-key">
 
-   <media-provider>
-    <media-poster
+   <media-provider-template>
+    <media-poster-template
      class="vds-poster"
      src="{{ thumbnail_url }}"
      {% if include.title %}alt="{{ include.title }}"{% else %}{{ page.title | strip_html }}{% endif %}
-    ></media-poster>
+    ></media-poster-template>
 {% assign subtitles = include.subtitles | split: "," %}
 {% for i in subtitles %}
 {% assign subtitles_url = stream_url_prefix | append: "/" | append: i | append: ".vtt" %}
-    <track src="{{ subtitles_url }}" label="{{ i }}" language="{{ i }}" kind="subtitles" type="vtt" default />
+    <track-template src="{{ subtitles_url }}" label="{{ i }}" language="{{ i }}" kind="subtitles" type="vtt" default />
 {% endfor %}
-   </media-provider>
-   <media-video-layout></media-video-layout>
-  </media-player>
+   </media-provider-template>
+   <media-video-layout-template></media-video-layout-template>
+  </media-player-template>
  </div>
 {% if include.chapters %}
- <div class="p2p-player-chapters" data-stream-url="{{ stream_url }}">
+ <div class="p2p-player-chapters">
 {{ include.chapters | strip | newline_to_br }}
  </div>
 {% endif %}
 {% if include.description %}
- <div class="p2p-player-description" data-stream-url="{{ stream_url }}">
+ <div class="p2p-player-description">
 {{ include.description | strip | markdownify }}
  </div>
 {% endif %}