add controls attr to ::video

Author: lebalz

docs/tdev/gallery/markdown/remark-media/video.mdx

@@ -36,14 +36,18 @@ Fügt ein lokales Video ein.
 : Breite des Videos.
 : Standardmässig auf die natürliche Breite des Videos gesetzt (wobei `max-width=100%` gesetzt wird).
 : z.B. `width=200px`
+`controls`
+: Blendet die Steuerelemente des Videos ein oder aus.
+: Standardmässig `true`.
+: z.B. `controls=false`
 css Eigenschaften
 : Es können beliebige css-Eigenschaften in Form `eigenschaft=wert` angegeben werden, die auf das Video angewendet werden.
 
 
 ```mdx
-::video[./assets/yogi-bear.mp4]{width=300px height=200px muted autoplay loop border="2px solid red"}
+::video[./assets/yogi-bear.mp4]{width=300px height=200px muted autoplay loop border="2px solid red" controls=false}
 ```
 
 <BrowserWindow>
-::video[./assets/yogi-bear.mp4]{width=300px height=200px muted autoplay loop border="2px solid red"}
+::video[./assets/yogi-bear.mp4]{width=300px height=200px muted autoplay loop border="2px solid red" controls=false}
 </BrowserWindow>

src/plugins/remark-media/plugin.ts

@@ -52,7 +52,9 @@ const plugin: Plugin<unknown[], Root> = function plugin(): Transformer<Root> {
                         newNode.attributes.push(toJsxAttribute('loop', attributes.loop));
                     }
                     newNode.attributes.push(toJsxAttribute('style', { maxWidth: '100%', ...style }));
-                    newNode.attributes.push(toJsxAttribute('controls', ''));
+                    if (!('controls' in attributes) || attributes.controls) {
+                        newNode.attributes.push(toJsxAttribute('controls', ''));
+                    }
                     newNode.children.push({
                         type: 'mdxJsxFlowElement',
                         name: 'source',

src/plugins/remark-media/tests/plugin.test.ts

@@ -49,6 +49,18 @@ describe('#medialinks', () => {
           "
         `);
     });
+    it('respects controls=false for video', async () => {
+        const input = `
+            ::video[./bunny.mp4]{controls=false}
+        `;
+        const result = await process(input);
+        expect(result).toMatchInlineSnapshot(`
+          "<video style={{"maxWidth":"100%"}}>
+            <source src={require('./bunny.mp4').default} />
+          </video>
+          "
+        `);
+    });
     it('can convert audio directive', async () => {
         const input = `
             ::audio[./song.mp3]