@nuralyui/video 0.0.2 → 0.0.5

package/video.component.js

@@ -4,270 +4,181 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-let HyVideoPlayer = class HyVideoPlayer extends LitElement {
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { NuralyUIBaseMixin } from "../../shared/base-mixin.js";
+import styles from "./video.style.js";
+let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.width = 'auto';
         this.height = 'auto';
-        this.fallback = null;
+        this.autoplay = false;
+        this.loop = false;
+        this.muted = false;
+        this.controls = true;
+        this.preload = "metadata" /* VideoPreload.Metadata */;
         this.previewable = false;
-        this.isFullscreen = false;
+        this.block = false;
+        this.showPreview = false;
         this.hasError = false;
-        // Updated fallback with a broken video icon
-        this.defaultFallBack = `data:image/svg+xml;base64,${btoa(`
-    <svg width="240" height="180" viewBox="0 0 240 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect width="240" height="180" fill="#F3F4F6"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M120 82C109.507 82 101 90.5066 101 101C101 111.493 109.507 120 120 120C130.493 120 139 111.493 139 101C139 90.5066 130.493 82 120 82ZM105 101C105 92.7157 111.716 86 120 86C128.284 86 135 92.7157 135 101C135 109.284 128.284 116 120 116C111.716 116 105 109.284 105 101Z" fill="#9CA3AF"/>
-      <path d="M120 90V96" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
-      <path d="M120 106V112" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
-      <path d="M106.343 87.3431L110.686 91.6863" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
-      <path d="M129.314 110.314L133.657 114.657" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
-      <path d="M95 101H101" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
-      <path d="M139 101H145" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
-      <path d="M106.343 114.657L110.686 110.314" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
-      <path d="M129.314 91.6863L133.657 87.3431" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
-      <rect x="70" y="60" width="100" height="4" rx="2" fill="#9CA3AF"/>
-      <path d="M82 45C82 43.3431 83.3431 42 85 42H155C156.657 42 158 43.3431 158 45V60H82V45Z" fill="#9CA3AF"/>
-      <rect x="70" y="138" width="100" height="4" rx="2" fill="#9CA3AF"/>
-      <path d="M89 60H151C152.657 60 154 61.3431 154 63V138H86C84.3431 138 83 136.657 83 135V66C83 62.6863 85.6863 60 89 60Z" fill="#E5E7EB"/>
-      <path d="M188 69L168 89M168 69L188 89" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
-    </svg>
-  `)}`;
+        this.defaultFallback = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI0MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNGM0Y0RjYiLz48cGF0aCBkPSJNMTg4IDY5TDE2OCA4OU0xNjggNjlMMTg4IDg5IiBzdHJva2U9IiM5Q0EzQUYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+';
     }
