Upload folder using huggingface_hub

.gitattributes

@@ -35,3 +35,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 src/examples/SampleVideo[[:space:]]1280x720.mp4 filter=lfs diff=lfs merge=lfs -text
 src/examples/Samplevideo[[:space:]]720x480.mp4 filter=lfs diff=lfs merge=lfs -text
+src/examples/SampleVideo[[:space:]]720x480.mp4 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,4 +1,5 @@
 .eggs/
+.vscode/
 dist/
 *.pyc
 __pycache__/
@@ -9,4 +10,5 @@ __tmp/*
 .mypycache
 .ruff_cache
 node_modules
-backend/**/templates/
+backend/**/templates/
+README_TEMPLATE.md

README.md

@@ -10,9 +10,18 @@ app_file: space.py
 ---
 
 # `gradio_videoslider`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+<a href="https://pypi.org/project/gradio_videoslider/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_videoslider"></a>  
 
-VideoSlider Component for Gradio
+An interactive component for Gradio to compare two videos side-by-side with a draggable slider.
+
+## Features
+
+- **Side-by-Side Comparison**: Display two videos in the same component, perfect for showing "before and after" results.
+- **Interactive Slider**: A draggable vertical slider allows users to intuitively compare the two videos.
+- **Synchronized Playback**: Clicking on the component plays or pauses both videos simultaneously, keeping them in sync.
+- **Input and Output**: Use it as an input field for users to upload two videos, or as an output to display results from your function.
+- **Standard Video Controls**: Includes autoplay, looping properties, mute/unmute, fullscreen toggle, and a download button.
+- **Flexible Loading**: Load videos from local file paths or remote URLs directly into the component.
 
 ## Installation
 
@@ -23,7 +32,6 @@ pip install gradio_videoslider
 ## Usage
 
 ```python
-# In demo/app.py
 import gradio as gr
 from gradio_videoslider import VideoSlider
 import os
@@ -33,8 +41,8 @@ import os
 # IMPORTANT: Replace the values below with the paths to YOUR video files.
 #
 # Option A: Relative Path (if the video is in the same folder as this app.py)
-# video_path_1 = "video_antes.mp4"
-# video_path_2 = "video_depois.mp4"
+# video_path_1 = "video_before.mp4"
+# video_path_2 = "video_after.mp4"
 #
 # Option B: Absolute Path (the full path to the file on your computer)
 # Example for Windows:
@@ -48,7 +56,7 @@ video_path_1 = "examples/SampleVideo 720x480.mp4"
 video_path_2 = "examples/SampleVideo 1280x720.mp4"
 
 
-# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE ---
 def process_uploaded_videos(video_inputs):
     """This function handles the uploaded videos."""
     print("Received videos from upload:", video_inputs)
@@ -64,11 +72,13 @@ with gr.Blocks() as demo:
         # --- TAB 1: UPLOAD EXAMPLE ---
         with gr.TabItem("1. Compare via Upload"):
             gr.Markdown("## Upload two videos to compare them side-by-side.")
-            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700, video_mode="upload")
             video_slider_output = VideoSlider(
                 label="Video comparision",
                 interactive=False,
-                autoplay=True,
+                autoplay=True,                
+                video_mode="preview",
+                show_download_button=False,
                 loop=True,
                 height=400,
                 width=700
@@ -89,13 +99,15 @@ with gr.Blocks() as demo:
                 label="Video comparision",
                 value=(video_path_1, video_path_2),
                 interactive=False,
+                show_download_button=False,
                 autoplay=True,
+                video_mode="preview",
                 loop=True,
                 height=400,
                 width=700
             )
 
-# Optional: A check to give a helpful error message if files are not found.
+# A check to give a helpful error message if files are not found.
 if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
     print("---")
     print(f"WARNING: Could not find one or both video files.")
@@ -105,7 +117,7 @@ if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
     print("---")
 
 if __name__ == '__main__':
-    demo.launch()
+    demo.launch(debug=True)
 
 ```
 
@@ -143,7 +155,7 @@ typing.Union[
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">A tuple of two video file paths or URLs to display initially.</td>
+<td align="left">A tuple of two video file paths or URLs to display initially. Can also be a callable.</td>
 </tr>
 
 <tr>
@@ -156,7 +168,7 @@ int | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">The height of the component in pixels.</td>
+<td align="left">The height of the component container in pixels.</td>
 </tr>
 
 <tr>
@@ -169,7 +181,7 @@ int | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">The width of the component in pixels.</td>
+<td align="left">The width of the component container in pixels.</td>
 </tr>
 
 <tr>
@@ -182,7 +194,7 @@ str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">The label for this component.</td>
+<td align="left">The label for this component that appears above it.</td>
 </tr>
 
 <tr>
@@ -195,7 +207,7 @@ float | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">None</td>
+<td align="left">If `value` is a callable, run the function 'every' seconds while the client connection is open.</td>
 </tr>
 
 <tr>
@@ -208,7 +220,7 @@ bool | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">None</td>
+<td align="left">If False, the label is not displayed.</td>
 </tr>
 
 <tr>
@@ -221,7 +233,7 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">None</td>
+<td align="left">If False, the component will not be wrapped in a container.</td>
 </tr>
 
 <tr>
@@ -234,7 +246,7 @@ int | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">None</td>
+<td align="left">An integer that defines the component's relative size in a layout.</td>
 </tr>
 
 <tr>
@@ -247,7 +259,7 @@ int
 
 </td>
 <td align="left"><code>160</code></td>
-<td align="left">None</td>
+<td align="left">The minimum width of the component in pixels.</td>
 </tr>
 
 <tr>
@@ -260,7 +272,7 @@ bool | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">If False, the component will be in display-only mode.</td>
+<td align="left">If True, the component is in input mode (upload). If False, it's in display-only mode.</td>
 </tr>
 
 <tr>
@@ -273,7 +285,7 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">None</td>
+<td align="left">If False, the component is not rendered.</td>
 </tr>
 
 <tr>
@@ -286,7 +298,7 @@ str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">None</td>
+<td align="left">An optional string that is assigned as the id of the component in the HTML.</td>
 </tr>
 
 <tr>
@@ -301,7 +313,7 @@ typing.Union[typing.List[str], str, NoneType][
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">None</td>
+<td align="left">An optional list of strings that are assigned as the classes of the component in the HTML.</td>
 </tr>
 
 <tr>
@@ -314,7 +326,7 @@ int
 
 </td>
 <td align="left"><code>50</code></td>
-<td align="left">The initial position of the slider, from 0 to 100.</td>
+<td align="left">The initial horizontal position of the slider, from 0 (left) to 100 (right).</td>
 </tr>
 
 <tr>
@@ -327,7 +339,20 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">None</td>
+<td align="left">If True, a download button is shown for the second video.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_mute_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, a mute/unmute button is shown.</td>
 </tr>
 
 <tr>
@@ -340,7 +365,20 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">None</td>
+<td align="left">If True, a fullscreen button is shown.</td>
+</tr>
+
+<tr>
+<td align="left"><code>video_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"upload" | "preview"
+```
+
+</td>
+<td align="left"><code>"preview"</code></td>
+<td align="left">The mode of the component, either "upload" or "preview".</td>
 </tr>
 
 <tr>
@@ -353,7 +391,7 @@ bool
 
 </td>
 <td align="left"><code>False</code></td>
-<td align="left">If True, the videos will start playing automatically.</td>
+<td align="left">If True, videos will start playing automatically on load (muted).</td>
 </tr>
 
 <tr>
@@ -366,7 +404,7 @@ bool
 
 </td>
 <td align="left"><code>False</code></td>
-<td align="left">If True, the videos will loop when they finish.</td>
+<td align="left">If True, videos will loop when they finish playing.</td>
 </tr>
 </tbody></table>
 

app.py

@@ -1,83 +1,86 @@
-# In demo/app.py
-import gradio as gr
-from gradio_videoslider import VideoSlider
-import os
-
-# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
-#
-# IMPORTANT: Replace the values below with the paths to YOUR video files.
-#
-# Option A: Relative Path (if the video is in the same folder as this app.py)
-# video_path_1 = "video_antes.mp4"
-# video_path_2 = "video_depois.mp4"
-#
-# Option B: Absolute Path (the full path to the file on your computer)
-# Example for Windows:
-# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
-#
-# Example for Linux/macOS:
-# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
-
-# Set your file paths here:
-video_path_1 = "src/examples/Samplevideo 720x480.mp4"
-video_path_2 = "src/examples/SampleVideo 1280x720.mp4"
-
-
-# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
-def process_uploaded_videos(video_inputs):
-    """This function handles the uploaded videos."""
-    print("Received videos from upload:", video_inputs)
-    return video_inputs
-
-
-# --- 3. GRADIO INTERFACE ---
-with gr.Blocks() as demo:
-    gr.Markdown("# Video Slider Component Usage Examples")
-    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_videoslider'>Component GitHub Code</a></span>")
-
-    with gr.Tabs():
-        # --- TAB 1: UPLOAD EXAMPLE ---
-        with gr.TabItem("1. Compare via Upload"):
-            gr.Markdown("## Upload two videos to compare them side-by-side.")
-            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
-            video_slider_output = VideoSlider(
-                label="Video comparision",
-                interactive=False,
-                autoplay=True,
-                loop=True,
-                height=400,
-                width=700
-            )
-            submit_btn = gr.Button("Submit")
-            submit_btn.click(
-                fn=process_uploaded_videos,
-                inputs=[video_slider_input],
-                outputs=[video_slider_output]
-            )
-
-        # --- TAB 2: LOCAL FILE EXAMPLE ---
-        with gr.TabItem("2. Compare Local Files"):
-            gr.Markdown("## Example with videos pre-loaded from your local disk.")
-            
-            # This is the key part: we pass a tuple of your local file paths to the `value` parameter.
-            VideoSlider(
-                label="Video comparision",
-                value=(video_path_1, video_path_2),
-                interactive=False,
-                autoplay=True,
-                loop=True,
-                height=400,
-                width=700
-            )
-
-# Optional: A check to give a helpful error message if files are not found.
-if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
-    print("---")
-    print(f"WARNING: Could not find one or both video files.")
-    print(f"Please make sure these paths are correct in your app.py file:")
-    print(f"  - '{os.path.abspath(video_path_1)}'")
-    print(f"  - '{os.path.abspath(video_path_2)}'")
-    print("---")
-
-if __name__ == '__main__':
-    demo.launch()
+import gradio as gr
+from gradio_videoslider import VideoSlider
+import os
+
+# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
+#
+# IMPORTANT: Replace the values below with the paths to YOUR video files.
+#
+# Option A: Relative Path (if the video is in the same folder as this app.py)
+# video_path_1 = "video_before.mp4"
+# video_path_2 = "video_after.mp4"
+#
+# Option B: Absolute Path (the full path to the file on your computer)
+# Example for Windows:
+# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
+#
+# Example for Linux/macOS:
+# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
+
+# Set your file paths here:
+video_path_1 = "examples/SampleVideo 720x480.mp4"
+video_path_2 = "examples/SampleVideo 1280x720.mp4"
+
+
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE ---
+def process_uploaded_videos(video_inputs):
+    """This function handles the uploaded videos."""
+    print("Received videos from upload:", video_inputs)
+    return video_inputs
+
+
+# --- 3. GRADIO INTERFACE ---
+with gr.Blocks() as demo:
+    gr.Markdown("# Video Slider Component Usage Examples")
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_videoslider'>Component GitHub Code</a></span>")
+
+    with gr.Tabs():
+        # --- TAB 1: UPLOAD EXAMPLE ---
+        with gr.TabItem("1. Compare via Upload"):
+            gr.Markdown("## Upload two videos to compare them side-by-side.")
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700, video_mode="upload")
+            video_slider_output = VideoSlider(
+                label="Video comparision",
+                interactive=False,
+                autoplay=True,                
+                video_mode="preview",
+                show_download_button=False,
+                loop=True,
+                height=400,
+                width=700
+            )
+            submit_btn = gr.Button("Submit")
+            submit_btn.click(
+                fn=process_uploaded_videos,
+                inputs=[video_slider_input],
+                outputs=[video_slider_output]
+            )
+
+        # --- TAB 2: LOCAL FILE EXAMPLE ---
+        with gr.TabItem("2. Compare Local Files"):
+            gr.Markdown("## Example with videos pre-loaded from your local disk.")
+            
+            # This is the key part: we pass a tuple of your local file paths to the `value` parameter.
+            VideoSlider(
+                label="Video comparision",
+                value=(video_path_1, video_path_2),
+                interactive=False,
+                show_download_button=False,
+                autoplay=True,
+                video_mode="preview",
+                loop=True,
+                height=400,
+                width=700
+            )
+
+# A check to give a helpful error message if files are not found.
+if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
+    print("---")
+    print(f"WARNING: Could not find one or both video files.")
+    print(f"Please make sure these paths are correct in your app.py file:")
+    print(f"  - '{os.path.abspath(video_path_1)}'")
+    print(f"  - '{os.path.abspath(video_path_2)}'")
+    print("---")
+
+if __name__ == '__main__':
+    demo.launch(debug=True)

space.py

@@ -1,222 +1,225 @@
-
-import gradio as gr
-from app import demo as app
-import os
-
-_docs = {'VideoSlider': {'description': 'A custom Gradio component to display a side-by-side video comparison with a slider.\nIt can be used as both an input (uploading two videos) and an output (displaying two videos).', 'members': {'__init__': {'value': {'type': 'typing.Union[\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path],\n    typing.Callable,\n    NoneType,\n][\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path][\n        str | pathlib.Path, str | pathlib.Path\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': 'A tuple of two video file paths or URLs to display initially.'}, 'height': {'type': 'int | None', 'default': 'None', 'description': 'The height of the component in pixels.'}, 'width': {'type': 'int | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If False, the component will be in display-only mode.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'typing.Union[typing.List[str], str, NoneType][\n    typing.List[str][str], str, None\n]', 'default': 'None', 'description': None}, 'position': {'type': 'int', 'default': '50', 'description': 'The initial position of the slider, from 0 to 100.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': None}, 'show_fullscreen_button': {'type': 'bool', 'default': 'True', 'description': None}, 'autoplay': {'type': 'bool', 'default': 'False', 'description': 'If True, the videos will start playing automatically.'}, 'loop': {'type': 'bool', 'default': 'False', 'description': 'If True, the videos will loop when they finish.'}}, 'postprocess': {'value': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the VideoSlider changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the VideoSlider.'}, 'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the VideoSlider using the clear button for the component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'VideoSlider': []}}}
-
-abs_path = os.path.join(os.path.dirname(__file__), "css.css")
-
-with gr.Blocks(
-    css=abs_path,
-    theme=gr.themes.Default(
-        font_mono=[
-            gr.themes.GoogleFont("Inconsolata"),
-            "monospace",
-        ],
-    ),
-) as demo:
-    gr.Markdown(
-"""
-# `gradio_videoslider`
-
-<div style="display: flex; gap: 7px;">
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
-</div>
-
-VideoSlider Component for Gradio
-""", elem_classes=["md-custom"], header_links=True)
-    app.render()
-    gr.Markdown(
-"""
-## Installation
-
-```bash
-pip install gradio_videoslider
-```
-
-## Usage
-
-```python
-# In demo/app.py
-import gradio as gr
-from gradio_videoslider import VideoSlider
-import os
-
-# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
-#
-# IMPORTANT: Replace the values below with the paths to YOUR video files.
-#
-# Option A: Relative Path (if the video is in the same folder as this app.py)
-# video_path_1 = "video_antes.mp4"
-# video_path_2 = "video_depois.mp4"
-#
-# Option B: Absolute Path (the full path to the file on your computer)
-# Example for Windows:
-# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
-#
-# Example for Linux/macOS:
-# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
-
-# Set your file paths here:
-video_path_1 = "src/examples/Samplevideo 720x480.mp4"
-video_path_2 = "src/examples/SampleVideo 1280x720.mp4"
-
-
-# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
-def process_uploaded_videos(video_inputs):
-    \"\"\"This function handles the uploaded videos.\"\"\"
-    print("Received videos from upload:", video_inputs)
-    return video_inputs
-
-
-# --- 3. GRADIO INTERFACE ---
-with gr.Blocks() as demo:
-    gr.Markdown("# Video Slider Component Usage Examples")
-    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_videoslider'>Component GitHub Code</a></span>")
-
-    with gr.Tabs():
-        # --- TAB 1: UPLOAD EXAMPLE ---
-        with gr.TabItem("1. Compare via Upload"):
-            gr.Markdown("## Upload two videos to compare them side-by-side.")
-            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
-            video_slider_output = VideoSlider(
-                label="Video comparision",
-                interactive=False,
-                autoplay=True,
-                loop=True,
-                height=400,
-                width=700
-            )
-            submit_btn = gr.Button("Submit")
-            submit_btn.click(
-                fn=process_uploaded_videos,
-                inputs=[video_slider_input],
-                outputs=[video_slider_output]
-            )
-
-        # --- TAB 2: LOCAL FILE EXAMPLE ---
-        with gr.TabItem("2. Compare Local Files"):
-            gr.Markdown("## Example with videos pre-loaded from your local disk.")
-            
-            # This is the key part: we pass a tuple of your local file paths to the `value` parameter.
-            VideoSlider(
-                label="Video comparision",
-                value=(video_path_1, video_path_2),
-                interactive=False,
-                autoplay=True,
-                loop=True,
-                height=400,
-                width=700
-            )
-
-# Optional: A check to give a helpful error message if files are not found.
-if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
-    print("---")
-    print(f"WARNING: Could not find one or both video files.")
-    print(f"Please make sure these paths are correct in your app.py file:")
-    print(f"  - '{os.path.abspath(video_path_1)}'")
-    print(f"  - '{os.path.abspath(video_path_2)}'")
-    print("---")
-
-if __name__ == '__main__':
-    demo.launch()
-
-```
-""", elem_classes=["md-custom"], header_links=True)
-
-
-    gr.Markdown("""
-## `VideoSlider`
-
-### Initialization
-""", elem_classes=["md-custom"], header_links=True)
-
-    gr.ParamViewer(value=_docs["VideoSlider"]["members"]["__init__"], linkify=[])
-
-
-    gr.Markdown("### Events")
-    gr.ParamViewer(value=_docs["VideoSlider"]["events"], linkify=['Event'])
-
-
-
-
-    gr.Markdown("""
-
-### User function
-
-The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
-
-- When used as an Input, the component only impacts the input signature of the user function.
-- When used as an output, the component only impacts the return signature of the user function.
-
-The code snippet below is accurate in cases where the component is used as both an input and an output.
-
-
-
- ```python
-def predict(
-    value: typing.Optional[
-    typing.Tuple[
-        str | pathlib.Path | None, str | pathlib.Path | None
-    ]
-][
-    typing.Tuple[
-        str | pathlib.Path | None, str | pathlib.Path | None
-    ][str | pathlib.Path | None, str | pathlib.Path | None],
-    None,
-]
-) -> typing.Optional[
-    typing.Tuple[
-        str | pathlib.Path | None, str | pathlib.Path | None
-    ]
-][
-    typing.Tuple[
-        str | pathlib.Path | None, str | pathlib.Path | None
-    ][str | pathlib.Path | None, str | pathlib.Path | None],
-    None,
-]:
-    return value
-```
-""", elem_classes=["md-custom", "VideoSlider-user-fn"], header_links=True)
-
-
-
-
-    demo.load(None, js=r"""function() {
-    const refs = {};
-    const user_fn_refs = {
-          VideoSlider: [], };
-    requestAnimationFrame(() => {
-
-        Object.entries(user_fn_refs).forEach(([key, refs]) => {
-            if (refs.length > 0) {
-                const el = document.querySelector(`.${key}-user-fn`);
-                if (!el) return;
-                refs.forEach(ref => {
-                    el.innerHTML = el.innerHTML.replace(
-                        new RegExp("\\b"+ref+"\\b", "g"),
-                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
-                    );
-                })
-            }
-        })
-
-        Object.entries(refs).forEach(([key, refs]) => {
-            if (refs.length > 0) {
-                const el = document.querySelector(`.${key}`);
-                if (!el) return;
-                refs.forEach(ref => {
-                    el.innerHTML = el.innerHTML.replace(
-                        new RegExp("\\b"+ref+"\\b", "g"),
-                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
-                    );
-                })
-            }
-        })
-    })
-}
-
-""")
-
-demo.launch()
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'VideoSlider': {'description': 'A custom Gradio component to display a side-by-side video comparison with a slider.\nCan be used as an input (for uploading two videos) or as an output (for displaying two videos).', 'members': {'__init__': {'value': {'type': 'typing.Union[\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path],\n    typing.Callable,\n    NoneType,\n][\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path][\n        str | pathlib.Path, str | pathlib.Path\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': 'A tuple of two video file paths or URLs to display initially. Can also be a callable.'}, 'height': {'type': 'int | None', 'default': 'None', 'description': 'The height of the component container in pixels.'}, 'width': {'type': 'int | None', 'default': 'None', 'description': 'The width of the component container in pixels.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component that appears above it.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' seconds while the client connection is open."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'If False, the label is not displayed.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will not be wrapped in a container.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': "An integer that defines the component's relative size in a layout."}, 'min_width': {'type': 'int', 'default': '160', 'description': 'The minimum width of the component in pixels.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': "If True, the component is in input mode (upload). If False, it's in display-only mode."}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component is not rendered.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of the component in the HTML.'}, 'elem_classes': {'type': 'typing.Union[typing.List[str], str, NoneType][\n    typing.List[str][str], str, None\n]', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of the component in the HTML.'}, 'position': {'type': 'int', 'default': '50', 'description': 'The initial horizontal position of the slider, from 0 (left) to 100 (right).'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'If True, a download button is shown for the second video.'}, 'show_mute_button': {'type': 'bool', 'default': 'True', 'description': 'If True, a mute/unmute button is shown.'}, 'show_fullscreen_button': {'type': 'bool', 'default': 'True', 'description': 'If True, a fullscreen button is shown.'}, 'video_mode': {'type': '"upload" | "preview"', 'default': '"preview"', 'description': 'The mode of the component, either "upload" or "preview".'}, 'autoplay': {'type': 'bool', 'default': 'False', 'description': 'If True, videos will start playing automatically on load (muted).'}, 'loop': {'type': 'bool', 'default': 'False', 'description': 'If True, videos will loop when they finish playing.'}}, 'postprocess': {'value': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the VideoSlider changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the VideoSlider.'}, 'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the VideoSlider using the clear button for the component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'VideoSlider': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_videoslider`
+
+<div style="display: flex; gap: 7px;">
+<a href="https://pypi.org/project/gradio_videoslider/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_videoslider"></a>  
+</div>
+
+VideoSlider Component for Gradio
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_videoslider
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_videoslider import VideoSlider
+import os
+
+# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
+#
+# IMPORTANT: Replace the values below with the paths to YOUR video files.
+#
+# Option A: Relative Path (if the video is in the same folder as this app.py)
+# video_path_1 = "video_before.mp4"
+# video_path_2 = "video_after.mp4"
+#
+# Option B: Absolute Path (the full path to the file on your computer)
+# Example for Windows:
+# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
+#
+# Example for Linux/macOS:
+# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
+
+# Set your file paths here:
+video_path_1 = "examples/SampleVideo 720x480.mp4"
+video_path_2 = "examples/SampleVideo 1280x720.mp4"
+
+
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE ---
+def process_uploaded_videos(video_inputs):
+    \"\"\"This function handles the uploaded videos.\"\"\"
+    print("Received videos from upload:", video_inputs)
+    return video_inputs
+
+
+# --- 3. GRADIO INTERFACE ---
+with gr.Blocks() as demo:
+    gr.Markdown("# Video Slider Component Usage Examples")
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_videoslider'>Component GitHub Code</a></span>")
+
+    with gr.Tabs():
+        # --- TAB 1: UPLOAD EXAMPLE ---
+        with gr.TabItem("1. Compare via Upload"):
+            gr.Markdown("## Upload two videos to compare them side-by-side.")
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700, video_mode="upload")
+            video_slider_output = VideoSlider(
+                label="Video comparision",
+                interactive=False,
+                autoplay=True,                
+                video_mode="preview",
+                show_download_button=False,
+                loop=True,
+                height=400,
+                width=700
+            )
+            submit_btn = gr.Button("Submit")
+            submit_btn.click(
+                fn=process_uploaded_videos,
+                inputs=[video_slider_input],
+                outputs=[video_slider_output]
+            )
+
+        # --- TAB 2: LOCAL FILE EXAMPLE ---
+        with gr.TabItem("2. Compare Local Files"):
+            gr.Markdown("## Example with videos pre-loaded from your local disk.")
+            
+            # This is the key part: we pass a tuple of your local file paths to the `value` parameter.
+            VideoSlider(
+                label="Video comparision",
+                value=(video_path_1, video_path_2),
+                interactive=False,
+                show_download_button=False,
+                autoplay=True,
+                video_mode="preview",
+                loop=True,
+                height=400,
+                width=700
+            )
+
+# A check to give a helpful error message if files are not found.
+if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
+    print("---")
+    print(f"WARNING: Could not find one or both video files.")
+    print(f"Please make sure these paths are correct in your app.py file:")
+    print(f"  - '{os.path.abspath(video_path_1)}'")
+    print(f"  - '{os.path.abspath(video_path_2)}'")
+    print("---")
+
+if __name__ == '__main__':
+    demo.launch(debug=True)
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `VideoSlider`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["VideoSlider"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["VideoSlider"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+def predict(
+    value: typing.Optional[
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ]
+][
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ][str | pathlib.Path | None, str | pathlib.Path | None],
+    None,
+]
+) -> typing.Optional[
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ]
+][
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ][str | pathlib.Path | None, str | pathlib.Path | None],
+    None,
+]:
+    return value
+```
+""", elem_classes=["md-custom", "VideoSlider-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          VideoSlider: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -1,4 +1,5 @@
 .eggs/
+.vscode/
 dist/
 *.pyc
 __pycache__/
@@ -9,4 +10,5 @@ __tmp/*
 .mypycache
 .ruff_cache
 node_modules
-backend/**/templates/
+backend/**/templates/
+README_TEMPLATE.md

src/.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        
+        {
+            "name": "Python Debugger: Current File",
+            "type": "debugpy",
+            "request": "launch",
+            "program": "${file}",
+            "console": "integratedTerminal"
+        }
+    ]
+}

src/README.md

@@ -10,9 +10,18 @@ app_file: space.py
 ---
 
 # `gradio_videoslider`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+<a href="https://pypi.org/project/gradio_videoslider/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_videoslider"></a>  
 
-VideoSlider Component for Gradio
+An interactive component for Gradio to compare two videos side-by-side with a draggable slider.
+
+## Features
+
+- **Side-by-Side Comparison**: Display two videos in the same component, perfect for showing "before and after" results.
+- **Interactive Slider**: A draggable vertical slider allows users to intuitively compare the two videos.
+- **Synchronized Playback**: Clicking on the component plays or pauses both videos simultaneously, keeping them in sync.
+- **Input and Output**: Use it as an input field for users to upload two videos, or as an output to display results from your function.
+- **Standard Video Controls**: Includes autoplay, looping properties, mute/unmute, fullscreen toggle, and a download button.
+- **Flexible Loading**: Load videos from local file paths or remote URLs directly into the component.
 
 ## Installation
 
@@ -23,7 +32,6 @@ pip install gradio_videoslider
 ## Usage
 
 ```python
