diff --git a/examples/mediaplayer/mediaplayer.nim b/examples/mediaplayer/mediaplayer.nim
new file mode 100644
index 0000000..d22e57d
--- /dev/null
+++ b/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."
diff --git a/examples/mediaplayer/playerapp.html b/examples/mediaplayer/playerapp.html
new file mode 100644
index 0000000..7b617f6
--- /dev/null
+++ b/examples/mediaplayer/playerapp.html
@@ -0,0 +1,18 @@
+
+
+
+
+ Player app
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/mediaplayer/playerapp.nim b/examples/mediaplayer/playerapp.nim
new file mode 100644
index 0000000..7a1ddb4
--- /dev/null
+++ b/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()
diff --git a/examples/mediaplayer/playerapp.nims b/examples/mediaplayer/playerapp.nims
new file mode 100644
index 0000000..9028ff1
--- /dev/null
+++ b/examples/mediaplayer/playerapp.nims
@@ -0,0 +1 @@
+--path: "../../src"
diff --git a/src/components.nim b/src/components.nim
index 52775df..fbbc00d 100644
--- a/src/components.nim
+++ b/src/components.nim
@@ -91,21 +91,29 @@ macro component*(prc: untyped): untyped =
unpackCall.add unpack(typ, counter)
inc counter
- template vwrapper(pname, cname, nameStrLit, unpackCall) {.dirty.} =
+ template vwrapper(pname, unpackCall) {.dirty.} =
proc pname(args: seq[VNode]): VNode =
unpackCall
- vcomponents[cstring(nameStrLit)] = cname
- template dwrapper(pname, cname, nameStrLit, unpackCall) {.dirty.} =
+ template dwrapper(pname, unpackCall) {.dirty.} =
proc pname(args: seq[VNode]): Node =
unpackCall
- dcomponents[cstring(nameStrLit)] = cname
+
+ template vregister(key, val) =
+ bind jdict.`[]=`
+ `[]=`(vcomponents, cstring(key), val)
+
+ template dregister(key, val) =
+ bind jdict.`[]=`
+ `[]=`(dcomponents, cstring(key), val)
result = newTree(nnkStmtList, n)
if isvirtual == ComponentKind.VNode:
- result.add getAst(vwrapper(newname name, realName, newLit(nn), unpackCall))
+ result.add getAst(vwrapper(newname name, unpackCall))
+ result.add getAst(vregister(newLit(nn), realName))
else:
- result.add getAst(dwrapper(newname name, realName, newLit(nn), unpackCall))
+ result.add getAst(dwrapper(newname name, unpackCall))
+ result.add getAst(dregister(newLit(nn), realName))
allcomponents[nn] = isvirtual
when defined(debugKaraxDsl):
echo repr result