siam-ui-utils 2.2.14 → 2.2.16

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.14",
+  "version": "2.2.16",
   "keywords": [
     "ampf-react",
     "ampf-utils",

package/src/App.jsx

@@ -11,8 +11,9 @@ import './index.css';
 import './App.css';
 import './assets/css/vendor/bootstrap.min.css';
 import { WhereByRoom } from './where-by-room';
-import ViewLayout from './view-layout';
-import CopyLink from './copy-link';
+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;
+}

package/src/view-layout/constants.js

@@ -4,4 +4,4 @@ export const GRID_SIZES = {
   lg: { cols: 6, rows: 6 },
 };
 
-export const VERSION = import.meta?.env?.REACT_APP_VERSION || 'TLBD';
+export const LOCALHOST = ['localhost', '127.0.0.1'];

package/src/view-layout/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, useState } from 'react';
 import SlotWrapper from './slot-wrapper';
 import { ItemSlot } from './item-slot';
 import EditorLayer from './editor-layer.jsx';
-import { GRID_SIZES, VERSION } from './constants';
+import { GRID_SIZES, LOCALHOST } from './constants';
 import ButtonEditor from './button-editor.jsx';
 import './styles.scss';
 
@@ -19,15 +19,18 @@ const ViewLayout: FC<LayoutProps> = ({
   size = 'md',
   alto = 80,
   ancho = 90,
+  server = window?.location?.hostname,
   ...props
 }) => {
-  const isVersionLetters = /^[A-Za-z]+$/.test(VERSION);
+  
+  const isLocalhost=LOCALHOST.includes(server);
+
   const [isEditorActivo, setEditorActivo] = useState(false);
   const gridCols = GRID_SIZES[size].cols;
   const gridRows = GRID_SIZES[size].rows;
   return (
     <div className="visualizador-container">
-      {isVersionLetters && (
+      {isLocalhost && (
         <ButtonEditor
           activo={isEditorActivo}
           onClick={() => setEditorActivo((prev) => !prev)}