-# In demo/app.py
 import gradio as gr
 from gradio_videoslider import VideoSlider
 import os
@@ -33,8 +41,8 @@ import os
 # IMPORTANT: Replace the values below with the paths to YOUR video files.
 #
 # Option A: Relative Path (if the video is in the same folder as this app.py)
-# video_path_1 = "video_antes.mp4"
-# video_path_2 = "video_depois.mp4"
+# video_path_1 = "video_before.mp4"
+# video_path_2 = "video_after.mp4"
 #
 # Option B: Absolute Path (the full path to the file on your computer)
 # Example for Windows:
@@ -48,7 +56,7 @@ video_path_1 = "examples/SampleVideo 720x480.mp4"
 video_path_2 = "examples/SampleVideo 1280x720.mp4"
 
 
-# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE ---
 def process_uploaded_videos(video_inputs):
     """This function handles the uploaded videos."""
     print("Received videos from upload:", video_inputs)
@@ -64,11 +72,13 @@ with gr.Blocks() as demo:
         # --- TAB 1: UPLOAD EXAMPLE ---
         with gr.TabItem("1. Compare via Upload"):
             gr.Markdown("## Upload two videos to compare them side-by-side.")
-            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700, video_mode="upload")
             video_slider_output = VideoSlider(
                 label="Video comparision",
                 interactive=False,
-                autoplay=True,
+                autoplay=True,                
+                video_mode="preview",
+                show_download_button=False,
                 loop=True,
                 height=400,
                 width=700
@@ -89,13 +99,15 @@ with gr.Blocks() as demo:
                 label="Video comparision",
                 value=(video_path_1, video_path_2),
                 interactive=False,
+                show_download_button=False,
                 autoplay=True,
+                video_mode="preview",
                 loop=True,
                 height=400,
                 width=700
             )
 
-# Optional: A check to give a helpful error message if files are not found.
+# A check to give a helpful error message if files are not found.
 if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
     print("---")
     print(f"WARNING: Could not find one or both video files.")
@@ -105,7 +117,7 @@ if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
     print("---")
 
 if __name__ == '__main__':
-    demo.launch()
+    demo.launch(debug=True)
 
 ```
 
@@ -143,7 +155,7 @@ typing.Union[
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">A tuple of two video file paths or URLs to display initially.</td>
+<td align="left">A tuple of two video file paths or URLs to display initially. Can also be a callable.</td>
 </tr>
 
 <tr>
@@ -156,7 +168,7 @@ int | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">The height of the component in pixels.</td>
+<td align="left">The height of the component container in pixels.</td>
 </tr>
 
 <tr>
@@ -169,7 +181,7 @@ int | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">The width of the component in pixels.</td>
+<td align="left">The width of the component container in pixels.</td>
 </tr>
 
 <tr>
@@ -182,7 +194,7 @@ str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">The label for this component.</td>
+<td align="left">The label for this component that appears above it.</td>
 </tr>
 
 <tr>
@@ -195,7 +207,7 @@ float | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">None</td>
+<td align="left">If `value` is a callable, run the function 'every' seconds while the client connection is open.</td>
 </tr>
 
 <tr>
@@ -208,7 +220,7 @@ bool | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">None</td>
+<td align="left">If False, the label is not displayed.</td>
 </tr>
 
 <tr>
@@ -221,7 +233,7 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">None</td>
+<td align="left">If False, the component will not be wrapped in a container.</td>
 </tr>
 
 <tr>
@@ -234,7 +246,7 @@ int | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">None</td>
+<td align="left">An integer that defines the component's relative size in a layout.</td>
 </tr>
 
 <tr>
@@ -247,7 +259,7 @@ int
 
 </td>
 <td align="left"><code>160</code></td>
-<td align="left">None</td>
+<td align="left">The minimum width of the component in pixels.</td>
 </tr>
 
 <tr>
@@ -260,7 +272,7 @@ bool | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">If False, the component will be in display-only mode.</td>
+<td align="left">If True, the component is in input mode (upload). If False, it's in display-only mode.</td>
 </tr>
 
 <tr>
@@ -273,7 +285,7 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">None</td>
+<td align="left">If False, the component is not rendered.</td>
 </tr>
 
 <tr>
@@ -286,7 +298,7 @@ str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">None</td>
+<td align="left">An optional string that is assigned as the id of the component in the HTML.</td>
 </tr>
 
 <tr>
@@ -301,7 +313,7 @@ typing.Union[typing.List[str], str, NoneType][
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">None</td>
+<td align="left">An optional list of strings that are assigned as the classes of the component in the HTML.</td>
 </tr>
 
 <tr>
@@ -314,7 +326,7 @@ int
 
 </td>
 <td align="left"><code>50</code></td>
-<td align="left">The initial position of the slider, from 0 to 100.</td>
+<td align="left">The initial horizontal position of the slider, from 0 (left) to 100 (right).</td>
 </tr>
 
 <tr>
@@ -327,7 +339,20 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">None</td>
+<td align="left">If True, a download button is shown for the second video.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_mute_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, a mute/unmute button is shown.</td>
 </tr>
 
 <tr>
@@ -340,7 +365,20 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">None</td>
+<td align="left">If True, a fullscreen button is shown.</td>
+</tr>
+
+<tr>
+<td align="left"><code>video_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"upload" | "preview"
+```
+
+</td>
+<td align="left"><code>"preview"</code></td>
+<td align="left">The mode of the component, either "upload" or "preview".</td>
 </tr>
 
 <tr>
@@ -353,7 +391,7 @@ bool
 
 </td>
 <td align="left"><code>False</code></td>
