siam-ui-utils 2.2.15 → 2.2.16

package/eslint.config.mjs

@@ -1,45 +1,45 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import pluginReact from 'eslint-plugin-react';
-import pluginReactHooks from 'eslint-plugin-react-hooks';
-import pluginReactRefresh from 'eslint-plugin-react-refresh';
-import { defineConfig } from 'eslint/config';
-
-export default defineConfig([
-  { ignores: ['build', '**/*.d.ts'] },
-  {
-    files: ['**/*.{js,jsx,ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      globals: globals.browser,
-      parserOptions: {
-        ecmaFeatures: { jsx: true },
-      },
-    },
-    parser: '@typescript-eslint/parser',
-    parserOptions: {
-      ecmaVersion: 'latest',
-    },
-    plugins: {
-      react: pluginReact,
-      'react-hooks': pluginReactHooks,
-      'react-refresh': pluginReactRefresh,
-    },
-    rules: {
-      ...js.configs.recommended.rules,
-      ...pluginReact.configs.recommended.rules,
-      ...pluginReact.configs['jsx-runtime'].rules,
-      ...pluginReactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'off',
-        { allowConstantExport: true },
-      ],
-      'react/prop-types': 'off',
-      '@/no-default-export': 'off',
-      'no-unused-vars': 'warn',
-    },
-    settings: { react: { version: 'detect' } },
-  },
-]);
+import js from '@eslint/js';
+import globals from 'globals';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import pluginReactRefresh from 'eslint-plugin-react-refresh';
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig([
+  { ignores: ['build', '**/*.d.ts'] },
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: globals.browser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+      ecmaVersion: 'latest',
+    },
+    plugins: {
+      react: pluginReact,
+      'react-hooks': pluginReactHooks,
+      'react-refresh': pluginReactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...pluginReact.configs.recommended.rules,
+      ...pluginReact.configs['jsx-runtime'].rules,
+      ...pluginReactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'off',
+        { allowConstantExport: true },
+      ],
+      'react/prop-types': 'off',
+      '@/no-default-export': 'off',
+      'no-unused-vars': 'warn',
+    },
+    settings: { react: { version: 'detect' } },
+  },
+]);

package/index.d.ts

@@ -88,4 +88,7 @@ declare module 'siam-ui-utils' {
 
   //VIEW LAYOUT
   export function ViewLayout(props);
+
+  //TIMER
+  export function Timer(props);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.2.15",
+  "version": "2.2.16",
   "keywords": [
     "ampf-react",
     "ampf-utils",

package/src/App.jsx

@@ -13,6 +13,7 @@ import './assets/css/vendor/bootstrap.min.css';
 import { WhereByRoom } from './where-by-room';
 import { ViewLayout } from './view-layout';
 import { CopyLink } from './copy-link';
+import Timer from './timer';
 
 const slots = [
   {
@@ -141,6 +142,12 @@ const App = () => {
             <ViewLayout slots={slots} />
           </AccordionBody>
         </AccordionItem>
+        <AccordionItem>
+          <AccordionHeader targetId="8">Timer</AccordionHeader>
+          <AccordionBody accordionId="8">
+            <Timer initialMinutes={2} active={true} />
+          </AccordionBody>
+        </AccordionItem>
       </Accordion>
     </div>
   );

package/src/index.js

@@ -9,3 +9,4 @@ export * as IntlMessages from './IntlMessages';
 export * from './where-by-room';
 export * from './copy-link';
 export * from './view-layout';
+export * from './timer';

package/src/timer/index.jsx

@@ -0,0 +1,59 @@
+import { useEffect, useState, useRef } from 'react';
+import './styles.scss';
+
+export const formatTiempo = (ms) => {
+  if (ms == null) return '--:--';
+  const absMs = Math.abs(ms);
+  const totalSec = Math.floor(absMs / 1000);
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  const formatted = `${min.toString().padStart(2, '0')}:${sec
+    .toString()
+    .padStart(2, '0')}`;
+  return ms < 0 ? `-${formatted}` : formatted;
+};
+
+const getTimerColorClass = (ms, maxTime) => {
+  if (!maxTime) return '';
+  const percent = ms / maxTime;
+  if (percent > 0.33) return 'timer-green';
+  if (percent > 0.15) return 'timer-yellow';
+  if (percent > 0) return 'timer-red';
+  if (ms === 0) return 'timer-out';
+  if (ms < 0) return 'timer-over';
+  return '';
+};
+
+const Timer = ({
+  initialMinutes = 0,
+  icon = true,
+  className = '',
+  active = true,
+}) => {
+  const initialMs = initialMinutes * 60 * 1000;
+  const [ms, setMs] = useState(initialMs);
+  const intervalRef = useRef();
+
+  useEffect(() => {
+    if (!active) return;
+    intervalRef.current = setInterval(() => {
+      setMs((prev) => prev - 1000);
+    }, 1000);
+    return () => clearInterval(intervalRef.current);
+  }, [active]);
+
+  useEffect(() => {
+    setMs(initialMs);
+  }, [initialMs]);
+
+  const timerColorClass = getTimerColorClass(ms, initialMs);
+
+  return (
+    <span className={`av-video-timer timer ${timerColorClass} ${className}`}>
+      {icon && <i className="icon-clock timer" />}
+      {formatTiempo(ms)}
+    </span>
+  );
+};
+
+export default Timer;

package/src/timer/styles.scss

@@ -0,0 +1,54 @@
+.av-video-timer {
+  color: inherit;
+  margin: 0 12px;
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  font-weight: bold;
+  align-items: center;
+  font-size: 1.3em;
+  width: 100%;
+  margin: 8px 0;
+}
+.timer {
+  font-size: clamp(5px, 2vw, 20px);
+  margin-right: 4px;
+}
+.timer-green {
+  color: #28a745;
+}
+.timer-yellow {
+  color: #ffc107;
+}
+.timer-red {
+  color: #bd0300;
+}
+
+@keyframes vibrate {
+  0% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-3px);
+  }
+  40% {
+    transform: translateX(3px);
+  }
+  60% {
+    transform: translateX(-3px);
+  }
+  80% {
+    transform: translateX(3px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.timer-out {
+  color: #000000;
+  animation: vibrate 0.3s linear infinite;
+}
+.timer-over {
+  color: #c00805;
+}