Playback rate

package.json

@@ -14,7 +14,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@tauri-apps/cli": "^1.5.6",
+    "@tauri-apps/cli": "^1.5.8",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "autoprefixer": "^10.4.16",

src/components/main-view/Camera.tsx

@@ -3,6 +3,7 @@ import {
     endVideoEvent,
     isPlaying,
     ontimeupdateEvent,
+    playbackRate,
     setIsPlaying,
     startAt,
 } from "../../stores";
@@ -55,6 +56,21 @@ export function Camera(props: CameraProps) {
         }
     });
 
+    createEffect(() => {
+        const _playbackRate = playbackRate();
+
+        const videoElement = document.getElementById(
+            props.id
+        ) as HTMLVideoElement;
+
+        if (!videoElement) {
+            return;
+        }
+
+        videoElement.defaultPlaybackRate = _playbackRate;
+        videoElement.playbackRate = _playbackRate;
+    });
+
     // const handlePause = () => {
     //   console.log("pause");
     //   if (isPlaying()) {

src/components/main-view/Timelime.tsx

@@ -9,11 +9,13 @@ import {
     selectedOccurrence,
     selectedOccurrenceFiles,
     setChangeCurrentTime,
+    setPlaybackRate,
     setFilesByOccurrences,
     setIsPlaying,
     setSelectedOccurrence,
+    playbackRate,
 } from "../../stores";
-import { Button } from "../../ui";
+import { Button, Dropdown } from "../../ui";
 import timelineStyles from "./Timelime.module.css";
 import { tauri } from "../../utils";
 
@@ -188,7 +190,10 @@ export function Timeline() {
     return (
         <div class="h-16 p-2 flex w-full gap-2">
             <div class="flex">
-                <Button onClick={() => setIsPlaying((playing) => !playing)}>
+                <Button
+                    onClick={() => setIsPlaying((playing) => !playing)}
+                    class="bg-transparent dark:bg-transparent"
+                >
                     <i
                         class={
                             "mx-2 fa-solid fa-fw " +
@@ -197,6 +202,24 @@ export function Timeline() {
                     />
                 </Button>
             </div>
+            <div class="flex">
+                <Dropdown
+                    class="bg-transparent dark:bg-transparent"
+                    options={[
+                        { label: "x0.5", value: "0.5" },
+                        { label: "x0.75", value: "0.75" },
+                        { label: "x1", value: "1" },
+                        { label: "x1.25", value: "1.25" },
+                        { label: "x1.5", value: "1.5" },
+                        { label: "x2", value: "2" },
+                        { label: "x4", value: "4" },
+                    ]}
+                    value={String(playbackRate())}
+                    onSelect={(value) =>
+                        setPlaybackRate(parseFloat(value.value))
+                    }
+                />
+            </div>
             <div
                 class="flex-grow overflow-hidden relative"
                 onMouseDown={onMouseDown}

src/components/navbar/Navbar.tsx

@@ -21,7 +21,7 @@ export function Navbar() {
 
     return (
         <div class="h-16 p-2 flex w-full items-center gap-2">
-            <Button onClick={toggleSidebar}>
+            <Button onClick={toggleSidebar} class="bg-transparent dark:bg-transparent">
                 <i class="mx-2 fa-solid fa-fw fa-bars" />
             </Button>
             <div class="flex">

src/components/sidebar/Header.tsx

@@ -15,7 +15,7 @@ export function SidebarHeader() {
     return (
         <div class="flex w-full truncate">
             <div class="flex grow items-center">
-                <Button onClick={toggleSidebar} class="dark:bg-white">
+                <Button onClick={toggleSidebar} class="bg-transparent dark:bg-transparent">
                     <i class="mx-2 fa-solid fa-fw fa-bars" />
                 </Button>
             </div>

src/stores/occurrences.store.ts

@@ -51,6 +51,8 @@ export const [selectedOccurrence, setSelectedOccurrence] =
 
 export const [currentTime, setCurrentTime] = createSignal<number>(0);
 export const [isPlaying, setIsPlaying] = createSignal<boolean>(false);
+export const [playbackRate, setPlaybackRate] =
+    createSignal<number>(1);
 
 createEffect(() => {
     // on select occurence auto play the video

src/ui/Button.tsx

@@ -20,7 +20,8 @@ export function Button(props: ButtonProps) {
         "hover:bg-slate-300 " +
         "dark:hover:bg-slate-600 " +
         "focus:outline-none focus:bg-slate-400 active:bg-slate-400 " +
-        "dark:focus:bg-slate-500 dark:active:bg-slate-500 "
+        "dark:focus:bg-slate-500 dark:active:bg-slate-500 " +
+        props.class || ""
       }
       onClick={onClick}
     >

src/ui/Dropdown.tsx

@@ -0,0 +1,61 @@
+import { For, createSignal } from "solid-js";
+import { uuidv4 } from "../utils";
+import Button from "./Button";
+
+interface Option {
+    label: string;
+    value: string;
+}
+
+interface DropdownProps {
+    value: string;
+    placeholder?: string;
+    options: Option[];
+    class?: string;
+    onSelect?: (value: Option) => void;
+}
+
+export function Dropdown(props: DropdownProps) {
+    const uuid = uuidv4();
+
+    const [selected, setSelected] = createSignal<Option | undefined>(undefined);
+
+    const onSelect = (e: Event) => {
+        const target = e.target as HTMLSelectElement;
+        const selectedOption = props.options.find(
+            (option) => option.value === target.value
+        );
+
+        if (!selectedOption) {
+            return;
+        }
+
+        setSelected(selectedOption);
+        props.onSelect && props.onSelect(selectedOption);
+    };
+
+    return (
+        <>
+            <Button class={"relative w-14 " + props.class || ""}>
+                {selected()?.label ||
+                    props.value ||
+                    props.placeholder ||
+                    "Select"}
+                <select
+                    id={uuid}
+                    class="opacity-0 absolute top-0 left-0 w-full h-full cursor-pointer"
+                    onChange={(e) => onSelect(e)}
+                    value={props.value}
+                >
+                    <For each={props.options}>
+                        {(option) => (
+                            <option value={option.value}>{option.label}</option>
+                        )}
+                    </For>
+                </select>
+            </Button>
+        </>
+    );
+}
+
+export default Dropdown;

src/ui/index.tsx

@@ -1,2 +1,2 @@
-
-export * from './Button';
+export * from "./Button";
+export * from "./Dropdown";