transclusions/augmentations: add new video/audio translcusions script

- enabled with 'transclusions: 2' (default) config option
- legacy flash-supporting transclusions script (still working) available via 'transclusions: 1' or enable_flash_video_rewrite option
- add transclusions.js with support for poster image
- legacy vidrw: don't add undefined url as source
- locatization: wrap text in not_found.html to be translatable

pywb/static/transclusions.js

@@ -0,0 +1,88 @@
+(function() {
+  var loaded = false;
+
+  document.addEventListener("readystatechange", function() {
+    if (document.readyState === "complete") {
+      if (!loaded) {
+        loadTransclusions();
+        loaded = true;
+      }
+    }
+  });
+
+  function loadTransclusions() {
+    var viUrl = window.location.href.replace("mp_", "vi_");
+
+    window.fetch(viUrl)
+      .then(function(response) {
+        return response.json();
+      })
+      .then(function(json) {
+        addTransclusions(json);
+      })
+      .catch(function(err) {
+      });
+  }
+
+  function addTransclusions(json) {
+    var selector = json.selector || "object, embed";
+    var result = document.querySelector(selector);
+    if (!result) {
+      console.warn("No target to add video/audio transclusions");
+      return;
+    }
+
+    var parentElem = result.parentElement;
+
+    if (!json.formats) {
+      console.warn("No formats to add!");
+      return;
+    }
+
+    var isAudio = false;
+
+    try {
+      isAudio = json.formats.reduce(function(accum, curr) {
+        return accum && (curr.skip_as_source || (curr && curr.mime && curr.mime.startsWith("audio/")));
+      }, true);
+    } catch (e) {
+      isAudio = false;
+    }
+
+    var media = document.createElement(!isAudio ? "video" : "audio");
+    media.setAttribute("controls", "true");
+    media.setAttribute("style", "width: 100%; height: 100%");
+    //media.setAttribute("autoplay", "true");
+    //media.setAttribute("muted", true);
+
+    media.oncanplaythrough = function() {
+        if (!media.hasStarted) {
+          //media.muted = true;
+          media.hasStarted = true;
+        }
+        //media.play();
+    }
+
+    json.formats.forEach(function(data) {
+      if (data.skip_as_source) {
+        return;
+      }
+
+      if (data.name === "png_poster") {
+        media.setAttribute("poster", data.url);
+        return;
+      }
+
+      var source = document.createElement("source");
+      source.src = data.url;
+      if (data.mime) {
+        source.type = data.mime;
+      }
+      media.appendChild(source);
+    });
+
+    parentElem.replaceChild(media, result);
+  }
+
+})();
+

pywb/static/vidrw.js

@@ -594,6 +594,9 @@ __wbvidrw = (function() {
 
             if (i < 0) {
                 url = info.url;
+                if (!url) {
+                    continue;
+                }
                 format = get_format_ext(info);
             } else {
                 if (!info.formats[i]._wb_canPlay) {

pywb/templates/head_insert.html

@@ -51,12 +51,12 @@
 </script>
 {% endif %}
 
-{% if config.enable_flash_video_rewrite %}
+{% if config.enable_flash_video_rewrite or config.transclusions_version == 1 %}
 <script src='{{ static_prefix }}/vidrw.js'> </script>
-{% endif %}
 
-{% if config.enable_transclusions %}
+{% elif config.transclusions_version | default(2) == 2 %}
 <script src="{{ static_prefix }}/transclusions.js"> </script>
+
 {% endif %}
 
 {{ banner_html }}

pywb/templates/not_found.html

@@ -5,10 +5,10 @@
 {% block body %}
 <div class="container">
     <div class="col-12">
-        <h4 class="display-2">URL Not Found</h4>
+        <h4>{% trans %}URL Not Found{% endtrans %}</h4>
     </div>
     <p>
-        The url <b>{{ url }}</b> could not be found in this collection.
+        {% trans %}The url <b>{{ url }}</b> could not be found in this collection.{% endtrans %}
     </p>
     {% if wbrequest and wbrequest.env.pywb_proxy_magic and url %}
         <p>

tests/test_integration.py

@@ -103,6 +103,7 @@ class TestWbIntegration(BaseConfigTest):
 
         assert '"20140127171238"' in resp.text, resp.text
         assert 'wombat.js' in resp.text
+        assert 'transclusions.js' in resp.text
         assert '_WBWombatInit' in resp.text, resp.text
         assert 'wbinfo.enable_auto_fetch = false;' in resp.text
         assert '/pywb/20140127171238{0}/http://www.iana.org/time-zones"'.format(fmod) in resp.text