-    render() {
-        return html `
-      <div class="video-container" style="width:${this.width}; height:${this.height};">
-        ${this.hasError ? html `
-          <div class="fallback-container">
-            <img
-              class="fallback-image"
-              src=${this.fallback || this.defaultFallBack}
-              alt="Video failed to load"
-            />
-            <p class="error-message">This video cannot be played.</p>
-          </div>
-        ` : html `
-          <video
-            class="video-element"
-            src="${this.src}"
-            controls
-            @error=${this._handleError}
-          ></video>
-          
-          ${this.previewable ? html `
-            <button class="preview-button" @click=${this._openFullscreen}>
-              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M5.5 1H1.5C1.22386 1 1 1.22386 1 1.5V5.5C1 5.77614 1.22386 6 1.5 6C1.77614 6 2 5.77614 2 5.5V2H5.5C5.77614 2 6 1.77614 6 1.5C6 1.22386 5.77614 1 5.5 1Z" fill="currentColor"/>
-                <path d="M14.5 1H10.5C10.2239 1 10 1.22386 10 1.5C10 1.77614 10.2239 2 10.5 2H14V5.5C14 5.77614 14.2239 6 14.5 6C14.7761 6 15 5.77614 15 5.5V1.5C15 1.22386 14.7761 1 14.5 1Z" fill="currentColor"/>
-                <path d="M5.5 14H2V10.5C2 10.2239 1.77614 10 1.5 10C1.22386 10 1 10.2239 1 10.5V14.5C1 14.7761 1.22386 15 1.5 15H5.5C5.77614 15 6 14.7761 6 14.5C6 14.2239 5.77614 14 5.5 14Z" fill="currentColor"/>
-                <path d="M14.5 10C14.2239 10 14 10.2239 14 10.5V14H10.5C10.2239 14 10 14.2239 10 14.5C10 14.7761 10.2239 15 10.5 15H14.5C14.7761 15 15 14.7761 15 14.5V10.5C15 10.2239 14.7761 10 14.5 10Z" fill="currentColor"/>
-              </svg>
-              Fullscreen
-            </button>
-          ` : ''}
-        `}
-      </div>
-      
-      ${this.isFullscreen ? html `
-        <div class="fullscreen-overlay">
-          <div class="fullscreen-header">
-            <button class="close-button" @click=${this._closeFullscreen}>
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </button>
-          </div>
-          <div class="fullscreen-content">
-            ${this.hasError ? html `
-              <div class="fallback-container" style="max-width: 100%; max-height: calc(100vh - 64px);">
-                <img
-                  class="fallback-image"
-                  src=${this.fallback || this.defaultFallBack}
-                  alt="Video failed to load"
-                />
-                <p class="error-message">This video cannot be played.</p>
-              </div>
-            ` : html `
-              <video
-                class="video-element"
-                src="${this.src}"
-                controls
-                @error=${this._handleError}
-                style="max-width: 100%; max-height: calc(100vh - 64px);"
-              ></video>
-            `}
-          </div>
-        </div>
-      ` : ''}
-    `;
-    }
-    _handleError(e) {
-        console.error('Video loading error:', e);
+    handleError() {
         this.hasError = true;
-        this.dispatchEvent(new CustomEvent('onError', {
+        this.dispatchEvent(new CustomEvent('nr-video-error', {
             bubbles: true,
             composed: true,
-            detail: {
-                error: `Error loading video: Format not supported or file cannot be loaded`
-            }
+            detail: { error: `Error loading video: ${this.src}`, src: this.src }
         }));
     }
-    _openFullscreen() {
-        this.isFullscreen = true;
-        document.body.style.overflow = 'hidden';
-    }
-    _closeFullscreen() {
-        this.isFullscreen = false;
-        document.body.style.overflow = '';
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.isFullscreen) {
-            document.body.style.overflow = '';
-        }
-    }
-};
-HyVideoPlayer.styles = css `
-    :host {
-      display: block;
-    }
-    
-    .video-container {
-      position: relative;
-      overflow: hidden;
-      min-height: 100px;
-      background-color: black;
-    }
-    
-    .video-element {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-
-    .fallback-container {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      background-color: #F3F4F6;
-      padding: 20px;
-      box-sizing: border-box;
-    }
-
-    .fallback-image {
-      max-width: 240px;
-      width: 100%;
-      height: auto;
-      margin-bottom: 16px;
-    }
-
-    .error-message {
-      font-family: system-ui, -apple-system, sans-serif;
-      color: #6B7280;
-      font-size: 14px;
-      text-align: center;
-      max-width: 300px;
-      margin: 0;
-    }
-    
-    .preview-button {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      background-color: rgba(255, 255, 255, 0.8);
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      padding: 5px 10px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      font-family: system-ui, -apple-system, sans-serif;
-      font-size: 12px;
-      z-index: 10;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }
-    
-    .preview-button:hover {
-      background-color: rgba(255, 255, 255, 1);
-    }
-
-    .preview-button svg {
-      margin-right: 4px;
+    handlePlay() {
+        this.dispatchEvent(new CustomEvent('nr-video-play', {
+            bubbles: true,
+            composed: true,
+            detail: { src: this.src }
+        }));
     }
-    
-    .fullscreen-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      background-color: black;
-      z-index: 9999;
-      display: flex;
-      flex-direction: column;
+    handlePause() {
+        this.dispatchEvent(new CustomEvent('nr-video-pause', {
+            bubbles: true,
+            composed: true,
+            detail: { src: this.src }
+        }));
     }
-    
-    .fullscreen-header {
-      display: flex;
-      justify-content: flex-end;
-      padding: 16px;
-      background-color: rgba(0, 0, 0, 0.4);
+    handleEnded() {
+        this.dispatchEvent(new CustomEvent('nr-video-ended', {
+            bubbles: true,
+            composed: true,
+            detail: { src: this.src }
+        }));
     }
-    
-    .close-button {
-      background-color: white;
-      border: none;
-      border-radius: 4px;
-      padding: 8px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    showPreviewModal() {
+        if (this.previewable && !this.hasError) {
+            this.showPreview = true;
+            this.dispatchEvent(new CustomEvent('nr-video-preview-open', {
+                bubbles: true,
+                composed: true,
+                detail: { src: this.src }
+            }));
+        }
     }
-
-    .close-button:hover {
-      background-color: #f0f0f0;
+    closePreviewModal() {
+        this.showPreview = false;
+        this.dispatchEvent(new CustomEvent('nr-video-preview-close', {
+            bubbles: true,
+            composed: true,
+            detail: { src: this.src }
+        }));
     }
-    
-    .fullscreen-content {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    render() {
+        const containerClasses = {
+            'video-container': true,
+            'video--error': this.hasError
+        };
+        const videoStyles = {
+            width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+            height: typeof this.height === 'number' ? `${this.height}px` : this.height,
+        };
+        if (this.hasError) {
+            return html `
+        <div class=${classMap(containerClasses)}>
+          <div class="error-message">
+            <img class="error-icon" src=${this.defaultFallback} alt="Video error" />
+            <p>Unable to load video</p>
+          </div>
+        </div>
+      `;
+        }
+        return html `
+      <div class=${classMap(containerClasses)}>
+        <video
+          style=${styleMap(videoStyles)}
+          ?autoplay=${this.autoplay}
+          ?loop=${this.loop}
+          ?muted=${this.muted}
+          ?controls=${this.controls}
+          preload=${this.preload}
+          poster=${this.poster || ''}
+          @error=${this.handleError}
+          @play=${this.handlePlay}
+          @pause=${this.handlePause}
+          @ended=${this.handleEnded}
+        >
+          <source src=${this.src} />
+          Your browser does not support the video tag.
+        </video>
+        ${this.previewable ? html `
+          <button class="preview-button" @click=${this.showPreviewModal}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M5.5 5.5A.5.5 0 0 1 6 6v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0V6z"/>
+              <path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2z"/>
+            </svg>
+            Fullscreen
+          </button>
+        ` : ''}
+        ${this.showPreview ? html `
+          <div class="preview-modal" @click=${this.closePreviewModal}>
+            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+            <video
+              ?autoplay=${true}
+              ?loop=${this.loop}
+              ?muted=${this.muted}
+              controls
+              poster=${this.poster || ''}
+            >
+              <source src=${this.src} />
+            </video>
+          </div>
+        ` : ''}
+      </div>
+    `;
     }
-  `;
+};
+NrVideoElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrVideoElement.prototype, "src", void 0);
 __decorate([
-    property()
-], HyVideoPlayer.prototype, "src", void 0);
+    property({ type: String })
+], NrVideoElement.prototype, "poster", void 0);
 __decorate([
-    property()
-], HyVideoPlayer.prototype, "width", void 0);
+    property({ type: String })
+], NrVideoElement.prototype, "width", void 0);
 __decorate([
-    property()
-], HyVideoPlayer.prototype, "height", void 0);
+    property({ type: String })
+], NrVideoElement.prototype, "height", void 0);
 __decorate([
-    property({ type: Object })
-], HyVideoPlayer.prototype, "fallback", void 0);
+    property({ type: Boolean })
+], NrVideoElement.prototype, "autoplay", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrVideoElement.prototype, "loop", void 0);
 __decorate([
     property({ type: Boolean })
-], HyVideoPlayer.prototype, "previewable", void 0);
+], NrVideoElement.prototype, "muted", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrVideoElement.prototype, "controls", void 0);
+__decorate([
+    property({ type: String })
+], NrVideoElement.prototype, "preload", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrVideoElement.prototype, "previewable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrVideoElement.prototype, "block", void 0);
 __decorate([
     state()
-], HyVideoPlayer.prototype, "isFullscreen", void 0);
+], NrVideoElement.prototype, "showPreview", void 0);
 __decorate([
     state()
-], HyVideoPlayer.prototype, "hasError", void 0);
-HyVideoPlayer = __decorate([
-    customElement('hy-video-player')
-], HyVideoPlayer);
-export { HyVideoPlayer };
+], NrVideoElement.prototype, "hasError", void 0);
+NrVideoElement = __decorate([
+    customElement('nr-video')
+], NrVideoElement);
+export { NrVideoElement };
 //# sourceMappingURL=video.component.js.map

