Frame insert refactor (#246)

refactor frame/head insert templates:
ContentFrame:
- content iframe inited with new ContentFrame() which creates iframe
- wb_frame.js: contains ContentFrame system for initing, updating, closing content frame for replayed content.
- wb_frame.js: supports 'app_prefix' and 'content_prefix' or default 'prefix' for replay content
- window.location.hash passed added to init url.
- frame insert and head insert: simplify, remove 'wbrequest'
- frame insert: global wbinfo object no longer needed in top frame, each ContentFrame self-contained.
- wombat.js: next_parent() check does not assume wbinfo is present in top frame
- vidrw.js: only init if wbinfo is present

Banner:
- wb.js no longer needed, frame check/redirect folded into wombat.js
- default banner self-contained in default_banner.js/default_banner.css, handles both frame and frameless case
- rename wb.css -> default_banner.css
- banner html passed in as 'banner_html' variable to be optionally included, supports per collection banner html.
- templateview: BaseInsertView can accept an option 'banner view', used by HeadInsertView and TopFrameView

Tests:
- tests: test_auto_colls uses shared app to test dynamic changes, testing both frame and non-frame access, added per-collection banner html check.

pywb/apps/rewriterapp.py

@@ -71,13 +71,15 @@ def __init__(self, framed_replay=False, jinja_env=None, config=None, paths=None)
 
         self.jinja_env = jinja_env
 
+        self.banner_view = BaseInsertView(self.jinja_env, self._html_templ('banner_html'))
+
         self.head_insert_view = HeadInsertView(self.jinja_env,
                                                self._html_templ('head_insert_html'),
-                                               self._html_templ('banner_html'))
+                                               self.banner_view)
 
         self.frame_insert_view = TopFrameView(self.jinja_env,
                                                self._html_templ('frame_insert_html'),
-                                               self._html_templ('banner_html'))
+                                               self.banner_view)
 
         self.error_view = BaseInsertView(self.jinja_env, self._html_templ('error_html'))
         self.not_found_view = BaseInsertView(self.jinja_env, self._html_templ('not_found_html'))

pywb/apps/test/test_rewriter.py

@@ -28,15 +28,13 @@ def test_replay(self):
 
         assert '"http://localhost:80/live/mp_/http://www.iana.org/domains/example"' in resp.text
 
-        assert 'wbinfo.url = "http://example.com/"'
+        assert '"http://example.com/"'
 
     def test_top_frame(self):
         resp = self.testapp.get('/live/http://example.com/')
         resp.charset = 'utf-8'
 
-        assert '"http://localhost:80/live/mp_/http://example.com/"' in resp.text
-
-        assert 'wbinfo.capture_url = "http://example.com/"' in resp.text
+        assert '"http://example.com/"' in resp.text
 
     #def test_cookie_track_1(self):
     #    resp = self.testapp.get('/live/mp_/https://twitter.com/')

pywb/rewrite/templateview.py

@@ -109,10 +109,10 @@ def tojson(obj):
 
 # ============================================================================
 class BaseInsertView(object):
-    def __init__(self, jenv, insert_file, banner_file=''):
+    def __init__(self, jenv, insert_file, banner_view=None):
         self.jenv = jenv
         self.insert_file = insert_file
-        self.banner_file = banner_file
+        self.banner_view = banner_view
 
     def render_to_string(self, env, **kwargs):
         template = None
@@ -134,6 +134,7 @@ def render_to_string(self, env, **kwargs):
         params = env.get('webrec.template_params')
         if params:
             kwargs.update(params)
+        kwargs['env'] = env
 
         return template.render(**kwargs)
 
@@ -149,27 +150,25 @@ def create_insert_func(self, wb_url,
                            coll='',
                            include_ts=True):
 
