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