Merge pull request #624 from dclause/rewrite-audio-video-components

Issue #600: fix DOM mutation issue regarding vue in-place-patching ti…

nicegui/elements/audio.js

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

nicegui/elements/audio.py

@@ -1,3 +1,5 @@
+import warnings
+
 from ..dependencies import register_component
 from ..element import Element
 
@@ -7,15 +9,15 @@ 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,
-                 loop: bool = False) -> None:
+                 loop: bool = False,
+                 type: str = '',  # DEPRECATED
+                 ) -> 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`)
@@ -26,8 +28,11 @@ class Audio(Element):
         """
         super().__init__('audio')
         self._props['src'] = src
-        self._props['type'] = type
         self._props['controls'] = controls
         self._props['autoplay'] = autoplay
         self._props['muted'] = muted
         self._props['loop'] = loop
+
+        if type:
+            url = f'https://github.com/zauberzeug/nicegui/pull/624'
+            warnings.warn(DeprecationWarning(f'The type parameter for ui.audio is deprecated and ineffective ({url}).'))

nicegui/elements/video.js

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

nicegui/elements/video.py

@@ -1,3 +1,5 @@
+import warnings
+
 from ..dependencies import register_component
 from ..element import Element
 
@@ -7,15 +9,15 @@ 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,
-                 loop: bool = False) -> None:
+                 loop: bool = False,
+                 type: str = '',  # DEPRECATED
+                 ) -> 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`)
@@ -26,8 +28,11 @@ class Video(Element):
         """
         super().__init__('video')
         self._props['src'] = src
-        self._props['type'] = type
         self._props['controls'] = controls
         self._props['autoplay'] = autoplay
         self._props['muted'] = muted
         self._props['loop'] = loop
+
+        if type:
+            url = f'https://github.com/zauberzeug/nicegui/pull/624'
+            warnings.warn(DeprecationWarning(f'The type parameter for ui.video is deprecated and ineffective ({url}).'))