-        url = wb_url.get_url()
+        params = {'host_prefix': host_prefix,
+                  'wb_prefix': wb_prefix,
+                  'wb_url': wb_url,
+                  'coll': coll,
+                  'is_framed': 'true' if is_framed else 'false',
+                  'top_url': top_url,
+                 }
 
-        include_wombat = not wb_url.is_banner_only
+        def make_head_insert(rule, cdx):
+            params['wombat_ts'] = cdx['timestamp'] if include_ts else ''
+            params['wombat_sec'] = timestamp_to_sec(cdx['timestamp'])
+            params['is_live'] = 'true' if cdx.get('is_live') else 'false'
 
-        wbrequest = {'host_prefix': host_prefix,
-                     'wb_prefix': wb_prefix,
-                     'wb_url': wb_url,
-                     'coll': coll,
-                     'env': env,
-                     'options': {'is_framed': is_framed},
-                     'rewrite_opts': {}
-                    }
+            if self.banner_view:
+                banner_html = self.banner_view.render_to_string(env, cdx=cdx, **params)
+                params['banner_html'] = banner_html
+
+            return self.render_to_string(env, cdx=cdx, **params)
 
-        def make_head_insert(rule, cdx):
-            return (self.render_to_string(env, wbrequest=wbrequest,
-                                          cdx=cdx,
-                                          top_url=top_url,
-                                          include_ts=include_ts,
-                                          include_wombat=include_wombat,
-                                          banner_html=self.banner_file,
-                                          rule=rule))
         return make_head_insert
 
 
@@ -198,25 +197,27 @@ def get_top_frame(self, wb_url,
         else:
             iframe_url = wb_prefix + embed_url
 
-        wbrequest = {'host_prefix': host_prefix,
-                     'wb_prefix': wb_prefix,
-                     'wb_url': wb_url,
-                     'coll': coll,
+        params = {'host_prefix': host_prefix,
+                  'wb_prefix': wb_prefix,
+                  'wb_url': wb_url,
+                  'coll': coll,
 
-                     'options': {'frame_mod': frame_mod,
-                                 'replay_mod': replay_mod},
-                    }
+                  'options': {'frame_mod': frame_mod,
+                              'replay_mod': replay_mod},
 
-        params = dict(embed_url=embed_url,
-                      iframe_url=iframe_url,
-                      wbrequest=wbrequest,
-                      timestamp=timestamp,
-                      url=wb_url.get_url(),
-                      banner_html=self.banner_file)
+                  'embed_url': embed_url,
+                  'iframe_url': iframe_url,
+                  'timestamp': timestamp,
+                  'url': wb_url.get_url()
+                 }
 
         if extra_params:
             params.update(extra_params)
 
+        if self.banner_view:
+            banner_html = self.banner_view.render_to_string(env, **params)
+            params['banner_html'] = banner_html
+
         return self.render_to_string(env, **params)
 
 

pywb/static/wb.css → pywb/static/default_banner.css

@@ -28,7 +28,7 @@
     height: 40px !important;
 }
 
