@ptcwebops/ptcw-design 2.7.4 → 2.7.6

package/dist/collection/components/ptc-theater-video-modal/ptc-theater-video-modal.js

@@ -0,0 +1,123 @@
+import { Host, h } from '@stencil/core';
+export class PtcTheaterVideoModal {
+  constructor() {
+    this.cards = undefined;
+    this.showModal = false;
+    this.currentCardIndex = 0;
+    this.filteredTagName = undefined;
+  }
+  // @Listen('filterCliked', { target: 'document' })
+  // handleFilterClick(event: CustomEvent) {
+  //   const filters = event.detail;
+  //   this.filteredTagName = filters['selected-tag'].trim();
+  // }
+  async updateData(data, currentModalIndex) {
+    // debugger
+    console.log(data);
+    console.log(this.filteredTagName);
+    this.cards = data;
+    // this.cards = data.filter((item) => {
+    //   const videoTagArr = item.vtagName.split(",").map((j) => j.trim());
+    //   if (this.filteredTagName !== undefined && this.filteredTagName !== 'reset') {
+    //     return videoTagArr.includes(this.filteredTagName);
+    //   } else {
+    //     return true;
+    //   }
+    // });
+    console.log(this.cards);
+    console.log(currentModalIndex);
+    this.currentCardIndex = currentModalIndex;
+    this.showModal = true;
+  }
+  closeCardModal() {
+    this.showModal = false;
+    this.cards = [];
+  }
+  showNextCard() {
+    if (this.currentCardIndex < this.cards.length - 1) {
+      this.currentCardIndex++;
+      this.updateVideoPlayer(this.cards[this.currentCardIndex].videoId);
+    }
+  }
+  showPrevCard() {
+    if (this.currentCardIndex > 0) {
+      this.currentCardIndex--;
+      this.updateVideoPlayer(this.cards[this.currentCardIndex].videoId);
+    }
+  }
+  componentDidUpdate() {
+    this.initializeVideo();
+  }
+  initializeVideo() {
+    const videoTag = this.hostEl.querySelector(`#bcPlayer`);
+    if (videoTag) {
+      if (globalThis.bc) {
+        new globalThis.bc(videoTag, {
+        /* your player options */
+        });
+      }
+    }
+  }
+  updateVideoPlayer(vId) {
+    // debugger
+    globalThis.videojs.getPlayer('bcPlayer').ready(function () {
+      const myPlayer = this;
+      if (vId) {
+        myPlayer.catalog.getVideo(vId, function (error, video) {
+          myPlayer.catalog.load(video);
+          console.log('Video Modal' + error);
+        });
+      }
+    });
+  }
+  render() {
+    return (h(Host, null, h("slot", null), this.showModal && (h("div", { class: "modal" }, h("div", { class: "modal-container ptc-container" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" }))))), h("div", { class: "is-grid has-col-gap-xl has-row-gap-lg" }, h("div", { class: 'is-col is-col-7-lg' }, h("div", { class: "v-modal-left" }, h("div", { class: 'v-nav' }, h("button", { onClick: () => this.showPrevCard(), disabled: this.currentCardIndex === 0 }, "Previous Video"), h("div", { class: 'v-number' }, " ", this.currentCardIndex + 1, " of ", this.cards.length), h("button", { onClick: () => this.showNextCard(), disabled: this.currentCardIndex === this.cards.length - 1 }, "Next Video")), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` }))), h("div", { class: "card-description-content" }, h("ptc-title", { type: "h3", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-shadow": "", "title-height": "densest", "title-margin": "margin-top-1", "title-weight": "w-7" }, this.cards[this.currentCardIndex].title), h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p" }, this.cards[this.currentCardIndex].cardDescription)))), h("div", { class: 'is-col is-col-5-lg' }, h("div", { class: "video-modal-description" }, h("div", { innerHTML: this.cards[this.currentCardIndex].descriptionModal })))))))));
+  }
+  static get is() { return "ptc-theater-video-modal"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-theater-video-modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-theater-video-modal.css"]
+    };
+  }
+  static get states() {
+    return {
+      "cards": {},
+      "showModal": {},
+      "currentCardIndex": {},
+      "filteredTagName": {}
+    };
+  }
+  static get methods() {
+    return {
+      "updateData": {
+        "complexType": {
+          "signature": "(data: any, currentModalIndex: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "hostEl"; }
+}

package/dist/collection/components/ptc-theater-video-playlist/ptc-theater-video-playlist.css

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+:host .card-list {
+  display: flex;
+  overflow-x: auto;
+}
+@media only screen and (min-width: 768px) {
+  :host .card-list {
+    display: block;
+  }
+}

package/dist/collection/components/ptc-theater-video-playlist/ptc-theater-video-playlist.js

@@ -0,0 +1,99 @@
+import { h } from '@stencil/core';
+export class PtcTheaterVideoPlaylist {
+  constructor() {
+    this.cards = [];
+    this.currentCardIndex = 0;
+    this.filteredTagName = undefined;
+  }
+  componentDidLoad() {
+    this.setupCards();
+    this.sortCards('');
+  }
+  handleFilterClick(event) {
+    const filters = event.detail;
+    this.filteredTagName = filters['selected-tag'];
+    this.sortCards(this.filteredTagName);
+    this.setupCards();
+  }
+  sortCards(filterVideo) {
+    const cardElements = this.host.querySelectorAll('ptc-theater-video');
+    cardElements.forEach((cardElement) => {
+      const tagNames = cardElement.getAttribute('vtag-name').split(",").map((item) => {
+        return item.trim();
+      });
+      const trimFilterVideo = filterVideo.trim();
+      if (trimFilterVideo !== "" && trimFilterVideo !== 'reset') {
+        if (tagNames.includes(trimFilterVideo)) {
+          cardElement.classList.add('show');
+          cardElement.classList.remove('hide');
+        }
+        else {
+          cardElement.classList.add('hide');
+          cardElement.classList.remove('show');
+        }
+      }
+      else {
+        cardElement.classList.add('show');
+        cardElement.classList.remove('hide');
+      }
+    });
+  }
+  setupCards() {
+    let cardData = {};
+    const cardElements = this.host.querySelectorAll('ptc-theater-video');
+    cardElements.forEach((cardElement, index) => {
+      cardData = {
+        title: cardElement.querySelector('.vcard-title').textContent,
+        cardDescription: cardElement.cardDescription,
+        descriptionModal: cardElement.querySelector('.description').innerHTML,
+        videoId: cardElement.getAttribute('video-id'),
+        vtagName: cardElement.getAttribute('vtag-name'),
+        cardNumber: cardElement.getAttribute('card-number'),
+        index: index
+      };
+      cardElement.addEventListener('click', () => {
+        this.showCardDetails(index);
+      });
+      this.cards.push(cardData);
+    });
+  }
+  showCardDetails(index) {
+    this.currentCardIndex = index;
+    // this.showModal = true;
+    const modalElement = document.querySelector('ptc-theater-video-modal');
+    if (modalElement) {
+      modalElement.updateData(this.cards, this.currentCardIndex);
+    }
+  }
+  render() {
+    return (h("div", { class: "card-list" }, h("slot", null)));
+  }
+  static get is() { return "ptc-theater-video-playlist"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-theater-video-playlist.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-theater-video-playlist.css"]
+    };
+  }
+  static get states() {
+    return {
+      "currentCardIndex": {},
+      "filteredTagName": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "filterCliked",
+        "method": "handleFilterClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/custom-elements/index.d.ts

@@ -134,6 +134,12 @@ export const PtcBreadcrumb: {
   new (): PtcBreadcrumb;
 };
 
+interface PtcBrightcovVideo extends Components.PtcBrightcovVideo, HTMLElement {}
+export const PtcBrightcovVideo: {
+  prototype: PtcBrightcovVideo;
+  new (): PtcBrightcovVideo;
+};
+
 interface PtcButton extends Components.PtcButton, HTMLElement {}
 export const PtcButton: {
   prototype: PtcButton;
@@ -224,6 +230,18 @@ export const PtcFeaturedList: {
   new (): PtcFeaturedList;
 };
 
+interface PtcFilterDropdown extends Components.PtcFilterDropdown, HTMLElement {}
+export const PtcFilterDropdown: {
+  prototype: PtcFilterDropdown;
+  new (): PtcFilterDropdown;
+};
+
+interface PtcFilterLevelTheater extends Components.PtcFilterLevelTheater, HTMLElement {}
+export const PtcFilterLevelTheater: {
+  prototype: PtcFilterLevelTheater;
+  new (): PtcFilterLevelTheater;
+};
+
 interface PtcFilterTag extends Components.PtcFilterTag, HTMLElement {}
 export const PtcFilterTag: {
   prototype: PtcFilterTag;
@@ -626,6 +644,24 @@ export const PtcTextfield: {
   new (): PtcTextfield;
 };
 
+interface PtcTheaterVideo extends Components.PtcTheaterVideo, HTMLElement {}
+export const PtcTheaterVideo: {
+  prototype: PtcTheaterVideo;
+  new (): PtcTheaterVideo;
+};
+
+interface PtcTheaterVideoModal extends Components.PtcTheaterVideoModal, HTMLElement {}
+export const PtcTheaterVideoModal: {
+  prototype: PtcTheaterVideoModal;
+  new (): PtcTheaterVideoModal;
+};
+
+interface PtcTheaterVideoPlaylist extends Components.PtcTheaterVideoPlaylist, HTMLElement {}
+export const PtcTheaterVideoPlaylist: {
+  prototype: PtcTheaterVideoPlaylist;
+  new (): PtcTheaterVideoPlaylist;
+};
+
 interface PtcTitle extends Components.PtcTitle, HTMLElement {}
 export const PtcTitle: {
   prototype: PtcTitle;