-<td align="left">If True, the videos will start playing automatically.</td>
+<td align="left">If True, videos will start playing automatically on load (muted).</td>
 </tr>
 
 <tr>
@@ -366,7 +404,7 @@ bool
 
 </td>
 <td align="left"><code>False</code></td>
-<td align="left">If True, the videos will loop when they finish.</td>
+<td align="left">If True, videos will loop when they finish playing.</td>
 </tr>
 </tbody></table>
 

src/backend/gradio_videoslider/templates/component/style.css

@@ -1 +1 @@
-.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-109se4{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-3);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-109se4{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-109se4{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-109se4:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-109se4{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-109se4 button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child),.icon-button-wrapper.svelte-109se4 button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-109se4 button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-109se4>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-1pgj5gs{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-700);background:var (--color-grey-50)}.dark .toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-1pgj5gs{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-title.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-title.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-title.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-title.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-title.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-close.svelte-1pgj5gs{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-close.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-close.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-close.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-close.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-close.success.svelte-1pgj5gs{color:var(--color-green-500)}.toast-text.svelte-1pgj5gs{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-text.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-text.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-text.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-text.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-text.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-details.svelte-1pgj5gs{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-1pgj5gs{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-icon.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-icon.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-icon.success.svelte-1pgj5gs{color:var(--color-green-500)}@keyframes svelte-1pgj5gs-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-1pgj5gs{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-1pgj5gs-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-1pgj5gs{background:var(--color-red-700)}.dark .timer.error.svelte-1pgj5gs{background:var(--color-red-500)}.timer.warning.svelte-1pgj5gs{background:var(--color-yellow-700)}.dark .timer.warning.svelte-1pgj5gs{background:var(--color-yellow-500)}.timer.info.svelte-1pgj5gs{background:var(--color-grey-700)}.dark .timer.info.svelte-1pgj5gs{background:var(--color-grey-500)}.timer.success.svelte-1pgj5gs{background:var(--color-green-700)}.dark .timer.success.svelte-1pgj5gs{background:var(--color-green-500)}.hidden.svelte-1pgj5gs{display:none}.toast-text.svelte-1pgj5gs a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.wrap.svelte-12ucyq4.svelte-12ucyq4{position:relative;width:100%;height:100%;z-index:var(--layer-1);overflow:hidden}.icon-wrap.svelte-12ucyq4.svelte-12ucyq4{display:block;position:absolute;top:50%;transform:translate(-20.5px,-50%);left:10px;width:40px;transition:.2s;color:var(--body-text-color);height:30px;border-radius:5px;background-color:var(--color-accent);display:flex;align-items:center;justify-content:center;z-index:var(--layer-3);box-shadow:0 0 5px 2px #0000004d;font-size:12px}.icon.left.svelte-12ucyq4.svelte-12ucyq4{transform:rotate(135deg);text-shadow:-1px -1px 1px rgba(0,0,0,.1)}.icon.right.svelte-12ucyq4.svelte-12ucyq4{transform:rotate(-45deg);text-shadow:-1px -1px 1px rgba(0,0,0,.1)}.icon.center.svelte-12ucyq4.svelte-12ucyq4{display:block;width:1px;height:100%;background-color:var(--color);opacity:.1}.icon-wrap.active.svelte-12ucyq4.svelte-12ucyq4,.icon-wrap.disabled.svelte-12ucyq4.svelte-12ucyq4{opacity:0}.outer.svelte-12ucyq4.svelte-12ucyq4{width:20px;height:100%;position:absolute;cursor:grab;top:0;left:-10px;pointer-events:auto;z-index:var(--layer-2)}.grab.svelte-12ucyq4.svelte-12ucyq4{cursor:grabbing}.inner.svelte-12ucyq4.svelte-12ucyq4{width:1px;height:100%;background:var(--color);position:absolute;left:calc((100% - 2px)/2)}.disabled.svelte-12ucyq4.svelte-12ucyq4{cursor:auto}.disabled.svelte-12ucyq4 .inner.svelte-12ucyq4{box-shadow:none}.content.svelte-12ucyq4.svelte-12ucyq4{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}.overlay.svelte-1pwzuub{position:absolute;background-color:#0006;width:100%;height:100%}.hidden.svelte-1pwzuub{display:none}.load-wrap.svelte-1pwzuub{display:flex;justify-content:center;align-items:center;height:100%}.loader.svelte-1pwzuub{display:flex;position:relative;background-color:var(--border-color-accent-subdued);animation:svelte-1pwzuub-shadowPulse 2s linear infinite;box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 var(--border-color-accent-subdued);margin:var(--spacing-md);border-radius:50%;width:10px;height:10px;scale:.5}@keyframes svelte-1pwzuub-shadowPulse{33%{box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 #fff;background:#fff}66%{box-shadow:-24px 0 #fff,24px 0 #fff;background:var(--border-color-accent-subdued)}to{box-shadow:-24px 0 #fff,24px 0 var(--border-color-accent-subdued);background:#fff}}.load-wrap.svelte-kn3uji{display:flex;justify-content:center;align-items:center;height:100%}.loader.svelte-kn3uji{display:flex;position:relative;background-color:var(--border-color-accent-subdued);animation:svelte-kn3uji-shadowPulse 2s linear infinite;box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 var(--border-color-accent-subdued);margin:var(--spacing-md);border-radius:50%;width:10px;height:10px;scale:.5}@keyframes svelte-kn3uji-shadowPulse{33%{box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 #fff;background:#fff}66%{box-shadow:-24px 0 #fff,24px 0 #fff;background:var(--border-color-accent-subdued)}to{box-shadow:-24px 0 #fff,24px 0 var(--border-color-accent-subdued);background:#fff}}.container.svelte-kn3uji{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg)}#timeline.svelte-kn3uji{display:flex;height:var(--size-10);flex:1;position:relative}img.svelte-kn3uji{flex:1 1 auto;min-width:0;object-fit:cover;height:var(--size-12);border:1px solid var(--block-border-color);-webkit-user-select:none;user-select:none;z-index:1}.handle.svelte-kn3uji{width:3px;background-color:var(--color-accent);cursor:ew-resize;height:var(--size-12);z-index:3;position:absolute}.opaque-layer.svelte-kn3uji{background-color:#e6672840;border:1px solid var(--color-accent);height:var(--size-12);position:absolute;z-index:2}.wrap.svelte-cr2edf.svelte-cr2edf{overflow-y:auto;transition:opacity .5s ease-in-out;background:var(--block-background-fill);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--size-40);width:var(--size-full)}.wrap.svelte-cr2edf.svelte-cr2edf:after{content:"";position:absolute;top:0;left:0;width:var(--upload-progress-width);height:100%;transition:all .5s ease-in-out;z-index:1}.uploading.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-lg);font-family:var(--font);z-index:2}.file-name.svelte-cr2edf.svelte-cr2edf{margin:var(--spacing-md);font-size:var(--text-lg);color:var(--body-text-color-subdued)}.file.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-md);z-index:2;display:flex;align-items:center}.file.svelte-cr2edf progress.svelte-cr2edf{display:inline;height:var(--size-1);width:100%;transition:all .5s ease-in-out;color:var(--color-accent);border:none}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-value{background-color:var(--color-accent);border-radius:20px}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-bar{background-color:var(--border-color-accent);border-radius:20px}.progress-bar.svelte-cr2edf.svelte-cr2edf{width:14px;height:14px;border-radius:50%;background:radial-gradient(closest-side,var(--block-background-fill) 64%,transparent 53% 100%),conic-gradient(var(--color-accent) var(--upload-progress-width),var(--border-color-accent) 0);transition:all .5s ease-in-out}button.svelte-1o7nwih{cursor:pointer;width:var(--size-full)}.center.svelte-1o7nwih{display:flex;justify-content:center}.flex.svelte-1o7nwih{display:flex;flex-direction:column;justify-content:center;align-items:center}.hidden.svelte-1o7nwih{display:none;position:absolute;flex-grow:0}.hidden.svelte-1o7nwih svg{display:none}.disable_click.svelte-1o7nwih{cursor:default}.icon-mode.svelte-1o7nwih{position:absolute!important;width:var(--size-4);height:var(--size-4);padding:0;min-height:0;border-radius:var(--radius-circle)}.icon-mode.svelte-1o7nwih svg{width:var(--size-4);height:var(--size-4)}.container.svelte-uu53fr.svelte-uu53fr{width:100%}time.svelte-uu53fr.svelte-uu53fr{color:var(--color-accent);font-weight:700;padding-left:var(--spacing-xs)}.timeline-wrapper.svelte-uu53fr.svelte-uu53fr{display:flex;align-items:center;justify-content:center;width:100%}.text-button.svelte-uu53fr.svelte-uu53fr{border:1px solid var(--neutral-400);border-radius:var(--radius-sm);font-weight:300;font-size:var(--size-3);text-align:center;color:var(--neutral-400);height:var(--size-5);font-weight:700;padding:0 5px;margin-left:5px}.text-button.svelte-uu53fr.svelte-uu53fr:hover,.text-button.svelte-uu53fr.svelte-uu53fr:focus{color:var(--color-accent);border-color:var(--color-accent)}.controls.svelte-uu53fr.svelte-uu53fr{display:flex;justify-content:space-between;align-items:center;margin:var(--spacing-lg);overflow:hidden}.edit-buttons.svelte-uu53fr.svelte-uu53fr{display:flex;gap:var(--spacing-sm)}@media (max-width: 320px){.controls.svelte-uu53fr.svelte-uu53fr{flex-direction:column;align-items:flex-start}.edit-buttons.svelte-uu53fr.svelte-uu53fr{margin-top:var(--spacing-sm)}.controls.svelte-uu53fr .svelte-uu53fr{margin:var(--spacing-sm)}.controls.svelte-uu53fr .text-button.svelte-uu53fr{margin-left:0}}.container.svelte-uu53fr.svelte-uu53fr{display:flex;flex-direction:column}.hidden.svelte-uu53fr.svelte-uu53fr{display:none}span.svelte-yzke89.svelte-yzke89{text-shadow:0 0 8px rgba(0,0,0,.5)}progress.svelte-yzke89.svelte-yzke89{margin-right:var(--size-3);border-radius:var(--radius-sm);width:var(--size-full);height:var(--size-2)}progress.svelte-yzke89.svelte-yzke89::-webkit-progress-bar{border-radius:2px;background-color:#fff3;overflow:hidden}progress.svelte-yzke89.svelte-yzke89::-webkit-progress-value{background-color:#ffffffe6}.mirror.svelte-yzke89.svelte-yzke89{transform:scaleX(-1)}.mirror-wrap.svelte-yzke89.svelte-yzke89{position:relative;height:100%;width:100%}.controls.svelte-yzke89.svelte-yzke89{position:absolute;bottom:0;opacity:0;transition:.5s;margin:var(--size-2);border-radius:var(--radius-md);background:var(--color-grey-800);padding:var(--size-2) var(--size-1);width:calc(100% - var(--size-2) * 2)}.wrap.svelte-yzke89:hover .controls.svelte-yzke89{opacity:1}.inner.svelte-yzke89.svelte-yzke89{display:flex;justify-content:space-between;align-items:center;padding-right:var(--size-2);padding-left:var(--size-2);width:var(--size-full);height:var(--size-full)}.icon.svelte-yzke89.svelte-yzke89{display:flex;justify-content:center;cursor:pointer;width:var(--size-6);color:#fff}.time.svelte-yzke89.svelte-yzke89{flex-shrink:0;margin-right:var(--size-3);margin-left:var(--size-3);color:#fff;font-size:var(--text-sm);font-family:var(--font-mono)}.wrap.svelte-yzke89.svelte-yzke89{position:relative;background-color:var(--background-fill-secondary);height:var(--size-full);width:var(--size-full);border-radius:var(--radius-xl)}.wrap.svelte-yzke89 video{height:var(--size-full);width:var(--size-full)}.video-container.svelte-4wejaf{height:100%;width:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.main-wrapper.svelte-4wejaf{position:relative;width:100%;height:100%;cursor:pointer}.player-wrapper.svelte-4wejaf{position:absolute;top:0;left:0;width:100%;height:100%}.player-wrapper.fixed.svelte-4wejaf{background:var(--block-background-fill)}.main-wrapper>.wrap{position:absolute;top:0;left:0;z-index:10;cursor:default}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-x2tujq.svelte-x2tujq{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-x2tujq button.svelte-x2tujq{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-x2tujq img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-x2tujq.svelte-x2tujq{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-x2tujq.svelte-x2tujq{width:auto;height:100%;display:flex;align-items:center;justify-content:center}button.svelte-fjcd9c{cursor:pointer;width:var(--size-full)}.wrap.svelte-fjcd9c{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);height:100%;padding-top:var(--size-3)}.icon-wrap.svelte-fjcd9c{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-fjcd9c{font-size:var(--text-lg)}}.wrap.svelte-1tdan5a.svelte-1tdan5a{position:relative;width:var(--size-full);height:var(--size-full)}.hide.svelte-1tdan5a.svelte-1tdan5a{display:none}video.svelte-1tdan5a.svelte-1tdan5a{width:var(--size-full);height:var(--size-full);object-fit:contain}.button-wrap.svelte-1tdan5a.svelte-1tdan5a{position:absolute;background-color:var(--block-background-fill);border:1px solid var(--border-color-primary);padding:var(--size-1-5);display:flex;bottom:var(--size-2);left:50%;transform:translate(-50%);box-shadow:var(--shadow-drop-lg);border-radius:var(--radius-xl);line-height:var(--size-3);color:var(--button-secondary-text-color)}.icon-with-text.svelte-1tdan5a.svelte-1tdan5a{width:var(--size-20);align-items:center;margin:0 var(--spacing-xl);display:flex;justify-content:space-evenly}@media (--screen-md){button.svelte-1tdan5a.svelte-1tdan5a{bottom:var(--size-4)}}@media (--screen-xl){button.svelte-1tdan5a.svelte-1tdan5a{bottom:var(--size-8)}}.icon.svelte-1tdan5a.svelte-1tdan5a{width:18px;height:18px;display:flex;justify-content:space-between;align-items:center}.color-primary.svelte-1tdan5a.svelte-1tdan5a{fill:var(--primary-600);stroke:var(--primary-600);color:var(--primary-600)}.flip.svelte-1tdan5a.svelte-1tdan5a{transform:scaleX(-1)}.select-wrap.svelte-1tdan5a.svelte-1tdan5a{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--button-secondary-text-color);background-color:transparent;width:95%;font-size:var(--text-md);position:absolute;bottom:var(--size-2);background-color:var(--block-background-fill);box-shadow:var(--shadow-drop-lg);border-radius:var(--radius-xl);z-index:var(--layer-top);border:1px solid var(--border-color-primary);text-align:left;line-height:var(--size-4);white-space:nowrap;text-overflow:ellipsis;left:50%;transform:translate(-50%);max-width:var(--size-52)}.select-wrap.svelte-1tdan5a>option.svelte-1tdan5a{padding:.25rem .5rem;border-bottom:1px solid var(--border-color-accent);padding-right:var(--size-8);text-overflow:ellipsis;overflow:hidden}.select-wrap.svelte-1tdan5a>option.svelte-1tdan5a:hover{background-color:var(--color-accent)}.select-wrap.svelte-1tdan5a>option.svelte-1tdan5a:last-child{border:none}.inset-icon.svelte-1tdan5a.svelte-1tdan5a{position:absolute;top:5px;right:-6.5px;width:var(--size-10);height:var(--size-5);opacity:.8}@media (--screen-md){.wrap.svelte-1tdan5a.svelte-1tdan5a{font-size:var(--text-lg)}}.image-frame.svelte-1562gr6 img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.upload-container.svelte-1562gr6{display:flex;align-items:center;justify-content:center;height:100%;flex-shrink:1;max-height:100%}.reduced-height.svelte-1562gr6{height:calc(100% - var(--size-10))}.image-container.svelte-1562gr6{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center;max-height:100%}.selectable.svelte-1562gr6{cursor:crosshair}.image-frame.svelte-1562gr6{object-fit:cover;width:100%;height:100%}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}.file-name.svelte-1kyjvp4{padding:var(--size-6);font-size:var(--text-xxl);word-break:break-all}.file-size.svelte-1kyjvp4{padding:var(--size-2);font-size:var(--text-xl)}.upload-container.svelte-1kyjvp4{height:100%;width:100%}.video-container.svelte-1kyjvp4{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center}.container.svelte-9k2sta{display:flex;flex-direction:row;gap:var(--spacing-lg);width:100%;height:100%}.video-slot.svelte-9k2sta{flex:1;display:flex;justify-content:center;align-items:center;min-height:var(--size-60);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden;position:relative}.video-slot .upload-text{color:var(--body-text-color-subdued);text-align:center}
+.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-109se4{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-3);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-109se4{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-109se4{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-109se4:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-109se4{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-109se4 button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child),.icon-button-wrapper.svelte-109se4 button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-109se4 button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-109se4>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-1pgj5gs{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-700);background:var (--color-grey-50)}.dark .toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-1pgj5gs{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-title.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-title.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-title.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-title.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-title.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-close.svelte-1pgj5gs{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-close.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-close.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-close.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-close.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-close.success.svelte-1pgj5gs{color:var(--color-green-500)}.toast-text.svelte-1pgj5gs{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-text.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-text.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-text.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-text.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-text.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-details.svelte-1pgj5gs{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-1pgj5gs{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-icon.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-icon.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-icon.success.svelte-1pgj5gs{color:var(--color-green-500)}@keyframes svelte-1pgj5gs-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-1pgj5gs{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-1pgj5gs-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-1pgj5gs{background:var(--color-red-700)}.dark .timer.error.svelte-1pgj5gs{background:var(--color-red-500)}.timer.warning.svelte-1pgj5gs{background:var(--color-yellow-700)}.dark .timer.warning.svelte-1pgj5gs{background:var(--color-yellow-500)}.timer.info.svelte-1pgj5gs{background:var(--color-grey-700)}.dark .timer.info.svelte-1pgj5gs{background:var(--color-grey-500)}.timer.success.svelte-1pgj5gs{background:var(--color-green-700)}.dark .timer.success.svelte-1pgj5gs{background:var(--color-green-500)}.hidden.svelte-1pgj5gs{display:none}.toast-text.svelte-1pgj5gs a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.wrap.svelte-14nlqs6.svelte-14nlqs6{position:relative;width:100%;height:100%;z-index:var(--layer-1);overflow:hidden}.icon-wrap.svelte-14nlqs6.svelte-14nlqs6{display:flex;position:absolute;top:50%;transform:translate(-50%,-50%);left:50%;width:40px;transition:.2s;color:var(--body-text-color);height:30px;border-radius:5px;background-color:var(--color-accent);align-items:center;justify-content:center;z-index:var(--layer-3);box-shadow:0 0 5px 2px #0000004d;font-size:12px;pointer-events:auto}.icon.left.svelte-14nlqs6.svelte-14nlqs6{transform:rotate(135deg);text-shadow:-1px -1px 1px rgba(0,0,0,.1)}.icon.right.svelte-14nlqs6.svelte-14nlqs6{transform:rotate(-45deg);text-shadow:-1px -1px 1px rgba(0,0,0,.1)}.icon.center.svelte-14nlqs6.svelte-14nlqs6{display:block;width:1px;height:100%;background-color:var(--color);opacity:.5}.outer.svelte-14nlqs6.svelte-14nlqs6{width:40px;height:100%;position:absolute;cursor:grab;top:0;left:-20px;pointer-events:auto;z-index:1000}.grab.svelte-14nlqs6.svelte-14nlqs6{cursor:grabbing}.inner.svelte-14nlqs6.svelte-14nlqs6{width:1px;height:100%;background:var(--color);position:absolute;left:calc((100% - 1px)/2)}.disabled.svelte-14nlqs6.svelte-14nlqs6{cursor:not-allowed;opacity:.5}.disabled.svelte-14nlqs6 .inner.svelte-14nlqs6{box-shadow:none}.content.svelte-14nlqs6.svelte-14nlqs6{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}.overlay.svelte-1p2o6nz{position:absolute;background-color:#0006;width:100%;height:100%}.hidden.svelte-1p2o6nz{display:none}.load-wrap.svelte-1p2o6nz{display:flex;justify-content:center;align-items:center;height:100%}.loader.svelte-1p2o6nz{display:flex;position:relative;background-color:var(--border-color-accent-subdued);animation:svelte-1p2o6nz-shadowPulse 2s linear infinite;box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 var(--border-color-accent-subdued);margin:var(--spacing-md);border-radius:50%;width:10px;height:10px;scale:.5}@keyframes svelte-1p2o6nz-shadowPulse{33%{box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 #fff;background:#fff}66%{box-shadow:-24px 0 #fff,24px 0 #fff;background:var(--border-color-accent-subdued)}to{box-shadow:-24px 0 #fff,24px 0 var(--border-color-accent-subdued);background:#fff}}.load-wrap.svelte-kn3uji{display:flex;justify-content:center;align-items:center;height:100%}.loader.svelte-kn3uji{display:flex;position:relative;background-color:var(--border-color-accent-subdued);animation:svelte-kn3uji-shadowPulse 2s linear infinite;box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 var(--border-color-accent-subdued);margin:var(--spacing-md);border-radius:50%;width:10px;height:10px;scale:.5}@keyframes svelte-kn3uji-shadowPulse{33%{box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 #fff;background:#fff}66%{box-shadow:-24px 0 #fff,24px 0 #fff;background:var(--border-color-accent-subdued)}to{box-shadow:-24px 0 #fff,24px 0 var(--border-color-accent-subdued);background:#fff}}.container.svelte-kn3uji{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg)}#timeline.svelte-kn3uji{display:flex;height:var(--size-10);flex:1;position:relative}img.svelte-kn3uji{flex:1 1 auto;min-width:0;object-fit:cover;height:var(--size-12);border:1px solid var(--block-border-color);-webkit-user-select:none;user-select:none;z-index:1}.handle.svelte-kn3uji{width:3px;background-color:var(--color-accent);cursor:ew-resize;height:var(--size-12);z-index:3;position:absolute}.opaque-layer.svelte-kn3uji{background-color:#e6672840;border:1px solid var(--color-accent);height:var(--size-12);position:absolute;z-index:2}.wrap.svelte-cr2edf.svelte-cr2edf{overflow-y:auto;transition:opacity .5s ease-in-out;background:var(--block-background-fill);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--size-40);width:var(--size-full)}.wrap.svelte-cr2edf.svelte-cr2edf:after{content:"";position:absolute;top:0;left:0;width:var(--upload-progress-width);height:100%;transition:all .5s ease-in-out;z-index:1}.uploading.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-lg);font-family:var(--font);z-index:2}.file-name.svelte-cr2edf.svelte-cr2edf{margin:var(--spacing-md);font-size:var(--text-lg);color:var(--body-text-color-subdued)}.file.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-md);z-index:2;display:flex;align-items:center}.file.svelte-cr2edf progress.svelte-cr2edf{display:inline;height:var(--size-1);width:100%;transition:all .5s ease-in-out;color:var(--color-accent);border:none}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-value{background-color:var(--color-accent);border-radius:20px}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-bar{background-color:var(--border-color-accent);border-radius:20px}.progress-bar.svelte-cr2edf.svelte-cr2edf{width:14px;height:14px;border-radius:50%;background:radial-gradient(closest-side,var(--block-background-fill) 64%,transparent 53% 100%),conic-gradient(var(--color-accent) var(--upload-progress-width),var(--border-color-accent) 0);transition:all .5s ease-in-out}button.svelte-1o7nwih{cursor:pointer;width:var(--size-full)}.center.svelte-1o7nwih{display:flex;justify-content:center}.flex.svelte-1o7nwih{display:flex;flex-direction:column;justify-content:center;align-items:center}.hidden.svelte-1o7nwih{display:none;position:absolute;flex-grow:0}.hidden.svelte-1o7nwih svg{display:none}.disable_click.svelte-1o7nwih{cursor:default}.icon-mode.svelte-1o7nwih{position:absolute!important;width:var(--size-4);height:var(--size-4);padding:0;min-height:0;border-radius:var(--radius-circle)}.icon-mode.svelte-1o7nwih svg{width:var(--size-4);height:var(--size-4)}.container.svelte-uu53fr.svelte-uu53fr{width:100%}time.svelte-uu53fr.svelte-uu53fr{color:var(--color-accent);font-weight:700;padding-left:var(--spacing-xs)}.timeline-wrapper.svelte-uu53fr.svelte-uu53fr{display:flex;align-items:center;justify-content:center;width:100%}.text-button.svelte-uu53fr.svelte-uu53fr{border:1px solid var(--neutral-400);border-radius:var(--radius-sm);font-weight:300;font-size:var(--size-3);text-align:center;color:var(--neutral-400);height:var(--size-5);font-weight:700;padding:0 5px;margin-left:5px}.text-button.svelte-uu53fr.svelte-uu53fr:hover,.text-button.svelte-uu53fr.svelte-uu53fr:focus{color:var(--color-accent);border-color:var(--color-accent)}.controls.svelte-uu53fr.svelte-uu53fr{display:flex;justify-content:space-between;align-items:center;margin:var(--spacing-lg);overflow:hidden}.edit-buttons.svelte-uu53fr.svelte-uu53fr{display:flex;gap:var(--spacing-sm)}@media (max-width: 320px){.controls.svelte-uu53fr.svelte-uu53fr{flex-direction:column;align-items:flex-start}.edit-buttons.svelte-uu53fr.svelte-uu53fr{margin-top:var(--spacing-sm)}.controls.svelte-uu53fr .svelte-uu53fr{margin:var(--spacing-sm)}.controls.svelte-uu53fr .text-button.svelte-uu53fr{margin-left:0}}.container.svelte-uu53fr.svelte-uu53fr{display:flex;flex-direction:column}.hidden.svelte-uu53fr.svelte-uu53fr{display:none}span.svelte-bmp2ea.svelte-bmp2ea{text-shadow:0 0 8px rgba(0,0,0,.5)}input[type=range].svelte-bmp2ea.svelte-bmp2ea{margin-right:var(--size-3);width:var(--size-full);height:var(--size-2)}.mirror.svelte-bmp2ea.svelte-bmp2ea{transform:scaleX(-1)}.mirror-wrap.svelte-bmp2ea.svelte-bmp2ea{position:relative;height:100%;width:100%}.controls.svelte-bmp2ea.svelte-bmp2ea{position:absolute;bottom:0;opacity:0;transition:.5s;margin:var(--size-2);border-radius:var(--radius-md);background:var(--color-grey-800);padding:var(--size-2) var(--size-1);width:calc(100% - var(--size-2) * 2)}.wrap.svelte-bmp2ea:hover .controls.svelte-bmp2ea{opacity:1}.inner.svelte-bmp2ea.svelte-bmp2ea{display:flex;justify-content:space-between;align-items:center;padding-right:var(--size-2);padding-left:var(--size-2);width:var(--size-full);height:var(--size-full)}.icon.svelte-bmp2ea.svelte-bmp2ea{display:flex;justify-content:center;cursor:pointer;width:var(--size-6);color:#fff}.time.svelte-bmp2ea.svelte-bmp2ea{flex-shrink:0;margin-right:var(--size-3);margin-left:var(--size-3);color:#fff;font-size:var(--text-sm);font-family:var(--font-mono)}.wrap.svelte-bmp2ea.svelte-bmp2ea{position:relative;background-color:var(--background-fill-secondary);height:var(--size-full);width:var(--size-full);border-radius:var(--radius-xl)}.wrap.svelte-bmp2ea video{height:var(--size-full);width:var(--size-full);object-fit:contain}.loading-spinner.svelte-bmp2ea.svelte-bmp2ea{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;background:#000000b3;padding:1rem;border-radius:.5rem}.video-container.svelte-40zsic{height:100%;width:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1}.main-wrapper.svelte-40zsic{-webkit-user-select:none;user-select:none;height:100%;width:100%;position:relative;display:flex;align-items:center;justify-content:center;z-index:2}.player-wrapper.svelte-40zsic{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}.player-wrapper.fixed.svelte-40zsic{background:var(--block-background-fill);z-index:4}.player-wrapper.svelte-40zsic video{width:100%;height:100%;object-fit:contain;z-index:5;pointer-events:none}.main-wrapper>.wrap{position:absolute;top:0;left:0;z-index:10;cursor:default}.icon-button-wrapper.svelte-40zsic{z-index:1001;pointer-events:auto;position:absolute;top:10px;right:10px}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-x2tujq.svelte-x2tujq{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-x2tujq button.svelte-x2tujq{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-x2tujq img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-x2tujq.svelte-x2tujq{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-x2tujq.svelte-x2tujq{width:auto;height:100%;display:flex;align-items:center;justify-content:center}button.svelte-fjcd9c{cursor:pointer;width:var(--size-full)}.wrap.svelte-fjcd9c{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);height:100%;padding-top:var(--size-3)}.icon-wrap.svelte-fjcd9c{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-fjcd9c{font-size:var(--text-lg)}}.wrap.svelte-1tdan5a.svelte-1tdan5a{position:relative;width:var(--size-full);height:var(--size-full)}.hide.svelte-1tdan5a.svelte-1tdan5a{display:none}video.svelte-1tdan5a.svelte-1tdan5a{width:var(--size-full);height:var(--size-full);object-fit:contain}.button-wrap.svelte-1tdan5a.svelte-1tdan5a{position:absolute;background-color:var(--block-background-fill);border:1px solid var(--border-color-primary);padding:var(--size-1-5);display:flex;bottom:var(--size-2);left:50%;transform:translate(-50%);box-shadow:var(--shadow-drop-lg);border-radius:var(--radius-xl);line-height:var(--size-3);color:var(--button-secondary-text-color)}.icon-with-text.svelte-1tdan5a.svelte-1tdan5a{width:var(--size-20);align-items:center;margin:0 var(--spacing-xl);display:flex;justify-content:space-evenly}@media (--screen-md){button.svelte-1tdan5a.svelte-1tdan5a{bottom:var(--size-4)}}@media (--screen-xl){button.svelte-1tdan5a.svelte-1tdan5a{bottom:var(--size-8)}}.icon.svelte-1tdan5a.svelte-1tdan5a{width:18px;height:18px;display:flex;justify-content:space-between;align-items:center}.color-primary.svelte-1tdan5a.svelte-1tdan5a{fill:var(--primary-600);stroke:var(--primary-600);color:var(--primary-600)}.flip.svelte-1tdan5a.svelte-1tdan5a{transform:scaleX(-1)}.select-wrap.svelte-1tdan5a.svelte-1tdan5a{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--button-secondary-text-color);background-color:transparent;width:95%;font-size:var(--text-md);position:absolute;bottom:var(--size-2);background-color:var(--block-background-fill);box-shadow:var(--shadow-drop-lg);border-radius:var(--radius-xl);z-index:var(--layer-top);border:1px solid var(--border-color-primary);text-align:left;line-height:var(--size-4);white-space:nowrap;text-overflow:ellipsis;left:50%;transform:translate(-50%);max-width:var(--size-52)}.select-wrap.svelte-1tdan5a>option.svelte-1tdan5a{padding:.25rem .5rem;border-bottom:1px solid var(--border-color-accent);padding-right:var(--size-8);text-overflow:ellipsis;overflow:hidden}.select-wrap.svelte-1tdan5a>option.svelte-1tdan5a:hover{background-color:var(--color-accent)}.select-wrap.svelte-1tdan5a>option.svelte-1tdan5a:last-child{border:none}.inset-icon.svelte-1tdan5a.svelte-1tdan5a{position:absolute;top:5px;right:-6.5px;width:var(--size-10);height:var(--size-5);opacity:.8}@media (--screen-md){.wrap.svelte-1tdan5a.svelte-1tdan5a{font-size:var(--text-lg)}}.image-frame.svelte-1562gr6 img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.upload-container.svelte-1562gr6{display:flex;align-items:center;justify-content:center;height:100%;flex-shrink:1;max-height:100%}.reduced-height.svelte-1562gr6{height:calc(100% - var(--size-10))}.image-container.svelte-1562gr6{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center;max-height:100%}.selectable.svelte-1562gr6{cursor:crosshair}.image-frame.svelte-1562gr6{object-fit:cover;width:100%;height:100%}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}.file-name.svelte-1kyjvp4{padding:var(--size-6);font-size:var(--text-xxl);word-break:break-all}.file-size.svelte-1kyjvp4{padding:var(--size-2);font-size:var(--text-xl)}.upload-container.svelte-1kyjvp4{height:100%;width:100%}.video-container.svelte-1kyjvp4{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center}.container.svelte-9k2sta{display:flex;flex-direction:row;gap:var(--spacing-lg);width:100%;height:100%}.video-slot.svelte-9k2sta{flex:1;display:flex;justify-content:center;align-items:center;min-height:var(--size-60);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden;position:relative}.video-slot .upload-text{color:var(--body-text-color-subdued);text-align:center}

src/backend/gradio_videoslider/videoslider.py

@@ -2,7 +2,7 @@
 from __future__ import annotations
 
 from pathlib import Path
-from typing import Any, Callable, List, Tuple
+from typing import Any, Callable, List, Literal, Tuple
 
 from gradio_client import handle_file
 from gradio_client.documentation import document
@@ -14,24 +14,24 @@ from gradio.events import Events
 
 class VideoSliderData(GradioRootModel):
     """
-    Data model for the VideoSlider component. Represents the data structure
-    sent between the frontend and backend, which is a tuple of two FileData objects.
+    Pydantic model for the data structure sent between the frontend and backend.
+    It represents a tuple of two (optional) FileData objects.
     """
     root: Tuple[FileData | None, FileData | None]
 
-# Type alias for the value passed to or returned from a user's function.
-# It's a tuple of two file paths (string or Path object).
+# Type alias for the value that the user's Python function will receive or return.
+# It is a tuple of two (optional) file paths.
 VideoSliderValue = Tuple[str | Path | None, str | Path | None]
 
 @document()
 class VideoSlider(Component):
     """
     A custom Gradio component to display a side-by-side video comparison with a slider.
-    It can be used as both an input (uploading two videos) and an output (displaying two videos).
+    Can be used as an input (for uploading two videos) or as an output (for displaying two videos).
     """
     # The data model used for communication with the frontend.
     data_model = VideoSliderData
-    # The events that this component can trigger.
+    # A list of events that this component supports.
     EVENTS = [Events.change, Events.upload, Events.clear]
 
     def __init__(
@@ -52,7 +52,9 @@ class VideoSlider(Component):
         elem_classes: List[str] | str | None = None,
         position: int = 50,
         show_download_button: bool = True,
+        show_mute_button: bool = True,
         show_fullscreen_button: bool = True,
+        video_mode: Literal["upload", "preview"] = "preview",
         autoplay: bool = False,
         loop: bool = False,
     ):
@@ -60,23 +62,38 @@ class VideoSlider(Component):
         Initializes the VideoSlider component.
 
         Parameters:
-            value: A tuple of two video file paths or URLs to display initially.
-            height: The height of the component in pixels.
-            width: The width of the component in pixels.
-            label: The label for this component.
-            position: The initial position of the slider, from 0 to 100.
-            autoplay: If True, the videos will start playing automatically.
-            loop: If True, the videos will loop when they finish.
-            interactive: If False, the component will be in display-only mode.
+            value: A tuple of two video file paths or URLs to display initially. Can also be a callable.
+            height: The height of the component container in pixels.
+            width: The width of the component container in pixels.
+            label: The label for this component that appears above it.
+            every: If `value` is a callable, run the function 'every' seconds while the client connection is open.
+            show_label: If False, the label is not displayed.
+            container: If False, the component will not be wrapped in a container.
+            scale: An integer that defines the component's relative size in a layout.
+            min_width: The minimum width of the component in pixels.
+            interactive: If True, the component is in input mode (upload). If False, it's in display-only mode.
+            visible: If False, the component is not rendered.
+            elem_id: An optional string that is assigned as the id of the component in the HTML.
+            elem_classes: An optional list of strings that are assigned as the classes of the component in the HTML.
+            position: The initial horizontal position of the slider, from 0 (left) to 100 (right).
+            show_download_button: If True, a download button is shown for the second video.
+            show_mute_button: If True, a mute/unmute button is shown.
+            show_fullscreen_button: If True, a fullscreen button is shown.
+            video_mode: The mode of the component, either "upload" or "preview".
+            autoplay: If True, videos will start playing automatically on load (muted).
+            loop: If True, videos will loop when they finish playing.
         """
         self.height = height
         self.width = width
         self.position = position
         self.show_download_button = show_download_button
         self.show_fullscreen_button = show_fullscreen_button
+        self.show_mute_button = show_mute_button
+        self.video_mode = video_mode
         self.autoplay = autoplay
         self.loop = loop
-        self.type = "filepath" # The component handles file paths.
+        # The component's value is processed as file paths.
+        self.type = "filepath"
         
         super().__init__(
             label=label,
@@ -94,8 +111,7 @@ class VideoSlider(Component):
 
     def preprocess(self, payload: VideoSliderData | None) -> VideoSliderValue | None:
         """
-        Processes data from the frontend into a format usable by a Python function.
-        It converts the FileData objects into a tuple of simple string file paths.
+        Converts data from the frontend (as FileData) to a format usable by a Python function (a tuple of file paths).
         """
         if payload is None or payload.root is None:
             return None
@@ -109,9 +125,8 @@ class VideoSlider(Component):
 
     def postprocess(self, value: VideoSliderValue | None) -> VideoSliderData | None:
         """
-        Processes data returned from a Python function into a format for the frontend.
-        It takes a tuple of file paths, makes them servable by Gradio, and returns
-        a VideoSliderData object.
+        Converts data from a Python function (a tuple of file paths) into a format for the frontend (FileData).
+        This involves making the local files servable by Gradio.
         """
         if value is None or (value[0] is None and value[1] is None):
             return None
@@ -120,7 +135,7 @@ class VideoSlider(Component):
         
         fd1 = None
         if video1_path:
-            # Copies the file to a temp cache and returns a FileData object.
+            # Copies the file to a temporary cache and creates a FileData object.
             new_path = processing_utils.move_resource_to_block_cache(video1_path, self)
             fd1 = FileData(path=str(new_path))
 
@@ -133,7 +148,7 @@ class VideoSlider(Component):
         
     def api_info(self) -> dict[str, Any]:
         """
-        Provides API information for the component.
+        Provides type information for the component's API documentation.
         """
         return {"type": "array", "items": {"type": "string", "description": "path to video file"}, "length": 2}
 

src/demo/app.py

@@ -1,4 +1,3 @@
-# In demo/app.py
 import gradio as gr
 from gradio_videoslider import VideoSlider
 import os
@@ -8,8 +7,8 @@ import os
 # IMPORTANT: Replace the values below with the paths to YOUR video files.
 #
 # Option A: Relative Path (if the video is in the same folder as this app.py)
-# video_path_1 = "video_antes.mp4"
-# video_path_2 = "video_depois.mp4"
+# video_path_1 = "video_before.mp4"
+# video_path_2 = "video_after.mp4"
 #
 # Option B: Absolute Path (the full path to the file on your computer)
 # Example for Windows:
@@ -23,7 +22,7 @@ video_path_1 = "examples/SampleVideo 720x480.mp4"
 video_path_2 = "examples/SampleVideo 1280x720.mp4"
 
 
-# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE ---
 def process_uploaded_videos(video_inputs):
     """This function handles the uploaded videos."""
     print("Received videos from upload:", video_inputs)
@@ -39,11 +38,13 @@ with gr.Blocks() as demo:
         # --- TAB 1: UPLOAD EXAMPLE ---
         with gr.TabItem("1. Compare via Upload"):
             gr.Markdown("## Upload two videos to compare them side-by-side.")
-            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700, video_mode="upload")
             video_slider_output = VideoSlider(
                 label="Video comparision",
                 interactive=False,
-                autoplay=True,
+                autoplay=True,                
+                video_mode="preview",
+                show_download_button=False,
                 loop=True,
                 height=400,
                 width=700
@@ -64,13 +65,15 @@ with gr.Blocks() as demo:
                 label="Video comparision",
                 value=(video_path_1, video_path_2),
                 interactive=False,
+                show_download_button=False,
                 autoplay=True,
+                video_mode="preview",
                 loop=True,
                 height=400,
                 width=700
             )
 
-# Optional: A check to give a helpful error message if files are not found.
+# A check to give a helpful error message if files are not found.
 if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
     print("---")
     print(f"WARNING: Could not find one or both video files.")
@@ -80,4 +83,4 @@ if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
     print("---")
 
 if __name__ == '__main__':
-    demo.launch()
+    demo.launch(debug=True)

src/demo/space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'VideoSlider': {'description': 'A custom Gradio component to display a side-by-side video comparison with a slider.\nIt can be used as both an input (uploading two videos) and an output (displaying two videos).', 'members': {'__init__': {'value': {'type': 'typing.Union[\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path],\n    typing.Callable,\n    NoneType,\n][\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path][\n        str | pathlib.Path, str | pathlib.Path\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': 'A tuple of two video file paths or URLs to display initially.'}, 'height': {'type': 'int | None', 'default': 'None', 'description': 'The height of the component in pixels.'}, 'width': {'type': 'int | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If False, the component will be in display-only mode.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'typing.Union[typing.List[str], str, NoneType][\n    typing.List[str][str], str, None\n]', 'default': 'None', 'description': None}, 'position': {'type': 'int', 'default': '50', 'description': 'The initial position of the slider, from 0 to 100.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': None}, 'show_fullscreen_button': {'type': 'bool', 'default': 'True', 'description': None}, 'autoplay': {'type': 'bool', 'default': 'False', 'description': 'If True, the videos will start playing automatically.'}, 'loop': {'type': 'bool', 'default': 'False', 'description': 'If True, the videos will loop when they finish.'}}, 'postprocess': {'value': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the VideoSlider changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the VideoSlider.'}, 'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the VideoSlider using the clear button for the component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'VideoSlider': []}}}
+_docs = {'VideoSlider': {'description': 'A custom Gradio component to display a side-by-side video comparison with a slider.\nCan be used as an input (for uploading two videos) or as an output (for displaying two videos).', 'members': {'__init__': {'value': {'type': 'typing.Union[\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path],\n    typing.Callable,\n    NoneType,\n][\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path][\n        str | pathlib.Path, str | pathlib.Path\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': 'A tuple of two video file paths or URLs to display initially. Can also be a callable.'}, 'height': {'type': 'int | None', 'default': 'None', 'description': 'The height of the component container in pixels.'}, 'width': {'type': 'int | None', 'default': 'None', 'description': 'The width of the component container in pixels.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component that appears above it.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' seconds while the client connection is open."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'If False, the label is not displayed.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will not be wrapped in a container.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': "An integer that defines the component's relative size in a layout."}, 'min_width': {'type': 'int', 'default': '160', 'description': 'The minimum width of the component in pixels.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': "If True, the component is in input mode (upload). If False, it's in display-only mode."}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component is not rendered.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of the component in the HTML.'}, 'elem_classes': {'type': 'typing.Union[typing.List[str], str, NoneType][\n    typing.List[str][str], str, None\n]', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of the component in the HTML.'}, 'position': {'type': 'int', 'default': '50', 'description': 'The initial horizontal position of the slider, from 0 (left) to 100 (right).'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'If True, a download button is shown for the second video.'}, 'show_mute_button': {'type': 'bool', 'default': 'True', 'description': 'If True, a mute/unmute button is shown.'}, 'show_fullscreen_button': {'type': 'bool', 'default': 'True', 'description': 'If True, a fullscreen button is shown.'}, 'video_mode': {'type': '"upload" | "preview"', 'default': '"preview"', 'description': 'The mode of the component, either "upload" or "preview".'}, 'autoplay': {'type': 'bool', 'default': 'False', 'description': 'If True, videos will start playing automatically on load (muted).'}, 'loop': {'type': 'bool', 'default': 'False', 'description': 'If True, videos will loop when they finish playing.'}}, 'postprocess': {'value': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the VideoSlider changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the VideoSlider.'}, 'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the VideoSlider using the clear button for the component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'VideoSlider': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -21,7 +21,7 @@ with gr.Blocks(
 # `gradio_videoslider`
 
 <div style="display: flex; gap: 7px;">
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+<a href="https://pypi.org/project/gradio_videoslider/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_videoslider"></a>  
 </div>
 
 VideoSlider Component for Gradio
@@ -38,7 +38,6 @@ pip install gradio_videoslider
 ## Usage
 
 ```python
-# In demo/app.py
 import gradio as gr
 from gradio_videoslider import VideoSlider
 import os
@@ -48,8 +47,8 @@ import os
 # IMPORTANT: Replace the values below with the paths to YOUR video files.
 #
 # Option A: Relative Path (if the video is in the same folder as this app.py)
-# video_path_1 = "video_antes.mp4"
-# video_path_2 = "video_depois.mp4"
+# video_path_1 = "video_before.mp4"
+# video_path_2 = "video_after.mp4"
 #
 # Option B: Absolute Path (the full path to the file on your computer)
 # Example for Windows:
@@ -63,7 +62,7 @@ video_path_1 = "examples/SampleVideo 720x480.mp4"
 video_path_2 = "examples/SampleVideo 1280x720.mp4"
 
 
-# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE ---
 def process_uploaded_videos(video_inputs):
     \"\"\"This function handles the uploaded videos.\"\"\"
     print("Received videos from upload:", video_inputs)
@@ -79,11 +78,13 @@ with gr.Blocks() as demo:
         # --- TAB 1: UPLOAD EXAMPLE ---
         with gr.TabItem("1. Compare via Upload"):
             gr.Markdown("## Upload two videos to compare them side-by-side.")
-            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700, video_mode="upload")
             video_slider_output = VideoSlider(
                 label="Video comparision",
                 interactive=False,
-                autoplay=True,
+                autoplay=True,                
+                video_mode="preview",
+                show_download_button=False,
                 loop=True,
                 height=400,
                 width=700
@@ -104,13 +105,15 @@ with gr.Blocks() as demo:
                 label="Video comparision",
                 value=(video_path_1, video_path_2),
                 interactive=False,
+                show_download_button=False,
                 autoplay=True,
+                video_mode="preview",
                 loop=True,
                 height=400,
                 width=700
             )
 
-# Optional: A check to give a helpful error message if files are not found.
+# A check to give a helpful error message if files are not found.
 if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
     print("---")
     print(f"WARNING: Could not find one or both video files.")
@@ -120,7 +123,7 @@ if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
     print("---")
 
 if __name__ == '__main__':
-    demo.launch()
+    demo.launch(debug=True)
 
 ```
 """, elem_classes=["md-custom"], header_links=True)

src/examples/SampleVideo 720x480.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:99d1ffc857ae1c12f0c378e7503a0057232e920ab6666a35f55caab37d43322a
+size 564010

src/frontend/Index.svelte

@@ -1,16 +1,16 @@
 <!-- videoslider/frontend/Index.svelte -->
-<!-- Enable programmatic access to the component's props from outside. -->
 <svelte:options accessors={true} />
 
 <script lang="ts">
-	// Import Gradio types and common components.
+	// Svelte and Gradio imports
+	import { tick } from "svelte";
 	import type { Gradio } from "@gradio/utils";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { FileData } from "@gradio/client";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	
-	// Import the two main views for this component.
+	// Local component imports
 	import VideoSliderPreview from "./shared/VideoSliderPreview.svelte";
 	import InteractiveVideoSlider from "./shared/InteractiveVideoSlider.svelte";
 
@@ -31,10 +31,12 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
-	/** If false, the component is in display-only mode. */
 	export let interactive: boolean;
 	export let show_download_button: boolean;
 	export let show_fullscreen_button: boolean;
+	export let show_mute_button: boolean;
+	/** Determines whether to show the upload interface or the preview player. */
+	export let video_mode: "upload" | "preview" = "preview";
 	/** The initial position of the slider, from 0 to 100. */
 	export let position: number;
 	export let autoplay: boolean;
@@ -56,11 +58,12 @@
 	let old_value: [FileData | null, FileData | null] = [null, null];
 	/** Tracks if the user is dragging over the upload area. */
 	let dragging = false;
-	
+
 	// -----------------
 	// Reactive Logic
 	// -----------------
-	/** Converts the 0-100 position from Python to a 0-1 scale for CSS. */
+
+	/** Converts the 0-100 position from Python to a 0-1 scale for the child component. */
 	$: normalised_slider_position = Math.max(0, Math.min(100, position)) / 100;
 
 	/** Dispatches a 'change' event whenever the `value` prop is updated from within the component. */
@@ -70,17 +73,24 @@
 			gradio.dispatch("change");
 		}
 	}
+
+	/**
+	 * Handles the fullscreen event from the child component.
+	 * It updates the internal state and resets the slider position to the center.
+	 * @param detail The new fullscreen state (true or false).
+	 */
+	function handle_fullscreen_change(detail: boolean) {
+		fullscreen = detail;
+		position = 50; // Center the slider on fullscreen change
+		tick().then(() => gradio.dispatch("change"));
+	}
 </script>
 
-<!-- 
-	This block acts as a router. 
-	It displays one of two sub-components based on the `interactive` prop from the backend.
--->
-{#if !interactive}
-	<!-- Static/Output Mode: Shows the side-by-side video player with a slider. -->
+{#if video_mode=="preview"}
 	<Block
 		{visible}
 		variant={"solid"}
+		border_mode={dragging ? "focus" : "base"}
 		padding={false}
 		{elem_id}
 		{elem_classes}
@@ -100,22 +110,23 @@
 		<VideoSliderPreview
 			bind:value
 			{interactive}
+            {fullscreen}
 			{label}
 			{show_label}
 			{show_download_button}
 			{show_fullscreen_button}
+			{show_mute_button}
 			i18n={gradio.i18n}
-			position={normalised_slider_position}
+			bind:position={normalised_slider_position}
 			slider_color="var(--border-color-primary)"
 			on:clear={() => gradio.dispatch("clear")}
-			on:fullscreen={({ detail }) => { fullscreen = detail; }}
+			on:fullscreen={({ detail }) => handle_fullscreen_change(detail)}
 			{autoplay}
 			{loop}
 			upload={(...args) => gradio.client.upload(...args)}
 		/>
 	</Block>
 {:else}
-	<!-- Interactive/Input Mode: Shows two upload boxes for the user to add videos. -->
 	<Block
 		{visible}
 		variant={"solid"}
@@ -145,10 +156,10 @@
 			{show_label}
 			max_file_size={gradio.max_file_size}
 			i18n={gradio.i18n}
-			upload={(...args) => gradio.client.upload(...args)}	
-			stream_handler={gradio.client?.stream} 		
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={gradio.client?.stream}
 			{autoplay}
-			{loop}			
+			{loop}
 		/>
 	</Block>
 {/if}

src/frontend/shared/InteractiveVideo.svelte

@@ -33,7 +33,7 @@ It's a building block for more complex components like the InteractiveVideoSlide
 	export let show_label = true;
 	export let webcam_options: WebcamOptions;
 	export let include_audio: boolean;
-	export let autoplay: boolean;
+	export const autoplay = undefined
 	export let root: string;
 	export let i18n: I18nFormatter;
 	/** The currently selected input source. */

src/frontend/shared/Player.svelte

@@ -1,12 +1,8 @@
-<!--
-@component
-This component is a self-contained video player. It wraps the base <Video>
-component and adds a custom control bar for play/pause, timeline scrubbing,
-and fullscreen. It also integrates with VideoControls for editing features.
--->
+<!-- videoslider/frontend/shared/Player.svelte -->
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import { Play, Pause, Maximise, Undo } from "@gradio/icons";
+	// Svelte and Gradio imports
+	import { createEventDispatcher, onMount, tick } from "svelte";
+	import { Play, Pause, Undo } from "@gradio/icons";
 	import Video from "./Video.svelte";
 	import VideoControls from "./VideoControls.svelte";
 	import type { FileData, Client } from "@gradio/client";
@@ -35,6 +31,7 @@ and fullscreen. It also integrates with VideoControls for editing features.
 	export let value: FileData | null = null;
 	export let handle_clear: () => void = () => {};
 	export let has_change_history = false;
+	export let fullscreen = false;
 
 	const dispatch = createEventDispatcher<{
 		play: undefined;
@@ -42,7 +39,7 @@ and fullscreen. It also integrates with VideoControls for editing features.
 		stop: undefined;
 		end: undefined;
 		clear: undefined;
-		loadeddata: undefined;
+		load: { top: number; left: number; width: number; height: number };
 	}>();
 
 	// -----------------
@@ -54,7 +51,7 @@ and fullscreen. It also integrates with VideoControls for editing features.
 	let duration: number;
 	/** The paused state of the video. */
 	let paused = true;
-	/** A direct reference to the underlying HTML <video> element. */
+	/** A direct reference to the underlying HTML <video> element for internal use. */
 	let video: HTMLVideoElement;
 	/** A prop to export the video element reference to parent components. */
 	export let video_el: HTMLVideoElement;
@@ -62,53 +59,65 @@ and fullscreen. It also integrates with VideoControls for editing features.
 	let processingVideo = false;
 
 	// -----------------
-	// Event Handlers
+	// Functions
 	// -----------------
 
-	/** Handles scrubbing the video timeline with a mouse or touch drag. */
-	function handleMove(e: TouchEvent | MouseEvent): void {
-		if (!duration) return;
-
-		if (e.type === "click") {
-			handle_click(e as MouseEvent);
-			return;
+	/**
+	 * Calculates and returns the size and relative position of the video element.
+	 * @param video The HTML video element to measure.
+	 */
+	function get_video_size(video: HTMLVideoElement | null) {
+		if (!video) {
+			const container = video?.parentElement?.getBoundingClientRect() || {
+				top: 0,
+				left: 0,
+				width: 640,
+				height: 360
+			};
+			return {
+				top: 0,
+				left: 0,
+				width: container.width,
+				height: container.height
+			};
 		}
+		const rect = video.getBoundingClientRect();
+		const containerRect = video.parentElement?.getBoundingClientRect() || rect;
+		return {
+			top: rect.top - containerRect.top,
+			left: rect.left - containerRect.left,
+			width: rect.width,
+			height: rect.height
+		};
+	}
 
-		if (e.type !== "touchmove" && !((e as MouseEvent).buttons & 1)) return;
+	/** Handles user input on the range slider to seek the video. */
+	function handleMove(e: Event): void {
+		if (!duration) return;
+		const input = e.currentTarget as HTMLInputElement;
+		time = duration * (parseFloat(input.value) / 100);
+	}
 
-		const clientX =
-			e.type === "touchmove"
-				? (e as TouchEvent).touches[0].clientX
-				: (e as MouseEvent).clientX;
-		const { left, right } = (
-			e.currentTarget as HTMLProgressElement
-		).getBoundingClientRect();
-		time = (duration * (clientX - left)) / (right - left);
+	/** Handles keyboard navigation (arrow keys) on the range slider. */
+	function handleKeydown(e: KeyboardEvent): void {
+		if (!duration) return;
+		if (e.key === "ArrowLeft") {
+			time = Math.max(0, time - 5);
+		} else if (e.key === "ArrowRight") {
+			time = Math.min(duration, time + 5);
+		}
 	}
 
 	/** Toggles the video between playing and paused states. */
 	async function play_pause(): Promise<void> {
-		if (document.fullscreenElement != video) {
-			const isPlaying =
-				video.currentTime > 0 &&
-				!video.paused &&
-				!video.ended &&
-				video.readyState > video.HAVE_CURRENT_DATA;
-
-			if (!isPlaying) {
-				await video.play();
-			} else video.pause();
+		const isPlaying = video.currentTime > 0 && !video.paused && !video.ended && video.readyState > video.HAVE_CURRENT_DATA;
+		if (!isPlaying) {
+			await video.play();
+		} else {
+			video.pause();
 		}
 	}
 
-	/** Handles a single click on the progress bar to seek to a specific time. */
-	function handle_click(e: MouseEvent): void {
-		const { left, right } = (
-			e.currentTarget as HTMLProgressElement
-		).getBoundingClientRect();
-		time = (duration * (e.clientX - left)) / (right - left);
-	}
-
 	/** Dispatches events when the video playback ends. */
 	function handle_end(): void {
 		dispatch("stop");
@@ -120,26 +129,43 @@ and fullscreen. It also integrates with VideoControls for editing features.
 		let _video_blob = new File([videoBlob], "video.mp4");
 		const val = await prepare_files([_video_blob]);
 		let value = ((await upload(val, root))?.filter(Boolean) as FileData[])[0];
-
 		handle_change(value);
 	};
 
-	/** Enters fullscreen mode for the video. */
-	function open_full_screen(): void {
-		video.requestFullscreen();
-	}
-
 	// -----------------
 	// Reactive Logic
 	// -----------------
-	/** Ensures `time` and `duration` are never NaN. */
 	$: time = time || 0;
 	$: duration = duration || 0;
 	/** Passes the internal video element reference to the exported prop. */
 	$: video_el = video;
+	/** Calculates the progress value (0-100) for the range slider. */
+	$: progressValue = duration ? (time / duration) * 100 : 0;
+
+	/** When the video element is available, dispatch its size and set up a ResizeObserver. */
+	onMount(() => {
+		const resizer = new ResizeObserver(async () => {
+			await tick();
+			dispatch("load", get_video_size(video));
+		});
+		if (video) {
+			resizer.observe(video);
+		}
+		return () => {
+			resizer.disconnect();
+		};
+	});
+
+	/** Dispatches the video size whenever the video element reference changes. */
+	$: if (video) {
+		dispatch("load", get_video_size(video));
+	}
 </script>
 
 <div class="wrap">
+	{#if !video?.videoWidth}
+		<div class="loading-spinner">Loading video...</div>
+	{/if}
 	<div class="mirror-wrap" class:mirror>
 		<Video
 			{src}
@@ -150,8 +176,9 @@ and fullscreen. It also integrates with VideoControls for editing features.
 			on:click={play_pause}
 			on:play={() => dispatch("play")}
 			on:pause={() => dispatch("pause")}
-			on:loadeddata={() => dispatch("loadeddata")}
-			on:error
+			on:loadeddata={() => dispatch("load", get_video_size(video))}
+			on:loadedmetadata={() => dispatch("load", get_video_size(video))}
+			on:error={(e) => dispatch("error", e)}
 			on:ended={handle_end}
 			bind:currentTime={time}
 			bind:duration
@@ -159,13 +186,12 @@ and fullscreen. It also integrates with VideoControls for editing features.
 			bind:node={video}
 			data-testid={`${label}-player`}
 			{processingVideo}
+			{fullscreen}
 		>
 			<track kind="captions" src={subtitle} default />
 		</Video>
-		
 	</div>
 
-	<!-- The custom video controls overlay -->
 	<div class="controls">
 		<div class="inner">
 			<span
@@ -174,7 +200,9 @@ and fullscreen. It also integrates with VideoControls for editing features.
 				class="icon"
 				aria-label="play-pause-replay-button"
 				on:click={play_pause}
-				on:keydown={play_pause}
+				on:keydown={(e) => {
+					if (e.key === "Enter" || e.key === " ") play_pause();
+				}}
 			>
 				{#if time === duration}
 					<Undo />
@@ -184,31 +212,21 @@ and fullscreen. It also integrates with VideoControls for editing features.
 					<Pause />
 				{/if}
 			</span>
-
 			<span class="time">{format_time(time)} / {format_time(duration)}</span>
-			
-			<progress
-				value={time / duration || 0}
-				on:mousemove={handleMove}
-				on:touchmove|preventDefault={handleMove}
-				on:click|stopPropagation|preventDefault={handle_click}
+			<input
+				type="range"
+				min="0"
+				max="100"
+				step="0.1"
+				value={progressValue}
+				aria-label="Video progress"
+				on:input={handleMove}
+				on:keydown={handleKeydown}
 			/>
-
-			<div
-				role="button"
-				tabindex="0"
-				class="icon"
-				aria-label="full-screen"
-				on:click={open_full_screen}
-				on:keypress={open_full_screen}
-			>
-				<Maximise />
-			</div>
 		</div>
 	</div>
 </div>
 
-<!-- If in interactive mode, show the additional editing controls below the player. -->
 {#if interactive}
 	<VideoControls
 		videoElement={video}
@@ -228,34 +246,19 @@ and fullscreen. It also integrates with VideoControls for editing features.
 	span {
 		text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
 	}
-
-	progress {
+	input[type="range"] {
 		margin-right: var(--size-3);
-		border-radius: var(--radius-sm);
 		width: var(--size-full);
 		height: var(--size-2);
 	}
-
-	progress::-webkit-progress-bar {
-		border-radius: 2px;
-		background-color: rgba(255, 255, 255, 0.2);
-		overflow: hidden;
-	}
-
-	progress::-webkit-progress-value {
-		background-color: rgba(255, 255, 255, 0.9);
-	}
-
 	.mirror {
 		transform: scaleX(-1);
 	}
-
 	.mirror-wrap {
 		position: relative;
 		height: 100%;
 		width: 100%;
 	}
-
 	.controls {
 		position: absolute;
 		bottom: 0;
@@ -270,7 +273,6 @@ and fullscreen. It also integrates with VideoControls for editing features.
 	.wrap:hover .controls {
 		opacity: 1;
 	}
-
 	.inner {
 		display: flex;
 		justify-content: space-between;
@@ -280,7 +282,6 @@ and fullscreen. It also integrates with VideoControls for editing features.
 		width: var(--size-full);
 		height: var(--size-full);
 	}
-
 	.icon {
 		display: flex;
 		justify-content: center;
@@ -288,7 +289,6 @@ and fullscreen. It also integrates with VideoControls for editing features.
 		width: var(--size-6);
 		color: white;
 	}
-
 	.time {
 		flex-shrink: 0;
 		margin-right: var(--size-3);
@@ -307,5 +307,16 @@ and fullscreen. It also integrates with VideoControls for editing features.
 	.wrap :global(video) {
 		height: var(--size-full);
 		width: var(--size-full);
+		object-fit: contain;
+	}
+	.loading-spinner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		color: white;
+		background: rgba(0,0,0,0.7);
+		padding: 1rem;
+		border-radius: 0.5rem;
 	}
 </style>

src/frontend/shared/Slider.svelte

@@ -1,249 +1,227 @@
-<!--
-@component
-A general-purpose draggable slider component that can be laid over other content.
-It uses d3-drag for robust drag handling and is designed to differentiate
-between a "drag" action and a "click" action.
--->
-<script lang="ts">
-    import { onMount, createEventDispatcher } from "svelte";
-    import { drag } from "d3-drag";
-    import { select } from "d3-selection";
-
-    /** A utility function to constrain a value within a minimum and maximum range. */
-    function clamp(value: number, min: number, max: number): number {
-        return Math.min(Math.max(value, min), max);
-    }
-
-    // ------------------
-    // Props
-    // ------------------
-    /** The slider's position as a normalized value (0 to 1). Can be two-way bound. */
-    export let position = 0.5;
-    /** If true, disables all dragging and interaction. */
-    export let disabled = false;
-    /** The color of the vertical slider line. */
-    export let slider_color = "var(--border-color-primary)";
-    /** Layout-related props, typically bound from the parent, used for calculating pixel positions. */
-    export let image_size: {
-        top: number;
-        left: number;
-        width: number;
-        height: number;
-    } = { top: 0, left: 0, width: 0, height: 0 };
-    export let el: HTMLDivElement | undefined = undefined;
-    export let parent_el: HTMLDivElement | undefined = undefined;
-    
-    /** Dispatches a 'click' event ONLY if the user clicks the handle without dragging. */
-    const dispatch = createEventDispatcher<{ click: MouseEvent }>();
-
-    // -----------------
-    // Internal State
-    // -----------------
-    let inner: Element;
-    /** The slider's horizontal position in pixels. */
-    let px = 0;
-    /** True while the user is actively dragging the handle. */
-    let active = false;
-    let container_width = 0;
-    
-    let drag_start_x: number;
-    /** A flag to determine if a drag action actually moved, differentiating it from a simple click. */
-    let was_dragged = false;
-
-    // -----------------
-    // Functions
-    // -----------------
-
-    /** Calculates the slider's pixel position based on its container's dimensions. */
-    function set_position(width: number): void {
-        container_width = parent_el?.getBoundingClientRect().width || 0;
-        if (width === 0) {
-            image_size.width = el?.getBoundingClientRect().width || 0;
-        }
-        px = clamp(
-            image_size.width * position + image_size.left,
-            0,
-            container_width
-        );
-    }
-
-    function round(n: number, points: number): number {
-        const mod = Math.pow(10, points);
-        return Math.round((n + Number.EPSILON) * mod) / mod;
-    }
-
-    /** Updates the internal state based on the drag's x-coordinate. */
-    function update_position(x: number): void {
-        px = clamp(x, 0, container_width);
-        position = round((x - image_size.left) / image_size.width, 5);
-    }
-
-    // --- D3 Drag Event Handlers ---
-
-    function drag_start(event: any): void {
-        if (disabled) return;
-        active = true;
-        update_position(event.x);
-        drag_start_x = event.x;
-        was_dragged = false;
-    }
-
-    function drag_move(event: any): void {
-        if (disabled) return;
-        update_position(event.x);
-        if (Math.abs(event.x - drag_start_x) > 3) {
-            was_dragged = true;
-        }
-    }
-
-    function drag_end(event: any): void {
-        if (disabled) return;
-        active = false;
-        if (!was_dragged) {
-            dispatch("click", event.sourceEvent);
-        }
-    }
-
-    /** Updates the pixel position when the `position` prop changes from the parent. */
-    function update_position_from_pc(pc: number): void {
-        px = clamp(image_size.width * pc + image_size.left, 0, container_width);
-    }
-
-    // -----------------
-    // Lifecycle & Reactive Logic
-    // -----------------
-    $: set_position(image_size.width);
-    $: update_position_from_pc(position);
-
-    onMount(() => {
-        set_position(image_size.width);
-        const drag_handler = drag()
-            .on("start", drag_start)
-            .on("drag", drag_move)
-            .on("end", drag_end);
-        select(inner).call(drag_handler);
-    });
-</script>
-
-<!-- Recalculate position on window resize. -->
-<svelte:window on:resize={() => set_position(image_size.width)} />
-
-<div class="wrap" role="none" bind:this={parent_el}>
-    <!-- The content from the parent component is placed here. -->
-    <div class="content" bind:this={el}>
-        <slot />
-    </div>
-
-    <!-- This is the draggable handle area. -->
-    <div
-        class="outer"
-        class:disabled
-        bind:this={inner}
-        role="none"
-        style="transform: translateX({px}px)"
-        class:grab={active}
-		on:click={(event) => event.stopPropagation()}
-    >
-        <span class="icon-wrap" class:active class:disabled>
-			<span class="icon left">◢</span>
-			<span class="icon center" style:--color={slider_color}></span>
-			<span class="icon right">◢</span>
-		</span>
-        <!-- This is the visible vertical line of the slider. -->
-        <div class="inner" style:--color={slider_color}></div>
-    </div>
-</div>
-
-<style>
-    .wrap {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        z-index: var(--layer-1);
-        overflow: hidden;
-    }
-
-    .icon-wrap {
-        display: block;
-        position: absolute;
-        top: 50%;
-        transform: translate(-20.5px, -50%);
-        left: 10px;
-        width: 40px;
-        transition: 0.2s;
-        color: var(--body-text-color);
-        height: 30px;
-        border-radius: 5px;
-        background-color: var(--color-accent);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: var(--layer-3);
-        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
-        font-size: 12px;
-    }
-
-    .icon.left {
-        transform: rotate(135deg);
-        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
-    }
-
-    .icon.right {
-        transform: rotate(-45deg);
-        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
-    }
-
-    .icon.center {
-        display: block;
-        width: 1px;
-        height: 100%;
-        background-color: var(--color);
-        opacity: 0.1;
-    }
-
-    .icon-wrap.active {
-        opacity: 0;
-    }
-
-    .icon-wrap.disabled {
-        opacity: 0;
-    }
-
-    .outer {
-        width: 20px;
-        height: 100%;
-        position: absolute;
-        cursor: grab;
-        top: 0;
-        left: -10px;
-        pointer-events: auto;
-        z-index: var(--layer-2);
-    }
-    .grab {
-        cursor: grabbing;
-    }
-
-    .inner {
-        width: 1px;
-        height: 100%;
-        background: var(--color);
-        position: absolute;
-        left: calc((100% - 2px) / 2);
-    }
-
-    .disabled {
-        cursor: auto;
-    }
-
-    .disabled .inner {
-        box-shadow: none;
-    }
-
-    .content {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+<!-- videoslider/frontend/shared/Slider.svelte -->
+<script lang="ts">
+	// Svelte and D3 imports
+	import { onMount, tick } from "svelte";
+	import { drag } from "d3-drag";
+	import { select } from "d3-selection";
+
+	/** A utility function to constrain a value within a minimum and maximum range. */
+	function clamp(value: number, min: number, max: number): number {
+		return Math.min(Math.max(value, min), max);
+	}
+
+	// ------------------
+	// Props
+	// ------------------
+	/** The slider's position as a normalized value (0 to 1). Can be two-way bound. */
+	export let position = 0.5;
+	/** If true, disables all dragging and interaction. */
+	export let disabled = false;
+	/** The color of the vertical slider line. */
+	export let slider_color = "var(--border-color-primary)";
+	/** The dimensions of the content being compared. */
+	export let image_size: { top: number; left: number; width: number; height: number };
+	/** A reference to the content element. */
+	export let el: HTMLDivElement | undefined = undefined;
+	/** A reference to the main wrapper element. */
+	export let parent_el: HTMLDivElement | undefined = undefined;
+
+	// -----------------
+	// Internal State
+	// -----------------
+	/** A reference to the draggable handle element. */
+	let inner: HTMLDivElement | undefined;
+	/** The slider's horizontal position in pixels. */
+	let px = 0;
+	/** True while the user is actively dragging the handle. */
+	let active = false;
+	let container_width = 0;
+
+	/**
+	 * Calculates and sets the slider's pixel position based on its container's dimensions.
+	 * This is called reactively and by the ResizeObserver.
+	 */
+	function set_position(): void {
+		if (!parent_el) return;
+		const rect = parent_el.getBoundingClientRect();
+		container_width = rect.width;
+		px = clamp(container_width * position, 0, container_width);
+	}
+
+	/** A utility function to round a number to a specific number of decimal points. */
+	function round(n: number, points: number): number {
+		const mod = Math.pow(10, points);
+		return Math.round((n + Number.EPSILON) * mod) / mod;
+	}
+
+	/** Updates the internal state based on the drag's x-coordinate in pixels. */
+	function update_position(x: number): void {
+		if (!parent_el || !image_size?.width) return;
+		container_width = parent_el.getBoundingClientRect().width;
+		px = clamp(x, 0, container_width);
+		position = round((px - image_size.left) / image_size.width, 5);
+	}
+
+	// -----------------
+	// D3 Drag Handlers
+	// -----------------
+
+	/** Handles the start of a drag action. */
+	function drag_start(event: any): void {
+		if (disabled) return;
+		active = true;
+		update_position(event.x);
+	}
+
+	/** Handles the movement during a drag action. */
+	function drag_move(event: any): void {
+		if (disabled) return;
+		update_position(event.x);
+	}
+
+	/** Handles the end of a drag action. */
+	function drag_end(): void {
+		if (disabled) return;
+		active = false;
+	}
+
+	// -----------------
+	// Reactive Logic & Lifecycle
+	// -----------------
+
+	/** Reactively updates the slider's pixel position whenever the normalized `position` changes. */
+	$: set_position();
+
+	/** Reactively applies the calculated pixel position to the handle's style. */
+	$: if (inner) {
+		inner.style.transform = `translateX(${px}px)`;
+	}
+
+	/** On mount, sets up the d3-drag handler and a ResizeObserver to keep the layout correct. */
+	onMount(() => {
+		if (!inner) return;
+
+		const drag_handler = drag()
+			.on("start", drag_start)
+			.on("drag", drag_move)
+			.on("end", drag_end)
+			.touchable(() => true);
+
+		select(inner).call(drag_handler);
+
+		const resizeObserver = new ResizeObserver(() => {
+			tick().then(() => set_position());
+		});
+
+		if (parent_el) {
+			resizeObserver.observe(parent_el);
+		}
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+</script>
+
+<svelte:window on:resize={() => {
+	tick().then(() => set_position());
+}} />
+
+<div class="wrap" role="none" bind:this={parent_el}>
+	<div class="content" bind:this={el}>
+		<slot />
+	</div>
+	<div
+		class="outer"
+		class:disabled
+		bind:this={inner}
+		role="none"
+		class:grab={active}
+		on:click|stopPropagation
+	>
+		<span class="icon-wrap" class:active class:disabled>
+			<span class="icon left">◢</span>
+			<span class="icon center" style:--color={slider_color}></span>
+			<span class="icon right">◢</span>
+		</span>
+		<div class="inner" style:--color={slider_color}></div>
+	</div>
+</div>
+
+<style>
+	.wrap {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		z-index: var(--layer-1);
+		overflow: hidden;
+	}
+	.icon-wrap {
+		display: flex;
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		left: 50%;
+		width: 40px;
+		transition: 0.2s;
+		color: var(--body-text-color);
+		height: 30px;
+		border-radius: 5px;
+		background-color: var(--color-accent);
+		align-items: center;
+		justify-content: center;
+		z-index: var(--layer-3);
+		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
+		font-size: 12px;
+		pointer-events: auto;
+	}
+	.icon.left {
+		transform: rotate(135deg);
+		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
+	}
+	.icon.right {
+		transform: rotate(-45deg);
+		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
+	}
+	.icon.center {
+		display: block;
+		width: 1px;
+		height: 100%;
+		background-color: var(--color);
+		opacity: 0.5;
+	}
+	.outer {
+		width: 40px;
+		height: 100%;
+		position: absolute;
+		cursor: grab;
+		top: 0;
+		left: -20px;
+		pointer-events: auto;
+		z-index: 1000;
+	}
+	.grab {
+		cursor: grabbing;
+	}
+	.inner {
+		width: 1px;
+		height: 100%;
+		background: var(--color);
+		position: absolute;
+		left: calc((100% - 1px) / 2);
+	}
+	.disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+	.disabled .inner {
+		box-shadow: none;
+	}
+	.content {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 </style>

src/frontend/shared/Video.svelte

@@ -1,26 +1,17 @@
-<!--
-@component
-This is the foundational video component, a wrapper around the native HTML `<video>` tag.
-It adds advanced functionality like HLS streaming support and compatibility with
-Gradio's WebAssembly (Wasm) environment. It also forwards native video events
-to parent components.
--->
+<!-- videoslider/frontend/shared/Video.svelte -->
 <svelte:options accessors={true} />
 
 <script lang="ts">
+	// Svelte and Gradio imports
 	import type { HTMLVideoAttributes } from "svelte/elements";
 	import { createEventDispatcher } from "svelte";
 	import { loaded } from "./utils";
-
 	import { resolve_wasm_src } from "@gradio/wasm/svelte";
-
 	import Hls from "hls.js";
 
 	// ------------------
 	// Props
 	// ------------------
-
-	// --- Standard Video Attributes ---
 	export let src: HTMLVideoAttributes["src"] = undefined;
 	export let muted: HTMLVideoAttributes["muted"] = undefined;
 	export let playsinline: HTMLVideoAttributes["playsinline"] = undefined;
@@ -28,30 +19,29 @@ to parent components.
 	export let autoplay: HTMLVideoAttributes["autoplay"] = undefined;
 	export let controls: HTMLVideoAttributes["controls"] = undefined;
 	export let loop: boolean;
-	
-	// --- Two-way Bound State ---
-	export let currentTime: number | undefined = undefined;
-	export let duration: number | undefined = undefined;
-	export let paused: boolean | undefined = undefined;
-
-	// --- Specialized Props ---
+	export let fullscreen = false;
+	export let small = false;
 	/** A direct reference to the underlying HTML <video> element. */
 	export let node: HTMLVideoElement | undefined = undefined;
 	/** If true, the source is an HLS stream and will be handled by hls.js. */
-	export let is_stream;
+	export let is_stream: boolean | undefined;
 	/** If true, displays a loading overlay on the video. */
 	export let processingVideo = false;
+	/** The current playback time of the video, in seconds. */
+	export let currentTime: number | undefined = undefined;
+	/** The total duration of the video, in seconds. */
+	export let duration: number | undefined = undefined;
+	/** The paused state of the video. */
+	export let paused: boolean | undefined = undefined;
 
 	// -----------------
 	// Internal State
 	// -----------------
 	let resolved_src: typeof src;
 	let stream_active = false;
-
-	// This block handles resolving video sources in a WebAssembly (Wasm) environment.
-	// It prevents UI flickering by showing the original `src` immediately while the
-	// Wasm-compatible source is being resolved asynchronously.
 	let latest_src: typeof src;
+
+	/** This block handles resolving video sources in a WebAssembly (Wasm) environment. */
 	$: {
 		resolved_src = src;
 		latest_src = src;
@@ -67,31 +57,22 @@ to parent components.
 
 	/**
 	 * Initializes and attaches an HLS.js player to the video element for streaming.
-	 * This is only triggered when the `is_stream` prop is true.
 	 * @param src The URL of the HLS manifest (.m3u8 file).
 	 * @param is_stream A flag to enable or disable this functionality.
 	 * @param node The HTML video element to attach the stream to.
 	 */
-	function load_stream(
-		src: string | null | undefined,
-		is_stream: boolean,
-		node: HTMLVideoElement
-	): void {
+	function load_stream(src: string | null | undefined, is_stream: boolean, node: HTMLVideoElement): void {
 		if (!src || !is_stream) return;
-
 		if (Hls.isSupported() && !stream_active) {
 			const hls = new Hls({
-				// Low-latency configuration
 				maxBufferLength: 1,
 				maxMaxBufferLength: 1,
 				lowLatencyMode: true
 			});
 			hls.loadSource(src);
 			hls.attachMedia(node);
-			hls.on(Hls.Events.MANIFEST_PARSED, function () {
-				(node as HTMLVideoElement).play();
-			});
-			hls.on(Hls.Events.ERROR, function (event, data) {
+			hls.on(Hls.Events.MANIFEST_PARSED, () => node.play());
+			hls.on(Hls.Events.ERROR, (event, data) => {
 				if (data.fatal) {
 					switch (data.type) {
 						case Hls.ErrorTypes.NETWORK_ERROR:
@@ -112,19 +93,12 @@ to parent components.
 
 	/** Reset the HLS stream when the video source changes. */
 	$: src, (stream_active = false);
-
 	/** Trigger the HLS stream loader if the source is a stream. */
 	$: if (node && src && is_stream) {
 		load_stream(src, is_stream, node);
 	}
 </script>
 
-<!--
-A necessary comment explaining a Svelte-specific quirk:
-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
--->
 <div class:hidden={!processingVideo} class="overlay">
 	<span class="load-wrap">
 		<span class="loader" />
@@ -138,24 +112,19 @@ because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/74
 	{autoplay}
 	{controls}
 	{loop}
-	
-	
+	class:fullscreen
+	class:small
 	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:error={dispatch.bind(null, "error", "Video not playable")}
-	
-	
 	bind:currentTime
 	bind:duration
 	bind:paused
 	bind:this={node}
-
-	
 	use:loaded={{ autoplay: autoplay ?? false }}
-
 	data-testid={$$props["data-testid"]}
 	crossorigin="anonymous"
 >
@@ -169,18 +138,15 @@ because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/74
 		width: 100%;
 		height: 100%;
 	}
-
 	.hidden {
 		display: none;
 	}
-
 	.load-wrap {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		height: 100%;
 	}
-
 	.loader {
 		display: flex;
 		position: relative;
@@ -195,7 +161,6 @@ because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/74
 		height: 10px;
 		scale: 0.5;
 	}
-
 	@keyframes shadowPulse {
 		33% {
 			box-shadow:

src/frontend/shared/VideoSliderPreview.svelte

@@ -1,235 +1,375 @@
-<!--
-@component
-This component provides the display-only view for the VideoSlider. It shows two
-videos side-by-side, with a draggable slider to reveal one over the other. It
-also handles synchronized play/pause functionality for both videos.
--->
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import type { FileData, Client } from "@gradio/client";
-	import type { I18nFormatter } from "@gradio/utils";
-
-	import Slider from "./Slider.svelte";
-	import Player from "./Player.svelte";
-
-	import { BlockLabel, Empty, IconButton, IconButtonWrapper, FullscreenButton } from "@gradio/atoms";
-	import { Video as VideoIcon, Download, Clear } from "@gradio/icons";
-	import { DownloadLink } from "@gradio/wasm/svelte";
-
-	// ------------------
-	// Props
-	// ------------------
-	export let value: [FileData | null, FileData | null] = [null, null];
-	export let label: string | undefined = undefined;
-	export let show_download_button = true;
-	export let show_label: boolean;
-	export let i18n: I18nFormatter;
-	/** The normalized (0-1) position of the slider. */
-	export let position: number;
-	export let slider_color: string;
-	export let show_fullscreen_button = true;
-	export let fullscreen = false;
-	export let interactive = true;
-	export let autoplay = false;
-	export let loop = false;
-	export let upload: Client["upload"];
-
-	const dispatch = createEventDispatcher<{ clear: void }>();
-
-	// -----------------
-	// Internal State
-	// -----------------
-	/** A direct reference to the master HTML <video> element. */
-	let video1_el: HTMLVideoElement;
-	/** A direct reference to the slave HTML <video> element. */
-	let video2_el: HTMLVideoElement;
-	
-	/** A flag that becomes true once the master video has loaded its data. */
-	let video_is_ready = false;
-	/** A flag to ensure the initial autoplay logic runs only once. */
-	let initial_autoplay_done = false;
-
-	/** A reactive CSS style to create the "reveal" effect based on the slider's position. */
-	$: style = `clip-path: inset(0 0 0 ${position * 100}%)`;
-
-	// -----------------
-	// Event Handlers
-	// -----------------
-
-	/** Sets a flag to true when the master video signals it's ready to play. */
-	function handle_video_ready(): void {
-		video_is_ready = true;
-	}
-
-	/** Toggles play/pause for both videos simultaneously when the user interacts. */
-	function toggle_playback(): void {
-		if (!video1_el || !video2_el) {
-			return;
-		}
-
-		const is_paused = video1_el.paused;
-
-		if (is_paused) {
-			video1_el.play().catch(() => {});
-			video2_el.play().catch(() => {});
-		} else {
-			video1_el.pause();
-			video2_el.pause();
-		}
-	}
-
-	// -----------------
-	// Reactive Logic
-	// -----------------
-	$: {
-		// This block handles initial autoplay once all conditions are met, preventing race conditions.
-		if (video1_el && video_is_ready && autoplay && !initial_autoplay_done) {
-			video1_el.play().catch(() => {});
-			initial_autoplay_done = true;
-		}
-
-		// This block continuously synchronizes the slave video to the master video.
-		if (video1_el && video2_el) {
-			// Sync playback time.
-			if (Math.abs(video1_el.currentTime - video2_el.currentTime) > 0.1) {
-				video2_el.currentTime = video1_el.currentTime;
-			}
-
-			// Sync play/pause state.
-			if (video1_el.paused !== video2_el.paused) {
-				if (video1_el.paused) {
-					video2_el.pause();
-				} else {
-					video2_el.play().catch(() => {});
-				}
-			}
-		}
-	}
-</script>
-
-<BlockLabel {show_label} Icon={VideoIcon} label={label || "Video Slider"} />
-
-<!-- Show an empty state if no videos are provided. -->
-{#if value === null || value[0] === null || value[1] === null}
-	<Empty unpadded_box={true} size="large"><VideoIcon /></Empty>
-{:else}
-	<div class="video-container">
-		<IconButtonWrapper>
-            {#if show_fullscreen_button}
-                <FullscreenButton {fullscreen} on:fullscreen />
-            {/if}
-
-            {#if show_download_button && value[1]}
-                <DownloadLink href={value[1].meta?._base64 || value[1].url} download={value[1].orig_name || "video"}>
-                    <IconButton Icon={Download} label={i18n("common.download")} />
-                </DownloadLink>
-            {/if}
-			
-            {#if interactive}
-                <IconButton
-                    Icon={Clear}
-                    label="Remove Videos"
-                    on:click={(event) => {
-                        value = [null, null];
-                        dispatch("clear");
-                        event.stopPropagation();
-                    }}
-                />
-            {/if}
-		</IconButtonWrapper>
-
-		<!-- This main wrapper handles clicks for the entire area and makes it accessible. -->
-		<div
-			class="main-wrapper"
-			on:click={toggle_playback}
-			on:keydown={(event) => {
-				if (event.key === 'Enter' || event.key === ' ') {
-					toggle_playback();
-				}
-			}}
-			role="button"
-			tabindex="0"
-		>
-			<!-- The first (bottom) video player. -->
-			<div class="player-wrapper">
-				{#if value[0]}
-					<Player
-						src={value[0].meta?._base64 || value[0].url}
-						bind:video_el={video1_el}
-						on:loadeddata={handle_video_ready}
-						{loop}
-						muted={true}
-						{i18n}
-						{upload}
-						mirror={false}
-						is_stream={value[0].is_stream}
-						interactive={false}
-					/>
-				{/if}
-			</div>
-
-			<!-- The second (top, clipped) video player. -->
-			<div class="player-wrapper fixed" {style}>
-				{#if value[1]}
-					<Player
-						src={value[1].meta?._base64 || value[1].url}
-						bind:video_el={video2_el} 
-						{loop}
-						muted={true}
-						{i18n}
-						{upload}
-						mirror={false}
-						is_stream={value[1].is_stream}
-						interactive={false}
-					/>
-				{/if}
-			</div>
-
-			<!-- The slider is an overlay for dragging, but does not handle clicks. -->
-			<Slider 
-				bind:position 
-				{slider_color}
-			/>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.video-container {
-		height: 100%;
-		width: 100%;
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		overflow: hidden;
-	}
-
-	.main-wrapper {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		cursor: pointer;
-	}
-
-	.player-wrapper {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-	}
-
-	.player-wrapper.fixed {
-		background: var(--block-background-fill);
-	}
-
-	/* Ensure the Slider component is layered on top of the video players. */
-	:global(.main-wrapper > .wrap) {
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: 10;
-		cursor: default;
-	}
+<!-- videoslider/frontend/shared/VideoSliderPreview.svelte -->
+<script lang="ts">
+	// Svelte and Gradio imports
+	import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
+	import type { FileData, Client } from "@gradio/client";
+	import type { I18nFormatter } from "@gradio/utils";
+	import Slider from "./Slider.svelte";
+	import Player from "./Player.svelte";
+	import { BlockLabel, Empty, IconButton, IconButtonWrapper, FullscreenButton } from "@gradio/atoms";
+	import { Video as VideoIcon, Download, Clear, VolumeMuted, VolumeHigh } from "@gradio/icons";
+	import { DownloadLink } from "@gradio/wasm/svelte";
+
+	// ------------------
+	// Props
+	// ------------------
+	export let value: [FileData | null, FileData | null] = [null, null];
+	export let label: string | undefined = undefined;
+	export let show_download_button = true;
+	export let show_label: boolean;
+	export let i18n: I18nFormatter;
+	export let position: number = 0.5;
+	export let slider_color: string;
+	export let show_fullscreen_button = true;
+	export let show_mute_button = true;
+	export let fullscreen = false;
+	export let interactive = true;
+	export let autoplay = false;
+	export let loop = false;
+	export let upload: Client["upload"];
+
+	const dispatch = createEventDispatcher<{
+		clear: void;
+		fullscreen: boolean;
+		load: { top: number; left: number; width: number; height: number };
+	}>();
+
+	// -----------------
+	// Internal State & Element References
+	// -----------------
+	let video1_el: HTMLVideoElement | undefined;
+	let video2_el: HTMLVideoElement | undefined;
+	let main_wrapper_el: HTMLDivElement | undefined;
+	let image_size = { top: 0, left: 0, width: 0, height: 0 };
+	let viewport_width = 0;
+	let resizeObserver: ResizeObserver | undefined;
+	/** Tracks the muted state for both videos. Starts true to allow autoplay. */
+	let isMuted = true;
+	/** A flag to prevent the main click handler from firing when interacting with overlay buttons. */
+	let isInteractingWithButtons = false;
+	/** A flag to ensure the dimension initialization logic runs only once. */
+	let is_initialized = false;
+
+	// -----------------
+	// Event Handlers
+	// -----------------
+
+	/** Toggles the muted state for both videos. */
+	function toggleMute(event: Event) {
+		event.stopPropagation();
+		isInteractingWithButtons = true;
+		if (video1_el && video2_el) {
+			isMuted = !isMuted;
+			video1_el.muted = isMuted;
+			video2_el.muted = isMuted;
+		}
+		setTimeout(() => (isInteractingWithButtons = false), 0);
+	}
+
+	/** Clears both videos and resets the slider position. */
+	function removeVideos(event: Event) {
+		event.stopPropagation();
+		isInteractingWithButtons = true;
+		value = [null, null];
+		position = 0.5;
+		dispatch("clear");
+		setTimeout(() => (isInteractingWithButtons = false), 0);
+	}
+
+	/** Toggles play/pause for both videos simultaneously. */
+	function toggle_playback(event: Event): void {
+		event.stopPropagation();
+		if (!video1_el || !video2_el) return;
+		const is_paused = video1_el.paused;
+		if (is_paused) {
+			video1_el.play().catch(() => {});
+			video2_el.play().catch(() => {});
+		} else {
+			video1_el.pause();
+			video2_el.pause();
+		}
+	}
+
+	/** Handles the fullscreen event from the button, resets position, and dispatches. */
+    function handle_fullscreen_toggle(event: CustomEvent<boolean>) {
+		position = 0.5; // We still want to reset the position
+		dispatch("fullscreen", event.detail);
+	}
+
+	/** Handles the load event from the Player component to update dimensions. */
+	function handle_video_load(event: CustomEvent) {
+		image_size = event.detail;
+		if (main_wrapper_el) {
+			viewport_width = main_wrapper_el.getBoundingClientRect().width;
+		}
+		position = 0.5;
+		dispatch("load", image_size);
+	}
+	
+	/** A utility function to constrain a value within a minimum and maximum range. */
+	function clamp(value: number, min: number, max: number): number {
+		return Math.min(Math.max(value, min), max);
+	}
+
+	/**
+	 * Calculates the clipped position of the slider based on the video's
+	 * dimensions and offset within the viewport.
+	 */
+	function get_coords_at_viewport(
+		viewport_percent_x: number,
+		viewportWidth: number,
+		video_width: number,
+		video_offset_x: number
+	): number {
+		const px_relative_to_video = viewport_percent_x * video_width;
+		const pixel_position = px_relative_to_video + video_offset_x;
+		const percent_position = pixel_position / viewportWidth;
+		return clamp(percent_position, 0, 1);
+	}
+
+	/**
+	 * Sets up a ResizeObserver to monitor the video and its container,
+	 * updating the `image_size` state whenever their dimensions change.
+	 */
+	function init_video(video: HTMLVideoElement | null, wrapper: HTMLDivElement | null): void {
+		if (!video || !wrapper) return;
+
+		resizeObserver?.disconnect();
+		const updateVideoDimensions = () => {
+			const rect = video.getBoundingClientRect();
+			const wrapperRect = wrapper.getBoundingClientRect();
+			image_size = {
+				top: rect.top - wrapperRect.top,
+				left: rect.left - wrapperRect.left,
+				width: rect.width || wrapperRect.width,
+				height: rect.height || wrapperRect.height
+			};
+			viewport_width = wrapperRect.width;
+			dispatch("load", image_size);
+		};
+
+		resizeObserver = new ResizeObserver(() => {
+			updateVideoDimensions();
+			position = 0.5;
+		});
+
+		video.addEventListener('loadedmetadata', updateVideoDimensions);
+		resizeObserver.observe(wrapper);
+		resizeObserver.observe(video);
+		updateVideoDimensions();
+	}
+
+	// -----------------
+	// Reactive Logic & Lifecycle
+	// -----------------
+
+	/** Calculates the coordinates for the CSS clip-path. */
+	$: coords_at_viewport = get_coords_at_viewport(
+		position,
+		viewport_width || 640,
+		image_size.width || viewport_width || 640,
+		image_size.left || 0
+	);
+	/** A reactive CSS style to create the "reveal" effect. */
+	$: style = `clip-path: inset(0 0 0 ${coords_at_viewport * 100}%)`;
+
+	/** Initializes the video dimension tracking once the necessary elements are available. */
+	$: if (main_wrapper_el && video1_el && !is_initialized) {
+		init_video(video1_el, main_wrapper_el);
+		is_initialized = true;
+	}
+
+	/** Synchronizes the state of the two videos (playback time and pause state). */
+	$: {
+		if (video1_el && autoplay && !video1_el.played.length) {
+			video1_el.play().catch(() => {});
+		}
+		if (video1_el && video2_el) {
+			if (Math.abs(video1_el.currentTime - video2_el.currentTime) > 0.1) {
+				video2_el.currentTime = video1_el.currentTime;
+			}
+			if (video1_el.paused !== video2_el.paused) {
+				if (video1_el.paused) {
+					video2_el.pause();
+				} else {
+					video2_el.play().catch(() => {});
+				}
+			}
+		}
+	}
+
+	/** On mount, sets initial state and cleans up the observer on destroy. */
+	onMount(() => {
+		position = 0.5;
+		if (video1_el) video1_el.muted = true;
+		if (video2_el) video2_el.muted = true;
+		return () => {
+			resizeObserver?.disconnect();
+		};
+	});
+</script>
+
+<BlockLabel {show_label} Icon={VideoIcon} label={label || "Video Slider"} />
+
+{#if value === null || value[0] === null || value[1] === null}
+	<Empty unpadded_box={true} size="large"><VideoIcon /></Empty>
+{:else}
+	<div class="video-container">
+		<div
+			class="icon-button-wrapper"
+			role="group"
+		>
+			<IconButtonWrapper>
+				{#if show_fullscreen_button}
+					<FullscreenButton 
+						bind:fullscreen
+						on:fullscreen={handle_fullscreen_toggle} 
+					/>
+				{/if}
+				{#if show_download_button && value[1]}
+					<DownloadLink href={value[1]?.url} download={value[1]?.orig_name || "video"}>
+						<IconButton Icon={Download} label={i18n("common.download")} />
+					</DownloadLink>
+				{/if}
+				{#if show_mute_button}
+					<div role="button" tabindex="0" on:mousedown|stopPropagation on:touchstart|stopPropagation>
+						<IconButton
+							Icon={isMuted ? VolumeMuted : VolumeHigh}
+							label={isMuted ? i18n("common.unmute") : i18n("common.mute")}
+							on:click={toggleMute}
+							on:keydown={(event) => {
+								if (event.key === "Enter" || event.key === " ") {
+									toggleMute(event);
+								}
+							}}
+						/>
+					</div>
+				{/if}
+				{#if interactive}
+					<div role="button" tabindex="0" on:mousedown|stopPropagation on:touchstart|stopPropagation>
+						<IconButton
+							Icon={Clear}
+							label="Remove Videos"
+							on:click={removeVideos}
+							on:keydown={(event) => {
+								if (event.key === "Enter" || event.key === " ") {
+									removeVideos(event);
+								}
+							}}
+						/>
+					</div>
+				{/if}
+			</IconButtonWrapper>
+		</div>
+
+		<div
+			class="main-wrapper"
+			bind:this={main_wrapper_el}
+			on:mousedown|stopPropagation={toggle_playback}
+			on:touchstart|stopPropagation={toggle_playback}
+			on:keydown={(event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					toggle_playback(event);
+				}
+			}}
+			role="button"
+			tabindex="0"
+		>
+			<Slider bind:position {slider_color} {image_size} disabled={isInteractingWithButtons} bind:parent_el={main_wrapper_el}>
+				<div class="player-wrapper">
+					{#if value[0]}
+						<Player
+							src={value[0].meta?._base64 || value[0].url}
+							bind:video_el={video1_el}
+							on:load={handle_video_load}
+							{loop}
+							muted={isMuted}
+							{i18n}
+							{upload}
+							mirror={false}
+							is_stream={value[0].is_stream}
+							interactive={false}
+							{fullscreen}
+						/>
+					{/if}
+				</div>
+				<div class="player-wrapper fixed" style={style}>
+					{#if value[1]}
+						<Player
+							src={value[1].meta?._base64 || value[1].url}
+							bind:video_el={video2_el}
+							{loop}
+							muted={isMuted}
+							{i18n}
+							{upload}
+							mirror={false}
+							is_stream={value[1].is_stream}
+							interactive={false}
+							{fullscreen}
+						/>
+					{/if}
+				</div>
+			</Slider>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.video-container {
+		height: 100%;
+		width: 100%;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		z-index: 1;
+	}
+	.main-wrapper {
+		user-select: none;
+		height: 100%;
+		width: 100%;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 2;
+	}
+	.player-wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 3;
+		pointer-events: none;
+	}
+	.player-wrapper.fixed {
+		background: var(--block-background-fill);
+		z-index: 4;
+	}
+	.player-wrapper :global(video) {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		z-index: 5;
+		pointer-events: none;
+	}
+	:global(.main-wrapper > .wrap) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 10;
+		cursor: default;
+	}
+	.icon-button-wrapper {
+		z-index: 1001; /* Above slider's z-index: 1000 */
+		pointer-events: auto;
+		position: absolute;
+		top: 10px;
+		right: 10px;
+	}
 </style>

src/pyproject.toml

@@ -8,12 +8,12 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_videoslider"
-version = "0.0.1"
+version = "0.0.2"
 description = "VideoSlider Component for Gradio"
 readme = "README.md"
 license = "apache-2.0"
 requires-python = ">=3.10"
-authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+authors = [{ name = "Eliseu Silva", email = "elismasilva@gmail.com" }]
 keywords = ["gradio-custom-component", "gradio-template-ImageSlider"]
 # Add dependencies here
 dependencies = ["gradio>=4.0,<6.0"]