-.wb_iframe_div
+#wb_iframe_div
 {
     position: absolute;
     width: 100%;

pywb/static/default_banner.js

@@ -19,43 +19,85 @@ This file is part of pywb, https://github.com/ikreymer/pywb
 */
 
 // Creates the default pywb banner.
-// Override this function/script to create a different type of banner
 
+(function() {
+    function ts_to_date(ts, is_gmt) {
+        if (!ts) {
+            return "";
+        }
 
-_wb_js.create_banner_element = function(banner_id)
-{
+        if (ts.length < 14) {
+            ts += "00000000000000".substr(ts.length);
+        }
 
-    var banner = document.createElement("wb_div", true);
-    banner.setAttribute("id", banner_id);
-    banner.setAttribute("lang", "en");
+        var datestr = (ts.substring(0, 4) + "-" +
+                      ts.substring(4, 6) + "-" +
+                      ts.substring(6, 8) + "T" +
+                      ts.substring(8, 10) + ":" +
+                      ts.substring(10, 12) + ":" +
+                      ts.substring(12, 14) + "-00:00");
 
-    var text;
+        var date = new Date(datestr);
 
-    if (wbinfo.is_frame) {
-        text = _wb_js.banner_labels.LOADING_MSG;
-    } else if (wbinfo.is_live) {
-        text = _wb_js.banner_labels.LIVE_MSG;
-    } else {
-        text = _wb_js.banner_labels.REPLAY_MSG;
+        if (is_gmt) {
+            return date.toGMTString();
+        } else {
+            return date.toLocaleString();
+        }
     }
-
-    text = "<span id='_wb_label'>" + text + "</span>";
 
-    var capture_str = "";
-    if (wbinfo && wbinfo.timestamp) {
-        capture_str = _wb_js.ts_to_date(wbinfo.timestamp, true);
+    function init(bid) {
+        var banner = document.createElement("wb_div", true);
+
+        banner.setAttribute("id", bid);
+        banner.setAttribute("lang", "en");
+
+        var text = "<span id='_wb_capture_info'>Loading...</span>";
+
+        banner.innerHTML = text;
+        document.body.insertBefore(banner, document.body.firstChild);
     }
 
-    text += "<b id='_wb_capture_info'>" + capture_str + "</b>";
+    function set_banner(url, ts, is_live) {
+        var capture_str;
+
+        if (!ts) {
+            return;
+        }
+
+        if (is_live) {
+            capture_str = "This is a <b>live</b> page from ";
+        } else {
+            capture_str = "This is an <b>archived</b> page from ";
+        }
+
+        capture_str += ts_to_date(ts, true);
+        document.querySelector("#_wb_capture_info").innerHTML = capture_str;
+    }
 
-    if (wbinfo.proxy_magic && wbinfo.url) {
-        var select_url = wbinfo.proxy_magic + "/" + wbinfo.url;
-        var query_url = wbinfo.proxy_magic + "/*/" + wbinfo.url;
-        text += '&nbsp;<a href="//query.' + query_url + '">All Capture Times</a>';
-        text += '<br/>'
-        text += 'From collection <b>"' + wbinfo.coll + '"</b>&nbsp;<a href="//select.' + select_url + '">All Collections</a>';
+    if (window.top != window) {
+        return;
     }
-
-    banner.innerHTML = text;
-    document.body.insertBefore(banner, document.body.firstChild);
-}
+
+    window.addEventListener("load", function() {
+        if (window.wbinfo) {
+            init("_wb_plain_banner");
+
+            set_banner(window.wbinfo.url,
+                       window.wbinfo.timestamp,
+                       window.wbinfo.is_live);
+        } else {
+            init("_wb_frame_top_banner");
+
+            window.addEventListener("message", function(event) {
+                var state = event.data;
+                if (state.wb_type) {
+                    set_banner(state.url, state.ts, state.is_live);
+                }
+            });
+        }
+    });
+
+})();
+
+

pywb/static/vidrw.js

@@ -34,7 +34,7 @@ if (window.location.hash) {
     if (_pywbvid == "html" || _pywbvid == "flash") {
         var YT_W_E_RX = /^(https?:\/\/.*youtube.com)\/(watch|embed).*$/;
 
-        if (wbinfo.url.match(YT_W_E_RX)) {
+        if (window.wbinfo && window.wbinfo.url.match(YT_W_E_RX)) {
             // special case: prevent yt player from being inited
             Object.defineProperty(window, 'yt', {writeable: false});
             Object.defineProperty(window, 'ytplayer', {writeable: false});
@@ -45,6 +45,10 @@ if (window.location.hash) {
 
 __wbvidrw = (function() {
 
+    if (!window.wbinfo) {
+        return;
+    }
+
     var checked_embeds = false;
 
     var FLASH_PLAYER = wbinfo.static_prefix + "/flowplayer/flowplayer-3.2.18.swf";