Add nbVideo & nbAudio (revive #153) (#244)

* add nbVideo & nbAudio + `relToRoot()`

* add nbVideo & nbAudio to all_blocks.nim

* add bad apple explainer to `nbVideo` section

docsrc/allblocks.nim

@@ -108,6 +108,31 @@ Most formats (.jpg, .png) are accepted. The caption is optional!
 nimibCode:
   nbImage(url="images/todd-cravens-nimib-unsplash.jpg", caption="Blue Whale (photograph by Todd Cravens)")
 
+nbCodeBlock: "nbVideo"
+nbText: """
+`nbVideo` allows you to display videos within your nimib document. You may choose if the
+video autoplays, loops, and/or is muted.
+
+Pictured below is Bad Apple!! If you aren't sure what it is, or are curious about its
+origins, here's [an explainer](https://www.youtube.com/watch?v=6QY4ekac1_Q).
+
+The `typ` parameter specifies the video's MIME type, and is optional!
+"""
+
+nimibCode:
+  nbVideo(url="media/bad_apple!!.mp4", typ="video/mp4")
+
+nbCodeBlock: "nbAudio"
+nbText: """
+`nbAudio` enables you to play audio in nimib. You may choose if the audio autoplays,
+loops, and/or is muted.
+
+The `typ` parameter is similar to `nbVideo`'s.
+"""
+
+nimibCode:
+  nbAudio(url="media/bad_apple!!.webm", loop=true)
+
 nbCodeBlock: "nbFile"
 nbText: """
 `nbFile` can save the contents of block into a file or display the contents of a file. 

src/nimib.nim

@@ -112,12 +112,7 @@ template nbTextWithCode*(body: untyped) =
 
 template nbImage*(url: string, caption = "", alt = "") =
   newNbSlimBlock("nbImage"):
-    nb.blk.context["url"] =
-      if isAbsolute(url) or url[0..3] == "http":
-        url
-      else:
-        nb.context["path_to_root"].vString / url
-
+    nb.blk.context["url"] = nb.relToRoot(url) 
     nb.blk.context["alt_text"] = 
       if alt == "":
         caption
@@ -126,6 +121,29 @@ template nbImage*(url: string, caption = "", alt = "") =
 
     nb.blk.context["caption"] = caption
 
+# todo captions and subtitles support maybe?
+template nbVideo*(url: string, typ: string = "", autoplay = false, muted = false, loop: bool = false) =
+  newNbSlimBlock("nbVideo"):
+    nb.blk.context["url"] = nb.relToRoot(url)
+    nb.blk.context["type"] =
+      if typ == "": "video/" & url.splitFile.ext[1..^1] # remove the leading dot
+      else: typ
+
+    if autoplay: nb.blk.context["autoplay"] = "autoplay"
+    if muted: nb.blk.context["muted"] = "muted"
+    if loop: nb.blk.context["loop"] = "loop"
+
+template nbAudio*(url: string, typ: string = "", autoplay = false, muted = false, loop: bool = false) =
+  newNbSlimBlock("nbAudio"):
+    nb.blk.context["url"] = nb.relToRoot(url)
+    nb.blk.context["type"] = 
+      if typ == "": "audio/" & url.splitFile.ext[1..^1]
+      else: typ
+
+    if autoplay: nb.blk.context["autoplay"] = "autoplay"
+    if muted: nb.blk.context["muted"] = "muted"
+    if loop: nb.blk.context["loop"] = "loop"
+
 template nbFile*(name: string, content: string) =
   ## Generic string file
   newNbSlimBlock("nbFile"):

src/nimib/docs.nim

@@ -1,7 +1,16 @@
 import std/os
+import std/uri
 import browsers
 import types, logging, renders
 
+proc relToRoot*(doc: NbDoc, url: string): string =
+  ## if url is relative, it is assumed as relative to root and adjusted for current document
+
+  if isAbsolute(url) or isAbsolute(parseUri(url)):
+    url
+  else:
+    doc.context["path_to_root"].vString / url
+
 proc write*(doc: var NbDoc) =
   log "current directory: " & getCurrentDir()
   let dir = doc.filename.splitFile().dir

src/nimib/renders.nim

@@ -25,6 +25,14 @@ proc useHtmlBackend*(doc: var NbDoc) =
 <img src="{{url}}" alt="{{alt_text}}">
 <figcaption>{{caption}}</figcaption>
 </figure>"""
+  doc.partials["nbVideo"] = """<video controls {{loop}} {{autoplay}} {{muted}}>
+  <source src="{{url}}" {{#type}}type="{{type}}"{{/type}}>
+Your browser does not support the video element.
+</video>"""
+  doc.partials["nbAudio"] = """<audio controls {{loop}} {{autoplay}} {{muted}}>
+  <source src="{{url}}" {{#type}}type="{{type}}"{{/type}}>
+Your browser does not support the audio element.
+</audio>"""
   doc.partials["nbRawHtml"] = "{{&output}}"
   doc.partials["nbPython"] = """
 <pre><code class="python hljs">{{&code}}</code></pre>