@c4h/chuci 0.1.0 → 0.2.1

package/src/components/viewer/cc-viewer-video.ts

@@ -1,110 +1,110 @@
-import { CcViewerBase } from './cc-viewer-base'
-
-export class CcViewerVideo extends CcViewerBase {
-  private videoUrl = ''
-  private fitToContainer = false
-  
-  static get observedAttributes() {
-    return ['show', 'fit-to-container']
-  }
-  
-  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
-    if (name === 'show') {
-      this.isShow = newValue === 'true'
-    } else if (name === 'fit-to-container') {
-      this.fitToContainer = newValue === 'true'
-    }
-    super.attributeChangedCallback(name, oldValue, newValue)
-  }
-  
-  protected doOpen(url: string): void {
-    this.videoUrl = url
-  }
-  
-  protected doClose(): void {
-    // Pause video before closing
-    const video = this.query('video')
-    if (video && 'pause' in video) {
-      (video as HTMLVideoElement).pause()
-    }
-    this.videoUrl = ''
-  }
-  
-  protected getViewerContent(): string {
-    return `
-      <div class="video-container">
-        ${this.videoUrl ? `
-          <video
-            src="${this.videoUrl}"
-            controls
-            controlsList="nodownload"
-            class="${this.fitToContainer ? 'fit-to-container' : ''}"
-          >
-            Your browser does not support the video tag.
-          </video>
-        ` : '<div class="video-error">No video URL provided</div>'}
-      </div>
-    `
-  }
-  
-  protected getCustomStyles(): string {
-    return `
-      .video-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        background: #000;
-      }
-      
-      video {
-        max-width: 100%;
-        max-height: 100%;
-        width: auto;
-        height: auto;
-        outline: none;
-      }
-      
-      video.fit-to-container {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-      
-      .video-error {
-        color: #fff;
-        text-align: center;
-        padding: 20px;
-      }
-    `
-  }
-  
-  protected onAfterRender(): void {
-    const video = this.query('video')
-    if (video) {
-      video.addEventListener('error', (e) => this.handleVideoError(e))
-    }
-  }
-  
-  private handleVideoError(_e: Event) {
-    const container = this.query('.video-container')
-    if (container) {
-      container.innerHTML = `
-        <div class="video-error">
-          Failed to load video: ${this.videoUrl}
-        </div>
-      `
-    }
-  }
-}
-
-if (!customElements.get('cc-viewer-video')) {
-  customElements.define('cc-viewer-video', CcViewerVideo)
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'cc-viewer-video': CcViewerVideo
-  }
+import { CcViewerBase } from './cc-viewer-base'
+
+export class CcViewerVideo extends CcViewerBase {
+  private videoUrl = ''
+  private fitToContainer = false
+  
+  static get observedAttributes() {
+    return ['show', 'fit-to-container']
+  }
+  
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (name === 'show') {
+      this.isShow = newValue === 'true'
+    } else if (name === 'fit-to-container') {
+      this.fitToContainer = newValue === 'true'
+    }
+    super.attributeChangedCallback(name, oldValue, newValue)
+  }
+  
+  protected doOpen(url: string): void {
+    this.videoUrl = url
+  }
+  
+  protected doClose(): void {
+    // Pause video before closing
+    const video = this.query('video')
+    if (video && 'pause' in video) {
+      (video as HTMLVideoElement).pause()
+    }
+    this.videoUrl = ''
+  }
+  
+  protected getViewerContent(): string {
+    return `
+      <div class="video-container">
+        ${this.videoUrl ? `
+          <video
+            src="${this.videoUrl}"
+            controls
+            controlsList="nodownload"
+            class="${this.fitToContainer ? 'fit-to-container' : ''}"
+          >
+            Your browser does not support the video tag.
+          </video>
+        ` : '<div class="video-error">No video URL provided</div>'}
+      </div>
+    `
+  }
+  
+  protected getCustomStyles(): string {
+    return `
+      .video-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background: #000;
+      }
+      
+      video {
+        max-width: 100%;
+        max-height: 100%;
+        width: auto;
+        height: auto;
+        outline: none;
+      }
+      
+      video.fit-to-container {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      
+      .video-error {
+        color: #fff;
+        text-align: center;
+        padding: 20px;
+      }
+    `
+  }
+  
+  protected onAfterRender(): void {
+    const video = this.query('video')
+    if (video) {
+      video.addEventListener('error', (e) => this.handleVideoError(e))
+    }
+  }
+  
+  private handleVideoError(_e: Event) {
+    const container = this.query('.video-container')
+    if (container) {
+      container.innerHTML = `
+        <div class="video-error">
+          Failed to load video: ${this.videoUrl}
+        </div>
+      `
+    }
+  }
+}
+
+if (!customElements.get('cc-viewer-video')) {
+  customElements.define('cc-viewer-video', CcViewerVideo)
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cc-viewer-video': CcViewerVideo
+  }
 }

