fixed components; added playerapp example

examples/mediaplayer/mediaplayer.nim

@@ -0,0 +1,42 @@
+
+import karax, karaxdsl, vdom, components
+
+const
+  Play = 0
+  Big = 1
+  Small = 2
+  Normal = 3
+
+proc paused(n: Node): bool {.importcpp: "#.paused".}
+proc play(n: Node) {.importcpp.}
+proc pause(n: Node) {.importcpp.}
+proc `width=`(n: Node, w: int) {.importcpp: "#.width = #".}
+
+proc mplayer*(id, resource: cstring): VNode {.component.} =
+  proc handler(ev: Event; n: VNode) =
+    let myVideo = document.getElementById(id)
+    case n.key
+    of Play:
+      if myVideo.paused:
+        myVideo.play()
+      else:
+        myVideo.pause()
+    of Big: myVideo.width = 560
+    of Small: myVideo.width = 320
+    of Normal: myVideo.width = 420
+    else: discard
+
+  result = buildHtml(tdiv):
+    button(onclick=handler, key=Play):
+      text "Play/Pause"
+    button(onclick=handler, key=Big):
+      text "Big"
+    button(onclick=handler, key=Small):
+      text "Small"
+    button(onclick=handler, key=Normal):
+      text "Normal"
+    br()
+    br()
+    video(id=id, width="420"):
+      source(src=resource, `type`="video/mp4"):
+        text "Your browser does not support HTML5 video."

examples/mediaplayer/playerapp.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Player app</title>
+</head>
+
+<body id="body">
+
+<div id="ROOT" />
+
+<script type="text/javascript" src="nimcache/playerapp.js"></script>
+<script type="text/javascript">
+  onload()
+</script>
+
+</body>
+</html>

examples/mediaplayer/playerapp.nim

@@ -0,0 +1,24 @@
+## Example app that shows how to write and embed a custom component.
+
+include karaxprelude
+import mediaplayer
+
+const url = "https://www.w3schools.com/html/mov_bbb.mp4"
+
+proc createDom(): VNode =
+  result = buildHtml(table):
+    tr:
+      td:
+        mplayer("vid1", url)
+      td:
+        mplayer("vid2", url)
+    tr:
+      td:
+        mplayer("vid3", url)
+      td:
+        mplayer("vid4", url)
+
+setRenderer createDom
+
+proc onload() {.exportc.} =
+  init()

examples/mediaplayer/playerapp.nims

@@ -0,0 +1 @@
+--path: "../../src"