WIP new style for setting (started in webrtc)

Sir-Thom · Nov 21, 2023 · 6b137c1 · 6b137c1
1 parent b1d254c
commit 6b137c1
Show file tree

Hide file tree

Showing 9 changed files with 323 additions and 358 deletions.
diff --git a/src/components/notification/notification.tsx b/src/components/notification/notification.tsx
@@ -0,0 +1,98 @@
+import { Fragment, useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Transition } from '@headlessui/react';
+import { BiSolidErrorAlt, BiCheck, BiInfoCircle } from 'react-icons/bi';
+import { XMarkIcon } from '@heroicons/react/20/solid'
+import { toastAnimationAppear } from '../../utils/animation/toastAnimation';
+export default function Notification({  onDismiss, timer, type, message })  {
+    const [show, setShow] = useState(true);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      dismissToast();
+    }, timer);
+
+    return () => clearTimeout(timeout);
+  }, [timer]);
+
+  const dismissToast = () => {
+    setShow(false);
+    setTimeout(() => {
+      onDismiss();
+    }, 300);
+  };
+
+  const getIcon = () => {
+    switch (type) {
+      case 'error':
+        return <BiSolidErrorAlt className="h-6 w-6 " aria-hidden="true" />;
+      case 'success':
+        return <BiCheck className="h-6 w-6 text-white" aria-hidden="true" />;
+      case 'info':
+        return <BiInfoCircle className="h-6 w-6 text-white" aria-hidden="true" />;
+      default:
+        return null;
+    }
+  };
+
+  const getToastClassName = () => {
+    switch (type) {
+      case 'error':
+        return 'bg-red-700 text-white';
+      case 'success':
+        return 'bg-green-700 text-white'; // Assuming you have a success class
+      case 'info':
+        return 'bg-blue-700 text-white';
+      default:
+        return 'bg-gray-700 text-white';
+    }
+  };
+
+  return (
+
+    <motion.div 
+      initial={"hidden"}
+      animate={"visible"}
+      exit={"exit"}
+      variants={toastAnimationAppear}
+      >
+
+
+
+
+    <Transition
+      show={show}
+      as={Fragment}
+      enter="transform ease-out duration-300 transition"
+      enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+      enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+      leave="transition ease-in duration-100"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <div className={`pointer-events-auto  fixed bottom-20 right-4 z-50 w-full max-w-sm overflow-hidden rounded-lg ${getToastClassName()}`}>
+        <div className="p-4">
+          <div className="flex items-start">
+            <div className="flex-shrink-0">{getIcon()}</div>
+            <div className="ml-3 w-0 flex-1 pt-0.5">
+              <p className="text-sm font-medium ">{message}</p>
+            </div>
+            <div className="ml-4 flex flex-shrink-0">
+              <button
+                type="button"
+                className="inline-flex rounded-md  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                onClick={dismissToast}
+              >
+                <span className="sr-only">Close</span>
+                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+    </motion.div>
+
+
+  );
+};
+
diff --git a/src/components/sideMenu/sideMenu.tsx b/src/components/sideMenu/sideMenu.tsx
@@ -18,7 +18,7 @@ const SideMenu: React.FC<SideMenuProps> = ({ menuItems, onMenuItemClick }) => {
     };
 
     return (
-        <div className="bg-gray-800  h-full min-h-screen shadow-sm shadow-gray-700 w-72 overflow-y-auto flex flex-col">
+        <div className="bg-gray-800  fixed h-full min-h-screen shadow-sm shadow-gray-700 w-72 overflow-y-auto flex flex-col">
             <div className="flex h-24 dark:bg-window-dark-800 bg-window-light-50 justify-start items-center">
                 <Link
                     className="flex justify-center items-center mx-1 w-8 mt-12 dark:text-text-dark text-text-light rounded-full hover:dark:bg-window-dark-600 hover:bg-window-light-600"
@@ -31,7 +31,6 @@ const SideMenu: React.FC<SideMenuProps> = ({ menuItems, onMenuItemClick }) => {
                 </Link>
             </div>
             <ul className="pl-2 flex-1">
-                {" "}
                 {/* Use flex-1 to make this part flexible */}
                 {menuItems.map((menuItem, index) => (
                     <li key={index} className="my-2 mx-2">

diff --git a/src/components/toast/Toast.tsx b/src/components/toast/Toast.tsx
diff --git a/src/components/videoPlayer/videoPlayer.tsx b/src/components/videoPlayer/videoPlayer.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import ReactPlayer from "react-player";
 import { useWindowDimensions } from "../../utils/WindowSize";
-import Toast from "../toast/Toast";
+import Toast from "../notification/notification";
 import { IVideoPlayer } from "../../interfaces/IVideoPlayer";
 import StreamPlaceholder from "./placeholderStream";
 import { invoke } from "@tauri-apps/api";

diff --git a/src/views/Server.tsx b/src/views/Server.tsx
@@ -5,7 +5,8 @@ import { createPortal } from "react-dom";
 import Titlebar from "../components/titlebar/titlebar";
 import RtmpConnInfo from "./ServerInfoView/RtmpServerInfo";
 import HLsConnInfo from "./ServerInfoView/HlsServerInfo";
-import Toast from "../components/toast/Toast";
+import Notification from "../components/notification/notification";
+
 export default function ServerInfo() {
     const [error, setError] = useState<string | null>(null);
     const [currentSetting, setCurrentSetting] = useState("RTSP"); // Initially show the "API Setting" component
@@ -18,7 +19,7 @@ export default function ServerInfo() {
         { label: "SRT" }
     ].sort((a, b) => a.label.localeCompare(b.label));
 
-    function handleDismissErrorToast() {
+    function handleDismissErrorNotification() {
         setError(null);
     }
 
@@ -45,16 +46,21 @@ export default function ServerInfo() {
                         <div className="mx-auto mt-24">
                             {currentSetting === "HLS" && <HLsConnInfo />}
                         </div>
-                        {error && (
-                            <Toast
+
+                    </div>
+
+                </div>
+                {error && (
+
+                            <Notification
                                 message={error}
                                 timer={5000}
                                 type={"error"}
-                                onDismiss={handleDismissErrorToast}
+                                onDismiss={handleDismissErrorNotification}
                             />
+
                         )}
-                    </div>
-                </div>
+
             </div>
         </>
     );

diff --git a/src/views/Settings.tsx b/src/views/Settings.tsx
@@ -20,7 +20,7 @@ import {
     IRecordSettings
 } from "../interfaces/IServer";
 import SideMenu from "../components/sideMenu/sideMenu";
-import Toast from "../components/toast/Toast";
+import Notification from "../components/notification/notification";
 import SrtSetting from "./serverSetting/SrtSetting";
 import SuccessAlert from "../components/alert/sucessAlert";
 import RecordSetting from "./serverSetting/RecordSetting";
@@ -363,7 +363,7 @@ export default function Setting() {
                             }
                         />
                     </div>
-                    <div className="w-3/4 mx-auto mt-4 mr-56">
+                    <div className="w-3/4 mx-auto mt-4 ">
                         <div className="mx-auto z-auto mt-24">
                             {successMessage && (
                                 <SuccessAlert
@@ -457,16 +457,18 @@ export default function Setting() {
                             )}
                         </div>
                     </div>
+
                 </div>
-                {error && (
-                    <Toast
-                        message={error}
-                        timer={5000}
-                        type={"error"}
-                        onDismiss={handleDismissErrorToast}
-                    />
-                )}
+
             </div>
+            {error && (
+                            <Notification
+                                message={error}
+                                timer={5000}
+                                type={"error"}
+                                onDismiss={handleDismissErrorToast}
+                            />
+                        )}
         </>
     );
 }
diff --git a/src/views/appSetting/appSetting.tsx b/src/views/appSetting/appSetting.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
-import Toast from"../../components/toast/Toast";
+import Toast from"../../components/notification/notification";
 import Dropdown from "../../components/dropdowns/dropdown";
 import { invoke } from "@tauri-apps/api";
 import SuccessAlert from "../../components/alert/sucessAlert";

diff --git a/src/views/serverSetting/RecordSetting.tsx b/src/views/serverSetting/RecordSetting.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import { fadeIn } from "../../utils/animation/screenAnimation";
-import Toast from "../../components/toast/Toast";
+import Toast from "../../components/notification/notification";
 import Toggle from "../../components/toggle/toggle";
 
 export default function RecordSetting({ settings, onSave, patchSetting }) {