Skip to content

Commit

Permalink
WIP change most of checkbox to toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sir-Thom
Sir-Thom committed Nov 17, 2023
1 parent 6c58ef2 commit e844ccf
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 40 deletions.
2 changes: 0 additions & 2 deletions src/views/serverSetting/ApiSetting.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { fadeIn } from "../../utils/animation/screenAnimation";
import Checkbox from "../../components/checkBox/checkBox";

import Toggle from "../../components/toggle/toggle";

export default function ApiSetting({ settings, onSave, patchSetting }) {
Expand Down
6 changes: 3 additions & 3 deletions src/views/serverSetting/RtmpSetting.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { fadeIn } from "../../utils/animation/screenAnimation";
import Checkbox from "../../components/checkBox/checkBox";
import Toggle from "../../components/toggle/toggle";

export default function RtmpSetting({ settings, onSave, patchSetting }) {
const [rtmp, setRtmp] = useState(settings.rtmp || true);
Expand Down Expand Up @@ -107,10 +107,10 @@ export default function RtmpSetting({ settings, onSave, patchSetting }) {
</div>
<div className="col-span-1">
<div className="flex flex-col">
<Checkbox
<Toggle
className="my-3"
value={rtmp.toString()}
checked={rtmp}
enabled={rtmp}
onChange={handleRtmp}
/>

Expand Down
24 changes: 12 additions & 12 deletions src/views/serverSetting/RtspSetting.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import Checkbox from "../../components/checkBox/checkBox";
import { fadeIn } from "../../utils/animation/screenAnimation";
import Toggle from "../../components/toggle/toggle";

export default function RtspSetting({ settings, onSave, patchSetting }) {
const [rtsp, setRtsp] = useState(settings.rtsp || true);
Expand Down Expand Up @@ -125,11 +125,11 @@ export default function RtspSetting({ settings, onSave, patchSetting }) {
<label className="mt-2">
RTSP Disable:
</label>
<label className="mt-5 mb-6">Protocols:</label>
<label className="mt-7 mb-2">
<label className="mt-5 mb-7">Protocols:</label>
<label className="mt-8 mb-3">
RTSP Encryption:
</label>
<label className="mt-4 mb-3">
<label className="mt-4 mb-4">
RTSP Address:
</label>
<label className="mt-5 mb-3">
Expand All @@ -152,27 +152,27 @@ export default function RtspSetting({ settings, onSave, patchSetting }) {
</div>
<div className="col-span-1">
<div className="flex flex-col">
<Checkbox
<Toggle
className="my-3"
value={rtsp.toString()}
checked={rtsp}
enabled={rtsp}
onChange={handleRtsp}
/>
<Checkbox
className="mt-3 mb-3"
<Toggle
className="mt-2 mb-3"
value={rtspDisable.toString()}
checked={rtspDisable}
enabled={rtspDisable}
onChange={handleRtspDisable}
/>
<textarea
className="mt-2 mb-2.5 pr-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
value={protocols}
onChange={handleProtocols}
/>
<Checkbox
className="my-2"
<Toggle
className="my-3"
value={encryption.toString()}
checked={encryption}
enabled={encryption}
onChange={handleEncryption}
/>
<input
Expand Down
8 changes: 4 additions & 4 deletions src/views/serverSetting/SrtSetting.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { fadeIn } from "../../utils/animation/screenAnimation";
import Checkbox from "../../components/checkBox/checkBox";
import Toggle from "../../components/toggle/toggle";

export default function SRTSetting({ settings, onSave, patchSetting }) {
const [srt, setSRT] = useState(Boolean(settings.srt));
Expand Down Expand Up @@ -46,16 +46,16 @@ export default function SRTSetting({ settings, onSave, patchSetting }) {
<div className="grid grid-cols-2 mt-6 content-between place-content-start gap-4">
<div className="col-span-1">
<div className="flex flex-col text-right items-end">
<label className="my-2">SRT:</label>
<label className="mt-2 mb-3">SRT:</label>
<label className="mt-5 mb-3">SRT Address:</label>
</div>
</div>
<div className="col-span-1">
<div className="flex flex-col">
<Checkbox
<Toggle
className=" mt-3 mb-3"
value={srt.toString()}
checked={srt}
enabled={srt}
onChange={handleSRTChange}
/>
<input
Expand Down
26 changes: 12 additions & 14 deletions src/views/serverSetting/hlsSetting.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { useEffect, useState } from "react";
import { motion } from "framer-motion";

import { fadeIn } from "../../utils/animation/screenAnimation";

import Checkbox from "../../components/checkBox/checkBox";
import Toggle from "../../components/toggle/toggle";

export default function HlsSetting({ settings, onSave, patchSetting }) {
const [hlsEnabled, setHlsEnabled] = useState(settings.hls || true);
Expand Down Expand Up @@ -216,10 +214,10 @@ export default function HlsSetting({ settings, onSave, patchSetting }) {
{/* Inputs column */}
<div className="col-span-1">
<div className="flex flex-col mb-10">
<Checkbox
<Toggle
className="my-2"
value={hlsEnabled.toString()}
checked={hlsEnabled}
enabled={hlsEnabled}
onChange={handleHlsEnabledChange}
/>
<input
Expand All @@ -236,13 +234,13 @@ export default function HlsSetting({ settings, onSave, patchSetting }) {
handleHlsAllowOriginChange
}
/>
<Checkbox
className="mt-3 mb-2"
<Toggle
className="mt-2 mb-2"
value={hlsAlwaysRemux.toString()}
onChange={
handleHlsAlwaysRemuxChange
}
checked={hlsAlwaysRemux}
enabled={hlsAlwaysRemux}
/>
<input
type="text"
Expand All @@ -251,17 +249,17 @@ export default function HlsSetting({ settings, onSave, patchSetting }) {
onChange={handleHlsDirectoryChange}
/>

<Checkbox
className="mt-3.5 mb-2"
<Toggle
className="mt-2.5 mb-2"
value={hlsDisable.toString()}
onChange={handleHlsDisableChange}
checked={hlsDisable}
enabled={hlsDisable}
/>
<Checkbox
className="mt-4 mb-2"
<Toggle
className="mt-2.5 mb-2"
value={hlsEncryption.toString()}
onChange={handleHlsEncryptionChange}
checked={hlsEncryption}
enabled={hlsEncryption}
/>
<input
type="text"
Expand Down
11 changes: 6 additions & 5 deletions src/views/serverSetting/webrtcSetting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { motion } from "framer-motion";
import { fadeIn } from "../../utils/animation/screenAnimation";
import Checkbox from "../../components/checkBox/checkBox";
import { ICEServer } from "../../interfaces/IServer";
import Toggle from "../../components/toggle/toggle";

export default function WebrtcSetting({ settings, onSave, patchSetting }) {
const [webrtc, setWebrtc] = useState(settings.webrtc || true);
Expand Down Expand Up @@ -216,7 +217,7 @@ export default function WebrtcSetting({ settings, onSave, patchSetting }) {
</div>
</form>*/}

<div className="grid place-content-start grid-cols-2 gap-6">
<div className="grid place-content-start grid-cols-2 gap-12">
<div className="col-span-1">
<div className="flex flex-col align-baseline text-justify items-end">
<label className="my-2">Webrtc:</label>
Expand Down Expand Up @@ -259,10 +260,10 @@ export default function WebrtcSetting({ settings, onSave, patchSetting }) {
</div>
<div className="flex flex-col space-y-4">
<div className="flex flex-col">
<Checkbox
<Toggle
className="my-3"
value={webrtc.toString()}
checked={webrtc}
enabled={webrtc}
onChange={handleWebrtc}
/>

Expand All @@ -272,10 +273,10 @@ export default function WebrtcSetting({ settings, onSave, patchSetting }) {
value={webrtcAddress}
onChange={handleWebrtcAddress}
/>
<Checkbox
<Toggle
className="my-3"
value={webrtcEncryption.toString()}
checked={webrtcEncryption}
enabled={webrtcEncryption}
onChange={handleWebrtcEncryption}
/>
<input
Expand Down

0 comments on commit e844ccf

Please sign in to comment.