package/video.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"video.component.js","sourceRoot":"","sources":["../../../src/components/video/video.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\n@customElement('hy-video-player')\nexport class HyVideoPlayer extends LitElement {\n  @property()\n  src!: string;\n\n  @property()\n  width = 'auto';\n\n  @property()\n  height = 'auto';\n\n  @property({ type: Object })\n  fallback = null;\n\n  @property({ type: Boolean })\n  previewable = false;\n\n  @state()\n  private isFullscreen = false;\n\n  @state()\n  private hasError = false;\n\n  // Updated fallback with a broken video icon\n  defaultFallBack = `data:image/svg+xml;base64,${btoa(`\n    <svg width=\"240\" height=\"180\" viewBox=\"0 0 240 180\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"240\" height=\"180\" fill=\"#F3F4F6\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M120 82C109.507 82 101 90.5066 101 101C101 111.493 109.507 120 120 120C130.493 120 139 111.493 139 101C139 90.5066 130.493 82 120 82ZM105 101C105 92.7157 111.716 86 120 86C128.284 86 135 92.7157 135 101C135 109.284 128.284 116 120 116C111.716 116 105 109.284 105 101Z\" fill=\"#9CA3AF\"/>\n      <path d=\"M120 90V96\" stroke=\"#9CA3AF\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n      <path d=\"M120 106V112\" stroke=\"#9CA3AF\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n      <path d=\"M106.343 87.3431L110.686 91.6863\" stroke=\"#9CA3AF\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n      <path d=\"M129.314 110.314L133.657 114.657\" stroke=\"#9CA3AF\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n      <path d=\"M95 101H101\" stroke=\"#9CA3AF\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n      <path d=\"M139 101H145\" stroke=\"#9CA3AF\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n      <path d=\"M106.343 114.657L110.686 110.314\" stroke=\"#9CA3AF\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n      <path d=\"M129.314 91.6863L133.657 87.3431\" stroke=\"#9CA3AF\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n      <rect x=\"70\" y=\"60\" width=\"100\" height=\"4\" rx=\"2\" fill=\"#9CA3AF\"/>\n      <path d=\"M82 45C82 43.3431 83.3431 42 85 42H155C156.657 42 158 43.3431 158 45V60H82V45Z\" fill=\"#9CA3AF\"/>\n      <rect x=\"70\" y=\"138\" width=\"100\" height=\"4\" rx=\"2\" fill=\"#9CA3AF\"/>\n      <path d=\"M89 60H151C152.657 60 154 61.3431 154 63V138H86C84.3431 138 83 136.657 83 135V66C83 62.6863 85.6863 60 89 60Z\" fill=\"#E5E7EB\"/>\n      <path d=\"M188 69L168 89M168 69L188 89\" stroke=\"#9CA3AF\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n    </svg>\n  `)}`;\n\n  static override styles = css`\n    :host {\n      display: block;\n    }\n    \n    .video-container {\n      position: relative;\n      overflow: hidden;\n      min-height: 100px;\n      background-color: black;\n    }\n    \n    .video-element {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n\n    .fallback-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      background-color: #F3F4F6;\n      padding: 20px;\n      box-sizing: border-box;\n    }\n\n    .fallback-image {\n      max-width: 240px;\n      width: 100%;\n      height: auto;\n      margin-bottom: 16px;\n    }\n\n    .error-message {\n      font-family: system-ui, -apple-system, sans-serif;\n      color: #6B7280;\n      font-size: 14px;\n      text-align: center;\n      max-width: 300px;\n      margin: 0;\n    }\n    \n    .preview-button {\n      position: absolute;\n      top: 10px;\n      right: 10px;\n      background-color: rgba(255, 255, 255, 0.8);\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      padding: 5px 10px;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      font-family: system-ui, -apple-system, sans-serif;\n      font-size: 12px;\n      z-index: 10;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n    }\n    \n    .preview-button:hover {\n      background-color: rgba(255, 255, 255, 1);\n    }\n\n    .preview-button svg {\n      margin-right: 4px;\n    }\n    \n    .fullscreen-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100vw;\n      height: 100vh;\n      background-color: black;\n      z-index: 9999;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    .fullscreen-header {\n      display: flex;\n      justify-content: flex-end;\n      padding: 16px;\n      background-color: rgba(0, 0, 0, 0.4);\n    }\n    \n    .close-button {\n      background-color: white;\n      border: none;\n      border-radius: 4px;\n      padding: 8px;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 32px;\n      height: 32px;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n    }\n\n    .close-button:hover {\n      background-color: #f0f0f0;\n    }\n    \n    .fullscreen-content {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  `;\n\n  override render() {\n    return html`\n      <div class=\"video-container\" style=\"width:${this.width}; height:${this.height};\">\n        ${this.hasError ? html`\n          <div class=\"fallback-container\">\n            <img\n              class=\"fallback-image\"\n              src=${this.fallback || this.defaultFallBack}\n              alt=\"Video failed to load\"\n            />\n            <p class=\"error-message\">This video cannot be played.</p>\n          </div>\n        ` : html`\n          <video\n            class=\"video-element\"\n            src=\"${this.src}\"\n            controls\n            @error=${this._handleError}\n          ></video>\n          \n          ${this.previewable ? html`\n            <button class=\"preview-button\" @click=${this._openFullscreen}>\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5.5 1H1.5C1.22386 1 1 1.22386 1 1.5V5.5C1 5.77614 1.22386 6 1.5 6C1.77614 6 2 5.77614 2 5.5V2H5.5C5.77614 2 6 1.77614 6 1.5C6 1.22386 5.77614 1 5.5 1Z\" fill=\"currentColor\"/>\n                <path d=\"M14.5 1H10.5C10.2239 1 10 1.22386 10 1.5C10 1.77614 10.2239 2 10.5 2H14V5.5C14 5.77614 14.2239 6 14.5 6C14.7761 6 15 5.77614 15 5.5V1.5C15 1.22386 14.7761 1 14.5 1Z\" fill=\"currentColor\"/>\n                <path d=\"M5.5 14H2V10.5C2 10.2239 1.77614 10 1.5 10C1.22386 10 1 10.2239 1 10.5V14.5C1 14.7761 1.22386 15 1.5 15H5.5C5.77614 15 6 14.7761 6 14.5C6 14.2239 5.77614 14 5.5 14Z\" fill=\"currentColor\"/>\n                <path d=\"M14.5 10C14.2239 10 14 10.2239 14 10.5V14H10.5C10.2239 14 10 14.2239 10 14.5C10 14.7761 10.2239 15 10.5 15H14.5C14.7761 15 15 14.7761 15 14.5V10.5C15 10.2239 14.7761 10 14.5 10Z\" fill=\"currentColor\"/>\n              </svg>\n              Fullscreen\n            </button>\n          ` : ''}\n        `}\n      </div>\n      \n      ${this.isFullscreen ? html`\n        <div class=\"fullscreen-overlay\">\n          <div class=\"fullscreen-header\">\n            <button class=\"close-button\" @click=${this._closeFullscreen}>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12.5 3.5L3.5 12.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M12.5 12.5L3.5 3.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </button>\n          </div>\n          <div class=\"fullscreen-content\">\n            ${this.hasError ? html`\n              <div class=\"fallback-container\" style=\"max-width: 100%; max-height: calc(100vh - 64px);\">\n                <img\n                  class=\"fallback-image\"\n                  src=${this.fallback || this.defaultFallBack}\n                  alt=\"Video failed to load\"\n                />\n                <p class=\"error-message\">This video cannot be played.</p>\n              </div>\n            ` : html`\n              <video\n                class=\"video-element\"\n                src=\"${this.src}\"\n                controls\n                @error=${this._handleError}\n                style=\"max-width: 100%; max-height: calc(100vh - 64px);\"\n              ></video>\n            `}\n          </div>\n        </div>\n      ` : ''}\n    `;\n  }\n\n  _handleError(e: Event) {\n    console.error('Video loading error:', e);\n    this.hasError = true;\n    this.dispatchEvent(new CustomEvent('onError', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        error: `Error loading video: Format not supported or file cannot be loaded`\n      }\n    }));\n  }\n\n  _openFullscreen() {\n    this.isFullscreen = true;\n    document.body.style.overflow = 'hidden';\n  }\n\n  _closeFullscreen() {\n    this.isFullscreen = false;\n    document.body.style.overflow = '';\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.isFullscreen) {\n      document.body.style.overflow = '';\n    }\n  }\n}"]}
+{"version":3,"file":"video.component.js","sourceRoot":"","sources":["../../../src/components/video/video.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { NuralyUIBaseMixin } from \"../../shared/base-mixin.js\";\nimport styles from \"./video.style.js\";\nimport { VideoPreload } from \"./video.types.js\";\n\n@customElement('nr-video')\nexport class NrVideoElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  @property({ type: String })\n  src!: string;\n\n  @property({ type: String })\n  poster?: string;\n\n  @property({ type: String })\n  width = 'auto';\n\n  @property({ type: String })\n  height = 'auto';\n\n  @property({ type: Boolean })\n  autoplay = false;\n\n  @property({ type: Boolean })\n  loop = false;\n\n  @property({ type: Boolean })\n  muted = false;\n\n  @property({ type: Boolean })\n  controls = true;\n\n  @property({ type: String })\n  preload: VideoPreload = VideoPreload.Metadata;\n\n  @property({ type: Boolean })\n  previewable = false;\n\n  @property({ type: Boolean, reflect: true })\n  block = false;\n\n  @state()\n  private showPreview = false;\n\n  @state()\n  private hasError = false;\n\n  private readonly defaultFallback = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI0MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNGM0Y0RjYiLz48cGF0aCBkPSJNMTg4IDY5TDE2OCA4OU0xNjggNjlMMTg4IDg5IiBzdHJva2U9IiM5Q0EzQUYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+';\n\n  private handleError() {\n    this.hasError = true;\n    this.dispatchEvent(new CustomEvent('nr-video-error', {\n      bubbles: true,\n      composed: true,\n      detail: { error: `Error loading video: ${this.src}`, src: this.src }\n    }));\n  }\n\n  private handlePlay() {\n    this.dispatchEvent(new CustomEvent('nr-video-play', {\n      bubbles: true,\n      composed: true,\n      detail: { src: this.src }\n    }));\n  }\n\n  private handlePause() {\n    this.dispatchEvent(new CustomEvent('nr-video-pause', {\n      bubbles: true,\n      composed: true,\n      detail: { src: this.src }\n    }));\n  }\n\n  private handleEnded() {\n    this.dispatchEvent(new CustomEvent('nr-video-ended', {\n      bubbles: true,\n      composed: true,\n      detail: { src: this.src }\n    }));\n  }\n\n  private showPreviewModal() {\n    if (this.previewable && !this.hasError) {\n      this.showPreview = true;\n      this.dispatchEvent(new CustomEvent('nr-video-preview-open', {\n        bubbles: true,\n        composed: true,\n        detail: { src: this.src }\n      }));\n    }\n  }\n\n  private closePreviewModal() {\n    this.showPreview = false;\n    this.dispatchEvent(new CustomEvent('nr-video-preview-close', {\n      bubbles: true,\n      composed: true,\n      detail: { src: this.src }\n    }));\n  }\n\n  override render() {\n    const containerClasses = {\n      'video-container': true,\n      'video--error': this.hasError\n    };\n\n    const videoStyles: Record<string, string> = {\n      width: typeof this.width === 'number' ? `${this.width}px` : this.width,\n      height: typeof this.height === 'number' ? `${this.height}px` : this.height,\n    };\n\n    if (this.hasError) {\n      return html`\n        <div class=${classMap(containerClasses)}>\n          <div class=\"error-message\">\n            <img class=\"error-icon\" src=${this.defaultFallback} alt=\"Video error\" />\n            <p>Unable to load video</p>\n          </div>\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <video\n          style=${styleMap(videoStyles)}\n          ?autoplay=${this.autoplay}\n          ?loop=${this.loop}\n          ?muted=${this.muted}\n          ?controls=${this.controls}\n          preload=${this.preload}\n          poster=${this.poster || ''}\n          @error=${this.handleError}\n          @play=${this.handlePlay}\n          @pause=${this.handlePause}\n          @ended=${this.handleEnded}\n        >\n          <source src=${this.src} />\n          Your browser does not support the video tag.\n        </video>\n        ${this.previewable ? html`\n          <button class=\"preview-button\" @click=${this.showPreviewModal}>\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M5.5 5.5A.5.5 0 0 1 6 6v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0V6z\"/>\n              <path d=\"M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2z\"/>\n            </svg>\n            Fullscreen\n          </button>\n        ` : ''}\n        ${this.showPreview ? html`\n          <div class=\"preview-modal\" @click=${this.closePreviewModal}>\n            <button class=\"preview-close\" @click=${this.closePreviewModal} aria-label=\"Close preview\">×</button>\n            <video\n              ?autoplay=${true}\n              ?loop=${this.loop}\n              ?muted=${this.muted}\n              controls\n              poster=${this.poster || ''}\n            >\n              <source src=${this.src} />\n            </video>\n          </div>\n        ` : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-video': NrVideoElement;\n  }\n}\n"]}

