MediaCo list view update

packages/Mediaco-overrides/Carousel-component/carousel.component.html

@@ -0,0 +1,15 @@
+<div class="carousel-host-container">
+  <div class="carousel-frame">
+    <div class="carousel-scroll-area" #scrollContainer>
+      <div class="card-wrapper" *ngFor="let item of displayItems" #cardItem>
+        <mat-card class="inner-material-card">
+          <img [src]="item.img" alt="Card Image" />
+          <div class="card-overlay">
+            <h3>{{ item.title }}</h3>
+          </div>
+        </mat-card>
+      </div>
+    </div>
+  </div>
+  <div class="carousel-footer"></div>
+</div>

packages/Mediaco-overrides/Carousel-component/carousel.component.scss

@@ -0,0 +1,95 @@
+:host {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100vw;
+  overflow: hidden;
+  contain: content;
+}
+
+.carousel-host-container {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  padding: 0 16px;
+
+  h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+
+.carousel-scroll-area {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  height: 400px;
+  padding: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: auto;
+  box-sizing: border-box;
+  box-sizing: border-box;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  scrollbar-width: none;
+}
+
+.card-wrapper {
+  flex: 0 0 200px;
+  height: 350px;
+  margin: 0 10px;
+  transition:
+    flex-basis 0.1s linear,
+    min-width 0.1s linear;
+  will-change: flex-basis, min-width;
+  min-width: 0;
+}
+
+.inner-material-card {
+  width: 100%;
+  height: 100%;
+  padding: 0 !important;
+  overflow: hidden;
+  position: relative;
+  background: #000;
+  border-radius: 8px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .card-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 16px;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
+    color: white;
+
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}

packages/Mediaco-overrides/Carousel-component/carousel.component.ts

@@ -0,0 +1,133 @@
+import {
+  Component,
+  ElementRef,
+  ViewChildren,
+  QueryList,
+  AfterViewInit,
+  OnDestroy,
+  NgZone,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { GalleryGridComponent } from '../gallery-grid/gallery-grid.component';
+
+@Component({
+  selector: 'app-carousel',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatCardModule, MatIconModule],
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.scss']
+})
+export class CarouselComponent implements AfterViewInit, OnDestroy, OnChanges {
+  @Input() data: any[] = [];
+  @ViewChildren('cardItem') cardItems!: QueryList<ElementRef>;
+  @ViewChild('scrollContainer') scrollContainer!: ElementRef<HTMLElement>;
+
+  originalItems: any[] = [];
+  displayItems: any[] = [];
+
+  constructor(
+    private ngZone: NgZone,
+    private dialog: MatDialog
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['data'] && this.data) {
+      this.buildCarouselItems();
+    }
+  }
+
+  buildCarouselItems() {
+    const mappedData = this.data.map((item, index) => {
+      return {
+        title: item.Carouselheading || item.Description || 'Untitled',
+        img: item.ImageURL,
+        ...item
+      };
+    });
+    this.originalItems = mappedData;
+    let loopList = [...mappedData];
+    // If you have 2 items, we duplicate them until we have at least 12.
+    const MIN_ITEMS = 12;
+    if (loopList.length > 0) {
+      while (loopList.length < MIN_ITEMS) {
+        loopList = [...loopList, ...loopList];
+      }
+    }
+    //CREATE 3 SETS: [Left Buffer] [Middle (Active)] [Right Buffer]
+    this.displayItems = [...loopList, ...loopList, ...loopList];
+  }
+
+  ngAfterViewInit() {
+    this.ngZone.runOutsideAngular(() => {
+      const container = this.scrollContainer?.nativeElement;
+      if (container) {
+        container.addEventListener('scroll', this.onScroll.bind(this));
+        setTimeout(() => {
+          if (container.scrollWidth > 0) {
+            const singleSetWidth = container.scrollWidth / 3;
+            container.scrollLeft = singleSetWidth;
+            this.onScroll({ target: container } as any);
+          }
+        }, 50);
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    const container = this.scrollContainer?.nativeElement;
+    if (container) {
+      container.removeEventListener('scroll', this.onScroll.bind(this));
+    }
+  }
+
+  onScroll(event: Event) {
+    const container = event.target as HTMLElement;
+    if (!container) return;
+
+    requestAnimationFrame(() => {
+      const totalWidth = container.scrollWidth;
+      const singleSetWidth = totalWidth / 3;
+      const currentScroll = container.scrollLeft;
+
+      if (currentScroll < 100) {
+        container.scrollLeft = currentScroll + singleSetWidth;
+      } else if (currentScroll >= singleSetWidth * 2 - 100) {
+        container.scrollLeft = currentScroll - singleSetWidth;
+      }
+      const containerRect = container.getBoundingClientRect();
+      if (containerRect.width === 0) return;
+
+      this.cardItems.forEach(item => {
+        const el = item.nativeElement;
+        const rect = el.getBoundingClientRect();
+        const cardCenter = rect.left - containerRect.left + rect.width / 2;
+        const containerCenter = containerRect.width / 2;
+        const distance = Math.abs(containerCenter - cardCenter);
+
+        const activeZone = 400;
+        const minWidth = 200;
+        const maxWidth = 500;
+        let currentWidth = minWidth;
+        let opacity = 0.7;
+
+        if (distance < activeZone) {
+          const factor = 1 - distance / activeZone;
+          currentWidth = minWidth + (maxWidth - minWidth) * factor;
+          opacity = 0.7 + 0.3 * factor;
+        }
+
+        el.style.flexBasis = `${currentWidth}px`;
+        el.style.minWidth = `${currentWidth}px`;
+        el.style.opacity = `${opacity}`;
+      });
+    });
+  }
+}

packages/Mediaco-overrides/gallery-grid/gallery-grid-component.html

@@ -0,0 +1,19 @@
+<div class="dialog-content">
+  <div class="dialog-header">
+    <h2 mat-dialog-title>All Content</h2>
+    <button mat-icon-button (click)="close()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+
+  <div *ngIf="data.dataPage === 'D_CarouselitemList'" mat-dialog-content class="grid-container">
+    <div class="grid-item" *ngFor="let item of data.items">
+      <img [src]="item.ImageURL" alt="Item Image" />
+      <p>{{ item.Carouselheading }}</p>
+    </div>
+  </div>
+
+  <div *ngIf="data.dataPage === 'D_AccountHistoryList'" class="grid">
+    <table-template-card *ngFor="let item of data.items; trackBy: trackByTitle; index as i" [data]="item" [index]="i"> </table-template-card>
+  </div>
+</div>

packages/Mediaco-overrides/gallery-grid/gallery-grid-component.scss

@@ -0,0 +1,88 @@
+:host {
+  display: block;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #fff;
+  flex-shrink: 0;
+
+  h2 {
+    margin: 0;
+    font-size: 22px;
+    font-weight: 500;
+  }
+}
+
+.grid-container {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 20px;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.grid-item {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+  height: 240px;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  img {
+    width: 100%;
+    height: 160px;
+    object-fit: cover;
+    display: block;
+  }
+
+  p {
+    margin: 0;
+    padding: 16px;
+    text-align: center;
+    font-weight: 500;
+    color: #333;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 18px;
+  padding: 12px;
+  overflow-y: scroll;
+
+  @media (min-width: 900px) {
+    grid-template-columns: 1fr 1fr;
+    gap: 22px;
+  }
+}

packages/Mediaco-overrides/gallery-grid/gallery-grid.component.ts

@@ -0,0 +1,27 @@
+import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { TableTemplateCardComponent } from './table-template-card/table-template-card';
+
+@Component({
+  selector: 'app-gallery-grid',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, MatIconModule, MatButtonModule, TableTemplateCardComponent],
+  templateUrl: './gallery-grid-component.html',
+  styleUrls: ['./gallery-grid-component.scss']
+})
+export class GalleryGridComponent {
+  trackByTitle = (_: number, item: { title: string }) => item.title;
+
+  // Inject the data passed from the parent component
+  constructor(
+    public dialogRef: MatDialogRef<GalleryGridComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { items: any[]; dataPage: string }
+  ) {}
+
+  close() {
+    this.dialogRef.close();
+  }
+}

packages/Mediaco-overrides/gallery-grid/table-template-card/table-template-card.html

@@ -0,0 +1,11 @@
+<mat-card class="m-card">
+  <div class="m-row">
+    <div class="m-icon" [ngClass]="'bg-' + index">
+      <img class="m-icon-img" [src]="data.icon" [ngClass]="'color-' + index" />
+    </div>
+    <div class="m-content">
+      <div class="m-title">{{ data.title }}</div>
+      <div class="m-desc">{{ data.description }}</div>
+    </div>
+  </div>
+</mat-card>