@hivegpt/hiveai-angular 0.0.372 → 0.0.373

package/projects/hivegpt/eventsgpt-angular/src/lib/components/chatbot/chatbot.component.html

@@ -0,0 +1,37 @@
+<button mat-icon-button class="chat-button" color="primary" (click)="toggle()">
+  <mat-icon>chat</mat-icon>
+</button>
+
+<ng-container *ngIf="visible">
+  <hivegpt-chat-drawer
+  [apiKey]="apiKey"
+  [bgBubbleAi]="bgBubbleAi"
+  [bgBubbleUser]="bgBubbleUser"
+  [bgGradient]="bgGradient"
+  [botName]="botName"
+  [closeButtonbgColor]="closeButtonbgColor"
+  [closeButtonColor]="closeButtonColor"
+  [credentials]="credentials"
+  [dateTextColor]="dateTextColor"
+  [dateTimeColor]="dateTimeColor"
+  [eventId]="eventId"
+  [eventName]="eventName"
+  [formFieldBgColor]="formFieldBgColor"
+  [formFieldTextColor]="formFieldTextColor"
+  [fullView]="fullView"
+  [greeting]="greeting"
+  [gradientColors]="gradientColors"
+  [messageTextColorAi]="messageTextColorAi"
+  [messageTextColorUser]="messageTextColorUser"
+  [sendButtonColor]="sendButtonColor"
+  [sendButtonTextColor]="sendButtonTextColor"
+  [showClose]="showClose"
+  [thumbsDownMessages]="thumbsDownMessages"
+  [thumbsUpMessage]="thumbsUpMessage"
+  [unknownResponses]="unknownResponses"
+  [useOpenAi]="useOpenAi"
+  [userId]="userId"
+  [botId]="botId"
+  >
+  </hivegpt-chat-drawer>
+</ng-container>

package/projects/hivegpt/eventsgpt-angular/src/lib/components/chatbot/chatbot.component.scss

