From e04adea7a8dac81b64174130506cb630d0f86fa7 Mon Sep 17 00:00:00 2001
From: Ilya Kreymer <ikreymer@gmail.com>
Date: Sat, 9 Mar 2019 15:48:45 -0800
Subject: [PATCH] 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    | 88 +++++++++++++++++++++++++++++++++
 pywb/static/vidrw.js            |  3 ++
 pywb/templates/head_insert.html |  6 +--
 pywb/templates/not_found.html   |  4 +-
 tests/test_integration.py       |  1 +
 5 files changed, 97 insertions(+), 5 deletions(-)
 create mode 100644 pywb/static/transclusions.js

diff --git a/pywb/static/transclusions.js b/pywb/static/transclusions.js
new file mode 100644
index 00000000..8238caa4
--- /dev/null
+++ b/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);
+  }
+
+})();
+
diff --git a/pywb/static/vidrw.js b/pywb/static/vidrw.js
index 73f4c1b4..3296ea08 100644
--- a/pywb/static/vidrw.js
+++ b/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) {
diff --git a/pywb/templates/head_insert.html b/pywb/templates/head_insert.html
index d42d0a35..2527d89c 100644
--- a/pywb/templates/head_insert.html
+++ b/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 }}
diff --git a/pywb/templates/not_found.html b/pywb/templates/not_found.html
index 4cfc4728..ac5cf5fc 100644
--- a/pywb/templates/not_found.html
+++ b/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>
diff --git a/tests/test_integration.py b/tests/test_integration.py
index 485c2ead..211d19a8 100644
--- a/tests/test_integration.py
+++ b/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