withluvboutaina/manimation-magic-deploy-o-matic

1class PreviewPanel extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        :host {7          width: 100%;8          max-width: 400px;9          background: #0f172a;10          border-left: 1px solid #1e293b;11          display: flex;12          flex-direction: column;13        }14        .preview-container {15          flex: 1;16          display: flex;17          align-items: center;18          justify-content: center;19          background: #0f172a;20          overflow: hidden;21        }22        .preview-video {23          max-width: 100%;24          max-height: 100%;25        }26        .controls {27          padding: 1rem;28          background: #1e293b;29          display: flex;30          justify-content: center;31          gap: 1rem;32        }33        button {34          padding: 0.5rem 1rem;35          background: #334155;36          color: white;37          border: none;38          border-radius: 0.25rem;39          cursor: pointer;40          display: flex;41          align-items: center;42          gap: 0.5rem;43        }44        button:hover {45          background: #475569;46        }47        @media (max-width: 768px) {48          :host {49            width: 100%;50            max-width: none;51            height: 300px;52            border-left: none;53            border-top: 1px solid #1e293b;54          }55        }56      </style>57      <div class="preview-container">58        <video class="preview-video" controls>59          <source src="https://manim-studio.s3.amazonaws.com/demo-animation.mp4" type="video/mp4">60          Your browser does not support the video tag.61        </video>62      </div>63      <div class="controls">64        <button id="play-btn">65          <i data-feather="play"></i>66          Play67        </button>68        <button id="pause-btn">69          <i data-feather="pause"></i>70          Pause71        </button>72      </div>73    `;74 75    const video = this.shadowRoot.querySelector('.preview-video');76    this.shadowRoot.getElementById('play-btn').addEventListener('click', () => video.play());77    this.shadowRoot.getElementById('pause-btn').addEventListener('click', () => video.pause());78  }79}80 81customElements.define('custom-preview-panel', PreviewPanel);