From 8fceec208cf2ac71ef886945d35923db1c9713d7 Mon Sep 17 00:00:00 2001 From: "Gong, Wen" Date: Mon, 2 Oct 2023 18:29:19 -0400 Subject: [PATCH 1/2] submit audio/video control PR --- nicegui/elements/audio.js | 9 +++++++++ nicegui/elements/audio.py | 15 +++++++++++++++ nicegui/elements/video.js | 6 ++++++ nicegui/elements/video.py | 8 ++++++++ .../more_documentation/audio_documentation.py | 16 ++++++++++++++++ .../more_documentation/video_documentation.py | 17 ++++++++++++----- 6 files changed, 66 insertions(+), 5 deletions(-) diff --git a/nicegui/elements/audio.js b/nicegui/elements/audio.js index 5a4374d75..bea83e2a0 100644 --- a/nicegui/elements/audio.js +++ b/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(); + }, }, }; diff --git a/nicegui/elements/audio.py b/nicegui/elements/audio.py index e6daaf681..65f3ec58b 100644 --- a/nicegui/elements/audio.py +++ b/nicegui/elements/audio.py @@ -40,3 +40,18 @@ def __init__(self, src: Union[str, Path], *, 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') \ No newline at end of file diff --git a/nicegui/elements/video.js b/nicegui/elements/video.js index e44f198bf..a4e6575f2 100644 --- a/nicegui/elements/video.js +++ b/nicegui/elements/video.js @@ -24,5 +24,11 @@ export default { seek(seconds) { this.$el.currentTime = seconds; }, + play() { + this.$el.play(); + }, + pause() { + this.$el.pause(); + }, }, }; diff --git a/nicegui/elements/video.py b/nicegui/elements/video.py index 9a87f4522..6ba0389e8 100644 --- a/nicegui/elements/video.py +++ b/nicegui/elements/video.py @@ -47,3 +47,11 @@ def seek(self, seconds: float) -> None: :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') \ No newline at end of file diff --git a/website/more_documentation/audio_documentation.py b/website/more_documentation/audio_documentation.py index 05347d68a..c7dafe882 100644 --- a/website/more_documentation/audio_documentation.py +++ b/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') diff --git a/website/more_documentation/video_documentation.py b/website/more_documentation/video_documentation.py index a2cf9dca4..39b09277c 100644 --- a/website/more_documentation/video_documentation.py +++ b/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') + From 606bb2b9bf13209a85253b1bcf33fc6530491024 Mon Sep 17 00:00:00 2001 From: Falko Schindler Date: Wed, 4 Oct 2023 17:43:20 +0200 Subject: [PATCH 2/2] code review --- nicegui/elements/audio.py | 2 +- nicegui/elements/video.py | 2 +- .../more_documentation/audio_documentation.py | 17 +++++++---------- .../more_documentation/video_documentation.py | 17 ++++++----------- 4 files changed, 15 insertions(+), 23 deletions(-) diff --git a/nicegui/elements/audio.py b/nicegui/elements/audio.py index 65f3ec58b..8e5cbe82f 100644 --- a/nicegui/elements/audio.py +++ b/nicegui/elements/audio.py @@ -54,4 +54,4 @@ def play(self) -> None: def pause(self) -> None: """Pause audio.""" - self.run_method('pause') \ No newline at end of file + self.run_method('pause') diff --git a/nicegui/elements/video.py b/nicegui/elements/video.py index 6ba0389e8..466548b90 100644 --- a/nicegui/elements/video.py +++ b/nicegui/elements/video.py @@ -54,4 +54,4 @@ def play(self) -> None: def pause(self) -> None: """Pause video.""" - self.run_method('pause') \ No newline at end of file + self.run_method('pause') diff --git a/website/more_documentation/audio_documentation.py b/website/more_documentation/audio_documentation.py index c7dafe882..51af6f004 100644 --- a/website/more_documentation/audio_documentation.py +++ b/website/more_documentation/audio_documentation.py @@ -2,6 +2,7 @@ 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') a.on('ended', lambda _: ui.notify('Audio playback completed')) @@ -9,17 +10,13 @@ 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. + @text_demo('Control the audio element', ''' + This demo shows how to play, pause and seek programmatically. ''') 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') + a = ui.audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3') + ui.button('Play', on_click=a.play) + ui.button('Pause', on_click=a.pause) + ui.button('Jump to 0:30', on_click=lambda: a.seek(30)) diff --git a/website/more_documentation/video_documentation.py b/website/more_documentation/video_documentation.py index 39b09277c..fc77d8810 100644 --- a/website/more_documentation/video_documentation.py +++ b/website/more_documentation/video_documentation.py @@ -7,18 +7,13 @@ 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 with play/pause/seek controls', ''' - This demo shows how to use play/pause/seek controls. + @text_demo('Control the video element', ''' + This demo shows how to play, pause and seek programmatically. ''') 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') - + v = ui.video('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4') + ui.button('Play', on_click=v.play) + ui.button('Pause', on_click=v.pause) + ui.button('Jump to 0:05', on_click=lambda: v.seek(5))