remove dupe component (#6067)

* remove dupe component

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
pngwn 2023-10-23 12:17:42 +01:00 committed by GitHub
parent 7d07001e8e
commit bf38e5f06a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 72 deletions

View File

@ -0,0 +1,6 @@
---
"@gradio/video": patch
"gradio": patch
---
fix:remove dupe component

View File

@ -1,7 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { Play, Pause, Maximise, Undo } from "@gradio/icons";
import Video from "./StaticVideo.svelte";
import Video from "./Video.svelte";
export let src: string;
export let subtitle: string | null = null;

View File

@ -1,70 +0,0 @@
<script lang="ts">
import type { HTMLVideoAttributes } from "svelte/elements";
import { createEventDispatcher } from "svelte";
import { loaded } from "./utils";
import { resolve_wasm_src } from "@gradio/wasm/svelte";
export let src: HTMLVideoAttributes["src"] = undefined;
export let muted: HTMLVideoAttributes["muted"] = undefined;
export let playsinline: HTMLVideoAttributes["playsinline"] = undefined;
export let preload: HTMLVideoAttributes["preload"] = undefined;
export let autoplay: HTMLVideoAttributes["autoplay"] = undefined;
export let controls: HTMLVideoAttributes["controls"] = undefined;
export let currentTime: number | undefined = undefined;
export let duration: number | undefined = undefined;
export let paused: boolean | undefined = undefined;
export let node: HTMLVideoElement | undefined = undefined;
const dispatch = createEventDispatcher();
</script>
{#await resolve_wasm_src(src) then resolved_src}
<!--
The spread operator with `$$props` or `$$restProps` can't be used here
to pass props from the parent component to the <video> element
because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/7404
For example, if we add {...$$props} or {...$$restProps}, the boolean props aside it like `controls` will be compiled as string "true" or "false" on the actual DOM.
Then, even when `controls` is false, the compiled DOM would be `<video controls="false">` which is equivalent to `<video controls>` since the string "false" is even truthy.
-->
<video
src={resolved_src}
{muted}
{playsinline}
{preload}
{autoplay}
{controls}
on:loadeddata={dispatch.bind(null, "loadeddata")}
on:click={dispatch.bind(null, "click")}
on:play={dispatch.bind(null, "play")}
on:pause={dispatch.bind(null, "pause")}
on:ended={dispatch.bind(null, "ended")}
on:mouseover={dispatch.bind(null, "mouseover")}
on:mouseout={dispatch.bind(null, "mouseout")}
on:focus={dispatch.bind(null, "focus")}
on:blur={dispatch.bind(null, "blur")}
bind:currentTime
bind:duration
bind:paused
bind:this={node}
use:loaded={{ autoplay: autoplay ?? false }}
data-testid={$$props["data-testid"]}
>
<slot />
</video>
{:catch error}
<p style="color: red;">{error.message}</p>
{/await}
<style>
video {
position: inherit;
background-color: black;
width: var(--size-full);
height: var(--size-full);
object-fit: contain;
}
</style>

View File

@ -42,7 +42,8 @@
"**/venv/**/*",
"client/js/**",
"**/vite.config*",
".changeset/*.cjs"
".changeset/*.cjs",
"**/storybook-static/**/*"
],
"include": [
"**/*.d.ts",