@nuralyui/video 0.0.1

package/demo/video-demo.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../video.component.js';
+export declare class HyDatePickerDemoElement extends LitElement {
+    selectedLanguage: string;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=video-demo.d.ts.map

package/demo/video-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/video/demo/video-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,uBAAuB,CAAC;AAE/B,qBACa,uBAAwB,SAAQ,UAAU;IAErD,gBAAgB,SAAQ;IAEf,MAAM;CAYhB"}

package/demo/video-demo.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import '../video.component.js';
+let HyDatePickerDemoElement = class HyDatePickerDemoElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedLanguage = 'en';
+    }
+    render() {
+        return html `
+       <hy-video-player
+       previewable="true"
+          id="url-viewer"
+          src="https://file-examples.com/storage/fe7d258bd9680a7429c6b40/2017/04/file_example_MP4_480_1_5MG.mp4"
+          width="100%"
+          height="500px"
+          previewable
+        ></hy-video-player>
+    `;
+    }
+};
+__decorate([
+    state()
+], HyDatePickerDemoElement.prototype, "selectedLanguage", void 0);
+HyDatePickerDemoElement = __decorate([
+    customElement('hy-video-demo')
+], HyDatePickerDemoElement);
+export { HyDatePickerDemoElement };
+//# sourceMappingURL=video-demo.js.map

package/demo/video-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-demo.js","sourceRoot":"","sources":["../../../../src/components/video/demo/video-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,uBAAuB,CAAC;AAG/B,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,UAAU;IAAvD;;QAEE,qBAAgB,GAAG,IAAI,CAAC;IAc1B,CAAC;IAZU,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;;KASV,CAAC;IACJ,CAAC;CACF,CAAA;AAdC;IADC,KAAK,EAAE;iEACgB;AAFb,uBAAuB;IADnC,aAAa,CAAC,eAAe,CAAC;GAClB,uBAAuB,CAgBnC;SAhBY,uBAAuB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport '../video.component.js';\n\n@customElement('hy-video-demo')\nexport class HyDatePickerDemoElement extends LitElement {\n  @state()\n  selectedLanguage = 'en';\n\n  override render() {\n    return html`\n       <hy-video-player\n       previewable=\"true\"\n          id=\"url-viewer\"\n          src=\"https://file-examples.com/storage/fe7d258bd9680a7429c6b40/2017/04/file_example_MP4_480_1_5MG.mp4\"\n          width=\"100%\"\n          height=\"500px\"\n          previewable\n        ></hy-video-player>\n    `;\n  }\n}"]}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './video.component.js';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/video/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/index.js

@@ -0,0 +1,2 @@
+export * from './video.component.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/video/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './video.component.js'"]}

package/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "@nuralyui/video",
+    "version": "0.0.1",
+    "description": "",
+    "main": "index.js",
+    "type": "module",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "ISC"
+}

package/video.component.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+export declare class HyVideoPlayer extends LitElement {
+    src: string;
+    width: string;
+    height: string;
+    fallback: null;
+    previewable: boolean;
+    private isFullscreen;
+    private hasError;
+    defaultFallBack: string;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+    _handleError(e: Event): void;
+    _openFullscreen(): void;
+    _closeFullscreen(): void;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=video.component.d.ts.map

package/video.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.component.d.ts","sourceRoot":"","sources":["../../../src/components/video/video.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,aAAc,SAAQ,UAAU;IAE3C,GAAG,EAAG,MAAM,CAAC;IAGb,KAAK,SAAU;IAGf,MAAM,SAAU;IAGhB,QAAQ,OAAQ;IAGhB,WAAW,UAAS;IAGpB,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,QAAQ,CAAS;IAGzB,eAAe,SAkBV;IAEL,OAAgB,MAAM,0BAkHpB;IAEO,MAAM;IAqEf,YAAY,CAAC,CAAC,EAAE,KAAK;IAYrB,eAAe;IAKf,gBAAgB;IAKP,oBAAoB;CAM9B"}

package/video.component.js

@@ -0,0 +1,273 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, property, state } from "lit/decorators.js";
+let HyVideoPlayer = class HyVideoPlayer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.width = 'auto';
+        this.height = 'auto';
+        this.fallback = null;
+        this.previewable = false;
+        this.isFullscreen = 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>
+  `)}`;
+    }
+    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);
+        this.hasError = true;
+        this.dispatchEvent(new CustomEvent('onError', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                error: `Error loading video: Format not supported or file cannot be loaded`
+            }
+        }));
+    }
+    _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;
+    }
+    
+    .fullscreen-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: black;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .fullscreen-header {
+      display: flex;
+      justify-content: flex-end;
+      padding: 16px;
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+    
+    .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);
+    }
+
+    .close-button:hover {
+      background-color: #f0f0f0;
+    }
+    
+    .fullscreen-content {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `;
+__decorate([
+    property()
+], HyVideoPlayer.prototype, "src", void 0);
+__decorate([
+    property()
+], HyVideoPlayer.prototype, "width", void 0);
+__decorate([
+    property()
+], HyVideoPlayer.prototype, "height", void 0);
+__decorate([
+    property({ type: Object })
+], HyVideoPlayer.prototype, "fallback", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyVideoPlayer.prototype, "previewable", void 0);
+__decorate([
+    state()
+], HyVideoPlayer.prototype, "isFullscreen", void 0);
+__decorate([
+    state()
+], HyVideoPlayer.prototype, "hasError", void 0);
+HyVideoPlayer = __decorate([
+    customElement('hy-video-player')
+], HyVideoPlayer);
+export { HyVideoPlayer };
+//# sourceMappingURL=video.component.js.map

package/video.component.js.map

@@ -0,0 +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}"]}