package/video.style.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=video.style.d.ts.map

package/video.style.js

@@ -0,0 +1,124 @@
+import { css } from "lit";
+export default css `
+  :host {
+    display: inline-block;
+    box-sizing: border-box;
+  }
+
+  :host([block]) {
+    display: block;
+  }
+
+  .video-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: var(--nuraly-video-bg, #000);
+  }
+
+  video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--nuraly-video-border-radius, 4px);
+  }
+
+  .video--error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    background-color: var(--nuraly-video-error-bg, #f5f5f5);
+    color: var(--nuraly-video-error-color, #999);
+  }
+
+  .error-message {
+    text-align: center;
+    padding: 20px;
+  }
+
+  .error-icon {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 16px;
+    opacity: 0.5;
+  }
+
+  /* Preview/Fullscreen Modal */
+  .preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--nuraly-video-preview-bg, rgba(0, 0, 0, 0.95));
+    z-index: var(--nuraly-video-preview-zindex, 1000);
+    animation: fadeIn 0.3s ease;
+  }
+
+  .preview-modal video {
+    max-width: 90%;
+    max-height: 90%;
+    border-radius: var(--nuraly-video-preview-border-radius, 4px);
+  }
+
+  .preview-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    background: var(--nuraly-video-preview-close-bg, rgba(255, 255, 255, 0.2));
+    border: none;
+    border-radius: 50%;
+    color: var(--nuraly-video-preview-close-color, white);
+    font-size: 24px;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+  }
+
+  .preview-close:hover {
+    background: var(--nuraly-video-preview-close-hover-bg, rgba(255, 255, 255, 0.3));
+  }
+
+  .preview-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: var(--nuraly-video-fullscreen-btn-bg, rgba(0, 0, 0, 0.5));
+    border: none;
+    border-radius: 4px;
+    padding: 8px 12px;
+    cursor: pointer;
+    color: var(--nuraly-video-fullscreen-btn-color, white);
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: background-color 0.3s ease;
+    z-index: 10;
+  }
+
+  .preview-button:hover {
+    background-color: var(--nuraly-video-fullscreen-btn-hover-bg, rgba(0, 0, 0, 0.7));
+  }
+
+  /* Animations */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+//# sourceMappingURL=video.style.js.map

package/video.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.style.js","sourceRoot":"","sources":["../../../src/components/video/video.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHjB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\n  :host {\n    display: inline-block;\n    box-sizing: border-box;\n  }\n\n  :host([block]) {\n    display: block;\n  }\n\n  .video-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    background-color: var(--nuraly-video-bg, #000);\n  }\n\n  video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: var(--nuraly-video-border-radius, 4px);\n  }\n\n  .video--error {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    background-color: var(--nuraly-video-error-bg, #f5f5f5);\n    color: var(--nuraly-video-error-color, #999);\n  }\n\n  .error-message {\n    text-align: center;\n    padding: 20px;\n  }\n\n  .error-icon {\n    width: 64px;\n    height: 64px;\n    margin: 0 auto 16px;\n    opacity: 0.5;\n  }\n\n  /* Preview/Fullscreen Modal */\n  .preview-modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--nuraly-video-preview-bg, rgba(0, 0, 0, 0.95));\n    z-index: var(--nuraly-video-preview-zindex, 1000);\n    animation: fadeIn 0.3s ease;\n  }\n\n  .preview-modal video {\n    max-width: 90%;\n    max-height: 90%;\n    border-radius: var(--nuraly-video-preview-border-radius, 4px);\n  }\n\n  .preview-close {\n    position: absolute;\n    top: 20px;\n    right: 20px;\n    width: 40px;\n    height: 40px;\n    background: var(--nuraly-video-preview-close-bg, rgba(255, 255, 255, 0.2));\n    border: none;\n    border-radius: 50%;\n    color: var(--nuraly-video-preview-close-color, white);\n    font-size: 24px;\n    line-height: 1;\n    cursor: pointer;\n    transition: background-color 0.3s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n  }\n\n  .preview-close:hover {\n    background: var(--nuraly-video-preview-close-hover-bg, rgba(255, 255, 255, 0.3));\n  }\n\n  .preview-button {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    background-color: var(--nuraly-video-fullscreen-btn-bg, rgba(0, 0, 0, 0.5));\n    border: none;\n    border-radius: 4px;\n    padding: 8px 12px;\n    cursor: pointer;\n    color: var(--nuraly-video-fullscreen-btn-color, white);\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    transition: background-color 0.3s ease;\n    z-index: 10;\n  }\n\n  .preview-button:hover {\n    background-color: var(--nuraly-video-fullscreen-btn-hover-bg, rgba(0, 0, 0, 0.7));\n  }\n\n  /* Animations */\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n`;\n"]}