package/src/components/viewer/cc-viewer-youtube.ts

@@ -1,76 +1,76 @@
-import { CcViewerBase } from './cc-viewer-base'
-
-export class CcViewerYoutube extends CcViewerBase {
-  private videoUrl = ''
-  
-  static get observedAttributes() {
-    return ['show']
-  }
-  
-  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
-    if (name === 'show') {
-      this.isShow = newValue === 'true'
-    }
-    super.attributeChangedCallback(name, oldValue, newValue)
-  }
-  
-  protected doOpen(videoUrl: string): void {
-    // Convert YouTube URL to embed format
-    const videoId = this.extractYouTubeId(videoUrl)
-    if (videoId) {
-      this.videoUrl = `https://www.youtube.com/embed/${videoId}`
-    } else {
-      this.videoUrl = videoUrl
-    }
-  }
-  
-  private extractYouTubeId(url: string): string | null {
-    // Handle various YouTube URL formats
-    const patterns = [
-      /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
-      /youtube\.com\/watch\?.*v=([^&\n?#]+)/
-    ]
-    
-    for (const pattern of patterns) {
-      const match = url.match(pattern)
-      if (match) {
-        return match[1]
-      }
-    }
-    
-    return null
-  }
-  
-  protected doClose(): void {
-    const iframeEl = this.query('.iframe') as HTMLIFrameElement
-    if (iframeEl) {
-      iframeEl.src = ''
-    }
-    this.videoUrl = ''
-  }
-  
-  protected getViewerContent(): string {
-    return `<iframe class="iframe" src="${this.videoUrl}" allowfullscreen></iframe>`
-  }
-  
-  protected getCustomStyles(): string {
-    return `
-      .iframe {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        border: 0;
-      }
-    `
-  }
-}
-
-if (!customElements.get('cc-viewer-youtube')) {
-  customElements.define('cc-viewer-youtube', CcViewerYoutube)
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'cc-viewer-youtube': CcViewerYoutube
-  }
+import { CcViewerBase } from './cc-viewer-base'
+
+export class CcViewerYoutube extends CcViewerBase {
+  private videoUrl = ''
+  
+  static get observedAttributes() {
+    return ['show']
+  }
+  
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (name === 'show') {
+      this.isShow = newValue === 'true'
+    }
+    super.attributeChangedCallback(name, oldValue, newValue)
+  }
+  
+  protected doOpen(videoUrl: string): void {
+    // Convert YouTube URL to embed format
+    const videoId = this.extractYouTubeId(videoUrl)
+    if (videoId) {
+      this.videoUrl = `https://www.youtube.com/embed/${videoId}`
+    } else {
+      this.videoUrl = videoUrl
+    }
+  }
+  
+  private extractYouTubeId(url: string): string | null {
+    // Handle various YouTube URL formats
+    const patterns = [
+      /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+      /youtube\.com\/watch\?.*v=([^&\n?#]+)/
+    ]
+    
+    for (const pattern of patterns) {
+      const match = url.match(pattern)
+      if (match) {
+        return match[1]
+      }
+    }
+    
+    return null
+  }
+  
+  protected doClose(): void {
+    const iframeEl = this.query('.iframe') as HTMLIFrameElement
+    if (iframeEl) {
+      iframeEl.src = ''
+    }
+    this.videoUrl = ''
+  }
+  
+  protected getViewerContent(): string {
+    return `<iframe class="iframe" src="${this.videoUrl}" allowfullscreen></iframe>`
+  }
+  
+  protected getCustomStyles(): string {
+    return `
+      .iframe {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+    `
+  }
+}
+
+if (!customElements.get('cc-viewer-youtube')) {
+  customElements.define('cc-viewer-youtube', CcViewerYoutube)
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cc-viewer-youtube': CcViewerYoutube
+  }
 }