introduce audio and video elements

nicegui/elements/audio.js

@@ -0,0 +1,14 @@
+export default {
+  template: `
+    <audio :controls="this.controls" :autoplay="this.autoplay" :muted="this.muted">
+      <source :src="this.src" :type="this.type">
+    </audio>
+  `,
+  props: {
+    controls: Boolean,
+    autoplay: Boolean,
+    muted: Boolean,
+    src: String,
+    type: String,
+  },
+};

nicegui/elements/audio.py

@@ -0,0 +1,27 @@
+from ..element import Element
+from ..vue import register_component
+
+register_component('audio', __file__, 'audio.js')
+
+
+class Audio(Element):
+
+    def __init__(self, src: str, *,
+                 type: str = 'audio/mpeg', controls: bool = True, autoplay: bool = False, muted: bool = False) -> None:
+        """Audio
+
+        :param src: URL of the audio source
+        :param type: MIME-type of the resource (default: 'audio/mpeg')
+        :param controls: whether to show the audio controls, like play, pause, and volume (default: `True`)
+        :param autoplay: whether to start playing the audio automatically (default: `False`)
+        :param muted: whether the audio should be initially muted (default: `False`)
+
+        See `here <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#events>`_
+        for a list of events you can subscribe to using the generic event subscription `on()`.
+        """
+        super().__init__('audio')
+        self._props['src'] = src
+        self._props['type'] = type
+        self._props['controls'] = controls
+        self._props['autoplay'] = autoplay
+        self._props['muted'] = muted

nicegui/elements/video.js

@@ -0,0 +1,14 @@
+export default {
+  template: `
+    <video :controls="this.controls" :autoplay="this.autoplay" :muted="this.muted">
+      <source :src="this.src" :type="this.type">
+    </video>
+  `,
+  props: {
+    controls: Boolean,
+    autoplay: Boolean,
+    muted: Boolean,
+    src: String,
+    type: String,
+  },
+};

nicegui/elements/video.py

@@ -0,0 +1,27 @@
+from ..element import Element
+from ..vue import register_component
+
+register_component('video', __file__, 'video.js')
+
+
+class Video(Element):
+
+    def __init__(self, src: str, *,
+                 type: str = 'video/mp4', controls: bool = True, autoplay: bool = False, muted: bool = False) -> None:
+        """Video
+
+        :param src: URL of the video source
+        :param type: MIME-type of the resource (default: 'video/mp4')
+        :param controls: whether to show the video controls, like play, pause, and volume (default: `True`)
+        :param autoplay: whether to start playing the video automatically (default: `False`)
+        :param muted: whether the video should be initially muted (default: `False`)
+
+        See `here <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events>`_
+        for a list of events you can subscribe to using the generic event subscription `on()`.
+        """
+        super().__init__('video')
+        self._props['src'] = src
+        self._props['type'] = type
+        self._props['controls'] = controls
+        self._props['autoplay'] = autoplay
+        self._props['muted'] = muted

nicegui/ui.py

@@ -1,5 +1,6 @@
 import os
 
+from .elements.audio import Audio as audio
 from .elements.badge import Badge as badge
 from .elements.button import Button as button
 from .elements.card import Card as card
@@ -42,6 +43,7 @@ from .elements.toggle import Toggle as toggle
 from .elements.tooltip import Tooltip as tooltip
 from .elements.tree import Tree as tree
 from .elements.upload import Upload as upload
+from .elements.video import Video as video
 from .functions.html import add_body_html, add_head_html
 from .functions.javascript import run_javascript
 from .functions.lifecycle import on_connect, on_disconnect, on_shutdown, on_startup, shutdown

website/reference.py

@@ -176,7 +176,7 @@ You can add Scalable Vector Graphics using the `ui.html` element.
             </svg>'''
         ui.html(content)
 
-    h3('Images')
+    h3('Images, Audio and Video')
 
     @example(ui.image)
     def image_example():
@@ -212,6 +212,19 @@ To overlay an SVG, make the `viewBox` exactly the size of the image and provide
         src = 'https://cdn.stocksnap.io/img-thumbs/960w/corn-cob_YSZZZEC59W.jpg'
         ii = ui.interactive_image(src, on_mouse=mouse_handler, events=['mousedown', 'mouseup'], cross=True)
 
+    @example(ui.audio)
+    def image_example():
+        a = ui.audio('https://cdn.pixabay.com/download/audio/2022/02/22/audio_d1718ab41b.mp3')
+        a.on('ended', lambda _: ui.notify('Audio playback completed'))
+
+        ui.button(on_click=lambda: a.props('muted')).props('outline icon=volume_up')
+        ui.button(on_click=lambda: a.props(remove='muted')).props('outline icon=volume_off')
+
+    @example(ui.video)
+    def image_example():
+        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'))
+
     h3('Data Elements')
 
     @example(ui.table)