Add MediaControls (#121)

* Move gtk.nim into bindings dir

* Refactor adwaita bindings into a binding module

* Re export bound enums

* Add mediastream controls widget

* Merge MediaControls and Video examples

* Move media controls to popover menu

* Update screenshot and docs

---------

Co-authored-by: Can Lehmann <can.l@posteo.de>

.gitignore

@@ -22,6 +22,7 @@ examples/widgets/progress_bar
 examples/widgets/action_bar
 examples/widgets/search_entry
 examples/widgets/center_box
+examples/widgets/video
 examples/widgets/editable_label
 examples/widgets/video
 examples/widgets/column_view

docs/widgets.md

@@ -1582,6 +1582,18 @@ renderable Video of BaseWidget
 - `file: GFile`
 
 
+## MediaControls
+
+```nim
+renderable MediaControls of BaseWidget
+```
+
+###### Fields
+
+- All fields from [BaseWidget](#BaseWidget)
+- `mediaStream: MediaStream`
+
+
 ## Expander
 
 ```nim

examples/README.md

@@ -209,7 +209,7 @@ The `widgets` directory contains examples for how to use different widgets.
   </tr>
   <tr>
     <td><a href="https://github.com/can-lehmann/owlkettle/blob/main/examples/widgets/video.nim">Video</a></td>
-    <td><img alt="Video" src="../docs/assets/examples/video.png" width="985px"></td>
+    <td><img alt="Video" src="../docs/assets/examples/video.png" width="1115px"></td>
   </tr>
 </table>
 

examples/widgets/video.nim

@@ -32,6 +32,8 @@ viewable App:
   sizeRequest: tuple[x, y: int] = (-1, -1)
 
 method view(app: AppState): Widget =
+  const seekTime = 5 * 1000000
+
   result = gui:
     Window():
       defaultSize = (1000, 600)
@@ -47,12 +49,23 @@ method view(app: AppState): Widget =
           sizeRequest = (400, 400)
         )) {.addRight.}
 
+        MenuButton {.addRight.}:
+          icon = "view-more-symbolic"
+          style = [ButtonFlat]
+          sensitive = not app.mediaStream.isNil
+
+          PopoverMenu:
+            MediaControls:
+              margin = 10
+              sizeRequest = (300, -1)
+              mediaStream = app.mediaStream
+
         Button {.addRight.}:
           icon = "media-seek-forward-symbolic"
           style = [ButtonFlat]
           sensitive = not app.mediaStream.isNil
           proc clicked() =
-            app.mediaStream.seekRelative(5 * 1000000)
+            app.mediaStream.seekRelative(seekTime)
 
         Button {.addRight.}:
           icon = "media-playback-pause"
@@ -72,9 +85,9 @@ method view(app: AppState): Widget =
           icon = "media-seek-backward-symbolic"
           style = [ButtonFlat]
           sensitive = not app.mediaStream.isNil
-          proc clicked() = 
-            app.mediaStream.seekRelative(-5 * 1000000)
-
+          proc clicked() =
+            app.mediaStream.seekRelative(-seekTime)
+        
         Button {.addLeft.}:
           text = "Open"
           style = [ButtonSuggested]
@@ -94,7 +107,7 @@ method view(app: AppState): Widget =
                   style = [ButtonSuggested]
 
             if res.kind == DialogAccept:
-              let path = FileChooserDialogState(state).filename
+              let path = FileChooserDialogState(state).filenames[0]
               app.filename = path
               try:
                 app.mediaStream = newMediaStream(path)

owlkettle/bindings/gtk.nim

@@ -632,6 +632,10 @@ proc gtk_video_set_loop*(self: GtkWidget, loop: cbool)
 proc gtk_video_set_media_stream*(self: GtkWidget, stream: GtkMediaStream)
 proc gtk_video_set_resource*(self: GtkWidget, resource_path: cstring)
 
+# Gtk.MediaControls
+proc gtk_media_controls_new*(stream: GtkMediaStream): GtkWidget
+proc gtk_media_controls_set_media_stream*(controls: GtkWidget, stream: GtkMediaStream)
+
 # Gtk.Widget
 proc gtk_widget_show*(widget: GtkWidget)
 proc gtk_widget_hide*(widget: GtkWidget)

owlkettle/widgets.nim

@@ -3967,6 +3967,21 @@ renderable Video of BaseWidget:
     property:
       gtk_video_set_loop(state.internalWidget, state.loop.cbool)
 
+renderable MediaControls of BaseWidget:
+  mediaStream: MediaStream
+
+  hooks:
+    beforeBuild:
+      state.internalWidget = gtk_media_controls_new(nil.GtkMediaStream)
+
+  hooks mediaStream:
+    property:
+      if isNil(state.mediaStream):
+        gtk_media_controls_set_media_stream(state.internalWidget, GtkMediaStream(nil))
+      else:
+        gtk_media_controls_set_media_stream(state.internalWidget, state.mediaStream.gtk)
+
+
 proc `hasFileName=`*(widget: Video, has: bool) =
   widget.hasMediaStream = has
 
@@ -4610,8 +4625,8 @@ export AboutDialog, AboutDialogState
 export buildState, updateState, assignAppEvents
 export Scale
 export Expander
+export Video, MediaControls
 export SearchEntry
-export Video
 export ProgressBar
 export EmojiChooser
 export EditableLabel