OptionsModal.tsx
| 1 | import { type Accessor, createEffect, createSignal, type Setter, on } from "solid-js"; |
| 2 | import type { AppOptions } from "../types"; |
| 3 | import "./OptionsModal.css"; |
| 4 | import Toastify from "toastify-js"; |
| 5 | import "toastify-js/src/toastify.css"; |
| 6 | |
| 7 | interface OptionsModalProps { |
| 8 | showOptions: Accessor<boolean>; |
| 9 | setShowOptions: Setter<boolean>; |
| 10 | options: Accessor<AppOptions>; |
| 11 | setOptions: (options: AppOptions) => void; |
| 12 | } |
| 13 | |
| 14 | export default function OptionsModal(props: OptionsModalProps) { |
| 15 | const [newOptions, setNewOptions] = createSignal<AppOptions>(props.options()); |
| 16 | let dialogElement!: HTMLDialogElement; |
| 17 | |
| 18 | createEffect( |
| 19 | on(props.showOptions, () => { |
| 20 | if (props.showOptions()) { |
| 21 | dialogElement.showModal(); |
| 22 | setNewOptions({ ...props.options() }); |
| 23 | } |
| 24 | }), |
| 25 | ); |
| 26 | |
| 27 | function handleSave() { |
| 28 | Toastify({ |
| 29 | text: "Saved changes", |
| 30 | duration: 2000, |
| 31 | close: true, |
| 32 | style: { background: "linear-gradient(135deg,rgb(38, 194, 27),rgb(5, 144, 52))" }, |
| 33 | }).showToast(); |
| 34 | props.setOptions(newOptions()); |
| 35 | handleClose(); |
| 36 | } |
| 37 | |
| 38 | function handleClose() { |
| 39 | dialogElement.close(); |
| 40 | props.setShowOptions(false); |
| 41 | } |
| 42 | |
| 43 | //TODO: add form elements |
| 44 | return ( |
| 45 | <dialog ref={dialogElement}> |
| 46 | <div class="option-content"> |
| 47 | <div class="option-title">Player Options</div> |
| 48 | <div> |
| 49 | <label for="transcoding-checkbox">Enable transcoding:</label> |
| 50 | <input |
| 51 | id="transcoding-checkbox" |
| 52 | type="checkbox" |
| 53 | checked={newOptions()?.enableTranscoding} |
| 54 | onChange={(e) => |
| 55 | setNewOptions({ |
| 56 | ...newOptions(), |
| 57 | enableTranscoding: e.target.checked, |
| 58 | }) |
| 59 | } |
| 60 | /> |
| 61 | </div> |
| 62 | <div> |
| 63 | <label for="bitrate-select">Bitrate:</label> |
| 64 | <select |
| 65 | id="bitrate-select" |
| 66 | value={newOptions()?.bitrate} |
| 67 | onChange={(e) => |
| 68 | setNewOptions({ |
| 69 | ...newOptions(), |
| 70 | bitrate: Number.parseInt(e.target.value), |
| 71 | }) |
| 72 | } |
| 73 | disabled={!newOptions()?.enableTranscoding} |
| 74 | > |
| 75 | <option value="64000">64 kbps</option> |
| 76 | <option value="96000">96 kbps</option> |
| 77 | <option value="128000">128 kbps</option> |
| 78 | <option value="192000">192 kbps</option> |
| 79 | <option value="320000">320 kbps</option> |
| 80 | </select> |
| 81 | </div> |
| 82 | <div class="option-buttons"> |
| 83 | <button type="button" onClick={handleSave}> |
| 84 | Save |
| 85 | </button> |
| 86 | <button type="button" class="cancel-button" onClick={handleClose}> |
| 87 | Cancel |
| 88 | </button> |
| 89 | </div> |
| 90 | </div> |
| 91 | </dialog> |
| 92 | ); |
| 93 | } |
| 94 |