components/player-controls.js

class CustomPlayerControls extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .progress-container:hover .progress-bar {
          height: 8px;
        }
        .progress-bar {
          transition: height 0.2s ease;
        }
      </style>
      <div class="bg-gray-800 rounded-xl p-4 flex flex-col">
        <div class="progress-container h-2 mb-4 cursor-pointer">
          <div class="progress-bar bg-gray-600 rounded-full h-1 w-full">
            <div class="bg-rose-500 h-full rounded-full w-0"></div>
          </div>
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <button id="play-pause" class="w-10 h-10 rounded-full bg-rose-500 flex items-center justify-center hover:bg-rose-600 transition-colors">
              <i data-feather="play" class="text-white"></i>
            </button>
            <div class="flex items-center space-x-2">
              <i data-feather="volume-1" class="text-gray-400"></i>
              <input type="range" id="volume" min="0" max="1" step="0.01" value="0.3" class="w-24 accent-rose-500">
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <button id="prev-channel" class="text-gray-400 hover:text-white transition-colors">
              <i data-feather="skip-back"></i>
            </button>
            <button id="next-channel" class="text-gray-400 hover:text-white transition-colors">
              <i data-feather="skip-forward"></i>
            </button>
            <button id="fullscreen" class="text-gray-400 hover:text-white transition-colors">
              <i data-feather="maximize"></i>
            </button>
          </div>
</div>
      </div>
    `;

    // Add event listeners after rendering
    setTimeout(() => {
      const volumeControl = this.shadowRoot.getElementById('volume');
      const playPauseBtn = this.shadowRoot.getElementById('play-pause');
      const fullscreenBtn = this.shadowRoot.getElementById('fullscreen');

      volumeControl.addEventListener('input', (e) => {
        const event = new CustomEvent('volumechange', {
          detail: { volume: e.target.value }
        });
        document.dispatchEvent(event);
      });
      playPauseBtn.addEventListener('click', () => {
        const event = new CustomEvent('playpause');
        document.dispatchEvent(event);
      });

      const prevChannelBtn = this.shadowRoot.getElementById('prev-channel');
      const nextChannelBtn = this.shadowRoot.getElementById('next-channel');

      prevChannelBtn.addEventListener('click', () => {
        document.dispatchEvent(new CustomEvent('prevchannel'));
      });

      nextChannelBtn.addEventListener('click', () => {
        document.dispatchEvent(new CustomEvent('nextchannel'));
      });

      fullscreenBtn.addEventListener('click', () => {
document.dispatchEvent(new CustomEvent('fullscreen'));
      });
    });
  }
}

customElements.define('custom-player-controls', CustomPlayerControls);