@@ -0,0 +1,97 @@
+/* width */
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #e5ccbc;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #e5ccbc;
+}
+
+
+.spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+.spinner>div {
+  width: 5px;
+  height: 5px;
+  background-color: #173330;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
+  animation: bouncedelay 1400ms ease-in-out infinite;
+  /* Prevent first frame from flickering when animation starts */
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes bouncedelay {
+
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes bouncedelay {
+
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+
+
+.chat-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: #17235B;
+  border: #17235B;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  font-size: 24px;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/projects/hivegpt/eventsgpt-angular/src/lib/components/chatbot/chatbot.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input } from '@angular/core';
+@Component({
+  selector: 'hivegpt-chatbot',
+  templateUrl: './chatbot.component.html',
+  styleUrls: ['./chatbot.component.scss'],
+})
+export class ChatBotComponent {
+  @Input() userId!: string;
+  @Input() apiKey!: string;
+  @Input() botName!: string;
+  @Input() botSkills!: string;
+  @Input() botId!: string;
+  @Input() closeButtonColor!: string;
+  @Input() gradientColors!: string[];
+  @Input() greeting!: string;
+  @Input() sendButtonColor!: string;
+  @Input() useOpenAi!: boolean;
+  @Input() showClose!: boolean;
+  @Input() bgGradient!: string[];
+  @Input() sendButtonTextColor!: string;
+  @Input() fullView!: boolean;
+  @Input() bgBubbleAi!: string;
+  @Input() bgBubbleUser!: string;
+  @Input() closeButtonbgColor!: string;
+  @Input() messageTextColorAi!: string;
+  @Input() messageTextColorUser!: string;
+  @Input() dateTimeColor!: string;
+  @Input() dateTextColor!: string;
+  @Input() formFieldBgColor!: string;
+  @Input() formFieldTextColor!: string;
+  @Input() thumbsUpMessage!: string;
+  @Input() thumbsDownMessages!: string[];
+  @Input() timezone!: string;
+  @Input() eventName!: string;
+  @Input() credentials!: [];
+  @Input() unknownResponses!: [];
+  @Input() rules!: string;
+  @Input() eventId!: string;
+  visible = false;
+
+  toggle() {
+    this.visible = !this.visible;
+  }
+}

package/projects/hivegpt/eventsgpt-angular/src/lib/components/conversation.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConversationService } from './conversation.service';
+
+describe('ConversationService', () => {
+  let service: ConversationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ConversationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/projects/hivegpt/eventsgpt-angular/src/lib/components/conversation.service.ts

@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConversationService {
+  private conversationStorageKeyPrefix = 'conversationKey_';
+  private sessionStorageKeyPrefix = 'sessionKey_';
+
+  private userSpecificNotification: Subject<any> = new Subject<any>();
+
+  constructor() { }
+
+  generateKey(): string {
+    const timestamp = Math.floor(new Date().getTime() / 1000).toString(16);
+    const randomHex = 'xxxxxxxxxxxxxxxx'.replace(/[x]/g, () => {
+      return Math.floor(Math.random() * 16).toString(16);
+    });
+    return timestamp + randomHex;
+  }
+
+  getKey(botId: string, resetKey: boolean = false): string {
+    const storageKey = `${this.conversationStorageKeyPrefix}${botId}`;
+    let value = localStorage.getItem(storageKey);
+
+    if (!value || resetKey) {
+      value = this.generateKey();
+      localStorage.setItem(storageKey, value);
+    }
+
+    return value;
+  }
+
+  getSessionKey(sessionId: string, resetKey: boolean = false): string {
+    const storageKey = `${this.sessionStorageKeyPrefix}${sessionId}`;
+    let value = localStorage.getItem(storageKey);
+
+    if (!value || resetKey) {
+      value = this.generateKey();
+      localStorage.setItem(storageKey, value);
+    }
+
+    return value;
+  }
+
+  sendValidatedUserData(message: any) {
+    this.userSpecificNotification.next(message);
+  }
+
+  getUserSpecificNotification(): Observable<any> {
+    return this.userSpecificNotification.asObservable();
+  }
+}

package/projects/hivegpt/eventsgpt-angular/src/lib/components/socket-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SocketServiceService } from './socket-service.service';
+
+describe('SocketServiceService', () => {
+  let service: SocketServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SocketServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/projects/hivegpt/eventsgpt-angular/src/lib/components/socket-service.service.ts

@@ -0,0 +1,77 @@
+import { Injectable } from '@angular/core';
+
+import { Observable, Subject } from 'rxjs';
+import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
+import { ConversationService } from './conversation.service';
+import { NotificationSocket } from './NotificationSocket';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SocketService {
+  public testMessage: string;
+  private isCommonSocketInitialized = false;
+  private isUserSpecificSocketInitialized = false;
+  private isUserSpecificEventReleased = true;
+  private messageQueue: any[] = [];
+  private releaseInterval = 1000;
+  private intervalSetup: boolean = false;
+
+  constructor(
+    private conversationService: ConversationService,
+    private notificationSocket: NotificationSocket
+  ) {
+    this.startReleasingMessages();
+  }
+
+  isSocketInitialized(isCommon: boolean) {
+    return isCommon
+      ? this.isCommonSocketInitialized
+      : this.isUserSpecificSocketInitialized &&
+      !this.isUserSpecificEventReleased;
+  }
+
+  disconnectSocketConnection() {
+    this.notificationSocket.disconnect();
+  }
+  connectSocketConnection() {
+    this.notificationSocket.connect();
+  }
+  registerUserSpecificHiveSocket(botId: string, conversation_id: string, org_id: string) {
+    const commonNotification = 'commonNotification';
+    const groupId = `Hive_AI_Notifs_${botId}_${conversation_id}`;
+    const groupId_org = `Hive_AI_Notifs_${org_id}`;
+
+    // Remove any pre-existing listeners for commonNotification
+    // this.notificationSocket.removeAllListeners(commonNotification);
+
+    // Join the group again with updated botId and conversation_id
+    this.notificationSocket.emit('joinData', { groupId });
+    this.notificationSocket.emit('joinData', { groupId: groupId_org });
+
+    // Re-register for common notifications
+    this.notificationSocket.fromEvent(commonNotification).subscribe(
+      (res) => {
+        console.log('Received commonNotification:', res);
+        this.conversationService.sendValidatedUserData(res);
+      },
+      (error) => {
+        console.error('Error receiving commonNotification:', error);
+      }
+    );
+  }
+
+  private startReleasingMessages() {
+    if (!this.intervalSetup) {
+      setInterval(() => {
+        if (this.messageQueue.length > 0) {
+          const message = this.messageQueue.shift(); // Remove the first message from the queue
+          // Handle the message here, e.g., send it to the server or process it
+          console.log('Releasing message from queue:', message);
+          // this.campaignService.sendValidatedUserData(message);
+        }
+      }, this.releaseInterval);
+      this.intervalSetup = true; // Prevents multiple intervals
+    }
+  }
+}

package/projects/hivegpt/eventsgpt-angular/src/lib/components/translations/translation.service.ts

@@ -0,0 +1,268 @@
+import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TranslationService {
+  private eventId: string | null = null;
+
+  setEventId(id: string) {
+    this.eventId = id;
+  }
+
+  getTranslation(key: string): string {
+    console.log('eventId', this.eventId);
+    // let lang = String(this.getLang(this.eventId)).replace(/^"|"$/g, '');
+    const lang = (
+      localStorage.getItem('defaultLanguage-' + this.eventId) || 'en'
+    ).replace(/^"|"$/g, '');
+
+    const entry = this.translationsData.find((item) => item.Key === key);
+
+    if (!entry) {
+      return key; // fallback
+    }
+
+    return entry.Translations[lang] || entry.DefaultValue || key;
+  }
+
+  private getLang(eventId?: string | null): string {
+    const suffix = eventId ? `-${eventId}` : '';
+    const storageKey = `defaultLanguage${suffix}`;
+
+    return localStorage.getItem(storageKey) || 'en';
+  }
+
+  private translationsData: any[] = [
+    { 
+  Key: "Copy",
+  DefaultValue: "Copy",
+  Translations: {
+    en: "Copy",
+    fr: "Copier",
+    it: "Copia",
+    es: "Copiar",
+    de: "Kopieren",
+    "pt-br": "Copiar",
+    ar: "نسخ",
+    zh: "复制",
+    ru: "Копировать"
+  }
+}
+,
+    {
+    
+    Key: "May I assist you with anything else",
+    DefaultValue: "Great. May I assist you with anything else?",
+    Translations: {
+        en: "Great. May I assist you with anything else?",
+        fr: "Parfait. Puis-je vous aider avec autre chose ?",
+        it: "Perfetto. Posso aiutarti con qualcos'altro?",
+        es: "Genial. ¿Puedo ayudarte con algo más?",
+        de: "Super. Kann ich Ihnen noch bei etwas anderem helfen?",
+        "pt-br": "Ótimo. Posso ajudar com mais alguma coisa?",
+        ar: "رائع. هل يمكنني مساعدتك في أي شيء آخر؟",
+        zh: "太好了。还有什么我可以帮您的吗？",
+        ru: "Отлично. Могу ли я помочь вам с чем-то ещё?"
+    }
+},
+    {
+    Key: "We are sorry we've not been able to answer your question",
+    DefaultValue: "We are sorry we've not been able to answer your question. However, our dedicated support team is happy to help. Please <a href=\"mailto:support@social27.com\">click here</a> and a human agent will assist you as soon as possible.",
+    Translations: {
+        en: "We are sorry we've not been able to answer your question. However, our dedicated support team is happy to help. Please <a href=\"mailto:support@social27.com\">click here</a> and a human agent will assist you as soon as possible.",
+        fr: "Nous sommes désolés de ne pas avoir pu répondre à votre question. Cependant, notre équipe d'assistance se fera un plaisir de vous aider. Veuillez <a href=\"mailto:support@social27.com\">cliquer ici</a> et un agent humain vous assistera dès que possible.",
+        it: "Ci dispiace di non essere riusciti a rispondere alla tua domanda. Tuttavia, il nostro team di supporto dedicato sarà lieto di aiutarti. Ti preghiamo di <a href=\"mailto:support@social27.com\">fare clic qui</a> e un operatore umano ti assisterà al più presto.",
+        es: "Lamentamos no haber podido responder a tu pregunta. Sin embargo, nuestro equipo de soporte estará encantado de ayudarte. Por favor, <a href=\"mailto:support@social27.com\">haz clic aquí</a> y un agente humano te asistirá lo antes posible.",
+        de: "Es tut uns leid, dass wir Ihre Frage nicht beantworten konnten. Unser engagiertes Support-Team hilft Ihnen jedoch gerne weiter. Bitte <a href=\"mailto:support@social27.com\">klicken Sie hier</a>, und ein menschlicher Mitarbeiter wird Ihnen so bald wie möglich helfen.",
+        "pt-br": "Lamentamos não ter conseguido responder à sua pergunta. No entanto, nossa equipe de suporte dedicada ficará feliz em ajudar. Por favor, <a href=\"mailto:support@social27.com\">clique aqui</a> e um agente humano o ajudará o mais rápido possível.",
+        ar: "نأسف لعدم تمكننا من الإجابة على سؤالك. ومع ذلك، يسعد فريق الدعم المخصص لدينا بمساعدتك. يرجى <a href=\"mailto:support@social27.com\">النقر هنا</a> وسيساعدك أحد الوكلاء البشريين في أقرب وقت ممكن.",
+        zh: "很抱歉我们未能回答您的问题。不过，我们的专属支持团队很乐意为您提供帮助。请<a href=\"mailto:support@social27.com\">点击这里</a>，人工客服将尽快为您提供协助。",
+        ru: "К сожалению, мы не смогли ответить на ваш вопрос. Однако наша служба поддержки с радостью вам поможет. Пожалуйста, <a href=\"mailto:support@social27.com\">нажмите здесь</a>, и наш оператор свяжется с вами как можно скорее."
+    }
+},
+    {
+      Key: 'Ask anything',
+      DefaultValue: 'Ask anything',
+      Translations: {
+        en: 'Ask anything',
+        fr: 'Demandez ce que vous voulez',
+        it: 'Chiedi qualsiasi cosa',
+        es: 'Pregunta lo que quieras',
+        de: 'Frag alles',
+        'pt-br': 'Pergunte qualquer coisa',
+        ar: 'اسأل أي شيء',
+        zh: '随便问',
+        ru: 'Спросите что угодно',
+      },
+    },
+    {
+      Key: 'Assistant',
+      DefaultValue: 'Assistant',
+      Translations: {
+        en: 'Assistant',
+        fr: 'Assistant',
+        it: 'Assistente',
+        es: 'Asistente',
+        de: 'Assistent',
+        'pt-br': 'Assistente',
+        ar: 'مساعد',
+        zh: '助手',
+        ru: 'Ассистент',
+      },
+    },
+    {
+      Key: 'Your personal or company information is kept private and secure within this chat.',
+      DefaultValue:
+        'Your personal or company information is kept private and secure within this chat.',
+      Translations: {
+        en: 'Your personal or company information is kept private and secure within this chat.',
+        fr: 'Vos informations personnelles ou celles de votre entreprise sont conservées privées et sécurisées dans cette conversation.',
+        it: "Le tue informazioni personali o aziendali sono mantenute private e sicure all'interno di questa chat.",
+        es: 'Tu información personal o de la empresa se mantiene privada y segura dentro de este chat.',
+        de: 'Ihre persönlichen oder geschäftlichen Informationen bleiben in diesem Chat privat und sicher.',
+        'pt-br':
+          'Suas informações pessoais ou da empresa são mantidas privadas e seguras dentro deste chat.',
+        ar: 'تظل معلوماتك الشخصية أو معلومات شركتك خاصة وآمنة داخل هذه المحادثة.',
+        zh: '您的个人或公司信息在此聊天中保持私密和安全。',
+        ru: 'Ваша личная или корпоративная информация остается конфиденциальной и защищенной в этом чате.',
+      },
+    },
+    {
+      Key: 'Send message',
+      DefaultValue: 'Send message',
+      Translations: {
+        en: 'Send message',
+        fr: 'Envoyer un message',
+        it: 'Invia messaggio',
+        es: 'Enviar mensaje',
+        de: 'Nachricht senden',
+        'pt-br': 'Enviar mensagem',
+        ar: 'إرسال رسالة',
+        zh: '发送消息',
+        ru: 'Отправить сообщение',
+      },
+    },
+    {
+      Key: 'Platform GPT',
+      DefaultValue: 'Platform GPT',
+      Translations: {
+        en: 'Platform GPT',
+        fr: 'Plateforme GPT',
+        it: 'Piattaforma GPT',
+        es: 'Plataforma GPT',
+        de: 'Plattform GPT',
+        'pt-br': 'Plataforma GPT',
+        ar: 'منصة GPT',
+        zh: '平台 GPT',
+        ru: 'Платформа GPT',
+      },
+    },
+    {
+      Key: 'New Chat',
+      DefaultValue: 'New Chat',
+      Translations: {
+        en: 'New Chat',
+        fr: 'Nouvelle conversation',
+        it: 'Nuova chat',
+        es: 'Nuevo chat',
+        de: 'Neuer Chat',
+        'pt-br': 'Novo chat',
+        ar: 'محادثة جديدة',
+        zh: '新聊天',
+        ru: 'Новый чат',
+      },
+    },
+    {
+      Key: 'You',
+      DefaultValue: 'You',
+      Translations: {
+        en: 'You',
+        fr: 'Vous',
+        it: 'Tu',
+        es: 'Tú',
+        de: 'Du',
+        'pt-br': 'Você',
+        ar: 'أنت',
+        zh: '您',
+        ru: 'Вы',
+      },
+    },
+    {
+      Key: 'Write your message',
+      DefaultValue: 'Write your message',
+      Translations: {
+        en: 'Write your message',
+        fr: 'Écrivez votre message',
+        it: 'Scrivi il tuo messaggio',
+        es: 'Escribe tu mensaje',
+        de: 'Schreiben Sie Ihre Nachricht',
+        'pt-br': 'Escreva sua mensagem',
+        ar: 'اكتب رسالتك',
+        zh: '写下您的消息',
+        ru: 'Напишите ваше сообщение',
+      },
+    },
+    {
+      Key: 'Send',
+      DefaultValue: 'Send',
+      Translations: {
+        en: 'Send',
+        fr: 'Envoyer',
+        it: 'Invia',
+        es: 'Enviar',
+        de: 'Senden',
+        'pt-br': 'Enviar',
+        ar: 'إرسال',
+        zh: '发送',
+        ru: 'Отправить',
+      },
+    },
+    {
+      Key: 'Call Interface',
+      DefaultValue: 'Call Interface',
+      Translations: {
+        en: 'Call Interface',
+        fr: "Interface d'appel",
+        it: 'Interfaccia chiamata',
+        es: 'Interfaz de llamada',
+        de: 'Anrufoberfläche',
+        'pt-br': 'Interface de chamada',
+        ar: 'واجهة الاتصال',
+        zh: '呼叫界面',
+        ru: 'Интерфейс звонка',
+      },
+    },
+    {
+      Key: 'Call Interface',
+      DefaultValue: 'Call Interface',
+      Translations: {
+        en: 'Call Interface',
+        fr: "Interface d'appel",
+        it: 'Interfaccia chiamata',
+        es: 'Interfaz de llamada',
+        de: 'Anrufoberfläche',
+        'pt-br': 'Interface de chamada',
+        ar: 'واجهة الاتصال',
+        zh: '呼叫界面',
+        ru: 'Интерфейс звонка',
+      },
+    },
+    {
+      Key: 'Close',
+      DefaultValue: 'Close',
+      Translations: {
+        en: 'Close',
+        fr: 'Fermer',
+        it: 'Chiudi',
+        es: 'Cerrar',
+        de: 'Schließen',
+        'pt-br': 'Fechar',
+        ar: 'إغلاق',
+        zh: '关闭',
+        ru: 'Закрыть',
+      },
+    },
+  ];
+}

package/projects/hivegpt/eventsgpt-angular/src/lib/components/video-player/video-player.component.html

@@ -0,0 +1,51 @@
+<div class="video-wrapper" >
+  <div class="overlymask-video"></div>
+  <video (click)="toggleFullscreen()" #video [loop]="true" [muted]="isMuted" [src]="videoObj.processedUrls || videoObj.url" playsinline
+    [controls]="false"></video>
+    <div class="main-controls" [class.no-opacity]="video.isPlaying">
+      <button mat-icon-button  *ngIf="!videoObj.isPlaying"
+      attr.aria-label="Play Video"
+      title="Play Video" class="play-pause-btn"
+      (click)="togglePlay(true, video)">
+      <!-- <mat-icon alt="Play">play_arrow</mat-icon> -->
+      <span class="material-icons notranslate  " aria-hidden="true">play_circle_outline</span>
+    </button>
+
+    <button mat-icon-button id="pause-btn" [hidden]="!videoObj.isPlaying" class="pause_btn play-pause-btn playing"
+      title="Pause Video"
+      [class.half-opacity]="video.isPlaying" (click)="togglePlay(false, video)">
+      <!-- <mat-icon alt="Pause">pause</mat-icon> -->
+      <span class="material-icons notranslate  " aria-hidden="true">pause_circle_outline</span>
+    </button>
+    </div>
+  <div class="video-actions">
+    <button class="button-trasparent action" (click)="toggleSound()" title="Mute" *ngIf="isMuted">
+      <span class="material-icons notranslate  " aria-hidden="true">volume_off</span>
+    </button>
+    <button class="button-trasparent action" (click)="toggleSound()" title="Unmute" *ngIf="!isMuted">
+      <span class="material-icons notranslate  " aria-hidden="true">volume_up</span>
+    </button>
+
+  </div>
+</div>
+
+<div class="full-screen" *ngIf="isFullscreen" [ngClass]="{'show': isFullscreen}">
+  <div class="video-wrapper">
+    <video #fullscreenvideo (click)="toggleFullscreenPlay()" [loop]="true" [muted]="isMuted" [src]="videoObj.processedUrls || videoObj.url"
+      playsinline [controls]="false"></video>
+      <div (click)="toggleFullscreen()" class="close-btn">
+        <span class="material-icons notranslate  ">clear</span>
+      </div>
+    <div class="video-actions">
+      <button  *ngIf="!video.isPlaying" title="Play"
+      class="material-icons notranslate   body-text-color fs-h2 play position-absolute transparent-btn" (click)="togglePlay(true, video)">
+      play_circle_outline
+    </button>
+    <button id="pause-btn" [hidden]="!videoObj.isPlaying" title="Pause"
+      class="pause_btn material-icons body-text-color fs-h2 play position-absolute transparent-btn"
+      [class.half-opacity]="video.isPlaying" (click)="togglePlay(false, video)">
+      pause_circle_outline
+    </button>
+    </div>
+  </div>
+</div>