Content server: Allow viewing the book metadata while reading a book. In the viewer controls, tap Goto and then Metadata to see the metadata. Fixes #1736312 [Feature request: A way to view book details while reading in Browser Viewer](https://bugs.launchpad.net/calibre/+bug/1736312)

src/pyj/book_list/book_details.pyj

@@ -197,7 +197,7 @@ def render_metadata(mi, table, book_id):  # {{{
         add_row(name, val, is_searchable=field)
 
     def process_formats(field, fm, name, val):
-        if val.length:
+        if val.length and book_id?:
             table.appendChild(E.tr(E.td(name + ':'), E.td()))
             td = table.lastChild.lastChild
             for fmt in val:

src/pyj/read_book/goto.pyj

@@ -24,6 +24,7 @@ def create_goto_list(onclick):
         items.push(create_item(_('Previous section'), icon='caret-left', subtitle=before.title, action=onclick.bind(None, before.dest, before.frag)))
     items.push(create_item(_('Document start'), action=onclick.bind(None, def(view): view.goto_doc_boundary(True);)))
     items.push(create_item(_('Document end'), action=onclick.bind(None, def(view): view.goto_doc_boundary(False);)))
+    items.push(create_item(_('Metadata'), subtitle=_('Details about this book'), action=onclick.bind(None, def(view): view.show_book_metadata();)))
     for l in landmarks:
         items.push(create_item(l.title, action=onclick.bind(None, l.dest, l.frag)))
     build_list(ans, items)

src/pyj/read_book/view.pyj

@@ -6,10 +6,11 @@ from elementmaker import E
 from gettext import gettext as _
 
 from ajax import ajax_send
+from book_list.book_details import render_metadata, CLASS_NAME as BD_CLASS_NAME
 from book_list.globals import get_session_data
 from book_list.router import push_state, read_book_mode
 from book_list.theme import get_color
-from dom import add_extra_css, build_rule, set_css, svgicon, unique_id
+from dom import add_extra_css, build_rule, clear, set_css, svgicon, unique_id
 from modals import error_dialog, warning_dialog
 from read_book.comm import IframeWrapper
 from read_book.content_popup import ContentPopupOverlay
@@ -34,7 +35,7 @@ add_extra_css(def():
 )
 
 
-# ControlsOverlay {{{
+# Simple Overlays {{{
 
 def show_controls_help():
     container = document.getElementById('controls-help-overlay')
@@ -66,6 +67,27 @@ def show_controls_help():
         )
     ))
 
+
+def show_metadata_overlay(mi):
+    container = document.getElementById('book-metadata-overlay')
+    clear(container)
+    container.style.display = 'block'
+    container.style.backgroundColor = get_color('window-background')
+    container.appendChild(E.div(
+        style='padding: 1ex 1em; border-bottom: solid 1px currentColor; display:flex; justify-content: space-between;',
+            E.h2(mi.title),
+            E.div(svgicon('close'), style='cursor:pointer', class_='simple-link', onclick=def(event):
+                  event.preventDefault()
+                  event.stopPropagation()
+                  document.getElementById('book-metadata-overlay').style.display = 'none'
+            )
+        )
+    )
+    container.appendChild(E.div(class_=BD_CLASS_NAME, style='padding: 1ex 1em'))
+    table = E.table(class_='metadata')
+    container.lastChild.appendChild(table)
+    render_metadata(mi, table)
+
 # }}}
 
 def margin_elem(sd, which, id, onclick):
@@ -112,6 +134,7 @@ class View:
                         E.div(style='position: absolute; top:0; left:0; width: 100%; pointer-events:none; display:none', id='book-search-overlay'),  # search overlay
                         E.div(style='position: absolute; top:0; left:0; width: 100%; height: 100%; display:none', id='book-content-popup-overlay'),  # content popup overlay
                         E.div(style='position: absolute; top:0; left:0; width: 100%; height: 100%; display:none', id='book-overlay'),  # main overlay
+                        E.div(style='position: absolute; top:0; left:0; width: 100%; min-height: 100%; display:none', id='book-metadata-overlay'),  # book metadata overlay
                         E.div(style='position: absolute; top:0; left:0; width: 100%; height: 100%; display:none', id='controls-help-overlay'),  # controls help overlay
                     )
                 )
@@ -390,6 +413,10 @@ class View:
         name = self.book.manifest.spine[0 if start else self.book.manifest.spine.length - 1]
         self.show_name(name, initial_position={'type':'frac', 'frac':0 if start else 1, 'replace_history':False})
 
+    def show_book_metadata(self):
+        mi = self.book.metadata
+        show_metadata_overlay(mi)
+
     def on_scroll_to_anchor(self, data):
         self.show_name(data.name, initial_position={'type':'anchor', 'anchor':data.frag, 'replace_history':False})