astro-tractstack 2.0.0-rc.0

package/templates/src/components/widgets/BunnyVideoHero.astro

@@ -0,0 +1,775 @@
+---
+export interface Props {
+  videoUrl: string;
+  title: string;
+  chapters?: any[];
+  description?: string;
+}
+
+const { videoUrl, title, chapters = [], description = '' } = Astro.props;
+const hasChapters = Array.isArray(chapters) && chapters.length > 0;
+
+const serializedChapters = hasChapters ? JSON.stringify(chapters) : '';
+---
+
+<astro-bunny-video
+  data-src={videoUrl}
+  data-title={title}
+  data-has-chapters={hasChapters ? 'true' : 'false'}
+  data-chapters={serializedChapters}
+  data-description={description}
+>
+  <div class="w-full">
+    <div
+      id="video-container"
+      class="video-container relative w-full"
+      style="aspect-ratio: 16/9;"
+      data-player-container
+    >
+      <!-- Player will be inserted here -->
+      {
+        hasChapters && (
+          <div class="chapter-title-container absolute right-4 top-4 z-10 hidden rounded-md bg-black/70 px-3 py-1 text-sm text-white">
+            <span class="chapter-title" />
+            <span class="read-more ml-1 hidden text-xs text-blue-300 underline">
+              [Read More]
+            </span>
+          </div>
+        )
+      }
+    </div>
+
+    {
+      hasChapters && (
+        <div class="chapters-container mt-4 overflow-hidden rounded-md border border-gray-200 bg-white">
+          <div class="chapters-header flex cursor-pointer items-center justify-between bg-gray-50 px-4 py-2">
+            <h3 class="text-sm font-bold text-gray-900">Video Chapters</h3>
+            <span class="toggle-text font-bold text-gray-700">
+              Show Chapters
+            </span>
+          </div>
+
+          <div class="chapters-content hidden">
+            <div class="current-chapter border-b border-gray-100 p-3">
+              <h4 class="current-chapter-title font-bold" />
+              <p class="current-chapter-description mt-1 text-sm text-gray-600" />
+            </div>
+
+            <ul class="chapters-list divide-y divide-gray-100" />
+          </div>
+        </div>
+      )
+    }
+  </div>
+</astro-bunny-video>
+
+<script>
+  class AstroBunnyVideo extends HTMLElement {
+    private videoUrl: string = '';
+    private videoTitle: string = '';
+    private videoId: string = '';
+    private currentIframe: HTMLIFrameElement | null = null;
+    private videoContainer: HTMLElement | null = null;
+    private player: any = null;
+    private hasChapters: boolean = false;
+    private chapters: any[] = [];
+    private activeChapter: any | null = null;
+    private chapterWatcher: ReturnType<typeof setInterval> | null = null;
+
+    private chapterTitleContainer: HTMLElement | null = null;
+    private chapterTitle: HTMLElement | null = null;
+    private chaptersHeader: HTMLElement | null = null;
+    private chaptersContent: HTMLElement | null = null;
+    private currentChapterTitle: HTMLElement | null = null;
+    private currentChapterDescription: HTMLElement | null = null;
+    private chaptersList: HTMLElement | null = null;
+    private handleTitleClick: ((e: MouseEvent) => void) | null = null;
+    private handleTitleKeydown: ((e: KeyboardEvent) => void) | null = null;
+
+    constructor() {
+      super();
+      this.videoUrl = this.dataset.src || '';
+      this.videoTitle = this.dataset.title || '';
+      this.hasChapters = this.dataset.hasChapters === 'true';
+      if (this.hasChapters && this.dataset.chapters) {
+        try {
+          const rawChapters = JSON.parse(this.dataset.chapters);
+          this.chapters = this.normalizeChapters(rawChapters);
+        } catch (error) {
+          console.error('Error parsing chapters:', error);
+          this.chapters = [];
+          this.hasChapters = false;
+        }
+      }
+      try {
+        if (this.videoUrl) {
+          const urlObj = new URL(this.videoUrl);
+          if (
+            urlObj.hostname === 'iframe.mediadelivery.net' &&
+            urlObj.pathname.startsWith('/embed/')
+          ) {
+            const pathParts = urlObj.pathname.split('/');
+            if (pathParts.length >= 4) {
+              this.videoId = `${pathParts[2]}/${pathParts[3]}`;
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Error extracting video ID from URL:', error);
+      }
+    }
+
+    private normalizeChapters(chapters: any[]): any[] {
+      if (!Array.isArray(chapters)) return [];
+
+      return chapters.map((chapter) => ({
+        startTime:
+          typeof chapter.startTime === 'number' ? chapter.startTime : 0,
+        endTime:
+          typeof chapter.endTime === 'number' ? chapter.endTime : Infinity,
+        title: typeof chapter.title === 'string' ? chapter.title : 'Untitled',
+        description:
+          typeof chapter.description === 'string' ? chapter.description : '',
+        linkedPaneId:
+          typeof chapter.linkedPaneId === 'string'
+            ? chapter.linkedPaneId
+            : undefined,
+      }));
+    }
+
+    private formatTime(seconds: number): string {
+      const mins = Math.floor(seconds / 60);
+      const secs = Math.floor(seconds % 60);
+      return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    private getBunnyPlayer(elementId: string): any {
+      if (typeof window.playerjs === 'undefined') {
+        throw new Error('PlayerJS library not loaded');
+      }
+      return new window.playerjs.Player(elementId);
+    }
+
+    connectedCallback() {
+      this.initializeVideo(this.getStartTime());
+      if (this.hasChapters) {
+        setTimeout(() => {
+          this.findUIElements();
+          this.setupChapters();
+        }, 100);
+      }
+      document.addEventListener('astro:page-load', this.handlePageLoad);
+      document.addEventListener(
+        'updateVideo',
+        this.handleUpdateVideo as EventListener
+      );
+    }
+
+    disconnectedCallback() {
+      this.cleanupChapterEvents();
+
+      if (this.chapterWatcher) {
+        clearInterval(this.chapterWatcher);
+        this.chapterWatcher = null;
+      }
+
+      if (this.player) {
+        this.player.off('ready');
+        this.player = null;
+      }
+
+      document.removeEventListener('astro:page-load', this.handlePageLoad);
+      document.removeEventListener(
+        'updateVideo',
+        this.handleUpdateVideo as EventListener
+      );
+
+      this.activeChapter = null;
+      this.currentIframe = null;
+    }
+
+    private findUIElements() {
+      this.videoContainer = this.querySelector('.video-container');
+      this.chapterTitleContainer = this.querySelector(
+        '.chapter-title-container'
+      );
+      this.chapterTitle = this.querySelector('.chapter-title');
+      this.chaptersHeader = this.querySelector('.chapters-header');
+      this.chaptersContent = this.querySelector('.chapters-content');
+      this.currentChapterTitle = this.querySelector('.current-chapter-title');
+      this.currentChapterDescription = this.querySelector(
+        '.current-chapter-description'
+      );
+      this.chaptersList = this.querySelector('.chapters-list');
+    }
+
+    private setupChapters() {
+      if (!this.hasChapters || this.chapters.length === 0) return;
+      this.setupChapterListeners();
+      this.renderChaptersList();
+      this.initializePlayerAPI();
+      const toggleText = this.chaptersHeader?.querySelector('.toggle-text');
+      if (toggleText && this.chaptersContent?.classList.contains('hidden')) {
+        toggleText.textContent = 'Show Chapters';
+      }
+    }
+
+    private setupChapterListeners() {
+      if (this.chaptersHeader && this.chaptersContent) {
+        this.chaptersHeader.addEventListener('click', () => {
+          if (this.chaptersContent) {
+            const isHidden = this.chaptersContent.classList.contains('hidden');
+            this.chaptersContent.classList.toggle('hidden');
+            const toggleText =
+              this.chaptersHeader?.querySelector('.toggle-text');
+            if (toggleText) {
+              toggleText.textContent = isHidden ? 'Hide' : 'Show Chapters';
+            }
+          }
+        });
+      }
+    }
+
+    private getStartTime(): string | null {
+      const urlParams = new URLSearchParams(window.location.search);
+      return urlParams.get('t');
+    }
+
+    private initializeVideo(t: string | null = null): void {
+      if (!this.videoContainer) {
+        this.videoContainer = this.querySelector('.video-container');
+        if (!this.videoContainer) {
+          console.error('Video container not found');
+          return;
+        }
+      }
+
+      let startSeconds = -1;
+      if (t) {
+        const match = t.match(/^(\d+)s$/);
+        startSeconds = match && match[1] ? parseInt(match[1]) : 0;
+      }
+
+      if (
+        this.currentIframe &&
+        this.player &&
+        typeof this.player.setCurrentTime === 'function' &&
+        startSeconds >= 0
+      ) {
+        try {
+          this.player.setCurrentTime(startSeconds);
+
+          if (this.videoContainer) {
+            setTimeout(() => {
+              this.videoContainer?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+              });
+            }, 0);
+          }
+
+          setTimeout(() => {
+            if (typeof this.player.play === 'function') {
+              this.player.play();
+            } else {
+              this.player.call?.('play');
+            }
+          }, 750);
+
+          return;
+        } catch (error) {
+          console.error('Error seeking with player API:', error);
+        }
+      }
+
+      if (
+        this.currentIframe &&
+        this.videoContainer.contains(this.currentIframe)
+      ) {
+        this.videoContainer.removeChild(this.currentIframe);
+        this.currentIframe = null;
+      }
+
+      this.player = null;
+
+      const iframe = document.createElement('iframe');
+      const iframeId = `bunny-player-${Math.random().toString(36).substring(2, 9)}`;
+      iframe.id = iframeId;
+
+      const params = new URLSearchParams({
+        autoplay: startSeconds >= 0 ? '1' : '0',
+        loop: 'false',
+        muted: 'false',
+        preload: 'true',
+        responsive: 'true',
+      });
+
+      if (startSeconds >= 0) {
+        params.set('t', startSeconds.toString());
+      }
+
+      iframe.src = `${this.videoUrl}?${params.toString()}`;
+      iframe.width = '100%';
+      iframe.height = '100%';
+      iframe.style.position = 'absolute';
+      iframe.style.top = '0';
+      iframe.style.left = '0';
+      iframe.title = this.videoTitle;
+      iframe.setAttribute('playsinline', '');
+      iframe.setAttribute('allow', 'autoplay; fullscreen');
+      iframe.setAttribute('loading', 'lazy');
+
+      const loader = document.createElement('div');
+      loader.className =
+        'absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 text-white';
+      loader.innerHTML =
+        '<div class="text-center"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div><div>Loading video...</div></div>';
+
+      this.videoContainer.appendChild(loader);
+      this.videoContainer.appendChild(iframe);
+      this.currentIframe = iframe;
+
+      iframe.onload = () => {
+        loader.remove();
+
+        setTimeout(() => {
+          this.initializePlayerAPI();
+        }, 100);
+
+        if (startSeconds >= 0 && this.videoContainer) {
+          setTimeout(() => {
+            this.videoContainer?.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+            });
+          }, 0);
+        }
+      };
+    }
+
+    private initializePlayerAPI(): void {
+      if (!this.currentIframe || !this.currentIframe.id) {
+        console.error('No iframe or iframe ID found');
+        return;
+      }
+      try {
+        if (typeof window.playerjs === 'undefined') {
+          console.error('PlayerJS library not loaded');
+          return;
+        }
+        this.player = this.getBunnyPlayer(this.currentIframe.id);
+        this.player.on('ready', () => {
+          if (this.player && !this.player.pause) {
+            this.player.pause = () => {
+              this.player.call('pause');
+            };
+          }
+
+          if (this.player && !this.player.play) {
+            this.player.play = () => {
+              this.player.call('play');
+            };
+          }
+
+          if (this.hasChapters) {
+            this.startChapterTracking();
+          }
+        });
+      } catch (error) {
+        console.error('Failed to initialize player API:', error);
+        this.player = null;
+      }
+    }
+
+    private startChapterTracking(): void {
+      if (this.chapterWatcher) {
+        clearInterval(this.chapterWatcher);
+      }
+      this.chapterWatcher = setInterval(() => {
+        if (this.player) {
+          this.player.getCurrentTime((time: number) => {
+            this.checkCurrentTime(time);
+          });
+        }
+      }, 1000);
+    }
+
+    private cleanupChapterEvents(): void {
+      if (!this.chapterTitleContainer) return;
+
+      if (this.handleTitleClick) {
+        this.chapterTitleContainer.removeEventListener(
+          'click',
+          this.handleTitleClick
+        );
+        this.handleTitleClick = null;
+      }
+
+      if (this.handleTitleKeydown) {
+        this.chapterTitleContainer.removeEventListener(
+          'keydown',
+          this.handleTitleKeydown
+        );
+        this.handleTitleKeydown = null;
+      }
+
+      this.chapterTitleContainer.setAttribute('data-linkable', 'false');
+      this.chapterTitleContainer.style.cursor = 'default';
+      this.chapterTitleContainer.setAttribute('role', 'status');
+      this.chapterTitleContainer.removeAttribute('aria-label');
+      this.chapterTitleContainer.removeAttribute('tabIndex');
+
+      const readMoreElem =
+        this.chapterTitleContainer.querySelector('.read-more');
+      if (readMoreElem) {
+        readMoreElem.classList.add('hidden');
+      }
+    }
+
+    private checkCurrentTime(currentTime: number): void {
+      const chapter = this.findActiveChapter(currentTime);
+
+      if (chapter) {
+        const isNewChapter =
+          !this.activeChapter ||
+          this.activeChapter.startTime !== chapter.startTime;
+
+        if (isNewChapter) {
+          if (this.activeChapter) {
+            this.cleanupChapterEvents();
+          }
+
+          this.activeChapter = chapter;
+          this.updateChapter(chapter);
+          this.showChapterTitle(chapter);
+        }
+      } else if (!chapter && this.activeChapter) {
+        this.activeChapter = null;
+        this.hideChapterTitle();
+        this.cleanupChapterEvents();
+      }
+    }
+
+    private findActiveChapter(currentTime: number): any | null {
+      return (
+        this.chapters.find(
+          (chapter) =>
+            currentTime >= chapter.startTime &&
+            currentTime < (chapter.endTime || Infinity)
+        ) || null
+      );
+    }
+
+    private updateChapter(chapter: any): void {
+      if (this.currentChapterTitle)
+        this.currentChapterTitle.textContent = chapter.title;
+      if (this.currentChapterDescription) {
+        this.currentChapterDescription.textContent = chapter.description || '';
+        this.currentChapterDescription.style.display = chapter.description
+          ? 'block'
+          : 'none';
+      }
+      if (this.chaptersList) {
+        const items = this.chaptersList.querySelectorAll('li');
+        items.forEach((item) =>
+          item.classList.remove('bg-blue-50', 'border-l-2', 'border-blue-500')
+        );
+        const activeItem = this.chaptersList.querySelector(
+          `li[data-start-time="${chapter.startTime}"]`
+        );
+        if (activeItem) {
+          activeItem.classList.add(
+            'bg-blue-50',
+            'border-l-2',
+            'border-blue-500'
+          );
+          activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+      }
+
+      if (this.chapterTitleContainer) {
+        const isLinkable = !!chapter.linkedPaneId;
+        this.chapterTitleContainer.setAttribute(
+          'data-linkable',
+          isLinkable.toString()
+        );
+        this.chapterTitleContainer.style.cursor = isLinkable
+          ? 'pointer'
+          : 'default';
+
+        if (isLinkable) {
+          this.chapterTitleContainer.setAttribute('role', 'button');
+          this.chapterTitleContainer.setAttribute(
+            'aria-label',
+            `Go to section: ${chapter.title}`
+          );
+          this.chapterTitleContainer.tabIndex = 0;
+        } else {
+          this.chapterTitleContainer.setAttribute('role', 'status');
+          this.chapterTitleContainer.removeAttribute('aria-label');
+          this.chapterTitleContainer.removeAttribute('tabIndex');
+        }
+      }
+    }
+
+    private showChapterTitle(chapter: any): void {
+      if (this.chapterTitle && this.chapterTitleContainer) {
+        this.chapterTitle.textContent = chapter.title || 'Untitled Chapter';
+        this.chapterTitleContainer.classList.remove('hidden');
+
+        const readMoreElem =
+          this.chapterTitleContainer.querySelector('.read-more');
+
+        if (chapter.linkedPaneId && readMoreElem) {
+          readMoreElem.classList.remove('hidden');
+
+          this.chapterTitleContainer.removeEventListener(
+            'click',
+            this.handleTitleClick as EventListener
+          );
+          this.chapterTitleContainer.removeEventListener(
+            'keydown',
+            this.handleTitleKeydown as EventListener
+          );
+
+          this.handleTitleClick = (_: MouseEvent) =>
+            this.navigateToLinkedPane(chapter.linkedPaneId);
+          this.handleTitleKeydown = (e: Event) => {
+            const keyEvent = e as KeyboardEvent;
+            if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
+              e.preventDefault();
+              this.navigateToLinkedPane(chapter.linkedPaneId);
+            }
+          };
+
+          this.chapterTitleContainer.addEventListener(
+            'click',
+            this.handleTitleClick
+          );
+          this.chapterTitleContainer.addEventListener(
+            'keydown',
+            this.handleTitleKeydown
+          );
+        } else if (readMoreElem) {
+          readMoreElem.classList.add('hidden');
+        }
+      }
+    }
+
+    private navigateToLinkedPane(paneId: string | undefined): void {
+      if (!paneId) return;
+
+      const paneElement = document.getElementById(`pane-${paneId}`);
+      if (!paneElement) {
+        console.warn(`Linked pane with id ${paneId} not found in document`);
+        return;
+      }
+
+      if (this.player) {
+        this.player.pause();
+      }
+
+      const headerOffset = 60;
+      const elementPosition = paneElement.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.scrollY - headerOffset;
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: 'smooth',
+      });
+
+      paneElement.classList.add('chapter-linked-highlight');
+      setTimeout(() => {
+        paneElement.classList.remove('chapter-linked-highlight');
+      }, 2000);
+
+      paneElement.setAttribute('tabindex', '-1');
+      paneElement.focus();
+      setTimeout(() => {
+        paneElement.removeAttribute('tabindex');
+      }, 2100);
+    }
+
+    private hideChapterTitle(): void {
+      if (this.chapterTitleContainer) {
+        this.chapterTitleContainer.classList.add('hidden');
+
+        const readMoreElem =
+          this.chapterTitleContainer.querySelector('.read-more');
+        if (readMoreElem) {
+          readMoreElem.classList.add('hidden');
+        }
+
+        if (this.handleTitleClick) {
+          this.chapterTitleContainer.removeEventListener(
+            'click',
+            this.handleTitleClick
+          );
+        }
+        if (this.handleTitleKeydown) {
+          this.chapterTitleContainer.removeEventListener(
+            'keydown',
+            this.handleTitleKeydown
+          );
+        }
+      }
+    }
+
+    private renderChaptersList(): void {
+      if (!this.chaptersList || this.chapters.length === 0) return;
+      this.chaptersList.innerHTML = '';
+      const sortedChapters = [...this.chapters].sort(
+        (a, b) => a.startTime - b.startTime
+      );
+      sortedChapters.forEach((chapter, index) => {
+        const li = document.createElement('li');
+        li.className = 'p-3 hover:bg-gray-50 cursor-pointer';
+        li.dataset.startTime = chapter.startTime.toString();
+        const content = document.createElement('div');
+        content.className = 'flex justify-between items-center';
+        const title = document.createElement('span');
+        title.className = 'flex items-center';
+        const timeLabel = document.createElement('span');
+        timeLabel.className = 'text-sm text-gray-500 ml-auto';
+        timeLabel.textContent = this.formatTime(chapter.startTime);
+        title.innerHTML = `<span class="w-6 h-6 flex items-center justify-center bg-gray-200 rounded-full text-xs mr-2">${index + 1}</span> ${chapter.title}`;
+        content.appendChild(title);
+        content.appendChild(timeLabel);
+        li.appendChild(content);
+        li.addEventListener('click', () => this.seekToChapter(chapter));
+        if (this.chaptersList) {
+          this.chaptersList.appendChild(li);
+        }
+      });
+    }
+
+    private seekToChapter(chapter: any): void {
+      if (this.player) {
+        this.player.setCurrentTime(chapter.startTime);
+        this.player.play();
+        this.showChapterTitle(chapter);
+        this.updateChapter(chapter);
+      } else {
+        this.initializeVideo(`${chapter.startTime}s`);
+      }
+    }
+
+    private handleUpdateVideo = (event: CustomEvent): void => {
+      let startTime;
+      let videoId;
+      if (typeof event.detail === 'object' && event.detail !== null) {
+        startTime = event.detail.startTime;
+        videoId = event.detail.videoId;
+      } else {
+        startTime = event.detail;
+      }
+      if (videoId && videoId !== this.videoId) {
+        return;
+      }
+      this.initializeVideo(startTime);
+    };
+
+    private handlePageLoad = (): void => {
+      if (this.currentIframe) this.initializeVideo(this.getStartTime());
+    };
+  }
+
+  customElements.define('astro-bunny-video', AstroBunnyVideo);
+</script>
+
+<style>
+  .video-container {
+    position: relative;
+  }
+
+  .chapter-title-container {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 4px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    z-index: 10;
+    transition: opacity 0.3s ease-in-out;
+    opacity: 1;
+  }
+
+  .chapter-title-container.hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .chapter-title-container[data-linkable='true'] {
+    cursor: pointer;
+    padding-right: 16px;
+    transition: background-color 0.2s ease;
+  }
+
+  .chapter-title-container[data-linkable='true']:hover,
+  .chapter-title-container[data-linkable='true']:focus {
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+
+  .chapter-title-container[data-linkable='true']:hover .read-more,
+  .chapter-title-container[data-linkable='true']:focus .read-more {
+    text-decoration: none;
+  }
+
+  .chapter-title-container .read-more {
+    display: none;
+  }
+
+  .chapter-title-container {
+    transition: opacity 0.5s ease-out;
+  }
+
+  .chapter-title-container.fade-out {
+    opacity: 0;
+  }
+
+  .chapter-title-container[data-linkable='true'] .read-more {
+    display: inline;
+  }
+
+  .chapter-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 250px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .chapters-list li.bg-blue-50 {
+    background-color: #eff6ff;
+  }
+
+  .chapters-list li.border-l-2.border-blue-500 {
+    border-left: 2px solid #3b82f6;
+  }
+
+  @keyframes chapterLinkHighlight {
+    0% {
+      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+    }
+    30% {
+      box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.3);
+    }
+    70% {
+      box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.3);
+    }
+    100% {
+      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+    }
+  }
+
+  .chapter-linked-highlight {
+    animation: chapterLinkHighlight 2s ease-out;
+    outline: 2px solid rgba(59, 130, 246, 0.5);
+    outline-offset: 4px;
+    position: relative;
+    z-index: 10;
+  }
+</style>