svelte media bindings (#502)

* svelte media bindings

* add both lowercase and camelCase variant

* remove lowercase variant when it can't be HTML Attribute

#500, #494

Author: jasonlyu123

packages/language-server/src/plugins/html/dataProvider.ts

@@ -195,17 +195,42 @@ const mediaAttributes: IAttributeData[] = [
         name: 'bind:played',
         description: 'An array of {start, end} objects. (readonly)',
     },
+    {
+        name: 'bind:seeking',
+        description: 'boolean. (readonly)'
+    },
+    {
+        name: 'bind:ended',
+        description: 'boolean. (readonly)'
+    },
     {
         name: 'bind:currentTime',
         description: 'The current point in the video, in seconds.',
     },
+    {
+        name: 'bind:playbackRate',
+        description: `how fast or slow to play the video, where 1 is 'normal'`
+    },
     {
         name: 'bind:paused',
     },
     {
         name: 'bind:volume',
         description: 'A value between 0 and 1',
     },
+    {
+        name: 'bind:muted',
+    },
+];
+const videoAttributes: IAttributeData[] = [
+    {
+        name: 'bind:videoWidth',
+        description: 'readonly'
+    },
+    {
+        name: 'bind:videoHeight',
+        description: 'readonly'
+    }
 ];
 
 const addAttributes: Record<string, IAttributeData[]> = {
@@ -215,7 +240,7 @@ const addAttributes: Record<string, IAttributeData[]> = {
         { name: 'bind:group', description: 'Available for type="radio" and type="checkbox"' },
     ],
     textarea: [{ name: 'bind:value' }],
-    video: [...mediaAttributes],
+    video: [...mediaAttributes, ...videoAttributes],
     audio: [...mediaAttributes],
 };
 

packages/svelte2tsx/svelte-jsx.d.ts

@@ -248,14 +248,17 @@
       content?: string;
       contenteditable?: "true" | "false" | boolean;
 
+      // Doesn't work when used as HTML attribute
       /**
        * Elements with the contenteditable attribute support innerHTML and textContent bindings.
        */
-      innerhtml?: string;
+      innerHTML?: string;
+      // Doesn't work when used as HTML attribute
       /**
        * Elements with the contenteditable attribute support innerHTML and textContent bindings.
        */
-      textcontent?: string;
+
+      textContent?: string;
 
       contextmenu?: string;
       controls?: boolean;
@@ -358,6 +361,9 @@
       type?: string;
       usemap?: string;
       value?: string | string[] | number;
+      /**
+       * a value between 0 and 1
+      */
       volume?: number;
       width?: number | string;
       wmode?: string;
@@ -713,9 +719,46 @@
     }
 
     interface SapperAnchorProps {
+        // transformed from sapper:noscroll so it should be camel case
         sapperNoscroll?: true;
     }
 
+    interface SvelteMediaTimeRange {
+        start: number;
+        end: number;
+    }
+
+    interface SvelteMediaProps {
+        readonly duration?: number;
+        readonly buffered?: SvelteMediaTimeRange[];
+        readonly played?: SvelteMediaTimeRange[];
+        readonly seekable?: SvelteMediaTimeRange[];
+        readonly seeking?: boolean;
+        readonly ended?: boolean;
+
+        /**
+         * the current playback time in the video, in seconds
+         */
+        currentTime?: number;
+        /**
+         * the current playback time in the video, in seconds
+         */
+        currenttime?: number;
+        // Doesn't work when used as HTML Attribute
+        /**
+         * how fast or slow to play the video, where 1 is 'normal'
+         */
+        playbackRate?: number;
+
+        paused?: boolean;
+    }
+
+    interface SvelteVideoProps extends SvelteMediaProps {
+        // Binding only, don't need lowercase variant
+        readonly videoWidth?: number;
+        readonly videoHeight?: number;
+    }
+
     interface IntrinsicElements {
       // HTML
       a: HTMLProps<HTMLAnchorElement> & SapperAnchorProps;
@@ -724,7 +767,7 @@
       area: HTMLProps<HTMLAreaElement>;
       article: HTMLProps<HTMLElement>;
       aside: HTMLProps<HTMLElement>;
-      audio: HTMLProps<HTMLAudioElement>;
+      audio: HTMLProps<HTMLAudioElement> & SvelteMediaProps;
       b: HTMLProps<HTMLElement>;
       base: HTMLProps<HTMLBaseElement>;
       bdi: HTMLProps<HTMLElement>;
@@ -830,7 +873,7 @@
       u: HTMLProps<HTMLElement>;
       ul: HTMLProps<HTMLUListElement>;
       var: HTMLProps<HTMLElement>;
-      video: HTMLProps<HTMLVideoElement>;
+      video: HTMLProps<HTMLVideoElement> & SvelteVideoProps;
       wbr: HTMLProps<HTMLElement>;
 
       svg: SVGProps<SVGSVGElement>;