submit audio/video control PR

nicegui/elements/audio.js

@@ -21,5 +21,14 @@ export default {
     compute_src() {
       this.computed_src = (this.src.startsWith("/") ? window.path_prefix : "") + this.src;
     },
+    seek(seconds) {
+      this.$el.currentTime = seconds;
+    },
+    play() {
+      this.$el.play();
+    },
+    pause() {
+      this.$el.pause();
+    },
   },
 };

nicegui/elements/audio.py

@@ -40,3 +40,18 @@ class Audio(Element, component='audio.js'):
         if type:
             url = 'https://github.com/zauberzeug/nicegui/pull/624'
             warnings.warn(DeprecationWarning(f'The type parameter for ui.audio is deprecated and ineffective ({url}).'))
+
+    def seek(self, seconds: float) -> None:
+        """Seek to a specific position in the audio.
+
+        :param seconds: the position in seconds
+        """
+        self.run_method('seek', seconds)
+
+    def play(self) -> None:
+        """Play audio."""
+        self.run_method('play')
+
+    def pause(self) -> None:
+        """Pause audio."""
+        self.run_method('pause')

nicegui/elements/video.js

@@ -24,5 +24,11 @@ export default {
     seek(seconds) {
       this.$el.currentTime = seconds;
     },
+    play() {
+      this.$el.play();
+    },
+    pause() {
+      this.$el.pause();
+    },
   },
 };

nicegui/elements/video.py

@@ -47,3 +47,11 @@ class Video(Element, component='video.js'):
         :param seconds: the position in seconds
         """
         self.run_method('seek', seconds)
+
+    def play(self) -> None:
+        """Play video."""
+        self.run_method('play')
+
+    def pause(self) -> None:
+        """Pause video."""
+        self.run_method('pause')

website/more_documentation/audio_documentation.py

@@ -1,5 +1,6 @@
 from nicegui import ui
 
+from ..documentation_tools import text_demo
 
 def main_demo() -> None:
     a = ui.audio('https://cdn.pixabay.com/download/audio/2022/02/22/audio_d1718ab41b.mp3')
@@ -7,3 +8,18 @@ def main_demo() -> None:
 
     ui.button(on_click=lambda: a.props('muted'), icon='volume_off').props('outline')
     ui.button(on_click=lambda: a.props(remove='muted'), icon='volume_up').props('outline')
+
+url_audio = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
+seek_audio = 0
+
+def more() -> None:
+    @text_demo('Audio with play/pause/seek controls', '''
+        This demo shows how to use play/pause/seek controls.
+    ''')
+    def control_demo() -> None:
+        a = ui.audio(url_audio)
+        with ui.row():
+            ui.button('Play', on_click=lambda: a.play())
+            ui.button('Pause', on_click=lambda: a.pause())
+            ui.button('Seek', on_click=lambda: a.seek(seek_audio))
+            ui.number("Position", value=seek_audio).bind_value(globals(), 'seek_audio')

website/more_documentation/video_documentation.py

@@ -7,11 +7,18 @@ def main_demo() -> None:
     v = ui.video('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4')
     v.on('ended', lambda _: ui.notify('Video playback completed'))
 
+url_video = "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4"
+seek_video = 0
 
 def more() -> None:
-    @text_demo('Video start position', '''
-        This demo shows how to set the start position of a video.
+    @text_demo('Video with play/pause/seek controls', '''
+        This demo shows how to use play/pause/seek controls.
     ''')
-    def start_position_demo() -> None:
-        v = ui.video('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4')
-        v.on('loadedmetadata', lambda: v.seek(5))
+    def control_demo() -> None:
+        v = ui.video(url_video)
+        with ui.row():
+            ui.button('Play', on_click=lambda: v.play())
+            ui.button('Pause', on_click=lambda: v.pause())
+            ui.button('Seek', on_click=lambda: v.seek(seek_video))
+            ui.number("Position", value=seek_video).bind_value(globals(), 'seek_video')
+