diff --git a/package.json b/package.json
index 7bf684f..b84c722 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "The electronjs application launcher",
   "keywords": [],
   "main": "./main.js",
-  "version": "1.2.5",
+  "version": "1.2.8",
   "author": "melser",
   "scripts": {
     "start": "electron ./src",
diff --git a/src/package.json b/src/package.json
index 3efa9e2..0311e00 100644
--- a/src/package.json
+++ b/src/package.json
@@ -8,7 +8,7 @@
     "url": "https://github.com/nglmercer/multiztream-live"
   },
   "main": "./main.js",
-  "version": "1.2.5",
+  "version": "1.2.8",
   "devDependencies": {
     "electron": "31.4.0"
   },
diff --git a/src/public/assets/styles.css b/src/public/assets/styles.css
index 27b9de5..fc0fe65 100644
--- a/src/public/assets/styles.css
+++ b/src/public/assets/styles.css
@@ -234,9 +234,15 @@ button {
 }
 
 
-.chat1 { grid-area: 1 / 1 / 5 / 4;  }
-.gift2 { grid-area: 1 / 4 / 5 / 7; }
-.events3 { grid-area: 5 / 1 / 7 / 7; }
+.chat1 { grid-area: 1 / 1 / 5 / 4;
+  resize: vertical;
+}
+.gift2 { grid-area: 1 / 4 / 5 / 7;
+  resize: vertical;
+}
+.events3 { grid-area: 5 / 1 / 7 / 7;
+  resize: vertical;
+}
 @media (max-width: 680px) {
   .LiveContainer {
       grid-template-columns: 1fr; /* Cambia a una sola columna */
diff --git a/src/public/components/renderhtml.js b/src/public/components/renderhtml.js
deleted file mode 100644
index 6b1f112..0000000
--- a/src/public/components/renderhtml.js
+++ /dev/null
@@ -1,60 +0,0 @@
-class GiftElementsManager {
-    constructor(items, config = {}) {
-        this.items = items;
-        this.defaultConfig = {
-            containerClass: 'default-container',
-            itemClass: 'default-item',
-            imageClass: 'default-image',
-            labelClass: 'default-label',
-            ...config
-        };
-    }
-
-    createSingleElement(item, customCallback, additionalClass = '') {
-        const container = document.createElement('div');
-        container.className = `${this.defaultConfig.itemClass} ${additionalClass}`.trim();
-
-        const image = document.createElement('img');
-        image.src = item.image;
-        image.alt = item.label;
-        image.className = this.defaultConfig.imageClass;
-
-        const label = document.createElement('span');
-        label.textContent = item.label;
-        label.className = this.defaultConfig.labelClass;
-
-        const price = document.createElement('span');
-        price.textContent = `${item.value}`;
-        price.className = 'default-price';
-
-        container.appendChild(image);
-        container.appendChild(label);
-        container.appendChild(price);
-
-        if (customCallback) {
-            container.addEventListener('click', () => customCallback(item));
-        }
-
-        return container;
-    }
-
-    renderToElement(containerId, callback, additionalClass = '') {
-        const container = document.getElementById(containerId);
-        if (!container) {
-            throw new Error(`No se encontró el elemento con id: ${containerId}`);
-        }
-
-        const wrapper = document.createElement('div');
-        wrapper.className = this.defaultConfig.containerClass;
-
-        this.items.forEach(item => {
-            const element = this.createSingleElement(item, callback, additionalClass);
-            wrapper.appendChild(element);
-        });
-
-        container.appendChild(wrapper);
-        return wrapper;
-    }
-}
-
-export { GiftElementsManager };
\ No newline at end of file
diff --git a/src/public/features/Editdatatable.js b/src/public/features/Editdatatable.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/public/index2.html b/src/public/index2.html
deleted file mode 100644
index b48509e..0000000
--- a/src/public/index2.html
+++ /dev/null
@@ -1,422 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="./styles.css">
-    <!-- a;anidmos tailwind css -->
-     <script src="https://cdn.tailwindcss.com"></script>
-     <script src="https://cdn.socket.io/4.8.1/socket.io.min.js" integrity="sha384-mkQ3/7FUtcGyoppY6bz/PORYoGqOl7/aSUMn2ymDOJcapfS6PHqxhRTMh1RR0Q6+" crossorigin="anonymous"></script>    <script src="https://cdn.tailwindcss.com"></script>
-    <title>Donation Alerts Overlay</title>
-    <style>
-      body,html {
-        background-color: transparent;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app" class="h-100dvh w-100dvw"></div>
-    <script type="module" src="./webcomponents/webc.js"></script>
-
-    <script>
-      const themes = {
-      default: {
-        container: 'bg-gray-900/95 rounded-2xl p-6 shadow-xl',
-        text: 'text-xl font-semibold text-gray-100',
-        media: 'rounded-lg max-w-full',
-        animation: 'slide-fade',
-        layout: 'flex-col',
-        textAnimation: 'text-pop'
-      },
-      neon: {
-        container: 'bg-purple-900/90 rounded-xl p-6 shadow-[0_0_15px_rgba(147,51,234,0.5)] border border-purple-500',
-        text: 'text-xl font-bold text-purple-100 drop-shadow-[0_0_5px_rgba(147,51,234,0.5)]',
-        media: 'rounded-lg max-w-full border-2 border-purple-500',
-        animation: 'bounce-fade',
-        layout: 'flex-col-reverse',
-        textAnimation: 'text-wave'
-      },
-      minimal: {
-        container: 'bg-white/95 rounded-md p-4 shadow-sm',
-        text: 'text-lg font-medium text-gray-800',
-        media: 'rounded-md max-w-full',
-        animation: 'slide-simple',
-        layout: 'flex-row',
-        textAnimation: 'text-pop'
-      },
-      gaming: {
-        container: 'bg-red-600/95 rounded-3xl p-6 shadow-2xl border-2 border-yellow-400',
-        text: 'text-2xl font-black text-yellow-300 uppercase',
-        media: 'rounded-xl max-w-full border-2 border-yellow-400',
-        animation: 'shake-fade',
-        layout: 'flex-row-reverse',
-        textAnimation: 'text-glitch'
-      },
-      retro: {
-        container: 'bg-green-900/90 rounded-none p-6 border-4 border-green-400',
-        text: 'text-2xl font-mono text-green-400',
-        media: 'rounded-none border-4 border-green-400 max-w-full',
-        animation: 'slide-fade',
-        layout: 'flex-col',
-        textAnimation: 'text-rotate'
-      }
-    };
-    const animations = {
-    'slide-fade': {
-      enter: 'slideIn 2s ease-out, fadeIn 2s ease-out',
-      exit: 'slideOut 2s ease-in, fadeOut 2s ease-in'
-    },
-    'bounce-fade': {
-      enter: 'bounceIn 2s cubic-bezier(0.36, 0, 0.66, -0.56), fadeIn 2s ease-out',
-      exit: 'bounceOut 2s cubic-bezier(0.34, 1.56, 0.64, 1), fadeOut 2s ease-in'
-    },
-    'slide-simple': {
-      enter: 'slideIn 2s ease-out',
-      exit: 'slideOut 2s ease-in'
-    },
-    'shake-fade': {
-      enter: 'shakeIn 0.8s ease-out, fadeIn 2s ease-out',
-      exit: 'shakeOut 0.8s ease-in, fadeOut 2s ease-in'
-    }
-  };
-
-class DonationAlert extends HTMLElement {
-    constructor() {
-      super();
-      this.attachShadow({ mode: 'open' });
-      this._theme = 'default';
-    }
-  
-    static get observedAttributes() {
-      return ['theme'];
-    }
-  
-    attributeChangedCallback(name, oldValue, newValue) {
-      if (name === 'theme' && oldValue !== newValue) {
-        this._theme = newValue;
-        this.render();
-      }
-    }
-  
-    set alert(value) {
-      this._alert = value;
-      this.render();
-    }
-  
-    get alert() {
-      return this._alert;
-    }
-  
-    set theme(value) {
-      if (themes[value]) {
-        this.setAttribute('theme', value);
-      }
-    }
-  
-    get theme() {
-      return this._theme;
-    }
-  
-    connectedCallback() {
-      const animation = animations[themes[this._theme].animation];
-      this.style.animation = animation.enter;
-    }
-  
-    disconnectedCallback() {
-      const animation = animations[themes[this._theme].animation];
-      this.style.animation = animation.exit;
-    }
-  
-    animateText(text, animationClass) {
-      return text.split('').map((char, i) => 
-        char === ' ' 
-          ? ' '
-          : `<span class="text-animation ${animationClass}" style="animation-delay: ${i * 0.05}s">${char}</span>`
-      ).join('');
-    }
-  
-    renderMediaGrid(items, type, theme) {
-      const isVideo = type === 'video';
-      const columns = Math.min(items.length, 2);
-  
-      return `
-        <div class="media-grid columns-${columns}">
-          ${items.map(src => {
-            const sanitizedSrc = src.startsWith('http') ? src : `/media/${src}`;
-            return isVideo ? `
-              <video autoplay loop muted class="media-item">
-                <source src="${sanitizedSrc}" type="video/mp4">
-              </video>
-            ` : `
-              <img src="${sanitizedSrc}" alt="Donation media" class="media-item" />
-            `;
-          }).join('')}
-        </div>
-      `;
-    }
-    getallTypesrender(){
-        return ['multi-image','video-grid','image-grid','video-image','image','video','text']
-    }
-    renderContent(alert, theme) {
-        let mediaprefix = "/media/";
-        if(alert.image && alert.image.startsWith("http") || alert.video && alert.video.startsWith("http")){
-            mediaprefix = "";
-        }
-      switch (alert.type) {
-        case 'multi-image':
-          const sanitizedImages = alert.images.map(img => 
-            img.startsWith('http') ? img : `/media/${img}`
-          );
-          return this.renderMediaGrid(sanitizedImages, 'image', theme);
-        case 'video-grid':
-          const sanitizedVideos = alert.videos.map(video => 
-            video.startsWith('http') ? video : `/media/${video}`
-          );
-          return this.renderMediaGrid(sanitizedVideos, 'video', theme);
-        case 'image-grid':
-          const sanitizedGridImages = alert.images.map(img => 
-            img.startsWith('http') ? img : `/media/${img}`
-          );
-          return this.renderMediaGrid(sanitizedGridImages, 'image', theme);
-        case 'video-image':
-          const videoSrc = alert.video.startsWith('http') ? alert.video : `/media/${alert.video}`;
-          const imageSrc = alert.image.startsWith('http') ? alert.image : `/media/${alert.image}`;
-          return `
-            <div class="media-combo">
-              <video autoplay loop muted class="media-item">
-                <source src="${videoSrc}" type="video/mp4">
-              </video>
-              <img src="${imageSrc}" alt="Donation media" class="media-item" />
-            </div>
-          `;
-        case 'image':
-          const imgSrc = alert.content.startsWith('http') ? alert.content : `/media/${alert.content}`;
-          return `<img src="${imgSrc}" alt="Donation alert" class="media-item" />`;
-        case 'video':
-          const vidSrc = alert.content.startsWith('http') ? alert.content : `/media/${alert.content}`;
-          return `
-            <video autoplay loop muted class="media-item">
-              <source src="${vidSrc}" type="video/mp4">
-            </video>
-          `;
-        case 'text':
-        default:
-          return `<div class="text-content">${this.animateText(alert.content, theme.textAnimation)}</div>`;
-      }
-    }
-    render() {
-      const alert = this._alert;
-      if (!alert) return;
-  
-      const theme = themes[this._theme];
-  
-      this.shadowRoot.innerHTML = /*html*/`
-        <style>
-          :host {
-            display: flex;
-            position: fixed;
-            align-items: center;
-            justify-content: center;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: 1000;
-            pointer-events: none;
-          }
-        * {
-          transition: all 0.2s ease-in-out;
-        }
-          .alert-container {
-            max-width: 90dvw;
-            margin: 0 auto;
-            padding: 1.5rem;
-            border-radius: 1rem;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            background: ${theme.container.background || 'rgba(17, 24, 39, 0.95)'};
-            border: ${theme.container.border || 'none'};
-          }
-  
-          .content {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            flex-direction: ${theme.layout.replace('flex-', '')};
-          }
-  
-          .text-content {
-            font-size: ${theme.text.size || '1.25rem'};
-            font-weight: ${theme.text.weight || '600'};
-            color: ${theme.text.color || '#f3f4f6'};
-            font-family: ${theme.text.family || 'system-ui, -apple-system, sans-serif'};
-          }
-  
-          .media-item {
-            max-width: 90%;
-            border-radius: ${theme.media.borderRadius || '0.5rem'};
-            border: ${theme.media.border || 'none'};
-          }
-  
-          .media-grid {
-            display: grid;
-            gap: 0.5rem;
-          }
-  
-          .columns-2 {
-            grid-template-columns: repeat(2, 1fr);
-          }
-  
-          .media-combo {
-            display: flex;
-            gap: 0.5rem;
-          }
-  
-          .media-combo .media-item {
-            width: 50%;
-          }
-  
-          .text-animation {
-            display: inline-block;
-          }
-  
-          /* Animation classes from style.css */
-          @keyframes popIn {
-            0% { transform: scale(0); opacity: 0; }
-            70% { transform: scale(1.2); opacity: 0.7; }
-            100% { transform: scale(1); opacity: 1; }
-          }
-  
-          @keyframes waveY {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-10px); }
-          }
-  
-          @keyframes rotate {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-          }
-  
-          @keyframes glitch {
-            0% { transform: translate(0); }
-            20% { transform: translate(-2px, 2px); }
-            40% { transform: translate(-2px, -2px); }
-            60% { transform: translate(2px, 2px); }
-            80% { transform: translate(2px, -2px); }
-            100% { transform: translate(0); }
-          }
-  
-          .text-pop { animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
-          .text-wave { animation: waveY 2s ease-in-out infinite; }
-          .text-rotate { animation: rotate 2s linear infinite; }
-          .text-glitch { animation: glitch 0.3s linear infinite; }
-        </style>
-  
-        <div class="alert-container">
-          <div class="content">
-            ${this.renderContent(alert, theme)}
-            ${alert.text ? `<div class="text-content">${this.animateText(alert.text, theme.textAnimation)}</div>` : ''}
-          </div>
-        </div>
-      `;
-    }
-  }
-
-  customElements.define('donation-alert', DonationAlert);
-    const socket = io();
-    socket.emit('join-room', 'sala1');
-    socket.on('user-joined', ({ userId, usersCount }) => {
-      console.log(`Usuario ${userId} se unió. Total usuarios: ${usersCount}`);
-    });
-
-    socket.on('user-left', ({ userId, usersCount }) => {
-      console.log(`Usuario ${userId} salió. Total usuarios: ${usersCount}`);
-    });
-    // Enhanced alerts data with more media combinations
-    const alerts = [
-      {
-        type: 'text',
-        content: 'John Doe donated $50! Thank you!',
-        duration: 5000
-      },
-      {
-        type: 'multi-image',
-        images: [
-          'https://picsum.photos/200/200',
-          'https://picsum.photos/201/200',
-          'https://picsum.photos/200/201'
-        ],
-        text: 'Amazing triple donation from our top supporters!',
-        duration: 8000
-      },
-      {
-        type: 'video-image',
-        video: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        image: 'https://picsum.photos/200/200',
-        text: 'SuperFan123 with the mega combo donation!',
-        duration: 10000
-      },
-      {
-        type: 'image-grid',
-        images: [
-          'https://picsum.photos/150/150',
-          'https://picsum.photos/151/150',
-          'https://picsum.photos/150/151',
-          'https://picsum.photos/151/151'
-        ],
-        text: 'Squad donation achieved! Thank you team!',
-        duration: 7000
-      },
-      {
-        type: 'video-grid',
-        videos: [
-          'https://www.w3schools.com/html/mov_bbb.mp4',
-          'https://www.w3schools.com/html/mov_bbb.mp4'
-        ],
-        text: 'Double feature donation! You\'re amazing!',
-        duration: 9000
-      }
-    ];
-    // ['multi-image','video-grid','image-grid','video-image','image','video','text']
-    let currentIndex = 0;
-    const themeNames = Object.keys(themes);
-    console.log(themes,themeNames)
-    function showNextAlert(currentTheme = 'default') {
-      const alertContainer = document.createElement('donation-alert');
-      alertContainer.theme = currentTheme;
-      alertContainer.alert = alerts[currentIndex];
-      console.log(alerts[currentIndex])
-      document.querySelector('#app').appendChild(alertContainer);
-      
-      setTimeout(() => {
-        alertContainer.remove();
-        currentIndex = (currentIndex + 1) % alerts.length;
-        // Change theme every two alerts
-        if (currentIndex % 2 === 0) {
-          currentTheme = themeNames[(themeNames.indexOf(currentTheme) + 1) % themeNames.length];
-        }
-        setTimeout(showNextAlert, 5000); // 2 second gap between alerts
-      }, alerts[currentIndex].duration);
-    }
-
-
-    //showNextAlert();
-    function createOverlay(config, currentTheme = 'neon') {
-      if (!config ||!config.type || !config.content && !config.duration) return;
-      const alertContainer = document.createElement('donation-alert');
-      alertContainer.theme = currentTheme;
-      alertContainer.alert = config;
-      document.querySelector('#app').appendChild(alertContainer);
-      setTimeout(() => {
-        alertContainer.remove();
-      }, 15000);//config.duration 
-    }
-    const testevent = alerts[3];
-    createOverlay(testevent,'neon');
-    console.log(testevent);
-    socket.on('create-overlay', (config) => {
-      console.log('create-window', config);
-      createOverlay(config);
-    });
-    </script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/src/public/overlay/overlay.html b/src/public/overlay/overlay.html
deleted file mode 100644
index 5c7f69f..0000000
--- a/src/public/overlay/overlay.html
+++ /dev/null
@@ -1,290 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Overlay</title>
-    <style>
-        body {
-            margin: 0;
-            background-color: rgba(0, 0, 255, 0);
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-        }
-        .overlay {
-            position: absolute;
-        }
-        .overlay-image {
-            box-sizing: content-box;
-            height: auto;
-            width: 100%;
-            max-width: 100px;
-            max-height: 100px;
-        }
-        .overlay-video, .overlay-canvas {
-            box-sizing: content-box;
-            height: auto;
-            width: 100%;
-            max-width: 400px;
-            max-height: 400px;
-        }
-    </style>
-</head>
-<body>
-    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js" integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO" crossorigin="anonymous"></script>
-    <div id="container"></div>
-    <script>
-        class OverlayManager {
-            constructor() {
-                this.container = document.getElementById('container');
-                this.positions = this.generatePositions();
-                this.currentPositionIndex = 0;
-                this.setupSocket();
-            }
-
-            setupSocket() {
-                this.socket = io("http://localhost:8088");
-                this.socket.on('connect', () => console.log('connected'));
-                this.socket.on('disconnect', () => console.log('disconnected'));
-                this.socket.on("overlay-event", (data) => this.handleMessage(data));
-            }
-
-            generatePositions() {
-                let positions = [];
-                for (let x = 8; x <= 88; x += 4) {
-                    for (let y = 8; y <= 88; y += 4) {
-                        positions.push({ x, y });
-                    }
-                }
-                return this.shuffleArray(positions);
-            }
-
-            shuffleArray(array) {
-                for (let i = array.length - 1; i > 0; i--) {
-                    const j = Math.floor(Math.random() * (i + 1));
-                    [array[i], array[j]] = [array[j], array[i]];
-                }
-                return array;
-            }
-
-            getNextPosition() {
-                const position = this.positions[this.currentPositionIndex];
-                this.currentPositionIndex = (this.currentPositionIndex + 1) % this.positions.length;
-                return position;
-            }
-
-            predictNextPosition() {
-                let position = this.positions[this.currentPositionIndex];
-                let newY = Math.max(0, position.y - 6);
-                let newX = Math.max(0, position.x + 0.2);
-                return { x: newX, y: newY };
-            }
-
-            getPosition(existingPosition = null) {
-                return existingPosition || this.getNextPosition();
-            }
-
-            setPosition(element, position) {
-                const { x, y } = position;
-                element.style.left = `${x}%`;
-                element.style.top = `${y}%`;
-                element.classList.add('overlay');
-            }
-
-            handleMessage(event) {
-                const { eventType, data, options } = event;
-                console.log('Received message:', event);
-
-                if (eventType === 'play') {
-                    let position = this.getPosition(data.position);
-
-                    if (data.fileType.startsWith('video/')) {
-                        new VideoOverlay(this, data, position, data.options);
-                    } else if (data.fileType.startsWith('image/')) {
-                        if (options) {
-                            new UserPictureOverlay(this, data, this.predictNextPosition(), data.options);
-                        } else {
-                            new ImageOverlay(this, data, position, data.options);
-                        }
-                    } else if (data.fileType.startsWith('audio/')) {
-                        new AudioOverlay(this, data, position, data.options);
-                    } else {
-                        new UnsupportedOverlay(this, position);
-                    }
-                }
-            }
-        }
-
-        class BaseOverlay {
-            constructor(manager, data, position, options) {
-                this.manager = manager;
-                this.data = data;
-                this.position = position;
-                this.options = options;
-                this.element = null;
-                this.duration = (options.duracion || 1) * 1000;
-                this.create();
-            }
-
-            create() {
-                throw new Error("Method 'create()' must be implemented.");
-            }
-
-            remove() {
-                if (this.element) {
-                    this.manager.container.removeChild(this.element);
-                }
-            }
-        }
-
-        class VideoOverlay extends BaseOverlay {
-            create() {
-                if (this.options.check === false) return;
-
-                this.video = document.createElement('video');
-                this.video.style.display = 'none';
-                this.video.autoplay = true;
-
-                const source = document.createElement('source');
-                source.src = this.data.src;
-                source.type = 'video/mp4';
-                this.video.volume = this.options.rango / 100;
-                this.video.appendChild(source);
-
-                this.canvas = document.createElement('canvas');
-                this.canvas.classList.add('overlay-video');
-                this.context = this.canvas.getContext('2d');
-
-                this.manager.container.appendChild(this.video);
-                this.manager.container.appendChild(this.canvas);
-                this.manager.setPosition(this.canvas, this.position);
-
-                this.video.addEventListener('loadedmetadata', () => this.setupChromaKey());
-                this.video.addEventListener('ended', () => this.remove());
-
-                setTimeout(() => this.remove(), this.duration);
-            }
-
-            setupChromaKey() {
-                this.video.addEventListener('play', () => {
-                    const applyChromaKey = () => {
-                        if (!this.video.paused && !this.video.ended) {
-                            this.context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
-                            let frame = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
-                            let length = frame.data.length;
-
-                            for (let i = 0; i < length; i += 4) {
-                                let r = frame.data[i];
-                                let g = frame.data[i + 1];
-                                let b = frame.data[i + 2];
-
-                                if (g > 100 && r < 150 && b < 150) {
-                                    frame.data[i + 3] = 0;
-                                }
-                            }
-
-                            this.context.putImageData(frame, 0, 0);
-                            requestAnimationFrame(applyChromaKey);
-                        }
-                    };
-
-                    applyChromaKey();
-                });
-            }
-
-            remove() {
-                super.remove();
-                if (this.video) this.manager.container.removeChild(this.video);
-                if (this.canvas) this.manager.container.removeChild(this.canvas);
-            }
-        }
-
-        class ImageOverlay extends BaseOverlay {
-            create() {
-                this.element = document.createElement('img');
-                this.element.src = this.data.src;
-                this.element.style.maxWidth = '20%';
-                this.element.style.maxHeight = '20%';
-                this.element.classList.add('overlay-image');
-
-                this.manager.setPosition(this.element, this.position);
-                this.manager.container.appendChild(this.element);
-
-                setTimeout(() => this.remove(), this.duration);
-            }
-        }
-
-        class AudioOverlay extends BaseOverlay {
-            create() {
-                this.element = document.createElement('audio');
-                this.element.src = this.data.src;
-                this.element.autoplay = true;
-                this.element.volume = this.options.rango / 100;
-                this.element.style.maxWidth = '50%';
-                this.element.style.maxHeight = '50%';
-
-                this.manager.setPosition(this.element, this.position);
-                this.manager.container.appendChild(this.element);
-
-                setTimeout(() => this.remove(), this.duration);
-            }
-        }
-
-        class UserPictureOverlay extends BaseOverlay {
-            create() {
-                if (this.options.check === false) return;
-
-                if (this.options.texto && this.options.texto !== '') {
-                    this.createTextOverlay();
-                }
-                console.log("UserPictureOverlay", this.options, this.data);
-                this.element = document.createElement('img');
-                this.element.src = this.data.src;
-                this.element.style.maxWidth = '10%';
-                this.element.style.maxHeight = '10%';
-                this.element.style.position = 'absolute';
-                this.element.style.zIndex = '10';
-                this.element.classList.add('overlay', 'overlay-image');
-
-                this.manager.setPosition(this.element, this.position);
-                this.manager.container.appendChild(this.element);
-
-                setTimeout(() => this.remove(), this.duration);
-            }
-
-            createTextOverlay() {
-                this.textElement = document.createElement('div');
-                this.textElement.textContent = this.options.texto;
-                this.textElement.style.color = 'white';
-                this.textElement.style.fontSize = '1.5rem';
-                this.textElement.style.zIndex = '11';
-                this.textElement.classList.add('overlay');
-
-                this.manager.setPosition(this.textElement, this.position);
-                this.manager.container.appendChild(this.textElement);
-
-                setTimeout(() => {
-                    if (this.textElement) this.manager.container.removeChild(this.textElement);
-                }, this.duration);
-            }
-        }
-
-        class UnsupportedOverlay extends BaseOverlay {
-            create() {
-                this.element = document.createElement('div');
-                this.element.textContent = 'Unsupported file type';
-                this.element.classList.add('overlay');
-
-                this.manager.setPosition(this.element, this.position);
-                this.manager.container.appendChild(this.element);
-
-                setTimeout(() => this.remove(), 5000);
-            }
-        }
-
-        const overlayManager = new OverlayManager();
-        window.addEventListener('message', (event) => overlayManager.handleMessage(event.data));
-    </script>
-</body>
-</html>
diff --git a/src/public/overlay/overlayfull.html b/src/public/overlay/overlayfull.html
deleted file mode 100644
index 5d203fb..0000000
--- a/src/public/overlay/overlayfull.html
+++ /dev/null
@@ -1,259 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Overlay</title>
-    <style>
-        body {
-            margin: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-        }
-        .overlay {
-            position: absolute;
-        }
-        .overlay-image {
-            box-sizing: content-box;
-            height: auto;
-            position: absolute;
-            top: 0;
-            left: 30%;
-            width: 100%;
-            max-width: 200px;
-            max-height: 200px;
-        }
-        .overlay-video, .overlay-canvas {
-            box-sizing: content-box;
-            height: auto;
-            width: 100%;
-            max-width: 200px;
-            max-height: 200px;
-        }
-        video, img {
-          display: flex;
-          position: absolute;
-          width: 100vw;
-          height: 100vh;
-          object-fit: contain;
-        }
-    </style>
-</head>
-<body>
-    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js" integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO" crossorigin="anonymous"></script>
-    <div id="container"></div>
-    <script>
-      class OverlayManager {
-        constructor() {
-            this.container = document.getElementById('container');
-            this.setupSocket();
-            this.setupFullscreen();
-            this.setupFooter();
-            this.setupAutoRefresh();
-        }
-
-        setupSocket() {
-            this.socket = io("http://localhost:8088");
-            this.socket.on('connect', () => {
-                console.log('connected');
-                this.resetAutoRefresh();
-            });
-            this.socket.on('disconnect', () => console.log('disconnected'));
-            this.socket.on("overlay-event", (data) => {
-                this.handleMessage(data);
-                this.resetAutoRefresh();
-            });
-        }
-
-        handleMessage(event) {
-            const { eventType, data, options } = event;
-            console.log('Received message:', event);
-
-            if (eventType === 'play') {
-                if (data.fileType.startsWith('video/')) {
-                    new VideoOverlay(this, data,  data.options);
-                } else if (data.fileType.startsWith('image/')) {
-                    if (options) {
-                        new UserPictureOverlay(this, data, data.options);
-                    } else {
-                        new ImageOverlay(this, data, data.options);
-                        console.log("ImageOverlay", data);
-                    }
-                } else if (data.fileType.startsWith('audio/')) {
-                    new AudioOverlay(this, data, data.options);
-                } else {
-                    console.log("Unsupported file type");
-                    //new UnsupportedOverlay(this, data);
-                }
-            }
-        }
-
-        setupFullscreen() {
-            this.container.style.position = 'fixed';
-            this.container.style.top = 0;
-            this.container.style.left = 0;
-            this.container.style.width = '100%';
-            this.container.style.height = '100%';
-        }
-
-        setupFooter() {
-            this.footer = document.createElement('div');
-            this.footer.id = 'overlay-footer';
-            this.footer.className = 'overlay-footer';
-            this.footer.textContent = 'a';
-            this.footer.style.position = 'absolute';
-            this.footer.style.bottom = '0';
-            this.footer.style.width = '100%';
-            this.footer.style.textAlign = 'center';
-            this.footer.style.color = 'white';
-            this.footer.style.fontSize = '3rem';
-            this.footer.style.padding = '10px 0';
-            this.container.appendChild(this.footer);
-            setTimeout(() => this.footer.style.display = 'none', 9999);
-        }
-
-        setupAutoRefresh() {
-            this.autoRefreshTimer = setTimeout(() => {
-                console.log('No connection or events received in 3 seconds. Refreshing page...');
-                window.location.reload();
-            }, 99999);
-        }
-
-        resetAutoRefresh() {
-            clearTimeout(this.autoRefreshTimer);
-            this.setupAutoRefresh();
-        }
-    }
-
-
-    class BaseOverlay {
-        constructor(manager, data, options) {
-            this.manager = manager;
-            this.data = data;
-            this.options = options;
-            this.element = null;
-            this.duration = (options.duracion || 3) * 1000;
-            this.create();
-        }
-
-        create() {
-            throw new Error("Method 'create()' must be implemented.");
-        }
-
-        remove() {
-            if (this.element) {
-                this.manager.container.removeChild(this.element);
-            }
-        }
-    }
-
-    class VideoOverlay extends BaseOverlay {
-      create() {
-          if (this.options.check === false) return;
-
-          this.video = document.createElement('video');
-          this.video.autoplay = true;
-          this.video.src = this.data.src;
-          this.video.volume = this.options.rango / 100;
-
-          this.manager.container.appendChild(this.video);
-
-          this.video.addEventListener('ended', () => this.remove());
-          setTimeout(() => this.remove(), this.duration);
-      }
-
-      remove() {
-          super.remove();
-          if (this.video) this.manager.container.removeChild(this.video);
-      }
-  }
-
-  class ImageOverlay extends BaseOverlay {
-      create() {
-          this.element = document.createElement('img');
-          this.element.src = this.data.src;
-          this.manager.container.appendChild(this.element);
-
-          setTimeout(() => this.remove(), this.duration);
-      }
-  }
-
-  class AudioOverlay extends BaseOverlay {
-      create() {
-          this.element = document.createElement('audio');
-          this.element.src = this.data.src;
-          this.element.autoplay = true;
-          this.element.volume = this.options.rango / 100;
-
-          this.manager.container.appendChild(this.element);
-
-          // Crear un elemento visual para el audio
-          this.visualElement = document.createElement('div');
-          this.visualElement.textContent = '🔊 Reproduciendo Audio';
-          this.visualElement.style.color = 'white';
-          this.visualElement.style.fontSize = '2rem';
-          this.manager.container.appendChild(this.visualElement);
-
-          setTimeout(() => this.remove(), this.duration);
-      }
-
-      remove() {
-          super.remove();
-          if (this.visualElement) this.manager.container.removeChild(this.visualElement);
-      }
-  }
-
-  class UserPictureOverlay extends BaseOverlay {
-    create() {
-        if (this.options.check === false) return;
-
-        if (this.options.texto && this.options.texto !== '') {
-            this.createTextOverlay();
-        }
-
-        this.element = document.createElement('img');
-        this.element.src = this.data.src;
-        this.element.style.position = 'absolute';
-        this.element.style.zIndex = '10';
-        this.element.classList.add('overlay', 'overlay-image');
-
-        this.manager.container.appendChild(this.element);
-
-        setTimeout(() => this.remove(), this.duration);
-    }
-
-    createTextOverlay() {
-        this.textElement = document.createElement('div');
-        this.textElement.textContent = this.options.texto;
-        this.textElement.style.color = 'white';
-        this.textElement.style.fontSize = '1.5rem';
-        this.textElement.style.zIndex = '11';
-        this.textElement.classList.add('overlay');
-
-        this.manager.container.appendChild(this.textElement);
-
-        setTimeout(() => {
-            if (this.textElement) this.manager.container.removeChild(this.textElement);
-        }, this.duration);
-    }
-}
-
-class UnsupportedOverlay extends BaseOverlay {
-    create() {
-        this.element = document.createElement('div');
-        this.element.textContent = 'Unsupported file type';
-        this.element.classList.add('overlay');
-
-        this.manager.setPosition(this.element, this.position);
-        this.manager.container.appendChild(this.element);
-
-        setTimeout(() => this.remove(), 5000);
-    }
-}
-
-
-const overlayManager = new OverlayManager();
-    </script>
-</body>
-</html>
