@c4h/chuci 0.1.0

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

@@ -0,0 +1,190 @@
+import { CcViewerBase } from './cc-viewer-base'
+import Viewer from 'viewerjs'
+import viewerStyles from 'viewerjs/dist/viewer.css?inline'
+
+export class CcViewerImage extends CcViewerBase {
+  private viewer?: Viewer
+  private container?: HTMLDivElement
+  private imageUrl = ''
+  
+  protected doOpen(url: string): void {
+    this.imageUrl = url
+    
+    setTimeout(() => {
+      this.container = this.query('#imageContainer') ?? undefined
+      if (!this.container) return
+      
+      const img = document.createElement('img')
+      img.src = this.imageUrl
+      img.style.display = 'none'  // 元の画像を非表示に
+      
+      this.container.appendChild(img)
+      
+      // ViewerJSをインラインモードで使用して、独自のコンテナ内で表示
+      this.viewer = new Viewer(img, {
+        inline: true,  // インラインモードに変更
+        container: this.container,  // コンテナを指定
+        toolbar: {
+          zoomIn: true,
+          zoomOut: true,
+          oneToOne: true,
+          reset: true,
+          prev: false,
+          play: false,
+          next: false,
+          rotateLeft: true,
+          rotateRight: true,
+          flipHorizontal: true,
+          flipVertical: true,
+        },
+        navbar: false,
+        title: false,
+        keyboard: true,
+        backdrop: false,  // インラインモードでは背景を無効化
+        button: false,    // 閉じるボタンを無効化
+        movable: true,
+        zoomable: true,
+        rotatable: true,
+        scalable: true,
+        transition: true,
+        fullscreen: false,
+        ready: () => {
+          this.addNavigationListeners()
+        }
+      })
+      
+      // show()を呼ばない - インラインモードでは自動的に表示される
+    }, 0)
+  }
+  
+  protected doClose(): void {
+    if (this.viewer) {
+      this.viewer.destroy()
+      this.viewer = undefined
+    }
+    this.imageUrl = ''
+  }
+  
+  protected getViewerContent(): string {
+    return `
+      <div id="imageContainer">
+        ${this.isLoading ? '<div class="loading">Loading...</div>' : ''}
+      </div>
+    `
+  }
+  
+  protected getCustomStyles(): string {
+    const styles = this.css`
+      ${viewerStyles}
+      
+      :host {
+        --cc-viewer-z-index-each: 1000;
+      }
+      
+      #imageContainer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: var(--cc-viewer-z-index-each, 1000);
+        background: rgba(0, 0, 0, 0.9);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      /* ViewerJS inline mode adjustments */
+      .viewer-container {
+        width: 100% !important;
+        height: 100% !important;
+        position: relative !important;
+      }
+      
+      .viewer-canvas {
+        width: 100% !important;
+        height: 100% !important;
+      }
+      
+      /* Hide the original image */
+      #imageContainer > img {
+        display: none !important;
+      }
+      
+      /* Ensure viewer takes full space */
+      .viewer-container.viewer-inline {
+        width: 100% !important;
+        height: 100% !important;
+      }
+      
+      ${this.getNavigationStyles()}
+      
+      /* Override viewerjs styles for navigation */
+      :host ::ng-deep .viewer-container {
+        position: relative;
+      }
+    `
+    
+    return styles
+  }
+  
+  // Override to do setup after render
+  protected onAfterRender(): void {
+    if (!this.isShow || !this.imageUrl) return
+    
+    // Avoid duplicate initialization
+    if (this.viewer) return
+    
+    this.container = this.query('#imageContainer') as HTMLDivElement
+    if (!this.container) return
+    
+    const img = document.createElement('img')
+    img.src = this.imageUrl
+    img.style.display = 'none'  // 元の画像を非表示に
+    
+    this.container.appendChild(img)
+    
+    // ViewerJSをインラインモードで使用して、独自のコンテナ内で表示
+    this.viewer = new Viewer(img, {
+      inline: true,  // インラインモードに変更
+      container: this.container,  // コンテナを指定
+      toolbar: {
+        zoomIn: true,
+        zoomOut: true,
+        oneToOne: true,
+        reset: true,
+        prev: false,
+        play: false,
+        next: false,
+        rotateLeft: true,
+        rotateRight: true,
+        flipHorizontal: true,
+        flipVertical: true,
+      },
+      navbar: false,
+      title: false,
+      keyboard: true,
+      backdrop: false,  // インラインモードでは背景を無効化
+      button: false,    // 閉じるボタンを無効化
+      movable: true,
+      zoomable: true,
+      rotatable: true,
+      scalable: true,
+      transition: true,
+      fullscreen: false,
+      ready: () => {
+        this.isLoading = false
+      }
+    })
+  }
+}
+
+if (!customElements.get('cc-viewer-image')) {
+  customElements.define('cc-viewer-image', CcViewerImage)
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cc-viewer-image': CcViewerImage
+  }
+}

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

@@ -0,0 +1,86 @@
+import { CcViewerBase } from './cc-viewer-base'
+
+export class CcViewerPanorama extends CcViewerBase {
+  private imgUrl = ''
+  
+  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(imgUrl: string): void {
+    this.imgUrl = imgUrl
+  }
+  
+  protected doClose(): void {
+    const iframeEl = this.query('.iframe') as HTMLIFrameElement
+    if (iframeEl) {
+      iframeEl.srcdoc = ''
+    }
+    this.imgUrl = ''
+  }
+  
+  protected getViewerContent(): string {
+    return `<iframe class="iframe"></iframe>`
+  }
+  
+  protected getCustomStyles(): string {
+    return `
+      .iframe {
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+    `
+  }
+  
+  protected onAfterRender(): void {
+    if (this.imgUrl && this.isShow) {
+      const iframeEl = this.query('.iframe') as HTMLIFrameElement
+      if (iframeEl) {
+        const iframeHtml = `
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <title>A-Frame Panorama</title>
+              <style>
+              html,body {
+                width:100%;
+                height:100vh;
+                overflow: hidden;
+              }
+              .a-enter-vr, .a-enter-ar {
+                display: none;
+              }
+              </style>
+              <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
+            </head>
+            <body>
+              <a-scene embedded xr-mode-ui="enabled: false; XRMode: false;">
+                <a-sky src="${this.imgUrl}" rotation="0 -90 0"></a-sky>
+                <a-entity camera look-controls="reverseMouseDrag: true"></a-entity>
+              </a-scene>
+            </body>
+          </html>
+        `
+        iframeEl.srcdoc = iframeHtml
+      }
+    }
+  }
+}
+
+if (!customElements.get('cc-viewer-panorama')) {
+  customElements.define('cc-viewer-panorama', CcViewerPanorama)
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cc-viewer-panorama': CcViewerPanorama
+  }
+}

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

@@ -0,0 +1,56 @@
+export const viewerStyles = `
+  :host {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: var(--cc-viewer-z-index, 1000);
+  }
+  
+  .viewer-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .viewer-content {
+    position: relative;
+    max-width: 90%;
+    max-height: 90%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .close-button {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.3s;
+    z-index: 10;
+  }
+  
+  .close-button:hover {
+    background: rgba(0, 0, 0, 0.7);
+  }
+`

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

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

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

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